/* Pismo Manrope - ulozene priamo u nas, nie z Google Fonts. Premenlive
   (variable) pismo ma vsetky hrubky 400-800 v jednom subore a spolu
   s ceskymi/slovenskymi znakmi (latin-ext) ma 40 kB. Stranka sa tak
   nemusi pripajat na dalsie dva servery, co na mobilnych datach stoji
   stovky milisekund. Licencia: SIL Open Font License (pisma/LICENSE-OFL.txt). */
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("pisma/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("pisma/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =====================================================================
   MHD Trencin - dizajn system (tmavy rezim)

   Jedina akcentova farba, vsetko ostatne v odtienoch sivej. Akcent sa
   meni na jednom mieste (--akcent) a prejavi sa v celej aplikacii.

   Animujeme vylucne transform a opacity - tie prehliadac skladá na
   grafickej karte bez prepocitania rozlozenia, takze nespomaluju ani
   slabsi telefon.
   ===================================================================== */

:root{
  /* --- akcent: dva odtiene jednej cervenej ---
     --akcent        plochy s bielym textom (tlacidla, odznaky)   biela na nej 4,8:1
     --akcent-popredie  cerveny text a ciary na ciernom           voci pozadiu 6,0:1
     Jeden odtien by nestacil: tmavsia cervena je na ciernom necitatelna,
     svetlejsia neda kontrast s bielym textom. */
  --akcent:          #E11D2E;
  --akcent-popredie: #FF4D5E;
  --akcent-text:     #FFFFFF;
  --akcent-jemny:    rgba(225,29,46,.16);
  --akcent-okraj:    rgba(255,77,94,.5);

  /* --- plochy, od najtmavsej --- */
  --bg:       #0A0A0B;
  --karta:    #141416;
  --plocha:   #1C1C1F;
  --plocha-2: #26262A;

  /* --- text (kontrast voci --karta: 18,1 / 9,6 / 5,4 - vsetko nad AA) --- */
  --text:     #F5F5F7;
  --text-2:   #B4B4BC;
  --text-3:   #8B8B94;

  /* --- okraje --- */
  --okraj:        rgba(255,255,255,.09);
  --okraj-silny:  rgba(255,255,255,.16);

  /* --- stavy --- */
  --varovanie: #F59E0B;

  /* --- tvar --- */
  --r-s: 8px;  --r-m: 12px;  --r-l: 18px;  --r-plny: 999px;

  /* --- medzery --- */
  --m-1:4px; --m-2:8px; --m-3:12px; --m-4:16px; --m-5:20px; --m-6:28px;

  /* --- tiene: na tmavom podklade len jemne --- */
  --tien:   0 8px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --tien-s: 0 2px 8px rgba(0,0,0,.4);

  /* --- pohyb --- */
  --easing:  cubic-bezier(.2,.8,.2,1);
  --pruzina: cubic-bezier(.34,1.32,.64,1);      /* pre spodny panel */
  --t-rychlo: 150ms;
  --t-stred:  240ms;
  --t-pomaly: 350ms;
  --stagger:  40ms;

  --hlavicka-v: 60px;
  --nav-v: 62px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* tlacidla reaguju hned - prehliadac necaka, ci nejde o dvojite tuknutie */
button, a, input, select, label, [role=option]{ touch-action:manipulation; }
/* podrzanie prsta na mape nesmie otvorit systemovu ponuku (iPhone) ani
   oznacit text - na mape to znamena "Odtialto / Sem" */
#mapa, .panel .uchyt{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

html,body{
  margin:0; height:100%; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:"Manrope","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-feature-settings:"tnum" 1, "lnum" 1;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
}

button{ font:inherit; color:inherit; }

/* focus prstenec - jediny sposob, ako vidiet polohu pri ovladani klavesnicou */
:focus-visible{ outline:2px solid var(--akcent-popredie); outline-offset:2px; border-radius:var(--r-s); }

/* stlacenie: jemne zmensenie dava pocit fyzickej odozvy */
.stlacitelne,
.ikona, .odchod, .zastavka, .tlacidlo, .hladanie, .prepinac button,
.oblubena, .viac, .spodna-nav a, .spodna-nav button{
  transition:transform var(--t-rychlo) var(--easing),
             background-color var(--t-rychlo) var(--easing),
             border-color var(--t-rychlo) var(--easing);
}
.ikona:active, .odchod:active, .zastavka:active, .tlacidlo:active,
.hladanie:active, .prepinac button:active, .oblubena:active, .viac:active{
  transform:scale(.97);
}

/* ============================ hlavicka ============================= */

.hlavicka{
  position:fixed; inset:0 0 auto 0; z-index:30;
  height:var(--hlavicka-v); padding:0 var(--m-4);
  display:flex; align-items:center; gap:var(--m-3);
  background:rgba(14,15,18,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--okraj);
}

.znacka{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:none; }
.logo{
  width:32px; height:32px; flex:none; border-radius:9px;
  background:var(--akcent); color:var(--akcent-text);
  display:flex; align-items:center; justify-content:center;
}
.logo svg{ width:18px; height:18px; }
.nazov{ font-size:15px; font-weight:500; color:var(--text-2); letter-spacing:-.01em; }
.nazov b{ font-weight:800; color:var(--text); }

.hl-pravo{ display:flex; align-items:center; gap:var(--m-3); margin-left:auto; flex:none; }

.pocet{
  margin:0; display:flex; flex-direction:column; align-items:flex-end;
  font-size:13px; font-weight:600; color:var(--text-2); white-space:nowrap; line-height:1.25;
}
.pocet > span:first-of-type{ display:flex; align-items:center; gap:7px; }
#cas{ font-size:11.5px; font-weight:500; color:var(--text-3); }
#cas.zastarane{ color:var(--varovanie); }

.tep{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--text-3); transition:background-color var(--t-stred);
}
.tep.aktivny{ background:var(--akcent); }

/* ============================== ikony =============================== */

.ikona{
  width:40px; height:40px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--karta); border:1px solid var(--okraj);
  border-radius:11px; cursor:pointer; color:var(--text);
}
@media (hover:hover){ .ikona:hover{ background:var(--plocha); border-color:var(--okraj-silny); } }
.ikona svg{ width:18px; height:18px; }
.ikona.aktivna{ color:var(--akcent-popredie); border-color:var(--akcent-okraj); background:var(--akcent-jemny); }

/* ========================= vyhladavacie pole ======================== */

.hladacie-pole{ position:relative; flex:1; max-width:420px; min-width:0; }

.hladacie-pole .lupa{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--text-3); pointer-events:none;
}

.hladacie-pole input{
  width:100%; height:42px; padding:0 14px 0 40px;
  font:inherit; font-size:16px; font-weight:500; color:var(--text);    /* 16px: iPhone pri tuknuti nepriblizi stranku */
  background:var(--karta); border:1px solid var(--okraj-silny);
  border-radius:var(--r-m);
  transition:border-color var(--t-rychlo), background-color var(--t-rychlo);
}
.hladacie-pole input:focus{ outline:none; border-color:var(--akcent-popredie); background:var(--plocha); }
.hladacie-pole input::placeholder{ color:var(--text-3); }

