/*
 * FitBlizu public app — brand tokens (design/FITBLIZU_BRAND_COLORS.md §9) + map-first shell.
 *
 * Palette: deep navy #08244A · electric blue #0072F2 · teal #0493AA · fresh green #06B987.
 * Brand gradient only on primary CTA, active states and the selected marker — never as a large background.
 * Typography: system stack (no webfont round-trip on mobile), tabular numerals for distances/prices.
 * Layout: the map fills the viewport; everything else floats over it (top bar, dock, panel / drawer, card, overlay).
 */
:root {
    --fb-navy: #08244A;
    --fb-blue-500: #0072F2;
    --fb-blue-600: #005EEB;
    --fb-blue-400: #008CEB;
    --fb-cyan: #018FCC;
    --fb-teal: #0493AA;
    --fb-green: #06B987;
    --fb-green-bright: #31DB49;

    --fb-success: #06B987;
    --fb-warning: #F5A623;
    --fb-danger: #E5484D;
    --fb-info: #0072F2;
    --fb-neutral: #64748B;

    --fb-bg: #F8FAFC;
    --fb-surface: #FFFFFF;
    --fb-surface-secondary: #F1F5F9;
    --fb-border: #E2E8F0;
    --fb-text: #08244A;
    --fb-text-secondary: #475569;
    --fb-text-muted: #64748B;

    /* Aliases kept from Phase A so nothing else breaks */
    --fb-primary: var(--fb-blue-500);
    --fb-primary-strong: var(--fb-blue-600);
    --fb-primary-soft: #E6F0FE;
    --fb-accent: var(--fb-green);
    --fb-accent-soft: #E3F8F1;
    --fb-open: var(--fb-success);
    --fb-closed: var(--fb-danger);
    --fb-crowd-calm: var(--fb-success);
    --fb-crowd-medium: var(--fb-warning);
    --fb-crowd-busy: var(--fb-danger);
    --fb-surface-2: var(--fb-surface-secondary);

    --fb-gradient: linear-gradient(135deg, #31DB49 0%, #06B987 28%, #0493AA 50%, #008CEB 72%, #0072F2 100%);
    --fb-gradient-blue: linear-gradient(135deg, #06B987 0%, #0493AA 35%, #008CEB 65%, #005EEB 100%);

    /* Floating dock (§7): liquid-glass bar — translucent white over the map, 1px inner highlight, navy-tinted lift */
    --floating-menu-bg: rgba(255, 255, 255, 0.82);
    --floating-menu-border: rgba(255, 255, 255, 0.55);
    --floating-menu-highlight: rgba(255, 255, 255, 0.85);
    --floating-menu-text: #3B4A63;          /* 7.4:1 on the glass */
    --floating-menu-active: #0072F2;
    --floating-menu-active-bg: #0072F2;     /* brand-blue pill, white label */
    --floating-menu-shadow: 0 -1px 0 rgba(8, 36, 74, 0.04), 0 2px 6px rgba(8, 36, 74, 0.10), 0 16px 40px rgba(8, 36, 74, 0.22);

    --fb-glass: rgba(255, 255, 255, 0.86);
    --fb-glass-border: rgba(8, 36, 74, 0.10);
    --fb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fb-radius: 12px;
    --fb-radius-lg: 20px;
    /* Elevation (brand guide §7 shadows are navy-tinted, never pure black in light mode) */
    --fb-shadow: 0 1px 2px rgba(8, 36, 74, .06), 0 10px 30px rgba(8, 36, 74, .12);
    --fb-shadow-sm: 0 1px 3px rgba(8, 36, 74, .14);
    --fb-shadow-lift: 0 2px 6px rgba(8, 36, 74, .08), 0 12px 28px rgba(8, 36, 74, .14);
    --fb-focus: 0 0 0 3px rgba(0, 114, 242, .45);

    /* 8px spacing scale */
    --fb-space-1: 4px;
    --fb-space-2: 8px;
    --fb-space-3: 12px;
    --fb-space-4: 16px;
    --fb-space-5: 24px;
    --fb-space-6: 32px;
    --fb-space-7: 40px;

    /* Motion: short, ease-out; answers user actions only */
    --fb-ease: cubic-bezier(.2, 0, 0, 1);            /* M3 standard / emphasized: enters + moves */
    --fb-ease-out: cubic-bezier(.05, .7, .1, 1);      /* M3 emphasized-decelerate: sheets, panels entering */
    --fb-ease-in: cubic-bezier(.3, 0, .8, .15);       /* M3 emphasized-accelerate: exits */
    --fb-spring: cubic-bezier(.32, .72, 0, 1);        /* iOS-like sheet snap (slight overshoot feel, no bounce) */
    --fb-dur: 200ms;
    --fb-dur-fast: 150ms;
    --fb-kb: 0px;                                     /* virtual keyboard height (visualViewport), set by app.js */

    --fb-dock-height: 54px;           /* 44px items (WCAG / audit: ≥ 44×44 touch target) + 5px padding */
    --fb-dock-gap: 12px;              /* clearance between the pill / card / drawer content and the dock */
    --fb-dock-bottom: 6px; /* browser: iOS reports a 34px inset even with Safari's toolbar visible → a white gap; only the installed app (html.is-standalone) uses the real inset */
    --fb-tap-min: 48px;               /* mobile: every target ≥ 48px; desktop relaxes to 44px */
    --fb-safe-bottom: env(safe-area-inset-bottom, 0px);
    --fb-safe-top: env(safe-area-inset-top, 0px);
    --fb-safe-left: env(safe-area-inset-left, 0px);
    --fb-safe-right: env(safe-area-inset-right, 0px);
    --fb-topbar-h: 56px;              /* 48px controls + 4px padding each side */
    --fb-panel-w: 400px;              /* desktop left panel; the mobile drawer is min(88%, 400px) */
    --fb-pill-h: 0px;                 /* mobile-9: the list pill sits LEFT of the dock (same row), no extra row above it */
    --fb-pill-w: 84px;
    --fb-dock-w: min(300px, calc(100vw - 24px - var(--fb-pill-w) - 8px));
    --fb-group-left: calc((100vw - var(--fb-pill-w) - 8px - var(--fb-dock-w)) / 2); /* pill + 8px + dock centred as one group */
    --fb-hint: 0px;                   /* install-hint card height + 8px while it is shown (app.js sets it inline on <html>) */
    /* space the dock needs below the mobile pill / card / drawer content: dock + its bottom offset + 12px gap */
    --fb-dock-space: calc(var(--fb-dock-height) + var(--fb-dock-bottom) + var(--fb-dock-gap));
    /* mobile stack above the dock: pill (44) + 4px + quick-chip row (36 + 2 × 8 padding) → the install hint / toast sit above it */
    --fb-stack: calc(var(--fb-pill-h) + 4px + 52px);
}

/* Dark mode: same semantic tokens (§6), via system preference or explicit choice. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fb-bg: #07111F;
        --fb-surface: #0D1B2E;
        --fb-surface-secondary: #12243B;
        --fb-border: #1E3652;
        --fb-text: #F8FAFC;
        --fb-text-secondary: #CBD5E1;
        --fb-text-muted: #94A3B8;
        --fb-blue-500: #008CEB;
        --fb-primary-soft: #0F2B4D;
        --fb-accent-soft: #0C3128;
        --floating-menu-bg: rgba(13, 27, 46, 0.8);
        --floating-menu-border: rgba(255, 255, 255, 0.16);
        --floating-menu-highlight: rgba(255, 255, 255, 0.14);
        --floating-menu-text: #C7D2E1;
        --floating-menu-active: #FFFFFF;
        --floating-menu-active-bg: #0072F2;
        --floating-menu-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.45);
        --fb-glass: rgba(13, 27, 46, 0.88);
        --fb-glass-border: rgba(255, 255, 255, 0.08);
        --fb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .45);
        --fb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    }
}
:root[data-theme="dark"] {
    --fb-bg: #07111F;
    --fb-surface: #0D1B2E;
    --fb-surface-secondary: #12243B;
    --fb-border: #1E3652;
    --fb-text: #F8FAFC;
    --fb-text-secondary: #CBD5E1;
    --fb-text-muted: #94A3B8;
    --fb-blue-500: #008CEB;
    --fb-primary-soft: #0F2B4D;
    --fb-accent-soft: #0C3128;
    --floating-menu-bg: rgba(13, 27, 46, 0.8);
    --floating-menu-border: rgba(255, 255, 255, 0.16);
    --floating-menu-highlight: rgba(255, 255, 255, 0.14);
    --floating-menu-text: #C7D2E1;
    --floating-menu-active: #FFFFFF;
    --floating-menu-active-bg: #0072F2;
    --floating-menu-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.45);
    --fb-glass: rgba(13, 27, 46, 0.88);
    --fb-glass-border: rgba(255, 255, 255, 0.08);
    --fb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .45);
    --fb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
}
/* Dark logo swap when the theme is forced (the <picture> media query only follows the system). */
:root[data-theme="dark"] .topbar__brand img { content: url("../brand/logo-horizontal-dark.png"); }
:root[data-theme="light"] .topbar__brand img { content: url("../brand/logo-horizontal.png"); }
:root[data-theme="dark"] .page__logo img { content: url("../brand/logo-stacked-dark.png"); }
:root[data-theme="light"] .page__logo img { content: url("../brand/logo-stacked.png"); }
/* Tiles get a gentle dim in dark mode so the chrome stays readable */
:root[data-theme="dark"] .app-map .maplibregl-canvas { filter: brightness(.82) saturate(.9); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-map .maplibregl-canvas { filter: brightness(.82) saturate(.9); }
    :root:not([data-theme="light"]) .notice--warn { color: #FFD48A; }
}
:root[data-theme="dark"] .notice--warn { color: #FFD48A; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: auto; overscroll-behavior-y: none; background: #f2efe9; } /* OpenFreeMap land colour: the area iOS paints under/behind Safari's toolbar blends with the map */ /* = map background: no white strip behind the shell (mobile-5) */
body {
    margin: 0;
    font-family: var(--fb-font);
    font-size: 16px;
    line-height: 1.45;
    color: var(--fb-text);
    background: var(--fb-bg);
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}
/* Map shell (mobile-4): shell + map are exactly one *dynamic* viewport tall and the document never scrolls — with Safari's
   toolbar expanded everything is laid out inside the smaller viewport, when it collapses the map simply grows. The browser
   chrome only disappears for good once the site is installed (install hint below). */
body.app { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior-y: none; background: #f2efe9; }
html[data-theme="dark"], html[data-theme="dark"] body.app { background: #1b2430; }
a { color: var(--fb-blue-500); }
button { font: inherit; color: inherit; }
button, [role="button"] { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: none; box-shadow: var(--fb-focus); }
[x-cloak] { display: none !important; }
.ic { width: 22px; height: 22px; flex: 0 0 auto; }
.ic--lg { width: 40px; height: 40px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip {
    position: absolute; left: 8px; top: -60px; z-index: 100;
    padding: 10px 14px; background: var(--fb-surface); color: var(--fb-text);
    border-radius: var(--fb-radius); box-shadow: var(--fb-shadow);
}
.skip:focus { top: calc(var(--fb-safe-top) + 8px); }

/* ------------------------------------------------------------------ shell + map */
.app-shell { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; } /* clip: no focus-driven scrolling of the shell */
.app-map { position: absolute; inset: 0; background: var(--fb-surface-secondary); touch-action: none; } /* MapLibre owns pinch/pan; the page never scrolls from the map */
.app-map:focus-visible { box-shadow: inset var(--fb-focus); }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { z-index: 3; }
/* attribution (mobile-5): MapLibre's compact control = one 32px glass ⓘ button bottom-left, above the peek strip; the full
   line lives in the hamburger menu footer + the About page. Tapping it unfolds the text next to the button. */
.maplibregl-ctrl-attrib.maplibregl-compact {
    min-width: 32px; min-height: 32px; margin: 0 !important; padding: 0 !important; border-radius: 16px; box-sizing: border-box; font-size: 11px; line-height: 32px; color: var(--fb-text-secondary);
    background: var(--fb-glass) !important; box-shadow: inset 0 0 0 1px var(--fb-glass-border), inset 0 1px 0 rgba(255, 255, 255, .6), var(--fb-shadow-sm);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: none !important; } /* never MapLibre's auto-open flash */
.maplibregl-ctrl-attrib.maplibregl-compact.fb-open .maplibregl-ctrl-attrib-inner { display: block !important; }
.maplibregl-ctrl-attrib.maplibregl-compact.fb-open { padding: 0 40px 0 12px !important; }
.maplibregl-ctrl-attrib.maplibregl-compact-show:not(.fb-open) { padding: 0 !important; } /* unfolds to the LEFT of the button (control is on the right) */
/* ⓘ under the +/−/locate stack: stack top + 3 × 44px buttons + 8px gap, aligned to the stack's right edge */
.maplibregl-ctrl-top-right { top: calc(var(--fb-safe-top) + 10px + var(--fb-topbar-h) + 12px + 176px + 8px); right: calc(var(--fb-safe-right) + 12px + 6px); z-index: 3; transition: opacity var(--fb-dur-fast) ease; }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0 !important; float: right; }
.app-shell.drawer-open .maplibregl-ctrl-top-right, .app-shell.detail-open .maplibregl-ctrl-top-right, .app-shell.view-search .maplibregl-ctrl-top-right { opacity: 0; pointer-events: none; }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
    width: 32px; height: 32px; top: 0; right: 0; left: auto; border-radius: 16px; background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230072F2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 8h.01'/></svg>");
    background-size: 22px 22px; background-repeat: no-repeat; background-position: center;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { background-color: transparent; }
.maplibregl-ctrl-attrib a { color: var(--fb-text-secondary); }
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { white-space: nowrap; }
/* open credits on a phone: wrap inside the screen instead of running off the left edge */
.maplibregl-ctrl-attrib.fb-open .maplibregl-ctrl-attrib-inner { white-space: normal; max-width: calc(100vw - 96px); line-height: 1.35; padding: 6px 0; }
.maplibregl-ctrl-bottom-right { display: none; }

/* Selected gym pin: DOM marker, anchored at the tip. Drop-in on selection + gentle pulsing halo. */
.pin { position: relative; width: 40px; height: 52px; pointer-events: auto; cursor: pointer; }
.pin__svg { position: absolute; left: 0; top: 0; width: 40px; height: 52px; display: block; transform-origin: 50% 100%;
    filter: drop-shadow(0 6px 8px rgba(8, 36, 74, .28)) drop-shadow(0 1px 2px rgba(8, 36, 74, .18));
    animation: fb-pin-drop .5s var(--fb-ease) both; }
.pin__halo, .pin__shadow { position: absolute; left: 50%; bottom: -1px; border-radius: 50%; transform: translate(-50%, 50%); }
.pin__shadow { width: 14px; height: 6px; background: rgba(8, 36, 74, .28); filter: blur(2px); animation: fb-pin-shadow .5s var(--fb-ease) both; }
.pin__halo { width: 22px; height: 22px; background: rgba(0, 114, 242, .35); animation: fb-halo 2s cubic-bezier(.2, .6, .4, 1) .3s infinite; }
@keyframes fb-pin-drop {
    0% { transform: translateY(-36px) scale(.7); opacity: 0; }
    55% { transform: translateY(3px) scale(1.04); opacity: 1; }
    75% { transform: translateY(-3px) scale(.99); }
    100% { transform: none; opacity: 1; }
}
@keyframes fb-pin-shadow { 0% { opacity: 0; transform: translate(-50%, 50%) scale(.4); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, 50%) scale(1); } }
@keyframes fb-halo { 0% { transform: translate(-50%, 50%) scale(.45); opacity: .7; } 100% { transform: translate(-50%, 50%) scale(2.6); opacity: 0; } }

/* ------------------------------------------------------------------ top bar (48px controls) */
.topbar {
    position: absolute; z-index: 20;
    top: calc(var(--fb-safe-top) + 10px); left: calc(var(--fb-safe-left) + 10px); right: calc(var(--fb-safe-right) + 10px);
    display: flex; align-items: center; gap: 4px;
    height: var(--fb-topbar-h); padding: 4px 4px 4px 12px;
    background: var(--fb-glass); border: 1px solid var(--fb-glass-border);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-radius: 28px; box-shadow: var(--fb-shadow);
    transition: opacity var(--fb-dur) ease, transform var(--fb-dur) var(--fb-ease);
}
.topbar.is-hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.topbar__brand { display: flex; align-items: center; flex: 0 0 auto; height: 48px; margin-right: 4px; border-radius: 12px; }
.topbar__brand img { height: 28px; width: auto; display: block; }
.topbar__search {
    flex: 1 1 auto; min-width: 0; height: 48px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px; border: 0; border-radius: 24px;
    background: var(--fb-surface-secondary); color: var(--fb-text-secondary); text-align: left;
    transition: background var(--fb-dur-fast) ease;
}
.topbar__search:hover { background: var(--fb-border); }
.topbar__search .ic { width: 18px; height: 18px; color: var(--fb-text-muted); }
.topbar__search-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.topbar__chip, .topbar__menu {
    position: relative; flex: 0 0 auto; width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 24px; background: transparent; color: var(--fb-text);
    transition: background var(--fb-dur-fast) ease, transform var(--fb-dur-fast) ease;
}
.topbar__chip:hover, .topbar__menu:hover { background: var(--fb-surface-secondary); }
.topbar__chip:active, .topbar__menu:active { transform: scale(.94); }
.topbar__chip.is-active { background: var(--fb-blue-500); color: #fff; }
.topbar__chip-count {
    position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--fb-green); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
    box-shadow: 0 0 0 2px var(--fb-surface);
}

/* desktop panel toggle: glass pill under the top bar, "Seznam · N" */
.panel-toggle {
    position: absolute; z-index: 21; display: none; align-items: center; gap: 8px;
    top: calc(var(--fb-safe-top) + var(--fb-topbar-h) + 22px); left: 10px; min-height: 44px; padding: 0 16px 0 12px;
    border: 1px solid var(--fb-glass-border); border-radius: 22px; background: var(--fb-glass); color: var(--fb-text);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--fb-shadow); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
    transition: transform var(--fb-dur-fast) ease, box-shadow var(--fb-dur-fast) ease;
}
.panel-toggle:hover { box-shadow: var(--fb-shadow-lift); }
.panel-toggle:active { transform: scale(.97); }
.panel-toggle .ic { width: 20px; height: 20px; color: var(--fb-blue-500); }
@media (min-width: 1024px) { .panel-toggle { display: inline-flex; } .panel-close { display: inline-flex; } }
@media (max-width: 1023px) { .panel-close { display: none !important; } }

/* ------------------------------------------------------------------ map controls: one glass pill stack, 44px buttons, 22px blue icons (mobile-4)
   mobile-5: top right under the top bar on every viewport (the bottom-right stack collided with the chips / attribution) */
.map-controls {
    position: absolute; z-index: 15; right: calc(var(--fb-safe-right) + 12px);
    top: calc(var(--fb-safe-top) + 10px + var(--fb-topbar-h) + 12px); /* 12px under the floating top bar */
    display: flex; flex-direction: column; transition: opacity var(--fb-dur) ease;
}
.map-controls.is-hidden { opacity: 0; pointer-events: none; }
.map-stack {
    display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
    background: var(--fb-glass); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--fb-glass-border), inset 0 1px 0 rgba(255, 255, 255, .7), var(--fb-shadow-lift);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .map-stack { background: var(--fb-surface); } }
.map-btn {
    width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--fb-blue-500);
    display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
    transition: background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease;
}
.map-btn + .map-btn { box-shadow: inset 0 1px 0 var(--fb-glass-border); } /* hairline between the buttons */
.map-btn .ic { width: 22px; height: 22px; stroke-width: 2.25; transition: transform var(--fb-dur-fast) var(--fb-ease); }
.map-btn:active, .map-btn.is-on { background: var(--fb-blue-500); color: #fff; }
.map-btn:active .ic { transform: scale(.9); }
.map-btn:focus-visible { box-shadow: inset var(--fb-focus); }
.map-btn--locate.is-busy .ic { animation: fb-spin 1.1s linear infinite; }
.map-btn:disabled { opacity: .5; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@keyframes fb-pulse { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }

/* ------------------------------------------------------------------ floating dock (brief §5): 56px bar, 44px items, 22px icons, 10.5px labels */
.dock {
    position: fixed; z-index: 40;
    left: 50%; transform: translateX(-50%);
    bottom: var(--fb-dock-bottom);
    width: min(300px, calc(100% - 64px)); /* compact pill, not a full-width bar */
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 320ms cubic-bezier(.2, .8, .2, 1);
    will-change: transform, opacity;
}
/* while the page / drawer / overlay scrolls the whole dock eases 6px down and to opacity .9 (transform/opacity only, no layout);
   app.js clears .is-scrolling 250 ms after the last scroll event and never sets it under prefers-reduced-motion */
.dock.is-scrolling { transform: translate(-50%, 6px); opacity: .9; }
.dock.is-hidden { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.dock__inner {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
    height: var(--fb-dock-height); padding: 5px;
    background: var(--floating-menu-bg); border: 1px solid var(--floating-menu-border);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 var(--floating-menu-highlight), var(--floating-menu-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dock__inner { background: var(--fb-surface); }
}
.dock__puck {
    position: absolute; top: 5px; bottom: 5px; left: 5px;
    width: calc((100% - 10px) / 4);
    border-radius: 22px; background: var(--floating-menu-active-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(0, 114, 242, .35);
    transform: translateX(calc(var(--dock-index, 0) * 100%));
    transition: transform .3s var(--fb-spring);
}
.dock__item {
    position: relative; z-index: 1; height: 44px; min-width: 0; padding: 0 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; /* icon + label centred as a unit, label always visible */
    border: 0; background: transparent; border-radius: 21px; overflow: hidden;
    color: var(--floating-menu-text); font-size: 9.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--fb-dur-fast) ease;
}
.dock__item span:not(.dock__badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dock__item .ic { width: 18px; height: 18px; transition: transform var(--fb-dur-fast) var(--fb-ease); }
.dock__item.is-active { color: #fff; }
.dock__item.is-active .ic { transform: translateY(-1px) scale(1.06); }
/* tap feedback: scale + ripple wash */
.dock__item:active .ic { transform: scale(.86); }
.dock__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .35s ease; }
.dock__item:active::after { opacity: .12; transition-duration: 0s; }
.dock__item:focus-visible { box-shadow: inset var(--fb-focus); }
.dock__badge {
    position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--fb-green); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
@media (min-width: 1024px) { .dock { display: none; } }

/* ------------------------------------------------------------------ panel: desktop 400px left panel / mobile left drawer (mobile-8)
   Mobile: ONE drawer for the results list, dock search, filters, saved and forms. Slides in from the left over a scrim,
   width min(88%, 400px), full height minus the safe areas; swipe-left / scrim / X / Esc close it. */
.scrim { position: fixed; inset: 0; z-index: 29; background: rgba(8, 36, 74, .32); }
.panel {
    position: fixed; z-index: 30; left: 0; top: 0; bottom: 0;
    width: min(88%, var(--fb-panel-w));
    padding-top: var(--fb-safe-top); padding-left: var(--fb-safe-left); padding-bottom: var(--fb-safe-bottom);
    background: var(--fb-surface); color: var(--fb-text);
    border-radius: 0 var(--fb-radius-lg) var(--fb-radius-lg) 0;
    box-shadow: 12px 0 40px rgba(8, 36, 74, .22);
    display: flex; flex-direction: column;
    transform: translateX(-104%); visibility: hidden;
    transition: transform 280ms var(--fb-spring), visibility 0s linear 280ms;
    will-change: transform;
}
.app-shell.drawer-open .panel { transform: none; visibility: visible; transition: transform 280ms var(--fb-spring), visibility 0s linear 0s; }
.panel.is-kb { bottom: var(--fb-kb); padding-bottom: 0; }
.panel__head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 8px 4px 16px; }
.panel__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel__x { flex: 0 0 auto; width: 44px; height: 44px; background: var(--fb-surface-secondary); }
.panel__search { flex: 0 0 auto; }
.panel__search:empty { display: none; }
.panel__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 var(--fb-space-4) 0;
    scroll-padding-bottom: 24px;
    overscroll-behavior: contain;
    scrollbar-width: none; /* owner: no visible scroller; the floating "more" button pages through the list */
}
.panel__body::-webkit-scrollbar { display: none; }
.view__intro { padding: 0 2px; }
.panel-more { position: absolute; z-index: 6; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px;
    border-radius: 20px; border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-blue-500); font: inherit; font-size: 14px; font-weight: 700;
    box-shadow: var(--fb-shadow-lift); cursor: pointer; transition: opacity var(--fb-dur-fast) ease, transform var(--fb-dur-fast) ease; }
.panel-more .ic { width: 16px; height: 16px; }
.panel-more:active { transform: translateX(-50%) scale(.96); }
/* mobile: touch scrolling is obvious and the floating pill covered chips/list rows — hide it (the trailing spacer
   further down already lets the last rows scroll clear of the floating dock) */
@media (max-width: 1023px) { .panel-more { display: none !important; } }
/* trailing spacer (not container padding: Blink insets sticky bars by the scroller's padding too) */
.panel__body::after { content: ""; display: block; height: 24px; flex: 0 0 auto; }
.panel__body:focus-visible { box-shadow: none; }
.chips--quick { margin: 4px 0 8px; }
.chips--quick .chip { min-height: 40px; padding: 6px 12px; font-size: 13px; }

/* list pill (mobile): bottom-left above the dock, "▤ 244" / "▤ Najbližji · 22" */
.list-pill {
    position: fixed; z-index: 24; left: calc(var(--fb-safe-left) + 12px); bottom: var(--fb-dock-space);
    display: inline-flex; align-items: center; gap: 8px; height: var(--fb-pill-h); min-width: 44px; padding: 0 16px 0 12px;
    border: 1px solid var(--fb-glass-border); border-radius: 22px; background: var(--fb-glass); color: var(--fb-text);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--fb-shadow-lift);
    font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
    -webkit-tap-highlight-color: transparent; transition: transform var(--fb-dur-fast) ease, box-shadow var(--fb-dur-fast) ease, bottom var(--fb-dur) var(--fb-ease);
}
.list-pill .ic { width: 20px; height: 20px; color: var(--fb-blue-500); stroke-width: 2.25; }
/* mobile-9: pill = same height/glass as the dock, left of it, slides with it while scrolling */
.list-pill { bottom: var(--fb-dock-bottom); height: var(--fb-dock-height); width: var(--fb-pill-w); padding: 0; justify-content: center; gap: 6px; border-radius: 26px;
    background: var(--floating-menu-bg); border-color: var(--floating-menu-border); box-shadow: inset 0 1px 0 var(--floating-menu-highlight), var(--floating-menu-shadow);
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 320ms cubic-bezier(.2, .8, .2, 1); }
.list-pill.is-scrolling { transform: translateY(6px); opacity: .9; }
.list-pill.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (max-width: 1023px) {
    .dock { left: calc(var(--fb-group-left) + var(--fb-pill-w) + 8px); right: auto; transform: none; width: var(--fb-dock-w); }
    .list-pill { left: var(--fb-group-left); }
    .dock.is-scrolling { transform: translateY(6px); }
    .dock.is-hidden { transform: translateY(140%); }
}
.list-pill:active { transform: scale(.96); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .list-pill, .gcard { background: var(--fb-surface); } }

/* gym card (mobile): compact floating card above the dock; the body opens the full-screen overlay, X deselects */
.gcard {
    position: fixed; z-index: 27; left: calc(var(--fb-safe-left) + 12px); right: calc(var(--fb-safe-right) + 12px); bottom: var(--fb-dock-space);
    max-width: 480px; margin: 0 auto; padding: 6px 8px 8px 12px;
    background: var(--fb-surface); color: var(--fb-text); border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--fb-glass-border), 0 2px 6px rgba(8, 36, 74, .10), 0 18px 44px rgba(8, 36, 74, .26);
    transition: bottom var(--fb-dur) var(--fb-ease);
}
.gc-in { transition: transform 300ms var(--fb-ease-out), opacity 200ms ease; }
.gc-in--0 { transform: translateY(24px) scale(.98); opacity: 0; }
.gc-in--1 { transform: none; opacity: 1; }
.gcard__in { display: flex; flex-direction: column; gap: 6px; }
.gcard__head { display: flex; align-items: center; gap: 2px; }
.gcard__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 0; border: 0; background: none; color: inherit; text-align: left; border-radius: 12px; }
.gcard__logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    background: var(--fb-primary-soft); color: var(--fb-blue-600); font-weight: 800; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(8, 36, 74, .06); }
.gcard__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gcard__name { font-weight: 800; font-size: 16px; letter-spacing: -.015em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__city { font-size: 13px; color: var(--fb-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard .card__fav { width: 44px; height: 44px; }
.gcard__x { width: 44px; height: 44px; color: var(--fb-text-muted); }
.gcard__status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 22px; padding: 0 4px 0 0; border: 0; background: none; color: inherit; text-align: left; font-size: 13px; border-radius: 8px; }
.gcard__status .state, .gcard__status .card__dist, .gcard__status .tag--price { flex: 0 0 auto; white-space: nowrap; }
/* "Več podrobnosti ›": full-width quiet row at the bottom of the card (the whole card body opens the overlay too) */
.gcard__more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; margin: 2px -8px -8px -12px; padding: 0 12px; border: 0; border-top: 1px solid var(--fb-border); border-radius: 0 0 22px 22px; background: none; color: var(--fb-blue-500); font: inherit; font-size: 15px; font-weight: 700; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gcard__more .ic { width: 18px; height: 18px; }
.gcard__more:active { background: var(--fb-surface-secondary); }
.gact--fav.is-on { color: var(--fb-danger); border-color: rgba(229, 72, 77, .35); }
.gact--fav.is-on .ic { fill: currentColor; }
.gact--fav.is-pop .ic { animation: fb-heart-pop .45s var(--fb-ease); }
.gcard__actions, .dsheet__bar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 6px; }
/* action buttons (card row + overlay bar): 44px, icon + label */
.gact {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 14px;
    border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-text); text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.1;
    -webkit-tap-highlight-color: transparent; transition: transform var(--fb-dur-fast) ease, background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease;
}
/* the three secondary actions are icon-only (aria-label carries the name; labels never fit next to "Pelji me tja" on a phone); < 360px the primary drops its icon */
.gact:not(.gact--go) span { display: none; }
@media (max-width: 359px) { .gact--go .ic { display: none; } }
.gact .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.gact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gact small { font-size: 11px; font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.gact:active { transform: scale(.96); }
.gact--go { background: var(--fb-gradient-blue); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(0, 114, 242, .28); }
.gact--go:disabled { opacity: .55; box-shadow: none; }
.gact.is-off { opacity: .4; pointer-events: none; }

/* full-screen detail overlay (mobile): slides up from the card, own sticky header + sticky action bar, dock hidden */
.dsheet {
    position: fixed; z-index: 28; inset: 0; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--fb-surface); color: var(--fb-text);
    padding-top: var(--fb-safe-top);
}
.ds-in { transition: transform 300ms var(--fb-ease-out), opacity 200ms ease; }
.ds-out { transition: transform 220ms var(--fb-ease-in), opacity 180ms ease; }
.ds-in--0 { transform: translateY(40%); opacity: 0; }
.ds-in--1 { transform: none; opacity: 1; }
.dsheet__head { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 8px; border-bottom: 1px solid var(--fb-border); background: var(--fb-surface); touch-action: pan-x; }
.dsheet__grab { position: absolute; left: 50%; top: 6px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--fb-border); }
.dsheet__title { flex: 1 1 auto; min-width: 0; margin: 0; padding-top: 6px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity var(--fb-dur-fast) ease, transform var(--fb-dur-fast) var(--fb-ease); }
.dsheet__title.is-on { opacity: 1; transform: none; }
.dsheet__head .card__fav { width: 48px; height: 48px; }
.dsheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 var(--fb-space-4) 16px; }
.dsheet__body:focus-visible { box-shadow: none; }
.dsheet__bar { flex: 0 0 auto; padding: 10px 12px calc(var(--fb-safe-bottom) + 10px); border-top: 1px solid var(--fb-border); background: var(--fb-surface); }
/* the overlay has its own header + action bar: hide the panel-style back/heart row and the action grid of the detail section */
.dsheet .detail__back, .dsheet .detail__head .card__fav, .dsheet .actions { display: none; }
.dsheet .detail__head { margin: 0; }
.dsheet .detail__title { padding: 12px 0 0; }
.dsheet .detail__name { font-size: 24px; }

