/**
 * Geiping Vorbestellung – Formular.
 */

.gpv-products__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.gpv-products__table th,
.gpv-products__table td {
	padding: 10px 8px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.gpv-products__table th {
	font-weight: 600;
	font-size: 0.9em;
}

.gpv-products__qty-head,
.gpv-product-row__qty {
	width: 120px;
}

.gpv-product-row__name {
	display: block;
	font-weight: 500;
	cursor: pointer;
}

.gpv-product-row__info {
	display: block;
	margin-bottom: 2px;
	font-size: 0.85em;
	line-height: 1.3;
	opacity: 0.8;
}

.gpv-product-row__rule {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
}

.gpv-product-row__note {
	display: block;
	font-size: 0.85em;
	opacity: 0.65;
}

.wpforms-container .gpv-products .gpv-product-qty {
	width: 100%;
	max-width: 120px;
}

.gpv-product-row--unavailable {
	opacity: 0.45;
}

.gpv-product-row--unavailable .gpv-product-row__note {
	opacity: 1;
	font-style: italic;
}

.gpv-products__empty,
.gpv-time-hint {
	margin-top: 6px;
	font-size: 0.9em;
	opacity: 0.75;
}

/* Stückpreis und Summe: rechtsbündig, ohne Umbruch. */
.gpv-products__price-head,
.gpv-products__sum-head,
.gpv-product-row__price,
.gpv-product-row__sum {
	text-align: right !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gpv-products__price-head,
.gpv-product-row__price {
	width: 100px;
}

.gpv-products__sum-head,
.gpv-product-row__sum {
	width: 110px;
}

.gpv-product-row__sum {
	font-weight: 600;
}

/*
 * Mobil (≤ 600 px): jede Produktzeile wird zu einer Karte.
 *
 *   Produktname                 [ Menge ]
 *   max. 2.000 Stück
 *   Stückpreis 1,50 €        Summe 18,00 €
 *
 * Selektoren mit .wpforms-container, damit sie Theme-Regeln
 * wie „.gpv .gpv-products td“ übersteuern.
 */
@media (max-width: 600px) {
	.wpforms-container .gpv-products .gpv-products__table,
	.wpforms-container .gpv-products .gpv-products__table tbody {
		display: block;
		width: 100%;
		border: 0;
	}

	.wpforms-container .gpv-products .gpv-products__table thead {
		display: none;
	}

	.wpforms-container .gpv-products .gpv-products__table tr.gpv-product-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name  qty"
			"price sum";
		align-items: center;
		column-gap: 12px;
		row-gap: 10px;
		padding: 12px;
		border: 1px solid currentColor;
		border-color: rgba(255, 255, 255, 0.9);
		margin: 0 0 8px;
	}

	.wpforms-container .gpv-products .gpv-products__table tr.gpv-product-row td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	.wpforms-container .gpv-products .gpv-products__table td:first-child {
		grid-area: name;
		min-width: 0;
	}

	.wpforms-container .gpv-products .gpv-products__table .gpv-product-row__name {
		line-height: 1.3;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	.wpforms-container .gpv-products .gpv-products__table .gpv-product-row__qty {
		grid-area: qty;
	}

	.wpforms-container .gpv-products .gpv-products__table .gpv-product-row__price {
		grid-area: price;
		font-size: 0.9em;
	}

	.wpforms-container .gpv-products .gpv-products__table .gpv-product-row__sum {
		grid-area: sum;
		text-align: right !important;
	}

	/* Beschriftung vor Stückpreis und Summe (statt Tabellenkopf). */
	.wpforms-container .gpv-products .gpv-products__table .gpv-product-row__price::before,
	.wpforms-container .gpv-products .gpv-products__table .gpv-product-row__sum::before {
		content: attr(data-label) " ";
		font-weight: 400;
		opacity: 0.75;
	}

	.wpforms-container .gpv-products .gpv-product-qty {
		width: 88px !important;
		max-width: 88px;
		text-align: center;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	.wpforms-container .gpv-products .gpv-product-row--unavailable {
		opacity: 0.55;
	}
}

/* Abholuhrzeit: Platzhalter-Optik, solange keine Uhrzeit gewählt ist. */
.wpforms-container .wpforms-form select.gpv-time--placeholder,
div.wpforms-container-full .wpforms-form select.gpv-time--placeholder {
	color: rgba(0, 0, 0, 0.4);
	color: color-mix(in srgb, var(--wpforms-field-text-color, currentColor) 50%, transparent);
}

/* Die Uhrzeiten in der aufgeklappten Liste behalten die normale Schriftfarbe. */
.wpforms-container .wpforms-form select.gpv-time--placeholder option,
div.wpforms-container-full .wpforms-form select.gpv-time--placeholder option {
	color: var(--wpforms-field-text-color, #3c434a);
}

/* Produkte für den anderen Kundentyp (auch in der mobilen Kartenansicht). */
.wpforms-container .gpv-products .gpv-product-row--hidden,
.gpv-product-row[hidden] {
	display: none !important;
}

/* Keine Produkte für den gewählten Kundentyp: Tabelle samt Kopfzeile ausblenden. */
.wpforms-container .gpv-products .gpv-products__table[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Abholtermine (je Produktgruppe Datum + Uhrzeit)
 * ------------------------------------------------------------------- */

/* Höhere Spezifität, da WPForms Abstände im Formular zurücksetzt. */
.wpforms-container .gpv-products .gpv-pickups {
	margin-top: 24px;
}

.wpforms-container .gpv-products .gpv-pickups__title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 16px;
}

.wpforms-container .gpv-products .gpv-pickups__intro {
	margin: 0 0 12px;
	font-size: 14px;
	opacity: 0.9;
}

.wpforms-container .gpv-pickups fieldset.gpv-pickup {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.wpforms-container .gpv-pickups .gpv-pickup__title {
	padding: 0 4px;
	font-weight: 600;
}

.gpv-pickup__products,
.gpv-pickup__rule {
	margin: 0 0 6px;
	font-size: 0.9em;
}

.gpv-pickup__rule {
	font-weight: 600;
}

.gpv-pickup__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.gpv-pickup__field {
	flex: 1 1 200px;
	min-width: 0;
}

.wpforms-container .gpv-pickup .gpv-pickup__label {
	display: block;
	margin: 0 0 4px;
	font-size: 0.9em;
	font-weight: 600;
}

.wpforms-container .gpv-pickup .gpv-pickup__field input,
.wpforms-container .gpv-pickup .gpv-pickup__field select {
	width: 100%;
	max-width: 100%;
}

.gpv-pickup__hint[hidden] {
	display: none;
}