:root{
  --ink:#101820;
  --panel:#182230;
  --panel-2:#1F2C3D;
  --hairline:#2C3B4E;
  --text:#EDEAE1;
  --text-dim:#9FADBC;
  --amber:#FFC53D;
  --amber-ink:#1A1200;
  --radius:14px;
  --line-1:#5FA8E0;
  --line-2:#E8794F;
  --line-3:#4FB88A;
  --line-4:#C77D3C;
  --line-5:#B084D8;
  --line-default:#FFC53D;
  color-scheme:dark;
}
html[data-theme="light"]{
  --ink:#F4F1E9;
  --panel:#FFFFFF;
  --panel-2:#F0ECE1;
  --hairline:#DCD5C4;
  --text:#1A1A14;
  --text-dim:#6B6555;
  --amber:#E5A100;
  --amber-ink:#FFFFFF;
  --line-3:#2E9B6B;
  color-scheme:light;
}
html[data-theme="light"] .leaflet-tile{
  filter:saturate(0.85) brightness(1.02) contrast(1.02);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  min-height:100vh;
}

@media (prefers-reduced-motion: no-preference){
  .board-chip, .direction-toggle button{ transition: background .15s ease, color .15s ease, transform .1s ease; }
}
@media (prefers-reduced-motion: reduce){
  .bus-pulse{ animation:none; opacity:.35; }
}

