/* ═══════════════════════════════════════════════════════════════
   app.css — shared design system (blue) for home, results, SEO pages
   ═══════════════════════════════════════════════════════════════ */
:root{
  --b1:#1a6fc4; --b2:#0f4a8a; --b3:#0c3d72; --b4:#3b8be0; --bl:#e8f1fb; --bl2:#f3f8fe;
  --amber:#fbbf24; --ok:#16a34a; --bad:#dc2626;
  --ink:#10233f; --mut:#5d7088; --line:#e1e9f4; --card:#fff;
  --r:18px; --sh:0 10px 30px rgba(15,74,138,.12); --sh2:0 3px 14px rgba(15,74,138,.09);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#eaf2fc 0,#f6f9fe 40%,#fff 100%);min-height:100vh;line-height:1.5}
a{color:var(--b1)} button,input,select{font-family:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}

/* ── top bar ─────────────────────────────── */
.hero{position:relative;overflow:hidden;color:#fff;padding-bottom:100px;
  background:linear-gradient(125deg,var(--b3) 0%,var(--b2) 38%,var(--b1) 78%,var(--b4) 100%)}
.hero.slim{padding-bottom:84px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 280px at 88% 8%,rgba(255,255,255,.22),transparent 70%),
             radial-gradient(380px 260px at 4% 95%,rgba(251,191,36,.25),transparent 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:34px;height:3px;opacity:.5;
  background:repeating-linear-gradient(90deg,#fff 0 22px,transparent 22px 44px);animation:road 1.6s linear infinite}
@keyframes road{to{background-position:-44px 0}}
.bar{position:relative;max-width:980px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.08rem;white-space:nowrap}
.brand .logo{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.2);font-size:1.15rem}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:.88rem;font-weight:600;padding:7px 12px;border-radius:99px;transition:background .15s}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.2);color:#fff}
.hero-in{position:relative;max-width:980px;margin:0 auto;padding:20px 16px 0}
.hero h1{font-size:2.3rem;line-height:1.12;margin:0 0 10px;font-weight:900;letter-spacing:-.5px;max-width:620px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{margin:0;font-size:1.04rem;opacity:.93;max-width:560px}
.crumbs{position:relative;max-width:980px;margin:0 auto;padding:0 16px;font-size:.8rem;opacity:.9}
.crumbs a{color:#fff;text-decoration:none;opacity:.85} .crumbs a:hover{opacity:1;text-decoration:underline} .crumbs span{opacity:.6;margin:0 6px}
.hero-bus{position:absolute;right:7%;bottom:48px;font-size:3.6rem;animation:float 3.6s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
@keyframes float{50%{transform:translateY(-10px)}}

/* ── floating search card ────────────────── */
.main{position:relative;max-width:980px;margin:-76px auto 0;padding:0 14px 24px}
.search{background:#fff;border-radius:24px;padding:18px;box-shadow:0 18px 50px rgba(15,74,138,.24);animation:up .5s ease both}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.route{display:grid;grid-template-columns:1fr 50px 1fr;gap:12px;align-items:end}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.lab{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--b1)}
.ac{position:relative}
.fld input{width:100%;height:54px;padding:0 14px;border:2px solid transparent;border-radius:15px;background:var(--bl2);
  font-size:1.02rem;font-weight:600;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.fld input::placeholder{color:#93a4ba;font-weight:500}
.fld input:focus{background:#fff;border-color:var(--b4);box-shadow:0 0 0 5px rgba(59,139,224,.18)}
.swap{height:54px;width:50px;border:0;border-radius:50%;cursor:pointer;color:#fff;font-size:1.3rem;
  background:linear-gradient(135deg,var(--b4),var(--b2));box-shadow:0 6px 16px rgba(26,111,196,.4);transition:transform .25s}
.swap:hover{transform:rotate(180deg) scale(1.06)}
.go{width:100%;margin-top:16px;height:58px;border:0;border-radius:16px;cursor:pointer;color:#fff;font-size:1.08rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.3px;
  background:linear-gradient(120deg,var(--b2) 0%,var(--b1) 60%,var(--b4) 100%);box-shadow:0 10px 24px rgba(26,111,196,.38);transition:transform .15s,box-shadow .15s}
.go:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(26,111,196,.46)} .go:active{transform:none}
.msg{padding:10px 4px 0;color:#b4233a;font-size:.92rem;font-weight:600} .msg:empty{display:none}
/* autocomplete dropdown */
.autocomplete-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  box-shadow:0 16px 36px rgba(15,74,138,.2);max-height:280px;overflow:auto;z-index:50;display:none}
.autocomplete-list.open{display:block}
.autocomplete-item{padding:11px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:.95rem;border-bottom:1px solid #f0f4fa}
.autocomplete-item:last-child{border-bottom:0}
.autocomplete-item:hover,.autocomplete-item.active{background:var(--bl);color:var(--b2)}
.autocomplete-match{background:rgba(26,111,196,.14);border-radius:3px;padding:0 1px;color:var(--b2)}
.autocomplete-empty{padding:16px;text-align:center;color:var(--mut);font-size:.9rem}
.ac-pin{font-size:.85rem}

/* ── sections ────────────────────────────── */
.sec{margin-top:28px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-h h2{font-size:1.15rem;margin:0;font-weight:800}
.link{background:none;border:0;color:var(--b1);font-weight:700;cursor:pointer;font-size:.85rem}
.rchips{display:flex;gap:8px;flex-wrap:wrap}
.rchip{border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:9px 15px;border-radius:99px;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .18s;box-shadow:var(--sh2)}
.rchip:hover{border-color:var(--b4);transform:translateY(-1px)}
.pops{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pop{display:flex;align-items:center;gap:12px;text-align:left;border:0;background:#fff;border-radius:18px;padding:14px;cursor:pointer;text-decoration:none;color:var(--ink);
  box-shadow:var(--sh2);transition:transform .18s,box-shadow .18s}
.pop:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,74,138,.18)}
.pi{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--b4),var(--b2))}
.pop:nth-child(3n+2) .pi{background:linear-gradient(135deg,#38bdf8,#0369a1)}
.pop:nth-child(3n+3) .pi{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.pt2{display:flex;flex-direction:column;min-width:0}.pt2 b{font-size:.95rem}.pt2 small{color:var(--mut);font-size:.76rem}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:30px}
.feat{background:linear-gradient(145deg,var(--bl),#fff);border:1.5px solid #d6e6f8;border-radius:18px;padding:16px}
.feat .fi{font-size:1.6rem}.feat h3{margin:8px 0 4px;font-size:1rem}.feat p{margin:0;font-size:.86rem;color:var(--mut)}
.citygrid{display:flex;flex-wrap:wrap;gap:8px}
.citygrid a{background:#fff;border:1.5px solid var(--line);color:var(--b2);text-decoration:none;font-weight:700;font-size:.86rem;padding:8px 14px;border-radius:99px;transition:all .15s}
.citygrid a:hover{background:var(--b1);border-color:var(--b1);color:#fff}

/* ── footer ──────────────────────────────── */
.foot{margin-top:44px;background:var(--b3);color:#b9cde6;padding:30px 0 20px;font-size:.88rem}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.foot h4{color:#fff;margin:0 0 10px;font-size:.95rem}
.foot a{display:block;color:#b9cde6;text-decoration:none;margin-bottom:5px}.foot a:hover{color:#fff}
.foot .copy{border-top:1px solid rgba(255,255,255,.15);margin-top:20px;padding-top:14px;text-align:center;font-size:.8rem;opacity:.85}
.note{font-size:.76rem;color:var(--mut);text-align:center;margin:22px 0 0}

/* ═════════ RESULTS PAGE ═════════ */
.rhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:22px 2px 12px}
.rhead h2{margin:0;font-size:1.25rem;font-weight:800}
.rhead small{color:var(--mut)}
.live{display:inline-flex;align-items:center;gap:6px;background:#e6f6ec;color:#15803d;font-size:.74rem;font-weight:800;padding:4px 10px;border-radius:99px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.3}}
.tools{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--sh2);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:14px}
.tg{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tg>span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin-right:2px}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--mut);padding:5px 12px;border-radius:99px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--b4);color:var(--b1)}
.chip.on{background:linear-gradient(120deg,var(--b2),var(--b1));border-color:transparent;color:#fff}
.sortsel{border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.85rem;font-weight:600;color:var(--ink);background:#fff}
.count{font-size:.84rem;color:var(--mut);margin:0 2px 10px}

/* ── BUS CARD ────────────────────────────── */
.bus{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:14px 18px 14px;margin-bottom:14px;
  box-shadow:var(--sh2);transition:box-shadow .2s,transform .2s,border-color .2s}
.bus:hover{box-shadow:var(--sh);border-color:#bcd5f2}
.bus.next{border-color:var(--b4);box-shadow:0 0 0 3px rgba(59,139,224,.18),var(--sh)}
.next-tag{position:absolute;top:-11px;left:18px;background:linear-gradient(120deg,var(--b2),var(--b4));color:#fff;font-size:.72rem;font-weight:800;padding:3px 12px;border-radius:99px;box-shadow:0 4px 10px rgba(26,111,196,.35)}
.bus-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.bus-no{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:1rem;color:var(--b2);letter-spacing:.3px}
.bus-no svg{color:var(--b1)}
.bus-type{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:4px 11px;border-radius:99px}
.t-ord{background:#eef2f7;color:#475569}.t-ac{background:#dbeafe;color:#1d4ed8}.t-vol{background:#fef3c7;color:#92400e}.t-sup{background:#fee2e2;color:#b91c1c}

.bus-main{display:grid;grid-template-columns:minmax(92px,1fr) minmax(120px,1.35fr) minmax(92px,1fr) auto;gap:6px 16px;align-items:center;
  grid-template-areas:"dep mid arr fare"}
.pt{display:flex;flex-direction:column;min-width:0}
.pt.dep{grid-area:dep}.pt.arr{grid-area:arr;text-align:right;align-items:flex-end}
.pt .lbl,.fare .lbl{font-size:.64rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.pt .tm{font-size:1.45rem;font-weight:900;letter-spacing:-.5px;line-height:1.15;color:var(--ink);white-space:nowrap}
.pt.dep .tm{color:var(--b2)}
.pt .st{font-size:.82rem;color:var(--mut);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.nd{font-size:.6rem;color:var(--bad);margin-left:2px;font-weight:800}
.mid{grid-area:mid;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.dur{font-size:.85rem;font-weight:800;color:var(--b1);min-height:1.2em}
.km{font-size:.78rem;color:var(--mut);font-weight:700;min-height:1.1em}
.line{display:block;width:100%;height:1px;background:#9ec3ea;margin:5px 0;position:relative}
.line::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid #9ec3ea;border-right:1px solid #9ec3ea;transform:rotate(45deg)}
.fare{grid-area:fare;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 14px;min-width:92px;border-radius:14px;
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #4ade80;box-shadow:0 6px 14px rgba(22,163,74,.22)}
.fare .lbl{color:#166534}
.fare .rs{font-size:1.55rem;font-weight:900;color:#14532d;letter-spacing:-.5px;line-height:1.1}
.bus-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn-via{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;color:#fff;font-weight:800;font-size:.85rem;padding:9px 16px;border-radius:12px;
  background:linear-gradient(120deg,var(--b2),var(--b1));box-shadow:0 6px 14px rgba(26,111,196,.28);transition:transform .15s}
.btn-via:hover{transform:translateY(-1px)}
.btn-via .chev{transition:transform .2s}.btn-via.open .chev{transform:rotate(180deg)}
.btn-ghost{display:inline-flex;align-items:center;border:1.5px solid var(--line);background:#fff;color:var(--b2);font-weight:700;font-size:.85rem;padding:8px 14px;border-radius:12px;cursor:pointer;text-decoration:none;transition:all .15s}
.btn-ghost:hover{border-color:var(--b4);background:var(--bl)}

/* inline via panel */
.via{margin-top:12px;border-top:1.5px dashed var(--line);padding-top:12px;animation:up .25s ease both}
.via-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:.88rem;margin-bottom:8px}
.via-head .warn{color:#b45309;font-size:.78rem;font-weight:600}
.via-load{display:flex;gap:10px;align-items:center;color:var(--mut);font-size:.9rem;padding:8px 0}
.spin{width:18px;height:18px;border:3px solid var(--bl);border-top-color:var(--b1);border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.via{background:linear-gradient(180deg,var(--bl2),#fff);border:1.5px solid var(--line);border-radius:16px;padding:14px 10px 16px;margin-top:14px}
.via-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;margin-bottom:12px;font-size:.88rem}
.via-title{font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--b1)}
.via-head b{color:var(--ink)}
.via-head .warn{color:#b45309;font-size:.76rem;font-weight:600}
.vlist{list-style:none;margin:0 auto;padding:4px 0;max-height:400px;overflow:auto;display:flex;flex-direction:column;align-items:center;position:relative;scrollbar-width:thin}
.vlist::before{content:"";position:absolute;left:50%;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,#bcd5f2,#7fb0e6,#bcd5f2);transform:translateX(-50%)}
.vlist li{position:relative;z-index:1;margin:5px 0;display:flex;justify-content:center;width:100%}
.vcard{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-width:230px;max-width:92%;padding:8px 18px;background:#fff;border:1.5px solid #cfe0f4;border-radius:99px;box-shadow:0 2px 8px rgba(15,74,138,.08);text-align:center}
.vcard .vt{font-size:.78rem;font-weight:800;color:var(--b1);background:var(--bl);padding:2px 9px;border-radius:99px;white-space:nowrap}
.vcard .vn{font-size:.92rem;font-weight:700;color:var(--ink)}
.vlist li.out{opacity:.45}.vlist li.out .vcard{box-shadow:none;background:#f6f9fd}
.vlist li.mid .vcard{border-color:#8fbdee}
.vlist li.board .vcard{border-color:#22c55e;background:#f0fdf4;box-shadow:0 4px 12px rgba(34,197,94,.25)}
.vlist li.alight .vcard{border-color:#ef4444;background:#fef2f2;box-shadow:0 4px 12px rgba(239,68,68,.22)}
.vlist li.board .vt{background:#bbf7d0;color:#166534}.vlist li.alight .vt{background:#fecaca;color:#991b1b}
.tag{font-style:normal;font-size:.64rem;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:99px}
.tb{background:#16a34a;color:#fff}.ta{background:#dc2626;color:#fff}
.via-load{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--mut);font-size:.9rem;padding:8px 0}
.spin{width:18px;height:18px;border:3px solid var(--bl);border-top-color:var(--b1);border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* next bus bar + departed */
.nextbar{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,var(--b2),var(--b1));color:#fff;border-radius:16px;padding:12px 16px;margin-bottom:14px;box-shadow:0 10px 24px rgba(26,111,196,.3)}
.nextbar.none{background:linear-gradient(120deg,#334e6b,#56708f)}
.nb-ico{font-size:1.6rem}.nb-txt{display:flex;flex-direction:column;min-width:0;flex:1}.nb-txt b{font-size:1rem}.nb-txt span{font-size:.82rem;opacity:.92}
.nb-go{border:0;background:#fff;color:var(--b2);font-weight:800;font-size:.82rem;padding:8px 14px;border-radius:99px;cursor:pointer}
.bus.past{opacity:.6}.bus.past .pt.dep .tm{color:var(--mut)}.bus.past:hover{opacity:1}
.bus.next{scroll-margin-top:90px}
/* filter toggle (mobile/tablet) */


/* skeleton + states */
.sk{display:inline-block;background:linear-gradient(90deg,#e5edf8 25%,#f3f7fc 50%,#e5edf8 75%);background-size:200% 100%;animation:shim 1.2s infinite;border-radius:6px;min-width:46px;height:1em;vertical-align:middle}
.sk-s{min-width:34px;height:.8em}
@keyframes shim{to{background-position:-200% 0}}
.skel{padding:18px}.sk-line{display:block;height:14px}.w30{width:30%}.w60{width:60%;margin-top:14px}.sk-block{display:block;height:46px;margin-top:14px;width:100%}
.empty{text-align:center;background:#fff;border-radius:20px;padding:40px 20px;box-shadow:var(--sh2)}
.empty-ico{font-size:2.4rem}.empty h3{margin:8px 0 4px}.empty p{margin:0;color:var(--mut)}
.more{display:block;margin:6px auto 0;border:0;background:linear-gradient(120deg,var(--b2),var(--b1));color:#fff;font-weight:800;padding:12px 28px;border-radius:14px;cursor:pointer;box-shadow:0 8px 18px rgba(26,111,196,.3)}
.empty .more{margin-top:14px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--b3);color:#fff;padding:10px 18px;border-radius:99px;font-size:.88rem;font-weight:700;opacity:0;pointer-events:none;transition:all .25s;z-index:99}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── responsive ──────────────────────────── */
@media(max-width:760px){
  .hero h1{font-size:1.7rem}.hero-bus{font-size:2.5rem;right:5%;bottom:52px}
  .nav a{padding:6px 9px;font-size:.8rem}
  .route{grid-template-columns:1fr 52px;gap:10px}
  .f-from{grid-column:1;grid-row:1}.f-to{grid-column:1;grid-row:2}
  .swap{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;height:52px;width:52px}
  .swap span{display:inline-block;transform:rotate(90deg)}
  .bus{padding:14px 14px}
  .bus-main{grid-template-columns:1fr minmax(84px,1.1fr) 1fr;grid-template-areas:"dep mid arr" "dep mid fare";gap:4px 8px}
  .fare{flex-direction:row;gap:8px;justify-content:center;min-width:0;padding:5px 10px}
  .fare .rs{font-size:1.2rem}
  .vcard{min-width:0;width:92%}
  .pt .tm{font-size:1.15rem}
  .foot .cols{grid-template-columns:1fr}
}
@media(max-width:420px){.nav a:nth-child(n+4){display:none}.pt .tm{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═════ v2 overrides ═════ */
/* one thin line between departure and arrival */
.mid{gap:5px}
.line{display:block;width:100%;height:1px;background:#9ec3ea;border-radius:1px;position:relative;margin:2px 0}
.line::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid #9ec3ea;border-right:1px solid #9ec3ea;transform:rotate(45deg)}
.bus-ico,.line .dot,.line .bar{display:none}

/* highlighted ticket price */
.fare{border-left:0;padding-left:0;min-width:0}
.fare .lbl{color:#15803d}
.fare .rs{display:inline-block;margin-top:2px;padding:6px 14px;border-radius:12px;font-size:1.35rem;font-weight:900;letter-spacing:-.3px;line-height:1.2;color:#fff;
  background:linear-gradient(135deg,#16a34a,#0f7a37);box-shadow:0 6px 14px rgba(22,163,74,.32)}
.fare .rs .sk{background:rgba(255,255,255,.45)}

/* departed / next bus */
.bus.past{opacity:.6;background:#fafcff}
.bus.past .pt.dep .tm{color:var(--mut)}
.bus.past .pt.dep .lbl{color:#b45309}
.bus.past:hover{opacity:1}
.bus.next{background:linear-gradient(180deg,#f2f8ff,#fff 60%);border-color:var(--b1);box-shadow:0 0 0 3px rgba(26,111,196,.22),var(--sh)}
.nextbar{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 16px;border-radius:16px;color:#fff;
  background:linear-gradient(120deg,var(--b3),var(--b1));box-shadow:0 10px 24px rgba(26,111,196,.3);animation:up .35s ease both}
.nextbar.none{background:linear-gradient(120deg,#334155,#475569)}
.nb-ico{font-size:1.6rem}
.nb-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.nb-txt b{font-size:1.02rem}.nb-txt span{font-size:.82rem;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-go{border:0;cursor:pointer;background:#fff;color:var(--b2);font-weight:800;font-size:.84rem;padding:8px 14px;border-radius:99px;flex:none}

/* via dropdown — centred timeline */
.via{margin-top:14px;padding:16px 10px 12px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--bl2),#fff);border:1.5px solid #d6e6f8}
.via-head{flex-direction:column;align-items:center;text-align:center;gap:2px;margin-bottom:14px}
.via-title{font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--b1)}
.via-head b{font-size:.95rem;color:var(--b2)}
.vlist{position:relative;display:flex;flex-direction:column;align-items:center;max-height:400px;overflow:auto;padding:4px 0 6px;scrollbar-width:thin}
.vlist::before{content:"";position:absolute;left:50%;top:18px;bottom:18px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,#bcd5f2,var(--b4),#bcd5f2)}
.vlist li{display:flex;justify-content:center;width:100%;min-height:0;margin:5px 0;position:relative;z-index:1;grid-template-columns:none}
.vcard{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-width:210px;max-width:92%;padding:8px 16px;border-radius:14px;
  background:#fff;border:1.5px solid #cfe0f4;box-shadow:0 3px 10px rgba(15,74,138,.08);text-align:center}
.vcard .vt{font-size:.78rem;font-weight:800;color:var(--b1);background:var(--bl);padding:2px 9px;border-radius:99px;text-align:center;padding-right:9px}
.vcard .vn{font-size:.93rem;font-weight:700;color:var(--ink);padding:0}
.vlist li.out .vcard{opacity:.55;border-style:dashed;box-shadow:none}
.vlist li.mid .vcard{border-color:#9ec3ea}
.vlist li.board .vcard{border-color:#16a34a;background:#f0fdf4;box-shadow:0 4px 14px rgba(22,163,74,.2)}
.vlist li.alight .vcard{border-color:#dc2626;background:#fef2f2;box-shadow:0 4px 14px rgba(220,38,38,.18)}
.vlist li.board .vcard .vt{background:#dcfce7;color:#166534}.vlist li.alight .vcard .vt{background:#fee2e2;color:#991b1b}
.vlist li.board,.vlist li.alight{background:none;border-radius:0}
.vlist .vd{display:none}
.tag{margin-left:0}
.via-load{justify-content:center}
.bus-f{justify-content:center}
.btn-via{padding:10px 26px}

/* results header (no buttons now) */
.rhead{justify-content:flex-start}

/* filters: hidden by default on mobile + tablet, open with button */
.ftoggle{display:none;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;color:var(--b2);font-weight:800;font-size:.9rem;padding:10px 16px;border-radius:14px;cursor:pointer;box-shadow:var(--sh2);margin-bottom:12px}
.ftoggle .badge{display:none;min-width:20px;height:20px;border-radius:99px;background:var(--b1);color:#fff;font-size:.72rem;align-items:center;justify-content:center;padding:0 6px}
.ftoggle .badge.on{display:inline-flex}
.ftoggle .chev{transition:transform .2s}.ftoggle.open .chev{transform:rotate(180deg)}
@media(max-width:1023px){
  .ftoggle{display:inline-flex}
  .tools{display:none}
  .tools.open{display:flex;animation:up .25s ease both}
}

/* SEO text blocks */
.prose{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh2);margin-top:26px}
.prose h2{font-size:1.2rem;margin:0 0 8px}.prose h3{font-size:1.02rem;margin:16px 0 6px}
.prose p{margin:0 0 10px;color:#2b4465}.prose ul{padding-left:20px;color:#2b4465}
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.guides a{display:block;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--b2);font-weight:700;font-size:.9rem;transition:all .15s}
.guides a:hover{border-color:var(--b4);background:var(--bl);transform:translateY(-2px)}
.guides a small{display:block;color:var(--mut);font-weight:500;font-size:.78rem;margin-top:2px}
.foot .kw{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)}
.foot .kw a{display:inline;margin:0;font-size:.8rem}
@media(max-width:760px){.nextbar{padding:10px 12px}.nb-go{padding:7px 11px}.vcard{min-width:0;width:88%}}

/* ═════ v3: result card + via stops redesign ═════ */
.bus{padding:0;overflow:visible;border:1px solid #d9e6f5;border-radius:20px;background:#fff;box-shadow:0 2px 10px rgba(15,74,138,.07);--acc:#64748b}
.bus[data-kind="t-ac"]{--acc:#2563eb}.bus[data-kind="t-vol"]{--acc:#d97706}.bus[data-kind="t-sup"]{--acc:#dc2626}.bus[data-kind="t-ord"]{--acc:#0f4a8a}
.bus::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 6px 6px 0;background:var(--acc)}
.bus:hover{box-shadow:0 12px 30px rgba(15,74,138,.15);border-color:#b7d1ee}
/* no fading at all */
.bus.past,.bus.past:hover{opacity:1;background:#fff}
.bus.past .pt.dep .tm{color:var(--b2)}
.bus.past .pt.dep .lbl{color:#b45309}
.bus.past .pt.dep .lbl::after{content:" • left";font-weight:700;text-transform:none;letter-spacing:0}
.bus.next{background:#fff;border:2px solid var(--b1);box-shadow:0 0 0 4px rgba(26,111,196,.14),0 14px 34px rgba(26,111,196,.2)}
.bus.next::before{background:linear-gradient(180deg,var(--b4),var(--b2))}
.next-tag{top:-13px;left:22px;font-size:.74rem;padding:4px 14px}

.bus-h{margin:0;padding:12px 20px 12px 22px;border-bottom:1px solid #e8f0fa;border-radius:20px 20px 0 0;background:linear-gradient(180deg,#f6faff,#fff)}
.bus-no{font-size:1.02rem;color:var(--ink);letter-spacing:.4px}
.bus-no svg{color:var(--acc)}
.bus-type{border:1.5px solid currentColor;background:#fff}
.t-ord{color:#475569;background:#f1f5f9}.t-ac{color:#1d4ed8;background:#eff6ff}.t-vol{color:#b45309;background:#fffbeb}.t-sup{color:#b91c1c;background:#fef2f2}

.bus-main{padding:16px 20px 14px 22px;gap:6px 18px;align-items:center}
.pt .tm{font-size:1.65rem;letter-spacing:-.6px}
.pt .st{font-size:.86rem;color:#4a5f7a;font-weight:700}
.pt .lbl{color:#7a8ca3}
.mid{gap:6px}
.dur{font-size:.92rem;font-weight:800;color:var(--b2);background:var(--bl);padding:2px 12px;border-radius:99px;min-height:0}
.dur .sk{min-width:38px}
.line{height:2px;background:linear-gradient(90deg,var(--b4),var(--b2));opacity:.55;border-radius:2px}
.line::after{right:-1px;top:-3px;border-color:var(--b2);width:7px;height:7px;border-width:2px}
.km{font-size:.8rem;color:#4a5f7a;font-weight:700}

.fare{padding-left:18px;border-left:1px solid #e1ebf7;justify-content:center;align-items:center;min-width:92px}
.fare .lbl{color:#15803d}
.fare .rs{margin-top:3px;padding:7px 14px;font-size:1.4rem;border-radius:13px}

.bus-f{padding:0 20px 14px 22px;margin:0;justify-content:center}
.btn-via{width:100%;max-width:340px;justify-content:center;padding:11px 18px;font-size:.92rem;border-radius:13px}
.btn-via.open{background:#fff;color:var(--b2);border:1.5px solid var(--b1);box-shadow:none}

/* ── via panel ── */
.via{margin:0;padding:18px 14px 16px;border:0;border-top:1px solid #e1ebf7;border-radius:0 0 20px 20px;background:linear-gradient(180deg,#f3f8fe,#fff 70%)}
.via-head{margin-bottom:12px}
.via-title{font-size:.7rem;letter-spacing:1.2px}
.via-head b{font-size:1rem}
.via-sum{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 12px;max-width:520px;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid #d9e6f5;box-shadow:0 3px 10px rgba(15,74,138,.06)}
.via-sum>span{display:flex;flex-direction:column;align-items:center;min-width:90px;line-height:1.25}
.via-sum small{font-size:.64rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.via-sum b{font-size:.98rem;color:var(--ink)}.via-sum i{font-style:normal;font-size:.8rem;font-weight:800;color:var(--b1)}
.via-sum .arrow{min-width:0;font-size:1.3rem;color:var(--b1);font-weight:800}
.via-key{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:12px;font-size:.76rem;font-weight:700;color:#4a5f7a}
.via-key span{display:inline-flex;align-items:center;gap:6px}
.via-key i{width:22px;height:6px;border-radius:4px;display:inline-block}.via-key .k1{background:var(--b1)}.via-key .k2{background:#b8c6d8}

.vlist{position:static;display:flex;flex-direction:column;align-items:center;max-height:440px;overflow:auto;padding:6px 4px 8px;scrollbar-width:thin;scrollbar-color:#b7d1ee transparent}
.vlist::before{display:none}
.vlist li{display:flex;flex-direction:column;align-items:center;width:100%;margin:0;position:relative;z-index:auto}
.vlist li:not(:last-child)::after{content:"";width:3px;height:16px;border-radius:2px;background:#c3cfdf}
.vlist li.seg::after{background:var(--b1)}
.vcard{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;min-width:0;padding:10px 14px;border-radius:15px;background:#fff;border:1.5px solid #cfdcec;box-shadow:0 2px 8px rgba(15,74,138,.06);text-align:left;opacity:1;flex-wrap:nowrap;justify-content:flex-start}
.vno{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.74rem;font-weight:800;background:#e9eff7;color:#3b4d66}
.vtx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.vcard .vn{font-size:.97rem;font-weight:800;color:var(--ink);padding:0;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vcard .vt{flex:none;font-size:.86rem;font-weight:800;color:var(--b2);background:var(--bl);padding:4px 11px;border-radius:99px}
.tag{font-style:normal;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:99px;margin:0}
.tn{background:#eef2f7;color:#53657d}
/* journey stops */
.vlist li.mid .vcard{border-color:#8fb8e6;background:#f5faff}
.vlist li.mid .vno{background:var(--b1);color:#fff}
.vlist li.board .vcard{border-color:#16a34a;background:#f0fdf4;box-shadow:0 6px 16px rgba(22,163,74,.18)}
.vlist li.board .vno{background:#16a34a;color:#fff}.vlist li.board .vt{background:#dcfce7;color:#166534}
.vlist li.alight .vcard{border-color:#dc2626;background:#fef2f2;box-shadow:0 6px 16px rgba(220,38,38,.16)}
.vlist li.alight .vno{background:#dc2626;color:#fff}.vlist li.alight .vt{background:#fee2e2;color:#991b1b}
/* stops outside the journey: fully readable, just calmer */
.vlist li.out .vcard{opacity:1;border-style:solid;border-color:#d3dde9;background:#f7f9fc;box-shadow:none}
.vlist li.out .vn{color:#2b4465}.vlist li.out .vt{background:#e9eff7;color:#3b4d66}
.vlist li.board,.vlist li.alight{background:none}

.empty,.nextbar{border-radius:18px}
@media(max-width:760px){
  .bus-h{padding:11px 14px 11px 18px}
  .bus-main{padding:14px 14px 12px 18px;gap:4px 8px;grid-template-columns:1fr minmax(78px,1fr) 1fr;grid-template-areas:"dep mid arr" "fare fare fare"}
  .fare{border-left:0;border-top:1px dashed #d3e1f2;margin-top:8px;padding:10px 0 0;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
  .fare .lbl{font-size:.7rem}
  .pt .tm{font-size:1.2rem}
  .bus-f{padding:0 14px 14px 18px}.btn-via{max-width:none}
  .vcard{padding:9px 11px;gap:9px}.vcard .vn{font-size:.92rem}.vno{width:24px;height:24px}
  .via{padding:16px 8px 14px}
}

/* ═════ v4: dotted route line + premium Via Stops ═════ */
.line{height:4px;background:radial-gradient(circle,#3b8be0 1.5px,transparent 2px) 0 50%/9px 4px repeat-x;opacity:1;border-radius:0}
.line::after{display:none}

.via{padding:14px 12px 14px;background:#f2f7fd;border-top:1px solid #dbe7f6}
.vx{animation:vxIn .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes vxIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* journey hero */
.vx-hero{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:16px 18px;border-radius:20px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#0c3d72 0%,#1a6fc4 60%,#3b8be0 100%);box-shadow:0 14px 30px rgba(26,111,196,.35)}
.vx-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(220px 120px at 100% 0,rgba(255,255,255,.25),transparent 70%),radial-gradient(180px 100px at 0 100%,rgba(251,191,36,.28),transparent 70%);pointer-events:none}
.vx-end{position:relative;display:flex;flex-direction:column;min-width:0}
.vx-end.r{text-align:right;align-items:flex-end}
.vx-end small{font-size:.64rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.8}
.vx-end b{font-size:1.1rem;font-weight:900;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vx-end span{margin-top:3px;font-size:.95rem;font-weight:800;color:#fde68a}
.vx-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:96px}
.vx-dur{font-size:.84rem;font-weight:900;background:rgba(255,255,255,.2);padding:3px 12px;border-radius:99px;backdrop-filter:blur(4px)}
.vx-dots{display:block;width:100%;height:4px;background:radial-gradient(circle,#fff 1.5px,transparent 2px) 0 50%/9px 4px repeat-x}
.vx-cnt{font-size:.72rem;font-weight:700;opacity:.9;white-space:nowrap}
.vx-note{margin:12px 4px 8px;font-size:.84rem;color:#4a5f7a;text-align:center}.vx-note b{color:var(--b2)}
.vx-warn{margin:0 4px 8px;padding:8px 12px;border-radius:12px;background:#fffbeb;color:#92400e;font-size:.8rem;font-weight:600;text-align:center}

/* timeline */
.vx-list{list-style:none;margin:0;padding:6px 4px 4px;max-height:430px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b7d1ee transparent;background:#fff;border-radius:18px;border:1px solid #dbe7f6}
.vx-row{position:relative;display:grid;grid-template-columns:82px 30px 1fr auto;align-items:center;column-gap:8px;min-height:54px;padding:6px 12px 6px 6px;border-radius:12px;animation:vxRow .35s ease both;animation-delay:calc(var(--d) * 30ms)}
@keyframes vxRow{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.vx-time{text-align:right;font-size:.86rem;font-weight:800;color:#3b4d66;white-space:nowrap}
.vx-node{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.vx-node::before,.vx-node::after{content:"";position:absolute;left:50%;width:2px;transform:translateX(-50%);background:#ccd7e5}
.vx-node::before{top:-6px;bottom:50%}.vx-node::after{top:50%;bottom:-6px}
.vx-row:first-child .vx-node::before,.vx-row:last-child .vx-node::after{display:none}
.vx-row.up .vx-node::before,.vx-row.dn .vx-node::after{width:5px;background:linear-gradient(180deg,#3b8be0,#1a6fc4)}
.vx-node i{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid #9fb0c6}
.vx-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.vx-body b{font-size:.98rem;font-weight:700;color:#2b4465}
.vx-el{font-size:.74rem;font-weight:800;color:var(--b1);background:var(--bl);padding:3px 9px;border-radius:99px;white-space:nowrap}
.vx-badge{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap}
.vx-badge.o{background:#eef2f7;color:#5b6d85}
.vx-badge.b{background:linear-gradient(120deg,#16a34a,#0f7a37);color:#fff;box-shadow:0 3px 8px rgba(22,163,74,.35)}
.vx-badge.a{background:linear-gradient(120deg,#ef4444,#b91c1c);color:#fff;box-shadow:0 3px 8px rgba(220,38,38,.35)}
/* journey stops */
.vx-row.mid .vx-node i{background:var(--b1);border-color:#fff;box-shadow:0 0 0 2px var(--b1)}
.vx-row.mid .vx-time{color:var(--b2)}.vx-row.mid .vx-body b{color:var(--ink);font-weight:800}
.vx-row.board,.vx-row.alight{min-height:62px}
.vx-row.board{background:linear-gradient(90deg,#f0fdf4,#fff)}.vx-row.alight{background:linear-gradient(90deg,#fef2f2,#fff)}
.vx-row.board .vx-node i,.vx-row.alight .vx-node i{width:20px;height:20px;border:4px solid #fff}
.vx-row.board .vx-node i{background:#16a34a;box-shadow:0 0 0 3px #16a34a,0 0 0 8px rgba(22,163,74,.18)}
.vx-row.alight .vx-node i{background:#dc2626;box-shadow:0 0 0 3px #dc2626,0 0 0 8px rgba(220,38,38,.16)}
.vx-row.board .vx-body b,.vx-row.alight .vx-body b{font-size:1.08rem;font-weight:900;color:var(--ink)}
.vx-row.board .vx-time,.vx-row.alight .vx-time{font-size:.95rem;color:var(--ink)}
/* stops outside the journey: calm but fully readable */
.vx-row.out .vx-body b{color:#3b4d66;font-weight:600}
@media(max-width:760px){
  .vx-hero{padding:14px 14px;gap:6px}.vx-end b{font-size:.98rem}.vx-mid{min-width:80px}
  .vx-row{grid-template-columns:68px 26px 1fr;column-gap:6px;padding-right:8px}
  .vx-el{grid-column:3;justify-self:start;margin-top:-2px}
  .vx-body b{font-size:.92rem}.vx-time{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){.vx,.vx-row{animation:none!important}}

/* v5: simpler via stops */
.vx-list{position:relative}
.vx-el,.vx-hero{display:none!important}
.vx-note{margin-top:0}

/* ═════ v6: depot, Seats button + seat map, language switcher ═════ */
.bus-meta{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.depot-pill{display:inline-flex;align-items:center;gap:5px;max-width:170px;padding:4px 10px;border-radius:99px;background:#f1f6fc;border:1px solid #d6e4f5;color:#34506f;font-size:.74rem;font-weight:700}
.depot-pill svg{flex:none;color:var(--b1)}.depot-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bus-f{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-via,.btn-seat{flex:1 1 150px;max-width:230px;width:auto;justify-content:center;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;font-size:.92rem;font-weight:800;border-radius:13px;cursor:pointer}
.btn-seat{border:1.5px solid var(--b1);background:#fff;color:var(--b2);box-shadow:none;transition:all .15s}
.btn-seat:hover{background:var(--bl)}
.btn-seat.open{background:linear-gradient(120deg,var(--b2),var(--b1));color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(26,111,196,.28)}
.btn-seat .chev{transition:transform .2s}.btn-seat.open .chev{transform:rotate(180deg)}

.st{animation:vxIn .3s ease both}
.st-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;max-width:380px;margin:0 auto 12px}
.st-head .via-title{display:block;text-align:left}
.st-legend{display:flex;gap:14px;margin-top:6px;font-size:.78rem;font-weight:700;color:#4a5f7a}
.st-legend span{display:inline-flex;align-items:center;gap:6px}
.st-legend .lg{width:14px;height:14px;border-radius:5px;border:2px solid #7a4fc4;background:#fff;display:inline-block}
.st-legend .lg.sel{background:#fde8b0;border-color:#e0a82e}
.st-wheel{color:#2f6fb5;opacity:.9;flex:none}
.st-grid{max-width:380px;margin:0 auto;padding:16px 14px;display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid #dbe7f6;border-radius:18px;box-shadow:0 3px 10px rgba(15,74,138,.06)}
.st-row{display:grid;grid-template-columns:repeat(5,1fr);justify-items:center;align-items:center}
.st-gap{display:block;width:40px;height:40px}
.seat{position:relative;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;color:#7a4fc4;transition:transform .12s}
.seat:hover{transform:translateY(-2px)}
.seat svg{display:block;width:100%;height:100%;fill:#fff;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.seat b{position:absolute;left:0;right:0;top:9px;text-align:center;font-size:.72rem;font-weight:800;color:#1b1f4a;pointer-events:none}
.seat.sel{color:#e0a82e}.seat.sel svg{fill:#fde8b0}
.seat:focus-visible{outline:2px solid var(--b1);outline-offset:2px;border-radius:8px}
.st-sum{max-width:380px;margin:12px auto 0;display:flex;flex-direction:column;gap:8px;align-items:stretch;position:relative}
.st-hint{text-align:center;font-size:.86rem;color:var(--mut);padding:6px}
.st-sel{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:.8rem;font-weight:700;color:#4a5f7a}
.st-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.st-chips em{font-style:normal;min-width:34px;text-align:center;padding:4px 10px;border-radius:99px;background:#fde8b0;color:#7a5200;font-weight:800;font-size:.85rem}
.st-tot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:14px;background:var(--bl2);border:1px solid #d6e6f8;font-weight:700;color:#2b4465}
.st-tot b{padding:5px 14px;border-radius:11px;color:#fff;font-size:1.15rem;background:linear-gradient(135deg,#16a34a,#0f7a37)}
.st-book{display:block;text-align:center;padding:12px;border-radius:13px;color:#fff;text-decoration:none;font-weight:800;background:linear-gradient(120deg,var(--b2),var(--b1));box-shadow:0 8px 18px rgba(26,111,196,.3)}
.st-max{position:absolute;top:-34px;left:50%;transform:translateX(-50%);background:#b91c1c;color:#fff;font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:99px;white-space:nowrap}
.st-note{max-width:380px;margin:12px auto 0;text-align:center;font-size:.76rem;color:var(--mut);line-height:1.45}

.lang{display:flex;gap:3px;background:rgba(255,255,255,.2);border-radius:99px;padding:3px;flex:none}
.lang button{border:0;background:transparent;color:#fff;font-size:.8rem;font-weight:800;padding:5px 11px;border-radius:99px;cursor:pointer;font-family:inherit;line-height:1.2}
.lang button.on{background:#fff;color:var(--b2)}
.bar{flex-wrap:wrap}
@media(max-width:760px){
  .bar{padding-bottom:6px}.nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{white-space:nowrap}
  .bus-meta{gap:6px}.depot-pill{max-width:120px;padding:4px 8px}
  .btn-via,.btn-seat{flex:1 1 130px;max-width:none;padding:11px 10px}
  .st-gap,.seat{width:34px;height:34px}.seat b{top:7px;font-size:.66rem}
}


/* ═════ v7: horizontal seat map, depot first, hard-hidden filters, fare box ═════ */
.st-head{max-width:none;display:block;margin:0 0 6px;text-align:center}
.st-head .via-title{display:block;text-align:center}
.st-legend{justify-content:center;flex-wrap:wrap;margin-top:8px}
.st-legend .lg.dr{border-radius:50%;background:#1a6fc4;border-color:#0c3d72}
.st-legend .lg.ex{border:2px dashed #e08a2e;background:#fff7e6}
.st-scroll{overflow-x:auto;padding:12px 4px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.st-bus{--cell:42px;position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));gap:6px;width:max-content;margin:0 auto;
  padding:20px 22px 20px 38px;background:linear-gradient(180deg,#fff,#f4f8fd);border:2px solid #c9dcf2;border-radius:48px 16px 16px 48px;box-shadow:inset 0 0 0 5px #fff,0 6px 16px rgba(15,74,138,.08)}
.st-front{position:absolute;left:10px;top:16%;bottom:16%;width:7px;border-radius:6px;background:linear-gradient(180deg,#9ec3ea,#5a9be0)}
.st-bus .seat{width:var(--cell);height:var(--cell);justify-self:center;align-self:center}
.st-bus .seat svg{transform:rotate(90deg)}
.st-bus .seat b{top:50%;transform:translateY(-50%);left:-1px;right:1px;font-size:.72rem}
.st-bus .seat.cond::after{content:"C";position:absolute;top:-5px;right:-3px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:.58rem;font-weight:800;color:#fff;background:#0f4a8a}
.drv{position:relative;display:flex;align-items:center;justify-content:center}
.drv-ico{width:var(--cell);height:var(--cell);border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 30% 25%,#4b9bf0,#0c3d72);
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(26,111,196,.4),0 8px 18px rgba(26,111,196,.5);animation:drvPulse 2.2s ease-in-out infinite}
.drv-ico svg{width:72%;height:72%}
.drv em{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:#0c3d72;padding:2px 8px;border-radius:99px;white-space:nowrap;z-index:2}
@keyframes drvPulse{50%{box-shadow:0 0 0 3px #fff,0 0 0 10px rgba(26,111,196,.18),0 8px 18px rgba(26,111,196,.5)}}
.door{display:flex;align-items:center;justify-content:center;border:2px dashed #e08a2e;border-radius:10px;background:repeating-linear-gradient(135deg,#fff7e6 0 8px,#ffefd0 8px 16px)}
.door em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#b45309;writing-mode:vertical-rl;transform:rotate(180deg)}
.st-dir{text-align:center;font-size:.72rem;font-weight:700;color:var(--mut);margin-top:2px}

/* depot first, then bus type (top right) */
.bus-meta{flex-wrap:nowrap}
.depot-pill{order:-1;max-width:210px}
@media(max-width:560px){.bus-h{align-items:flex-start}.bus-meta{flex-direction:column;align-items:flex-end;gap:5px}.depot-pill{max-width:190px}}

/* filters: always closed on mobile + tablet until the Filters button is pressed */
@media(max-width:1023px){.tools:not(.open){display:none!important}.ftoggle{display:inline-flex!important}}
@media(min-width:1024px){.ftoggle{display:none!important}.tools{display:flex!important}}

/* fare box — mobile & tablet */
@media(max-width:1023px){
  .bus-main{grid-template-columns:minmax(0,1fr) minmax(90px,1.1fr) minmax(0,1fr);grid-template-areas:"dep mid arr" "fare fare fare";gap:6px 10px}
  .fare{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;width:100%;min-width:0;margin-top:10px;padding:11px 16px;
    border:1.5px solid #86efac;border-left:5px solid #16a34a;border-radius:14px;background:linear-gradient(100deg,#f0fdf4,#dcfce7)}
  .fare .lbl{display:flex;align-items:center;gap:9px;margin:0;font-size:.8rem;letter-spacing:.6px;color:#166534}
  .fare .lbl::before{content:"₹";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#16a34a;color:#fff;font-size:.9rem;font-weight:800;letter-spacing:0}
  .fare .rs{padding:0;margin:0;background:none;box-shadow:none;color:#15803d;font-size:1.65rem;border-radius:0}
  .fare .rs .sk{background:rgba(22,163,74,.2)}
}
@media(max-width:760px){.st-bus{--cell:36px;padding:18px 16px 18px 32px}}

/* ═════ v8: perfect-square seats ═════ */
.st-bus .seat{display:grid;place-items:center;width:var(--cell);height:var(--cell);aspect-ratio:1/1;padding:0;box-sizing:border-box;border:2px solid #7a4fc4;border-radius:8px;background:#fff;color:#7a4fc4;box-shadow:0 2px 5px rgba(122,79,196,.15);transition:transform .12s,background .12s}
.st-bus .seat:hover{transform:translateY(-2px);background:#f6f1ff}
.st-bus .seat b{position:static;transform:none;display:block;font-size:.8rem;line-height:1;font-weight:800;color:#1b1f4a;pointer-events:none}
.st-bus .seat.sel{background:#fde8b0;border-color:#e0a82e;color:#e0a82e;box-shadow:0 3px 8px rgba(224,168,46,.35)}
.st-bus .seat.sel b{color:#6b4700}
.st-bus .seat.cond::after{top:-6px;right:-6px}
.st-legend .lg.av,.st-legend .lg.sel{border-radius:4px;width:14px;height:14px}
@media(max-width:760px){.st-bus .seat b{font-size:.72rem}}