/**
 * SAR Buchungsformular — Front-End Styles.
 *
 * BEM-artige Klassen mit Prefix `.sar-bf-…` (Booking-Form). Der Block
 * benutzt CSS-Variablen aus dem Customerarea-Stylesheet wenn verfügbar,
 * fällt sonst auf eigene Defaults zurück.
 */

.sar-booking-form {
	--sar-bf-primary:        var(--sar-primary,        #0c2c5c);
	--sar-bf-primary-hover:  var(--sar-primary-hover,  #0a2349);
	--sar-bf-text:           var(--sar-text,           #222);
	--sar-bf-text-muted:     var(--sar-text-muted,     #666);
	--sar-bf-border:         var(--sar-border,         #d0d4dc);
	--sar-bf-bg-soft:        var(--sar-bg-soft,        #f5f7fb);
	--sar-bf-success-border: var(--sar-success-border, #58a96a);
	--sar-bf-error-bg:       var(--sar-error-bg,       #fbeaea);
	--sar-bf-error-border:   var(--sar-error-border,   #d04545);
	--sar-bf-radius:         8px;

	margin: 2rem 0;
	color: var(--sar-bf-text);
	font-size: 1rem;
	line-height: 1.5;
}

/* Checkboxen & Radiobuttons in der gesamten Buchung in Marken-Orange. */
.sar-booking-form input[type="checkbox"],
.sar-booking-form input[type="radio"] {
	accent-color: #F55D03;
}

.sar-bf-empty {
	padding: 2rem;
	background: var(--sar-bf-bg-soft);
	border-radius: var(--sar-bf-radius);
	text-align: center;
}

.sar-bf-empty__back {
	display: inline-block;
	margin-top: 1rem;
	padding: 8px 16px;
	background: var(--sar-bf-primary);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
}

/* ─── Banner ───────────────────────────────────────────────────────── */
.sar-bf-banner {
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: var(--sar-bf-radius);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.sar-bf-banner__toggle {
	display: none;
	width: 100%;
	padding: 0.75rem 1rem;
	background: transparent;
	border: none;
	font-weight: 600;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	color: var(--sar-bf-text);
}

.sar-bf-banner__toggle svg {
	transition: transform 0.2s;
}

.sar-bf-banner__toggle[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

.sar-bf-banner__body {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem;
}

.sar-bf-banner__image {
	flex: 0 0 200px;
	max-height: 200px;
	overflow: hidden;
	border-radius: 6px;
}

.sar-bf-banner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sar-bf-banner__meta {
	flex: 1;
	min-width: 0;
}

.sar-bf-banner__country {
	font-size: 0.85rem;
	color: var(--sar-bf-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sar-bf-banner__tourcode {
	color: var(--sar-bf-text-muted);
}

.sar-bf-banner__title {
	margin: 0.25rem 0 0.25rem 0;
	font-size: 1.4rem;
	color: var(--sar-bf-primary);
}

.sar-bf-banner__subtitle {
	color: var(--sar-bf-text-muted);
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
}

.sar-bf-banner__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 0.5rem;
}

.sar-bf-banner__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 110px;
}

.sar-bf-banner__fact-label {
	font-size: 0.75rem;
	color: var(--sar-bf-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sar-bf-banner__fact-value {
	font-weight: 600;
}

.sar-bf-banner__kombi {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--sar-bf-border);
}

.sar-bf-banner__kombi-label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
}

.sar-bf-banner__kombi-entry {
	display: flex;
	gap: 0.75rem;
	font-size: 0.9rem;
	margin-bottom: 0.25rem;
}

.sar-bf-banner__kombi-dates,
.sar-bf-banner__kombi-price {
	color: var(--sar-bf-text-muted);
}

/* Kopf-Status-Zeile (Anfrage-Hinweis) über dem Reise-Banner, volle Breite. */
.sar-bf-status {
	margin: 0 0 1rem;
	padding: 0.7rem 1rem;
	background: rgba(255, 200, 100, 0.15);
	border-left: 4px solid #d29800;
	border-radius: 4px;
	font-size: 0.95rem;
	color: #1d2327;
}

@media (max-width: 720px) {
	.sar-bf-banner__toggle {
		display: flex;
	}
	.sar-bf-banner__body {
		flex-direction: column;
	}
	.sar-bf-banner__image {
		flex: none;
		max-height: 160px;
	}
	.sar-bf-banner[data-collapsed] .sar-bf-banner__body {
		display: none;
	}
}

/* ─── Step-Indikator (Segmentbalken, Design "1b" aus Claude Design,
   25.08.2026). Acht flache Segmente statt Kreise, Beschriftung darunter.
   Zustände (Klassen setzt view.js/showStep): is-completed = grün,
   is-active = navy, Hover auf klickbaren, nicht aktiven Schritten =
   orange, sonst Schiene. Mobil (<= 720px) entfallen die Beschriftungen
   ersatzlos: direkt unter dem Stepper steht ohnehin die gleichlautende
   Schritt-Überschrift (Sebastian, 25.08.2026). ─────────────────────── */
.sar-bf-stepper {
	--sar-bf-stepper-bar-h:  6px;
	--sar-bf-stepper-rail:   #e7eaee;
	--sar-bf-stepper-muted:  #8a9099;
	--sar-bf-stepper-hover:  #F55D03;

	list-style: none;
	margin: 0 0 2rem 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	position: relative;
	gap: 7px;
}

.sar-bf-stepper__item {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}

/* Item ist klickbarer Button (Navigation, Regeln in view.js) */
.sar-bf-stepper__btn {
	width: 100%;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	color: var(--sar-bf-stepper-muted);
	font: inherit;
	transition: color 0.2s;
}

/* Kein orange Hintergrund-Kasten (Theme-Button-Hover neutralisieren). */
.sar-booking-form .sar-bf-stepper__btn,
.sar-booking-form .sar-bf-stepper__btn:hover,
.sar-booking-form .sar-bf-stepper__btn:focus {
	background: transparent;
	box-shadow: none;
}

.sar-bf-stepper__btn:disabled {
	cursor: not-allowed;
}

.sar-bf-stepper__btn:focus-visible {
	outline: 2px solid var(--sar-bf-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Das Segment */
.sar-bf-stepper__bar {
	display: block;
	height: var(--sar-bf-stepper-bar-h);
	border-radius: calc(var(--sar-bf-stepper-bar-h) / 2);
	background: var(--sar-bf-stepper-rail);
	transition: background 0.25s;
}

.sar-bf-stepper__label {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.25;
	color: inherit;
	hyphens: auto;
	-webkit-hyphens: auto;
	transition: color 0.2s;
}

/* Hover: nur auf klickbaren Schritten, die nicht der aktuelle sind. */
.sar-bf-stepper__item:not(.is-active) .sar-bf-stepper__btn:hover:not(:disabled) {
	color: var(--sar-bf-stepper-hover);
}
.sar-bf-stepper__item:not(.is-active) .sar-bf-stepper__btn:hover:not(:disabled) .sar-bf-stepper__bar {
	background: var(--sar-bf-stepper-hover);
}

/* Erledigt: grün */
.sar-bf-stepper__item.is-completed .sar-bf-stepper__btn {
	color: var(--sar-bf-success-border);
}
.sar-bf-stepper__item.is-completed .sar-bf-stepper__bar {
	background: var(--sar-bf-success-border);
}

/* Aktuell: navy */
.sar-bf-stepper__item.is-active .sar-bf-stepper__btn {
	color: var(--sar-bf-primary);
}
.sar-bf-stepper__item.is-active .sar-bf-stepper__bar {
	background: var(--sar-bf-primary);
}

/* Übersprungen (Anmeldung bei eingeloggten Kunden) */


@media (max-width: 720px) {
	.sar-bf-stepper {
		gap: 6px;
		margin-bottom: 1.5rem;
	}
	.sar-bf-stepper__label {
		display: none;
	}
}

/* ─── Form / Steps ─────────────────────────────────────────────────── */
.sar-bf-step {
	display: none;
}

.sar-bf-step.is-active {
	display: block;
}

.sar-bf-step__title {
	margin: 0 0 0.5rem 0;
	color: var(--sar-bf-primary);
}

.sar-bf-step__intro {
	margin: 0 0 1.5rem 0;
	color: var(--sar-bf-text-muted);
}

.sar-bf-step__placeholder {
	padding: 2rem;
	text-align: center;
	color: var(--sar-bf-text-muted);
	background: var(--sar-bf-bg-soft);
	border-radius: 6px;
}

.sar-bf-step__error {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--sar-bf-error-bg);
	border-left: 4px solid var(--sar-bf-error-border);
	border-radius: 4px;
	color: var(--sar-bf-error-border);
}

/* ─── Step 1: Stepper-Rows ─────────────────────────────────────────── */
.sar-bf-step1 {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sar-bf-stepper-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sar-bf-counter__btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--sar-bf-primary);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s, opacity 0.15s;
}

.sar-bf-counter__btn:hover:not(:disabled) {
	background: var(--sar-bf-primary-hover);
}

.sar-bf-counter__btn:disabled {
	background: var(--sar-bf-border);
	cursor: not-allowed;
	opacity: 0.6;
}

.sar-bf-counter__value {
	font-weight: 700;
	font-size: 1.1rem;
	min-width: 1.5em;
	text-align: center;
}

.sar-bf-counter__label {
	font-weight: 600;
	margin-left: 4px;
}

/* ─── Zimmer-Cards ─────────────────────────────────────────────────── */
.sar-bf-rooms {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.sar-bf-room {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
}

@media (max-width: 540px) {
	.sar-bf-room {
		grid-template-columns: 1fr;
	}
}

.sar-bf-room label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.sar-bf-room select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	background: #fff;
	font-size: 0.95rem;
}

.sar-bf-room select:focus {
	outline: none;
	border-color: var(--sar-bf-primary);
	box-shadow: 0 0 0 3px rgba(12, 44, 92, 0.15);
}

.sar-bf-room__hint {
	margin: 6px 0 0 0;
	font-size: 0.8rem;
	color: var(--sar-bf-text-muted);
	font-style: italic;
}

/* Aufbettung (nur DZ): steht im Markup nach der Gäste-Zuordnung und landet
   damit in Zeile 2 unter der Zimmerart. Die Reisegäste bleiben oben rechts. */
.sar-bf-room__extrabeds {
	grid-column: 1;
}

/* Belegungs-Anzeige („für 2 Personen") rechts neben der Zimmerart;
   vertikal auf Höhe des Selects (Label-Zeile der Spalte 1 überspringen). */
.sar-bf-room__occupancy {
	align-self: center;
	padding-top: 1.2rem;
	font-weight: 600;
}

@media (max-width: 540px) {
	.sar-bf-room__occupancy {
		padding-top: 0;
	}
}

/* Checkbox-Kachel (heute nur noch Multitermine unter der Zimmerliste). */
.sar-bf-assign-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid var(--sar-bf-border);
	border-radius: 4px;
	font-size: 0.9rem;
	cursor: pointer;
	user-select: none;
}

.sar-bf-assign-check:hover {
	border-color: var(--sar-bf-primary);
}

.sar-bf-assign-check input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

/* Live-Status unter der Zimmerliste (Plätze vs. Reisegäste). */
.sar-bf-rooms-status {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--sar-bf-text-muted);
}

.sar-bf-rooms-status.is-ok {
	color: var(--sar-bf-success-border);
	font-weight: 600;
}

/* ─── Anmelde-Zeile (oben in „Reisende", ehemals eigener Schritt) ──── */
/* Flache Radio-Zeile: Gastbestellung / Anmelden / Kundenlogin erstellen.
   Desktop nebeneinander, mobil untereinander. Die Formulare darunter
   erscheinen erst nach Klick auf die jeweilige Option (view.js). */
.sar-bf-authrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sar-bf-border);
	background: var(--sar-bf-bg-soft);
	border-radius: 6px;
}

.sar-bf-authrow__option {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
	margin: 0;
}

@media (max-width: 720px) {
	.sar-bf-authrow {
		flex-direction: column;
		gap: 0.6rem;
	}
}

/* Aufklappendes Login-/Anlegen-Formular unter der Zeile: volle Breite,
   Inhalte auf dem Desktop nebeneinander, mobil gestapelt. */
.sar-bf-authrow__form {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
}

/* view.js blendet die Formulare per hidden-Attribut ein/aus. Das muss
   auch dann gewinnen, wenn unten ein display:flex gesetzt ist. */
.sar-bf-authrow__form[hidden] {
	display: none !important;
}

.sar-bf-authrow__form label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
}

.sar-bf-authrow__form input[type="email"],
.sar-bf-authrow__form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	margin-top: 4px;
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
	background: #fff;
}

.sar-bf-authrow__form input:focus {
	outline: none;
	border-color: var(--sar-bf-primary);
	box-shadow: 0 0 0 3px rgba(12, 44, 92, 0.15);
}

.sar-bf-authrow__form button[type="submit"] {
	padding: 10px 18px;
	background: var(--sar-bf-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

.sar-bf-authrow__form button[type="submit"]:hover {
	background: var(--sar-bf-primary-hover);
}

.sar-bf-authrow__form .sar-bf-authrow__hint {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--sar-bf-text-muted);
	font-style: italic;
}

/* Kundenlogin erstellen: Desktop E-Mail-Feld und Hinweis nebeneinander. */
.sar-bf-authrow__form[data-path-form="create_account"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
}

.sar-bf-authrow__form[data-path-form="create_account"] label {
	flex: 1 1 260px;
	max-width: 420px;
}

.sar-bf-authrow__form[data-path-form="create_account"] .sar-bf-authrow__hint {
	flex: 1 1 300px;
	margin: 0;
}

/* Login-Sub-Form: Desktop in einer Zeile (E-Mail, Passwort, Anmelden-Button
   unten buendig), Passwort-vergessen darunter ueber die volle Breite. */
.sar-bf-login-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
}

.sar-bf-login-form label {
	flex: 1 1 220px;
}

.sar-bf-login-form__forgot {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.85rem;
}

.sar-bf-login-form__forgot a {
	color: var(--sar-bf-primary);
	margin-right: 6px;
}

.sar-bf-login-form__forgot-hint {
	color: var(--sar-bf-text-muted);
}

/* Beide Formulare mobil wieder gestapelt (nach den Basis-Regeln, damit
   die Ueberschreibung greift). */
@media (max-width: 720px) {
	.sar-bf-login-form {
		flex-direction: column;
		align-items: stretch;
	}

	/* Die 220px-Flex-Basis steuert im Zeilen-Layout die Breite; in der
	   Spalten-Richtung wuerde sie zur Hoehe. Deshalb hier zuruecksetzen. */
	.sar-bf-login-form label {
		flex: 0 0 auto;
	}

	.sar-bf-login-form button[type="submit"] {
		align-self: flex-start;
	}

	.sar-bf-authrow__form[data-path-form="create_account"] label {
		flex-basis: 100%;
		max-width: none;
	}
}

/* ─── Step 3: Reisende-Karten ──────────────────────────────────────── */
.sar-bf-travelers {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sar-bf-traveler {
	border: 1px solid var(--sar-bf-border);
	border-radius: var(--sar-bf-radius);
	background: var(--sar-bf-bg-soft);
	padding: 1.25rem;
}

.sar-bf-traveler__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sar-bf-border);
}

.sar-bf-traveler__title {
	margin: 0;
	color: var(--sar-bf-primary);
	font-size: 1.1rem;
}

.sar-bf-traveler__autofill label {
	font-size: 0.9rem;
	color: var(--sar-bf-text-muted);
}

.sar-bf-traveler__autofill select {
	margin-left: 6px;
	padding: 4px 8px;
	border: 1px solid var(--sar-bf-border);
	border-radius: 4px;
	font-size: 0.9rem;
}

.sar-bf-traveler__group {
	border: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.sar-bf-traveler__group legend {
	font-weight: 600;
	color: var(--sar-bf-primary);
	margin-bottom: 0.5rem;
}

/* "Weitere Angaben": kein Box-in-Box-Look. Das Fieldset bleibt wie die
   übrigen Gruppen ungerahmt, die Fragen darin verlieren ihre Einzel-Boxen
   und laufen wie alle anderen Felder über die volle Breite der Karte. */
.sar-bf-traveler__group--plain-questions .sar-bf-extra-question {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.sar-bf-traveler__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.sar-bf-traveler__row--two {
	grid-template-columns: 1fr 1fr;
}

.sar-bf-traveler__row--three {
	grid-template-columns: minmax(7rem, auto) 1fr 1fr;
}

.sar-bf-traveler__row--name4 {
	grid-template-columns: minmax(6rem, auto) 1fr 1fr 1fr;
}

.sar-bf-traveler__row--contact {
	grid-template-columns: 2fr 1fr;
}

/* Fehler-Markierung am Feld (Validierung) */
.sar-bf-field--error input,
.sar-bf-field--error select,
.sar-bf-field--error textarea,
.sar-bf-field input.is-error,
.sar-bf-field select.is-error {
	border-color: #d33;
	box-shadow: 0 0 0 1px #d33;
}

/* Fehler-Markierung an Gruppen ohne klassisches Eingabefeld
   (Versicherungs-Auswahl, Zusatzfrage, Vorab-Info-Bestätigung, Unterlagenversand) */
.sar-bf-invalid {
	border-radius: 6px;
	outline: 2px solid #d33;
	outline-offset: 3px;
}

.sar-bf-traveler__note {
	margin: 0.25rem 0 0;
	font-size: 0.85em;
	color: #666;
}

.sar-bf-check,
.sar-bf-radio {
	display: block;
	margin: 0.3rem 0;
}

/* „Passdaten später nachreichen" sitzt direkt unter der Überschrift → etwas Abstand zu den Feldern. */
.sar-bf-check--pass-later {
	margin-bottom: 0.8rem;
}

.sar-bf-covid-sub {
	margin-left: 1.5rem;
}

/* Info-Tooltip (Hover/Focus) */
.sar-bf-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	border-radius: 50%;
	background: #002454;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	cursor: help;
	vertical-align: middle;
}

.sar-bf-tip__bubble {
	position: absolute;
	bottom: 135%;
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	max-width: 70vw;
	background: #002454;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	padding: 8px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	z-index: 30;
}

.sar-bf-tip:hover .sar-bf-tip__bubble,
.sar-bf-tip:focus .sar-bf-tip__bubble,
.sar-bf-tip:focus-within .sar-bf-tip__bubble {
	opacity: 1;
	visibility: visible;
}

.sar-bf-traveler__row--street {
	grid-template-columns: 3fr 1fr;
}

.sar-bf-traveler__row--city {
	grid-template-columns: 1fr 3fr;
}

@media (max-width: 540px) {
	.sar-bf-traveler__row--two,
	.sar-bf-traveler__row--three,
	.sar-bf-traveler__row--name4,
	.sar-bf-traveler__row--contact,
	.sar-bf-traveler__row--street,
	.sar-bf-traveler__row--city {
		grid-template-columns: 1fr;
	}
}

.sar-bf-field label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	margin-bottom: 4px;
}

.sar-bf-field input,
.sar-bf-field select,
.sar-bf-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
}

.sar-bf-field input:focus,
.sar-bf-field select:focus,
.sar-bf-field textarea:focus {
	outline: none;
	border-color: var(--sar-bf-primary);
	box-shadow: 0 0 0 3px rgba(12, 44, 92, 0.15);
}

/* Fehlerhafte Felder bleiben auch im Fokus rot markiert (die Fokus-Regel
   oben würde die Fehler-Umrandung sonst blau überschreiben, solange das
   Feld nach dem Auto-Scroll fokussiert ist). */
.sar-bf-field--error input:focus,
.sar-bf-field--error select:focus,
.sar-bf-field--error textarea:focus,
.sar-bf-field input.is-error:focus,
.sar-bf-field select.is-error:focus {
	border-color: #d33;
	box-shadow: 0 0 0 3px rgba(211, 51, 51, 0.2);
}

.sar-bf-field__hint {
	display: block;
	margin-top: 3px;
	font-size: 0.8rem;
	color: var(--sar-bf-text-muted);
}

/* Fehlertext direkt unter dem betroffenen Feld (von view.js eingefügt). */
.sar-bf-field__msg {
	display: block;
	margin-top: 3px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sar-bf-error-border);
}

/* Zusatzleistungen pro Gast (radio/checkbox-Fragen) */
.sar-bf-extra-question {
	margin: 0 0 1rem 0;
	padding: 0.75rem 1rem;
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
}

.sar-bf-extra-question:last-child {
	margin-bottom: 0;
}

.sar-bf-extra-question__label {
	margin: 0 0 0.5rem 0;
	color: var(--sar-bf-text);
}

.sar-bf-extra-question__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 4px 0;
	cursor: pointer;
}

.sar-bf-extra-question__option input {
	flex: 0 0 auto;
	cursor: pointer;
}

/* Freitext-Abfrage (typ=text), z. B. Ausrüstungsgrößen */
.sar-bf-extra-question__text {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	font: inherit;
	resize: vertical;
}

/* Notfallkontakt (Gast 1): keine eigene Box mehr, stattdessen Trennlinien
   darüber und darunter (hr-Optik), damit der Aufklapp-Link nicht untergeht;
   die Felder laufen über die volle Breite der Karte. */
.sar-bf-traveler__details {
	margin: 1rem 0;
	padding: 0.75rem 0;
	border-top: 1px solid var(--sar-bf-border);
	border-bottom: 1px solid var(--sar-bf-border);
}

.sar-bf-traveler__details summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--sar-bf-text-muted);
}