.navrhy{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50;
  margin:0; padding:6px; list-style:none;
  background:var(--karta); border:1px solid var(--okraj-silny);
  border-radius:var(--r-m); box-shadow:var(--tien);
  max-height:380px; overflow-y:auto;
  animation:vysun var(--t-stred) var(--easing);
}
.navrhy li{
  display:flex; align-items:center; gap:12px;
  padding:10px 11px; border-radius:9px; cursor:pointer;
}
.navrhy li.zvyraznene{ background:var(--plocha); }
@media (hover:hover){ .navrhy li:hover{ background:var(--plocha); } }
.navrh-ikona{
  width:32px; height:32px; flex:none; border-radius:9px;
  background:var(--plocha); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
}
.navrh-ikona svg{ width:15px; height:15px; }
.navrh-text{ min-width:0; }
.navrh-text b{ display:block; font-size:14.5px; font-weight:600; }
.navrh-text span{ display:block; font-size:12.5px; color:var(--text-3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =============================== mapa =============================== */

#mapa{ position:fixed; inset:var(--hlavicka-v) 0 0 0; background:var(--bg); }

.ovladace{
  position:fixed; right:var(--m-4); top:calc(var(--hlavicka-v) + var(--m-4)); z-index:20;
  display:flex; flex-direction:column; gap:6px;
}
.ovladace .ikona{ box-shadow:var(--tien-s); }

.maplibregl-ctrl-attrib{ background:rgba(14,15,18,.7) !important; color:var(--text-3) !important; font-size:10.5px; }
.maplibregl-ctrl-attrib a{ color:var(--text-2) !important; }

/* ============================= vozidlo ============================== */
/*
   Tri urovne, kazda s jedinou ulohou:
     .znacka-obal  polohuje MapLibre cez transform - nedotykat sa
     .vozidlo      zvyraznenie a zvacsenie
     .v-smer       sipka smeru, obieha okolo odznaku
*/

.znacka-obal{ will-change:transform; }

.vozidlo{
  position:relative;
  width:38px; height:52px;
  display:flex; align-items:center; justify-content:center;
  color:var(--c);                          /* farba linky pre karoseriu */
  cursor:pointer; user-select:none;
  transform-origin:center;
  transition:transform var(--t-stred) var(--easing), opacity var(--t-stred);
}
@media (hover:hover){ .vozidlo:hover{ transform:scale(1.12); } }

/* model sa otaca podla smeru jazdy - nic ine sa tu neotaca */
.bus-model{
  position:absolute; inset:2px 3px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.75));
}
.bus-model svg{ width:100%; height:100%; display:block; }

/* Pri priblizeni na ulicu prevezmu autobusy 3D modely. Plocha silueta
   sa prelnie do strateny, cislo linky zostava - v 3D by bol text
   z vacsiny uhlov necitatelny. */
/* otacanie modelu je plynule uz v JS (priblizUhol) - CSS prechod na transform
   by sa pri kazdom snimku spustal nanovo a stal zbytocny vykon */
.bus-model{ transition:opacity var(--t-pomaly) var(--easing); }
.rezim-3d .bus-model{ opacity:0; }
.rezim-3d .vozidlo{ width:auto; height:auto; }

/* Cislo linky: vzpriamene, v strede modelu, biele s ciernym textom -
   kontrast 18:1 bez ohladu na farbu linky. Okraj vo farbe linky ho
   spaja s karoseriou, aby cislo a autobus citali ako jeden objekt. */
.bus-cislo{
  position:relative; z-index:2;
  min-width:26px; height:22px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  background:#FFFFFF; color:#0A0A0B;
  border:2px solid var(--c); border-radius:7px;
  font-size:13.5px; font-weight:800; letter-spacing:-.03em; line-height:1;
  box-shadow:0 0 0 1.5px #0A0A0B, 0 2px 6px rgba(0,0,0,.5);
  pointer-events:none;
}

/* zivy udaj: cervena bodka na cisle. Odhad z poriadku zostava rovnako
   viditelny - kym nemame GPS, su odhadnute vsetky vozidla. */
.vozidlo.zive .bus-cislo::after{
  content:""; position:absolute; top:-5px; right:-5px;
  width:9px; height:9px; border-radius:50%;
  background:var(--akcent-popredie); border:2px solid #0A0A0B;
}

/* ked je vybrana linka, ostatne vozidla ustupia - ale nezmiznu */
.tlmit-ostatne .vozidlo:not(.aktivna-linka){ opacity:.3; }
/* pri nakreslenej ceste ustupia ostatne autobusy este viac */
.len-cesta .vozidlo:not(.aktivna-linka){ opacity:.14; }
.vozidlo.aktivna-linka{ transform:scale(1.08); z-index:3; }

.vozidlo.vybrane{ transform:scale(1.25); z-index:5; }
.vozidlo.vybrane::before{
  content:""; position:absolute; top:50%; left:50%;
  width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%;
  border:2px solid var(--c);
  background:rgba(10,10,11,.55);
}

/* --- 3D: cislo linky ako stitok nad strechou ---
   V 3D je znacka nad stredom autobusu (posuva ju autobusy3d.js). Cislo sa
   zdvihne nad model a dostane spicku smerom k nemu - ako stitok v Uberi.
   Model tak zostane cely viditelny a cislo sa stale da precitat. */
.rezim-3d .vozidlo{
  transform:translateY(-30px);
  flex-direction:column;
}
@media (hover:hover){ .rezim-3d .vozidlo:hover{ transform:translateY(-30px) scale(1.08); } }
.rezim-3d .bus-cislo{
  height:20px; min-width:24px; font-size:12.5px; border-radius:6px;
  box-shadow:0 0 0 1.5px #0A0A0B, 0 4px 10px rgba(0,0,0,.55);
}
.rezim-3d .vozidlo::after{
  content:""; width:0; height:0; margin-top:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--c);
  filter:drop-shadow(0 1.5px 0 #0A0A0B);
}
/* kruh okolo vybraneho by v 3D zakryl model - namiesto neho
   sa zvyrazni stitok farbou linky */
.rezim-3d .vozidlo.vybrane::before{ display:none; }
.rezim-3d .vozidlo.vybrane{ transform:translateY(-34px) scale(1.18); }
.rezim-3d .vozidlo.vybrane .bus-cislo{
  box-shadow:0 0 0 1.5px #0A0A0B, 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent), 0 4px 12px rgba(0,0,0,.6);
}
.rezim-3d .vozidlo.aktivna-linka{ transform:translateY(-30px) scale(1.05); }
@media (prefers-reduced-motion: reduce){
  .rezim-3d .vozidlo, .rezim-3d .vozidlo.vybrane{ transition:none; }
}

/* ============================== panel =============================== */

.panel{
  position:fixed; z-index:25;
  background:var(--karta);
  display:flex; flex-direction:column;
}

.uchyt{ display:none; }

.panel-obsah{ overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--plocha-2) transparent; }