/* ------------------------------------------------------------------ desktop: left panel */
@media (min-width: 1024px) {
    :root { --fb-tap-min: 44px; }
    .panel {
        position: absolute; left: 0; top: 0; bottom: 0; right: auto; height: auto; width: var(--fb-panel-w); padding-left: 0; padding-bottom: 0;
        border-radius: 0; transform: none; visibility: visible; box-shadow: 8px 0 30px rgba(8, 36, 74, .10);
        padding-top: calc(var(--fb-safe-top) + var(--fb-topbar-h) + 20px);
        transition: transform 220ms var(--fb-ease), visibility 0s linear 0s;
    }
    /* default: full-width map, panel slid out; the "Seznam · N" toggle brings it back */
    .app-shell.panel-closed .panel { transform: translateX(-104%); visibility: hidden; transition: transform 220ms var(--fb-ease-in), visibility 0s linear 220ms; }
    .panel__head, .scrim, .list-pill, .gcard, .dsheet { display: none !important; }
    .panel-close {
        position: absolute; z-index: 3; top: calc(var(--fb-safe-top) + var(--fb-topbar-h) + 24px); right: 8px;
        width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--fb-surface-secondary); color: var(--fb-text-secondary);
        display: inline-flex; align-items: center; justify-content: center; transition: background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease;
    }
    .panel-close:hover { background: var(--fb-border); color: var(--fb-text); }
    .panel-close .ic { width: 18px; height: 18px; }
    .panel .view__head--results { padding-right: 48px; }
    .panel .detail__head { padding-right: 36px; }
    .panel__body { padding-bottom: var(--fb-space-5); overflow-y: auto !important; visibility: visible !important; }
    .panel__body::after { display: none; }
    .topbar { left: 10px; right: auto; width: calc(var(--fb-panel-w) - 20px); z-index: 35; }
    /* desktop: same as mobile — +/−/locate top-right under the top bar, ⓘ right below the stack */
    .map-controls { top: calc(var(--fb-safe-top) + 10px + var(--fb-topbar-h) + 12px); bottom: auto; right: 16px; }
    .maplibregl-ctrl-top-right { right: calc(16px + 6px); opacity: 1 !important; pointer-events: auto !important; }
}

