/* ── SECTION: Reset / Box model ─────────────────────────────────────────────
   Globalni reset: uklanja defaultne margine i paddinge, box-sizing: border-box
   znači da padding i border ne proširuju element izvan postavljene širine.
   Vrijedi za sve elemente i njihove pseudo-elemente. */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── SECTION: CSS varijable (:root) ──────────────────────────────────────────
   Sve boje aplikacije definirane su kao CSS custom properties.
   Svaki profil ima svoju boju: wheelchair = zelena, blind = plava,
   general = ljubičasta, cycling = narančasta.
   --active se mijenja ovisno o odabranom profilu (vidi ispod).
   --bg, --card, --border, --text, --muted, --shadow su globalne UI boje. */
  :root {
    --wheelchair: #059669;
    --blind:      #2563eb;
    --general:    #6d28d9;
    --cycling:    #d97706;
    --danger:     #dc2626;
    --warn:       #d97706;
    --bg:         #eaf0f8;
    --card:       #ffffff;
    --border:     #d1dbe8;
    --text:       #1a2332;
    --muted:      #5e7388;
    --shadow:     0 2px 12px rgba(20,50,90,.09), 0 1px 3px rgba(20,50,90,.06);
    --shadow-md:  0 6px 24px rgba(20,50,90,.14), 0 2px 6px rgba(20,50,90,.08);
    --radius:     12px;
  }
  /* --active prati odabrani profil: default = wheelchair (zelena) */
  body                { --active: var(--wheelchair); }
  body.mode-blind     { --active: var(--blind); }
  body.mode-general   { --active: var(--general); }
  body.mode-cycling   { --active: var(--cycling); }

/* ── SECTION: Base body ──────────────────────────────────────────────────────
   Body zauzima cijeli viewport bez scrolla (overflow: hidden).
   100dvh = dynamic viewport height — ispravno na iOS Safari gdje
   adresna traka browser smanjuje viewport. Flex column za header + content. */
  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

/* ── SECTION: Header ─────────────────────────────────────────────────────────
   Fiksna visina 56px + safe-area-inset-top koji kompenzira Android
   status bar (edge-to-edge mod, API 35+) i iOS notch/Dynamic Island.
   Boja headera mijenja se s profilom putem var(--active). */
  /* ── HEADER ── */
  header {
    background: linear-gradient(135deg, var(--active) 0%, color-mix(in srgb, var(--active) 75%, #000) 100%);
    color: #fff;
    /* padding-top kompenzira Android status bar (edge-to-edge, API 35+) i iOS notch */
    padding: env(safe-area-inset-top, 0px) 1rem 0;
    min-height: 56px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: flex-end;
    padding-bottom: .5rem;
    gap: .75rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    transition: background .3s;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
  }
  header .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; min-width: 0; flex-shrink: 1; overflow: hidden; }
  header .logo span { opacity: .7; font-weight: 400; }
  /* Logo slika (bijela verzija za header) — filter invert da izgleda bijelo na boji */
  .header-logo-img { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); flex-shrink: 0; }
  /* Tekst fallback za logo — prikazan umjesto slike na mobitelu */
  .logo-fallback { display: none; }
  .tab-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ── SECTION: Welcome kartica ────────────────────────────────────────────────
   Prikazuje se samo na desktopu dok korisnik nije odabrao profil.
   body.has-profile je sakriva, a na mobitelu je uvijek sakrivena
   jer mobitel odmah prikazuje search formu. */
  /* ── WELCOME (samo desktop, dok nije odabran profil) ── */
  .welcome-card {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .welcome-card .welcome-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .25rem;
  }
  .welcome-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }
  .welcome-card p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.45;
  }
  .welcome-card .welcome-hint {
    margin-top: .5rem;
    padding: .6rem .75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .82rem;
    color: var(--text);
    font-weight: 500;
  }
  /* PWA install gumb unutar welcome kartice */
  .btn-pwa-install {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .25rem .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
  }
  .btn-pwa-install:hover { border-color: var(--active); color: var(--active); }

  /* Sakrij welcome karticu kad je profil odabran, ili na mobitelu */
  body.has-profile .welcome-card { display: none; }
  body:not(.has-profile):not(.layout-mobile) .search-section { display: none; }
  body.layout-mobile .welcome-card { display: none; }

/* ── SECTION: Grb Grada Zagreba (sidebar, desktop) ───────────────────────────
   Dekorativni grb ispod search sekcije, vidljiv samo na desktopu.
   drop-shadow filter daje grbu dubinu bez box-shadowa (SVG compatible). */
  /* ── GRB GRADA ZAGREBA (desktop, ispod "Traži pristupačnu rutu") ── */
  .sidebar-grb {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem .75rem;
  }
  .sidebar-grb img {
    width: 240px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.2));
  }
  body.layout-mobile .sidebar-grb { display: none; }

  body.layout-mobile .sidebar-bottom-wrap { display: none !important; }

/* ── SECTION: Profil tabovi (mode-tabs) ──────────────────────────────────────
   Horizontalni niz tabova u headeru za odabir profila pristupačnosti.
   Aktivni tab dobiva bijelu pozadinu i boju aktivnog profila.
   role="tablist" + role="tab" za screen reader pristupačnost. */
  .mode-tabs {
    display: flex;
    gap: .25rem;
    margin-left: auto;
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    padding: 3px;
  }
  .mode-tab {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    padding: .3rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
  }
  /* Aktivni tab: bijeli pravokutnik s bojom profila */
  .mode-tab.active {
    background: #fff;
    color: var(--active);
  }
  /* Vidljivi fokus obrub za tipkovničku navigaciju (a11y zahtjev) */
  .mode-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── SECTION: Glavni layout (app-body) ───────────────────────────────────────
   Flex row koji sadrži sidebar i kartu.
   flex: 1 znači da zauzima sav prostor ispod headera. */
  /* ── MAIN LAYOUT ── */
  .app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

/* ── SECTION: Sidebar (desktop) ─────────────────────────────────────────────
   Fiksna širina 360px na desktopu, vertikalni scroll za duge liste.
   Na mobitelu se pretvara u bottom sheet (vidi Mobile layout sekciju). */
  /* ── SIDEBAR ── */
  .sidebar {
    width: 360px;
    background: linear-gradient(180deg, #f7fafd 55%, color-mix(in srgb, var(--active) 7%, #f7fafd) 100%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 500;
    box-shadow: 3px 0 20px rgba(20,50,90,.10);
    transition: background .4s;
  }

/* ── SECTION: Input panel i autocomplete ─────────────────────────────────────
   Sekcija s polazištem, odredištem i gumbom za traženje rute.
   input-dot i input-line su dekorativni elementi koji vizualno
   prikazuju tok rute (kružić → linija → puni kružić).
   addr-suggestions je pozicionirani dropdown ispod inputa. */
  .search-section {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  /* Prazan kružić = polazišna točka */
  .input-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--muted);
    flex-shrink: 0;
  }
  /* Puni kružić u boji profila = odredišna točka */
  .input-dot.end { background: var(--active); border-color: var(--active); }
  /* Vertikalna linija koja spaja polazište i odredište vizualno */
  .input-line {
    position: absolute; left: 5px; top: 24px;
    width: 2px; height: 22px; background: var(--border);
  }
  /* Adresni input — border se boji u --active boju kad je u fokusu */
  .addr-input {
    flex: 1;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
    transition: border-color .15s, box-shadow .15s;
  }
  .addr-input:focus { outline: none; border-color: var(--active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--active) 18%, transparent), inset 0 1px 3px rgba(0,0,0,.04); }
  /* Autocomplete dropdown — apsolutno pozicioniran ispod inputa, visoki z-index
     jer mora biti iznad svih ostalih elemenata sidebara */
  .addr-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 24px; right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 2000;
    max-height: 200px;
    overflow-y: auto;
  }
  .addr-suggestions button {
    display: block; width: 100%;
    text-align: left; padding: .6rem .8rem;
    border: none; background: none;
    font-size: .82rem; color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .addr-suggestions button:last-child { border-bottom: none; }
  .addr-suggestions button:hover { background: var(--bg); }

  /* Gumb za traženje rute — naglašen, puna širina, boja profila */
  .btn-route {
    background: linear-gradient(135deg, var(--active) 0%, color-mix(in srgb, var(--active) 72%, #000) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .75rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: box-shadow .2s, transform .15s, opacity .2s;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--active) 45%, transparent);
    letter-spacing: .1px;
  }
  .btn-route:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--active) 40%, transparent); }
  .btn-route:active { transform: translateY(0); box-shadow: 0 2px 6px color-mix(in srgb, var(--active) 30%, transparent); }
  .btn-route:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── SECTION: Informacije o ruti (route-info) ────────────────────────────────
   Panel koji se prikazuje nakon izračuna rute.
   route-stats grid prikazuje 3 metrike: udaljenost, vrijeme, pristupačnost.
   avoided-info prikazuje koliko je prepreka ruta izbjegla vs standardna ruta. */
  /* ── ROUTE INFO ── */
  .route-info {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .route-info.visible { display: block; }
  .route-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: .75rem;
  }
  /* Svaka statistica kartica: udaljenost / vrijeme / pristupačnost */
  .stat {
    flex: 1;
    background: var(--card);
    border-radius: var(--radius);
    padding: .7rem .8rem;
    text-align: center;
    border: 1px solid var(--border);
    border-top: 3px solid var(--active);
    box-shadow: var(--shadow);
    transition: box-shadow .2s;
  }
  .stat:hover { box-shadow: var(--shadow-md); }
  .stat-val { font-size: 1.2rem; font-weight: 800; color: var(--active); letter-spacing: -.5px; }
  .stat-lbl { font-size: .7rem; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; font-weight: 500; }
  /* Broj prepreka na ruti s crvenim ili žutim badge-om ovisno o ozbiljnosti */
  .obstacle-count {
    font-size: .82rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem;
  }
  .obstacle-count .badge {
    background: var(--danger);
    color: #fff;
    border-radius: 4px;
    padding: 0 .4rem;
    font-size: .75rem;
    font-weight: 600;
  }
  .badge.warn { background: var(--warn); }

  /* Sažetak prepreka koje je naša ruta izbjegla u odnosu na standardnu */
  .avoided-info {
    margin-top: .55rem;
    padding: .6rem .75rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    font-size: .82rem;
    color: #064e3b;
  }
  .avoided-info .avoided-title {
    font-weight: 700;
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .35rem;
  }
  .avoided-info .avoided-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  .avoided-info .avoided-list li {
    display: flex;
    align-items: center;
    gap: .4rem;
  }
  .avoided-info .avoided-list .count {
    font-weight: 700;
    min-width: 1.5rem;
    text-align: right;
  }

