/* ─── SAR Reisefinder (kompakt) ────────────────────── */

.sar-finder-compact {
	--sar-orange: #e87722;
	--sar-navy: #1a3a5c;
	--sar-gray: #e5e5e5;
	--sar-gray-dark: #999;
	--sar-field-h: 48px;

	background: transparent;
	padding: 0;
	border: 0;
	position: relative;
}

/* ─── USP-Zeile (optional, über der Bar) ─────────── */

/* Einzeilige Aufzählung mit Mittelpunkt-Separatoren (·) auf weißem Hintergrund.
   Optisch ein Block mit der Bar: volle Breite, weißer BG, gleiche Seitenränder
   wie die Bar, keine Lücke dazwischen. Der Padding-Links sitzt so, dass der
   erste USP auf einer Flucht mit dem Text im Autocomplete-Input startet
   (Bar-padding 6px + Input-padding-left 16px = 22px). Umrandung oben/seiten
   wie Bar, Unterkante trennt nur eine schmale Linie von der Bar — so wirken
   beide wie ein zusammenhängendes Karten-Element. */
/* Neve-Theme setzt global `.nv-content-wrap ul { margin: 30px 0 }` (Spezifität
   0,0,1,1) — daher hier absichtlich ebenfalls eine Zwei-Klassen-Spezifität
   mit Element-Selektor (`ul.sar-finder-compact__usps` innerhalb der
   `.sar-finder-compact`-Wurzel, 0,0,2,1). Eine einfache Klasse reicht
   nicht — Neves Regel würde den Margin-Reset sonst überschreiben. */
.sar-finder-compact ul.sar-finder-compact__usps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	list-style: none;
	margin: 0;
	padding: 0 0 0.44rem 10px;
	background: #1a3a5c;
	font-size: 13px;
	line-height: 1;
	color:#ffffff;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
}

.sar-finder-compact__usp {
	position: relative;
	/* Separator rechts neben jedem Element; gap sorgt für den Abstand, der
	   Mittelpunkt sitzt exakt in der Lücke. */
	padding-right: 14px;
}

.sar-finder-compact__usp::after {
	content: "·";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate( 50%, -50% );
	color: var(--sar-orange);
	font-weight: 700;
	pointer-events: none;
}

.sar-finder-compact__usp:last-child {
	padding-right: 0;
}

.sar-finder-compact__usp:last-child::after {
	content: "";
}

/* ─── Kompakte Bar: immer sichtbar ───────────────── */

.sar-finder-compact__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	background: #fff;
	border: 0;
	padding: 6px;
	border-radius: 0;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.06 );
	/* Stacking:
	     bar  z-index: 3  ← muss über Ausklapp-Panel liegen, damit die
	                        Autocomplete-Vorschläge den geöffneten Filter
	                        überdecken.
	     expanded  z-index: 2
	     tab-wrap  z-index: 1
	   Zusätzlich fällt der eigene Box-Shadow leicht über die Tab-Oberkante
	   und lässt die Lasche „hinten" wirken. */
	position: relative;
	z-index: 3;
}

.sar-finder-compact__autocomplete {
	position: relative;
	flex: 1 1 260px;
	min-width: 0;
}

.sar-finder-compact__input {
	width: 100%;
	height: var(--sar-field-h);
	padding: 0 16px;
	background: #fff;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	box-sizing: border-box;
	outline: none;
}

.sar-finder-compact__input:focus {
	box-shadow: inset 0 -2px 0 var(--sar-orange);
}

.sar-finder-compact__suggestions {
	position: absolute;
	/* Klebt direkt unter dem Input — nur 1px Luft für die visuelle Trennung.
	   Breite = Autocomplete-Container (Input-Breite). */
	top: calc( 100% - 24px );
	left: 0;
	right: 0;
	/* Sehr hoher z-index: darf die „Weitere Filter"-Lasche überdecken. */
	z-index: 100;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	background: #fff;
	border: 1px solid var(--sar-gray);
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	max-height: 340px;
	overflow-y: auto;
}