/* --- pocitac: plavajuci stlpec --- */
@media (min-width:861px){
  .panel{
    left:var(--m-4);
    top:calc(var(--hlavicka-v) + var(--m-4));
    bottom:var(--m-4);
    width:392px;
    border:1px solid var(--okraj);
    border-radius:var(--r-l);
    box-shadow:var(--tien);
    overflow:hidden;
    transition:transform var(--t-pomaly) var(--easing);
  }
  .panel-obsah{ flex:1; }
  .panel.zbaleny{ bottom:auto; }
  .panel.zbaleny .panel-obsah{ display:none; }
}

.zbalit{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--plocha); border:1px solid var(--okraj);
  color:var(--text-2); cursor:pointer;
}
.zbalit svg{ width:15px; height:15px; transition:transform var(--t-stred) var(--easing); }
.panel.zbaleny .zbalit svg{ transform:rotate(180deg); }

/* --- mobil otoceny na sirku: panel vlavo, mapa vpravo ---
   Spodny panel by pri vyske 360-420 px zakryl skoro celu mapu. */
@media (max-width:860px) and (orientation:landscape) and (max-height:520px){
  .panel.panel{
    left:calc(8px + env(safe-area-inset-left)); right:auto;
    top:calc(var(--hlavicka-v) + 8px);
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:auto; width:min(380px, 48vw);
    transform:none !important; transition:none;
    border:1px solid var(--okraj); border-radius:var(--r-l);
    overflow:hidden;
  }
  body:has(.spodna-nav) .panel.panel{ bottom:calc(var(--nav-v) + 8px + env(safe-area-inset-bottom)); }
  .panel .uchyt{ display:none; }
}

/* --- mobil: tahaci spodny panel s pruzinou --- */
@media (max-width:860px){
  /* Panel siaha az po spodok obrazovky. Miesto pre spodnu navigaciu si
     rezervuje LEN vtedy, ked navigacia na stranke naozaj je - inak by pod
     panelom zostala prazdna diera, ktora len ubera mapu.

     Vyska v dvh, nie vh: mobilne prehliadace do vh zapocitavaju aj plochu
     pod vysuvacou listou s adresou, takze panel by bol vyssi nez to, co
     je vidiet, a jeho spodok by sa schoval. vh ostava ako zaloha pre
     starsie prehliadace. */
  .panel{
    left:0; right:0;
    bottom:0;
    height:74vh;
    height:74dvh;
    border-radius:var(--r-l) var(--r-l) 0 0;
    border-top:1px solid var(--okraj-silny);
    box-shadow:0 -10px 40px rgba(0,0,0,.55);
    transform:translateY(calc(100% - 196px));
    transition:transform var(--t-pomaly) var(--pruzina);
    touch-action:none;
  }
  .panel.otvoreny{ transform:translateY(0); }
  .panel.tiahne{ transition:none; }

  .uchyt{
    display:flex; align-items:center; justify-content:center;
    height:32px; border:none; background:none; cursor:grab; flex:none;
  }
  .uchyt span{ width:40px; height:5px; border-radius:3px; background:var(--plocha-2); }

  .panel-obsah{ flex:1; padding-bottom:env(safe-area-inset-bottom); }
  .ovladace, .zbalit{ display:none; }

  /* ked je na stranke spodna navigacia, panel konci tesne nad nou */
  body:has(.spodna-nav) .panel{ bottom:calc(var(--nav-v) + env(safe-area-inset-bottom)); }
  body:has(.spodna-nav) .panel-obsah{ padding-bottom:0; }
  .nazov{ display:none; }
  .pocet{ display:none; }
}

/* ======================== obsah panela ============================= */

.p-hlava{ padding:var(--m-5) var(--m-5) var(--m-4); border-bottom:1px solid var(--okraj); }

.p-spat{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  /* dost velka plocha na tuknutie, hoci text je maly */
  min-height:40px; padding:0 12px 0 0; margin:-8px 0 4px;
  font-size:13.5px; font-weight:600; color:var(--text-2);
}
@media (hover:hover){ .p-spat:hover{ color:var(--text); } }
.p-spat svg{ width:15px; height:15px; }