/* ------------------------------------------------------------------ views inside the panel / drawer */
.view { padding-top: 6px; }
.view__head { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: 4px; }
.view__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; flex: 1 1 auto; line-height: 1.2; }
.view__title--sm { font-size: 15px; font-weight: 700; color: var(--fb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.view__sub { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fb-text-muted); }
.chips--top { margin-top: 4px; }
.chips--top [role="radiogroup"], .chips--top [role="group"] { display: contents; }
.view__count { font-size: 13px; color: var(--fb-text-muted); font-variant-numeric: tabular-nums; }
.view__intro { margin: 0 0 8px; color: var(--fb-text-secondary); font-size: 14px; }
/* primary action (mobile-5): one floating pill, 44px, auto width, centred 12px above the panel bottom; the container is transparent
   (no bar, no strip) and the panel body's trailing spacer keeps the last content row above it when scrolled to the end */
.view__actions { position: sticky; bottom: 12px; z-index: 3; display: flex; justify-content: center; margin: 12px 0 0; padding: 0; background: transparent; pointer-events: none; }
.view__actions .btn { pointer-events: auto; width: auto; min-height: 44px; padding: 0 22px; font-size: 15px; box-shadow: 0 8px 22px rgba(0, 114, 242, .34), 0 1px 3px rgba(8, 36, 74, .18); }
.view__actions .btn--primary:disabled { box-shadow: 0 1px 3px rgba(8, 36, 74, .12); }
.view__actions--inline { position: static; }
/* short forms / filter lists: the view fills the scroller so the pill still sits above the dock, not mid-panel */
.view--filters, .view--form { display: flex; flex-direction: column; min-height: calc(100% - 24px); }
.view--filters > *, .view--form > * { flex: 0 0 auto; }
.view--form .form { flex: 1 0 auto; } /* the actions live inside the <form>, which fills the view */
.view--filters .view__actions, .view--form .view__actions { margin-top: auto; padding-top: 12px; }
@media (min-width: 1024px) { .view__actions { bottom: 12px; } }
/* segmented pill button (list ↔ map toggle in the results header) */
.seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0; border-radius: 20px; border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-text); font-size: 13px; font-weight: 600; }
.seg-btn .ic { width: 18px; height: 18px; color: var(--fb-blue-500); }
.seg-btn span { display: none; }
/* results header: sticky, count + sort control */
.view__head--results { position: sticky; top: 0; z-index: 2; margin: 0 -16px 4px; padding: 4px 16px; background: var(--fb-surface); border-bottom: 1px solid var(--fb-border); }
/* title ("73 fitnesov v tem pogledu") gets its own row, the country + sort selects wrap below it — side by side the title was squeezed to "87" (owner 2026-10-02) */
.view__head--results { flex-wrap: wrap; row-gap: 2px; }
.view__head--results .view__title { flex: 1 1 100%; }
.sort { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.sort .ic { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--fb-text-muted); pointer-events: none; }
.sort__select {
    appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 28px 0 32px; border-radius: 20px; border: 1px solid var(--fb-border);
    background: var(--fb-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
    color: var(--fb-text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 170px; text-overflow: ellipsis;
}
.sort__select:hover { border-color: var(--fb-text-muted); color: var(--fb-text); }
.sort__select:focus-visible { border-color: var(--fb-blue-500); }
.hint { margin: 6px 0; font-size: 13px; color: var(--fb-text-muted); }
.empty { margin: 16px 0; padding: 14px; border-radius: var(--fb-radius); background: var(--fb-surface-secondary); color: var(--fb-text-secondary); font-size: 14px; }
.empty--state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; }
.empty__ic { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--fb-surface); color: var(--fb-blue-500); box-shadow: var(--fb-shadow-sm); }
.empty__ic .ic { width: 24px; height: 24px; }
.empty__title { margin: 4px 0 0; font-weight: 700; color: var(--fb-text); font-size: 15px; }
.empty__text { margin: 0; }
.link { border: 0; background: none; padding: 6px 4px; color: var(--fb-blue-500); font-weight: 600; font-size: 14px; border-radius: 6px; min-height: 40px; }
.btn-icon {
    width: var(--fb-tap-min); height: var(--fb-tap-min); border: 0; border-radius: 24px; background: transparent; color: var(--fb-text);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    transition: background var(--fb-dur-fast) ease, transform var(--fb-dur-fast) ease;
}
.btn-icon:hover { background: var(--fb-surface-secondary); }
.btn-icon:active { transform: scale(.92); }
.btn-icon .ic { width: 24px; height: 24px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--fb-tap-min); padding: 10px 18px; border-radius: 24px; border: 1px solid transparent;
    font-weight: 700; font-size: 15px; text-decoration: none;
    transition: transform var(--fb-dur-fast) ease, box-shadow var(--fb-dur-fast) ease, border-color var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease, background var(--fb-dur-fast) ease;
}
.btn .ic { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--fb-gradient-blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 114, 242, .28); }
.btn--primary:hover { box-shadow: 0 8px 22px rgba(0, 114, 242, .36); }
.btn--primary:disabled { opacity: .6; box-shadow: none; }
.btn--ghost { background: var(--fb-surface); border-color: var(--fb-border); color: var(--fb-text); }
.btn--ghost:hover { border-color: var(--fb-blue-500); color: var(--fb-blue-500); background: var(--fb-primary-soft); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ results list */
.list { list-style: none; margin: 0; padding: 0; }
.list--plain .row { border-bottom: 0; }
.list__head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--fb-text-secondary); }
/* list row: divider + left accent bar on hover/selection (mirrors the map marker state) */
.card { position: relative; display: flex; align-items: stretch; margin: 0 -16px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--fb-border);
    transition: background var(--fb-dur-fast) ease, transform var(--fb-dur-fast) var(--fb-ease), box-shadow var(--fb-dur-fast) ease; }