/* ---- Top bar ---- */
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--hairline);
  padding:14px 16px;
}
.topbar-actions{
  margin-left:auto;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.install-btn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:700;
  font-size:13px;
  background:var(--amber);
  color:var(--amber-ink);
  border:0;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
}
.install-btn[hidden]{ display:none; }
.direction-toggle[hidden]{ display:none; }
.compass-float[hidden]{ display:none; }
.install-btn:active{ background:#E0AC2E; }
.topbar-inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar-text{
  min-width:0;
  overflow:hidden;
}
.topbar-text h1{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.subtitle{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:400px){
  .subtitle{ display:none; }
  .install-btn span:last-child{ display:none; }
  .install-btn{ padding:0; width:34px; justify-content:center; }
  .directions-toggle-btn{ padding:0 10px; font-size:12px; }
  .topbar-actions{ gap:6px; }
}
.directions-toggle-btn{
  flex:0 0 auto;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:13px;
  background:var(--amber);
  color:var(--amber-ink);
  border:0;
  border-radius:8px;
  padding:9px 13px;
  cursor:pointer;
}
.directions-toggle-btn[aria-expanded="true"]{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--hairline);
}
.settings-btn{
  flex:0 0 auto;
  width:34px;
  height:34px;
  font-size:20px;
  line-height:1;
  background:var(--panel-2);
  color:var(--text-dim);
  border:1px solid var(--hairline);
  border-radius:50%;
  cursor:pointer;
}
.settings-btn[aria-expanded="true"]{
  color:var(--amber);
  border-color:var(--amber);
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--hairline);
  font-size:13px;
  color:var(--text);
}
.settings-row:last-child{ border-bottom:0; }
.settings-link-btn{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  padding:4px 0;
  cursor:pointer;
}
.settings-link-btn:hover{ color:var(--amber); }
.settings-toggle{
  display:flex;
  border:1px solid var(--hairline);
  border-radius:7px;
  overflow:hidden;
}
.settings-toggle button{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  background:var(--panel-2);
  color:var(--text-dim);
  border:0;
  cursor:pointer;
}
.settings-toggle button.active{
  background:var(--amber);
  color:var(--amber-ink);
}
.legend-popover{
  position:fixed;
  top:64px;
  right:12px;
  z-index:2000;
  max-width:300px;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.legend-popover h2{
  font-family:'Oswald', sans-serif;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 10px;
  color:var(--text);
}
.legend-popover ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.legend-popover li{
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.4;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.legend-popover li strong{ color:var(--text); }
.legend-tip{
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid var(--hairline);
  font-size:12px;
  color:var(--text-dim);
  line-height:1.4;
}
#installInstructions{
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.5;
}
#installInstructions ol{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#installInstructions strong{ color:var(--text); }
.legend-dot{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-top:3px;
}
.legend-dot.legend-dashed{
  background:transparent;
  border-top:2px dashed #3E4C59;
  border-radius:0;
  width:14px;
  margin-top:6px;
}
.legend-close{
  position:absolute;
  top:8px;
  right:8px;
  width:22px;
  height:22px;
  background:transparent;
  border:0;
  color:var(--text-dim);
  font-size:13px;
  cursor:pointer;
}
.logo-mark{
  width:34px;
  height:34px;
  border-radius:50%;
  flex:0 0 auto;
  background-image:url("icon-192.png?v=3");
  background-size:cover;
}
.topbar-text h1{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:.01em;
  margin:0;
  text-transform:uppercase;
}
.subtitle{
  margin:1px 0 0;
  font-size:12.5px;
  color:var(--text-dim);
}

main{
  max-width:720px;
  margin:0 auto;
  padding:0 0 24px;
}

/* ---- Упътване (пеша + автобус) ---- */
.directions-panel{
  margin:0 16px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  background:var(--panel);
  border:1px solid transparent;
  border-radius:0 0 var(--radius) var(--radius);
  padding:0 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:max-height .28s ease, opacity .22s ease, padding .28s ease, margin .28s ease;
}
.directions-panel.panel-open{
  max-height:520px;
  opacity:1;
  border-color:var(--hairline);
  padding:14px;
  margin:12px 16px 0;
}
.directions-row{
  display:flex;
  gap:8px;
}
#destInput{
  flex:1 1 auto;
  min-width:0;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13.5px;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:9px 11px;
}
#destInput::placeholder{ color:var(--text-dim); }
#destInput:focus{ outline:2px solid var(--amber); outline-offset:1px; }
#destSearchBtn{
  flex:0 0 auto;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:13px;
  background:var(--amber);
  color:var(--amber-ink);
  border:0;
  border-radius:8px;
  padding:9px 14px;
  cursor:pointer;
}
.dest-suggestions{
  list-style:none;
  margin:-2px 0 0;
  padding:0;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
}
.dest-suggestions li{
  padding:9px 11px;
  font-size:13px;
  color:var(--text);
  border-bottom:1px solid var(--hairline);
  cursor:pointer;
}
.dest-suggestions li:last-child{ border-bottom:0; }
.dest-suggestions li:hover{ background:var(--ink); }
.dest-suggestion-icon{
  display:inline-block;
  margin-right:8px;
  opacity:.85;
}
.dest-suggestion-stop{
  background:rgba(255,197,61,.06);
}
.pick-map-btn{
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12.5px;
  color:var(--text-dim);
  background:transparent;
  border:1px dashed var(--hairline);
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
}
.pick-map-btn[aria-pressed="true"]{
  color:var(--amber-ink);
  background:var(--amber);
  border-style:solid;
  border-color:var(--amber);
}
.directions-status{
  font-size:12.5px;
  color:var(--text-dim);
  text-align:center;
}
.directions-row-header{
  align-items:center;
  justify-content:space-between;
}
.directions-hint{
  margin:0;
  font-size:12px;
  color:var(--text-dim);
  line-height:1.35;
}
.clear-directions-btn{
  flex:0 0 auto;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:12px;
  color:#E5483D;
  background:transparent;
  border:1px solid #E5483D;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.clear-directions-btn:hover{ background:rgba(229,72,61,.12); }

/* Плаващ компас над картата - остава видим дори панелът да е затворен,
   докато навигацията е активна. */
.fullscreen-btn{
  position:absolute;
  left:calc(50% - 60px);
  top:10px;
  transform:translateX(-50%);
  z-index:600;
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--panel);
  border:1px solid var(--hairline);
  color:var(--text);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.fullscreen-btn:active{ background:var(--panel-2); }

/* Режим на цял екран - картата заема целия viewport */
.map-wrap:fullscreen{
  margin:0;
  border-radius:0;
  border:0;
}
.map-wrap:fullscreen #map{
  height:100vh;
}
.map-wrap:-webkit-full-screen{
  margin:0;
  border-radius:0;
  border:0;
}
.map-wrap:-webkit-full-screen #map{
  height:100vh;
}