.sar-bf-traveler__details summary:hover {
	color: var(--sar-bf-primary);
}

.sar-bf-traveler__details[open] summary {
	margin-bottom: 0.5rem;
}

/* ─── Step 3: Versicherung (pro Gast) ──────────────────────────────── */
.sar-bf-step3 {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Anreise-Block (seit 17.08.2026 Fieldset in der Gast-Karte von Schritt 3) */
.sar-bf-arrival {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sar-bf-arrival__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	cursor: pointer;
	font-weight: 500;
}

.sar-bf-arrival__option--sub {
	font-weight: normal;
	color: var(--sar-bf-text-muted);
	font-size: 0.95rem;
}

/* Flugangebot-Frage: Label-Zeile + Ja/Nein-Radios */
.sar-bf-arrival__question-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.sar-bf-arrival__radios {
	display: flex;
	gap: 2.5rem;
	margin-top: 0.35rem;
}

.sar-bf-arrival__radios .sar-bf-arrival__option {
	padding: 0.25rem 0;
}

.sar-bf-arrival__sub {
	margin-left: 1.5rem;
	padding-left: 1rem;
	border-left: 2px solid var(--sar-bf-border);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* HTML-Attribut [hidden] muss display:none erzwingen — sonst überschreibt
   das display:flex aus der Klasse oben das hidden-Verhalten. */
.sar-bf-arrival__sub[hidden] {
	display: none;
}

.sar-bf-arrival__hint {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sar-bf-text-muted);
	font-style: italic;
}

/* Step 3: Versicherung */
.sar-bf-insurance-rec {
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-left: 4px solid var(--sar-bf-primary);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.sar-bf-insurance-rec p {
	margin: 0 0 0.5rem 0;
	font-size: 0.95rem;
}

.sar-bf-insurance-rec p:last-child {
	margin-bottom: 0;
}

.sar-bf-insurance-rec__hint {
	font-size: 0.85rem;
	color: var(--sar-bf-text-muted);
}

.sar-bf-insurance {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sar-bf-insurance__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	cursor: pointer;
}

.sar-bf-insurance__option:hover {
	border-color: var(--sar-bf-primary);
}

.sar-bf-insurance__option:has(input[type="radio"]:checked) {
	border-color: var(--sar-bf-primary);
	background: rgba(12, 44, 92, 0.05);
}

/* ─── Step 4: Einreisebestimmungen (Passolution) ───────────────────── */
.sar-bf-step4 {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sar-bf-step4__intro {
	margin: 0;
	color: var(--sar-bf-text);
}

.sar-bf-step4__placeholder {
	padding: 1rem 1.25rem;
	background: var(--sar-bf-bg-soft);
	border: 1px dashed var(--sar-bf-border);
	border-radius: 6px;
	color: var(--sar-bf-text-muted);
	font-size: 0.95rem;
}

/* ─── Step 5: Vorab-Informationen ──────────────────────────────────── */
.sar-bf-step5 {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Doppelte Klasse fuer hoehere Spezifitaet: Theme-Regeln wie
   `.nv-content-wrap ul` setzen sonst ein margin-bottom auf die Liste
   und vergroessern den Abstand zur naechsten Box. */
.sar-bf-step5 .sar-bf-step5__docs {
	list-style: disc inside;
	padding: 1rem 1.25rem;
	margin: 0;
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
}

.sar-bf-step5__docs li {
	margin: 0.4rem 0;
}

.sar-bf-step5__docs a {
	font-weight: 500;
	color: var(--sar-bf-primary);
	text-decoration: underline;
}

.sar-bf-step5__docs-hint {
	color: var(--sar-bf-text-muted);
	font-size: 0.9rem;
}

/* Reiseunterlagen-Versandweg: gleiche Box-Optik wie die Dokumenten-Liste.
   Die legend wird per float aus der Rahmenlinie in den Box-Inhalt geholt. */
.sar-bf-step5__ulversand {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
}

.sar-bf-step5__ulversand legend {
	float: left;
	width: 100%;
	margin: 0 0 0.75rem;
	padding: 0;
	font-weight: 600;
}

.sar-bf-step5__ulversand label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-right: 2.5rem;
	cursor: pointer;
}

.sar-bf-step5__confirm {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 1rem 1.25rem;
	background: var(--sar-bf-bg-soft);
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	cursor: pointer;
	line-height: 1.4;
}

.sar-bf-step5__confirm input[type="checkbox"] {
	margin-top: 4px;
	flex: 0 0 auto;
}

/* ─── Step 6: Anmerkungen ──────────────────────────────────────────── */
.sar-bf-step6 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sar-bf-field-label {
	font-weight: 600;
	font-size: 0.95rem;
}

.sar-bf-step6 textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
	resize: vertical;
	box-sizing: border-box;
	background: #fff;
}

.sar-bf-step6 textarea:focus {
	outline: none;
	border-color: var(--sar-bf-primary);
	box-shadow: 0 0 0 3px rgba(12, 44, 92, 0.15);
}

.sar-bf-step6__hint {
	margin: 0.5rem 0 0 0;
	font-size: 0.85rem;
	color: var(--sar-bf-text-muted);
	font-style: italic;
}

/* ─── Step 7: Zusammenfassung ──────────────────────────────────────── */
.sar-bf-step7 {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sar-bf-sum__block {
	border: 1px solid var(--sar-bf-border);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	background: #fff;
}

.sar-bf-sum__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	gap: 0.5rem;
}

.sar-bf-sum__title {
	margin: 0;
	color: var(--sar-bf-primary);
	font-size: 1rem;
	font-weight: 600;
}

.sar-bf-sum__edit {
	background: transparent;
	border: 1px solid var(--sar-bf-border);
	border-radius: 4px;
	color: var(--sar-bf-text-muted);
	padding: 4px 10px;
	font-size: 0.85rem;
	cursor: pointer;
}

.sar-bf-sum__edit:hover {
	color: var(--sar-bf-primary);
	border-color: var(--sar-bf-primary);
}

/* Label-Spalte: wie max-content, aber auf 45 % der Boxbreite geklemmt.
   Schutz davor, dass ein einzelner langer dt-Text (z. B. eine Frage) die
   Spalte auf Satzbreite aufblaest und alle Werte aus dem sichtbaren
   Bereich schiebt. */
.sar-bf-sum__dl {
	margin: 0;
	display: grid;
	grid-template-columns: fit-content(45%) 1fr;
	gap: 4px 16px;
	font-size: 0.95rem;
}

.sar-bf-sum__dl dt {
	color: var(--sar-bf-text-muted);
	font-weight: 500;
	overflow-wrap: break-word;
}

.sar-bf-sum__dl dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}

/* Zusatzfragen in der Zusammenfassung: volle Breite unter dem Datengrid
   (Frage gedaempft, Antwort darunter). */
.sar-bf-sum__qa {
	margin-top: 0.5rem;
}

.sar-bf-sum__qa-q {
	margin: 0;
	color: var(--sar-bf-text-muted);
	font-weight: 500;
	font-size: 0.95rem;
}

.sar-bf-sum__qa-a {
	margin: 2px 0 0;
	font-size: 0.95rem;
}

.sar-bf-sum__rooms {
	list-style: none;
	margin: 0.5rem 0 0 0;
	padding: 0;
}

.sar-bf-sum__rooms li {
	padding: 4px 0;
	font-size: 0.95rem;
}

.sar-bf-sum__travelers {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sar-bf-sum__traveler {
	padding: 0.75rem 1rem;
	background: var(--sar-bf-bg-soft);
	border-radius: 6px;
}

.sar-bf-sum__name {
	margin: 0 0 0.5rem 0;
	font-size: 0.95rem;
	color: var(--sar-bf-primary);
}

.sar-bf-sum__notes {
	margin: 0;
	white-space: pre-wrap;
	font-size: 0.95rem;
}

.sar-bf-sum__submit-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
}

.sar-bf-sum__submit {
	padding: 14px 28px;
	background: var(--sar-bf-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.sar-bf-sum__submit:hover:not(:disabled) {
	background: var(--sar-bf-primary-hover);
}

.sar-bf-sum__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ─── Erfolgs-Screen ───────────────────────────────────────────────── */
.sar-bf-step--success {
	padding: 0;
}

.sar-bf-success {
	text-align: center;
	padding: 2.5rem 1.5rem;
}

.sar-bf-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--sar-bf-success-border);
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.sar-bf-success__title {
	margin: 0 0 0.75rem 0;
	color: var(--sar-bf-primary);
}

.sar-bf-success__text {
	margin: 0 0 1.5rem 0;
	color: var(--sar-bf-text);
	font-size: 1.05rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.sar-bf-success__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.sar-bf-success__btn {
	padding: 12px 22px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}

.sar-bf-success__btn--primary {
	background: var(--sar-bf-primary);
	color: #fff;
}

.sar-bf-success__btn--primary:hover {
	background: var(--sar-bf-primary-hover);
}

.sar-bf-success__btn--secondary {
	background: transparent;
	color: var(--sar-bf-primary);
	border: 1px solid var(--sar-bf-primary);
}

.sar-bf-success__btn--secondary:hover {
	background: var(--sar-bf-bg-soft);
}

/* ─── Navigation ───────────────────────────────────────────────────── */
.sar-bf-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sar-bf-border);
}

.sar-bf-nav__back,
.sar-bf-nav__next {
	padding: 12px 22px;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.sar-bf-nav__back {
	background: transparent;
	color: var(--sar-bf-text-muted);
}

.sar-bf-nav__back:hover {
	color: var(--sar-bf-primary);
	background: var(--sar-bf-bg-soft);
}

.sar-bf-nav__next {
	background: var(--sar-bf-primary);
	color: #fff;
	margin-left: auto;
}

.sar-bf-nav__next:hover {
	background: var(--sar-bf-primary-hover);
}

/* ── Preisübersicht ─────────────────────────────────────────── */
.sar-bf-price-host {
	margin: 1.25rem 0 0;
}

/* Preisübersicht integriert ins Reise-Banner: randlos, eigener Abschnitt mit Trennlinie, immer sichtbar. */
.sar-bf-banner__price {
	margin: 0;
	border-top: 1px solid var(--sar-bf-border);
}
.sar-bf-banner__price .sar-bf-price {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 1rem 1.25rem;
}

.sar-bf-price {
	border: 1px solid var(--sar-bf-border, #d9dee3);
	border-radius: 8px;
	background: var(--sar-bf-bg-soft, #f6f8fa);
	padding: 0.85rem 1rem;
}

.sar-bf-price__title {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sar-bf-primary, #002454);
}

.sar-bf-price__rows {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.sar-bf-price__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.92rem;
	line-height: 1.35;
}

.sar-bf-price__label {
	color: #444;
}

.sar-bf-price__value {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sar-bf-price__row--total {
	margin-top: 0.4rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--sar-bf-border, #d9dee3);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--sar-bf-primary, #002454);
}

.sar-bf-price__note {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	color: #666;
}

/* ── Zusätzlich buchbare Leistungen ─────────────────────────── */
/* Zusatzleistungen stecken in der Gast-Karte und erben die Optik der
   übrigen Gruppen (.sar-bf-traveler__group: kein Rahmen, Legende als
   Zwischenüberschrift). Eigene Regeln nur noch für Intro + Zeilen. */

.sar-bf-services__intro {
	margin: 0.2rem 0 0.8rem;
	font-size: 0.86rem;
	color: #666;
}

.sar-bf-service {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--sar-bf-border, #eceff2);
}

.sar-bf-service:first-of-type {
	border-top: none;
}

.sar-bf-service__info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.sar-bf-service__name {
	font-weight: 600;
}

.sar-bf-service__price {
	font-size: 0.86rem;
	color: var(--sar-bf-primary, #002454);
}

.sar-bf-service__desc {
	font-size: 0.84rem;
	color: #666;
}

.sar-bf-service__ctrl {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
}

.sar-bf-service__qty {
	min-width: 3.5rem;
	padding: 0.25rem 0.4rem;
}

.sar-bf-service__qty-label {
	font-size: 0.84rem;
	color: #444;
}

@media (max-width: 560px) {
	.sar-bf-service {
		flex-direction: column;
		gap: 0.4rem;
	}
}

/* ── Schritt 6: Einreisebestimmungen (Passolution) ──────────── */
.sar-bf-einreise__loading,
.sar-bf-einreise__hint {
	margin: 0.5rem 0;
	color: #555;
	font-size: 0.95rem;
}

.sar-bf-einreise__nat {
	margin: 0 0 1.5rem;
}

.sar-bf-einreise__nat-title {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--sar-bf-primary, #002454);
	border-bottom: 2px solid var(--sar-bf-border, #d9dee3);
	padding-bottom: 0.3rem;
}

.sar-bf-einreise__country {
	margin: 0 0 1rem;
	padding-left: 0.25rem;
}

.sar-bf-einreise__country-title {
	margin: 0 0 0.4rem;
	font-size: 0.98rem;
	font-weight: 600;
}

.sar-bf-einreise__block {
	border: 1px solid var(--sar-bf-border, #d9dee3);
	border-radius: 6px;
	margin: 0 0 0.4rem;
	background: var(--sar-bf-bg-soft, #f6f8fa);
}

.sar-bf-einreise__block > summary {
	cursor: pointer;
	padding: 0.55rem 0.8rem;
	font-weight: 600;
	list-style: none;
}

.sar-bf-einreise__block > summary::-webkit-details-marker {
	display: none;
}

.sar-bf-einreise__block[open] > summary {
	border-bottom: 1px solid var(--sar-bf-border, #d9dee3);
}

.sar-bf-einreise__content {
	padding: 0.7rem 0.85rem;
	font-size: 0.92rem;
	line-height: 1.5;
	white-space: normal;
}

.sar-bf-einreise__src {
	margin: 0.8rem 0 0;
	font-size: 0.8rem;
	color: #777;
}

/* ─── Adresse ab Gast 2: Radio „wie Gast 1" / „abweichend" ─────────── */

.sar-bf-addr-mode {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin-bottom: 0.7rem;
}

/* ─── Multitermine (buchung_multitermine): weitere Termine mitbuchen ── */

/* Einzelzelt-Abfrage (Step 1, nur bei Terminen mit ezeltzuschlag) */
.sar-bf-tents:empty {
	display: none;
}

.sar-bf-tents {
	margin-top: 1.2rem;
}

.sar-bf-tents__hint {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: var(--sar-bf-text-muted);
	font-style: italic;
}

.sar-bf-multidates {
	margin-top: 1.2rem;
	padding: 0.8rem 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
}

.sar-bf-multidates legend {
	font-weight: 600;
	padding: 0 0.3rem;
}

.sar-bf-multidates [data-role="multidates-list"] {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

/* ─── Datenschutz-Hinweis (Step 7, ueber dem Buchen-Button) ─── */
.sar-bf-privacy {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #50575e;
}

.sar-bf-privacy a {
	color: #1a3a5c;
	text-decoration: underline;
}

/* ─── Mobil: Formular zuerst, Reisedetails darunter ───
   Banner (Bild/Fakten/Kostenuebersicht) steht mobil UNTER dem Formular,
   sonst muss man bei jedem Schritt erst ueber die Reisedetails scrollen.
   Reihenfolge rein per Flex-Order, Desktop unveraendert. */
@media (max-width: 768px) {
	.wp-block-sar-booking-form {
		display: flex;
		flex-direction: column;
	}

	.wp-block-sar-booking-form > .sar-bf-status {
		order: 1;
	}

	.wp-block-sar-booking-form > .sar-bf-stepper {
		order: 2;
	}

	.wp-block-sar-booking-form > .sar-bf-form {
		order: 3;
	}

	.wp-block-sar-booking-form > .sar-bf-banner {
		order: 4;
		margin-top: 28px;
	}
}