.card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fb-blue-500); opacity: 0; transition: opacity var(--fb-dur-fast) ease; }
.card.is-hover { background: var(--fb-surface-secondary); }
.card.is-hover::before { opacity: .6; }
.card.is-selected { background: var(--fb-primary-soft); }
.card.is-selected::before { opacity: 1; }
.card.is-selected .card__name { color: var(--fb-blue-600); }
:root[data-theme="dark"] .card.is-selected .card__name { color: #8CC4FF; }
.card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 0; text-decoration: none; color: inherit; border-radius: 8px; }
.card__main:focus-visible { box-shadow: inset var(--fb-focus); }
.card__name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--fb-text-secondary); }
.card__dist { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fb-text); }
.card__city::before { content: ""; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card__fav {
    flex: 0 0 auto; width: var(--fb-tap-min); align-self: center; height: var(--fb-tap-min);
    border: 0; background: transparent; color: var(--fb-text-muted); border-radius: 24px; display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease;
}
.card__fav .ic { width: 24px; height: 24px; transition: transform var(--fb-dur-fast) var(--fb-ease); }
.card__fav:hover { background: var(--fb-surface); color: var(--fb-danger); }
.card__fav:active .ic { transform: scale(.85); }
.card__fav.is-on { color: var(--fb-danger); }
.card__fav.is-on .ic { fill: currentColor; }
.card__fav.is-pop .ic { animation: fb-heart-pop .45s var(--fb-ease); }
@keyframes fb-heart-pop { 0% { transform: scale(.6); } 45% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.card__fav--lg { width: 48px; height: 48px; }
/* list item enter: fade + 8px rise, staggered ≤ 10 rows (--i from the x-for index) */
.li-in { animation: fb-row-in .26s var(--fb-ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes fb-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card__hours { font-variant-numeric: tabular-nums; }
.card__go {
    flex: 0 0 auto; width: 44px; height: var(--fb-tap-min); align-self: center; margin-right: -4px;
    border: 0; background: transparent; color: var(--fb-blue-500); border-radius: 22px; display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--fb-dur-fast) ease, transform var(--fb-dur-fast) ease;
}
.card__go .ic { width: 22px; height: 22px; }
.card__go:hover { background: var(--fb-primary-soft); }
.card__go:active { transform: scale(.9); }
.row__dist { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fb-text-secondary); white-space: nowrap; }
.skel--row { padding: 10px 0; gap: 6px; border-bottom: 0; }
/* skeleton rows while fetching */
.skel { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--fb-border); }
.skel__bar { background: linear-gradient(90deg, var(--fb-surface-secondary) 25%, var(--fb-border) 50%, var(--fb-surface-secondary) 75%); background-size: 200% 100%; border-radius: 6px; animation: fb-shimmer 1.4s linear infinite; }
.skel__bar { height: 14px; }
.skel__bar--title { width: 62%; height: 16px; }
.skel__bar--meta { width: 40%; }
.skel__bar--tag { width: 26%; height: 20px; border-radius: 8px; }
@keyframes fb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* list ↔ detail transition (enter only: 200ms fade + slide; leaving view is removed instantly to avoid overlap) */
.v-in { transition: opacity var(--fb-dur) ease-out, transform var(--fb-dur) var(--fb-ease); }
.v-in--r { opacity: 0; transform: translateX(16px); }
.v-in--l { opacity: 0; transform: translateX(-16px); }
.v-in--0 { opacity: 1; transform: none; }
.tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px;
    font-size: 12px; font-weight: 600; background: var(--fb-surface-secondary); color: var(--fb-text-secondary);
}
.tag--price { background: var(--fb-primary-soft); color: var(--fb-blue-600); font-variant-numeric: tabular-nums; }
.tag--country { background: var(--fb-surface-secondary); color: var(--fb-text-muted); font-size: 11px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; letter-spacing: .02em; }
.sort--country { margin-right: 4px; }
:root[data-theme="dark"] .tag--price { color: #8CC4FF; }
.tag--crowd-1 { background: var(--fb-accent-soft); color: #047857; }
.tag--crowd-2 { background: #FFF4DE; color: #8A5A00; }
.tag--crowd-3 { background: #FDE8E9; color: #B3262D; }
.state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.state__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state--open { color: #047857; }
.state--247 { color: var(--fb-blue-600); }
.state--closed { color: #B3262D; }
.state--unknown { color: var(--fb-text-muted); }
.state--soon { color: #B45309; }
:root[data-theme="dark"] .state--soon { color: #FFC862; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .state--soon { color: #FFC862; } }
:root[data-theme="dark"] .state--open, :root[data-theme="dark"] .tag--crowd-1 { color: #5EEBB8; }
:root[data-theme="dark"] .state--closed, :root[data-theme="dark"] .tag--crowd-3 { color: #FF8F94; }
:root[data-theme="dark"] .state--247 { color: #8CC4FF; }
:root[data-theme="dark"] .tag--crowd-2 { color: #FFC862; }
:root[data-theme="dark"] .tag--crowd-1 { background: #0C3128; }
:root[data-theme="dark"] .tag--crowd-2 { background: #3B2A08; }
:root[data-theme="dark"] .tag--crowd-3 { background: #3E1416; }
.state--lg { font-size: 16px; }
.cta-add { margin: 20px 0 8px; padding: 16px; border-radius: var(--fb-radius); background: var(--fb-surface-secondary); text-align: center; }
.cta-add p { margin: 0 0 10px; font-weight: 600; }

/* rows (search suggestions, recent) */
.row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 4px;
    border: 0; border-bottom: 1px solid var(--fb-border); background: transparent; color: inherit; text-decoration: none; text-align: left;
}
.row__ic { width: 36px; height: 36px; border-radius: 12px; background: var(--fb-surface-secondary); color: var(--fb-text-secondary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.row__ic .ic { width: 18px; height: 18px; }
.row__body { display: flex; flex-direction: column; min-width: 0; }
.row__title { font-weight: 600; }
.row__sub { font-size: 13px; color: var(--fb-text-muted); }
.row--accent { color: var(--fb-blue-500); font-weight: 700; }
.row--accent .ic { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ search panel
   top: dropdown under the top bar (results ≤ 45vh, map stays visible) · dock (mobile): mounted at the top of the drawer, input on top */
.spanel {
    position: absolute; z-index: 36; display: flex; flex-direction: column;
    background: var(--fb-surface); color: var(--fb-text); border: 1px solid var(--fb-glass-border);
    box-shadow: var(--fb-shadow-lift); overflow: hidden;
}
.spanel--top {
    top: calc(var(--fb-safe-top) + 10px); left: calc(var(--fb-safe-left) + 10px); right: calc(var(--fb-safe-right) + 10px);
    border-radius: 28px; max-height: calc(45vh + var(--fb-topbar-h) + 8px);
}
.spanel--dock { position: static; height: 100%; border: 0; box-shadow: none; border-radius: 0; }
.spanel-host:empty { display: none; }
/* in the drawer the search fills the panel: its body scrolls, the panel body underneath is collapsed */
.app-shell.is-mobile.view-search .panel__search { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.app-shell.is-mobile.view-search .panel__search .spanel { flex: 1 1 auto; min-height: 0; }
.app-shell.is-mobile.view-search .panel__body { display: none; }
.spanel__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px; }
.spanel--top .spanel__bar { min-height: var(--fb-topbar-h); }
.spanel--dock .spanel__bar { padding: 8px 8px 4px; min-height: 56px; }
.spanel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 var(--fb-space-4) 12px; }
.spanel--dock .spanel__body { padding-bottom: 20px; }
/* enter: fade + settle (down for the dropdown, up for the bottom sheet / chooser) */
.sp-in { transition: opacity var(--fb-dur) ease-out, transform 300ms var(--fb-ease-out); }
.sp-in--0 { opacity: 0; transform: translateY(-10px); }
.spanel--dock.sp-in--0 { transform: none; }
.sp-in--up { opacity: 0; transform: translateY(24px); }
.sp-in--1 { opacity: 1; transform: none; }
@media (min-width: 1024px) {
    .spanel--top, .spanel--dock { top: 10px; left: 10px; right: auto; bottom: auto; width: calc(var(--fb-panel-w) - 20px); height: auto; max-height: 70vh; border-radius: 28px; }
}
.search__input {
    flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border-radius: 23px;
    border: 1px solid var(--fb-border); background: var(--fb-surface-secondary); color: var(--fb-text); font-size: 16px;
}
.search__input:focus { border-color: var(--fb-blue-500); outline: none; box-shadow: var(--fb-focus); }
.search__input::-webkit-search-cancel-button { display: none; }

/* ------------------------------------------------------------------ "Pelji me tja" app chooser (above the dock) */
.chooser-backdrop { position: absolute; inset: 0; z-index: 46; background: rgba(8, 36, 74, .32); }
.chooser {
    position: absolute; z-index: 47; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--fb-dock-space) - 4px); width: min(420px, calc(100% - 24px));
    padding: 12px 12px calc(12px); border-radius: var(--fb-radius-lg); background: var(--fb-surface); box-shadow: var(--fb-shadow-lift);
    display: flex; flex-direction: column; gap: 8px;
}
.chooser.sp-in--up { transform: translate(-50%, 24px); }
.chooser.sp-in--1 { transform: translateX(-50%); }
.chooser__title { margin: 0 4px 4px; font-size: 13px; color: var(--fb-text-secondary); }
.chooser__title strong { color: var(--fb-text); }
.chooser__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 14px;
    border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-text); text-decoration: none; font-weight: 700; font-size: 16px;
    transition: transform var(--fb-dur-fast) ease;
}
.chooser__btn:active { transform: scale(.97); }
.chooser__btn .ic { width: 22px; height: 22px; }
.chooser__btn--primary { background: var(--fb-gradient-blue); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(0, 114, 242, .26); }
.chooser__btn--cancel { border-color: transparent; color: var(--fb-text-secondary); min-height: 44px; }
@media (min-width: 1024px) { .chooser { bottom: 24px; } }

/* ------------------------------------------------------------------ filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px;
    border-radius: 20px; border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-text); font-size: 14px; font-weight: 600;
}
.chip .ic { width: 16px; height: 16px; }
.chip { transition: transform var(--fb-dur-fast) var(--fb-ease), background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease, border-color var(--fb-dur-fast) ease; }
.chip:active { transform: scale(.95); }
.chip.is-on { background: var(--fb-blue-500); border-color: var(--fb-blue-500); color: #fff; animation: fb-chip-pop .3s var(--fb-ease); }
@keyframes fb-chip-pop { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* quick filters floating above the list pill (mobile): one-thumb reach, glass chips */
.qchips {
    position: absolute; z-index: 24; left: 0; right: 0;
    bottom: calc(var(--fb-dock-space) + var(--fb-pill-h) + 4px); /* 8px padding of the row + 4px = 12px above the pill */
    display: flex; gap: 8px; padding: 8px var(--fb-space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y; /* horizontal chip scroll + vertical page scroll (Safari toolbar) */
    pointer-events: none; transition: opacity var(--fb-dur) ease, transform var(--fb-dur) var(--fb-ease);
}
.qchips::-webkit-scrollbar { display: none; }
.chip--q {
    pointer-events: auto; position: relative; flex: 0 0 auto; min-height: 36px; height: 36px; padding: 0 12px 0 10px; gap: 5px; font-size: 13px; border-radius: 18px;
    background: var(--fb-glass); border-color: var(--fb-glass-border); color: var(--fb-text);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--fb-shadow-sm);
}
.chip--q.is-on { background: var(--fb-blue-500); border-color: var(--fb-blue-500); color: #fff; box-shadow: 0 4px 12px rgba(0, 114, 242, .35); }
.chip--q::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; } /* 44px hit area (inset is from the padding box, border adds 1px) around the 36px chip */
.chip--q .ic { width: 15px; height: 15px; }
.chip--q[aria-busy="true"] .ic { animation: fb-spin 1.1s linear infinite; }
@media (min-width: 1024px) { .qchips { display: none; } }

/* ------------------------------------------------------------------ detail */
.detail__head { display: flex; align-items: flex-start; gap: 4px; margin: 0 -8px; }
.detail__title { flex: 1 1 auto; min-width: 0; padding: 8px 0 0 4px; }
.detail__name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.detail__addr { margin: 4px 0 0; font-size: 14px; color: var(--fb-text-secondary); }
.detail__verified { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--fb-green); font-weight: 600; }
.detail__verified .ic { width: 16px; height: 16px; }
.detail__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 8px; }
.detail__dist { font-weight: 700; font-variant-numeric: tabular-nums; }
.detail__h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.detail__desc { margin: 0; color: var(--fb-text-secondary); font-size: 15px; max-width: 62ch; }
.detail__foot { border-top: 1px solid var(--fb-border); padding-top: 16px; }
.detail__secondary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.detail__secondary .btn { flex: 1 1 auto; font-size: 14px; padding: 8px 12px; }
.block { margin: 24px 0; }
.block + .block { padding-top: 0; }
/* action row: Navodila · Pokliči · Splet · Deli — icon buttons ≥ 48px, visible in the half sheet */
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 16px; }
.action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 64px; padding: 8px 4px; border-radius: 16px; border: 1px solid var(--fb-border); background: var(--fb-surface);
    color: var(--fb-text); text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.1;
    transition: transform var(--fb-dur-fast) ease, border-color var(--fb-dur-fast) ease, background var(--fb-dur-fast) ease, box-shadow var(--fb-dur-fast) ease;
}
.action:hover { border-color: var(--fb-blue-500); color: var(--fb-blue-500); box-shadow: var(--fb-shadow-sm); }
.action:active { transform: scale(.95); }
.action--go { background: var(--fb-gradient-blue); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(0, 114, 242, .26); font-size: 13px; }
.action--go:hover { color: #fff; box-shadow: 0 8px 20px rgba(0, 114, 242, .34); }
.action--go small { font-size: 11px; font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.action--go:disabled { opacity: .55; box-shadow: none; }
.detail__copy { display: inline; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; border-radius: 6px; cursor: pointer; }
.detail__copy-ic { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; color: var(--fb-text-muted); }
.detail__copy:active .detail__copy-ic { transform: scale(.85); }
.link--inline { display: inline; min-height: 0; padding: 0 2px; font-size: inherit; }
.action .ic { width: 24px; height: 24px; }
.action span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crowd { padding: 14px; border-radius: var(--fb-radius); background: var(--fb-surface-secondary); }
.crowd__now { margin: 0 0 8px; font-size: 15px; }
.crowd__now > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crowd__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fb-neutral); flex: 0 0 auto; }
.crowd--1 .crowd__dot, .crowd__btn--1 .crowd__dot { background: var(--fb-success); }
.crowd--2 .crowd__dot, .crowd__btn--2 .crowd__dot { background: var(--fb-warning); }
.crowd--3 .crowd__dot, .crowd__btn--3 .crowd__dot { background: var(--fb-danger); }
.crowd__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crowd__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--fb-tap-min);
    border-radius: 12px; border: 1px solid var(--fb-border); background: var(--fb-surface); font-weight: 700; font-size: 14px;
}
.crowd__btn:disabled { opacity: .6; }
.crowd__thanks { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--fb-green); font-weight: 600; }
.crowd__thanks .ic { width: 18px; height: 18px; }

.feat-group { margin: 8px 0; }
.feat-group__name { font-size: 12px; font-weight: 700; color: var(--fb-text-muted); }
.feat { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.feat li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 8px; background: var(--fb-surface-secondary); font-size: 13px; font-weight: 600; }
.feat li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fb-green); flex: 0 0 auto; }

.acc {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--fb-tap-min); padding: 8px 0;
    border: 0; background: transparent; color: inherit; text-align: left;
}
.acc__title { font-weight: 700; font-size: 15px; }
.acc__sub { flex: 1 1 auto; text-align: right; font-size: 13px; color: var(--fb-text-secondary); font-variant-numeric: tabular-nums; }
.acc__chev { transition: transform .2s ease; }
.acc[aria-expanded="true"] .acc__chev { transform: rotate(180deg); }
.hours { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.hours th { text-align: left; font-weight: 500; padding: 6px 0; color: var(--fb-text-secondary); }
.hours td { text-align: right; padding: 6px 0; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--fb-blue-600); }
/* today's special day / public holiday, above the weekly table */
.notice--warn { margin: 8px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: rgba(245, 166, 35, .16); color: #7A4A00; }
.hours__h { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--fb-text-secondary); }
.hours__special { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
:root[data-theme="dark"] .hours tr.is-today th, :root[data-theme="dark"] .hours tr.is-today td { color: #8CC4FF; }
.prices { margin: 0; }
.prices div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--fb-border); font-size: 15px; }
.prices dt { margin: 0; color: var(--fb-text-secondary); }
.prices dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.links { list-style: none; margin: 0; padding: 0; }
.links a { display: flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; color: var(--fb-text); }
.links .ic { width: 18px; height: 18px; color: var(--fb-text-muted); }
.ssr { display: none; }
.ssr-list { padding-left: 18px; }

/* ------------------------------------------------------------------ forms */
.form { display: flex; flex-direction: column; gap: 4px; }
.form__intro { margin: 0 0 10px; color: var(--fb-text-secondary); font-size: 14px; }
.form__gym { margin: 0 0 10px; font-weight: 700; }
.form__error { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #FDE8E9; color: #B3262D; font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 14px; }
.field > span { font-weight: 600; }
.field em { font-style: normal; font-weight: 400; color: var(--fb-text-muted); }
.field input, .field select, .field textarea {
    width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fb-border);
    background: var(--fb-surface); color: var(--fb-text); font: inherit; font-size: 16px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fb-blue-500); outline: none; box-shadow: var(--fb-focus); }
.field [aria-invalid="true"] { border-color: var(--fb-danger); }
.field__err { color: #B3262D; font-size: 12px; min-height: 0; }
.field__err:empty { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.done { text-align: center; padding: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--fb-green); }
.done p { margin: 0; color: var(--fb-text); font-weight: 600; }

/* ------------------------------------------------------------------ secondary menu */
.menu {
    position: absolute; z-index: 45; top: calc(var(--fb-safe-top) + var(--fb-topbar-h) + 18px); right: calc(var(--fb-safe-right) + 10px);
    width: min(320px, calc(100% - 20px)); padding: 8px; border-radius: var(--fb-radius-lg);
    max-height: calc(100dvh - var(--fb-safe-top) - var(--fb-topbar-h) - 18px - var(--fb-dock-space)); overflow-y: auto; overscroll-behavior: contain; /* short phones: scrolls, footer stays reachable above the dock */
    background: var(--fb-surface); border: 1px solid var(--fb-border); box-shadow: var(--fb-shadow);
}
.menu__list { list-style: none; margin: 0; padding: 0; }
/* language dropdown (top bar, right) */
.lang { position: relative; }
.lang__btn { gap: 4px; padding: 0 10px; width: auto; min-width: var(--fb-tap-min); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.lang__btn svg { width: 18px; height: 18px; }
.lang__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 46; min-width: 180px; margin: 0; padding: 6px; list-style: none;
    background: var(--fb-surface); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); box-shadow: var(--fb-shadow); }
.lang__list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--fb-text); text-decoration: none; font-size: 15px; }
.lang__list a:hover { background: var(--fb-surface-secondary); }
.lang__list a.is-active { color: var(--fb-blue-500); font-weight: 700; }
.lang__list .lang__code { display: inline-flex; min-width: 30px; justify-content: center; padding: 2px 6px; border-radius: 6px; background: var(--fb-surface-secondary); font-size: 12px; font-weight: 700; }
.lang__list a.is-active .lang__code { background: var(--fb-blue-500); color: #fff; }
@media (max-width: 420px) { .lang__btn svg { display: none; } .lang__btn { padding: 0 8px; } }
.menu__list--secondary { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fb-border); }
.menu__btn { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 8px; color: var(--fb-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.menu__btn:hover { background: var(--fb-surface-secondary); }
.menu__list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--fb-text); text-decoration: none; font-weight: 600; }
.menu__list a:hover { background: var(--fb-surface-secondary); }
.menu__group { border-top: 1px solid var(--fb-border); margin-top: 6px; padding: 10px 12px 4px; }
.menu__label { display: block; font-size: 12px; font-weight: 700; color: var(--fb-text-muted); margin-bottom: 6px; }
.menu__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.menu__seg a, .menu__seg button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 10px;
    border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-text); text-decoration: none; font-size: 14px; font-weight: 600;
}
.menu__seg .is-active { background: var(--fb-blue-500); border-color: var(--fb-blue-500); color: #fff; }
.menu__seg .ic { width: 16px; height: 16px; }
.menu__foot { margin: 8px 12px 4px; font-size: 12px; color: var(--fb-text-muted); }
.menu__foot--attrib { margin-top: 2px; line-height: 1.4; }
.menu__foot--attrib a { color: inherit; }
.page__foot a { color: inherit; }

/* ------------------------------------------------------------------ install hint ("Dodaj na začetni zaslon"): above the pill + quick chips (mobile-8), hidden while a card is up */
.ihint {
    position: fixed; z-index: 39; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--fb-dock-space) + var(--fb-stack) + 4px);
    width: min(420px, calc(100% - 24px)); padding: 10px 10px 10px 12px;
    background: var(--fb-surface); color: var(--fb-text); border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--fb-glass-border), var(--fb-shadow-lift);
}
.ihint__row { display: flex; align-items: center; gap: 10px; }
.ihint__icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(8, 36, 74, .08); }
.ihint__text { flex: 1 1 auto; min-width: 0; }
.ihint__title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.ihint__body { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--fb-text-secondary); }
.ihint__cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    border: 0; border-radius: 18px; background: var(--fb-blue-500); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
    -webkit-tap-highlight-color: transparent; transition: transform var(--fb-dur-fast) ease, background var(--fb-dur-fast) ease;
}
.ihint__cta:active { transform: scale(.96); background: var(--fb-blue-600); }
.ihint__cta .ic { width: 16px; height: 16px; }
.ihint__actions { margin-top: 8px; }
.ihint__cta--wide { width: 100%; justify-content: center; min-height: 40px; border-radius: 20px; font-size: 14px; }
.ihint__close {
    position: relative; flex: 0 0 auto; width: 36px; height: 36px; margin-left: -4px; border: 0; border-radius: 50%; background: transparent; color: var(--fb-text-muted);
    display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.ihint__close::before { content: ""; position: absolute; width: 44px; height: 44px; } /* 44px hit area */
.ihint__close .ic { width: 18px; height: 18px; }
.ihint__close:active { color: var(--fb-text); }
.ihint__steps { list-style: none; margin: 8px 0 0; padding: 8px 0 2px 4px; border-top: 1px solid var(--fb-border); display: grid; gap: 8px; counter-reset: ihint; }
.ihint__steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; counter-increment: ihint; }
.ihint__steps li::before { content: counter(ihint); flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--fb-primary-soft); color: var(--fb-blue-500); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ihint__steps .ic { width: 18px; height: 18px; color: var(--fb-blue-500); }
.ihint-in { transition: transform 320ms var(--fb-ease-out), opacity 320ms ease; }
.ihint-in--0 { transform: translate(-50%, 16px); opacity: 0; }
.ihint-in--1 { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 1024px) { .ihint { display: none !important; } }