.sar-finder-compact__suggestion {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.3;
}

.sar-finder-compact__suggestion.is-active,
.sar-finder-compact__suggestion:hover {
	background: #f7fafd;
}

.sar-finder-compact__suggestion-name {
	flex: 1 1 auto;
	color: var(--sar-navy);
}

.sar-finder-compact__suggestion-type {
	flex: 0 0 auto;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sar-gray-dark);
	background: #f3f3f3;
	padding: 2px 8px;
	border-radius: 3px;
}

.sar-finder-compact__submit {
	flex: 0 0 auto;
	height: var(--sar-field-h);
	background: var(--sar-navy);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	transition: background 0.15s;
}

.sar-finder-compact__submit:hover {
	background: var(--sar-orange);
}

/* ─── Reisekalender-Link (in der Bar, rechts vom Submit) ─── */

.sar-finder-compact__calendar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--sar-field-h);
	padding: 0 14px;
	color: var(--sar-navy);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.sar-finder-compact__calendar:hover {
	color: var(--sar-orange);
}

.sar-finder-compact__calendar-icon {
	flex: 0 0 auto;
}

/* ─── "Weitere Filter"-Lasche (hängt unten — wandert unter Ausklapp mit) ─── */

.sar-finder-compact__tab-wrap {
	display: flex;
	justify-content: center;
	/* Niedriger Stack als die Bar → der Box-Shadow der Bar legt sich leicht
	   über die Tab-Oberkante und die Lasche wirkt „ein Stück weiter hinten". */
	position: relative;
	z-index: 1;
	/* Die Lasche schiebt sich leicht hinter die Unterkante des darüberliegenden
	   Elements (Bar bzw. Ausklapp-Block). */
	margin-top: -3px;
}

.sar-finder-compact__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 18px;
	background: #fff;
	/* Blasser als bisher — die Lasche soll nicht um Aufmerksamkeit kämpfen. */
	color: #8c97a3;
	border: 1px solid var(--sar-gray);
	border-top: 0;                 /* Oben offen — „sitzt" auf der Bar/dem Panel */
	border-radius: 0 0 12px 12px;  /* Untere Ecken abgerundet */
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	/* Sehr leichter Schatten — dominiert nicht, unterstützt nur die 3D-Optik. */
	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 );
	transition: color 0.15s, background 0.15s;
}

.sar-finder-compact__toggle:hover {
	color: var(--sar-orange);
	background: #fafbfd;
}

.sar-finder-compact__toggle:focus-visible {
	outline: 2px solid var(--sar-orange);
	outline-offset: 2px;
}

.sar-finder-compact__toggle-icon {
	display: inline-block;
	transition: transform 0.2s;
	font-size: 12px;
	line-height: 1;
}

.sar-finder-compact.is-expanded .sar-finder-compact__toggle-icon {
	transform: rotate( 180deg );
}

/* ─── Ausklapp-Bereich: direkt an der Bar, smooth ein-/ausklappend ──── */

.sar-finder-compact__expanded {
	/* Kein margin-top → klebt nahtlos unter der Bar.
	   Animation via grid-template-rows-Trick (Chrome 111+, Safari 16+, FF 121+).
	   In älteren Browsern: instant, aber ohne Ruckler. */
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
	position: relative;
	z-index: 2; /* gleich hoch wie Bar → Lasche bleibt dahinter */
}

.sar-finder-compact.is-expanded .sar-finder-compact__expanded {
	grid-template-rows: 1fr;
}

.sar-finder-compact__expanded-inner {
	/* Muss min-height: 0 sein, sonst funktioniert das Grid-Kollabieren nicht. */
	min-height: 0;
	overflow: hidden;
	/* Eigentliches Panel-Aussehen hier, nicht am Outer. */
	background: #fafbfd;
	border: 0;
	/* Padding per-state: im geschlossenen Zustand 0 → sonst Randspalt sichtbar. */
	padding: 0 20px;
	transition: padding 0.25s ease;
}

.sar-finder-compact.is-expanded .sar-finder-compact__expanded-inner {
	padding: 20px;
}