/* ── SECTION: Koraci navigacije (steps) ──────────────────────────────────────
   Lista turn-by-turn uputa generirana iz ORS rute.
   Aktivni korak (step.active) vizualno se ističe plavim obrubom.
   Dovršeni koraci (step.done) se zatamnjuju (opacity .4). */
  /* ── STEPS ── */
  .steps-section {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .steps-section.visible { display: block; }
  .steps-title {
    font-size: .8rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: .5rem;
  }
  .step {
    display: flex; gap: .6rem; padding: .4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
  }
  .step:last-child { border-bottom: none; }
  /* Udaljenost do sljedećeg koraka — desno poravnano, fiksna širina */
  .step-dist { color: var(--muted); flex-shrink: 0; min-width: 48px; text-align: right; }
  /* Trenutno aktivan korak — plavi lijevi obrub i naglašeni tekst */
  .step.active { background: color-mix(in srgb, var(--active) 9%, #f7fafd); border-left: 3px solid var(--active); padding-left: .4rem; font-weight: 600; border-radius: 0 6px 6px 0; }
  /* Prošli koraci — zatamnjeni da ne zbunjuju korisnika */
  .step.done   { opacity: .4; }

/* ── SECTION: Nav banner (floating turn-by-turn) ─────────────────────────────
   Floating okvir iznad karte koji se prikazuje tijekom aktivne navigacije.
   Centriran horizontalno, fiksan pri dnu ekrana (iznad TTS bara).
   Prikazuje sljedeću uputu i udaljenost do skretanja. */
  /* Nav banner (floating over map) */
  #nav-banner {
    display: none; position: fixed;
    bottom: 5.5rem; left: 50%; transform: translateX(-50%);
    background: #0f172a; color: #fff;
    padding: .85rem 1.5rem; border-radius: 16px;
    max-width: calc(100vw - 2rem); min-width: 240px;
    z-index: 2000; box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
    border-top: 3px solid var(--active);
    border: 1px solid rgba(255,255,255,.08);
    flex-direction: column; align-items: center; gap: .2rem; text-align: center;
  }
  #nav-banner.active { display: flex; }
  #nav-instruction { font-size: .95rem; font-weight: 600; }
  #nav-dist-next   { font-size: .78rem; color: #94a3b8; }

  /* Gumb za pokretanje navigacije — zeleni, postaje crveni kad je aktivna */
  /* Pokreni navigaciju gumb */
  .btn-start-nav {
    display: none; width: 100%; margin-top: .75rem;
    padding: .65rem 1rem; border: none; border-radius: 8px;
    background: linear-gradient(135deg, var(--active) 0%, color-mix(in srgb, var(--active) 80%, #000) 100%);
    color: #fff;
    font-size: .88rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--active) 35%, transparent);
    transition: opacity .2s;
  }
  .btn-start-nav:hover { opacity: .9; }
  .btn-start-nav.visible { display: block; }
  /* Kad je navigacija aktivna, gumb postaje "Zaustavi" (crveni) */
  .btn-start-nav.active  { background: #dc2626; }

/* ── SECTION: Lista prepreka (sidebar) ───────────────────────────────────────
   Lista prijavljenih prepreka s ikonama, vrstom i statusom.
   obs-icon.verified = crvena pozadina (potvrđena prepreka).
   obs-badge razlikuje nepotvrđene (žute) od verificiranih (crvene). */
  /* ── OBSTACLE LIST ── */
  .obstacles-section {
    padding: 1rem;
    flex: 1;
  }
  .section-title {
    font-size: .8rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: .75rem;
    display: flex; align-items: center; gap: .5rem;
  }
  /* Broj prepreka u okrugloj piluli */
  .obs-count {
    background: var(--active); color: #fff;
    border-radius: 99px; padding: 0 .45rem;
    font-size: .72rem;
  }
  .obs-item {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .65rem .4rem; border-bottom: 1px solid var(--border);
    border-radius: 8px;
    transition: background .15s;
    margin: 0 -.4rem;
  }
  .obs-item:hover { background: var(--bg); }
  .obs-item:last-child { border-bottom: none; }
  /* Ikona prepreke — žuta pozadina za nepotvrđene, crvena za verificirane */
  .obs-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    background: #fef3c7;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
  .obs-icon.verified { background: #fee2e2; }
  .obs-body { flex: 1; min-width: 0; }
  .obs-type { font-size: .84rem; font-weight: 600; }
  /* Opis se skraćuje s ellipsisom ako je predug */
  .obs-desc { font-size: .76rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obs-badge {
    font-size: .7rem; padding: 1px 6px; border-radius: 4px;
    color: #fff; font-weight: 600;
  }
  /* Žuti badge = korisnik prijavio, čeka verifikaciju */
  .obs-badge.unverified { background: var(--warn); }
  /* Crveni badge = administrator verificirao kao pravi problem */
  .obs-badge.verified   { background: var(--danger); }

/* ── SECTION: Leaflet karta ──────────────────────────────────────────────────
   Karta zauzima sav preostali prostor u flex layoutu.
   Leaflet sam interno postavlja visinu i širinu na 100%. */
  /* ── MAP ── */
  #map { flex: 1; }

/* ── SECTION: Report gumb (FAB) ──────────────────────────────────────────────
   Floating Action Button ("+") za prijavu prepreke.
   Klik aktivira "selection mode" na karti.
   Pulse animacija se pokreće kad je selection mode aktivan. */
  /* ── REPORT BUTTON ── */
  .btn-report {
    position: absolute;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 900;
    background: var(--active);
    color: #fff;
    border: none;
    width: 58px; height: 58px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--active) 50%, rgba(0,0,0,.3)), 0 2px 6px rgba(0,0,0,.2);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, box-shadow .2s;
  }
  .btn-report:hover { transform: scale(1.1); box-shadow: 0 6px 24px color-mix(in srgb, var(--active) 55%, rgba(0,0,0,.3)); }
  /* Kad je korisnik u modu odabira lokacije prepreke — crvena puls animacija */
  .btn-report.selecting {
    background: var(--danger);
    animation: pulse 1.2s infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 4px 16px rgba(220,38,38,.4); }
    50%      { box-shadow: 0 4px 32px rgba(220,38,38,.7); }
  }

/* ── SECTION: Report modal ───────────────────────────────────────────────────
   Modal overlay za prijavu prepreke. Slide-up animacija (s dna ekrana)
   standardan je mobilan pattern. Modal je ograničen na max 480px širine
   i 90dvh visine da ne zauzme cijeli ekran na velikim monitorima. */
  /* ── MODAL ── */
  .modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2000;
    align-items: flex-end;
    justify-content: center;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    width: 100%; max-width: 480px;
    max-height: 90dvh;
    overflow-y: auto;
    animation: slideUp .25s cubic-bezier(.22,.68,0,1.2);
    box-shadow: 0 -4px 32px rgba(20,50,90,.12);
  }
  /* Animacija dolaska modala odozdo */
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-title {
    font-size: 1.05rem; font-weight: 700;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .modal label {
    display: block;
    font-size: .83rem; font-weight: 600;
    color: var(--muted);
    margin-bottom: .3rem;
    margin-top: .75rem;
  }
  .modal select, .modal textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
  }
  .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--active); }
  .modal textarea { resize: vertical; min-height: 72px; }
  /* Prikaz GPS koordinata odabrane točke */
  .modal-coords {
    font-size: .78rem; color: var(--muted);
    background: var(--bg); border-radius: 6px;
    padding: .4rem .7rem; margin-bottom: .25rem;
  }
  .modal-actions {
    display: flex; gap: .75rem; margin-top: 1.25rem;
  }
  .btn-cancel {
    flex: 1; padding: .7rem;
    border: 1.5px solid var(--border);
    background: none; border-radius: var(--radius);
    font-weight: 600; cursor: pointer;
    font-family: inherit; color: var(--muted);
    transition: border-color .15s, color .15s;
  }
  .btn-cancel:hover { border-color: var(--text); color: var(--text); }
  .btn-submit {
    flex: 2; padding: .7rem;
    background: linear-gradient(135deg, var(--active) 0%, color-mix(in srgb, var(--active) 75%, #000) 100%);
    color: #fff;
    border: none; border-radius: var(--radius);
    font-weight: 700; cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--active) 35%, transparent);
    transition: box-shadow .2s, transform .15s;
  }
  .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--active) 40%, transparent); }
  .btn-submit:active { transform: translateY(0); }

/* ── SECTION: TTS bar (blind mode) ──────────────────────────────────────────
   Traka na dnu ekrana vidljiva isključivo u blind modu.
   Prikazuje aktualni TTS tekst koji se čita i nudi kontrole.
   body.mode-blind aktivira prikaz, inače je skrivena. */
  /* ── TTS BAR (blind mode) ── */
  .tts-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--blind);
    color: #fff;
    padding: .75rem 1rem;
    font-size: .9rem;
    z-index: 1500;
    align-items: center;
    gap: .75rem;
  }
  body.mode-blind .tts-bar { display: flex; }
  /* TTS tekst se proteže kroz sav slobodan prostor */
  .tts-text { flex: 1; }
  /* TTS kontrolni gumbi (stop, repeat, mute) */
  .tts-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 6px;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
  }