.fs-line-switcher{
  display:none;
}
.map-wrap:fullscreen .fs-line-switcher,
.map-wrap:-webkit-full-screen .fs-line-switcher{
  display:flex;
  position:absolute;
  top:58px;
  left:10px;
  right:10px;
  z-index:600;
  gap:6px;
  overflow-x:auto;
  padding:2px;
  scrollbar-width:thin;
}
.fs-chip{
  flex:0 0 auto;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:14px;
  background:rgba(16,24,32,.85);
  color:var(--text);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:8px 13px;
  cursor:pointer;
  backdrop-filter:blur(4px);
  white-space:nowrap;
}
.fs-chip.active{
  background:var(--amber);
  color:var(--amber-ink);
  border-color:var(--amber);
}

.locate-me-btn{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:600;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--hairline);
  color:var(--text);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.locate-me-btn:active{ background:var(--panel-2); }
.locate-me-btn.active{
  color:#5FA8E0;
  border-color:#5FA8E0;
}

.compass-float{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:600;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(16,24,32,.92);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:8px 10px;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.compass-arrow{
  font-size:20px;
  display:inline-block;
  transition:transform .15s linear;
  color:var(--line-3);
}
.compass-text{
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  max-width:150px;
}
.compass-float.off-course .compass-arrow{ color:#E5483D; }
.compass-float.off-course .compass-text{ color:#E5483D; }
.compass-float-close{
  flex:0 0 auto;
  width:18px;
  height:18px;
  background:transparent;
  border:0;
  color:var(--text-dim);
  font-size:12px;
  cursor:pointer;
  padding:0;
}
.directions-results{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.journey-card{
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}
.journey-card.best{
  border-color:var(--amber);
}
.journey-total{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  margin-bottom:6px;
}
.journey-legs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.journey-leg{
  font-size:12px;
  font-weight:600;
  padding:3px 8px;
  border-radius:6px;
  background:var(--ink);
}
.journey-leg.walk{ color:var(--text-dim); }
.journey-leg.bus{ color:var(--amber); }
.journey-detail{
  font-size:12px;
  color:var(--text-dim);
  margin-top:2px;
}

.you-are-here-marker{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#5FA8E0;
  border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(95,168,224,.35), 0 1px 4px rgba(0,0,0,.4);
  position:relative;
}
.heading-cone{
  position:absolute;
  left:50%;
  bottom:50%;
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:22px solid rgba(95,168,224,.55);
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(0deg);
  transition:transform .15s linear;
  pointer-events:none;
  display:none;
}
.heading-cone.active{ display:block; }
.dest-pin-marker{
  font-size:22px;
  line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

/* ---- Destination board / line chips ---- */
.destination-board{
  padding:14px 16px 4px;
}
.board-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.board-chip{
  position:relative;
  flex:0 0 auto;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:9px 14px;
  cursor:pointer;
  min-width:44px;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.board-chip:hover{ background:var(--panel-2); }
.board-chip:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.board-chip[aria-selected="true"]{
  background:var(--amber);
  color:var(--amber-ink);
  border-color:var(--amber);
}
.board-chip.is-favorite::after{
  content:"";
  position:absolute;
  top:4px;
  right:4px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--amber);
}
.board-chip[aria-selected="true"].is-favorite::after{
  background:var(--amber-ink);
}
.chip-skeleton{
  flex:0 0 auto;
  width:64px;
  height:38px;
  border-radius:8px;
  background:linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .chip-skeleton{ animation:none; background:var(--panel); }
}
@keyframes skeleton-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* ---- Map ---- */
.map-wrap{
  position:relative;
  margin:10px 16px 0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--hairline);
}
#map{
  height:46vh;
  min-height:280px;
  width:100%;
  background:var(--panel);
}
.leaflet-tile{ filter:saturate(0.55) brightness(0.75) contrast(1.05); }

.direction-toggle{
  position:absolute;
  top:10px;
  right:10px;
  z-index:500;
  display:flex;
  background:rgba(16,24,32,.85);
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  backdrop-filter:blur(4px);
}
.direction-toggle button{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-dim);
  background:transparent;
  border:0;
  padding:8px 10px;
  cursor:pointer;
}
.direction-toggle button[aria-pressed="true"]{
  background:var(--amber);
  color:var(--amber-ink);
}

/* ---- Info panel ---- */
.info-panel{
  padding:14px 16px 0;
  font-size:14px;
  color:var(--text-dim);
}
.info-panel .placeholder{ margin:0; }
.stop-search-wrap{
  position:relative;
  margin-bottom:10px;
}
.stop-zoom-hint{
  font-size:11.5px;
  margin-top:4px;
}
#stopSearchInput{
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13.5px;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:9px 11px;
}
#stopSearchInput::placeholder{ color:var(--text-dim); }
#stopSearchInput:focus{ outline:2px solid var(--amber); outline-offset:1px; }
.stop-search-results{
  position:absolute;
  top:calc(100% + 2px);
  left:0;
  right:0;
  z-index:50;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.stop-search-item{
  padding:9px 11px;
  font-size:13px;
  color:var(--text);
  border-bottom:1px solid var(--hairline);
  cursor:pointer;
}
.stop-search-item:last-child{ border-bottom:0; }
.stop-search-item:hover{ background:var(--ink); }
.info-panel .line-summary{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:var(--text);
}
.info-panel .line-summary strong{
  font-family:'Oswald', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.info-panel .carrier{
  margin:2px 0 0;
  font-size:12.5px;
  color:var(--text-dim);
}
.line-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.share-btn{
  flex:0 0 auto;
  width:28px;
  height:28px;
  font-size:14px;
  background:var(--panel-2);
  color:var(--text-dim);
  border:1px solid var(--hairline);
  border-radius:50%;
  cursor:pointer;
}
.share-btn:hover{ color:var(--amber); border-color:var(--amber); }
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  z-index:3000;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.inapp-banner{
  display:flex;
  align-items:center;
  gap:10px;
  background:#1A1200;
  color:var(--amber);
  padding:10px 14px;
  font-size:12.5px;
  font-weight:600;
  border-bottom:1px solid var(--amber);
}
.inapp-banner span{ flex:1 1 auto; }
.inapp-banner button{
  flex:0 0 auto;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  border-radius:6px;
  border:0;
}
#openRealBrowserBtn{
  background:var(--amber);
  color:#1A1200;
  padding:6px 12px;
}
#dismissInAppBanner{
  background:transparent;
  color:var(--amber);
  padding:4px 6px;
  font-size:14px;
}

/* ---- Ad slot ---- */
.ad-slot{
  position:relative;
  margin:16px 16px 0;
  min-height:50px;
  border:1px dashed var(--hairline);
  border-radius:8px;
  overflow:hidden;
  display:block;
}
.ad-slot[hidden]{ display:none; }
.ad-slot-label{
  position:absolute;
  top:3px;
  right:5px;
  z-index:2;
  font-size:8px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:rgba(16,24,32,.72);
  padding:1px 5px;
  border-radius:3px;
  pointer-events:none;
}
.sponsor-banner{
  display:block;
  width:100%;
  line-height:0;
}
.sponsor-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* ---- Stop list ---- */
.stop-list-wrap{
  margin:16px 16px 0;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:14px 16px 6px;
}
.stop-list-wrap h2{
  font-family:'Oswald', sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
  margin:0 0 8px;
  font-weight:600;
}
.color-key{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--hairline);
}
.color-key-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--text-dim);
}
.color-key-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
}
#stopList{
  list-style:none;
  margin:0;
  padding:0 0 8px;
  counter-reset:stop;
  max-height:220px;
  overflow-y:auto;
}
#stopList li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--hairline);
  font-size:13.5px;
  cursor:pointer;
  border-radius:6px;
}
#stopList li:hover{ background:var(--panel-2); }
#stopList li:active{ background:var(--ink); }
#stopList li:last-child{ border-bottom:0; }
#stopList li::before{
  counter-increment:stop;
  content:counter(stop);
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--panel-2);
  color:var(--text-dim);
  font-size:10.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---- Footer ---- */