.p-nadpis{ margin:0; font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.p-podnadpis{ margin:6px 0 0; font-size:13.5px; color:var(--text-2); }

.p-stitok{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 5px;
}

.hlava-riadok{ display:flex; align-items:flex-start; gap:var(--m-3); }
.hlava-riadok > div{ flex:1; min-width:0; }

/* --- odznak linky: odliseny tvarom a vahou, nie farbou --- */

.linka{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:30px; padding:0 9px; flex:none;
  /* --c je farba linky, --ct biela alebo cierna podla kontrastu;
     bez farby spadne na neutralny odznak */
  background:var(--c, var(--text)); color:var(--ct, var(--bg));
  border-radius:8px;
  /* tmave farby (napr. #414042) by na karte splynuli - jemny okraj
     drzi tvar odznaku aj vtedy */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:15px; font-weight:800; letter-spacing:-.03em; line-height:1;
}
.linka.mala{ min-width:30px; height:24px; padding:0 7px; font-size:12.5px; border-radius:6px; }
.linka.velka{ min-width:48px; height:40px; padding:0 12px; font-size:20px; border-radius:10px; }
.linka.odhad{ background:transparent; color:var(--text); border:1.5px dashed var(--okraj-silny); }
.linka.akcent{ background:var(--akcent); color:var(--akcent-text); }

/* --- riadok odchodu --- */

.odchod{
  display:flex; align-items:center; gap:var(--m-3);
  width:100%; padding:14px var(--m-5);
  background:none; border:none; border-top:1px solid var(--okraj);
  text-align:left; cursor:pointer;
}
@media (hover:hover){ .odchod:hover{ background:var(--plocha); } }
.odchod:first-of-type{ border-top:none; }

.o-smer{ flex:1; min-width:0; }
.o-smer b{ display:block; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.o-smer > span{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-3); margin-top:3px; }

.o-cas{ font-size:19px; font-weight:800; letter-spacing:-.03em; flex:none; text-align:right; }
.o-cas.slabo{ color:var(--text-2); font-weight:600; font-size:17px; }
.o-cas small{ display:block; font-size:11.5px; font-weight:500; color:var(--text-3); margin-top:2px; letter-spacing:0; }

/* najblizsi odchod je jedina vec v zozname v akcente */
.odchod.prvy .o-cas{ color:var(--akcent-popredie); }


/* do minuty jemne pulzuje - "ponahlaj sa" bez krikľavosti */
.odchod.hned .o-cas,
.z-odchod.hned b{ animation:pulz 1.6s ease-in-out infinite; }

/* zmena cisla odpoctu: stare vyjde hore, nove pride zdola */
.o-cas .hodnota{ display:inline-block; }
.o-cas .hodnota.zmena{ animation:odpocet var(--t-pomaly) var(--easing); }

/* --- riadok zastavky --- */

.zastavka{
  display:flex; align-items:center; gap:var(--m-3);
  width:100%; padding:13px var(--m-5);
  background:none; border:none; border-top:1px solid var(--okraj);
  text-align:left; cursor:pointer;
}
@media (hover:hover){ .zastavka:hover{ background:var(--plocha); } }

.z-ikona{
  width:36px; height:36px; flex:none; border-radius:10px;
  background:var(--plocha); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
}
.z-ikona svg{ width:17px; height:17px; }

.z-text{ flex:1; min-width:0; }
.z-text b{ display:block; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.z-text span{ display:block; font-size:12.5px; color:var(--text-3); margin-top:2px; }

.z-odchod{ display:flex; align-items:center; gap:8px; flex:none; }
.z-odchod b{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.zastavka:first-of-type .z-odchod b{ color:var(--akcent-popredie); }

/* --- oblubene zastavky: jedno tuknutie --- */

.oblubene{
  display:flex; gap:8px; padding:var(--m-3) var(--m-5) var(--m-4);
  overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--okraj);
}
.oblubene::-webkit-scrollbar{ display:none; }

.oblubena{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:9px 14px; border-radius:var(--r-plny);
  background:var(--plocha); border:1px solid var(--okraj);
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
@media (hover:hover){ .oblubena:hover{ border-color:var(--okraj-silny); } }
.oblubena svg{ width:13px; height:13px; color:var(--akcent-popredie); }

.hviezda{
  width:40px; height:40px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--plocha); border:1px solid var(--okraj); border-radius:11px;
  color:var(--text-2); cursor:pointer;
  transition:color var(--t-rychlo), border-color var(--t-rychlo), transform var(--t-rychlo) var(--easing);
}
.hviezda:active{ transform:scale(.9); }
.hviezda svg{ width:19px; height:19px; }
.hviezda[aria-pressed="true"]{ color:var(--akcent-popredie); border-color:var(--akcent-okraj); background:var(--akcent-jemny); }
.hviezda[aria-pressed="true"] svg{ fill:currentColor; animation:hviezda var(--t-pomaly) var(--pruzina); }

/* --- vybrane vozidlo --- */

.prichod{ padding:var(--m-5) var(--m-5) var(--m-4); }
.prichod .cislo{ font-size:52px; font-weight:800; letter-spacing:-.05em; line-height:1; margin:0; color:var(--akcent-popredie); }
.prichod .cislo small{ font-size:21px; font-weight:600; margin-left:5px; letter-spacing:-.01em; color:var(--text-2); }
.prichod .popis{ margin:8px 0 0; font-size:14px; color:var(--text-2); }
/* zmena odpoctu: nove cislo jemne vyjde zdola, namiesto skoku */
.prichod .cislo.zmena{ animation:odpocet var(--t-pomaly) var(--easing); }

/* zastavka, ku ktorej autobus prave ide, a prejdene zastavky sa
   pri obnove menia plynulo - bez preblikovania */
.trasa li .bod, .trasa li .meno, .trasa li .cas{
  transition:color var(--t-pomaly) var(--easing), border-color var(--t-pomaly) var(--easing),
             background-color var(--t-pomaly) var(--easing), box-shadow var(--t-pomaly) var(--easing);
}

.pruh{ height:4px; background:var(--plocha); border-radius:2px; overflow:hidden; margin:var(--m-4) 0 0; }
.pruh i{ display:block; height:100%; width:100%; background:var(--akcent); border-radius:2px;
  transform-origin:left; transition:transform var(--t-pomaly) var(--easing); }

.udaje{ display:flex; gap:var(--m-5); padding:var(--m-4) var(--m-5); border-top:1px solid var(--okraj); border-bottom:1px solid var(--okraj); }
.udaje div{ font-size:11.5px; color:var(--text-3); }
.udaje b{ display:block; font-size:14.5px; font-weight:700; color:var(--text); margin-top:3px; white-space:nowrap; }

.trasa{ list-style:none; margin:0; padding:var(--m-3) var(--m-5) var(--m-5); }
.trasa li{ display:flex; align-items:center; gap:14px; padding:10px 0; position:relative; }
.trasa .bod{ width:11px; height:11px; border-radius:50%; border:2px solid var(--text-3); background:var(--karta); flex:none; z-index:2; }
.trasa li.teraz .bod{ border-color:var(--akcent-popredie); background:var(--akcent); box-shadow:0 0 0 4px var(--akcent-jemny); }
.trasa li.preslo .bod{ border-color:var(--plocha-2); }
.trasa li:not(:last-child)::before{ content:""; position:absolute; left:4.5px; top:22px; bottom:-10px; width:2px; background:var(--plocha); }
.trasa .meno{ flex:1; font-size:14.5px; }
.trasa li.preslo .meno{ color:var(--text-3); }
.trasa li.teraz .meno{ font-weight:700; }
.trasa .cas{ font-size:14px; font-weight:600; }
.trasa li.preslo .cas{ color:var(--text-3); font-weight:400; }

.trasa-linky li{ cursor:pointer; border-radius:9px; padding-left:8px; padding-right:8px; margin:0 -8px; }
@media (hover:hover){ .trasa-linky li:hover{ background:var(--plocha); } }
.trasa-linky .cas{ color:var(--text-3); font-weight:500; font-size:13px; }

/* --- prepinac smerov s posuvnym indikatorom --- */

.prepinac{
  position:relative; display:flex; gap:0;
  margin:var(--m-3) var(--m-5); padding:4px;
  background:var(--plocha); border-radius:var(--r-m);
}
.prepinac .indikator{
  position:absolute; top:4px; bottom:4px; left:0;
  background:var(--plocha-2); border-radius:9px;
  box-shadow:var(--tien-s);
  transition:transform var(--t-pomaly) var(--easing), width var(--t-pomaly) var(--easing);
}
.prepinac button{
  position:relative; z-index:1; flex:1;
  min-height:40px; padding:9px 10px; background:none; border:none; border-radius:9px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color var(--t-stred);
}
.prepinac button[aria-selected="true"]{ color:var(--text); }

/* --- detail vozidla: hlavicka s tlacidlom Sledovat --- */
.vozidlo-hlava{ display:flex; align-items:center; gap:10px; }
.vozidlo-hlava .p-nadpis{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sledovat{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  height:34px; padding:0 12px 0 10px; border-radius:var(--r-plny);
  background:var(--plocha); border:1px solid var(--okraj-silny);
  font-size:13px; font-weight:700; color:var(--text-2); cursor:pointer;
  transition:background-color var(--t-stred), color var(--t-stred), border-color var(--t-stred);
}
.sledovat svg{ width:16px; height:16px; }
.sledovat[aria-pressed="true"]{ background:var(--akcent-jemny); border-color:var(--akcent-okraj); color:var(--akcent-popredie); }
.sledovat[aria-pressed="true"] svg circle:first-child{ fill:currentColor; }

/* --- detail linky: hlavicka, smery a varianty trasy --- */

.linka-hlava{ display:flex; align-items:center; gap:12px; }
.linka-hlava > div{ min-width:0; }
.linka-hlava .p-nadpis{ font-size:19px; }
.linka-hlava .p-podnadpis{ margin-top:3px; }

.prepinac-smer button{ font-size:13.5px; }
.smer-sipka{ color:var(--text-3); margin-right:2px; }
.prepinac-smer button[aria-selected="true"] .smer-sipka{ color:var(--akcent-popredie); }

.trasa-udaje{ margin:0; padding:2px var(--m-5) 0; font-size:13px; color:var(--text-3); }

.varianty{
  margin:var(--m-3) var(--m-5) 0;
  border:1px solid var(--okraj); border-radius:var(--r-m); background:var(--plocha);
}
.varianty summary{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:600; color:var(--text-2);
}
.varianty summary::-webkit-details-marker{ display:none; }
.varianty summary::after{
  content:""; margin-left:auto; width:7px; height:7px; flex:none;
  border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-stred) var(--easing);
}
.varianty[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.varianty-pocet{
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-plny);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--plocha-2); font-size:11.5px; font-weight:800; color:var(--text-2);
}
.varianty ul{ list-style:none; margin:0; padding:0 6px 6px; }
.varianty li button{
  display:flex; align-items:flex-start; gap:11px; width:100%;
  padding:10px 8px; background:none; border:none; border-radius:9px;
  text-align:left; cursor:pointer;
}
@media (hover:hover){ .varianty li button:hover{ background:var(--plocha-2); } }
.var-bod{
  width:14px; height:14px; margin-top:2px; flex:none; border-radius:50%;
  border:2px solid var(--okraj-silny);
  transition:border-color var(--t-rychlo), box-shadow var(--t-rychlo);
}
.varianty button[aria-pressed="true"] .var-bod{
  border-color:var(--akcent-popredie); box-shadow:inset 0 0 0 3px var(--plocha), inset 0 0 0 7px var(--akcent-popredie);
}
.var-text{ min-width:0; }
.var-text b{ display:block; font-size:14px; font-weight:600; color:var(--text); line-height:1.35; }
.var-text span{ display:block; margin-top:2px; font-size:12.5px; color:var(--text-3); }
.varianty .dnes-nie .var-text b{ color:var(--text-2); font-weight:500; }
.varianty button[aria-pressed="true"] .var-text b{ font-weight:700; }

/* --- znacky stavu --- */

.znak{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-3); }
.znak svg{ width:12px; height:12px; }
.znak.zive{ color:var(--akcent-popredie); font-weight:600; }
.bodka-zive{ width:6px; height:6px; border-radius:50%; background:var(--akcent); animation:pulz 2s ease-in-out infinite; }

