/* BrikoScout SmartFilter – Ergaenzung zur vorhandenen Filterleiste (journey.css).
 * Gilt nur fuer freigeschaltete Kategorien (.bs-ux-filter--sf). Farben/Abstaende
 * aus den Variablen von journey.css; keine eigene Gestaltungssprache. */

/* Checkbox-Optionen im Stil der vorhandenen Listenlinks */
.bs-sf-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.bs-sf-opt {
	display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
	color: var(--bs-ux-ink); font-size: 14px; cursor: pointer;
}
.bs-sf-opt:hover { background: var(--bs-ux-soft); }
.bs-sf-opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--bs-ux-green); }
.bs-sf-opt__label { flex: 1 1 auto; }
.bs-sf-opt.is-on { background: #ecf7ef; color: var(--bs-ux-green); font-weight: 700; }
.bs-sf-opt.is-empty { color: var(--bs-ux-muted); opacity: .55; cursor: default; }
.bs-ux-dd--sf > summary .bs-ux-filter__badge { margin-left: 2px; }

/* Desktop: aktive Filter (Chips, "Alle Filter zuruecksetzen") ueber den Filterknoepfen.
 * Aufgeklappte Gruppen oeffnen nach unten und ueberdecken so nur die Produktliste,
 * nie den Zuruecksetzen-Link (Abnahme 17.10.2026). Mobil (Schublade) unveraendert. */
@media (min-width: 768px) {
	.bs-ux-filter--sf { display: flex; flex-direction: column; }
	.bs-ux-filter--sf > .bs-ux-filter__head { order: 0; }
	.bs-ux-filter--sf > .bs-ux-filter__active { order: 1; padding: 0 0 10px; border-top: 0; border-bottom: 1px dashed var(--bs-ux-line); }
	.bs-ux-filter--sf > .bs-ux-filter__panel { order: 2; }
}

/* Schubladen-Kopf/-Fuss nur mobil */
.bs-sf-drawer__head, .bs-sf-drawer__foot { display: none; }

/* Ladezustand beim Austausch per AJAX */
.bs-sf-results[aria-busy="true"] ul.products { opacity: .45; transition: opacity .15s ease; }
.bs-sf-results[aria-busy="true"] { cursor: progress; }

@media (max-width: 767px) {
	/* Mobile Schublade: oeffnet ueber "Filter anzeigen", verdraengt die Liste nicht */
	/* Die Leiste bildet einen eigenen Stapelkontext (journey.css: z-index 20).
	 * Hintergrund und Schublade liegen deshalb BEIDE darin; geoeffnet wird die
	 * ganze Leiste angehoben - auf die Ebene der mobilen Navigation (.bs-nav-drawer
	 * 1000005), ueber den Sticky Header (.bs-nav-preview-header 1000000), sonst
	 * verdeckt er bei hoher Schublade den Schliessen-Knopf (Live-Abnahme 17.10.2026). */
	.bs-ux-filter--sf.is-js.is-open { z-index: 1000005; }
	.bs-ux-filter--sf.is-js.is-open::before {
		content: ""; position: fixed; inset: 0; z-index: 0; background: rgba(16, 21, 21, .45);
	}
	.bs-ux-filter--sf.is-js.is-open .bs-ux-filter__panel {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
		display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px;
		max-height: 88vh; max-height: 88dvh; margin: 0; padding: 0 16px 0;
		overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
		background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(16, 21, 21, .22);
	}
	/* In der hoehenbegrenzten Spalte nichts stauchen (sonst ueberlappen die Gruppen) */
	.bs-ux-filter--sf.is-js.is-open .bs-ux-filter__panel > * { flex-shrink: 0; }
	/* Beim Scrollen nicht unter Kopf/Fuss der Schublade verschwinden */
	.bs-ux-filter--sf.is-open .bs-ux-dd > summary, .bs-ux-filter--sf.is-open .bs-sf-opt { scroll-margin-top: 76px; scroll-margin-bottom: 84px; }
	.bs-ux-filter--sf.is-open .bs-sf-drawer__head {
		display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2;
		margin: 0 -16px; padding: 14px 16px 10px; background: #fff; border-bottom: 1px solid var(--bs-ux-line);
	}
	.bs-sf-drawer__title { margin: 0; font-weight: 800; font-size: 17px; color: var(--bs-ux-ink); }
	.bs-sf-drawer__close {
		min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: var(--bs-ux-soft);
		color: var(--bs-ux-ink); font-size: 26px; line-height: 1; cursor: pointer;
	}
	.bs-ux-filter--sf.is-open .bs-sf-drawer__foot {
		display: block; position: sticky; bottom: 0; z-index: 2; margin: 4px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--bs-ux-line);
	}
	.bs-sf-drawer__apply {
		width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: var(--bs-ux-green);
		color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
	}
	.bs-ux-filter--sf .bs-ux-dd__list--scroll { max-height: none; }
	.bs-sf-opt { min-height: 44px; }
	body.bs-sf-drawer-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-sf-results[aria-busy="true"] ul.products { transition: none; }
}