/* ------------------------------------------------------------------ toast / offline */
.toast {
    position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--fb-dock-space) + var(--fb-stack) + 8px + var(--fb-hint));
    max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 14px;
    background: var(--fb-navy); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--fb-shadow);
}
.toast--count { bottom: auto; top: calc(var(--fb-safe-top) + var(--fb-topbar-h) + 22px); padding: 6px 12px; font-size: 13px; border-radius: 12px; background: var(--fb-glass); color: var(--fb-text); border: 1px solid var(--fb-glass-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--fb-shadow-sm); }
@media (min-width: 1024px) { .toast { bottom: 24px; left: auto; right: 24px; transform: none; } }
.offline-bar {
    position: fixed; z-index: 55; top: 0; left: 0; right: 0; padding: calc(var(--fb-safe-top) + 6px) 12px 6px;
    background: var(--fb-warning); color: #3B2A08; font-size: 13px; font-weight: 600; text-align: center;
}

/* ------------------------------------------------------------------ user location marker */
.user-dot { position: relative; width: 18px; height: 18px; pointer-events: none; z-index: 0; } /* never covers gym pins */
.user-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fb-blue-500); animation: fb-pulse 2s ease-out infinite; }
.user-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fb-blue-500); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(8,36,74,.2); }

/* ------------------------------------------------------------------ static pages */
body.is-page { position: static; overflow: auto; height: auto; }
.page { max-width: 680px; margin: 0 auto; padding: calc(var(--fb-safe-top) + 16px) 16px calc(var(--fb-safe-bottom) + 40px); }
.page__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }
.page__logo img { width: 96px; height: auto; display: block; }
.page__main h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 12px; }
.page__lead { font-size: 18px; color: var(--fb-text-secondary); margin: 0 0 20px; }
.page__main p { max-width: 62ch; }
.page__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 32px 0 12px; padding-top: 16px; border-top: 1px solid var(--fb-border); font-size: 14px; }
.page__nav a[aria-current] { color: var(--fb-text); font-weight: 700; text-decoration: none; }
.page__foot { font-size: 12px; color: var(--fb-text-muted); }

