/*
 * AB Lieferung
 *
 * Eigene Variablen mit denselben Werten wie im Kontobereich, damit das
 * Plugin auch ohne "AB Mein Konto" richtig aussieht.
 */

:root {
	--ab-lf-card: #ffffff;
	--ab-lf-card-alt: #f6f3f2;
	--ab-lf-ink: #1c1b1b;
	--ab-lf-ink-strong: #26170c;
	--ab-lf-ink-muted: #4f453f;
	--ab-lf-ink-soft: #81756e;
	--ab-lf-line: #e5e2e1;
	--ab-lf-line-strong: #d2c4bc;
	--ab-lf-accent: #d4af37;
	--ab-lf-accent-dark: #a8871f;
	--ab-lf-ok: #2f5d3a;
	--ab-lf-warn-bg: #fdf6e3;
	--ab-lf-warn-line: #e6cf8a;
	--ab-lf-radius: 4px;
	--ab-lf-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--ab-lf-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
 * 1. Hinweisbausteine
 * ---------------------------------------------------------------------- */

body .ab-lf-note {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var( --ab-lf-line );
	border-left: 3px solid var( --ab-lf-accent );
	border-radius: var( --ab-lf-radius );
	background-color: var( --ab-lf-card-alt );
	font-family: var( --ab-lf-sans );
	color: var( --ab-lf-ink );
}

/*
 * Themes setzen in der Bestelluebersicht gern white-space: nowrap, damit
 * Betraege nicht umbrechen. Erbt unser Hinweis das, laeuft die Ueberschrift
 * aus der Spalte heraus und die Tabelle (overflow: hidden) schneidet sie ab.
 * Gemessen: Ueberschrift 362 px breit in einer 188 px schmalen Zelle.
 */
body .ab-lf-note,
body .ab-lf-note * {
	white-space: normal;
	overflow-wrap: break-word;
	text-align: left;
}

body .ab-lf-note--away {
	border-left-color: var( --ab-lf-accent-dark );
}

body .ab-lf-note--warn {
	background-color: var( --ab-lf-warn-bg );
	border-color: var( --ab-lf-warn-line );
	border-left-color: var( --ab-lf-accent-dark );
}

body .ab-lf-note--info {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

body .ab-lf-note__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background-color: var( --ab-lf-accent-dark );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-5.8 7-11.3A7 7 0 005 10.2c0 5.5 7 11.3 7 11.3z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-5.8 7-11.3A7 7 0 005 10.2c0 5.5 7 11.3 7 11.3z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

body .ab-lf-note__title {
	margin: 0 0 6px;
	font-family: var( --ab-lf-serif );
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --ab-lf-ink-strong );
}

body .ab-lf-note__text {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var( --ab-lf-ink-muted );
}

body .ab-lf-note__text:last-child {
	margin-bottom: 0;
}

body .ab-lf-note__text--small {
	font-size: 13.5px;
	color: var( --ab-lf-ink-soft );
}

body .ab-lf-note strong,
body .ab-lf-note .amount,
body .ab-lf-note bdi {
	color: var( --ab-lf-ink-strong );
	font-weight: 600;
}

/*
 * In der Bestelluebersicht steckt die Meldung sonst in der schmalen
 * Betragsspalte. Sie ist aber der wichtigste Satz der ganzen Seite und
 * bekommt deshalb die volle Breite.
 */
body .shop_table tr:has( .ab-lf-note ) th {
	display: none;
}

body .shop_table tr:has( .ab-lf-note ) td {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

body .shop_table tr:has( .ab-lf-note ) .ab-lf-note {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 2. Terminfeld an der Kasse
 * ---------------------------------------------------------------------- */

body .ab-lf-field {
	box-sizing: border-box;
	font-family: var( --ab-lf-sans );
	margin: 24px 0 0;
	padding: 20px;
	border: 1px solid var( --ab-lf-line );
	border-radius: var( --ab-lf-radius );
	background-color: var( --ab-lf-card );
}

body .ab-lf-field--hidden {
	display: none;
}

body .ab-lf-field__label {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var( --ab-lf-ink-strong );
}

body .ab-lf-field__label label {
	font-weight: inherit;
}

body .ab-lf-field__label .required {
	border: 0;
	text-decoration: none;
	color: var( --ab-lf-accent-dark );
}

body .ab-lf-field__select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 40px 12px 14px;
	border: 1px solid var( --ab-lf-line-strong );
	border-radius: var( --ab-lf-radius );
	background-color: var( --ab-lf-card );
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234f453f' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	font-family: var( --ab-lf-sans );
	font-size: 15px;
	line-height: 1.4;
	color: var( --ab-lf-ink );
	appearance: none;
	-webkit-appearance: none;
}

body .ab-lf-field__select:focus {
	outline: none;
	border-color: var( --ab-lf-accent );
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.22 );
}

body .ab-lf-field__hint {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --ab-lf-ink-soft );
}