/* ── SECTION: Usporedba ruta (compare) ──────────────────────────────────────
   Gumb i panel za usporedbu pristupačne rute s najkraćom standardnom.
   Ovo je ključna pitch feature za žiri — pokazuje koliko prepreka
   naša ruta izbjegava u odnosu na Google Maps / standardni routing.
   aria-pressed prati stanje gumba za screen readere. */
  /* Compare button + rezultat -- key pitch feature za žiri */
  .btn-compare {
    width: 100%;
    margin-top: .5rem;
    padding: .6rem .9rem;
    border: 1.5px dashed var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: all .2s;
  }
  .btn-compare:hover { border-color: var(--active); background: color-mix(in srgb, var(--active) 6%, white); color: var(--active); }
  /* Kad je usporedba aktivna — puna boja profila */
  .btn-compare[aria-pressed="true"] {
    background: var(--active); color: #fff; border-style: solid; border-color: var(--active);
  }
  /* Panel s rezultatima usporedbe (redovi s metrikama) */
  .compare-result {
    margin-top: .5rem;
    padding: .75rem .9rem;
    background: #f0f6ff;
    border: 1px solid #c7d9f0;
    border-radius: var(--radius);
    font-size: .82rem;
    line-height: 1.5;
    display: none;
  }
  .compare-result.visible { display: block; }
  .compare-result .row { display: flex; justify-content: space-between; padding: .15rem 0; }
  /* Naša ruta — zelena */
  .compare-result .label-our      { color: var(--wheelchair); font-weight: 600; }
  /* Standardna ruta — siva s precrtanim stilom (manja vrijednost = bolje za nas) */
  .compare-result .label-standard { color: #64748b; font-weight: 600; text-decoration: line-through dashed; }
  .compare-result .diff           { font-weight: 700; }
  /* Pozitivna razlika = naša ruta bolja */
  .compare-result .diff.positive  { color: var(--wheelchair); }
  .compare-result .diff.negative  { color: var(--danger); }
  /* Pitchline ispod statistika — poetički sažetak zašto je naša ruta bolja */
  .compare-result .pitch-line     { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--border); font-style: italic; color: var(--muted); font-size: .76rem; }

/* ── SECTION: Voice indicator (wake word traka) ──────────────────────────────
   Tanka 3px traka na vrhu ekrana koja vizualno pokazuje stanje
   glasovnog asistenta. Zelena = čeka, crvena = sluša, žuta = obrađuje.
   Pulse animacije daju vizualni feedback korisniku o stanju. */
  /* Wake word indikator -- sitna traka na vrhu, nestaje kad nema podrške */
  #voice-indicator {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #4caf50;
    z-index: 2000;
    transition: background .3s;
  }
  /* Crvena pulsacija = aktivno snima glasovnu komandu */
  #voice-indicator.listening { background: #e53935; animation: pulse-bar .8s infinite alternate; }
  /* Žuta animacija = obrađuje prepoznati govor */
  #voice-indicator.thinking  { background: #f59e0b; animation: pulse-think 1.2s infinite linear; }
  #voice-indicator.hidden    { display: none; }
  @keyframes pulse-bar   { from { opacity: 1; } to { opacity: .4; } }
  @keyframes pulse-think {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  /* Shimmer gradient za "thinking" stanje */
  #voice-indicator.thinking {
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
  }

/* ── SECTION: High contrast (blind mode) ─────────────────────────────────────
   Veći font i padding na inputima u blind modu za bolju čitljivost.
   Slijepe osobe često koriste screen magnifikacijske alate. */
  /* ── HIGH CONTRAST (blind mode helper) ── */
  body.mode-blind .addr-input { font-size: 1rem; padding: .7rem .9rem; }
  body.mode-blind .btn-route  { font-size: 1rem; padding: .75rem; }

/* ── SECTION: Tutorial overlay ───────────────────────────────────────────────
   6-koračni onboarding tutorial za nove korisnike.
   tut-box je centriran na ekranu, tut-dots pokazuju napredak,
   tut-skip/tut-next su akcijski gumbi. slideUp animacija.
   z-index: 3000 — iznad svega osim device pickera (4000). */
  /* ── TUTORIAL ── */
  .tut-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .tut-overlay.open { display: flex; }
  /* Bijela kartica s tutorialom — max 420px da ne bude preširo na desktopu */
  .tut-box {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 1.75rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
    animation: slideUp .3s ease;
  }
  /* "KORAK 1 OD 6" — uppercase, razmaknuta slova */
  .tut-step-num {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: .75rem;
  }
  /* Veliki emoji koji se mijenja po koracima */
  .tut-icon { font-size: 3.5rem; margin-bottom: .75rem; line-height: 1; }
  .tut-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .6rem;
    line-height: 1.3;
  }
  .tut-desc {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  .tut-desc strong { color: var(--text); }
  /* Dot indikatori napretka kroz tutorial korake */
  .tut-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-bottom: 1.25rem;
  }
  /* Neaktivni dot */
  .tut-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background .2s;
  }
  /* Aktivni dot u boji profila */
  .tut-dot.active { background: var(--active); }
  .tut-actions { display: flex; gap: .75rem; }
  /* Preskoči gumb — manji, neutralan */
  .tut-skip {
    flex: 1; padding: .7rem;
    border: 1px solid var(--border);
    background: none; border-radius: 10px;
    font-size: .95rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    color: var(--muted);
  }
  /* Dalje gumb — naglašen, boja profila */
  .tut-next {
    flex: 2; padding: .7rem;
    background: var(--active); color: #fff;
    border: none; border-radius: 10px;
    font-size: .95rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
  }
  /* Help gumb — uvijek vidljiv u donjem lijevom kutu karte */
  .tut-help-btn {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 44px; height: 44px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
  }

/* ── SECTION: Device picker overlay ─────────────────────────────────────────
   Prikazuje se samo pri prvom posjetu.
   z-index: 4000 — uvijek iznad svega drugog.
   Animacija slideUp kao i kod modala i tutoriala. */
  /* ── DEVICE PICKER ── */
  .device-picker-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 4000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .device-picker-overlay.open { display: flex; }
  .device-picker-box {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem 2rem 2rem;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,.25);
    animation: slideUp .3s ease;
  }
  .device-picker-icon { font-size: 3rem; margin-bottom: .75rem; }
  .device-picker-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
  .device-picker-sub {
    font-size: .9rem; color: var(--muted);
    margin-bottom: 1.75rem; line-height: 1.5;
  }
  .device-picker-btns { display: flex; flex-direction: column; gap: .75rem; }
  /* Gumbi za odabir uređaja — visoki border radius za "pill" izgled */
  .device-picker-btn {
    border: 2px solid var(--border);
    background: none;
    border-radius: 14px;
    padding: 1.1rem 1rem;
    font-size: 1rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    gap: .6rem;
    transition: border-color .15s, background .15s;
    color: var(--text);
  }
  /* Hover/active stanje — boja profila i zelena pozadina */
  .device-picker-btn:hover, .device-picker-btn:active {
    border-color: var(--active);
    background: #f0fdf4;
    color: var(--active);
  }
  .device-picker-note { margin-top: 1.25rem; font-size: .78rem; color: var(--muted); }

/* ── SECTION: Sheet handle (mobile bottom sheet) ─────────────────────────────
   Pill-shaped handle na vrhu bottom sheeta na mobitelu.
   Korisnik ga može vući da otvori ili zatvori sheet.
   Na desktopu je skriven (display: none). */
  /* ── SHEET HANDLE ── */
  .sheet-handle {
    display: none;
    justify-content: center;
    /* min 44px touch target (Apple HIG) -- padding osigurava da prst može pogoditi */
    padding: .85rem 0 .65rem;
    min-height: 44px;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
  }
  /* Siva "pill" koja vizualno sugerira da se može vući */
  .sheet-handle-pill {
    width: 40px; height: 5px;
    background: var(--border);
    border-radius: 3px;
    transition: background .15s;
  }
  .sheet-handle:hover .sheet-handle-pill,
  .sheet-handle:active .sheet-handle-pill { background: var(--muted); }