/* ------------------------------------------------------------------ standalone PWA + motion */
html.is-standalone .topbar { top: calc(var(--fb-safe-top) + 6px); }
html.is-standalone { --fb-dock-bottom: max(env(safe-area-inset-bottom, 0px), 6px); }
html.is-standalone body.app { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .pin__halo, .user-dot::before, .skel__bar, .li-in, .chip.is-on { animation: none !important; }
    .pin__halo { opacity: .35; transform: translate(-50%, 50%) scale(1.4); }
    .dock.is-scrolling, .list-pill.is-scrolling { transform: none; opacity: 1; }
}
@media (max-width: 359px) {
    .topbar__brand img { height: 24px; }
    .topbar { padding-left: 8px; }
    .dock__item { font-size: 10px; }
    .action { font-size: 11px; padding: 8px 2px; }
}
/* mobile: chips ≥ 44px (HIG); every bottom-anchored overlay is position: fixed (follows the dynamic viewport above Safari's toolbar) */
@media (max-width: 1023px) {
    .chip { min-height: 44px; }
    .chip--q, .chips--quick .chip { min-height: 40px; }
    .qchips, .map-controls, .chooser, .chooser-backdrop { position: fixed; }
    .dock { touch-action: pan-y; }
    /* the dock stays on top of the drawer (view switching); the drawer body reserves its space, the sticky pill sits above it */
    .panel__body::after { height: calc(var(--fb-dock-space) + 12px); }
    .panel.is-kb .panel__body::after { height: 24px; }
    .view__actions { bottom: calc(var(--fb-dock-space) + 12px); }
    .view--filters, .view--form { min-height: calc(100% - var(--fb-dock-space) - 12px); }
    .spanel--dock .spanel__body { padding-bottom: calc(var(--fb-dock-space) + 12px); }
    /* the drawer header carries the title: no second heading inside the views */
    .view--filters > .view__head, .view--saved > .view__head, .view--form > .view__head { display: none; }
    .view__head--results .view__title { display: none; }
    .view__head--results { gap: 8px; }
    .view__head--results .sort { flex: 1 1 0; min-width: 0; }
    .view__head--results .sort__select { width: 100%; max-width: none; }
    /* the map is inert under the drawer scrim and the overlay */
    .app-shell.drawer-open .app-map, .app-shell.detail-open .app-map, .app-shell.detail-open .topbar, .app-shell.detail-open .qchips, .app-shell.detail-open .list-pill { pointer-events: none; }
    .app-shell.detail-open .topbar { opacity: 0; }
}
/* small phones: keep 4 dock columns, tighter chips */
@media (max-width: 359px) { .chip--q { padding: 0 10px 0 8px; } }
@media (max-width: 359px) { .dock__item span:not(.dock__badge) { font-size: 8.5px; letter-spacing: -.02em; } }