.footer{
  max-width:720px;
  margin:0 auto;
  padding:18px 16px 28px;
}
.footer p{
  margin:0;
  font-size:11.5px;
  color:var(--text-dim);
  text-align:center;
}
.footer-inline{
  margin-top:18px;
  padding:14px 16px 6px;
  border-top:1px solid var(--hairline);
}
.footer-credit{
  margin-top:6px !important;
}
.footer-credit a{
  color:var(--text-dim);
  text-decoration:underline;
}
.footer-credit a:hover{ color:var(--text); }
.donate-btn{
  display:block;
  width:fit-content;
  margin:10px auto 0;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:11px;
  color:var(--amber-ink);
  background:var(--amber);
  border-radius:14px;
  padding:5px 12px;
  text-decoration:none;
}
.donate-btn:hover{ filter:brightness(1.06); }
@media (max-width:400px){
  .donate-btn{ font-size:10.5px; padding:4px 10px; }
}
.donate-btn:active{ filter:brightness(0.94); }

.bus-marker-wrap{
  position:relative;
  width:30px;
  height:34px;
}
.bus-marker-wrap.bus-dimmed{ opacity:.35; }
/* Плавно плъзгане към новата позиция при обновяване на живите данни -
   вместо рязко "скачане". Целим Leaflet-овия wrapper елемент директно. */
