/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Mobile search-chrome: sticky bottom action-bar (Filters + Map)
 *                + off-canvas flyout-panels voor [data-sl-flyout="filters"]
 *                (slide-in van rechts) en [data-sl-flyout="map"] (bottom-sheet
 *                met half/full toggle). Vervangt de FacetWP-flyout styling op
 *                het native pad. De action-bar verschijnt alleen ≤800px;
 *                desktop blijft de inline filter-sidebar + map-column gebruiken.
 *
 * PATH         : wp-content/themes/sportlist/css/sl-mobile-search.css
 *
 * DEPENDENCIES : tokens.css (kleur-, spacing- en shadow-variabelen),
 *                filters-and-cards.css (sidebar-layout op desktop).
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --color-surface, --color-brand, --color-brand-on, --color-brand-subtle
 *   --color-border-default, --color-text-default, --color-text-muted
 *   --space-1..--space-6, --radius-md, --radius-lg, --radius-pill
 *   --shadow-sm, --shadow-card, --transition-hover, --z-overlay
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. STICKY MOBILE ACTION-BAR
 *   2. FLYOUT BACKDROP + BODY-LOCK
 *   3. FLYOUT PANEL (basis + chrome)
 *   4. FLYOUT VARIANT — FILTERS (rechts)
 *   5. FLYOUT VARIANT — MAP (bottom-sheet, half/full)
 *   6. REDUCED-MOTION GUARD
 *
 * @package Sportlist
 */

/* ============================================================
   1. STICKY MOBILE ACTION-BAR
   Verschijnt alleen ≤800px; bevat de Filters- en Map-trigger.
   ============================================================ */

.sl-mobile-actionbar {
	display: none;
}

@media (max-width: 800px) {
	.sl-mobile-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
		background: var(--color-surface);
		border-top: 1px solid var(--color-border-default);
		box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.06);
		z-index: 9000;
	}

	.sl-mobile-filter-trigger,
	.sl-mobile-map-trigger {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-height: 44px;
		padding: var(--space-2) var(--space-3);
		background: var(--color-surface);
		color: var(--color-brand);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-pill);
		font-size: var(--fs-body-sm);
		font-weight: var(--fw-semibold);
		cursor: pointer;
		transition: var(--transition-hover);
	}

	.sl-mobile-filter-trigger:hover,
	.sl-mobile-map-trigger:hover,
	.sl-mobile-filter-trigger:focus-visible,
	.sl-mobile-map-trigger:focus-visible {
		background: var(--color-brand);
		color: var(--color-brand-on);
		border-color: var(--color-brand);
		outline: none;
		box-shadow: var(--shadow-sm);
	}

	.sl-mobile-filter-trigger[aria-expanded="true"],
	.sl-mobile-map-trigger[aria-expanded="true"] {
		background: var(--color-brand);
		color: var(--color-brand-on);
		border-color: var(--color-brand);
	}

	.sl-mobile-filter-trigger .material-icons,
	.sl-mobile-map-trigger .material-icons {
		font-size: 18px;
	}

	/* Resultatenlijst krijgt extra bottom-padding zodat de laatste kaart
	   niet onder de fixed bar verdwijnt. */
	.sportscholen-results-container {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* ============================================================
   2. FLYOUT BACKDROP + BODY-LOCK
   ============================================================ */

.sl-flyout-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
	z-index: 9500;
}

.sl-flyout-backdrop.is-active {
	opacity: 1;
	pointer-events: auto;
}

body.sl-flyout-locked {
	overflow: hidden;
}

/* ============================================================
   3. FLYOUT PANEL — chrome (header / footer / resize)
   Gerenderd door sl-flyout.js wanneer een panel voor het eerst
   opent. Basisstijl voor alle [data-sl-flyout]-varianten.
   ============================================================ */

.sl-flyout-header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--color-border-default);
	background: var(--color-surface);
	position: sticky;
	top: 0;
	z-index: 1;
}