/* Verified (owner-claimed) mark: small scalloped blue rosette with a check (like IG/FB verified) — lists, floating card, detail */
.vbadge { display: inline-flex; vertical-align: -2px; margin-left: 4px; width: 16px; height: 16px; flex: 0 0 auto; }
.vbadge__svg { width: 100%; height: 100%; display: block; }
.vbadge--lg { width: 20px; height: 20px; margin-left: 6px; vertical-align: -2px; }
/* day-pass tag on dark surfaces: light blue text for contrast */
:root[data-theme="dark"] .tag--price { color: #CFE6FF; background: rgba(59, 163, 255, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag--price { color: #CFE6FF; background: rgba(59, 163, 255, .22); } }

/* ---------------------------------------------------------------- menu (⋯) + filters — livelier (2026-09-24)
   Menu rows: tinted icon tile per tone, hover slides the row + reveals a chevron, current page = soft blue pill with
   a left accent bar. Filter chips: feature icon, hover tint, section headings with an icon tile. */
.menu { padding: 10px; }
.menu__list a.menu__item { position: relative; gap: 12px; min-height: 48px; padding: 0 10px 0 8px; font-weight: 650; font-size: 15px;
    transition: background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease; }
.menu__ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--tone-soft, var(--fb-primary-soft)); color: var(--tone, var(--fb-blue-600));
    transition: transform var(--fb-dur-fast) var(--fb-ease), background var(--fb-dur-fast) ease, color var(--fb-dur-fast) ease; }