.leaflet-marker-icon.bus-live-icon{
  transition:transform 900ms linear;
}
.map-no-bus-anim .leaflet-marker-icon.bus-live-icon,
.map-no-bus-anim .bus-arrow{
  transition:none !important;
}
@media (prefers-reduced-motion: reduce){
  .leaflet-marker-icon.bus-live-icon{ transition:none; }
  .bus-arrow{ transition:none !important; }
}
.bus-pulse{
  position:absolute;
  left:3px;
  bottom:0;
  width:24px;
  height:24px;
  border-radius:50%;
  opacity:.8;
  animation:bus-pulse-wave 1.6s ease-out infinite;
  pointer-events:none;
  z-index:0;
}
.bus-pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:inherit;
  animation:bus-pulse-wave 1.6s ease-out infinite;
  animation-delay:.55s;
}
.overview-no-pulse .bus-pulse,
.overview-no-pulse .bus-pulse::after{
  display:none;
}
@keyframes bus-pulse-wave{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(3.2); opacity:0; }
}
.bus-marker{
  position:absolute;
  left:3px;
  bottom:0;
  width:24px;
  height:24px;
  border-radius:50%;
  color:var(--amber-ink);
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  z-index:1;
}
.bus-arrow{
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:transform 900ms linear;
}
.bus-arrow::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:9px solid #E5483D;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

.stop-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stop-list-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 0 6px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:2px;
}
.stop-list-header-spacer{ flex:1 1 auto; }
.stop-time-slot-label{
  flex:0 0 42px;
  text-align:right;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-dim);
}

.stop-time-slot{
  flex:0 0 42px;
  text-align:right;
  font-size:11.5px;
  color:var(--amber);
  font-weight:600;
  white-space:nowrap;
}
.stop-time-slot.live-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.15;
  gap:1px;
}
.stop-time-live{
  color:var(--line-3);
  font-size:11px;
}
.stop-time-live.second{
  color:#C084FC;
}
.stop-time-live.past{
  color:#E5483D;
}
.stop-time-live.signal-lost{
  color:var(--text-dim);
  font-size:9.5px;
  font-style:italic;
  cursor:help;
}
.stop-time-tooltip-text.signal-lost{
  color:#9FADBC;
  cursor:help;
}
.now-text{
  font-size:13px !important;
  color:#6FEFAE !important;
  font-weight:700 !important;
}
.stop-time-tooltip-text.now-text{
  font-size:10.5px !important;
}
.stop-time-slot-label.live{
  color:var(--line-3);
}
.vp-value.live{
  color:var(--line-3) !important;
}