/* --- vyhladanie spojenia --- */

.hladanie{
  display:flex; align-items:center; gap:10px;
  width:100%; margin-top:var(--m-4); padding:13px 15px;
  background:var(--plocha); border:1px solid var(--okraj);
  border-radius:var(--r-m); cursor:pointer;
  font-size:15px; font-weight:600; color:var(--text-2); text-align:left;
}
@media (hover:hover){ .hladanie:hover{ border-color:var(--okraj-silny); color:var(--text); } }
.hladanie svg{ width:17px; height:17px; flex:none; }

.formular{ padding:var(--m-5); border-bottom:1px solid var(--okraj); }
.pole{ display:block; margin-bottom:var(--m-3); }
.pole > span:first-child{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.pole input{
  width:100%; padding:13px 14px;
  font:inherit; font-size:16px; font-weight:500; color:var(--text);    /* 16px: iOS nezoomuje */
  background:var(--plocha); border:1px solid var(--okraj);
  border-radius:var(--r-m);
  transition:border-color var(--t-rychlo);
}
.pole input:focus{ outline:none; border-color:var(--akcent-popredie); }
.pole input::placeholder{ color:var(--text-3); }
/* sipka zoznamu navrhov (datalist) v Chrome - na dotykovom displeji
   len zavadza a vyzera, akoby pole Kam bolo iny druh pola nez Odkial */
.pole input::-webkit-calendar-picker-indicator{ display:none !important; }

/* --- odkial / kam s tlacidlom na prehodenie --- */

.dvojpole{ position:relative; }
.dvojpole .pole input{ padding-right:60px; }      /* text nepodlezie pod tlacidlo */

.prehodit{
  position:absolute; right:12px; z-index:2;
  /* stred medzi oboma polami: polovica vysky + polovica popisu druheho pola */
  top:calc(50% + 4px); transform:translateY(-50%);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--karta); border:1px solid var(--okraj-silny);
  border-radius:50%; cursor:pointer; color:var(--text-2);
  transition:color var(--t-rychlo), border-color var(--t-rychlo);
}
@media (hover:hover){ .prehodit:hover{ color:var(--akcent-popredie); border-color:var(--akcent-okraj); } }
.prehodit svg{ width:18px; height:18px; }
.prehodit.otoc svg{ animation:otoc-sipky var(--t-pomaly) var(--pruzina); }
@keyframes otoc-sipky{ from{ transform:rotate(0); } to{ transform:rotate(180deg); } }

/* --- kedy: teraz / odchod o / prichod do --- */

.prepinac.prepinac-kedy{ margin:var(--m-1) 0 var(--m-3); }

/* vyber dna a casu sa rozbali plynulo - grid 0fr -> 1fr animuje vysku
   aj bez toho, aby sme ju poznali vopred */