.sl-flyout-title {
	flex: 1;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--color-heading, var(--color-text-default));
	outline: none;
}

.sl-flyout-close,
.sl-flyout-resize {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	color: var(--color-text-muted);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: var(--transition-hover);
}

.sl-flyout-close:hover,
.sl-flyout-close:focus-visible,
.sl-flyout-resize:hover,
.sl-flyout-resize:focus-visible {
	background: var(--color-brand-subtle);
	color: var(--color-brand);
	border-color: var(--color-brand);
	outline: none;
}

.sl-flyout-footer {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--color-surface);
	border-top: 1px solid var(--color-border-default);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
	z-index: 1;
}

.sl-flyout-apply {
	flex: 1;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	background: var(--color-brand);
	color: var(--color-brand-on);
	border: 0;
	border-radius: var(--radius-pill);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: var(--transition-hover);
}

.sl-flyout-apply:hover,
.sl-flyout-apply:focus-visible {
	filter: brightness(1.05);
	box-shadow: var(--shadow-sm);
	outline: none;
}

/* Op desktop: het panel-element is gewoon de inline sidebar/map-column.
   Verberg de chrome (header/footer) — die is alleen relevant in flyout-mode. */
@media (min-width: 801px) {
	[data-sl-flyout] .sl-flyout-header,
	[data-sl-flyout] .sl-flyout-footer {
		display: none;
	}
}

/* ============================================================
   4. FLYOUT VARIANT — FILTERS (slide-in van rechts)
   Op mobile wordt .sportscholen-filters-desktop-filters[-stad]
   omgevormd tot een volledig-hoog off-canvas panel.
   ============================================================ */

@media (max-width: 800px) {
	[data-sl-flyout="filters"] {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(420px, 100vw);
		max-width: 100%;
		max-height: 100vh;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		background: var(--color-surface);
		border: 0;
		border-radius: 0;
		box-shadow: var(--shadow-card);
		transform: translateX(100%);
		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
		z-index: 9600;
	}

	[data-sl-flyout="filters"].is-open {
		transform: translateX(0);
	}

	/* Het filter-formulier zelf scrollt; header en footer blijven sticky. */
	[data-sl-flyout="filters"] .sl-filter-form,
	[data-sl-flyout="filters"] > form,
	[data-sl-flyout="filters"] > .content-section,
	[data-sl-flyout="filters"] > h2 {
		flex: 0 0 auto;
	}

	[data-sl-flyout="filters"] {
		overflow-y: auto;
	}

	[data-sl-flyout="filters"] .sl-filter-form {
		padding: var(--space-4);
	}
}

/* ============================================================
   5. FLYOUT VARIANT — MAP (bottom-sheet, half/full)
   Op mobile wordt .sportscholen-right-column[-steden] een
   bottom-sheet met default 60vh; resize-knop in de header
   schakelt naar 100vh (.is-fullscreen).
   ============================================================ */

@media (max-width: 800px) {
	[data-sl-flyout="map"] {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60vh;
		max-height: 100vh;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		background: var(--color-surface);
		border-top-left-radius: var(--radius-lg);
		border-top-right-radius: var(--radius-lg);
		box-shadow: var(--shadow-card);
		transform: translateY(100%);
		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
		            height 220ms ease;
		overflow: hidden;
		z-index: 9600;
	}

	[data-sl-flyout="map"].is-open {
		transform: translateY(0);
	}

	[data-sl-flyout="map"].is-fullscreen {
		height: 100vh;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	[data-sl-flyout="map"] .google-maps-facet-large {
		flex: 1;
		min-height: 0;
	}

	[data-sl-flyout="map"] .sl-map {
		width: 100%;
		height: 100%;
		min-height: 0;
		border-radius: 0;
	}
}

/* ============================================================
   6. REDUCED-MOTION GUARD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	[data-sl-flyout],
	.sl-flyout-backdrop {
		transition: none !important;
	}
}