/*
 * kb-pos-finder
 *
 * App-style layout: blue header bar on top, sidebar with search +
 * filters + scrollable result list on the left, Leaflet map filling
 * the rest. Mobile (≤900px) drops the sidebar, replaces it with a
 * floating searchbar + bottom drawer + filter overlay.
 *
 * Tokens come from the bricks-child design system (kb_tokens_css() in
 * themes/bricks-child/functions.php). Every variable falls back to a
 * portable value so the widget still looks correct on sites without
 * the theme.
 */

/* ── Alpine cloak ───────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Token bridge + root layout ─────────────────────────────────── */
.kb-pos {
	--kb-pos-bg:           var(--color-background, #f9f4f1);
	--kb-pos-surface:      var(--color-neutral-0, #fefefe);
	--kb-pos-surface-soft: var(--color-neutral-100, #f5f5f5);

	--kb-pos-text:         var(--color-neutral-300, #1d1d1d);
	--kb-pos-text-muted:   var(--color-neutral-200, #909090);

	--kb-pos-border:       #e5e5e5;
	--kb-pos-border-soft:  #ececec;

	--kb-pos-primary:      var(--color-primary-400, #00417d);
	--kb-pos-primary-dark: var(--color-primary-300, #00213f);
	--kb-pos-primary-fg:   #ffffff;
	--kb-pos-accent:       var(--color-primary-100, #be9477);

	--kb-pos-error:        var(--color-alert-error, #e00851);

	--kb-pos-radius-sm:   var(--border-radius-sm, 0.25rem);
	--kb-pos-radius-md:   var(--border-radius-md, 0.5rem);
	--kb-pos-radius-lg:   var(--border-radius-lg, 1rem);
	--kb-pos-radius-pill: 9999px;

	--kb-pos-fs-xs:   var(--font-size-text-xs, 0.75rem);
	--kb-pos-fs-sm:   var(--font-size-text-sm, 0.875rem);
	--kb-pos-fs-base: var(--font-size-text-base, 1rem);
	--kb-pos-fs-lg:   var(--font-size-h6, 1.125rem);

	--kb-pos-sp-xs:  0.25rem;
	--kb-pos-sp-sm:  0.5rem;
	--kb-pos-sp-md:  1rem;
	--kb-pos-sp-lg:  1.5rem;
	--kb-pos-sp-xl:  2rem;

	--kb-pos-bar-h:  56px;
	/* Widget owns its height so the sidebar can scroll independently
	   without the map stretching off-screen. The clamp keeps it usable
	   on tall and short viewports alike. */
	--kb-pos-h:      clamp(560px, calc(100vh - 160px), 920px);

	position: relative;
	/* Establish a stacking context so Leaflet's internal panes (marker
	   pane 600, controls 300, etc.) stay confined to this widget instead
	   of bubbling into page-level stacking and covering the site menu
	   (z-index 220). The whole finder now layers as one below the menu. */
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: var(--kb-pos-h);
	background: var(--kb-pos-surface);
	color: var(--kb-pos-text);
	font-family: var(--font-family-body, system-ui, sans-serif);
	font-size: var(--kb-pos-fs-sm);
	border-radius: var(--kb-pos-radius-md);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 33, 63, 0.06);
}

/* ── Top bar ────────────────────────────────────────────────────── */
.kb-pos__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kb-pos-sp-md);
	height: var(--kb-pos-bar-h);
	padding: 0 var(--kb-pos-sp-lg);
	background: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
	flex: 0 0 auto;
}

.kb-pos__bar-title {
	margin: 0;
	font-family: var(--font-family-heading, inherit);
	font-size: var(--kb-pos-fs-lg);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
}

.kb-pos__bar-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;        /* inline-flex collapses the text node whitespace between the count <span> and the label */
	padding: 0.3rem 0.7rem;
	border-radius: var(--kb-pos-radius-pill);
	background: rgba(255, 255, 255, 0.18);
	color: var(--kb-pos-primary-fg);
	font-size: var(--kb-pos-fs-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ── Inline error banner ────────────────────────────────────────── */
.kb-pos__error {
	padding: var(--kb-pos-sp-sm) var(--kb-pos-sp-md);
	background: rgba(224, 8, 81, 0.08);
	color: var(--kb-pos-error);
	font-size: var(--kb-pos-fs-sm);
	border-bottom: 1px solid rgba(224, 8, 81, 0.18);
}

/* ── Shell: sidebar + map column ────────────────────────────────── */
.kb-pos__shell {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	background: var(--kb-pos-bg);
}

.kb-pos__sidebar {
	display: flex;
	flex-direction: column;
	flex: 0 0 400px;
	min-height: 0;
	background: var(--kb-pos-surface);
	border-right: 1px solid var(--kb-pos-border);
}

/* ── Sidebar sections ───────────────────────────────────────────── */
.kb-pos__section {
	border-bottom: 1px solid var(--kb-pos-border);
	flex: 0 0 auto;
}

.kb-pos__section-title {
	font-family: var(--font-family-heading, inherit);
	font-size: var(--kb-pos-fs-sm);
	font-weight: 600;
	color: var(--kb-pos-text);
	letter-spacing: 0.01em;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--kb-pos-sp-sm);
}

.kb-pos__section--search {
	padding: var(--kb-pos-sp-md);
}

.kb-pos__section--search > .kb-pos__section-title {
	display: block;
	margin-bottom: var(--kb-pos-sp-sm);
}

/* Filters section is the only collapsible — its <summary> doubles as
   header + reset button row. */
.kb-pos__section--filters {
	padding: 0;
}

.kb-pos__section-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kb-pos-sp-sm);
	padding: var(--kb-pos-sp-md);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background 150ms ease;
}

.kb-pos__section-summary::-webkit-details-marker { display: none; }
.kb-pos__section-summary::marker                 { content: ''; }

.kb-pos__section-summary:hover {
	background: var(--kb-pos-surface-soft);
}

/* Chevron next to the section title — sits inside the title's
   inline-flex so it stays glued to the label. Rotates 90deg when
   the parent <details> opens. */
.kb-pos__section--filters .kb-pos__section-title::before {
	content: '';
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 150ms ease;
	flex: 0 0 auto;
	margin-right: 0.15rem;
}

.kb-pos__section--filters[open] > .kb-pos__section-summary .kb-pos__section-title::before {
	transform: rotate(45deg);
}

.kb-pos__section--filters[open] > .kb-pos__section-summary {
	border-bottom: 1px solid var(--kb-pos-border-soft);
}

.kb-pos__section-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 4px 8px;
	border-radius: var(--kb-pos-radius-pill);
	background: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
	/* Force the body font: the badge sits inside .kb-pos__section-title
	   which sets the heading font, whose digit glyphs are very narrow
	   and look squashed in a small circle. */
	font-family: var(--font-family-body, system-ui, sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.kb-pos__reset {
	background: none;
	border: 0;
	padding: 0.15rem 0.1rem;
	color: var(--kb-pos-text-muted);
	font: inherit;
	font-size: var(--kb-pos-fs-xs);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	cursor: pointer;
	transition: color 150ms ease;
}

.kb-pos__reset:hover:not(:disabled) {
	color: var(--kb-pos-primary);
}

.kb-pos__reset:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: none;
}

/* ── Form fields ────────────────────────────────────────────────── */
.kb-pos__form {
	display: flex;
	flex-direction: column;
	gap: var(--kb-pos-sp-sm);
}

.kb-pos__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	min-width: 0;
}

.kb-pos__field-label {
	font-size: var(--kb-pos-fs-xs);
	color: var(--kb-pos-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
}

.kb-pos__input,
.kb-pos__select {
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--kb-pos-border);
	border-radius: var(--kb-pos-radius-md);
	background: var(--kb-pos-surface);
	color: var(--kb-pos-text);
	font: inherit;
	font-size: var(--kb-pos-fs-sm);
	line-height: 1.3;
	box-sizing: border-box;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.kb-pos__input:focus-visible,
.kb-pos__select:focus-visible {
	outline: none;
	border-color: var(--kb-pos-primary);
	box-shadow: 0 0 0 3px rgba(0, 65, 125, 0.15);
}

.kb-pos__form-actions {
	display: flex;
	gap: var(--kb-pos-sp-sm);
	margin-top: 0.15rem;
}

.kb-pos__form-actions .kb-pos__btn {
	flex: 1 1 0;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.kb-pos__btn {
	padding: 0.6rem 1rem;
	border-radius: var(--kb-pos-radius-md);
	border: 1px solid transparent;
	font: inherit;
	font-family: var(--font-family-body, inherit);
	font-size: var(--kb-pos-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
	white-space: nowrap;
}

.kb-pos__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.kb-pos__btn--primary {
	background: var(--kb-pos-primary);
	border-color: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
}

.kb-pos__btn--primary:hover:not(:disabled),
.kb-pos__btn--primary:focus-visible:not(:disabled) {
	background: var(--kb-pos-primary-dark);
	border-color: var(--kb-pos-primary-dark);
	outline: none;
}

.kb-pos__btn--ghost {
	background: var(--kb-pos-surface);
	border-color: var(--kb-pos-border);
	color: var(--kb-pos-text);
}

.kb-pos__btn--ghost:hover:not(:disabled),
.kb-pos__btn--ghost:focus-visible:not(:disabled) {
	background: var(--kb-pos-surface-soft);
	border-color: var(--kb-pos-text);
	outline: none;
}

.kb-pos__btn--block {
	width: 100%;
}

/* ── Filter chip groups ─────────────────────────────────────────── */
.kb-pos__filters {
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--kb-pos-sp-sm);
}

.kb-pos__filter-group {
	border-top: 1px solid var(--kb-pos-border-soft);
}

.kb-pos__filter-group:first-of-type {
	border-top: 0;
}

.kb-pos__filter-title {
	display: flex;
	align-items: center;
	gap: var(--kb-pos-sp-sm);
	padding: var(--kb-pos-sp-sm) var(--kb-pos-sp-md);
	font-size: var(--kb-pos-fs-sm);
	font-weight: 600;
	color: var(--kb-pos-text);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.kb-pos__filter-title::-webkit-details-marker { display: none; }
.kb-pos__filter-title::marker                 { content: ''; }

.kb-pos__filter-title::before {
	content: '';
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 150ms ease;
	flex: 0 0 auto;
	margin-right: 0.2rem;
}

.kb-pos__filter-group[open] > .kb-pos__filter-title::before {
	transform: rotate(45deg);
}

.kb-pos__filter-title-label {
	flex: 1 1 auto;
}

.kb-pos__filter-title-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 4px 8px;
	border-radius: var(--kb-pos-radius-pill);
	background: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
	/* Same reason as .kb-pos__section-badge — avoid the heading font's
	   narrow digit metrics inside a small circle. */
	font-family: var(--font-family-body, system-ui, sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.kb-pos__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 var(--kb-pos-sp-md) var(--kb-pos-sp-md);
}

.kb-pos__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--kb-pos-border);
	border-radius: var(--kb-pos-radius-pill);
	background: var(--kb-pos-surface);
	color: var(--kb-pos-text);
	font: inherit;
	font-size: var(--kb-pos-fs-xs);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.kb-pos__chip:hover:not(.is-active) {
	border-color: var(--kb-pos-primary);
	color: var(--kb-pos-primary);
}

.kb-pos__chip.is-active {
	background: var(--kb-pos-primary);
	border-color: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
}

.kb-pos__chip-count {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
	font-size: 0.95em;
}

/* ── Result count line ──────────────────────────────────────────── */
.kb-pos__resultline {
	padding: var(--kb-pos-sp-sm) var(--kb-pos-sp-md);
	border-bottom: 1px solid var(--kb-pos-border);
	font-size: var(--kb-pos-fs-sm);
	color: var(--kb-pos-text);
	flex: 0 0 auto;
	background: var(--kb-pos-surface);
}

/*
.kb-pos__resultline-hint {
	display: block;
	width: 100%;
	font-size: 12px;
	text-align: center;
	padding: 16px 0;
	color: var(--kb-pos-text-muted);
}
*/

/* ── Scrollable result list ─────────────────────────────────────── */
.kb-pos__results {
	display: flex;
	flex-direction: column;
	gap: var(--kb-pos-sp-xs);
	padding: var(--kb-pos-sp-sm);
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.kb-pos__card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kb-pos-sp-sm);
	padding: 0.6rem 0.75rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--kb-pos-radius-md);
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}

.kb-pos__card:hover {
	background: var(--kb-pos-surface-soft);
}

.kb-pos__card.is-focused {
	background: rgba(0, 65, 125, 0.06);
	border-color: var(--kb-pos-primary);
}

.kb-pos__card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.kb-pos__card-title {
	margin: 0;
	font-size: var(--kb-pos-fs-sm);
	font-weight: 600;
	color: var(--kb-pos-text);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kb-pos__card-address {
	margin: 0.25rem 0 0;
	color: var(--kb-pos-text-muted);
	font-size: var(--kb-pos-fs-xs);
	line-height: 1.45;
}

.kb-pos__card-actions {
	display: flex;
	gap: var(--kb-pos-sp-md);
	margin-top: 0.45rem;
}

.kb-pos__card-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--kb-pos-fs-xs);
	color: var(--kb-pos-primary);
	text-decoration: none;
	cursor: pointer;
}

.kb-pos__card-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kb-pos__card-distance {
	flex: 0 0 auto;
	padding: 0.2rem 0.55rem;
	border-radius: var(--kb-pos-radius-pill);
	background: var(--kb-pos-surface-soft);
	color: var(--kb-pos-text);
	font-size: var(--kb-pos-fs-xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	align-self: flex-start;
}

.kb-pos__card.is-focused > .kb-pos__card-distance {
	background: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
}

.kb-pos__empty {
	padding: var(--kb-pos-sp-lg) var(--kb-pos-sp-md);
	text-align: center;
	color: var(--kb-pos-text-muted);
	font-size: var(--kb-pos-fs-sm);
}

.kb-pos__loadmore {
	padding: var(--kb-pos-sp-sm);
}

/* ── Map column ─────────────────────────────────────────────────── */
.kb-pos__map-col {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	background: var(--kb-pos-surface-soft);
}

.kb-pos__map {
	width: 100%;
	height: 100%;
}

/* Tweak Leaflet's chrome to feel less framework-y. */
.kb-pos__map .leaflet-control-zoom {
	border: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-radius: var(--kb-pos-radius-md);
	overflow: hidden;
}

.kb-pos__map .leaflet-control-zoom a {
	background: var(--kb-pos-surface);
	color: var(--kb-pos-text);
	border-bottom: 1px solid var(--kb-pos-border-soft);
}

.kb-pos__map .leaflet-control-zoom a:last-child {
	border-bottom: 0;
}

/* Leaflet defaults its control/pane stacking to z-index 400–1000 which
   sits ABOVE our floating searchbar (400), drawer (500) and filter
   sheet (600). Bring every Leaflet surface back below them so the
   drawer always slides over the zoom buttons / attribution. */
.kb-pos__map .leaflet-control-container,
.kb-pos__map .leaflet-control,
.kb-pos__map .leaflet-top,
.kb-pos__map .leaflet-bottom {
	z-index: 300;
}

/* ── Custom pin (divIcon) ───────────────────────────────────────── */
/* `currentColor` flows from the class color to the SVG path so the
   focused / hover variants only need to change `color`. The drop
   shadow gives the pin a hint of depth on busy basemaps.
   The chained `.leaflet-div-icon` selector overrides Leaflet's
   default `background: #fff; border: 1px solid #666` that would
   otherwise show as a square frame behind the SVG pin. */
.leaflet-div-icon.kb-pos-pin {
	background: transparent;
	border: 0;
}

.kb-pos-pin {
	color: var(--kb-pos-primary);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
	/* NEVER set `transition` or `transform` on the pin root: Leaflet
	   positions markers by writing `transform: translate3d(...)` on
	   exactly this element, and any CSS transition there causes the
	   pins to lag behind the map during flyTo/pan animations. Hover
	   lift lives on the inner <svg> instead. */
}

.kb-pos-pin svg {
	width: 100%;
	height: 100%;
	display: block;
	transition: transform 150ms ease;
	transform-origin: 50% 100%;
}

.kb-pos-pin:hover svg {
	transform: translateY(-2px);
}

.kb-pos-pin.is-focused {
	color: var(--kb-pos-accent);
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

/* ── Hover tooltip ──────────────────────────────────────────────── */
.kb-pos-tip.leaflet-tooltip {
	padding: 0.3rem 0.6rem;
	border: 0;
	border-radius: var(--kb-pos-radius-sm);
	background: var(--kb-pos-text);
	color: var(--kb-pos-primary-fg);
	font-family: var(--font-family-body, system-ui, sans-serif);
	font-size: var(--kb-pos-fs-xs);
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

.kb-pos-tip.leaflet-tooltip::before {
	border-top-color: var(--kb-pos-text);
}

/* ── Click popup ────────────────────────────────────────────────── */
.kb-pos-popup .leaflet-popup-content-wrapper {
	padding: 0;
	border-radius: var(--kb-pos-radius-md);
	box-shadow: 0 6px 24px rgba(0, 33, 63, 0.18);
	background: var(--kb-pos-surface);
	color: var(--kb-pos-text);
	font-family: var(--font-family-body, system-ui, sans-serif);
}

.kb-pos-popup .leaflet-popup-content {
	margin: 0;
	padding: var(--kb-pos-sp-md);
	font-size: var(--kb-pos-fs-sm);
	line-height: 1.4;
	min-width: 180px;
}

.kb-pos-popup .leaflet-popup-tip {
	background: var(--kb-pos-surface);
}

/* Leaflet renders the close as a tiny absolutely-positioned anchor in
   the top-right of the popup. Default styling sits flush against the
   title and is barely visible — turn it into a proper circular icon
   button sitting on the popup's edge. */
.kb-pos-popup a.leaflet-popup-close-button {
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 9999px;
	background: var(--kb-pos-surface-soft);
	color: var(--kb-pos-text-muted);
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}

.kb-pos-popup a.leaflet-popup-close-button:hover,
.kb-pos-popup a.leaflet-popup-close-button:focus {
	background: var(--kb-pos-text);
	color: var(--kb-pos-primary-fg);
}

.kb-pos-popup__title {
	font-family: var(--font-family-heading, inherit);
	font-size: var(--kb-pos-fs-sm);
	font-weight: 700;
	color: var(--kb-pos-text);
	margin-bottom: 0.25rem;
	padding-right: 2rem;  /* clear the circular close × in the top-right */
}

.kb-pos-popup__addr {
	color: var(--kb-pos-text-muted);
	font-size: var(--kb-pos-fs-xs);
	line-height: 1.45;
	margin-bottom: var(--kb-pos-sp-sm);
}

/* Use a chained selector so site-wide `a { color: ... }` rules in the
   parent theme don't outweigh ours — Leaflet injects the popup HTML
   into a content wrapper where the theme's link colour was winning by
   specificity, making the CTA text appear washed-out blue. */
.kb-pos-popup a.kb-pos-popup__cta,
.kb-pos-popup a.kb-pos-popup__cta:link,
.kb-pos-popup a.kb-pos-popup__cta:visited {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: var(--kb-pos-radius-md);
	background: var(--kb-pos-primary);
	color: var(--kb-pos-primary-fg);
	font-size: var(--kb-pos-fs-xs);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background 150ms ease;
}

.kb-pos-popup a.kb-pos-popup__cta:hover,
.kb-pos-popup a.kb-pos-popup__cta:focus-visible {
	background: var(--kb-pos-primary-dark);
	color: var(--kb-pos-primary-fg);
	outline: none;
	text-decoration: none;
}

/* ── Mobile-only shells (default: hidden on desktop) ────────────── */
.kb-pos__mobile-searchbar,
.kb-pos__mobile-sheet,
.kb-pos__mobile-drawer {
	display: none;
}

/* ── Mobile layout (≤ 900px) ────────────────────────────────────── */
@media (max-width: 900px) {
	.kb-pos {
		--kb-pos-h: calc(100vh - 100px);
		min-height: 540px;
	}

	.kb-pos__shell {
		position: relative;
	}

	/* Push Leaflet's top-right zoom control below the floating
	   searchbar so they don't overlap. */
	.kb-pos__map .leaflet-top.leaflet-right {
		margin-top: 64px;
	}

	/* Sidebar disappears; map takes the full shell. */
	.kb-pos__sidebar {
		display: none;
	}

	.kb-pos__map-col {
		flex: 1 1 100%;
	}

	/* Floating search overlay above the map. */
	.kb-pos__mobile-searchbar {
		position: absolute;
		top: var(--kb-pos-sp-sm);
		left: var(--kb-pos-sp-sm);
		right: var(--kb-pos-sp-sm);
		z-index: 400;
		display: flex;
		gap: 0.4rem;
		padding: 0.4rem;
		background: var(--kb-pos-surface);
		border-radius: var(--kb-pos-radius-md);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}

	.kb-pos__mobile-search-input {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.55rem 0.75rem;
		border: 0;
		background: transparent;
		font: inherit;
		font-size: var(--kb-pos-fs-sm);
		color: var(--kb-pos-text);
		outline: none;
	}

	.kb-pos__mobile-iconbtn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: var(--kb-pos-radius-md);
		border: 0;
		background: var(--kb-pos-surface-soft);
		color: var(--kb-pos-text);
		cursor: pointer;
		flex: 0 0 auto;
	}

	.kb-pos__mobile-iconbtn:hover:not(:disabled),
	.kb-pos__mobile-iconbtn:focus-visible:not(:disabled) {
		background: var(--kb-pos-primary);
		color: var(--kb-pos-primary-fg);
		outline: none;
	}

	.kb-pos__mobile-iconbtn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.kb-pos__mobile-iconbtn .material-symbols-outlined {
		font-size: 1.25rem;
	}

	.kb-pos__mobile-iconbadge {
		position: absolute;
		top: -4px;
		right: -4px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 9999px;
		background: var(--kb-pos-primary);
		color: var(--kb-pos-primary-fg);
		font-size: 10px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	/* Filter overlay — two-stage animation:
	     1. Backdrop fades opacity 0→1 (240ms)
	     2. Card slides translateY(100%) → 0 (320ms, ease-out curve)
	   We don't use `x-show`/`display: none` to gate visibility because
	   that strips CSS transitions; instead the sheet stays in the DOM
	   and opacity + visibility + transform compose the show/hide. */
	.kb-pos__mobile-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 600;
		background: rgba(0, 0, 0, 0.4);
		padding-top: 20vh;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity 240ms ease,
			visibility 0s linear 240ms;
	}

	.kb-pos__mobile-sheet.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 240ms ease,
			visibility 0s linear 0s;
	}

	.kb-pos__mobile-sheet-card {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		transform: translateY(100%);
		transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
		will-change: transform;
	}

	.kb-pos__mobile-sheet.is-open .kb-pos__mobile-sheet-card {
		transform: translateY(0);
	}

	.kb-pos__mobile-sheet-header,
	.kb-pos__mobile-sheet-body,
	.kb-pos__mobile-sheet-footer {
		background: var(--kb-pos-surface);
	}

	.kb-pos__mobile-sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--kb-pos-sp-md);
		border-radius: var(--kb-pos-radius-lg) var(--kb-pos-radius-lg) 0 0;
		border-bottom: 1px solid var(--kb-pos-border);
	}

	.kb-pos__mobile-sheet-title {
		margin: 0;
		font-family: var(--font-family-heading, inherit);
		font-size: var(--kb-pos-fs-base);
		font-weight: 700;
	}

	.kb-pos__mobile-sheet-body {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: var(--kb-pos-sp-md);
		display: flex;
		flex-direction: column;
		gap: var(--kb-pos-sp-md);
	}

	.kb-pos__mobile-sheet-footer {
		display: flex;
		gap: var(--kb-pos-sp-sm);
		padding: var(--kb-pos-sp-md);
		border-top: 1px solid var(--kb-pos-border);
		padding-bottom: max(var(--kb-pos-sp-md), env(safe-area-inset-bottom));
	}

	.kb-pos__mobile-sheet-footer .kb-pos__btn {
		flex: 1 1 0;
	}

	/* Bottom drawer with results. Three snap targets — `data-snap`
	   drives the height; while the user is mid-drag, the JS writes
	   an inline `height: <px>` that overrides the class. Default
	   `peek` is always visible so the user knows the list is there. */
	.kb-pos__mobile-drawer {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		max-height: 95%;
		background: var(--kb-pos-surface);
		border-radius: var(--kb-pos-radius-lg) var(--kb-pos-radius-lg) 0 0;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
		transition: height 220ms ease;
		touch-action: none;   /* let pointermove fire on the handle without page-scroll fighting it */
	}

	.kb-pos__mobile-drawer[data-snap="peek"] { height: 110px; }
	.kb-pos__mobile-drawer[data-snap="half"] { height: 50%; }
	.kb-pos__mobile-drawer[data-snap="full"] { height: 85%; }

	.kb-pos__mobile-drawer-handle {
		display: flex;
		justify-content: center;
		padding: 0.6rem 0 0.4rem;
		background: transparent;
		border: 0;
		cursor: grab;
		flex: 0 0 auto;
		touch-action: none;
		user-select: none;
		-webkit-user-select: none;
	}

	.kb-pos__mobile-drawer-handle:active {
		cursor: grabbing;
	}

	.kb-pos__mobile-drawer-grip {
		display: block;
		width: 44px;
		height: 4px;
		border-radius: 9999px;
		background: var(--kb-pos-border);
	}

	.kb-pos__mobile-drawer-summary {
		padding: 0 var(--kb-pos-sp-md) var(--kb-pos-sp-sm);
		font-size: var(--kb-pos-fs-sm);
		font-weight: 500;
		color: var(--kb-pos-text);
		text-align: center;
		flex: 0 0 auto;
	}

	.kb-pos__mobile-drawer-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.kb-pos__mobile-drawer-body .kb-pos__results {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	/* Card variant inside the drawer — drops the action row for
	   density. */
	.kb-pos__card--compact .kb-pos__card-actions {
		display: none;
	}
}