.vehicle-popup{
  font-family:'IBM Plex Sans', sans-serif;
  min-width:180px;
}
.vehicle-popup-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  border-bottom:1px solid #e5e1d6;
  font-size:12.5px;
}
.vehicle-popup-row:last-child{ border-bottom:0; }
.vp-label{
  color:#8a8577;
  flex:0 0 auto;
}
.vp-value{
  text-align:right;
  font-weight:600;
  color:#1A1200;
}
.vp-value.vp-current{ color:#1F8A54; }
.vp-value.vp-next{ color:#C77D0E; }
.vp-value.vp-final{ color:#2A5F9E; }
.leaflet-popup-content-wrapper{
  border-radius:10px;
}

/* ---- Долен панел с детайли за возило - НЕ е обвързан с височината на
   картата (за разлика от вградения Leaflet popup), затова ✕ бутонът винаги
   е видим, независимо колко дълго е съдържанието. ---- */
.vehicle-panel-backdrop{
  position:fixed;
  inset:0;
  z-index:2500;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.vehicle-panel-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.vehicle-detail-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2600;
  background:var(--panel);
  border-top:1px solid var(--hairline);
  border-radius:16px 16px 0 0;
  max-height:75vh;
  overflow-y:auto;
  padding:10px 18px 24px;
  box-shadow:0 -10px 28px rgba(0,0,0,.45);
  transform:translateY(100%);
  transition:transform .25s ease;
}
.vehicle-detail-panel.open{
  transform:translateY(0);
}
.vehicle-detail-handle{
  width:38px;
  height:4px;
  border-radius:2px;
  background:var(--hairline);
  margin:0 auto 14px;
}
.vehicle-detail-close{
  position:absolute;
  top:12px;
  right:14px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  color:var(--text);
  font-size:14px;
  cursor:pointer;
}
.vehicle-detail-panel .vehicle-popup-row{ border-bottom-color:var(--hairline); }
.vehicle-detail-panel .vp-label{ color:var(--text-dim); }
.vehicle-detail-panel .vp-value{ color:var(--text); }
.vehicle-detail-panel .vp-value.vp-current{ color:var(--line-3); }
.vehicle-detail-panel .vp-value.vp-next{ color:var(--amber); }
.vehicle-detail-panel .vp-value.vp-final{ color:#5FA8E0; }
@media (min-width:600px){
  .vehicle-detail-panel{
    left:50%;
    right:auto;
    bottom:24px;
    width:340px;
    transform:translate(-50%, 30px);
    border-radius:16px;
    opacity:0;
    transition:transform .25s ease, opacity .25s ease;
  }
  .vehicle-detail-panel.open{
    transform:translate(-50%, 0);
    opacity:1;
  }
}

.terminal-marker{
  width:20px;
  height:20px;
  border-radius:6px;
  background:var(--panel);
  border:2px solid var(--amber);
  color:var(--text);
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* ---- Leaflet tooltip theming ---- */
.leaflet-tooltip{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--hairline);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12px;
  border-radius:6px;
}
.leaflet-tooltip-top:before{ border-top-color:var(--hairline); }

.leaflet-tooltip.stop-time-tooltip{
  padding:1px 5px;
  pointer-events:none;
}
.stop-time-tooltip-text{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:9.5px;
  color:var(--amber);
  margin-right:3px;
}
.stop-time-tooltip-text:last-child{
  margin-right:0;
}
.stop-time-tooltip-text.live{
  color:var(--line-3);
}
.stop-time-tooltip-text.live.second{
  color:#C084FC;
}
.stop-time-tooltip-text.past{
  color:#E5483D;
}

@media (min-width:600px){
  #map{ height:52vh; }
}

/* Information and frequently asked questions */
.about-section {max-width: 1000px; margin: 24px auto; padding: 24px; color: inherit; line-height: 1.75; overflow-wrap: anywhere;}
.about-section h2 {font-size: 1.5rem; margin: 24px 0 12px; color: inherit;}
.about-section h3 {font-size: 1.1rem; margin: 22px 0 8px; color: inherit;}
.about-section p {margin: 0 0 14px;}
.about-section ul {padding-left: 24px; margin-bottom: 16px;}
.about-section li {margin-bottom: 8px;}
@media(max-width:600px) {.about-section {padding: 16px; margin: 16px auto;}}

/* Match vehicle status colors on the map. */
.about-status-legend {list-style: none; padding-left: 0 !important;}
.about-status-legend li {position: relative; padding-left: 22px;}
.about-status-legend li::before {content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--status-color);}
.about-status-legend li:nth-child(1) {--status-color: #4FB88A;}
.about-status-legend li:nth-child(2) {--status-color: #C084FC;}
.about-status-legend li:nth-child(3) {--status-color: #FFC53D;}
.about-status-legend li:nth-child(4) {--status-color: #E5483D;}

/* Expandable FAQ; native keyboard and touch support. */
.faq-item {border-bottom: 1px solid currentColor; padding: 14px 0;}
.faq-item summary {cursor: pointer; font-weight: 600; line-height: 1.5; padding: 6px 0;}
.faq-item summary:focus-visible {outline: 2px solid #4FB88A; outline-offset: 4px; border-radius: 3px;}
.faq-item p {margin: 12px 0 4px;}

/* Visual refresh — October 2026 */
:root {--ink:#0d1522; --panel:#152234; --panel-2:#1d2e44; --hairline:#2a3d55; --text:#f0f4f8; --text-dim:#abbacf; --radius:20px;}
html[data-theme="light"] {--ink:#edf2f7; --panel:#ffffff; --panel-2:#e7eef6; --hairline:#cbd7e5; --text:#17283c; --text-dim:#52657a;}
body {background-image:radial-gradient(ellipse at 15% 0%,rgba(71,128,185,.13),transparent 55%);}
.topbar {padding:18px 16px; background:var(--panel); box-shadow:0 5px 28px rgba(0,0,0,.1); border-bottom-color:var(--hairline);}
.topbar-inner, main {max-width:900px;}
.topbar-inner {gap:12px;}
.logo-mark {width:42px;height:42px; border-radius:13px; box-shadow:0 0 0 1px var(--hairline),0 4px 12px rgba(0,0,0,.15);}
.topbar-text h1 {font-size:22px;letter-spacing:.025em;}
.subtitle {font-size:13px;margin-top:4px;}
.install-btn,.directions-toggle-btn {border-radius:11px;min-height:40px;box-shadow:0 3px 10px rgba(0,0,0,.12);}
.settings-btn {width:40px;height:40px;border-radius:12px;}
.destination-board {padding-top:22px;}
.board-row {gap:10px;padding:3px 0 10px;}
.board-chip {border-radius:12px;min-height:45px;min-width:48px;font-size:17px;}
.board-chip[aria-selected="true"] {box-shadow:0 4px 16px rgba(255,197,61,.2);}
.map-wrap {box-shadow:0 12px 32px rgba(0,0,0,.18);border:1px solid var(--hairline);}
.info-panel,.stop-list-wrap {border-radius:var(--radius);box-shadow:0 5px 20px rgba(0,0,0,.06);}
.legend-popover {border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.28);}
.about-section {max-width:868px;margin:12px auto 28px;padding:28px;background:var(--panel);border:1px solid var(--hairline);border-radius:24px;font-size:15px;box-shadow:0 8px 28px rgba(0,0,0,.08);}
.about-section h2 {font-family:'Oswald',sans-serif;font-size:25px;letter-spacing:.01em;margin:30px 0 16px;}
.about-section h2:first-child {margin-top:0;}
.about-section h3 {font-size:17px;margin-top:24px;}
.about-section p,.about-section li {color:var(--text-dim);}
.about-section strong {color:var(--text);}
.about-status-legend {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.about-status-legend li {background:var(--panel-2);border:1px solid var(--hairline);border-radius:12px;padding:12px 14px 12px 32px;margin:0;}
.about-status-legend li::before {left:13px;top:21px;}
.faq-item {background:var(--panel-2);border:1px solid var(--hairline);border-radius:12px;margin:10px 0;padding:0 16px;}
.faq-item summary {padding:16px 0;font-size:15px;}
.faq-item[open] {border-color:var(--amber);}
.faq-item p {padding-bottom:16px;margin:0;}
.faq-item summary::marker {color:var(--amber);}
.footer {max-width:900px;}
.footer p {font-size:12px;line-height:1.7;}
.footer-inline {border-top:0;background:var(--panel);border:1px solid var(--hairline);border-radius:18px;margin:24px 16px 0;padding:20px;}
.donate-btn {font-size:13px;padding:11px 20px;border-radius:12px;margin-top:16px;box-shadow:0 4px 16px rgba(255,197,61,.12);}
button:focus-visible,a:focus-visible {outline:2px solid var(--amber);outline-offset:3px;}
@media(hover:hover) {.board-chip:hover {border-color:var(--amber);} .donate-btn:hover {box-shadow:0 6px 20px rgba(255,197,61,.23);}}
@media(max-width:600px) {.about-section {margin:8px 16px 24px;padding:20px;border-radius:18px;} .about-status-legend {grid-template-columns:1fr;} .topbar-text h1 {font-size:18px;} .topbar-inner {gap:8px;} .logo-mark {width:34px;height:34px;} .topbar-actions {gap:6px;} .about-section h2 {font-size:23px;}}
@media(max-width:400px) {.install-btn {width:36px;min-height:36px;} .directions-toggle-btn {min-height:36px;padding:0 9px;} .settings-btn {width:36px;height:36px;} .topbar-text h1 {font-size:16px;} .topbar {padding:14px 12px;} .donate-btn {font-size:13px;padding:10px 18px;}}