.kedy{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--m-2);
  grid-template-rows:0fr; overflow:hidden;
  opacity:0; margin-bottom:0; visibility:hidden;
  transition:grid-template-rows var(--t-stred) var(--easing), opacity var(--t-stred),
             margin-bottom var(--t-stred) var(--easing), visibility var(--t-stred);
}
.kedy.otvorene{ grid-template-rows:1fr; opacity:1; margin-bottom:var(--m-3); visibility:visible; }
.kedy-pole{ min-height:0; }
.kedy select, .kedy input{
  width:100%; height:48px; padding:0 14px;
  font:inherit; font-size:16px; font-weight:600; color:var(--text);
  background:var(--plocha); border:1px solid var(--okraj); border-radius:var(--r-m);
  appearance:none; -webkit-appearance:none;
}
.kedy select{
  padding-right:36px; cursor:pointer;
  /* vlastna sipka - systemova ma na kazdom telefone iny vzhlad */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8B94' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.kedy input::-webkit-calendar-picker-indicator{ filter:invert(.6); cursor:pointer; }
.kedy select:focus, .kedy input:focus{ outline:none; border-color:var(--akcent-popredie); }

.skryte-citacka{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* --- hlavicka vysledkov --- */

.v-hlava{ padding:var(--m-4) var(--m-5) var(--m-2); }
.v-trasa{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v-kedy{ margin:3px 0 0; font-size:13px; font-weight:600; color:var(--text-2); }
/* --- cesta odkialkolvek: spendliky, ponuka na mape, "vyrazte o" --- */

/* Spendlik ako v Bolte: okruhla hlavicka, palicka a bodka, ktora
   ukazuje presne miesto - vyzera, akoby bol zapichnuty do mapy.
   Pri tahani (a pri vybere miesta pri posuvani mapy) sa nadvihne
   a pod nim ostane tien. Zaciatok ma bielu hlavicku, ciel akcentovu. */
.spendlik{ cursor:grab; width:40px; height:62px; position:relative; }
.spendlik:active{ cursor:grabbing; }
.sp-hlava{
  position:absolute; left:50%; top:0; width:34px; height:34px; margin-left:-17px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px solid #0A0A0B; box-shadow:0 6px 14px rgba(0,0,0,.45);
  transition:transform 220ms var(--pruzina);
}
.sp-palicka{
  position:absolute; left:50%; top:31px; width:3px; height:22px; margin-left:-1.5px;
  border-radius:0 0 2px 2px; background:#F5F5F7;
  box-shadow:0 0 0 1.5px #0A0A0B;
  transition:transform 220ms var(--pruzina);
}
.sp-bod{
  position:absolute; left:50%; bottom:0; width:10px; height:5px; margin-left:-5px; border-radius:50%;
  background:rgba(0,0,0,.7); box-shadow:0 0 0 2px rgba(245,245,247,.25);
  transition:transform 220ms var(--pruzina), opacity 220ms;
}
.zdvihnuty .sp-hlava, .zdvihnuty .sp-palicka{ transform:translateY(-12px); }
.zdvihnuty .sp-bod{ transform:scale(1.6); opacity:.6; }

.spendlik-z .sp-hlava{ background:#F5F5F7; }
.spendlik-z .sp-hlava::after{ content:""; width:10px; height:10px; border-radius:50%; background:#0A0A0B; }
.spendlik-kam .sp-hlava{ background:var(--akcent); }
.spendlik-kam .sp-hlava::after{ content:""; width:10px; height:10px; border-radius:2px; background:#fff; }

/* stredovy spendlik pri vybere miesta - v hlavicke minuty na zastavku */
.vyber-bodu{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.stredovy-spendlik{ position:absolute; width:52px; height:78px; transform:translate(-50%, -100%); }
.stredovy-spendlik .sp-hlava{ width:48px; height:48px; margin-left:-24px; border-width:3px; }
.stredovy-spendlik .sp-hlava::after{ display:none; }
.stredovy-spendlik .sp-hlava b{ font-size:17px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.stredovy-spendlik .sp-hlava small{ font-size:9.5px; font-weight:700; line-height:1; margin-top:1px; opacity:.8; }
.stredovy-spendlik.spendlik-z .sp-hlava{ color:#0A0A0B; }
.stredovy-spendlik.spendlik-kam .sp-hlava{ color:#fff; }
.stredovy-spendlik .sp-palicka{ top:45px; height:26px; }

.vyber-karta{
  position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:min(420px, calc(100% - 24px)); padding:var(--m-4) var(--m-5);
  background:var(--karta); border:1px solid var(--okraj-silny); border-radius:var(--r-l);
  box-shadow:0 12px 40px rgba(0,0,0,.6); pointer-events:auto;
  animation:vstup var(--t-pomaly) var(--easing);
}
@media (min-width:861px){ .vyber-karta{ left:calc(50% + 220px); } }
.vk-nadpis{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.vk-info{ margin:4px 0 var(--m-3); font-size:14px; color:var(--text-2); min-height:1.4em; }
.vk-tlacidla{ display:flex; gap:8px; }
.vk-zrusit{
  height:48px; padding:0 18px; border-radius:var(--r-m); cursor:pointer;
  background:var(--plocha); border:1px solid var(--okraj-silny); color:var(--text); font:inherit; font-weight:700;
}
.vk-potvrdit{ flex:1; }

/* pocas vyberu miesta panel na mobile ustupi - mapa patri spendliku */
@media (max-width:860px){
  body.vybera-bod .panel{ transform:translateY(100%) !important; }
  body:has(.spodna-nav).vybera-bod .vyber-karta{ bottom:calc(var(--nav-v) + 12px + env(safe-area-inset-bottom)); }
}

/* moja poloha: modra bodka s jemnym pulzom, ako v mapovych aplikaciach */
.spendlik-poloha{
  width:18px; height:18px; border-radius:50%; cursor:default;
  background:#1A73E8; box-shadow:0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.4);
  position:relative;
}
.spendlik-poloha::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background:rgba(26,115,232,.25); animation:pulz-polohy 2s var(--easing) infinite;
}
@keyframes pulz-polohy{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(1.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .spendlik-poloha::before{ animation:none; } }


/* --- pole Odkial / Kam: stitok s bodom a vlastny zoznam navrhov --- */
.formular{ position:relative; }
.pole{ position:relative; }
.pole-bod{ display:none; }
.pole.ma-bod .pole-bod{
  position:absolute; left:1px; right:60px; bottom:1px; height:46px;
  display:flex; align-items:center; gap:9px; padding:0 12px;
  border-radius:var(--r-m); cursor:text; overflow:hidden; white-space:nowrap;
  background:var(--plocha); text-transform:none; letter-spacing:normal; margin:0;
}
.pole.ma-bod input{ color:transparent; caret-color:transparent; }
.pole.ma-bod input::placeholder{ color:transparent; }
.pole-bod b{ font-size:15.5px; font-weight:700; color:var(--text); }
.pole-bod small{ font-size:12.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; }
.pb-ikona{ width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; }
.pb-ikona svg{ width:15px; height:15px; }
.pb-poloha{ background:rgba(26,115,232,.18); color:#5B9BFF; }
.pb-z{ background:#F5F5F7; color:#0A0A0B; }
.pb-kam{ background:var(--akcent); color:#fff; }

.navrhy-miesta{
  position:absolute; left:0; right:0; z-index:20; margin:0; padding:6px; list-style:none;
  background:var(--karta); border:1px solid var(--okraj-silny); border-radius:var(--r-m);
  box-shadow:0 14px 40px rgba(0,0,0,.6); max-height:320px; overflow-y:auto;
}
.nm{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px; cursor:pointer; }
.nm[aria-selected="true"]{ background:var(--plocha-2); }
@media (hover:hover){ .nm:hover{ background:var(--plocha-2); } }
.nm-znak{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--plocha); color:var(--text-2); }
.nm-znak svg{ width:18px; height:18px; }
.nm-poloha .nm-znak{ background:rgba(26,115,232,.18); color:#5B9BFF; }
.nm-mapa .nm-znak{ background:var(--akcent-jemny); color:var(--akcent-popredie); }
.nm-text{ min-width:0; }
.nm-text b{ display:block; font-size:14.5px; font-weight:700; color:var(--text); }
.nm-text small{ display:block; font-size:12.5px; color:var(--text-3); }
/* oddelenie specialnych moznosti od zastavok */
.nm-mapa + .nm-zastavka{ margin-top:6px; position:relative; }
.nm-mapa + .nm-zastavka::before{ content:""; position:absolute; left:10px; right:10px; top:-4px; height:1px; background:var(--okraj); }

/* ponuka po podrzani prsta na mape */
.popup-bodu .maplibregl-popup-content{
  padding:6px; background:var(--karta); border:1px solid var(--okraj-silny);
  border-radius:var(--r-m); box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.popup-bodu .maplibregl-popup-tip{ border-top-color:var(--karta); border-bottom-color:var(--karta); }
.ponuka-bodu{ display:flex; gap:4px; }
.ponuka-bodu button{
  display:flex; align-items:center; gap:8px;
  height:40px; padding:0 14px 0 10px; border:none; border-radius:9px;
  background:transparent; color:var(--text); font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.ponuka-bodu button:hover, .ponuka-bodu button:focus-visible{ background:var(--plocha-2); }
.pb-znak{ width:12px; height:12px; border-radius:50%; flex:none; }
.pb-z{ background:#F5F5F7; box-shadow:inset 0 0 0 3.5px #0A0A0B, 0 0 0 1.5px #F5F5F7; }
.pb-kam{ background:#E11D2E; }

.vyraz{
  margin:var(--m-2) 0 var(--m-2); padding:10px 12px;
  background:var(--akcent-jemny); border:1px solid var(--akcent-okraj); border-radius:var(--r-m);
  font-size:13.5px; color:var(--text-2);
}
.vyraz b{ color:var(--akcent-popredie); font-weight:800; }
.vyraz span{ display:block; margin-top:2px; font-size:12.5px; color:var(--text-3); }

.na-mape{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  height:42px; margin-top:var(--m-2);
  background:var(--karta); border:1px solid var(--okraj-silny); border-radius:var(--r-m);
  color:var(--text); font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.na-mape svg{ width:17px; height:17px; }
@media (hover:hover){ .na-mape:hover{ border-color:var(--akcent-okraj); } }

/* --- obrazovka vybranej cesty (karta spoja) --- */

/* mobil: panel v polovici - hore mapa s cestou, dole karta */
@media (max-width:860px){
  .panel.polovica{ transform:translateY(30%); }
}

.c-hlava{ padding-bottom:var(--m-3); }
.c-titul{ display:flex; align-items:center; gap:8px; }
.c-titul > div{ min-width:0; margin-left:4px; }
.c-titul .p-nadpis{ font-size:20px; }
.c-titul .p-podnadpis{ margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-sipka{ color:var(--text-3); font-weight:800; }

.c-velke{ padding:var(--m-2) var(--m-5) var(--m-4); }
.c-cislo{
  margin:0; font-size:64px; font-weight:800; letter-spacing:-.055em; line-height:1;
  color:var(--akcent-popredie); font-variant-numeric:tabular-nums;
}
.c-cislo small{ font-size:26px; font-weight:700; margin:0 2px 0 6px; letter-spacing:-.02em; color:var(--text-2); }
.c-cislo.zmena{ animation:odpocet var(--t-pomaly) var(--easing); }
.c-popis{ margin:10px 0 0; font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--text); }
.c-pruh{ height:8px; border-radius:4px; margin-top:var(--m-4); }
.c-pruh i{ border-radius:4px; transform:scaleX(0); }

/* tri stitky v rovnakych stlpcoch: ikona hore, text pod nou - zmestia
   sa aj na uzky telefon a nic sa neorezava */
.c-stitky{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:0 var(--m-5) var(--m-4); }
.c-stitok{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0;
  padding:12px; border-radius:var(--r-m);
  background:var(--plocha); border:1px solid var(--okraj);
  font-size:14px; font-weight:700; color:var(--text); line-height:1.25;
}
.c-stitok span{ min-width:0; overflow-wrap:anywhere; }
.c-stitok svg{ width:22px; height:22px; color:var(--akcent-popredie); flex:none; }
.c-stitok b{ font-weight:700; }
.c-stitok small{ display:block; font-size:11.5px; font-weight:600; color:var(--text-3); margin-bottom:1px; }
.c-stitok span > small:last-child:not(:first-child){ margin:1px 0 0; }

.c-oddiel{
  margin:0; padding:var(--m-4) var(--m-5) var(--m-2); border-top:1px solid var(--okraj);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
}
.c-zastavky{ list-style:none; margin:0; padding:0 var(--m-5) var(--m-3); }
.c-zastavky li{ display:flex; align-items:center; gap:14px; padding:9px 0; position:relative; }
/* zvisla ciara vo farbe linky spaja zastavky */
.c-zastavky li:not(:last-child)::before{
  content:""; position:absolute; left:6px; top:50%; height:100%; width:3px; background:var(--c, var(--plocha-2)); opacity:.6;
}
.c-bod{ width:15px; height:15px; border-radius:50%; flex:none; z-index:1;
  background:var(--karta); border:3px solid var(--c, var(--text-3)); }
.c-zastavky li.nastup .c-bod, .c-zastavky li.vystup .c-bod{ background:var(--c); box-shadow:0 0 0 3px var(--karta), 0 0 0 5px var(--c); }
.c-meno{ flex:1; min-width:0; font-size:15px; font-weight:600; color:var(--text-2); }
.c-meno small{ display:block; font-size:12.5px; font-weight:500; color:var(--text-3); margin-top:1px; }
.c-zastavky li.nastup .c-meno, .c-zastavky li.vystup .c-meno{ color:var(--text); font-weight:800; }
.c-cas{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.c-zastavky .kostra{ display:block; }
/* hlavicka useku (linka a smer) a prestup medzi usekmi */
.c-zastavky li.c-linka{ padding:12px 0 4px; gap:10px; scroll-margin-top:12px; }
.c-zastavky li.c-linka::before{ top:70%; }
.c-zastavky li.c-linka .c-meno{ font-size:13px; font-weight:700; color:var(--text-3); }
.c-zastavky li.c-prestup{ padding:14px 0; }
.c-zastavky li.c-prestup::before{ background:none; border-left:3px dotted var(--okraj-silny); width:0; opacity:1; }
.c-zastavky li.c-prestup .c-bod{ border-style:dashed; border-color:var(--text-3); background:var(--karta); }
.c-zastavky li.c-prestup .c-meno{ color:var(--text); font-weight:700; }

.c-cela{ padding:0 var(--m-5); }
.c-cela .useky{ margin-bottom:var(--m-2); }

.c-sledovat{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:calc(100% - 2 * var(--m-5)); height:52px; margin:var(--m-3) var(--m-5) var(--m-5);
  background:transparent; border:1.5px solid var(--akcent-popredie); border-radius:var(--r-m);
  color:var(--akcent-popredie); font:inherit; font-size:16px; font-weight:800; cursor:pointer;
  transition:background-color var(--t-stred), opacity var(--t-stred);
}
.c-sledovat svg{ width:22px; height:22px; }
@media (hover:hover){ .c-sledovat:not(:disabled):hover{ background:var(--akcent-jemny); } }
.c-sledovat:disabled{ border-color:var(--okraj-silny); color:var(--text-3); cursor:default; font-size:14px; }

/* vzdialenost na pesom useku - bily stitok na bodkovanej ciare */
.stitok-chodze{
  padding:4px 10px; border-radius:999px; pointer-events:none;
  background:#0A0A0B; border:2px solid #F5F5F7; color:#F5F5F7;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}

/* --- moznosti spojenia a ich rozbaleny detail --- */
.moznost{ border-top:1px solid var(--okraj); }
.moznost .odchod{ border-top:none; }
.moznost .dvojlinka{ flex-wrap:wrap; max-width:96px; row-gap:4px; }
.moznost .odchod[aria-expanded="true"]{ background:var(--plocha); }
.pesi-cela{ cursor:default; }
.pesi-ikona{
  width:38px; height:30px; flex:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--plocha); color:var(--text-2);
}
.pesi-ikona svg{ width:18px; height:18px; }

.cesta-detail{ background:var(--plocha); padding:2px var(--m-5) var(--m-4); }
.useky{ list-style:none; margin:0; padding:0; position:relative; }
.usek{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; position:relative; }
/* zvisla ciara, ktora spaja useky do jednej cesty */
.usek:not(:last-child)::before{
  content:""; position:absolute; left:18px; top:34px; bottom:-8px; width:2px;
  background:var(--plocha-2);
}
.usek.pesi:not(:last-child)::before{ background:none; border-left:2px dotted var(--okraj-silny); width:0; }
.u-znak{ width:38px; flex:none; display:flex; justify-content:center; color:var(--text-3); }
.u-znak svg{ width:18px; height:18px; margin-top:2px; }
.u-text{ flex:1; min-width:0; font-size:13.5px; color:var(--text-2); line-height:1.4; }
.u-text b{ display:block; font-size:14.5px; font-weight:700; color:var(--text); }
.u-text small{ display:block; font-size:12.5px; color:var(--text-3); margin:2px 0; }
.usek.bus{ cursor:pointer; border-radius:10px; margin:0 -8px; padding-left:8px; padding-right:8px; }
@media (hover:hover){ .usek.bus:hover{ background:var(--plocha-2); } }
.u-mapa{ color:var(--text-3); align-self:center; }
.u-mapa svg{ width:16px; height:16px; }

.v-oddiel{
  margin:0; padding:var(--m-5) var(--m-5) var(--m-2);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
}

.tlacidlo{
  width:100%; min-height:50px; padding:13px;
  background:var(--akcent); color:var(--akcent-text);
  border:none; border-radius:var(--r-m);
  font-size:16px; font-weight:800; cursor:pointer;
}
@media (hover:hover){ .tlacidlo:hover{ filter:brightness(1.08); } }

.dvojlinka{ display:flex; align-items:center; gap:4px; flex:none; }
.sipka{ width:12px; height:12px; color:var(--text-3); flex:none; }

.poznamka{ margin:0; padding:0 var(--m-5) var(--m-3); font-size:13px; line-height:1.5; color:var(--varovanie); }

.viac{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:15px var(--m-5);
  background:none; border:none; border-top:1px solid var(--okraj);
  font-size:14px; font-weight:700; color:var(--akcent-popredie); cursor:pointer;
}
@media (hover:hover){ .viac:hover{ background:var(--plocha); } }
.viac svg{ width:15px; height:15px; }

/* --- prazdne a chybove stavy --- */

.prazdne{ padding:var(--m-6) var(--m-5); text-align:center; }
.prazdne .p-ikona{
  width:52px; height:52px; margin:0 auto var(--m-4); border-radius:15px;
  background:var(--plocha); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
}
.prazdne .p-ikona svg{ width:24px; height:24px; }
.prazdne b{ display:block; font-size:16px; font-weight:700; margin-bottom:6px; }
.prazdne p{ margin:0 auto; max-width:30ch; font-size:14px; color:var(--text-2); line-height:1.55; }

/* --- kostra so shimmerom namiesto tociaceho sa kolieska --- */

.kostra{ padding:var(--m-4) var(--m-5); }
.kostra div{
  position:relative; overflow:hidden;
  height:52px; border-radius:var(--r-m); margin-bottom:10px;
  background:var(--plocha);
}
.kostra div::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform:translateX(-100%);
  animation:shimmer 1.4s ease-in-out infinite;
}
.kostra div:nth-child(2){ opacity:.7; } .kostra div:nth-child(3){ opacity:.45; }

/* ==================== platnost cestovnych poriadkov ================ */

.platnost-mapa{ display:none; }
.platnost-mapa.aktivne, .platnost-mapa.chyba{
  display:block;
  position:fixed; z-index:28; left:0; right:0; top:var(--hlavicka-v);
  padding:9px var(--m-4);
  font-size:13.5px; line-height:1.4; text-align:center;
  background:rgba(245,158,11,.14); color:#FBD38D;
  border-bottom:1px solid rgba(245,158,11,.3);
}
.platnost-mapa.chyba{ background:var(--akcent-jemny); color:var(--akcent-popredie); border-color:var(--akcent-okraj); }

/* ============================== oznam =============================== */

.oznam{
  position:fixed; z-index:40; left:50%;
  top:calc(var(--hlavicka-v) + var(--m-3));
  max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:9px;
  padding:11px 16px;
  background:var(--plocha-2); color:var(--text);
  border:1px solid var(--okraj-silny);
  border-radius:var(--r-plny); font-size:14px; font-weight:600;
  box-shadow:var(--tien);
  transform:translateX(-50%);
  animation:oznam var(--t-pomaly) var(--pruzina);
}
.oznam svg{ width:16px; height:16px; flex:none; color:var(--akcent-popredie); }
.skryte{ display:none !important; }

/* ====================== spodna navigacia (mobil) =================== */

.spodna-nav{ display:none; }

@media (max-width:860px){
  .spodna-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:35;
    display:flex; height:calc(var(--nav-v) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(14,15,18,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--okraj);
  }
  .spodna-nav a, .spodna-nav button{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    background:none; border:none; text-decoration:none; cursor:pointer;
    font-size:11px; font-weight:600; color:var(--text-3);
  }
  .spodna-nav svg{ width:22px; height:22px; }
  .spodna-nav [aria-current="page"]{ color:var(--akcent-popredie); }
  .spodna-nav a:active, .spodna-nav button:active{ transform:scale(.92); }
}

/* ============================= animacie ============================= */

/* postupne objavenie poloziek - --i nastavuje skript */
/* "backwards" namiesto "both": koncovy stav animacie sa po dobehnuti
   neudrzi, takze neprebije neskorsie efekty (hover, stlacenie).
   S "both" zostal transform:none aktivny natrvalo a ziadny hover
   s posunom ci zmensenim by nefungoval. */
.vstup{
  animation:vstup var(--t-pomaly) var(--easing) backwards;
  animation-delay:calc(var(--i, 0) * var(--stagger));
}

@keyframes vstup   { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes vysun   { from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes pulz    { 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes shimmer { to{ transform:translateX(100%); } }
@keyframes odpocet { 0%{ opacity:0; transform:translateY(60%); } 100%{ opacity:1; transform:none; } }
@keyframes hviezda { 0%{ transform:scale(.6); } 100%{ transform:scale(1); } }
@keyframes oznam   { from{ opacity:0; transform:translate(-50%,-10px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ===================== respektujeme obmedzenie pohybu ================ */

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .vstup{ animation-delay:0ms !important; }
}