.sar-finder-compact__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px 24px;
}

@media ( min-width: 900px ) {
	.sar-finder-compact__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.sar-finder-compact__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sar-finder-compact__field--checks {
	/* Sitzt neben dem Anspruch-Slider in der 3. Spalte — nicht mehr volle Breite.
	   Zwei Checkboxen stapeln sich; falls genug Platz ist, rutschen sie nebeneinander. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	/* Kleiner Versatz, damit die erste Checkbox optisch auf Höhe der Slider-Bahn
	   startet (statt auf Höhe der Feld-Labels der Nachbarspalten). */
	padding-top: 22px;
}

.sar-finder-compact__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--sar-navy);
}

.sar-finder-compact__select,
.sar-finder-compact__input-text {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--sar-gray);
	border-radius: 0;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}

.sar-finder-compact__select {
	-moz-appearance: none; /* Firefox: nativen Select-Pfeil unterdrücken (kein Doppel-Pfeil) */
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23666'><path d='M6 8L0 0h12z'/></svg>" );
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 7px;
	padding-right: 30px;
}

.sar-finder-compact__select:focus,
.sar-finder-compact__input-text:focus {
	outline: none;
	border-color: var(--sar-orange);
	box-shadow: 0 0 0 2px rgba( 232, 119, 34, 0.15 );
}

/* Slider (gleiche Mechanik wie im großen Finder) */
.sar-finder-compact__slider {
	position: relative;
	height: 30px;
	margin-top: 4px;
}

.sar-finder-compact__slider-track,
.sar-finder-compact__slider-range {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 6px;
	transform: translateY( -50% );
	pointer-events: none;
}

.sar-finder-compact__slider-track {
	background: var(--sar-gray);
}

.sar-finder-compact__slider-range {
	background: var(--sar-orange);
}

.sar-finder-compact__slider-input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
	transform: translateY( -50% );
	z-index: 2;
}

.sar-finder-compact__slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 3px solid var(--sar-orange);
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
}

.sar-finder-compact__slider-input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: #fff;
	border: 3px solid var(--sar-orange);
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
}

.sar-finder-compact__slider-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 12px;
	color: var(--sar-gray-dark);
}

/* Checkboxen */
.sar-finder-compact__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.sar-finder-compact__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sar-orange);
	cursor: pointer;
}

/* HDZ-Combo: Checkbox plus inline Select. Select disabled = ausgegraut.
   Custom-Pfeil per inline-SVG, damit der Dropdown-Charakter unabhängig
   vom Theme sichtbar ist. */
.sar-finder-compact__hdz-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-left: 0px;
	padding: 1px 28px 1px 8px;
	border: 1px solid #eee;
	border-radius: 3px;
	background-color: #fff;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23333' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>" );
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px 6px;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
}

.sar-finder-compact__hdz-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-left: 0;
    padding: 1px 28px 1px 8px;
    border: 1px solid #eee;

}





.sar-finder-compact__hdz-select:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Aktionen im Ausklapp-Bereich */
.sar-finder-compact__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 20px;
}

.sar-finder-compact__reset {
	text-decoration: none;
	padding: 8px 4px;
	color: var(--sar-navy);
	font-size: 14px;
}

.sar-finder-compact__reset:hover {
	text-decoration: underline;
	color: var(--sar-orange);
}

/* Flatpickr-Alt-Input (gleiche Optik wie unsere Felder) */
.sar-finder-compact input.flatpickr-alt-input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--sar-gray);
	border-radius: 0;
	font-family: inherit;
	box-sizing: border-box;
}

/* „×"-Clear am Zeitraum-Feld. Liegt rechts über dem (unten im Feld stehenden)
   Eingabefeld; per JS nur sichtbar, wenn ein Zeitraum gewählt ist. */
.sar-finder-compact__field--has-clear {
	position: relative;
}

.sar-finder-compact__field--has-clear input.flatpickr-alt-input {
	padding-right: 34px;
}