/* -------------------------------------------------------------------------
 * 3. Termin in Bestaetigung und Konto
 * ---------------------------------------------------------------------- */

body .ab-lf-summary {
	box-sizing: border-box;
	font-family: var( --ab-lf-sans );
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: baseline;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var( --ab-lf-line );
	border-radius: var( --ab-lf-radius );
	background-color: var( --ab-lf-card-alt );
}

body .ab-lf-summary__label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ab-lf-ink-soft );
}

body .ab-lf-summary__value {
	font-size: 15px;
	font-weight: 600;
	color: var( --ab-lf-ink-strong );
}

/* -------------------------------------------------------------------------
 * 4. Postleitzahl-Pruefung
 * ---------------------------------------------------------------------- */

body .ab-lf-check {
	box-sizing: border-box;
	max-width: 460px;
	padding: 22px 24px;
	border: 1px solid var( --ab-lf-line );
	border-radius: var( --ab-lf-radius );
	background-color: var( --ab-lf-card );
	font-family: var( --ab-lf-sans );
	box-shadow: 0 1px 2px rgba( 61, 43, 31, 0.04 ), 0 8px 24px rgba( 61, 43, 31, 0.06 );
}

body .ab-lf-check * {
	box-sizing: border-box;
}

body .ab-lf-check__title {
	margin: 0 0 14px;
	font-family: var( --ab-lf-serif );
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --ab-lf-ink-strong );
}

body .ab-lf-check__row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

body .ab-lf-check__input {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid var( --ab-lf-line-strong );
	border-radius: var( --ab-lf-radius );
	background: transparent;
	font-family: var( --ab-lf-sans );
	font-size: 16px;
	line-height: 1.2;
	color: var( --ab-lf-ink );
}

body .ab-lf-check__input:focus {
	outline: none;
	border-color: var( --ab-lf-accent );
}

body .ab-lf-check__btn {
	flex: 0 0 auto;
	height: auto;
	margin: 0;
	padding: 12px 22px;
	border: 1px solid var( --ab-lf-accent );
	border-radius: var( --ab-lf-radius );
	background-color: var( --ab-lf-accent );
	color: var( --ab-lf-ink-strong );
	font-family: var( --ab-lf-sans );
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body .ab-lf-check__btn:hover {
	background-color: var( --ab-lf-accent-dark );
	border-color: var( --ab-lf-accent-dark );
	color: #ffffff;
}

body .ab-lf-check__result {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var( --ab-lf-ink-muted );
}

body .ab-lf-check__result:empty {
	display: none;
}

body .ab-lf-check.is-yes .ab-lf-check__result {
	color: var( --ab-lf-ok );
}

body .ab-lf-check.is-no .ab-lf-check__result {
	color: var( --ab-lf-accent-dark );
}

body .ab-lf-check__area {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var( --ab-lf-line );
	font-size: 13px;
	line-height: 1.5;
	color: var( --ab-lf-ink-soft );
}

@media ( max-width: 480px ) {

	body .ab-lf-note,
	body .ab-lf-field,
	body .ab-lf-check {
		padding: 14px 16px;
	}

	body .ab-lf-check__row {
		flex-direction: column;
	}

	body .ab-lf-check__btn {
		width: 100%;
	}
}