/* ── SECTION: Transit toggle gumb ────────────────────────────────────────────
   Stari individualni gumb za ZET javni prijevoz.
   Sada zamijenjen gear panelom, ali ostaje u DOM-u jer JS koristi
   njegov ID kao referencu za event handlere (gear panel proxy pattern). */
  /* ── TRANSIT TOGGLE ── */
  .btn-transit {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  /* Aktivni state — plava za javni prijevoz */
  .btn-transit.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
  }
  /* Legenda javnog prijevoza — transit filter gumbi za tramvaj/bus/sve */
  .transit-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
  }
  .transit-legend.visible { display: flex; }
  .legend-row { display: flex; align-items: center; gap: .5rem; }
  /* Gumbi za filtriranje prikaza tramvaja/autobusa na karti */
  .transit-filter {
    border: 1px solid var(--border); background: none;
    border-radius: 6px; padding: .25rem .5rem;
    font-size: .74rem; font-weight: 600; cursor: pointer;
    font-family: inherit; color: var(--muted);
  }
  .transit-filter.active { background: var(--active); color: #fff; border-color: var(--active); }
  /* Poseban tooltip stil za terminalne postaje tramvaja (ljubičast) */
  .terminal-tooltip {
    background: hsl(280,65%,48%); color: #fff; border: none;
    border-radius: 6px; font-size: .78rem; font-weight: 600;
    padding: 3px 8px; white-space: nowrap;
  }
  .terminal-tooltip::before { border-top-color: hsl(280,65%,48%) !important; }

/* ── SECTION: Bajs (javni bicikli) legenda ───────────────────────────────────
   Legenda za Nextbike/Bajs stanice.
   Zeleni marker = dostupni bicikli, sivi = nema slobodnih. */
  /* ── BAJS LEGENDA ── */
  .bajs-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .bajs-legend.visible { display: flex; }

/* ── SECTION: Zdravstvo legenda ──────────────────────────────────────────────
   Legenda za zdravstvene ustanove: bolnice, dežurne ljekarne, ljekarne. */
  /* ── ZDRAVSTVO LEGENDA ── */
  .zdravstvo-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .zdravstvo-legend.visible { display: flex; }

/* ── SECTION: Map style switcher ─────────────────────────────────────────────
   Gumb i dropdown za odabir tile sloja karte (standardna/satelit/topo/tamna).
   U dark modu karti se primjenjuje CSS filter za popravak kontrasta. */
  /* ── MAP STYLE SWITCHER (top-left) ── */
  .btn-mapstyle {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-mapstyle:hover { border-color: var(--active); }
  /* Dropdown meni s opcijama karte */
  .mapstyle-menu {
    position: absolute;
    top: 3.5rem; left: 1rem;
    z-index: 900;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .35rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .15rem;
    min-width: 170px;
  }
  .mapstyle-menu.visible { display: flex; }
  .mapstyle-option {
    border: none; background: none;
    border-radius: 6px;
    padding: .5rem .65rem;
    font-size: .82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text);
    transition: background .15s, color .15s;
  }
  .mapstyle-option:hover { background: #f3f4f6; }
  .mapstyle-option.active { background: var(--active); color: #fff; }
  /* Mobitelni prilagodbe — maniji gumb, etiketa skrivena */
  body.layout-mobile .btn-mapstyle { top: .5rem; left: .5rem; padding: .4rem .55rem; font-size: .8rem; }
  body.layout-mobile .mapstyle-menu { top: 3rem; left: .5rem; }
  body.layout-mobile .mapstyle-label { display: none; }
  /* U blind modu karta se ne može mijenjati — skrivamo switcher */
  body.mode-blind .btn-mapstyle,
  body.mode-blind .mapstyle-menu { display: none !important; }

  /* Satellite/dark UI tweaks: keep markers readable on imagery */
  body.mapstyle-satellite .leaflet-control-attribution { background: rgba(0,0,0,.6); color:#fff; }
  body.mapstyle-satellite .leaflet-control-attribution a { color:#9bd; }

  /* Dark mode: Carto dark_all je sirov #181818 i izgleda crno.
     Brightness + smanjena saturacija ga podiže na čitljiv tamni-sivkasti
     stil gdje su ceste, voda i nazivi razlikljivi. Filter ide samo na
     tile-pane pa markeri/rute ostaju netaknute. */
  body.mapstyle-dark .leaflet-tile-pane {
    filter: brightness(1.75) contrast(.82) saturate(.5);
  }
  body.mapstyle-dark { background: #2a2a2a; }
  body.mapstyle-dark #map { background: #2a2a2a; }

/* ── SECTION: Gužva / TomTom Traffic toggle ─────────────────────────────────
   Stari individualni gumb za TomTom Traffic sloj.
   Sada zamijenjen gear panelom, zadržan u DOM-u za JS kompatibilnost.
   Activated state je crven jer simbolizira prometne gužve. */
  /* ── GUŽVA / TRAFFIC TOGGLE (right column, ispod my-location) ── */
  .btn-guzva {
    position: absolute;
    top: 13.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-guzva.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
  }
  /* Disabled kad nema TomTom API ključa */
  .btn-guzva.disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  body.layout-mobile .btn-guzva {
    top: 12.7rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .guzva-label { display: none; }
  /* Legenda boja za prometnu gužvu (slobodno/sporo/gužva/stoji) */
  .guzva-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
  }
  .guzva-legend .legend-row { gap: .35rem; }
  .guzva-legend.visible { display: flex; }

/* ── SECTION: Bajs toggle gumb ───────────────────────────────────────────────
   Stari individualni gumb za Nextbike/Bajs sloj — zadržan za JS proxy. */
  /* ── BAJS TOGGLE ── */
  .btn-bajs {
    position: absolute;
    top: 3.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-bajs.active {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
  }
  body.layout-mobile .btn-bajs {
    top: 3rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .bajs-label { display: none; }

/* ── SECTION: Zdravstvo toggle gumb ─────────────────────────────────────────
   Stari individualni gumb za zdravstveni sloj — zadržan za JS proxy.
   Loading state (cursor: wait) dok se OSM podaci preuzimaju. */
  /* ── ZDRAVSTVO TOGGLE ── */
  .btn-zdravstvo {
    position: absolute;
    top: 6rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  /* Crveni aktivni state za bolnice/ljekarne */
  .btn-zdravstvo.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
  }
  /* Prikazuje loading cursor dok se OSM podaci preuzimaju */
  .btn-zdravstvo.loading {
    opacity: .65;
    cursor: wait;
  }
  body.layout-mobile .btn-zdravstvo {
    top: 5.4rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .zdravstvo-label { display: none; }

/* ── SECTION: Markeri na karti ───────────────────────────────────────────────
   Stilovi za custom Leaflet marker ikone za zdravstvo i pristupačnost.
   Krugovi s bijelim borderom za kontrast na svim vrstama karti.
   Različite veličine ovisno o važnosti: bolnica > ljekarna. */
  /* Zdravstvo markeri */
  /* Pristupačnost markeri */
  .pac-marker {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.30);
    line-height: 1;
  }
  /* Udruga za osobe s invaliditetom — ljubičasta */
  .pac-marker.udruga  { width: 34px; height: 34px; font-size: 1rem;   background: #7c3aed; }
  /* Gradski ured — tamno plava */
  .pac-marker.ured    { width: 34px; height: 34px; font-size: 1rem;   background: #1e40af; }
  /* Pristupačni WC — teal/cijan */
  .pac-marker.wc      { width: 24px; height: 24px; font-size: .65rem; background: #0891b2; }
  /* Pristupačno parkiralište — plava */
  .pac-marker.parking { width: 26px; height: 26px; font-size: .85rem; background: #1d4ed8; }

/* ── SECTION: Pristupačnost toggle gumb ─────────────────────────────────────
   Gumb za sloj pristupačnih objekata (WC, parkirališta, udruge, uredi). */
  .btn-pristupacnost {
    position: absolute;
    top: 8.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-pristupacnost:hover  { background: #f5f3ff; border-color: #7c3aed; }
  /* Ljubičasta za pristupačnost (usklađeno s udruga markerom) */
  .btn-pristupacnost.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
  body.layout-mobile .btn-pristupacnost { top: 7.8rem; right: .6rem; font-size: .8rem; padding: .4rem .65rem; }
  body.layout-mobile .pristupacnost-label { display: none; }

/* ── SECTION: Heatmap toggle i legenda ───────────────────────────────────────
   Gumb i legenda za heatmap gustoće prijavljenih prepreka.
   Heatmap koristi Leaflet.heat plugin s gradijentom plava→zelena→žuta→crvena. */
  .btn-heatmap {
    position: absolute;
    top: 11.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-heatmap:hover  { background: #fff7ed; border-color: #f97316; }
  /* Narančasta za heatmap (termalna boja) */
  .btn-heatmap.active { background: #f97316; border-color: #f97316; color: #fff; }
  body.layout-mobile .btn-heatmap { top: 10.8rem; right: .6rem; font-size: .8rem; padding: .4rem .65rem; }
  body.layout-mobile .heatmap-label { display: none; }

  /* Legenda za heatmap — gradijent traka s labelama "manje/više prepreka" */
  .heatmap-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .heatmap-legend.visible { display: flex; }

  /* Legenda za pristupačne objekte */
  .pristupacnost-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .pristupacnost-legend.visible { display: flex; }

  /* Zdravstvo markeri za Leaflet — kružići s bijelim borderom */
  .zdr-marker {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.30);
    line-height: 1;
  }
  /* Bolnica — tamno plava, najveća ikona */
  .zdr-marker.hospital  { width: 32px; height: 32px; font-size: .95rem; background: #1d4ed8; }
  /* Dežurna ljekarna 0-24h — zelena (open/dostupna) */
  .zdr-marker.dezurna   { width: 28px; height: 28px; font-size: 1.1rem; background: #16a34a; }
  /* Obična ljekarna — ljubičasta, manja */
  .zdr-marker.pharmacy  { width: 22px; height: 22px; font-size: .72rem; background: #7c3aed; }

  /* Bajs "B" marker ikonica — zeleni krug s "B" slovom */
  /* Bajs "B" marker ikonica */
  .bajs-marker-icon {
    width: 28px; height: 28px;
    background: #16a34a;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    line-height: 1;
  }
  /* Sivi marker kad nema slobodnih bicikala na stanici */
  .bajs-marker-icon.empty { background: #94a3b8; }

  /* Markeri za resurse za slijepe (auto-prikaz u blind modu) */
  /* Slijepih resursi markeri (auto-prikaz u blind modu) */
  .slijepih-marker {
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.40);
    line-height: 1;
    cursor: pointer;
  }
  /* HSUSS (organizacija slijepih) — plava */
  .slijepih-marker.hsuss     { background: #1d4ed8; }
  /* Knjižnica s Brailleom — ljubičasta */
  .slijepih-marker.knjiznica { background: #7c3aed; }

/* ── SECTION: Mobilni layout (layout-mobile) ─────────────────────────────────
   Na mobitelu sidebar postaje bottom sheet fiksiran pri dnu ekrana.
   Visina sheeta kontrolira se CSS varijablom --sheet-h (JS je ažurira).
   app-body dobiva padding-bottom jednak visini sheeta da karta bude vidljiva.
   Safe-area-inset-bottom kompenzira home indicator na iPhoneu (>=X modeli). */
  /* ── MOBILE LAYOUT ── */
  body.layout-mobile .sheet-handle { display: flex; }

  body.layout-mobile .app-body {
    padding-bottom: var(--sheet-h, 90px);
    transition: padding-bottom .3s cubic-bezier(.4, 0, .2, 1);
  }


  /* Bottom sheet — fiksan pri dnu, rounded top corners, shadow prema gore */
  body.layout-mobile .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto; width: 100%;
    height: var(--sheet-h, 90px);
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    z-index: 800;
    overflow: hidden;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    /* Safe area za telefone s home indicatorom */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.layout-mobile .sidebar.expanded { overflow-y: auto; }

  /* Spriječi Leaflet SVG elemente da prelaze izvan mape u sheet/header područje */
  body.layout-mobile .map-wrapper { overflow: hidden; }

  /* Report FAB manji na mobitelu, uvijek crveni (ne prati profil boju) */
  body.layout-mobile .btn-report {
    bottom: 8px;
    right: 1rem;
    background: #dc2626;
    width: 48px; height: 48px;
    font-size: 1.3rem;
  }
  body.layout-mobile .tut-help-btn {
    bottom: .75rem;
    left: 1rem;
  }

  /* Transit gumb: gornji desni kut mape */
  body.layout-mobile .btn-transit {
    top: .6rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .transit-label { display: none; }
  /* Na mobitelu legend panel: kompaktniji, uz desni rub ispod gear gumba */
  body.layout-mobile #legend-panel {
    top: 3.4rem;
    right: .5rem;
    width: 185px;
    max-height: calc(100vh - var(--sheet-h, 90px) - 5rem);
    font-size: .74rem;
  }
  body.layout-mobile #legend-panel .legend-title { font-size: .65rem; }
  body.layout-mobile #legend-panel .legend-row { font-size: .74rem; }
  body.layout-mobile #legend-panel .transit-filter { padding: .2rem .4rem; font-size: .68rem; min-height: 30px; min-width: 30px; }

  /* Header tabovi: samo emoji na mobitelu — tekst etikete skrivene */
  body.layout-mobile .logo {
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    min-width: 0;
    max-width: 90px;
    flex-shrink: 1;
  }
  /* Na mobitelu: sakrij logo sliku (bijeli kvadrat problem), prikaži tekst */
  body.layout-mobile .header-logo-img { display: none; }
  body.layout-mobile .logo-fallback { display: inline; font-size: .78rem; font-weight: 700; white-space: normal; }
  /* Na mobitelu: sakrij tekst etiketu, ostavi samo emoji */
  body.layout-mobile .tab-label { display: none; }
  body.layout-mobile .mode-tab  { padding: .3rem .5rem; font-size: 1.1rem; }
  body.layout-mobile .tab-icon  { font-size: 1.15rem; line-height: 1; }
  body.layout-mobile .btn-cb-tab {
    padding: .3rem .5rem; font-size: 1.1rem;
    border-left: 1px solid rgba(255,255,255,.2);
    margin-left: .15rem;
  }

  /* Inputi i gumb - veći touch targeti */
  body.layout-mobile .addr-input {
    font-size: 1rem; padding: .75rem .9rem; min-height: 48px;
  }
  body.layout-mobile .btn-route {
    padding: .85rem 1rem; font-size: 1rem; min-height: 52px; margin-bottom: .75rem;
  }
  /* Kad je keyboard otvoren, suggestions se prikazuju IZNAD inputa
     da ne prekrivaju gumb "Traži pristupačnu rutu" koji je ispod */
  body.keyboard-open .addr-suggestions {
    top: auto;
    bottom: calc(100% + 4px);
    max-height: 160px;
  }
body.layout-mobile .search-section { padding: .85rem .85rem .75rem; gap: .55rem; }

  /* Obstacle lista - veći redovi na mobitelu */
  body.layout-mobile .obs-item { padding: .75rem 0; }
  body.layout-mobile .obs-type { font-size: .9rem; }
  body.layout-mobile .obs-desc { font-size: .8rem; }

  /* Mobile search trigger gumb (collapsed) / search forma (expanded) */
  .mobile-search-trigger { display: none; }

  /* Trigger gumb vidljiv samo na mobitelu u collapsed stanju sheeta */
  body.layout-mobile .mobile-search-trigger {
    display: flex;
    align-items: center; justify-content: center;
    gap: .5rem;
    width: calc(100% - 1.4rem);
    margin: .5rem .7rem .6rem;
    background: var(--active);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: 1rem; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-height: 52px;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    transition: opacity .15s;
  }
  body.layout-mobile .mobile-search-trigger:active { opacity: .82; }

  /* U collapsed stanju: sakrij search formu */
  body.layout-mobile:not(.sheet-open) .search-section { display: none; }

  /* U expanded stanju: sakrij trigger gumb, pokaži formu */
  body.layout-mobile.sheet-open .mobile-search-trigger { display: none; }
  body.layout-mobile.sheet-open .search-section { display: flex; }

/* ── SECTION: Boje za sljepilo boja (color blindness palettes) ───────────────
   Alternativne CSS varijable za 4 oblika daltonizma.
   JS dodaje klasu body.cb-* kad korisnik odabere paletu u CB panelu.
   Boje su odabrane prema W3C preporukama za dostupnost (WCAG 2.1). */
  /* ── PALETTE BOJA (sljepilo boja) ── */
  /* Deuteranopija: plava + narančasta + žuta — razlikljive bez zelene */
  body.cb-deuter {
    --wheelchair: #0072B2;
    --blind:      #56B4E9;
    --general:    #009E73;
    --danger:     #D55E00;
    --warn:       #E69F00;
  }
  /* Protanopija: tamnija plava + žuta — razlikljive bez crvene */
  body.cb-protan {
    --wheelchair: #0582CA;
    --blind:      #56B4E9;
    --general:    #009E73;
    --danger:     #E69F00;
    --warn:       #F0C000;
  }
  /* Tritanopija: zelena + crvena + ružičasta — razlikljive bez plave/žute */
  body.cb-tritan {
    --wheelchair: #009E73;
    --blind:      #D55E00;
    --general:    #CC79A7;
    --danger:     #A30000;
    --warn:       #CC79A7;
  }
  /* Akromatopsija: sve u nijansama sive, visoki kontrast */
  body.cb-achro {
    --wheelchair: #1C1C1E;
    --blind:      #444444;
    --general:    #777777;
    --danger:     #1C1C1E;
    --warn:       #555555;
    --bg:         #F0F0F0;
    --border:     #AAAAAA;
    --text:       #000000;
    --muted:      #444444;
  }

/* ── SECTION: Color blindness panel ─────────────────────────────────────────
   Panel koji se prikazuje ispod headera (full width) za odabir boja.
   cb-option su gumbi s preview swatchima i opisom oblika daltonizma.
   cb-group-label dijeli opcije u kategorije (crveno-zeleno, plavo-žuto, itd.) */
  /* ── CB PANEL ── */
  .cb-panel {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    z-index: 1100;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    padding: 1rem;
    max-height: 70dvh;
    overflow-y: auto;
  }
  .cb-panel.open { display: block; }
  .cb-panel-title {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin-bottom: .75rem;
  }
  .cb-options { display: flex; flex-direction: column; gap: .5rem; }
  /* Svaki option gumb s 3 preview kružića boja */
  .cb-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: none; cursor: pointer;
    font-family: inherit; text-align: left;
    transition: border-color .15s, background .15s;
    width: 100%;
  }
  .cb-option:hover { border-color: var(--active); background: var(--bg); }
  /* Aktivna opcija — obojena border */
  .cb-option.active { border-color: var(--active); background: var(--bg); }
  /* 3 kružića koji prikazuju preview boja paleta */
  .cb-swatches { display: flex; gap: .3rem; flex-shrink: 0; }
  .cb-swatches span {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
  }
  .cb-label strong { display: block; font-size: .85rem; color: var(--text); }
  .cb-label small { font-size: .74rem; color: var(--muted); line-height: 1.4; }
  /* Separator s labelom između kategorija daltonizma */
  .cb-group-label {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted); padding: .4rem 0 .2rem;
    border-top: 1px solid var(--border);
    margin-top: .25rem;
  }
  .cb-group-label:first-of-type { border-top: none; margin-top: 0; }
  /* Gumb za otvaranje CB panela u headeru */
  .btn-cb-tab {
    border: none; background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    padding: .3rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem; font-weight: 500;
    font-family: inherit;
    transition: all .2s;
    display: flex; align-items: center; gap: .3rem;
    margin-left: .25rem;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: .7rem;
  }
  .btn-cb-tab:hover, .btn-cb-tab.active {
    background: #fff;
    color: var(--active);
  }

/* ── SECTION: Prepreke tab ───────────────────────────────────────────────────
   Gumb u headeru za prikaz liste prepreka.
   obs-tab-count badge prikazuje ukupan broj prepreka u bazi.
   Na mobitelu je gumb manji i badge je skriven da ne zakrčuje header. */
  /* ── PREPREKE TAB ── */
  .btn-obstacles-tab {
    border: none; background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    padding: .3rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem; font-weight: 500;
    font-family: inherit;
    transition: all .2s;
    display: flex; align-items: center; gap: .3rem;
    margin-left: .25rem;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: .7rem;
  }
  .btn-obstacles-tab:hover, .btn-obstacles-tab.active {
    background: #fff;
    color: var(--active);
  }
  /* Pill s brojem prepreka — poluprozirna bijela u neaktivnom stanju */
  .obs-tab-count {
    background: rgba(255,255,255,.3);
    border-radius: 99px;
    padding: 0 .35rem;
    font-size: .7rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
  }
  /* Kad je aktivan tab — badge u boji profila */
  .btn-obstacles-tab.active .obs-tab-count {
    background: var(--active);
    color: #fff;
  }

/* ── SECTION: Mobilni overlay za prepreke ────────────────────────────────────
   Na mobitelu, prepreke se prikazuju u zasebnom fullscreen overlayju
   koji slide-ina odozgo (iznad karte, ispod headera).
   Ne utječe na bottom sheet poziciju. */
  /* Mobile obstacles overlay */
  #mobile-obs-overlay {
    display: none;
  }
  /* Na mobitelu — fullscreen panel između headera i sheeta */
  body.layout-mobile #mobile-obs-overlay {
    display: block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    bottom: var(--sheet-h, 90px);
    background: var(--card);
    z-index: 790;
    overflow-y: auto;
    transform: translateY(-102%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
  }
  /* Otvoren overlay — slide u do translateY(0) */
  body.layout-mobile #mobile-obs-overlay.open {
    transform: translateY(0);
  }

  /* Na mobitelu sakrij tekst u Prepreke tabu */
  body.layout-mobile .btn-obstacles-tab {
    padding: .3rem .5rem; font-size: 1.1rem;
    border-left: 1px solid rgba(255,255,255,.2);
    margin-left: .15rem;
  }
  body.layout-mobile .btn-obstacles-tab .tab-label { display: none; }
  /* Na mobitelu badge s brojem prepreka skriven u headeru */
  body.layout-mobile .obs-tab-count { display: none; }

/* ── SECTION: Moja lokacija gumb i GPS dot ───────────────────────────────────
   Gumb koji aktivira GPS praćenje i centrira kartu na korisnika.
   location-dot je custom Leaflet marker s puls animacijom. */
  /* ── MOJA LOKACIJA GUMB ── */
  .btn-my-location {
    position: absolute;
    top: 11rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  /* Plava = GPS aktivan */
  .btn-my-location.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }
  body.layout-mobile .btn-my-location {
    top: 10.3rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .my-location-label { display: none; }

  /* Pulsing "you are here" dot — kružić s ripple animacijom poput radara */
  /* Pulsing "you are here" dot */
  @keyframes location-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(37,99,235,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(37,99,235,.0); }
    100% { box-shadow: 0 0 0 0   rgba(37,99,235,.0); }
  }
  .location-dot {
    width: 18px; height: 18px;
    background: #2563eb;
    border: 3px solid #fff;
    border-radius: 50%;
    animation: location-pulse 2s infinite;
  }

/* ── SECTION: Offline banner ─────────────────────────────────────────────────
   Tamna traka ispod headera koja se prikazuje kad nema interneta.
   Aplikacija i dalje radi s keširanim tile-ovima i zadnjim poznatim podacima. */
  /* Offline banner */
  #offline-banner {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    z-index: 1200;
    background: #1e293b;
    color: #f1f5f9;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem 1rem;
    letter-spacing: .01em;
  }

/* ── SECTION: Toast poruke ───────────────────────────────────────────────────
   Kratke pop-up poruke koje se pojavljuju i nestaju automatski.
   Centrirane horizontalno, pozicionirane iznad bottom sheeta.
   pointer-events: none sprječava blokiranje karte dok toast nestaje. */
  /* Toast poruke */
  .toast {
    position: fixed;
    bottom: 5.5rem; left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: .65rem 1.25rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    text-align: center;
    max-width: calc(100vw - 2rem);
    white-space: normal;
  }
  .toast.show { opacity: 1; }

/* ── SECTION: Gear panel i postavke ─────────────────────────────────────────
   Centralni settings panel koji je zamijenio sve ranije individualne gumbe.
   btn-gear je okrugli gumb koji se rotira 45° kad je otvoren.
   gear-panel je dropdown s odjeljcima: Izgled, Slojevi, Aplikacija, TTS.
   gear-badge broji aktivne slojeve (prikazan na gear gumbu).
   gear-toggle su toggle gumbi s iOS-style switch animacijom.
   gear-style su gumbi za odabir karte u 2x2 gridu. */
  /* ── GEAR / SETTINGS PANEL (jedan gumb za sve opcije) ─────────────────── */
  /* Sakrij stare individualne gumbe — sve ide kroz gear panel */
  .btn-mapstyle, .mapstyle-menu,
  .btn-transit, .btn-bajs, .btn-zdravstvo, .btn-pristupacnost,
  .btn-heatmap, .btn-my-location, .btn-guzva { display: none !important; }

  /* Okrugli gear gumb — rotira se 45° pri otvaranju panela */
  .btn-gear {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 950;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .25s, border-color .15s, background .15s;
    font-family: inherit;
    color: var(--text);
    padding: 0;
  }
  .btn-gear:hover { transform: rotate(45deg); border-color: var(--active); }
  /* Otvoreni state — boja profila, rotiran 45° */
  .btn-gear.open { background: var(--active); border-color: var(--active); color:#fff; transform: rotate(45deg); }
  /* Badge koji broji aktivne slojeve — crveni broj u gornjem desnom kutu gumba */
  .btn-gear .gear-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: #ef4444; color: #fff;
    border-radius: 999px;
    font-size: .65rem; font-weight: 700;
    display: none; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
  }
  .btn-gear .gear-badge.visible { display: flex; }
  body.layout-mobile .btn-gear { top: .5rem; right: .5rem; width: 44px; height: 44px; font-size: 1.25rem; }

  /* Dropdown panel s postavkama karte */
  .gear-panel {
    position: absolute;
    top: 4.25rem; right: 1rem;
    z-index: 950;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .85rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 340px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    font-family: inherit;
  }
  .gear-panel.visible { display: flex; }
  /* Na mobitelu panel zauzima skoro cijelu širinu ekrana.
     dvh = dynamic viewport height (ispravno na iOS Safari).
     Oduzimamo visinu headera + safe-area-top + buffer da panel ne siže do sheeta. */
  body.layout-mobile .gear-panel {
    top: 3.4rem; right: .5rem; left: .5rem; width: auto;
    max-height: calc(100dvh - 5rem - env(safe-area-inset-top, 0px) - var(--sheet-h, 90px));
    overflow-y: auto;
    /* Naglašeni gornji border radi vidljivosti na tamnoj pozadini */
    border-top: 2px solid var(--active);
  }
  /* Dark mode: još naglašeniji border jer su boje blede na tamnoj pozadini */
  body.layout-mobile.theme-dark .gear-panel {
    border-top-color: var(--active);
    box-shadow: 0 -2px 0 var(--active), 0 8px 32px rgba(0,0,0,.45);
  }

  /* Sekcija unutar gear panela — vertikalni flex s razmakom */
  .gear-section { display: flex; flex-direction: column; gap: .4rem; }
  /* Naslov sekcije — uppercase, mala slova, siva boja */
  .gear-section-title {
    font-size: .7rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
    padding: 0 .15rem;
  }

  /* 2x2 grid za odabir stila karte */
  .gear-mapstyle-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
  }
  /* Svaka kartica stila karte */
  .gear-style {
    border: 2px solid var(--border); background: #fff;
    border-radius: 9px;
    padding: .55rem .6rem;
    font-family: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .15rem; text-align: left;
    transition: border-color .15s, background .15s;
    color: var(--text);
  }
  .gear-style:hover { border-color: var(--active); background: #f9fafb; }
  /* Aktivni stil — puna boja profila s bijelim tekstom */
  .gear-style.active { border-color: var(--active); background: var(--active); color: #fff; }
  .gear-style.active .gear-desc { color: rgba(255,255,255,.9); }
  .gear-style .gear-style-head { display: flex; align-items: center; gap: .35rem; }
  .gear-style .gear-icon { font-size: 1.05rem; }
  .gear-style .gear-name { font-weight: 600; font-size: .82rem; }
  .gear-style .gear-desc { font-size: .68rem; color: var(--muted); line-height: 1.25; }

  /* Toggle gumbi za slojeve — s iOS-style switch klizačem */
  .gear-toggle {
    border: 1px solid var(--border); background: #fff;
    border-radius: 9px;
    padding: .6rem .7rem;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: .7rem;
    text-align: left;
    transition: border-color .15s, background .15s;
    color: var(--text);
    width: 100%;
  }
  .gear-toggle:hover { border-color: var(--active); background: #f9fafb; }
  /* Aktivni toggle — zelena pozadina */
  .gear-toggle.active { border-color: var(--active); background: rgba(34,197,94,.06); }
  .gear-toggle .gear-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
  .gear-toggle .gear-text { flex: 1; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
  .gear-toggle .gear-name { font-weight: 600; font-size: .85rem; color: var(--text); }
  .gear-toggle .gear-desc { font-size: .7rem; color: var(--muted); line-height: 1.3; }
  /* iOS-style switch klizač */
  .gear-toggle .gear-switch {
    width: 34px; height: 20px; background: #d1d5db; border-radius: 999px;
    position: relative; flex-shrink: 0; transition: background .18s;
  }
  /* Bijeli krug unutar switcha */
  .gear-toggle .gear-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  /* Kad je aktivan — zelena pozadina, krug se pomiče desno */
  .gear-toggle.active .gear-switch { background: var(--active); }
  .gear-toggle.active .gear-switch::after { transform: translateX(14px); }
  /* Disabled toggle (npr. TomTom bez API ključa) */
  .gear-toggle.disabled { opacity: .55; cursor: not-allowed; }
  .gear-toggle.disabled:hover { border-color: var(--border); background: #fff; }

/* ── SECTION: Legend panel ───────────────────────────────────────────────────
   Container koji drži sve legende desno ispod gear gumba.
   Legende se slažu vertikalno, svaka legenda je zasebni div.
   pointer-events: none na containeru, auto na djeci — da karta prima klikove
   između legendi ali legende i dalje budu interaktivne. */
  /* ── LEGEND PANEL (desno ispod gear gumba, legende se slažu jedna ispod druge) ── */
  #legend-panel {
    position: absolute;
    top: 4.25rem;
    right: 1rem;
    z-index: 901;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 220px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    pointer-events: none;
  }
  /* Djeca legendi moraju biti klikabilna (transit filteri, itd.) */
  #legend-panel > * { pointer-events: auto; }

  /* Naslov svake legende — uppercase, mala slova, siva boja */
  .legend-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .2rem;
  }
}

/* ── SECTION: Pristupačnost (a11y) ──────────────────────────────────────────
   Vidljivi fokus obrub na svim interaktivnim elementima.
   Neophodan za tipkovničku navigaciju i screen readere.
   Minimalni touch target 44x44px prema Apple HIG i Material Design smjernicama. */
/* ── a11y: fokus vidljiv na svim interaktivnim elementima ──────────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

/* ── a11y: minimalni touch target (Apple HIG + Material) ───────────────────── */
button,
.mode-tab,
.cb-option,
.device-picker-btn,
.tut-skip,
.tut-next,
.gear-toggle,
.gear-style,
.mapstyle-option,
.transit-filter {
  min-height: 44px;
  min-width:  44px;
}

/* ── SECTION: GPS gumb uz polazišni input ────────────────────────────────────
   Gumb za unos GPS lokacije kao polazišta — smješten unutar input polja.
   Apsolutno pozicioniran s desne strane inputa, mali touch target. */
/* ── GUMB "TRENUTNA LOKACIJA" uz polje polazišta ─────────────────────────── */
.btn-current-loc {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  padding: .25rem;
  border-radius: 4px;
  min-height: 32px;
  min-width:  32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.btn-current-loc:hover { color: #16a34a; background: #f0fdf4; }

/* Gumb za brisanje sadržaja inputa — prikazan samo kad input ima vrijednost */
.btn-clear-input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: .25rem;
  border-radius: 4px;
  min-height: 28px;
  min-width:  28px;
  font-size: 1rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.btn-clear-input:hover { color: #ef4444; background: #fef2f2; }
/* Veći touch target na mobitelu */
body.layout-mobile .btn-clear-input { min-height: 44px; min-width: 44px; }

/* ── SECTION: Safe area padding (notch / home indicator) ─────────────────────
   @supports blok osigurava da se safe-area-inset vrijednosti primjene
   samo na uređajima koji to podržavaju (iOS 11+, Android API 28+).
   Bez ovog, header bi bio prekriven notchem ili home indicatorom.
   NAPOMENA: selektor mora biti 'header' (element), ne '.header' (klasa). */
/* ── SAFE AREA PADDING (notch / home indicator) ──────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  /* Header: top padding za notch i Dynamic Island (iOS) / status bar (Android API 35+) */
  header {
    padding-top: max(.5rem, env(safe-area-inset-top));
  }
  /* Bottom sheet sidebar: bottom padding za home indicator */
  body.layout-mobile .sidebar {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  }
  /* TTS bar: bottom padding za home indicator u blind modu */
  .tts-bar {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  }
  /* Modal: bottom padding da submit gumb bude iznad home indicatora */
  .modal {
    padding-bottom: max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom)));
  }
  /* CB panel: top offset uzima u obzir notch */
  .cb-panel {
    top: calc(56px + env(safe-area-inset-top, 0px));
  }
}

/* ── SECTION: Stat counter (verificirane prepreke) ───────────────────────────
   Prikazuje ukupan broj verificiranih prepreka u bazi na bočnoj traci.
   Zelena pozadina s tamno zelenim borderom za naglašeni prikaz broja. */
/* ── STAT COUNTER (verificirane prepreke) ───────────────────────────────── */
.stat-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 60%, #eff6ff 100%);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  margin: .5rem 0;
  box-shadow: 0 2px 8px rgba(5,150,105,.08);
}
/* Veliki broj prepreka u zelenoj boji */
#stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #16a34a;
  line-height: 1;
}
.stat-label {
  font-size: .7rem;
  color: #64748b;
  margin-top: .15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── SECTION: Loading skeleton shimmer ───────────────────────────────────────
   Shimmer animacija za skeletal loading state dok se ruta izračunava.
   Koristi linearni gradijent koji se pomiče s lijeva na desno.
   route-skeleton je skriven i prikazuje se samo kad body ima klasu route-loading. */
/* ── LOADING SKELETON (shimmer dok se ruta racuna) ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
/* Skeleton blok vidljiv samo za vrijeme izračuna rute */
.route-skeleton { height: 3rem; margin: .5rem 0; display: none; }
.route-loading .route-skeleton { display: block; }

/* ── SECTION: Tamni način (dark mode) ────────────────────────────────────────
   Kompletan set dark mode boja za sve komponente aplikacije.
   Aktivira se klasom body.theme-dark (JavaScript toggle).
   color-scheme: dark govori browseru da koristi dark scrollbars i form kontrole.
   Svaka komponenta ima vlastiti dark override: inputi, legende, modali, itd. */
/* ── TAMNI NAČIN (dark mode) ─────────────────────────────────────────────── */
body.theme-dark {
  --bg:     #0f172a;
  --card:   #1e293b;
  --border: #334155;
  --text:   #f1f5f9;
  --muted:  #94a3b8;
  --shadow: 0 4px 24px rgba(0,0,0,.50);
  color-scheme: dark;
}

/* Adresni inputi i autocomplete */
body.theme-dark .addr-input      { background: #1e293b; color: #f1f5f9; border-color: #334155; }
body.theme-dark .addr-input::placeholder { color: #64748b; }
body.theme-dark .addr-suggestions { background: #1e293b; border-color: #334155; }
body.theme-dark .addr-suggestions button { color: #f1f5f9; border-color: #334155; }
body.theme-dark .addr-suggestions button:hover { background: #0f172a; }

/* Gumbi na karti (bijela pozadina → tamna) */
body.theme-dark .btn-gear,
body.theme-dark .btn-transit,
body.theme-dark .btn-bajs,
body.theme-dark .btn-zdravstvo,
body.theme-dark .btn-pristupacnost,
body.theme-dark .btn-heatmap,
body.theme-dark .btn-my-location,
body.theme-dark .btn-guzva,
body.theme-dark .btn-mapstyle,
body.theme-dark .tut-help-btn    { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* Legende (bijela → tamna) */
body.theme-dark .guzva-legend,
body.theme-dark .transit-legend,
body.theme-dark .bajs-legend,
body.theme-dark .zdravstvo-legend,
body.theme-dark .pristupacnost-legend,
body.theme-dark .heatmap-legend,
body.theme-dark .mapstyle-menu   { background: #1e293b; border-color: #334155; color: #f1f5f9; }
body.theme-dark .legend-title    { color: #94a3b8; }
body.theme-dark .transit-filter  { background: #0f172a; color: #94a3b8; border-color: #334155; }
body.theme-dark .transit-filter.active { background: var(--active); color: #fff; border-color: var(--active); }

/* Gear panel */
body.theme-dark .gear-panel      { background: #1e293b; border-color: #334155; }
body.theme-dark .gear-style      { background: #0f172a; border-color: #334155; color: #f1f5f9; }
body.theme-dark .gear-style:hover { background: #1e293b; border-color: var(--active); }
body.theme-dark .gear-style .gear-desc { color: #94a3b8; }
body.theme-dark .gear-toggle     { background: #0f172a; border-color: #334155; color: #f1f5f9; }
body.theme-dark .gear-toggle:hover { background: #1e293b; }
body.theme-dark .gear-toggle .gear-name { color: #f1f5f9; }
/* Switch klizač u dark modu — tamnija siva u neaktivnom stanju */
body.theme-dark .gear-toggle .gear-switch { background: #475569; }

/* Modal */
body.theme-dark .modal-overlay   { background: rgba(0,0,0,.65); }
body.theme-dark .modal           { background: #1e293b; color: #f1f5f9; }
body.theme-dark .modal select,
body.theme-dark .modal textarea  { background: #0f172a; color: #f1f5f9; border-color: #334155; }
body.theme-dark .modal-coords    { background: #0f172a; color: #94a3b8; }
body.theme-dark .btn-cancel      { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* Welcome card i hint */
body.theme-dark .welcome-card    { border-color: #334155; }
body.theme-dark .welcome-hint    { background: #0f172a; border-color: #334155; }

/* CB panel */
body.theme-dark .cb-panel        { background: #1e293b; border-color: #334155; }
body.theme-dark .cb-option       { border-color: #334155; color: #f1f5f9; }
body.theme-dark .cb-option:hover { border-color: var(--active); background: #0f172a; }
body.theme-dark .cb-label strong { color: #f1f5f9; }

/* Ruta info, statistika, prepreke */
body.theme-dark .stat            { background: rgba(255,255,255,.05); }
body.theme-dark .compare-result  { background: rgba(255,255,255,.04); }
body.theme-dark .obs-item        { border-color: #334155; }
body.theme-dark .obs-icon        { background: #2d3748; }
body.theme-dark .obs-icon.verified { background: #3d1515; }
body.theme-dark .step            { border-color: #334155; }
/* Aktivan korak navigacije — tamnija plava pozadina */
body.theme-dark .step.active     { background: #1a2744; border-left-color: #3b82f6; }

/* Device picker i tutorial */
body.theme-dark .device-picker-box,
body.theme-dark .tut-box         { background: #1e293b; color: #f1f5f9; }
body.theme-dark .device-picker-btn { border-color: #334155; color: #f1f5f9; }
body.theme-dark .device-picker-btn:hover { border-color: var(--active); background: #0f172a; }
body.theme-dark .tut-skip        { border-color: #334155; color: #94a3b8; background: #1e293b; }

/* Mobile bottom sheet */
body.theme-dark .sidebar         { border-top-color: #334155; }
body.theme-dark #mobile-obs-overlay { background: #1e293b; border-color: #334155; }
body.theme-dark .mobile-search-trigger { /* zadržava var(--active) -- bez promjene */ }

/* Mapstyle menu opcije */
body.theme-dark .mapstyle-option { color: #f1f5f9; }
body.theme-dark .mapstyle-option:hover { background: #0f172a; }
body.theme-dark .mapstyle-option.active { background: var(--active); color: #fff; }

/* Skeleton shimmer -- tamnija verzija */
body.theme-dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #263446 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* Avoided info */
body.theme-dark .avoided-info    { background: #0d2010; border-color: #1a4a28; color: #86efac; }
body.theme-dark .avoided-info .avoided-title { color: #86efac; }

/* Header i mode tabovi u dark modu */
/* ── Header i mode tabovi ── */
body.theme-dark header {
  background: #0f172a;
  border-bottom: 2px solid var(--active);
}
body.theme-dark .mode-tabs        { background: rgba(255,255,255,.07); }
body.theme-dark .mode-tab         { color: rgba(255,255,255,.5); }
body.theme-dark .mode-tab.active  { background: var(--active); color: #fff; }
body.theme-dark .btn-cb-tab,
body.theme-dark .btn-obstacles-tab {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.5);
}
body.theme-dark .btn-cb-tab:hover,
body.theme-dark .btn-cb-tab.active,
body.theme-dark .btn-obstacles-tab:hover,
body.theme-dark .btn-obstacles-tab.active {
  background: #fff;
  color: var(--active);
}
body.theme-dark .obs-tab-count    { background: rgba(255,255,255,.2); }

/* Leaflet popupi i kontrole u dark modu */
/* ── Leaflet popupi i kontrole ── */
body.theme-dark .leaflet-popup-content-wrapper,
body.theme-dark .leaflet-popup-tip      { background: #1e293b; color: #f1f5f9; }
body.theme-dark .leaflet-popup-content a { color: #93c5fd; }
body.theme-dark .leaflet-control-zoom a {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}
body.theme-dark .leaflet-control-zoom a:hover { background: #334155; }
body.theme-dark .leaflet-bar           { border-color: #334155; box-shadow: var(--shadow); }
body.theme-dark .leaflet-control-attribution {
  background: rgba(15,23,42,.75);
  color: #94a3b8;
}
body.theme-dark .leaflet-control-attribution a { color: #93c5fd; }

/* ── SECTION: Speech log panel (debug) ───────────────────────────────────────
   Debug panel za prikaz STT (speech-to-text) dnevnika u realnom vremenu.
   Tamna terminal estetika s zelenim akcentom (Leaflet green brand boja).
   Prikazuje se samo kad je debug mod aktivan (JS uklanja hidden atribut).
   Svaki unos je u gridu: timestamp + ikona + poruka.
   Boje unosa po tipu: plava (recording), zelena (transcript), žuta (action), itd. */
/* ── SPEECH LOG PANEL ────────────────────────────────────────────────────── */
#stt-log-panel {
  position: fixed;
  bottom: 80px;
  right: 12px;
  width: min(340px, calc(100vw - 24px));
  max-height: 55vh;
  background: rgba(10, 16, 12, 0.96);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 14px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', monospace, sans-serif;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
#stt-log-panel[hidden] { display: none; }

/* Header log panela — naslov i gumbi za clear/close */
#stt-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
#stt-log-header button {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
#stt-log-header button:hover { color: #d1d5db; background: rgba(255,255,255,0.08); }

/* Scrollable container za log unose */
#stt-log-entries {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
  min-height: 60px;
}

/* Svaki log unos: timestamp | ikona | poruka */
.stt-entry {
  display: grid;
  grid-template-columns: 52px 18px 1fr;
  gap: 4px;
  align-items: start;
  padding: 4px 12px;
  font-size: 0.72rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stt-entry:last-child { border-bottom: none; }
/* Timestamp kolona — tabular-nums za poravnanje znamenki */
.stt-time  { color: #4b5563; font-variant-numeric: tabular-nums; }
.stt-icon  { text-align: center; }
.stt-msg   { color: #d1d5db; word-break: break-word; }

/* Boje unosa ovisno o tipu događaja */
/* Tip boje */
.stt-entry.rec      .stt-msg { color: #60a5fa; }       /* Snimanje aktivno — plava */
.stt-entry.transcript .stt-msg { color: #4ade80; font-weight: 600; } /* Prepoznat govor — zelena */
.stt-entry.action   .stt-msg { color: #fbbf24; }       /* Akcija izvršena — žuta */
.stt-entry.wake     .stt-msg { color: #c084fc; }       /* Wake word detektiran — ljubičasta */
.stt-entry.error    .stt-msg { color: #f87171; }       /* Greška — crvena */
.stt-entry.warn     .stt-msg { color: #fb923c; }       /* Upozorenje — narančasta */
.stt-entry.info     .stt-msg { color: #94a3b8; }       /* Informacija — siva */

/* Toggle gumb za otvaranje log panela (mali circle, terminal stil) */
/* Toggle gumb */
#stt-log-toggle {
  position: fixed;
  bottom: 36px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10, 16, 12, 0.92);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
  font-size: 1rem;
  cursor: pointer;
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#stt-log-toggle[hidden] { display: none; }
/* Puls efekt kad ima novih unosa u logu */
#stt-log-toggle.has-new {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

/* ── SECTION: Landscape mode (mobilni uređaj u ležećem položaju) ──────────────
   Na mobitelu u landscape orijentaciji header i sheet su manji
   da karta dobije više prostora. Karta je ionako uža (manja visina ekrana).
   Smanjujemo:
   - Header visinu (nema notcha u landscape na većini uređaja)
   - Bottom sheet collapsed visinu (manji prostor, karta treba biti vidljiva)
   - Gear panel max-height da ne blokira kartu
   Triggera se samo na body.layout-mobile da ne utječe na desktop layout. */
@media (orientation: landscape) and (max-height: 500px) {
  /* ── Landscape: manji header ── */
  body.layout-mobile header {
    min-height: 44px;
    height: calc(44px + env(safe-area-inset-top, 0px));
  }

  /* ── Landscape: manji bottom sheet ── */
  body.layout-mobile .sidebar {
    /* Smanjujemo defaultnu visinu sheeta u landscape -- karta mora biti vidljiva */
    height: var(--sheet-h, 60px);
  }

  /* ── Landscape: manji gear panel max-height ── */
  body.layout-mobile .gear-panel {
    max-height: calc(100dvh - 4rem - env(safe-area-inset-top, 0px));
  }

  /* ── Landscape: CB panel odmah ispod headera ── */
  .cb-panel {
    top: calc(44px + env(safe-area-inset-top, 0px));
    max-height: 60dvh;
  }

  /* ── Landscape: report FAB i help gumb ne preklapaju sheet ── */
  body.layout-mobile .btn-report {
    bottom: calc(var(--sheet-h, 60px) + 8px);
  }
  body.layout-mobile .tut-help-btn {
    bottom: calc(var(--sheet-h, 60px) + 4px);
  }
}

/* ── SECTION: Virtual keyboard handling ───────────────────────────────────────
   Kad se otvori virtualna tipkovnica na mobitelu, browser smanjuje
   visualViewport. Klasa keyboard-open dodaje se na body putem JS-a
   (visualViewport resize event). U tom stanju:
   - Bottom sheet se pomiče gore da submit gumb ostane vidljiv
   - Autocomplete dropdown je vidljiv iznad tipkovnice
   JS (app.js) mora dodati/ukloniti klasu body.keyboard-open.
   Ovo je CSS dio -- JS implementacija je u app.js. */
body.layout-mobile.keyboard-open .btn-route {
  /* Submit gumb ostaje vidljiv dok korisnik tipka adresu */
  position: sticky;
  bottom: 0;
  z-index: 10;
  border-radius: 8px;
}

body.layout-mobile.keyboard-open .sidebar {
  /* Padding dna sprječava da zadnji input nestane iza tipkovnice */
  padding-bottom: 1.5rem;
  scroll-padding-bottom: 1.5rem;
}

/* ── SECTION: Stat counter u sidebar sekciji ─────────────────────────────────
   Sidebar stat-counter dobiva margin samo dok nije u mobilnom sheetu. */
body.layout-mobile .stat-counter {
  margin: .25rem .85rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW v9 ADDITIONS — Monetisation, SEO, enhanced UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ko-fi floating button ─────────────────────────────────────────────────
   Appears bottom-left on desktop, bottom-right on mobile (avoids FAB + help). */
.kofi-float {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 1800;
  display: flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(135deg, #ff5e5b 0%, #ff8c42 100%);
  color: #fff;
  border-radius: 999px;
  padding: .55rem 1rem .55rem .75rem;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(255,94,91,.45), 0 2px 6px rgba(0,0,0,.15);
  transition: transform .2s, box-shadow .2s, opacity .2s;
  letter-spacing: .01em;
  white-space: nowrap;
}
.kofi-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(255,94,91,.55), 0 3px 10px rgba(0,0,0,.18);
}
.kofi-float:active { transform: translateY(0) scale(1); }
.kofi-float-icon { font-size: 1.1rem; line-height: 1; }
.kofi-float-text { font-size: .8rem; }

/* On mobile: move to right side so it doesn't clash with help button (left) */
body.layout-mobile .kofi-float {
  bottom: calc(var(--sheet-h, 90px) + .5rem);
  left: auto;
  right: 1rem;
  padding: .5rem .85rem .5rem .65rem;
  font-size: .75rem;
}
/* Hide text on very small screens — just show coffee icon */
@media (max-width: 360px) {
  .kofi-float-text { display: none; }
  .kofi-float { padding: .6rem; border-radius: 50%; }
}

/* ── Ko-fi sidebar donate block ─────────────────────────────────────────── */
.kofi-sidebar-btn {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #fff5f5 0%, #fff0eb 100%);
  border: 1.5px solid #ffb8a0;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .2s, transform .15s, border-color .15s;
  box-shadow: 0 2px 8px rgba(255,94,91,.1);
}
.kofi-sidebar-btn:hover {
  border-color: #ff5e5b;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,94,91,.2);
}
.kofi-sidebar-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.kofi-sidebar-text { display: flex; flex-direction: column; }
.kofi-sidebar-text strong { font-size: .85rem; font-weight: 700; color: #c0392b; }
.kofi-sidebar-text small  { font-size: .73rem; color: var(--muted); margin-top: 1px; }

/* Dark mode Ko-fi */
body.theme-dark .kofi-sidebar-btn {
  background: rgba(255,94,91,.08);
  border-color: rgba(255,94,91,.3);
}
body.theme-dark .kofi-sidebar-text strong { color: #ff8c42; }

/* ── Sponsor slot ──────────────────────────────────────────────────────── */
.sponsor-slot {
  width: 100%;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: .6rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  background: linear-gradient(135deg, #fafbff 0%, #f0f4ff 100%);
}
.sponsor-slot-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.sponsor-cta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--active);
  text-decoration: none;
  padding: .25rem .75rem;
  border: 1.5px solid var(--active);
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.sponsor-cta:hover { background: var(--active); color: #fff; }

body.theme-dark .sponsor-slot {
  background: rgba(255,255,255,.03);
  border-color: #334155;
}

/* ── Welcome card enhancements ─────────────────────────────────────────── */
.welcome-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .25rem;
}
.welcome-award-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Welcome stat chips row */
.welcome-stats-row {
  display: flex;
  gap: .5rem;
  margin: .5rem 0 .35rem;
}
.welcome-stat-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .4rem .4rem;
}
.welcome-stat-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--active);
  line-height: 1;
}
.welcome-stat-lbl {
  font-size: .62rem;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 500;
}

/* Welcome actions row */
.welcome-actions-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.welcome-link-btn {
  color: var(--active);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: color .15s;
}
.welcome-link-btn:hover { text-decoration: underline; }

/* Donate nudge strip at bottom of welcome card */
.donate-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .75rem;
  padding: .55rem .75rem;
  background: linear-gradient(135deg, #fff7f0 0%, #fff3eb 100%);
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: .78rem;
  color: var(--muted);
}
.donate-nudge-link {
  font-size: .78rem;
  font-weight: 700;
  color: #c2410c;
  text-decoration: none;
  white-space: nowrap;
  padding: .2rem .55rem;
  background: #fff;
  border: 1px solid #fdba74;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.donate-nudge-link:hover { background: #ff5e5b; color: #fff; border-color: #ff5e5b; }

body.theme-dark .donate-nudge {
  background: rgba(255,94,91,.07);
  border-color: rgba(255,94,91,.2);
  color: #94a3b8;
}
body.theme-dark .donate-nudge-link {
  background: #1e293b;
  border-color: rgba(255,94,91,.3);
  color: #fca5a5;
}

/* ── Improved stat counter ──────────────────────────────────────────────── */
.stat-counter {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 60%, #eff6ff 100%);
}
#stat-number {
  background: linear-gradient(135deg, #059669, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Better btn-route glow ─────────────────────────────────────────────── */
.btn-route {
  position: relative;
  overflow: hidden;
}
.btn-route::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Improved header on desktop ────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, var(--active) 0%, color-mix(in srgb, var(--active) 65%, #001a00) 100%);
}

/* ── Welcome card dark mode ─────────────────────────────────────────────── */
body.theme-dark .welcome-stat-chip {
  background: rgba(255,255,255,.05);
  border-color: #334155;
}
body.theme-dark .welcome-stat-num { color: var(--active); }
body.theme-dark .welcome-award-badge {
  background: rgba(245,158,11,.15);
  color: #fbbf24;
  border-color: rgba(245,158,11,.3);
}

/* ── Better focus rings ─────────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--active);
  outline-offset: 2px;
}

/* ── Smooth scrollbar ───────────────────────────────────────────────────── */
.sidebar, .gear-panel, .cb-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar::-webkit-scrollbar,
.gear-panel::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb,
.gear-panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* ── Improved sidebar shadow ────────────────────────────────────────────── */
.sidebar {
  box-shadow: 4px 0 32px rgba(20,50,90,.12), 1px 0 0 var(--border);
}

/* ── Improved welcome card feature rows ─────────────────────────────────── */
.welcome-card .flex.items-start {
  transition: box-shadow .2s, transform .15s;
}
.welcome-card .flex.items-start:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}