.sar-finder-compact__date-clear {
	position: absolute;
	right: 4px;
	bottom: 0;
	height: 40px;
	width: 30px;
	display: none; /* JS schaltet auf flex */
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sar-gray-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}

.sar-finder-compact__date-clear:hover,
.sar-finder-compact__date-clear:focus-visible {
	color: var(--sar-orange);
}

/* Editor-Vorschau */
.sar-travel-finder-compact-editor-preview {
	background: #f7fafd;
	border: 1px solid #d7e1ec;
	border-radius: 6px;
	padding: 16px 18px;
}

/* ─── Mobile ─────────────────────────────────────── */

@media ( max-width: 640px ) {
	/* USPs mobil ausblenden — werden separat (an anderer Stelle) dargestellt. */
	.sar-finder-compact ul.sar-finder-compact__usps {
		display: none;
	}

	/* Bar: Eingabe volle Breite (umbrechend), darunter beide Buttons
	   NEBENEINANDER. Bewusst KEIN flex-direction:column — dort würde
	   flex-basis (260px) der Autocomplete als HÖHE wirken und den großen
	   Leerraum unter dem Input erzeugen. Ohne USP-Leiste oben: alle Ecken rund. */
	.sar-finder-compact__bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		border-radius: 5px;
	}
	.sar-finder-compact__autocomplete {
		flex: 1 1 100%;
	}
	.sar-finder-compact__submit,
	.sar-finder-compact__calendar {
		flex: 1 1 0;
		width: auto;
		justify-content: center;
		border-top: 0;
	}

	/* Ausklapp-Filter: Anspruch-Slider und Checkboxen je über die volle
	   Breite (eigene Zeile), Checkboxen darunter gestapelt. */
	.sar-finder-compact__field--slider,
	.sar-finder-compact__field--checks {
		grid-column: 1 / -1;
	}
	.sar-finder-compact__field--checks {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-top: 0;
	}
	.sar-finder-compact__field--checks .sar-finder-compact__check {
		width: 100%;
	}

	/* „Weitere Filter" dockt wie auf dem Desktop an die Box — daher KEINE
	   eigenen tab-wrap/toggle-Overrides mehr (Desktop-Stil greift). */
}

/* ─── Flatpickr-Theme ──────────────────────────────────────────────────
   Der Kalender wird an <body> angehängt (außerhalb des Blocks), daher
   greifen die --sar-*-Variablen nicht – die Hex-Fallbacks sind maßgeblich.
   Hier gespiegelt, damit der Kompakt-Finder denselben Look wie der große
   Finder hat (Header navy, Jahr/Wochentage weiß, Auswahl orange). */
.flatpickr-calendar {
	border-radius: 0;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.15 );
}

.flatpickr-months {
	background: var( --sar-navy, #1a3a5c ) !important;
	border-radius: 0;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
	fill: #fff;
}

.flatpickr-weekdays,
span.flatpickr-weekday {
	background: var( --sar-navy, #1a3a5c ) !important;
}

/* Header-Text weiß: sichtbarer Monat (Select-Anzeige) + Jahr + Wochentage. */
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
	color: #fff !important;
}

/* Geöffnete Monats-Optionen bleiben dunkel (auf weißem Grund lesbar). */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	color: #1a3a5c;
}

/* Markierung im Monats-Select: helleres Blau → SAR-Navy. */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover,
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:checked,
.flatpickr-monthDropdown-months option:checked {
	background: var( --sar-navy, #1a3a5c );
	color: #fff;
}

.flatpickr-day {
	border-radius: 0;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var( --sar-orange, #e87722 ) !important;
	border-color: var( --sar-orange, #e87722 ) !important;
	color: #fff;
}

.flatpickr-day.inRange {
	background: #fde8d6;
	border-color: #fde8d6;
	box-shadow: -5px 0 0 #fde8d6, 5px 0 0 #fde8d6;
}

.flatpickr-day:hover {
	background: #f0f0f0;
}

.flatpickr-day.today {
	border-color: var( --sar-orange, #e87722 );
}

.flatpickr-day.today:hover {
	background: var( --sar-orange, #e87722 );
}