.menu__ico .ic { width: 18px; height: 18px; }
.menu__txt { flex: 1 1 auto; min-width: 0; }
.menu__chev { width: 16px; height: 16px; color: var(--fb-text-muted); transform: rotate(-90deg) translateY(-4px); opacity: 0;
    transition: opacity var(--fb-dur-fast) ease, transform var(--fb-dur-fast) var(--fb-ease); }
.menu__item--blue   { --tone: #0062D6; --tone-soft: rgba(0, 114, 242, .12); }
.menu__item--green  { --tone: #04875F; --tone-soft: rgba(6, 185, 135, .15); }
.menu__item--violet { --tone: #6D3FD8; --tone-soft: rgba(124, 77, 255, .13); }
.menu__item--amber  { --tone: #A15C00; --tone-soft: rgba(245, 166, 35, .18); }
.menu__item--teal   { --tone: #04758A; --tone-soft: rgba(4, 147, 170, .14); }
.menu__item--slate  { --tone: #475569; --tone-soft: rgba(100, 116, 139, .13); }
.menu__list a.menu__item:hover, .menu__list a.menu__item:focus-visible { background: var(--fb-surface-secondary); }
.menu__list a.menu__item:hover .menu__ico { transform: scale(1.06); background: var(--tone); color: #fff; }
.menu__list a.menu__item:hover .menu__chev, .menu__list a.menu__item:focus-visible .menu__chev { opacity: 1; transform: rotate(-90deg) translateY(0); }
.menu__list a.menu__item.is-current { background: var(--fb-primary-soft); color: var(--fb-blue-600); }
.menu__list a.menu__item.is-current::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--fb-blue-500); }
.menu__list a.menu__item.is-current .menu__ico { background: var(--fb-blue-500); color: #fff; }
.menu__list a.menu__item.is-current .menu__chev { opacity: 1; transform: rotate(-90deg); color: var(--fb-blue-500); }
.menu__list--secondary a.menu__item { min-height: 44px; font-size: 14.5px; font-weight: 600; }
.menu__list--secondary .menu__ico { width: 30px; height: 30px; border-radius: 9px; }
.menu__list--secondary .menu__ico .ic { width: 16px; height: 16px; }
.menu__label { display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.menu__label .ic { width: 14px; height: 14px; }
.menu__seg a, .menu__seg button { transition: background var(--fb-dur-fast) ease, border-color var(--fb-dur-fast) ease, transform var(--fb-dur-fast) var(--fb-ease); cursor: pointer; }
.menu__seg a:not(.is-active):hover, .menu__seg button:not(.is-active):hover { background: var(--fb-primary-soft); border-color: rgba(0, 114, 242, .35); }
.menu__seg a:active, .menu__seg button:active { transform: scale(.96); }
.menu__seg .is-active { box-shadow: 0 4px 12px rgba(0, 114, 242, .28); }
@media (prefers-reduced-motion: reduce) { .menu__ico, .menu__chev { transition: none; } }

/* filters view */
.view__sub { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.view__sub-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--fb-primary-soft); color: var(--fb-blue-600); }
.view__sub-ico .ic { width: 15px; height: 15px; }
.view__sub--access .view__sub-ico     { background: rgba(6, 185, 135, .15); color: #04875F; }
.view__sub--facilities .view__sub-ico { background: rgba(4, 147, 170, .14); color: #04758A; }
.view__sub--training .view__sub-ico   { background: rgba(0, 114, 242, .12); color: #0062D6; }
.view__sub--other .view__sub-ico      { background: rgba(124, 77, 255, .13); color: #6D3FD8; }
.view__sub--sort .view__sub-ico       { background: rgba(100, 116, 139, .13); color: #475569; }
.view--filters .chip { gap: 7px; }
.view--filters .chip .ic { width: 16px; height: 16px; color: var(--fb-blue-600); transition: color var(--fb-dur-fast) ease; }
.view--filters .chip:not(.is-on):hover { background: var(--fb-primary-soft); border-color: rgba(0, 114, 242, .35); }
.view--filters .chip.is-on { box-shadow: 0 4px 12px rgba(0, 114, 242, .28); }
.view--filters .chip.is-on .ic { color: #fff; }
.view--filters .chip.is-on::after { content: ""; width: 6px; height: 6px; margin-left: 1px; border-radius: 50%; background: #fff; opacity: .9; }
:root[data-theme="dark"] .menu__item { --tone: #8CC4FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu__item { --tone: #8CC4FF; } }
:root[data-theme="dark"] .view--filters .chip .ic, :root[data-theme="dark"] .view__sub-ico { color: #8CC4FF; }

/* mobile gym card: crowd line, headline amenities, "open nearby" when this gym is closed */
.gcard__crowd { display: flex; padding: 0; margin: 2px 0 0; border: 0; background: none; font: inherit; cursor: pointer; }
.gcard__feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gcard__feats .tag { font-size: 12px; }
.gcard__alt { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--fb-accent-soft);
    color: var(--fb-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.gcard__alt svg { width: 16px; height: 16px; flex: 0 0 auto; color: #047857; }
.gcard__alt span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__alt .ic { transform: rotate(-90deg); color: var(--fb-text-muted); }

/* typical crowd by hour (detail): 06–23 bars, colour by average level; only rendered with enough reports */
.crowd-typ { margin-top: 12px; }
.crowd-typ__best { margin: 0 0 8px; font-weight: 700; }
.crowd-typ__bars { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; align-items: end; height: 64px; padding-bottom: 16px; position: relative; }
.crowd-typ__bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.crowd-typ__bar i { display: block; width: 100%; height: calc(max(var(--v), .06) * 100%); border-radius: 4px 4px 2px 2px; background: var(--fb-border); }
.crowd-typ__bar.lv-1 i { background: #10B981; }
.crowd-typ__bar.lv-2 i { background: #F59E0B; }
.crowd-typ__bar.lv-3 i { background: #EF4444; }
.crowd-typ__bar em { position: absolute; left: 0; bottom: -16px; font-size: 10px; font-style: normal; color: var(--fb-text-muted); }

/* saved → compare 2–3 gyms */
.compare { margin: 12px 0; }
.compare .chips { margin: 6px 0 10px; }
.compare__wrap { overflow-x: auto; margin: 0 -4px; }
.compare__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare__table th, .compare__table td { padding: 8px 6px; border-bottom: 1px solid var(--fb-border); text-align: left; vertical-align: top; }
.compare__table thead th { font-size: 13px; }
.compare__table thead a { color: var(--fb-text); font-weight: 700; text-decoration: none; }
.compare__table tbody th { color: var(--fb-text-muted); font-weight: 600; white-space: nowrap; }
.compare__table td.is-yes { color: #047857; font-weight: 700; }

/* detail: "Za enkraten obisk" (traveler) box */
.traveler { border: 1px solid var(--fb-border); border-radius: 14px; padding: 12px 14px; background: var(--fb-surface-secondary, transparent); }
.traveler .detail__h2 { display: flex; align-items: center; gap: 8px; }
.traveler .detail__h2 .ic { width: 18px; height: 18px; }
.traveler__price { margin: 0 0 8px; font-weight: 800; font-size: 16px; }
.traveler__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.traveler__facts li.is-on span:first-child { color: #047857; font-weight: 800; }
.traveler__facts li.is-unknown { color: var(--fb-text-muted); }

/* ---- map key (map/_legend.php), opens left of the control stack ---- */
.legend { position: absolute; top: 0; right: calc(100% + 10px); width: 270px; max-height: min(70vh, 560px); overflow-y: auto; padding: 12px 14px 14px;
    border-radius: 16px; background: var(--fb-surface, #fff); color: var(--fb-text); box-shadow: 0 12px 32px rgba(8, 36, 74, .22); border: 1px solid var(--fb-border); z-index: 5; }
.legend__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 15px; }
.legend__x { border: 0; background: transparent; cursor: pointer; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; color: var(--fb-text-muted); }
.legend__x .ic { width: 18px; height: 18px; }
.legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; line-height: 1.3; color: var(--fb-text-secondary, var(--fb-text)); }
.legend__list li { display: flex; align-items: center; gap: 10px; }
.legend__sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fb-text-muted); }
.legend__list--sports { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.lg__sym { position: relative; flex: 0 0 34px; display: inline-flex; justify-content: center; }
.lg__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(8, 36, 74, .3); }
.lg__dot svg { width: 16px; height: 16px; }
.lg__247 { position: absolute; top: -2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #31DB49; border: 1.5px solid #fff; }
.lg__ver { position: absolute; bottom: -3px; right: 0; width: 13px; height: 13px; }
.lg__ver svg { width: 13px; height: 13px; display: block; }
.lg__cl { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #0072F2; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2.5px rgba(255,255,255,.9), 0 1px 3px rgba(8,36,74,.3); }
.lg__cl--oth { position: relative; }
.lg__cl--oth::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(#D9480F 0 12%, #7C3AED 12% 22%, #F5A623 22% 36%, #06B987 36% 52%, #22D3EE 52% 62%, #A16207 62% 70%, transparent 70% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
.legend__list--sports img { width: 20px; height: 26px; }
@media (max-width: 767px) { .legend { position: fixed; top: auto; right: 12px; left: 12px; bottom: calc(var(--fb-dock-space, 96px) + 68px); width: auto; max-height: calc(100vh - var(--fb-dock-space, 96px) - 330px); } }

/* sports venue in the shared detail panel (VenueDetail, kind=venue) */
.detail__vsports { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.detail__htext { white-space: pre-line; }
.detail__vimg { display: block; max-width: 160px; max-height: 120px; object-fit: contain; border-radius: 12px; margin: 0 0 12px; background: var(--fb-surface-2, #f1f5f9); }
.detail__vimg.is-person { width: 160px; height: 160px; max-height: none; object-fit: cover; border-radius: 16px; }
.prices--facts dd { font-weight: 600; text-align: right; max-width: 60%; }