/* ---------- START STYLES.CSS ---------- */
@font-face{font-family: SofiaSans; src: url('/fonts/SofiaSans-VariableFont_wght.woff2') format('woff2'), url('/fonts/SofiaSans-VariableFont_wght.ttf') format('truetype')}
@font-face{font-family: Ubuntu; src: url('/fonts/Ubuntu-Bold.woff2') format('woff2'), url('/fonts/Ubuntu-Bold.ttf') format('truetype')}
@font-face{font-family: PlusJakartaSans; src: url('/fonts/PlusJakartaSans-Bold.woff2') format('woff2'), url('/fonts/PlusJakartaSans-Bold.ttf') format('truetype'); font-weight: 700}

:root
{
  --bg:#f4f7fa;
  --line:#dce5ed;

  --sofia-flag: #a0dfff;
  --sofia-blue: #5784cc;
  --sofia-red: #f1471d;
  --sofia-green: #5e984b;
  --sofia-yellow: #fcd205;

  --sofia-transport-tram: #f7941f;
  --sofia-transport-trolley: #0095da;
  --sofia-transport-bus: #bd202e;
  --sofia-transport-night: #000;

  --sofia-transport-metro1: #ec2029;
  --sofia-transport-metro2: #1077bc;
  --sofia-transport-metro3: #3bb44b;
  --sofia-transport-metro4: #fcd403;
}

html{}
body{margin:0;padding: 0;font-family: SofiaSans;font-size: 18px;font-weight: 400;background:var(--bg);color:#1d2d3d}
input, button, select, textarea { font-family: inherit; }
main {background:linear-gradient(180deg,#edf6ff 0%,var(--bg) 100%)}
a {text-decoration: none}

a{color:inherit}
.wrapper{width:min(1645px,calc(100% - 28px));margin:auto}

section{padding:28px 0}
/* --- Десктоп решетки --- */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@media (max-width: 900px) {
  .tools { grid-template-columns: 1fr; }
}
.tool {border:1px solid var(--line);border-radius:17px;padding:20px;text-decoration:none;box-shadow:0 4px 15px rgba(23,50,75,.05);transition:.15s transform,.15s box-shadow}

/* Платени зони / Контейнери / Зарядни станции - един споделен
   бял фон на цял ред, вместо 3 отделни картончета (както е плътният фон
   на "Градски транспорт на живо"). */
.tools-merged {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  
  box-shadow: 0 4px 15px rgba(23,50,75,.05);
  border-radius: 17px;
}

.tools-merged .tool.bg-white {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-left: 1px solid var(--line);
}

.tools-merged .tool.bg-white:first-child {
  border-left: none;
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
}

.tools-merged .tool.bg-white:last-child {
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
}

@media (max-width: 900px) {
  .tools-merged {
    grid-template-columns: 1fr;
  }

  .tools-merged .tool.bg-white {
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  .tools-merged .tool.bg-white:first-child {
    border-top: none;
    border-radius: 17px 17px 0 0;
  }

  .tools-merged .tool.bg-white:last-child {
    border-radius: 0 0 17px 17px;
  }
}

.bg-white{background: #fff}
.white{color: #fff}
.bg-linear{background: linear-gradient(135deg, #fff, #eef6ff)}
.bg-linear2{background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%)}
.bg-linear3{background: linear-gradient(270deg, #e0f2fe 0%, #ffffff 100%)}

.bg-sofia-flag {background: var(--sofia-flag)}
.bg-sofia-blue {background: linear-gradient(180deg, var(--sofia-blue) 0%, #7298d4 100%)}
.bg-sofia-red {background: linear-gradient(180deg, var(--sofia-red) 0%, #f36441 100%)}
.bg-sofia-green {background: linear-gradient(180deg, var(--sofia-green) 0%, #78a868 100%)}
.bg-sofia-yellow {background: linear-gradient(180deg, var(--sofia-yellow) 0%, #fcd92d 100%)}
/* Небе и слънце - синьо от знамето горе вдясно, бледо жълто долу вляво (като в постовете) */
.bg-sofia-sky {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(160, 223, 255, .55), transparent 70%),
    radial-gradient(70% 55% at 0% 100%, rgba(252, 210, 5, .18), transparent 70%),
    var(--bg);
}

@media (max-width: 560px) {
  .wrapper { width: min(100% - 20px, 1120px); }
}

.statue-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 0 14px;
}

/* Два реда: горе "За автора", източниците на данните и статуята, долу "За проекта"
   и "Обратна връзка" - подравнени на един ред. */
.statue-row-author   { grid-column: 1; grid-row: 1; }
.statue-row-sources  { grid-column: 2; grid-row: 1; }
.statue-row > .statue-tool { grid-column: 3; grid-row: 1; align-self: start; }
.statue-row-project  { grid-column: 1; grid-row: 2; }
.statue-row-feedback { grid-column: 2; grid-row: 2; }

@media (max-width: 900px) {
  .statue-row { grid-template-columns: 1fr; }

  .statue-row > .statue-row-col,
  .statue-row > .statue-tool {
    grid-column: auto;
    grid-row: auto;
  }
}

.statue-row-col h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 48px 0 10px 0;
  color: #1d2d3d;
}

.statue-row-col .feature-body {
  font-size: 1.05rem;
  line-height: 1.5;
}

.statue-row-col .feature-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border-radius: 8px;
}

.statue-row-col .feature-body a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.statue-row-col .feature-body a:hover {
  color: #1d4ed8;
}

.statue-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 896 / 1195;
}

.statue-row > .statue-row-author,
.statue-row > .statue-row-project {
  padding-left: 20px;
  padding-right: 30px;
}

@media (max-width: 900px) {
  .statue-row > .statue-row-author,
  .statue-row > .statue-row-project {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Радар 359 - на цял ред под картата, без бял фон; слоганът под заглавието, логото отляво на текста */
.radar-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 20px;
}

.radar-row-text {
  flex: 1;
  min-width: 0;
}

.radar-row-slogan {
  font-size: 1.05rem;
  font-weight: 600;
  color: #64748b;
  margin: -6px 0 12px;
}

.radar-row-logo {
  flex-shrink: 0;
  margin-top: 48px;
}

.radar-row-logo img {
  display: block;
  width: auto;
  height: 120px;
}

/* Логата на другите проекти и значката - в колона с една ширина, текстовете започват на едно място;
   знакът А2 на Хемус и логото на „Сайт на годината“ са хоризонтални - по ширината (като в Радар 359) */
.radar-row-logo {
  width: 120px;
  display: flex;
  justify-content: center;
}

.radar-row-logo img[src*="hemus"],
.radar-row-logo img[src*="bgweb"] {
  width: 120px;
  height: auto;
}

@media (max-width: 900px) {
  .radar-row {
    gap: 16px;
    padding: 0;
  }

  .radar-row-logo img {
    height: 80px;
  }

  .radar-row-logo,
  .radar-row-logo img[src*="hemus"],
  .radar-row-logo img[src*="bgweb"] {
    width: 80px;
  }
}

.statue-row-col muted {
  display: block;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: -6px;
}

.statue-tool-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-coa-bg {
  position: fixed;
  top: -100px;
  left: -100px;
  width: 380px;
  height: auto;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* Гарантира, че съдържанието (включително статуята при скрол) винаги
е над фиксираното лого, независимо от реда в HTML/скрол позицията. */
main > .wrapper {
  position: relative;
  z-index: 1;
}

/* .wrapper е отделен stacking context (z-index:1) и .hero е негов "брат" със
собствен stacking context (z-index:9000) - затова колкото и високо
да е z-index:99999 на .is-fullscreen картата, тя не може да излезе над логото
и хамбъргера, докато .wrapper остане на ниво 1. Като вдигнем .wrapper над
.hero (и .main-menu, z-index:10000) само докато има отворена цял екран карта,
проблемът изчезва без да пипаме нормалното подреждане при скрол. */
main > .wrapper:has(.is-fullscreen) {
  z-index: 100000;
}

/* ---------- END STYLES.CSS ---------- */


/* ---------- START LOGO.CSS ---------- */
.hero {
  display: flex;
  flex-direction: column;
  padding: 12px 0 0 0;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Статуята на София вляво от логото и подзаглавието (виж index.php) */
.hero-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-brand-text {
  flex: 1;
  min-width: 0;
}
.hero-statue {
  flex: none;
  width: auto;
  height: 70px;
}
.hero.hero-scrolled .hero-statue {
  display: none;
}

.menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.logo {
  padding: 0;
}

.logo a {
  display: flex;
  align-items: center; /* Центрира картинката спрямо текстовия блок */
  text-decoration: none;
  color: inherit;
}


.logo h1 {
  font-size: 1.8em;
  font-weight: 700;
  font-family: PlusJakartaSans, sans-serif;
  font-variant-ligatures: no-common-ligatures; /* без слятото "fi" в Sofia */
  margin: 0;
  line-height: 1.1;
}

.logo h1 span {
  color: var(--sofia-blue);
}

/* Текстовият ред под лого+хамбъргер - втори ред на хедъра. На мобилно се
   скрива автоматично при скрол надолу и се появява отново само на самия
   връх на страницата (виж minified.js). */
.hero-quicknav {
  margin: 0;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.3;
  color: #1d2d3d;
}

/* Хедърът (лого, хамбургер и бързите връзки) остава видим при скрол - на телефон и на компютър.
   scroll-padding-top компенсира височината му при скок с anchor линк, за да не покрива заглавието на
   секцията; точната стойност я слага minified.js ("БЪРЗИ ВРЪЗКИ"), 90px е само докато се зареди. */
html {
  scroll-padding-top: 90px;
}

.hero {
  position: sticky;
  top: 0;
  z-index: 9000;
}

.hero.hero-scrolled .hero-quicknav {
  display: none;
}

/* Докато е скролнато, пресъздаваме същия фон като на самия връх на
   страницата (main-градиента + гербът, .site-coa-bg), вместо плосък
   цвят - разтегнат на цяла ширина извън .wrapper-а, за да не се вижда
   скролващото се съдържание зад хедъра. На връх (без .hero-scrolled)
   хедърът си остава напълно прозрачен, както досега. */
.hero.hero-scrolled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #edf6ff 0%, var(--bg) 100%);
  z-index: -2;
}

.hero.hero-scrolled::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('/img/coa/sofia logo.svg') -100px -100px / 380px auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(237,246,255,1) 0%, rgba(237,246,255,0) 100%);
  mask-image: linear-gradient(180deg, rgba(237,246,255,1) 0%, rgba(237,246,255,0) 100%);
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 900px) {
  .hero .logo h1 {
    font-size: 1.4em;
  }

  .hero-statue {
    height: 62px;
  }

  .hero .hero-quicknav {
     font-size: 0.90em;
  }
}

/* Бързи връзки под логото - на телефон се плъзгат хоризонтално (виж "БЪРЗИ ВРЪЗКИ" в minified.js) */
.hero-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero-chips::-webkit-scrollbar { display: none; }
/* При скрол подзаглавието се скрива и лентата застава точно под логото. Редът с логото е висок колкото
   хамбургера (52px), затова под текста вече има празно място - без още 10px отгоре. */
.hero.hero-scrolled .hero-chips { margin-top: 0; }

.hero-chips a {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #1d2d3d;
  font-size: .9em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.hero-chips a:hover { border-color: var(--sofia-blue); }
.hero-chips a.is-active {
  background: var(--sofia-blue);
  border-color: var(--sofia-blue);
  color: #fff;
}
/* На телефон времето е преди транспорта (виж .wx-summary), затова и връзката му е първа */
@media (max-width: 900px) {
  .hero-chips a[href="#weather"] { order: -1; }
}

.menu-toggle-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: none;
  color: #1d2d3d;
  cursor: pointer;
  padding: 0;
}

.menu-toggle-btn svg line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle-btn[aria-expanded="true"] svg line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle-btn[aria-expanded="true"] svg line:nth-child(2) {
  opacity: 0;
}

.menu-toggle-btn[aria-expanded="true"] svg line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.main-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10000;
  min-width: 280px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 10px;
  box-shadow: 0 8px 30px rgba(23,50,75,.15);
}

.main-menu.open {
  display: flex;
}

.main-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #1d2d3d;
  text-decoration: none;
  font-size: .95em;
}

.main-menu a:hover {
  background: var(--bg);
}

.main-menu .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.main-menu .menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-menu .menu-icon .pt-live-dot {
  margin: 0;
}

/* Етикет "Ново" за скоро добавените секции */
.menu-new {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sofia-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
}

.main-menu a:first-child {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  font-weight: 700;
}

/* Групите в менюто - на компютър в 3 колони, на телефон една под друга */
.main-menu .menu-group {
  display: flex;
  flex-direction: column;
}

/* Линкът към Радар 359 - най-долу, отделен с черта */
.main-menu .menu-external {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  font-weight: 700;
}

/* Втори външен линк (Магистрала Хемус) веднага след Радар 359 - без втора черта, като в Радар 359 */
.main-menu .menu-external + .menu-external {
  margin-top: 0;
  border-top: 0;
}

.main-menu .menu-slogan {
  font-weight: 500;
  color: #64748b;
}

.menu-group-title {
  padding: 12px 12px 4px;
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  .main-menu.open {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    width: min(860px, calc(100vw - 28px));
  }

  .main-menu > a:first-child,
  .main-menu .menu-external {
    grid-column: 1 / -1;
  }
}
/* ---------- END LOGO.CSS ---------- */


/* ---------- START WEATHER.CSS ---------- */
:root {
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --accent-blue: #0284c7;
}

.weather-widget {
  width: 100%;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weather-widget .widget-header {
  flex-wrap: nowrap;
  gap: 10px;
}

/* Градът не се свива, а етикетът (напр. „Частична облачност“) заема останалото
място вдясно и при нужда се пренася на два реда, вместо да пада под „София“. */
.weather-widget .location-info {
  flex: 0 0 auto;
}

.weather-widget .weather-tag {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}

.location-info h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-widget .update-time {
  font-size: 0.90rem;
  color: var(--text-secondary);
  margin-top: -10px;
  font-weight: 500;
}

.weather-tag {
  background: #e0f2fe;
  color: var(--accent-blue);
  border: 1px solid #bae6fd;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 1.0rem;
  font-weight: 700;
  max-width: 100%;
  word-break: break-word;
}

.hero-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding: 0 4px;
}

.temp-container {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.main-temp {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text-primary);
}

.temp-unit {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--accent-blue);
}

.temp-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.feels-like {
  font-size: 1.0rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.feels-like span {
  color: var(--text-primary);
  font-weight: 700;
}

.min-max-badge {
  display: flex;
  gap: 8px;
  font-size: 1.0rem;
  color: var(--text-secondary);
}

.min-max-badge .max { color: #dc2626; font-weight: 700; }
.min-max-badge .min { color: #2563eb; font-weight: 700; }

.sun-cloud-icon {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 4px 8px rgba(217, 119, 6, 0.15));
}

.weather-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0rem;
}

.weather-table tr {
  border-bottom: 1px solid var(--row-border);
  transition: background-color 0.2s ease;
}

.weather-table tr:last-child {
  border-bottom: none;
}

.weather-table tr:hover {
  background-color: var(--row-hover);
}

.weather-table td {
  padding: 9px 6px;
  vertical-align: middle;
}

.metric-cell-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-weight: 500;
}

.metric-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.metric-cell-value {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.metric-cell-value small {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 1px;
}

/* Слайдер "В момента / Днес / следващите 4 дни" - swipe карусел с точки под картата
(на компютър - по 3 слайда наведнъж и стрелки).
#weather е grid item в .tools (grid-template-columns: repeat(4, 1fr)) и по
подразбиране grid item-ите имат min-width:auto = content-based минимум. Flex
редицата с 3 слайда вътре има min-content = сбор от трите слайда (~3x), и
това сe качва до #weather, карайки 1fr колоната да се разшири на негова
сметка. min-width:0 тук нулира тази автоматична минимална ширина и връща
колоната на нормалната ѝ 1fr ширина - вложените min-width:0 по-долу не са
достатъчни сами по себе си, защото не са на самия grid item. */
#weather.tool {
  min-width: 0;
}

.weather-slider-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.weather-slider-track {
  display: flex;
  min-width: 0;
  transition: transform 0.3s ease;
  touch-action: pan-y;
}

.weather-slider-track.dragging {
  transition: none;
  user-select: none;
}

.weather-slide {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
}

/* Празен ред мин./макс. ("В момента") - на телефон не се вижда, на компютър пази място (виж @media) */
.min-max-badge.is-empty { display: none; }

/* "В момента" - лек син фон (::before), за да се отличава от дните */
.weather-slide-now {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 12px 14px;
}
.weather-slide-now::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f0f9ff;
}

.weather-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.weather-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
}

.weather-dot.active {
  background: var(--accent-blue);
  width: 20px;
  border-radius: 4px;
  transition: width 0.2s ease, border-radius 0.2s ease;
}

/* Почасова прогноза за 24 часа - на мястото на дните, бутонът wx-view-toggle сменя изгледите
   (клас wx-show-hourly на .weather-widget, виж "ВРЕМЕТО - ПО ЧАСОВЕ" в minified.js) */
/* Двата изгледа са в една клетка на grid-а един върху друг - скритият е само невидим, затова
   картата е винаги висока колкото по-високия (дните) и не подскача при смяната */
.weather-widget {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.wx-days,
.wx-hourly { grid-area: 1 / 1; min-width: 0; }
.wx-hourly,
.wx-show-hourly .wx-days { visibility: hidden; }
.wx-show-hourly .wx-hourly { visibility: visible; }
.wx-hourly .update-time { margin-bottom: 8px; }

/* Легенда на почасовия изглед - какво е всеки ред; цветните квадратчета са като стълбчетата */
.wx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.wx-legend li { display: flex; align-items: center; gap: 5px; }
.wx-legend small { font-size: 0.75rem; }
.wx-legend .metric-icon { width: 15px; height: 15px; }
.wx-legend-drop { width: 12px; height: 12px; flex-shrink: 0; }
.wx-legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.wx-legend-temp { background: linear-gradient(to top, #bae6fd, #fcd34d); }
.wx-legend-precip { background: linear-gradient(to top, #2563eb, #60a5fa); }
.wx-legend-text { font-size: 0.78rem; font-weight: 600; }

/* Почасовият изглед заема цялата височина на дните - свободното място отива за графиката (.wx-hour-chart).
   Отдолу остава място за бутона, който е върху изгледа */
.wx-hourly { display: flex; flex-direction: column; padding-bottom: 40px; }
.wx-hourly .wx-hourly-strip { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }
.wx-hourly .wx-hourly-scroll { flex: 1 1 auto; min-width: 0; }

/* Стрелки за превъртане - върху лентата, на височината на графиката */
.wx-hourly-arrow {
  position: absolute;
  top: 45%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #bae6fd;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-blue);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transform: translateY(-50%);
}
.wx-hourly-arrow:hover { background: #e0f2fe; }
.wx-hourly-arrow[hidden] { display: none; }
.wx-hourly-arrow svg { width: 20px; height: 20px; }
.wx-hourly-prev { left: -6px; }
.wx-hourly-next { right: -6px; }

/* Стрелките на слайдера с дните - само на компютър, долу вляво от бутона "По часове"
   (на реда под колоните - виж padding-bottom на .wx-days) */
.wx-days { position: relative; min-width: 0; }
.weather-slider-arrow { top: auto; bottom: 0; transform: none; }
.weather-slider-prev { right: 185px; }
.weather-slider-next { right: 141px; }
.wx-show-hourly .weather-slider-arrow { display: none; }
@media (max-width: 900px) {
  .weather-slider-arrow { display: none; }
}

/* Бутонът стои долу вдясно: на компютър на собствен ред под колоните (padding-bottom на .wx-days),
   на телефон на реда с точките */
.wx-view-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  background: #f0f9ff;
  color: var(--accent-blue);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.wx-view-toggle:hover { background: #e0f2fe; }
.wx-view-toggle > span { display: flex; align-items: center; gap: 6px; }
.wx-view-toggle small { font-weight: 600; color: var(--text-secondary); }
.wx-view-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }

/* На телефон редът с точките е висок колкото бутона, за да не застъпва "Изгрев / Залез", а точките
   са вляво - центрирани опират в бутона на тесни екрани */
.weather-widget:has(.wx-view-toggle) .weather-slider-dots {
  justify-content: flex-start;
  padding-left: 4px;
  align-items: center;
  min-height: 38px;
  margin-top: 4px;
}
.wx-view-toggle > .wx-view-to-days,
.wx-show-hourly .wx-view-toggle > .wx-view-to-hourly { display: none; }
.wx-show-hourly .wx-view-toggle > .wx-view-to-days { display: flex; }

.wx-hourly-scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.wx-hour {
  flex: 1 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.wx-hour:hover { background: var(--row-hover); }
.wx-hour:first-child { background: #e0f2fe; }

/* Полунощ - черта пред първия час на следващия ден */
.wx-hour-newday { box-shadow: inset 1px 0 0 var(--line); border-radius: 0 10px 10px 0; }

.wx-hour-day {
  min-height: 1.1em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.wx-hour-time { font-weight: 600; color: var(--text-primary); }
.wx-hour-icon .sun-cloud-icon { width: 40px; height: 40px; filter: none; }
.wx-hour-chart {
  flex: 3 1 0;
  min-height: 90px;
  width: 100%;
  position: relative;
  margin: 4px 0;
}

.wx-hour-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 30px;
  transform: translateX(-50%);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(to top, #bae6fd, #fcd34d);
}

/* Температурата е над стълбчето */
.wx-hour-temp {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding-bottom: 2px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
}
.wx-hour-feels { font-size: 0.9rem; min-height: 1.1em; }

.wx-hour-rain {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  color: #2563eb;
}
.wx-hour-rain svg { width: 13px; height: 13px; }
.wx-hour-rain.is-zero { color: #cbd5e1; }

/* Количество валеж - синьо стълбче от общата линия отдолу, взима част от свободната височина */
.wx-hour-precip {
  flex: 1 1 0;
  min-height: 36px;
  width: 100%;
  position: relative;
  margin-top: 4px;
  border-bottom: 2px solid #bfdbfe;
}

.wx-hour-precip-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 30px;
  transform: translateX(-50%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #2563eb, #60a5fa);
}

.wx-hour-mm { font-size: 0.85rem; min-height: 1.1em; color: #2563eb; }
.wx-hour-wind { font-weight: 600; }
.wx-hour-wind small { font-size: 0.8rem; }
/* ---------- END WEATHER.CSS ---------- */


/* ---------- START PARKING.CSS ---------- */
:root {
  --border-color: #e2e8f0;
  --text-dark: #0f172a;
  --text-muted: #64748b;

  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
}

.parking-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.parking-row {
  cursor: pointer;
}

.parking-map-wrap {
  position: relative;
  width: 100%;
  height: 260px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#parking-free-map {
  width: 100%;
  height: 100%;
}

.parking-map-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1000;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #1e293b;
}

.parking-table th {
  background-color: #f1f5f9;
  color: var(--text-muted);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}

.parking-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.975rem;
  vertical-align: middle;
}

.parking-table tbody tr:last-child td {
  border-bottom: none;
}

.parking-table tbody tr:hover {
  background-color: #f8fafc;
}

.parking-name-cell {
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
}

.total-spots {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

.spots-cell {
  text-align: right;
  white-space: nowrap;
}

.badge-spots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.875rem;
}

.badge-success {
  background-color: var(--success-bg);
  color: var(--success);
}

.badge-warning {
  background-color: var(--warning-bg);
  color: var(--warning);
}

.badge-danger {
  background-color: var(--danger-bg);
  color: var(--danger);
}

.empty-row {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
/* ---------- END PARKING.CSS ---------- */


/* ---------- START AIR.CSS ---------- */
:root {
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
/*
  padding-bottom: 12px;
*/
}

.summary-banner {
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.summary-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
}

.summary-aqi {
  font-size: 1.2rem;
  font-weight: 800;
}

.air-table {
  width: 100%;
  border-collapse: collapse;
}

.air-table tr {
  border-bottom: 1px solid var(--row-border);
  transition: background-color 0.15s ease;
}

.air-table tr:last-child {
  border-bottom: none;
}

.air-table tr:hover {
  background-color: var(--row-hover);
}

.air-table td {
  padding: 11px 4px;
  vertical-align: middle;
}

.district-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.air-table .district-metrics {
  text-align: right;
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.air-table .district-metrics strong {
  color: var(--text-primary);
}

.air-unit {
  font-size: 0.8rem;
}

.status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.air-note {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.aqi-val {
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
}

.empty-state {
  text-align: center;
  padding: 20px 10px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
/* ---------- END AIR.CSS ---------- */


/* ---------- START PUBLIC-TRANSPORT.CSS ---------- */
.pt-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 0 0 14px 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--row-border, #f1f5f9);
  border-radius: 12px;
}

.pt-type-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.05rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.pt-type-item strong {
  margin-left: auto;
  color: var(--text-primary);
  font-weight: 800;
  font-size: 1.1rem;
}

.pt-type-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pt-type-dot-total {
  background: var(--text-dark, #1d2d3d);
}

.pt-stat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px 0;
  padding: 0 0 4px 0;
}

.pt-stat-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 2px;
}

.pt-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
}

.pt-stat-value small {
  font-size: 1.05rem;
  font-weight: 700;
}

.pt-stat-delta {
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 2px;
}

.pt-stat-delta-period {
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}

.pt-stat-sparkline {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.pt-metrics-table {
  margin-bottom: 4px;
}

.pt-metrics-table .metric-cell-label,
.pt-metrics-table .metric-cell-value {
  font-size: 1.05rem;
}

.pt-lines-section {
  margin-top: 14px;
}

.pt-lines-title {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.pt-lines-section .gtfs-line-badge {
  font-size: 0.92rem;
}

.pt-badge-count {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  font-size: 0.85rem;
  font-weight: 800;
}

.pt-badge-delay {
  background: rgba(0, 0, 0, .3);
}

.pt-stops-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-stop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-size: 0.95rem;
}

.pt-stop-item:last-child {
  border-bottom: none;
}

.pt-stop-rank {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e2e8f0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 800;
}

.pt-stop-name {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary);
}

.pt-stop-code {
  font-weight: 500;
  color: var(--text-muted);
}

.pt-stop-count {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
/* ---------- END PUBLIC-TRANSPORT.CSS ---------- */


/* ---------- START FEATURE-CARD (преизползваем: цветен фон + икона в ъгъла) ---------- */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  border: none;
  box-shadow: none;

  --text-dark: #ffffff;
  --text-muted: rgba(255, 255, 255, .78);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, .78);
  --border-color: rgba(255, 255, 255, .25);
  --row-border: rgba(255, 255, 255, .18);
  --row-hover: rgba(255, 255, 255, .1);
}

/* Подрязваме/изолираме само картите с декоративна снимка в ъгъла (.feature-photo) -
картите с карта и бутон "цял екран" не трябва да имат overflow:hidden,
иначе fixed-position režим "цял екран" се реже и не стига до пълния екран. */
.feature-card:has(.feature-photo) {
  overflow: hidden;
  isolation: isolate;
}

/* Светло синьо (sofia-flag) — тъмен текст за четимост */
.feature-card.bg-sofia-flag {
  color: #1d2d3d;

  --text-dark: #1d2d3d;
  --text-muted: rgba(29, 45, 61, .65);
  --text-primary: #1d2d3d;
  --text-secondary: rgba(29, 45, 61, .65);
  --border-color: rgba(29, 45, 61, .18);
  --row-border: rgba(29, 45, 61, .12);
  --row-hover: rgba(29, 45, 61, .06);
}

.feature-card.bg-sofia-flag .feature-title {
  color: #1d2d3d;
}

.feature-card.bg-sofia-flag .feature-photo {
  opacity: 1;
}

.feature-card .feature-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 170px;
  height: 170px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

/* Промени в градския транспорт, Аварии в София, Новини, Електронни услуги -
снимката с 15px нагоре и наляво */
.feature-card.bg-sofia-yellow .feature-photo,
.feature-card.bg-sofia-red .feature-photo,
.feature-card.bg-sofia-blue .feature-photo,
.feature-card.bg-sofia-green .feature-photo {
  right: 15px;
  bottom: 15px;
}

/* По-светло синьо, преминаващо надолу в бяло — с оригиналните тъмни цветове на текста */
.feature-card.feature-blue-light {
  background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.feature-blue-light .feature-photo {
  top: 0;
  right: 0;
  bottom: auto;
  opacity: 1;
}

.feature-card.feature-blue-light .feature-title {
  color: #0f172a;
}

/* Светъл жълт фон — тъмен текст за четимост */
.feature-card.bg-sofia-yellow {
  color: #1d2d3d;

  --text-dark: #1d2d3d;
  --text-muted: rgba(29, 45, 61, .65);
  --text-primary: #1d2d3d;
  --text-secondary: rgba(29, 45, 61, .65);
  --border-color: rgba(29, 45, 61, .18);
  --row-border: rgba(29, 45, 61, .12);
  --row-hover: rgba(29, 45, 61, .06);
}

.feature-card.bg-sofia-yellow .feature-title {
  color: #1d2d3d;
}

.feature-card.bg-sofia-yellow .feature-body,
.feature-card.bg-sofia-red .feature-body,
.feature-card#outages.bg-sofia-blue .feature-body {
  font-size: 1rem;
}

/* Бял фон — тъмен текст, както в оригиналния дизайн */
.feature-card.bg-white {
  background: linear-gradient(270deg, #e0f2fe 0%, #ffffff 100%);
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.bg-white .feature-title {
  color: #0f172a;
}

/* Градски транспорт — почти бял вертикален градиент, тъмен текст */
/* Светъл фон (Нискоемисионна зона) — тъмен текст */
.feature-card.bg-linear {
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.bg-linear .feature-title {
  color: #0f172a;
}

.feature-card.bg-linear2 {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.bg-linear2 .feature-title {
  color: #0f172a;
}

.feature-card.bg-linear3 {
  background: linear-gradient(270deg, #e0f2fe 0%, #ffffff 100%);
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.bg-linear3 .feature-title {
  color: #0f172a;
}

/* Снимката да седи фиксирано над реда със скорост/закъснение, не да следва
надолу вечно растящите списъци с линии (top вместо bottom) */
.feature-card.bg-linear2 .feature-photo {
  top: 140px;
  bottom: auto;
  right: 0;
}

.feature-card .feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feature-card .feature-header-photo {
  height: 56px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  flex-shrink: 0;
}

.feature-card .feature-title {
  font-size: 1.30rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

/* Иконката "i" до заглавието (data_info() в src/functions.php) - откъде са данните */
.data-info {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  margin-left: auto;
}

.data-info summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: inherit;
  opacity: .75;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}

.data-info summary::-webkit-details-marker { display: none; }

.data-info summary:hover,
.data-info summary:focus-visible,
.data-info[open] summary {
  opacity: 1;
  background: var(--row-hover, rgba(0, 0, 0, .08));
}

.data-info-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  max-width: calc(100vw - 80px);
  max-height: 300px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: #1d2d3d;
  font-size: .85rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.data-info-pop p { margin: 0 0 6px; }
.data-info-pop p:last-child { margin-bottom: 0; }
.data-info-pop a { color: #0b5cad; text-decoration: underline; }
.data-info-pop .data-info-note { color: rgba(29, 45, 61, .7); }

/* position+z-index само тук, за да седят над декоративната .feature-photo (z-index:0) -
ако се сложи универсално, при карти без снимка "изтича" извън картата (position:relative
+ z-index != auto създава stacking context, а .feature-card вече не изолира тези карти)
и се сравнява директно със съседните .tool карти в грида - точно това чупеше цял екран. */
.feature-card:has(.feature-photo) .feature-title,
.feature-card:has(.feature-photo) .feature-body {
  position: relative;
  z-index: 1;
}

/* Картите със скролващ списък (Промени/Аварии/Новини) - фиксирана височина на самата
карта, за да имат overflow:auto списъците реално спрямо какво да се ограничават
(flex:1 без дефинирана височина никъде просто расте до съдържанието и скролът
никога не се задейства). Електронни услуги е без скрол - расте свободно по съдържание. */
.feature-card:has(.gtfs-alerts-list),
.feature-card:has(.su-tabs),
.feature-card:has(.news-widget-list) {
  height: 480px;
}

.feature-card:has(.gtfs-alerts-list) .feature-body,
.feature-card:has(.su-tabs) .feature-body,
.feature-card:has(.news-widget-list) .feature-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.feature-card .parking-table th {
  background-color: rgba(255, 255, 255, .14);
  color: var(--text-muted);
}

.feature-card .parking-table tbody tr:hover {
  background-color: var(--row-hover);
}
/* ---------- END FEATURE-CARD ---------- */


/* ---------- START MAPS & FULLSCREEN ---------- */
/* Контейнери за уиджетите с карти */
#sofia-parking-widget,
#ev-charging-widget {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

#sofia-parking-widget {
  height: 640px;
  min-height: 350px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e8f0;
}

#sofia-parking-map {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #f8fafc;
}

/* Стил за легендата */
#sofia-parking-widget .spw-legend {
  position: absolute;
  bottom: 24px;
  right: 16px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  color: #1e293b;
  pointer-events: auto;
}

#sofia-parking-widget .spw-legend-title {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

#sofia-parking-widget .spw-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#sofia-parking-widget .spw-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* Стил за Leaflet Popup */
.spw-popup-content {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 2px;
}

.spw-popup-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.spw-popup-info {
  margin: 3px 0;
  color: #334155;
}

/* Универсален бутон за цял екран */
.spw-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: #ffffff;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.spw-fullscreen-btn:hover {
  background: #f4f4f4;
}

/* Бутон "моето местоположение" на картата на живо - долу вдясно, със същия
   дизайн и позициониране като на livetransport.eu (бяло квадратче със
   заоблени ъгли и "elevation" сянка). */
.pt-locate-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  color: #212529;
  cursor: pointer;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12);
}

@media (max-width: 560px) {
  .pt-locate-btn {
    bottom: 34px;
  }
}

.pt-locate-btn:hover {
  background: #f4f4f4;
}

.pt-locate-btn.is-locating {
  opacity: .6;
  cursor: wait;
}

/* На картата за паркинг зони легендата е долу вдясно - местим бутона за
   локация долу вляво, за да не се застъпват. На зарядните и контейнерите е на същото място. */
#sofia-parking-widget .pt-locate-btn,
#ev-charging-widget .pt-locate-btn,
#sofia-bins-widget-container .pt-locate-btn {
  right: auto;
  left: 16px;
}

/* Точка "тук сте вие" + кръг на точността, показвани след успешно локализиране */
.pt-user-location-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .35), 0 1px 3px rgba(0, 0, 0, .4);
}

/* Покана към пълноекранната версия на картата (/gt/) - под самата карта. */
.pt-map-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line, #dce5ed);
  border-radius: 12px;
  background: #f8fafc;
}

.pt-map-cta-text {
  margin: 0;
  color: var(--text-muted, #64748b);
  font-size: .99rem;
  line-height: 1.4;
}

.pt-map-cta-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--sofia-blue, #5784cc);
  color: #ffffff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: .15s background-color;
}

.pt-map-cta-btn:hover {
  background: #4a72b3;
}

@media (max-width: 560px) {
  .pt-map-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Универсален режим "цял екран" за всички карти */
#sofia-parking-widget.is-fullscreen,
#ev-charging-widget.is-fullscreen,
#traffic-map-widget.is-fullscreen,
#sofia-bins-widget-container.is-fullscreen,
#pt-live-map-widget.is-fullscreen,
#outages-map-widget.is-fullscreen,
#toilets-map-widget.is-fullscreen,
#sport-map-widget.is-fullscreen,
#education-map-widget.is-fullscreen,
#districts-map-widget.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  /* 100vh на Android Chrome е височината без адресната лента и долната част на
     картата остава под нея и под системните бутони (назад/начало) - затова 100dvh.
     Рамката с дебелина safe-area inset (изисква viewport-fit=cover) избутва навътре
     абсолютно позиционираните бутони и легенди, защото те се мерят от padding box-а. */
  box-sizing: border-box !important;
  border-style: solid !important;
  border-color: #ffffff !important;
  border-width: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
}

/* Принудително разпъване на картите вътре на 100% */
#sofia-parking-widget.is-fullscreen #sofia-parking-map,
#ev-charging-widget.is-fullscreen #ev-map,
#traffic-map-widget.is-fullscreen #trafficMap,
#sofia-bins-widget-container.is-fullscreen #sofia-bins-map,
#pt-live-map-widget.is-fullscreen #pt-live-map,
#outages-map-widget.is-fullscreen #outagesMap,
#toilets-map-widget.is-fullscreen #toiletsMap,
#sport-map-widget.is-fullscreen #sportMap,
#education-map-widget.is-fullscreen #educationMap,
#districts-map-widget.is-fullscreen #districtsMap {
  height: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
}

/* Leaflet popup-ите са до 300px съдържание + 44px странични отстъпи, т.е. ~350px -
на телефон картите в .tool (wrapper -20px, padding 2x20px) са по-тесни от това и
popup-ът излиза извън картата по ширина. Ограничаваме го спрямо ширината на екрана. */
@media (max-width: 560px) {
  .leaflet-popup-content {
    margin: 12px 16px;
    max-width: calc(100vw - 110px);
  }
}

/* ---------- END MAPS & FULLSCREEN ---------- */


/* ---------- START NEWS.CSS ---------- */
.news-widget-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

/* Същият персонализиран скролбар като на Промени/Аварии */
.news-widget-list::-webkit-scrollbar {
  width: 6px;
}
.news-widget-list::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.news-widget-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.news-item {
  display: block;
  padding: 18px;
  color: var(--text-dark, #0f172a);
  text-decoration: none;
  border-top: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-left: 5px solid #2563eb;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.news-item:hover {
  background-color: var(--row-hover, rgba(255, 255, 255, 0.35));
}

.news-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 6px;
  color: var(--text-dark, #0f172a);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.news-source {
  background: rgba(255, 255, 255, 0.7);
  color: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.news-date {
  color: var(--text-muted, #334155);
  font-weight: 500;
}
/* ---------- END NEWS.CSS ---------- */


/* ---------- START COMPANIES.CSS ---------- */
.utility-sidebar-widget {
}

.utility-widget-header {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.utility-widget-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  margin: 0;
}

.utility-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: #334155;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.utility-link:last-child {
  border-bottom: none;
}

.utility-link:hover {
  background-color: #f8fafc;
  color: #0284c7;
}

.utility-link img {
  width: 64px;
  height:64px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  background: #f8fafc;
  padding: 2px;
  border: 1px solid #e2e8f0;
}
/* ---------- END COMPANIES.CSS ---------- */


/* ---------- START SERVICE-LIST.CSS (Електронни услуги) ---------- */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-top: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-left: 5px solid var(--text-dark, #ffffff);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  color: var(--text-dark, inherit);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.service-item:hover {
  background-color: var(--row-hover, rgba(255, 255, 255, 0.1));
}

/* Име на услугата с кратко описание под него */
.service-item-text {
  display: flex;
  flex-direction: column;
}

.service-item-desc {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.75;
}

.service-item-arrow {
  flex-shrink: 0;
  opacity: 0.6;
  font-weight: 700;
}
/* ---------- END SERVICE-LIST.CSS ---------- */


/* ---------- START CHARGING.CSS ---------- */
.filter-bar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.filter-btn {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.filter-btn.active {
  background: #1e40af;
  color: #fff;
  border-color: #1e40af;
}

/* Бутонът за локация е долу вляво (както при паркинг зоните). На тясна карта центрираните
   филтри биха го застъпили - там ги центрираме в мястото вдясно от бутона (16px + 44px + 8px).
   Разстоянието до текста за OSM/CARTO е като при легендата на паркинг зоните (bottom: 24px),
   а на телефон филтрите са на височината на бутона (34px). */
#ev-charging-widget {
  container-type: inline-size;
  container-name: ev-map;
}

@container ev-map (max-width: 440px) {
  .filter-bar {
    left: 68px;
    right: 12px;
    width: fit-content;
    max-width: calc(100% - 80px);
    box-sizing: border-box;
    margin: 0 auto;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px;
  }
  .filter-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  @container ev-map (max-width: 440px) {
    .filter-bar {
      bottom: 34px;
    }
  }
}
.custom-ev-icon {
  background: transparent;
  border: none;
}

/* Попъп на зарядна станция */
.spw-ev-popup {
  min-width: 180px;
}

.spw-ev-popup-name {
  color: #1e40af;
}

.spw-ev-popup-operator {
  color: #4b5563;
}

.spw-ev-popup-address {
  margin: 6px 0 0 0;
  color: #374151;
}

.spw-ev-popup-status {
  margin-top: 8px;
  font-weight: bold;
  color: #059669;
}

.spw-ev-popup-status.is-fast {
  color: #dc2626;
}
/* ---------- END CHARGING.CSS ---------- */


/* ---------- START LEAFLET.CSS ---------- */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.leaflet-container {
  overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.leaflet-tile::selection {
  background: transparent;
}
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}
.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  padding: 0;
}

.leaflet-container img.leaflet-tile {
  mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  touch-action: none;
  touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}
.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}
.leaflet-container:focus {
  outline: none;
}
.leaflet-container a {
  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}
.leaflet-tile-loaded {
  visibility: inherit;
}
.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}
.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}

.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted;
  pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.leaflet-top {
  top: 0;
}
.leaflet-right {
  right: 0;
}
.leaflet-bottom {
  bottom: 0;
}
.leaflet-left {
  left: 0;
}
.leaflet-control {
  float: left;
  clear: both;
}
.leaflet-right .leaflet-control {
  float: right;
}
.leaflet-top .leaflet-control {
  margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
  margin-left: 10px;
}
.leaflet-right .leaflet-control {
  margin-right: 10px;
}

.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}
.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
  will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
  -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
  transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}

.leaflet-interactive {
  cursor: pointer;
}
.leaflet-grab {
  cursor: -webkit-grab;
  cursor:    -moz-grab;
  cursor:         grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor:    -moz-grabbing;
  cursor:         grabbing;
}

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
  pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted;
  pointer-events: auto;
}

.leaflet-container {
  background: #ddd;
  outline-offset: 1px;
}
.leaflet-container a {
  color: #0078A8;
}
.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255,255,255,0.5);
}

.leaflet-container {
  font-size: 0.90rem;
  line-height: 1.5;
}

.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
}
.leaflet-bar a {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}

.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
  font-size: 22px;
}

.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background: #fff;
  border-radius: 5px;
}
.leaflet-control-layers-toggle {
  background-image: url(/css/images/layers.png);
  width: 36px;
  height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(/css/images/layers-2x.png);
  background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}
.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}
.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}
.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}
.leaflet-control-layers label {
  display: block;
  font-size: 13px;
  font-size: 1.08333em;
}
.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}

.leaflet-default-icon-path {
  background-image: url(/css/images/marker-icon.png);
}

.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
  line-height: 1.4;
}
.leaflet-control-attribution a {
  text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
  text-decoration: underline;
}
.leaflet-attribution-flag {
  display: inline !important;
  vertical-align: baseline !important;
  width: 1em;
  height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}
.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
}

.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}
.leaflet-popup-content {
  margin: 13px 24px 13px 20px;
  line-height: 1.3;
  font-size: 13px;
  font-size: 1.08333em;
  min-height: 1px;
}
.leaflet-popup-content p {
  margin: 17px 0;
  margin: 1.3em 0;
}
.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-top: -1px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}
.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;

  margin: -10px auto 0;
  pointer-events: auto;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  text-align: center;
  width: 24px;
  height: 24px;
  font: 16px/24px Tahoma, Verdana, sans-serif;
  color: #757575;
  text-decoration: none;
  background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
  color: #585858;
}
.leaflet-popup-scrolled {
  overflow: auto;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;

  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}

.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}

.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

.leaflet-tooltip-bottom {
  margin-top: 6px;
}
.leaflet-tooltip-top {
  margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}
.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}
.leaflet-tooltip-left {
  margin-left: -6px;
}
.leaflet-tooltip-right {
  margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}
.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}
.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}

@media print {
  .leaflet-control {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* ---------- END LEAFLET.CSS ---------- */


/* ---------- START LEAFLET.MARKERCLUSTER.CSS ---------- */
/* https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css */
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css */
.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
	}
.marker-cluster-small div {
	background-color: rgba(110, 204, 57, 0.6);
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}
.marker-cluster-medium div {
	background-color: rgba(240, 194, 12, 0.6);
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
	}
.marker-cluster-large div {
	background-color: rgba(241, 128, 23, 0.6);
	}

	/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
	background-color: rgb(181, 226, 140);
	}
.leaflet-oldie .marker-cluster-small div {
	background-color: rgb(110, 204, 57);
	}

.leaflet-oldie .marker-cluster-medium {
	background-color: rgb(241, 211, 87);
	}
.leaflet-oldie .marker-cluster-medium div {
	background-color: rgb(240, 194, 12);
	}

.leaflet-oldie .marker-cluster-large {
	background-color: rgb(253, 156, 115);
	}
.leaflet-oldie .marker-cluster-large div {
	background-color: rgb(241, 128, 23);
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
	}
/* ---------- END LEAFLET.MARKERCLUSTER.CSS ---------- */


/* ---------- START GTFS-ALERTS.CSS ---------- */
.gtfs-widget-controls {
  flex: none;
  margin: 0;
  padding: 0;
}

.gtfs-search-input {
  width: 100%;
  margin: 0 0 10px 0;
  padding: 10px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.gtfs-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Бутони за вид превоз: плътни, в цвета на вида; при избран вид останалите
   избледняват, а избраният е ограден (като линиите отдолу). Иконите са
   едноцветни SVG и се оцветяват през mask с currentColor. */
.gtfs-kinds { display: flex; flex: none; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.gtfs-kind {
  --kind: var(--sofia-transport-bus);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--kind);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, filter .15s;
}
.gtfs-kind:hover { filter: brightness(1.1); }
.gtfs-kinds:has([aria-pressed="true"]) .gtfs-kind:not([aria-pressed="true"]) { opacity: .35; }
.gtfs-kind[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kind); }
.gtfs-kind:focus-visible { outline: 2px solid var(--kind); outline-offset: 3px; }
.gtfs-kind-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.gtfs-kind-trolley { --kind: var(--sofia-transport-trolley); }
.gtfs-kind-tram { --kind: var(--sofia-transport-tram); }
.gtfs-kind-metro { --kind: var(--sofia-transport-metro3); }

/* Линиите с промени от избрания вид; при избрана линия останалите избледняват */
.gtfs-kind-lines { display: flex; flex: none; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.gtfs-kind-lines[hidden] { display: none; }
.gtfs-kind-lines .gtfs-line-badge {
  min-width: 38px;
  border: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.gtfs-kind-lines:has([aria-pressed="true"]) .gtfs-line-badge:not([aria-pressed="true"]) { opacity: .35; }
.gtfs-kind-lines .gtfs-line-badge[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d2d3d; }
.gtfs-kind-lines .gtfs-line-badge:focus-visible { outline: 2px solid #1d2d3d; outline-offset: 2px; }

.gtfs-alerts-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.gtfs-alert-card {
  border-top: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-left: 5px solid #2563eb;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 18px;
}

.gtfs-alert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.gtfs-lines-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gtfs-line-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 6px;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.gtfs-line-badge.line-bus { background-color: var(--sofia-transport-bus); }
.gtfs-line-badge.line-tram { background-color: var(--sofia-transport-tram); color: #ffffff; }
.gtfs-line-badge.line-trolley { background-color: var(--sofia-transport-trolley); }
.gtfs-line-badge.line-night { background-color: var(--sofia-transport-night); }

.gtfs-line-badge.line-metro { background-color: var(--sofia-transport-metro1); }
.gtfs-line-badge.line-metro-1 { background-color: var(--sofia-transport-metro1); }
.gtfs-line-badge.line-metro-2 { background-color: var(--sofia-transport-metro2); }
.gtfs-line-badge.line-metro-3 { background-color: var(--sofia-transport-metro3); }
.gtfs-line-badge.line-metro-4 { background-color: var(--sofia-transport-metro4); color: #1d2d3d; }

.gtfs-period-badge {
  font-size: 0.8rem;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.gtfs-alert-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
}

.gtfs-alert-body p {
  margin: 0 0 8px 0;
}

.gtfs-alert-body p:last-child {
  margin-bottom: 0;
}

.gtfs-alert-body ul, .gtfs-alert-body ol {
  margin: 8px 0;
  padding-left: 20px;
}

.gtfs-alert-body li {
  margin-bottom: 4px;
}

.gtfs-no-results {
  display: none;
  text-align: center;
  padding: 30px;
  color: #64748b;
  font-size: 0.95rem;
}

/* Персонализиран скролбар */
.gtfs-alerts-list::-webkit-scrollbar {
  width: 6px;
}
.gtfs-alerts-list::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.gtfs-alerts-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
/* ---------- END GTFS-ALERTS.CSS ---------- */

/* ---------- START STOP-BOARD.CSS (виртуално табло на спирка в #gtfs-alerts) ---------- */
/* Заема мястото на 2 .tool-а: вляво търсене на спирка, вдясно "Промени в
   градския транспорт"; след избор на спирка - таблото на цялата ширина. */
.feature-card.stop-board {
  grid-column: span 2;
  min-width: 0;
  background: #ffffff;
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.stop-board .feature-title {
  color: #0f172a;
}

.feature-card.stop-board .feature-body {
  font-size: 1rem;
}

.feature-card.stop-board .feature-photo {
  right: 0;
  bottom: 0;
}

/* Височината на картата идва от реда в грида (Времето/Чистота на въздуха
   преди нея), а не от съдържанието ѝ - затова двата изгледа са позиционирани
   абсолютно вътре в нея и скролват, ако съдържанието е по-дълго. */
.feature-card.stop-board {
  height: auto;
}

.stop-board-pick,
.stop-board-view {
  position: absolute;
  inset: 20px;
}

.stop-board-view {
  overflow-y: auto;
}

.stop-board-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
}

.stop-board-search {
  position: relative;
}

.stop-board-search,
.stop-board-alerts {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.stop-board-alerts {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.feature-card.stop-board .stop-board-search .feature-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.feature-card.stop-board.is-board .stop-board-pick {
  display: none;
}

.sb-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.sb-search-row .sb-search-input {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}

.sb-search-row .sb-locate-btn {
  flex: 1 1 0;
  justify-content: center;
  padding: 8px 14px;
}

.sb-map-btn.is-active {
  background: var(--sofia-blue);
  border-color: var(--sofia-blue);
  color: #ffffff;
}

.sb-map-btn.is-active:hover {
  background: var(--sofia-blue);
}

.sb-results[hidden],
.sb-pick-map[hidden] {
  display: none;
}

.sb-pick-map {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  z-index: 0;
}

.sb-search-input:disabled {
  opacity: .6;
  cursor: wait;
}

.sb-locate-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: var(--sofia-blue);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: .15s background-color;
}

.sb-locate-btn:hover {
  background: #eff6ff;
}

.sb-locate-btn.is-locating svg {
  animation: sb-spin 1s linear infinite;
}

.sb-locate-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@keyframes sb-spin {
  to { transform: rotate(360deg); }
}

.sb-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sb-group-label {
  padding: 10px 4px 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.sb-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--row-border);
  border-radius: 6px;
  cursor: pointer;
}

.sb-result:hover {
  background: #f1f5f9;
}

.sb-result-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
}

.sb-result-label {
  display: block;
  font-weight: 700;
}

.sb-result-sub {
  flex: none;
  font-size: .8rem;
  color: var(--text-muted);
}

.sb-result-remove {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.sb-result-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.sb-results-hint,
.sb-results-empty {
  padding: 12px 4px;
  font-size: .9rem;
  color: var(--text-muted);
}

/* --- таблото --- */
.stop-board-view[hidden] {
  display: none;
}

.sb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.sb-head-texts {
  min-width: 0;
}

.sb-head .feature-title {
  margin: 0;
}

.sb-stop-code {
  font-weight: 600;
  color: var(--text-muted);
}

.sb-label-row {
  display: flex;
  gap: 6px;
  max-width: 400px;
  margin-top: 6px;
}

.sb-label-row[hidden] {
  display: none;
}

.sb-label-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  font-size: .9rem;
}

.sb-label-save {
  flex: none;
  padding: 6px 12px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #f59e0b;
  color: #ffffff;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.sb-label-save:hover:not(:disabled) {
  background: #d97706;
}

.sb-label-save:disabled {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #94a3b8;
  cursor: default;
}

.sb-label-save.is-done {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.sb-label-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
}

.sb-updated {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  color: var(--text-muted);
}

.sb-head-actions {
  display: flex;
  gap: 8px;
}

.sb-save-btn,
.sb-close-btn {
  padding: 7px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: .15s background-color;
}

.sb-save-btn:hover,
.sb-close-btn:hover {
  background: #f1f5f9;
}

.sb-save-btn.is-saved {
  border-color: #f59e0b;
  color: #b45309;
  background: #fffbeb;
}

.sb-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px 90px 90px;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
}

.sb-row-head {
  padding-top: 0;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 2px solid #0f172a;
}

.sb-col-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sb-dot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--sofia-transport-bus);
}

.sb-dot.line-bus { background: var(--sofia-transport-bus); }
.sb-dot.line-tram { background: var(--sofia-transport-tram); }
.sb-dot.line-trolley { background: var(--sofia-transport-trolley); }
.sb-dot.line-night { background: var(--sofia-transport-night); }
.sb-dot.line-metro-1 { background: var(--sofia-transport-metro1); }
.sb-dot.line-metro-2 { background: var(--sofia-transport-metro2); }
.sb-dot.line-metro-3 { background: var(--sofia-transport-metro3); }
.sb-dot.line-metro-4 { background: var(--sofia-transport-metro4); color: #1d2d3d; }

.sb-type-icon {
  width: 30px;
  height: 30px;
}

.sb-col-dir {
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-col-alert {
  text-align: center;
}

.sb-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sofia-yellow);
  color: #1d2d3d;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: .15s box-shadow;
}

.sb-alert-icon:hover,
.sb-alert-icon[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(252, 210, 5, .45);
}

.sb-row.is-alert-open {
  border-bottom-color: transparent;
}

.sb-row-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--line);
}

.sb-col-eta,
.sb-col-next {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sb-rows .sb-col-eta {
  font-size: 1.35rem;
  font-weight: 800;
}

.sb-rows .sb-col-next {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sb-rows small {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sb-empty {
  padding: 24px 6px;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .feature-card.stop-board {
    grid-column: auto;
    height: auto;
  }

  .stop-board-pick,
  .stop-board-view {
    position: static;
  }

  .stop-board-view {
    overflow: visible;
  }

  .stop-board-pick {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .stop-board-search .sb-results {
    max-height: 320px;
  }

  .sb-pick-map {
    flex: none;
    height: 340px;
  }

  .stop-board-alerts {
    height: 440px;
    padding-left: 0;
    padding-top: 20px;
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .sb-row {
    grid-template-columns: auto 1fr 22px 58px 52px;
    gap: 8px;
    padding: 8px 2px;
  }

  .sb-type-icon {
    width: 22px;
    height: 22px;
  }

  .sb-dot {
    width: 38px;
    height: 38px;
    font-size: .85rem;
  }

  .sb-row-head {
    font-size: .65rem;
  }

  .sb-col-dir {
    white-space: normal;
    font-size: .9rem;
    line-height: 1.25;
  }

  .sb-rows .sb-col-eta {
    font-size: 1.1rem;
  }

  .sb-rows .sb-col-next {
    font-size: .95rem;
  }
}
/* ---------- END STOP-BOARD.CSS ---------- */


/* ---------- START OUTAGES.CSS ---------- */
.su-widget {
  --su-border: #e2e8f0;
  --su-text-main: #0f172a;
  --su-text-muted: #64748b;
  --su-primary: #2563eb;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.su-widget * { box-sizing: border-box; }

.su-timestamp { font-size: 0.75rem; color: var(--su-text-muted); }

/* Tabs */
.su-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: #f8fafc; padding: 4px; border-radius: 10px; }
.su-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 4px; border: none; background: transparent; color: var(--su-text-muted);
  font-size: 0.8rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.su-tab svg { width: 14px; height: 14px; }
.su-tab.active { background: #ffffff; color: var(--su-text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.su-badge { font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; font-weight: 700; }
.su-badge-red { background: #fee2e2; color: #dc2626; }
.su-badge-blue { background: #dbeafe; color: #2563eb; }
.su-badge-amber { background: #fef3c7; color: #d97706; }

/* Search */
.su-search-box { margin-bottom: 12px; }
.su-search-input {
  width: 100%; padding: 8px 12px; font-size: 0.85rem;
  border: 1px solid var(--su-border); border-radius: 8px; outline: none;
  transition: border-color 0.2s;
}
.su-search-input:focus { border-color: var(--su-primary); }

/* List */
.su-content-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.su-content-container::-webkit-scrollbar { width: 4px; }
.su-content-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.su-tab-pane { display: none; }
.su-tab-pane.active { display: block; }

.su-items-list { display: flex; flex-direction: column; gap: 16px; }

.su-card {
  border-top: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--row-border, rgba(0, 0, 0, 0.08));
  border-left: 5px solid #333;
  border-top-left-radius: 8px; border-bottom-left-radius: 8px;
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
  min-width: 0; overflow-wrap: anywhere;
  cursor: pointer;
  transition: .15s background-color;
}
.su-card:hover {
  background-color: var(--row-hover, rgba(0, 0, 0, .03));
}
.su-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.su-district { min-width: 0; }
.su-start-date { flex-shrink: 0; }
.su-district { font-size: 0.85rem; font-weight: 700; color: var(--text-dark, var(--su-text-main)); }
.su-start-date { font-size: 0.8rem; color: var(--text-muted, var(--su-text-muted)); }
.su-address { font-size: 0.95rem; color: var(--text-dark, #334155); line-height: 1.6; }
.su-restoration {
  display: flex; align-items: center; gap: 4px; font-size: 0.8rem;
  color: #b45309; background: #fffbeb; padding: 4px 8px; border-radius: 6px; font-weight: 500;
}
.su-restoration svg { width: 13px; height: 13px; flex-shrink: 0; }
.su-restoration span { min-width: 0; }

.su-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 10px; color: var(--text-dark, var(--su-text-main)); font-size: 1rem; font-weight: 600; gap: 8px; text-align: center;
}
.su-empty-state[hidden] { display: none; } /* иначе display:flex отгоре бие атрибута hidden */
.su-empty-state svg { width: 32px; height: 32px; color: #10b981; }
/* ---------- END OUTAGES.CSS ---------- */


/* ---------- START CONTAINERS.CSS ---------- */
.sofia-bins-widget {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Подредбата на филтрите долу зависи от ширината на картата, не на екрана */
  container-type: inline-size;
  container-name: sofia-bins;
}

.sofia-bins-filters {
  /* Закотвена към двата ръба на картата, за да не излиза от нея, когато е тясна;
  fit-content + auto margin я центрират, а табовете минават на нов ред при нужда */
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 24px;
  width: fit-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Бутонът за локация е долу вляво (както при паркинг зоните). На тясна карта центрираните
филтри биха го застъпили - там оставяме по 68px (16px + 44px + 8px) от двете страни,
за да остане легендата центрирана спрямо картата.
Разстоянието до текста за OSM/CARTO е като при легендата на паркинг зоните (bottom: 24px),
а на телефон филтрите са на височината на бутона (34px). */
@container sofia-bins (max-width: 700px) {
  .sofia-bins-filters {
    left: 68px;
    right: 68px;
    max-width: calc(100% - 136px);
  }
}

/* Когато табовете не се събират на един ред, flex-wrap оставя кутията широка колкото
   целия ред и отстрани остава празно бяло място - затова ги редим в мрежа 2x2,
   която (с width: fit-content) се свива точно до ширината на табовете. */
@container sofia-bins (max-width: 639px) {
  .sofia-bins-filters {
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding: 8px 12px;
  }
}

@media (max-width: 560px) {
  @container sofia-bins (max-width: 700px) {
    .sofia-bins-filters {
      bottom: 34px;
    }
  }
}

.sofia-bins-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
  user-select: none;
}

.sofia-bins-btn.colored {
  border-color: #22c55e;
  color: #15803d;
}
.sofia-bins-btn.colored.active {
  background: #22c55e;
  color: #ffffff;
}

.sofia-bins-btn.textile {
  border-color: #a855f7;
  color: #7e22ce;
}
.sofia-bins-btn.textile.active {
  background: #a855f7;
  color: #ffffff;
}

.sofia-bins-btn.medicines {
  border-color: #ef4444;
  color: #b91c1c;
}
.sofia-bins-btn.medicines.active {
  background: #ef4444;
  color: #ffffff;
}

.sofia-bins-btn.bottles {
  border-color: #3b82f6;
  color: #1d4ed8;
}
.sofia-bins-btn.bottles.active {
  background: #3b82f6;
  color: #ffffff;
}

.sofia-bins-btn.capsules {
  border-color: #b45309;
  color: #78350f;
}
.sofia-bins-btn.capsules.active {
  background: #b45309;
  color: #ffffff;
}

.sofia-bins-badge {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}

#sofia-bins-map {
  width: 100%;
  height: 640px;
  z-index: 1;
}


/* Стили за клъстерите */
.marker-cluster-colored {
  background-color: rgba(34, 197, 94, 0.4);
}
.marker-cluster-colored div {
  background-color: rgba(34, 197, 94, 0.9);
  color: white;
  font-weight: bold;
}

.marker-cluster-textile {
  background-color: rgba(168, 85, 247, 0.4);
}
.marker-cluster-textile div {
  background-color: rgba(168, 85, 247, 0.9);
  color: white;
  font-weight: bold;
}

.marker-cluster-medicines {
  background-color: rgba(239, 68, 68, 0.4);
}
.marker-cluster-medicines div {
  background-color: rgba(239, 68, 68, 0.9);
  color: white;
  font-weight: bold;
}

.marker-cluster-bottles {
  background-color: rgba(59, 130, 246, 0.4);
}
.marker-cluster-bottles div {
  background-color: rgba(59, 130, 246, 0.9);
  color: white;
  font-weight: bold;
}

.marker-cluster-capsules {
  background-color: rgba(180, 83, 9, 0.4);
}
.marker-cluster-capsules div {
  background-color: rgba(180, 83, 9, 0.9);
  color: white;
  font-weight: bold;
}

/* На тясна карта - по-компактни табове, за да се събират по два на ред до бутона за локация */
@container sofia-bins (max-width: 480px) {
  .sofia-bins-filters {
    right: 6px;
    max-width: calc(100% - 74px);
    gap: 4px;
    padding: 4px 8px;
  }
  .sofia-bins-btn {
    gap: 3px;
    font-size: 12px;
    padding: 4px 7px;
  }
  .sofia-bins-badge {
    padding: 1px 4px;
  }
}

/* Най-тесните телефони (екран ~320px) - без броячите, иначе табовете остават по един на ред */
@container sofia-bins (max-width: 300px) {
  .sofia-bins-badge {
    display: none;
  }
}

/* Карта под ~280px - махаме и цветните кръгчета (цветът се вижда от самия таб) */
@container sofia-bins (max-width: 280px) {
  .sofia-bins-dot {
    display: none;
  }
  .sofia-bins-btn {
    font-size: 11px;
    padding: 4px 6px;
  }
}
/* ---------- END CONTAINERS.CSS ---------- */


/* ---------- START FOOTER.CSS ---------- */
footer {
  margin-top: 20px;
}

/* Декоративна лента най-долу - 4 равни колони в цветовете на София */
.site-stripe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 10px;
}

.site-stripe > span {
  display: block;
}

.wrapper.foot {
  display: flex;
  align-items: center;
  padding: 22px 0;
}

.foot-text {
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
}

.foot-subtext {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #94a3b8;
}

@media (max-width: 560px) {
  .wrapper.foot {
    text-align: center;
    padding: 20px 0;
  }

  .foot-text {
    text-align: center;
  }
}
/* ---------- END FOOTER.CSS ---------- */


/* ---------- START PT-LIVE-MAP.CSS (Градски транспорт на живо) ---------- */

/* Бутонът за цял екран на тази карта е преместен долу вляво, симетрично
   по вертикала на .pt-locate-btn (долу вдясно) и по хоризонтала на
   Leaflet zoom контрола (+/-), който стои горе вляво с margin 10px. */
#pt-live-map-widget .spw-fullscreen-btn {
  top: auto;
  bottom: 16px;
  right: auto;
  left: 10px;
}

@media (max-width: 560px) {
  #pt-live-map-widget .spw-fullscreen-btn {
    bottom: 34px;
  }
}

/* Търсачка за спирки и линии - горе вляво на картата, изместена
   надясно от стандартния Leaflet zoom контрол (+/-), който също стои горе
   вляво с margin 10px и е широк 26px. */
.pt-search-box {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 1000;
  width: min(280px, calc(100% - 126px));
}

.pt-search-input {
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  font-size: .92rem;
  outline: none;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: box-shadow .2s;
}

.pt-search-input:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25), 0 2px 5px rgba(0, 0, 0, .2);
}

.pt-search-input:disabled {
  opacity: .6;
  cursor: wait;
}

.pt-search-results {
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.pt-search-results[hidden] {
  display: none;
}

.pt-search-group-label {
  padding: 8px 14px 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #64748b);
}

.pt-search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
}

.pt-search-result:hover {
  background: var(--row-hover, #f8fafc);
}

.pt-search-result-name {
  flex: 1 1 auto;
  font-size: .92rem;
  color: #1e293b;
}

.pt-search-result-sub {
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-muted, #64748b);
}

.pt-search-empty {
  padding: 12px 14px;
  font-size: .88rem;
  color: var(--text-muted, #64748b);
}

@media (max-width: 560px) {
  .pt-search-box {
    width: calc(100% - 60px);
  }
}
.pt-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 rgba(22, 163, 74, .6);
  animation: pt-live-dot-pulse 1.8s infinite;
  vertical-align: middle;
}

@keyframes pt-live-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .6); }
  70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.feature-card:has(#pt-live-map-widget) {
  background: #fff;
}

#pt-live-map-widget {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

#pt-live-map {
  width: 100%;
  height: 640px;
  z-index: 1;
  background: #f8fafc;
}

/* Балонче на превозно средство/спирка - фиксирано долу по средата на картата,
по-широко, отколкото високо (за разлика от стандартния Leaflet popup,
който тук нарочно не се ползва - живее в pane, който Leaflet трансформира
при пан/зуум, така че position:fixed/absolute вътре в него не би останало
наистина фиксирано спрямо картата). Споделено между попъпа на превозно
средство и попъпа на спирка - само едното от двете е отворено в даден момент. */
.pt-map-popup {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 32px));
  z-index: 1000;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  overflow: hidden;
}

.pt-map-popup[hidden] {
  display: none;
}

/* Дръжка за разтегляне на височината на попъпа (провлачване нагоре/надолу),
по аналогия с livetransport.eu - вертикална чертичка по средата отгоре. */
.pt-map-popup-handle {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.pt-map-popup-handle span {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #cbd5e1;
  transition: background .15s;
}

.pt-map-popup-handle:hover span,
.pt-map-popup-handle.is-dragging span {
  background: #94a3b8;
}

.pt-map-popup .pt-popup-head {
  padding-right: 40px;
}

.pt-map-popup .pt-popup-head .gtfs-line-badge {
  font-size: 18px;
  padding: 5px 12px;
}

.pt-map-popup .pt-popup-body {
  max-height: 190px;
}

.pt-map-popup-close {
  position: absolute;
  top: 16.5px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  border-radius: 50%;
}

.pt-map-popup-close:hover {
  background: var(--row-hover, #f8fafc);
}

/* Превозно средство - единен дизайн на стрелка + номер, ротацията е по CSS градуси */
.pt-vm {
  position: absolute;
  width: 30px;
  height: 30px;
}

.pt-vm.line-bus { --vm-color: var(--sofia-transport-bus); }
.pt-vm.line-tram { --vm-color: var(--sofia-transport-tram); }
.pt-vm.line-trolley { --vm-color: var(--sofia-transport-trolley); }
.pt-vm.line-night { --vm-color: var(--sofia-transport-night); }
.pt-vm.line-metro-1 { --vm-color: var(--sofia-transport-metro1); }
.pt-vm.line-metro-2 { --vm-color: var(--sofia-transport-metro2); }
.pt-vm.line-metro-3 { --vm-color: var(--sofia-transport-metro3); }
.pt-vm.line-metro-4 { --vm-color: var(--sofia-transport-metro4); }

.pt-vm-arrow-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform .5s linear;
}

/* Бял контур зад стрелката (по-голям, еднакво оцветен триъгълник отдолу) -
   без него возило, чийто --vm-color съвпада/е близък до цвета на очертан
   маршрут (routeLine, виж selectSearchRoute), визуално се слива с линията. */
.pt-vm-arrow-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 13px solid #ffffff;
}

.pt-vm-arrow {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--vm-color, var(--sofia-transport-bus));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

.pt-vm-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vm-color, var(--sofia-transport-bus));
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  white-space: nowrap;
}

.pt-vm.line-metro-4 .pt-vm-badge { color: #1d2d3d; }

.pt-vm.is-selected .pt-vm-badge {
  outline: 2px solid #1d2d3d;
  outline-offset: 1px;
}

/* Другите возила при избрано едно от тях - малка точка без номер, същия вид
   като при отдалечен zoom (#pt-live-map.pt-zoomed-out по-долу), но per-маркер. */
.pt-vm.is-dimmed .pt-vm-arrow-wrap {
  display: none;
}

.pt-vm.is-dimmed .pt-vm-badge {
  width: 10px;
  height: 10px;
  font-size: 0;
}

/* Опростен вид на превозните средства при отдалечен zoom (< VEHICLE_DETAIL_MIN_ZOOM) -
малка цветна точка вместо стрелка + номер, аналогично на livetransport.eu.
.pt-vm-badge вече е центриран (inset:0; margin:auto) в 30x30 контейнера .pt-vm,
затова просто го смаляваме, вместо да местим/преоразмеряваме самия .pt-vm -
иначе центърът на точката би се разминал с истинската позиция на возилото. */
#pt-live-map.pt-zoomed-out .pt-vm-arrow-wrap {
  display: none;
}

#pt-live-map.pt-zoomed-out .pt-vm-badge {
  width: 10px;
  height: 10px;
  font-size: 0;
}

/* Обикновена спирка - точка (стилът ѝ се задава през Leaflet опциите в JS,
   защото се рисува в canvas слой заради броя точки - CSS не важи за canvas) */

/* Спирка на метро - икона */
.pt-metro-stop-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* Балонче с име/номер на спирка (Leaflet tooltip) - при много дълги имена на
спирки (виж .leaflet-tooltip { white-space: nowrap } по-горе) балончето може
да излезе извън екрана на мобилни устройства, затова тук пренасяме на нов ред
вместо да разчитаме на изходния nowrap. */
.pt-stop-tooltip.leaflet-tooltip {
  background: rgba(255, 255, 255, .9);
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  /* .leaflet-tooltip-pane (позициониращият родител) е с width:0 по дизайн на
     Leaflet - това чупи стандартния shrink-to-fit изчисление на браузъра за
     width:auto (наличната ширина излиза 0, балончето се свива до най-дългата
     дума). width:max-content игнорира тази "налична ширина" и смята естествената
     ширина директно от съдържанието - едва тогава max-width реално ограничава. */
  width: max-content;
  max-width: 360px !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  text-align: center;
}

.pt-stop-tooltip.leaflet-tooltip-top:before {
  border-top-color: rgba(255, 255, 255, .9);
}

.pt-stop-tooltip .pt-stop-tooltip-code {
  font-weight: 400;
  opacity: .75;
  margin-left: 4px;
}

/* Общ вид на попъп прозорците за превозно средство / спирка */
.leaflet-popup.pt-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.leaflet-popup.pt-popup .leaflet-popup-content {
  margin: 0;
  width: 300px !important;
}

.pt-popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--row-border, #f1f5f9);
}

.pt-popup-head-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pt-popup-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-popup-title-code {
  font-weight: 500;
  color: var(--text-muted, #64748b);
}

.pt-popup-subtitle {
  font-size: 14px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-popup-type-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.pt-popup-body {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px 0;
}

.pt-popup-empty {
  padding: 14px;
  font-size: 15px;
  color: var(--text-muted, #64748b);
}

/* Списък със спирки в попъпа на превозното средство - вертикален timeline.
   Цветът на свързващата линия (--vm-line-color) идва от типа возило - виж
   .pt-popup-body.line-* по-долу, огледало на .pt-vm.line-* за маркерите. */
.pt-popup-body.line-bus { --vm-line-color: var(--sofia-transport-bus); }
.pt-popup-body.line-tram { --vm-line-color: var(--sofia-transport-tram); }
.pt-popup-body.line-trolley { --vm-line-color: var(--sofia-transport-trolley); }
.pt-popup-body.line-night { --vm-line-color: var(--sofia-transport-night); }
.pt-popup-body.line-metro-1 { --vm-line-color: var(--sofia-transport-metro1); }
.pt-popup-body.line-metro-2 { --vm-line-color: var(--sofia-transport-metro2); }
.pt-popup-body.line-metro-3 { --vm-line-color: var(--sofia-transport-metro3); }
.pt-popup-body.line-metro-4 { --vm-line-color: var(--sofia-transport-metro4); }

.pt-stop-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 30px;
  font-size: 15px;
}

/* Същият дизайн като точката на спирка на самата карта (виж L.circleMarker
   в renderStopsLayer): бяло кръгче със синя рамка. */
.pt-stop-row-dot {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #ffffff;
  z-index: 1;
}

.pt-stop-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0px;
  bottom: -50px;
  width: 16px;
  background: var(--vm-line-color, var(--row-border, #e2e8f0));
}

/* Заоблени краища на цялата вертикална лента, свързваща спирките - най-горният
   сегмент (първия ред) и най-долният (последния ред с ::before, виж :not(:last-child)
   по-горе - самият последен ред няма лента). */
.pt-stop-row:first-child::before {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.pt-stop-row:nth-last-child(2)::before {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.pt-stop-row.is-past { color: var(--text-muted, #64748b); }
.pt-stop-row.is-past .pt-stop-row-dot { border-color: #cbd5e1; }
.pt-stop-row.is-next .pt-stop-row-name { color: var(--text-primary, #0f172a); }

.pt-stop-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 10px
}

.pt-stop-row-name {
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-stop-row-status {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Списък с пристигащи превозни средства в попъпа на спирка */
.pt-arrival-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}

.pt-arrival-row + .pt-arrival-row {
  border-top: 1px solid var(--row-border, #f1f5f9);
}

.pt-arrival-badge-wrap {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pt-arrival-badge {
  flex: none;
  min-width: 30px;
  text-align: center;
  font-size: 18px;
}

/* Икона на типа возило (бус/трамвай/тролей/метро) пред номера на линията -
   оцветена със СЪЩИЯ цвят като номера, чрез mask-image върху цветния силует. */
.pt-arrival-type-icon {
  width: 24px;
  height: 24px;
  flex: none;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.pt-arrival-type-icon.line-bus { background-color: var(--sofia-transport-bus); }
.pt-arrival-type-icon.line-tram { background-color: var(--sofia-transport-tram); }
.pt-arrival-type-icon.line-trolley { background-color: var(--sofia-transport-trolley); }
.pt-arrival-type-icon.line-night { background-color: var(--sofia-transport-night); }
.pt-arrival-type-icon.line-metro-1 { background-color: var(--sofia-transport-metro1); }
.pt-arrival-type-icon.line-metro-2 { background-color: var(--sofia-transport-metro2); }
.pt-arrival-type-icon.line-metro-3 { background-color: var(--sofia-transport-metro3); }
.pt-arrival-type-icon.line-metro-4 { background-color: var(--sofia-transport-metro4); }

.pt-arrival-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pt-arrival-headsign {
  font-size: 17px;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ред 2 под името: статус (На време/закъснение/по-рано, оцветен) + старо/ново
   време + евентуален "· на живо" етикет - виж arrivalRowHtml. */
.pt-arrival-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 15px;
}

.pt-arrival-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.pt-arrival-status.is-ontime { color: var(--success, #16a34a); }
.pt-arrival-status.is-late { color: var(--danger, #dc2626); }
.pt-arrival-status.is-early { color: var(--warning, #d97706); }

/* Статус иконата взима цвета на текста си (currentColor) - зелена при "На
   време"/"по-рано", червена при закъснение - виж .pt-arrival-status.is-*. */
.pt-arrival-status-icon {
  width: 13px;
  height: 13px;
  flex: none;
  background-color: currentColor;
  mask-image: url('/img/types/location_gps_icon.svg');
  -webkit-mask-image: url('/img/types/location_gps_icon.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.pt-arrival-times {
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
}

.pt-time-old {
  text-decoration: line-through;
  color: var(--text-primary, #0f172a);
  margin-right: 5px;
}

.pt-time-new.is-late { color: var(--danger, #dc2626); font-weight: 700; }
.pt-time-new.is-early { color: var(--warning, #d97706); font-weight: 700; }

/* Времето за пристигане в дясно е нарочно в СТАНДАРТЕН цвят (без червено/зелено
   по закъснение) - статусът вече се вижда по-долу до името, оцветен там. */
.pt-arrival-eta {
  flex: none;
  text-align: right;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
}

.pt-arrival-eta small {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

/* ---------- END PT-LIVE-MAP.CSS ---------- */

/* ==========================================================================
   Отпадъци извън контейнера — един фон (feature-card), както при Градски
   транспорт на живо. Стар електроуред / Стари гуми / Строителни отпадъци.
   Данни от edrogabaritni-sofia.pages.dev
   ========================================================================== */

#waste.feature-card.bg-white,
#bulky-waste.feature-card.bg-white {
  background: #fff;
}

#bulky-waste.tool {
  margin-bottom: 28px;
}

.waste-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

#waste .waste-grid {
  grid-template-columns: 1.3fr 1fr 1fr;
}

.waste-col-electronics {
  position: relative;
  overflow: hidden;
  padding-top: 16px;
  grid-column: span 1;
}

.waste-col-electronics > *:not(.feature-photo) {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .waste-grid {
    grid-template-columns: 1fr;
  }

  #waste .waste-grid {
    grid-template-columns: 1fr;
  }

  .waste-col-electronics {
    grid-column: span 1;
  }
}

.waste-col-group {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .waste-col-group {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
}

.waste-col + .waste-col {
  border-left: 1px solid var(--border-color, #e2e8f0);
  padding-left: 24px;
}

@media (max-width: 900px) {
  .waste-col + .waste-col {
    border-left: none;
    padding-left: 0;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
  }
}

.waste-col.waste-box {
  position: relative;
  overflow: hidden;
  border-left: none;
  padding: 28px 18px 16px;
  border-radius: 12px;
}

.waste-box > h4,
.waste-box > p {
  position: relative;
  z-index: 1;
}

.waste-box-photo {
  right: 8px;
  bottom: 8px;
  width: 96px;
  height: 96px;
}

.waste-box-green {
  background: rgba(34, 197, 94, .04);
}

.waste-box-red {
  background: rgba(239, 68, 68, .04);
}

.waste-box-gray {
  background: rgba(100, 116, 139, .04);
}

.waste-box-gray .waste-col-title,
.waste-col-electronics .waste-col-title {
    font-size: .90rem;
    font-weight: 700;
    text-transform: uppercase;
  color: #475569;
}

.waste-col-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--text-dark, #0f172a);
}

.waste-col-title-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.waste-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
}

.waste-icon-green {
  background: #22c55e;
}

.waste-icon-red {
  background: #ef4444;
}

.waste-col-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.waste-col-head .waste-col-title {
  margin: 0;
}

.waste-free-badge {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #15803d;
  background: rgba(34, 197, 94, .15);
}

.waste-intro {
  color: var(--text-secondary, #64748b);
}

.waste-contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  margin: 14px 0;
}

@media (max-width: 900px) {
  .waste-contact-grid {
    grid-template-columns: 1fr;
  }
}

.waste-contact-card {
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
}

.waste-contact-card-primary {
  padding: 18px 20px;
  background: rgba(34, 197, 94, .04);
  border-color: rgba(34, 197, 94, .2);
}

.waste-contact-card h5 {
  margin: 2px 0 8px;
  font-size: 1.15rem;
  color: var(--text-dark, #0f172a);
}

.waste-contact-area {
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted, #64748b);
}

.waste-phone {
  display: inline-block;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--sofia-blue, #5784cc);
}

.waste-phone:hover {
  text-decoration: underline;
}

.waste-phone-secondary {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.waste-contact-note {
  font-size: .95rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

.waste-subtitle {
  font-weight: 800;
  font-size: 1.2rem;
  margin-top: 0;
  color: var(--text-dark, #0f172a);
}

.waste-col-electronics .waste-subtitle {
  font-size: 1.3rem;
}

.waste-foot {
  font-size: .95rem;
  color: var(--text-muted, #64748b);
}

/* ==========================================================================
   Кога да изхвърля едрогабаритни отпадъци? — ред над "Отпадъци извън
   контейнера", същия фон и брой колони. Локацията идва директно от
   потребителя (Leaflet карта с фиксиран пин по средата, no geocoding) и
   се сверява със зоните от scripts/bulky-waste-zones.php
   (виж root/templates/bulky-waste.php).
   ========================================================================== */

.bulky-map-col {
  display: flex;
  flex-direction: column;
  grid-column: span 1;
}

.bulky-side-col {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

@media (max-width: 900px) {
  .bulky-map-col,
  .bulky-side-col {
    grid-column: span 1;
  }
}

.bulky-guide-block {
  margin-top: 24px;
}

.bulky-guide-head {
  margin-bottom: 12px;
}

.bulky-guide-eyebrow {
  margin-bottom: 4px;
  font-size: .90rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted, #64748b);
}

.bulky-guide-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
}

.bulky-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .bulky-guide-grid {
    grid-template-columns: 1fr;
  }
}

.bulky-title {
  margin: 0 0 12px;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-dark, #0f172a);
}

#bulky-waste .waste-grid {
  grid-template-columns: 1.3fr 1fr 1fr;
  margin-top: 1.3rem;
}

@media (max-width: 900px) {
  #bulky-waste .waste-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #bulky-waste .bulky-search-row {
    margin-bottom: 0;
  }

  #bulky-waste .waste-grid > .waste-col + .waste-col {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}

.bulky-subtitle {
  margin: 0;
  color: var(--text-muted, #64748b);
}

.bulky-map-wrap {
  position: relative;
  height: 280px;
  margin-top: 32px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
  .bulky-map-wrap {
    height: 360px;
  }
}

.bulky-map {
  width: 100%;
  height: 100%;
}

.bulky-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 32px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  z-index: 500;
}

.bulky-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.bulky-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  font-size: 1.10rem;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background: var(--sofia-blue, #5784cc);
  transition: .15s background-color;
}

.bulky-btn:hover {
  background: #4a72b3;
}

.bulky-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sofia-blue, #5784cc);
  background: #fff;
  border: 1px solid var(--sofia-blue, #5784cc);
}

.bulky-btn-secondary:hover {
  background: #eef2fa;
}

.bulky-status {
  font-size: 1.05rem;
  color: var(--text-dark, #0f172a);
  margin-bottom: 4px;
}

.bulky-status-meta {
  font-size: .78rem;
  color: var(--text-muted, #64748b);
}

.bulky-hint-box {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.bulky-hint-text {
  margin: 0 0 8px;
  color: var(--text-muted, #64748b);
}

.bulky-search-status {
  font-size: .9rem;
  color: var(--text-muted, #64748b);
}

.bulky-search-status.bulky-error {
  color: var(--danger, #dc2626);
}

.bulky-result {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.bulky-result-district {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-dark, #0f172a);
}

.bulky-result-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.bulky-result-chip {
  flex: 1 1 140px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.bulky-result-chip-primary {
  border-color: var(--sofia-blue, #5784cc);
  background: #eef2fa;
}

.bulky-result-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted, #64748b);
}

.bulky-result-value {
  margin-top: 2px;
  font-weight: 700;
  color: var(--text-dark, #0f172a);
  text-transform: capitalize;
}

.bulky-next-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.bulky-next-item {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .88rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--text-dark, #0f172a);
}

/* ==========================================================================
   Карта на авариите — цял ред над "Кога да изхвърля едрогабаритни отпадъци?"
   (виж root/templates/outages-map.php). Полигоните идват от Топлофикация
   София (scripts/outages.php).
   ========================================================================== */

/* Общ ред от две карти: малката вляво (1/4) и голямата вдясно (3/4) -
   Аварии, Трафик, Тоалетни, Култура, Паркиране и т.н. Първият получава
   същата относителна ширина, която имаше в старата 4-колонна мрежа. */
.split-row {
  grid-template-columns: 1fr 3fr;
}

@media (max-width: 900px) {
  .split-row {
    grid-template-columns: 1fr;
  }
}

/* Същият вертикален отстъп между редовете, като при #bulky-waste. */
.split-row {
  margin-bottom: 28px;
}

/* Без фон на картата - самата Leaflet карта е достатъчна визуално, не ни
   трябва бял/градиентен фон на цялата карта. */
#outages-map.feature-card.bg-white {
  background: none;
}

#outages-map.tool {
  padding-left: 0;
  padding-right: 0;
}

.outages-map-subtitle {
  margin: 0 0 16px;
  color: var(--text-muted, #64748b);
}

#outages-map-widget {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
  #outages-map-widget {
    height: 320px;
  }
}

#outagesMap {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #f8fafc;
}

/* Бутонът за локация е долу вляво, както при паркинг зоните. */
#outages-map-widget .pt-locate-btn {
  right: auto;
  left: 16px;
}

.outages-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.outages-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--text-muted, #64748b);
}

.outages-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(226, 35, 26, .22);
  border: 2px solid #e2231a;
}

.outages-legend-swatch--water {
  background: rgba(37, 99, 235, .22);
  border-color: #2563eb;
}

.outages-legend-swatch--power {
  background: rgba(234, 179, 8, .22);
  border-color: #eab308;
}

.outages-popup-title {
  margin: 0 0 8px;
  font-size: 1.2em;
  font-weight: 700;
}

.outages-popup-description {
  margin: 0 0 6px;
  font-weight: 600;
}

.outages-popup-address {
  margin: 0;
}

.outages-popup-restoration {
  margin-top: 10px;
  font-weight: 700;
  color: var(--sofia-red);
}

/* ==========================================================================
   Тоалетни + Карта на тоалетните — ред под "Аварии" (виж root/templates/toilets.php,
   toilets-map.php). Данните са от toaletna.com, само точките от OpenStreetMap
   (scripts/toilets.php). Редът ползва същата мрежа като .split-row.
   ========================================================================== */

/* 4 таба - на тясната колона "Бензиностанции" не се събира на един ред с останалите */
.tl-widget .su-tabs { flex-wrap: wrap; }
.tl-widget .su-tab { flex: 1 1 auto; white-space: nowrap; }
.tl-badge { background: #dcfce7; color: #3f6f32; }

.tl-fee {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.tl-fee-free { background: #ffffff; color: #3f6f32; }
.tl-fee-paid { background: #fef3c7; color: #b45309; }

.tl-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-fact {
  font-size: .78rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .18);
  color: var(--text-dark, #fff);
}

#toilets-map.feature-card.bg-white {
  background: none;
}

#toilets-map.tool {
  padding-left: 0;
  padding-right: 0;
}

#toilets-map-widget {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
  #toilets-map-widget {
    height: 320px;
  }
}

#toiletsMap {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #f8fafc;
}

#toilets-map-widget .pt-locate-btn {
  right: auto;
  left: 16px;
}

.tl-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.tl-kind-public { background: #5e984b; }
.tl-kind-gas { background: #d97706; }
.tl-kind-station { background: #5784cc; }
.tl-kind-venue { background: #8b5cf6; }

.tl-popup-facts {
  margin-top: 8px;
  font-weight: 600;
}

.tl-popup-route {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
}

/* ==========================================================================
   Спорт + Карта на спорта — ред под "Тоалетни" (виж root/templates/sport.php,
   sport-map.php, scripts/sport.php). Картата ползва стиловете на тоалетните за
   popup-ите и легендата.
   ========================================================================== */

/* На компютър картата "Спорт" е висока колкото картата вдясно с двете легенди, а не
   фиксираните 480px на другите карти с табове. contain: size - списъкът (стотици места)
   не влияе на височината на реда, а редът я определя по картата; тогава картата се
   разтяга до нея (stretch) и списъкът скролва. На телефон остава height: auto. */
@media (min-width: 901px) {
  #sport.feature-card {
    height: auto;
    contain: size;
  }
}
.sp-bike { flex: none; }

.sp-widget .su-tabs { flex-wrap: wrap; }
.sp-widget .su-tab { flex: 1 1 auto; white-space: nowrap; }
.sp-badge { background: #dbeafe; color: #1e3a8a; }

.sp-bike {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
}
.sp-bike-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.sp-bike-km { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.sp-bike-label { font-weight: 600; }
.sp-bike-note { margin-top: 2px; font-size: .82rem; opacity: .85; }
.sp-bike-bar {
  display: flex;
  height: 10px;
  margin: 10px 0 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .3);
}
.sp-bike-bar span { flex-basis: 0; }
.sp-bike-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.sp-bike-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.sp-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff;
}
.sp-bike-type-separated { background: #15803d; }
.sp-bike-type-lane { background: #2563eb; }
.sp-bike-type-sidewalk { background: #f59e0b; }
.sp-bike-type-shared { background: #a855f7; }

.sp-official {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #1e3a8a;
}

.sp-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .18);
  color: var(--text-dark, #fff);
}

#sport-map.feature-card.bg-white {
  background: none;
}

#sport-map.tool {
  padding-left: 0;
  padding-right: 0;
}

#sport-map-widget {
  position: relative;
  width: 100%;
  height: 720px;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
  #sport-map-widget {
    height: 360px;
  }
}

#sportMap {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #f8fafc;
}

#sport-map-widget .pt-locate-btn {
  right: auto;
  left: 16px;
}

.sp-legend-line {
  display: inline-block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
}
.sp-legend-osm { background: repeating-linear-gradient(90deg, #64748b 0 4px, transparent 4px 7px); }
.sp-kind-outdoor { background: #ea580c; }
.sp-kind-pool { background: #0891b2; }
.sp-kind-venue { background: #334155; }
.sp-kind-gym { background: #9333ea; }

/* ==========================================================================
   Образование (виж root/templates/education.php, education-map.php и education-stats.php)
   ========================================================================== */
/* Като "Спорт": на компютър редът е висок колкото картата, а списъкът скролва */
@media (min-width: 901px) {
  #education.feature-card { height: auto; contain: size; }
}
.ed-summary, .ed-stats-link { flex: none; }
.ed-widget .su-tabs { flex-wrap: wrap; }
.ed-widget .su-tab { flex: 1 1 auto; white-space: nowrap; }
.ed-badge { background: #dcfce7; color: #14532d; }
.ed-summary { display: flex; gap: 10px; margin-bottom: 6px; }
.ed-stat { flex: 1 1 0; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .18); }
.ed-stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ed-stat-label { font-size: .85rem; }
.ed-stats-link { display: inline-block; margin-bottom: 12px; font-size: .9rem; font-weight: 700; color: inherit; }
.ed-badge-free {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #15803d;
}
.sp-fact.ed-link { color: inherit; text-decoration: none; font-weight: 700; }
.sp-fact.ed-link:hover { text-decoration: underline; }

#education-map.feature-card.bg-white { background: none; }
#education-map.tool { padding-left: 0; padding-right: 0; }
#education-map-widget {
  position: relative;
  width: 100%;
  height: 720px;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
@media (max-width: 900px) {
  #education-map-widget { height: 360px; }
}
#educationMap { width: 100%; height: 100%; z-index: 1; background: #f8fafc; }
#education-map-widget .pt-locate-btn { right: auto; left: 16px; }
.ed-kind-nursery { background: #db2777; }
.ed-kind-kg { background: #f59e0b; }
.ed-kind-school { background: #2563eb; }
.ed-popup-groups { margin: 6px 0; border-collapse: collapse; font-size: .82rem; }
.ed-popup-groups th { font-weight: 600; color: #64748b; text-align: right; padding: 0 0 2px 10px; }
.ed-popup-groups td { padding: 1px 0 1px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.ed-popup-groups td:first-child { padding-left: 0; text-align: left; }
.ed-popup-groups small { color: #64748b; }
.ed-popup-free { color: #15803d; font-weight: 700; }

/* Таблото с недостига - като колите (.bd, .cr): червено чакат, зелено свободни */
.ed-red { color: #dc2626; }
.ed-green { color: #15803d; }
.ed-stats .bd-bar.ed-bar-waiting, .ed-stats .bd-swatch.ed-swatch-waiting { background: #ef4444; }
.ed-stats .bd-bar.ed-bar-free, .ed-stats .bd-swatch.ed-swatch-free { background: #22c55e; }
.ed-stats .ed-rows .bd-row-label { flex-direction: column; gap: 0; }
.ed-stats .bd-bar.ed-bar-free { height: 6px; }
.ed-stats .ed-rows .bd-row-value { grid-template-columns: auto 3.4em; column-gap: 10px; }
/* Чакащите по дни: ясла и градина - в цветовете от картата */
.ed-stats .cr-plot polyline.ed-line-nursery { stroke: #db2777; }
.ed-stats .cr-plot polyline.ed-line-kindergarten { stroke: #f59e0b; }
.ed-stats .cr-pt.ed-pt-nursery, .ed-stats .bd-swatch.ed-swatch-nursery { background: #db2777; }
.ed-stats .cr-pt.ed-pt-kindergarten, .ed-stats .bd-swatch.ed-swatch-kindergarten { background: #f59e0b; }
.ed-stats .cr-plot polyline { stroke-width: 2.5; }
/* Много дни - точките са малки, за да се вижда линията; последната остава голяма */
.ed-chart-dense .cr-pt:not(.cr-pt-last) { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: none; }
.ed-stats.cr .ed-rows .bd-row,
.ed-stats.cr .cr-cols .ed-rows .bd-row { grid-template-columns: minmax(140px, 220px) 1fr 7.6em; }
@media (max-width: 560px) {
  .ed-stats.cr .ed-rows .bd-row,
  .ed-stats.cr .cr-cols .ed-rows .bd-row { grid-template-columns: minmax(0, 1fr) 7.6em; }
  .ed-summary .ed-stat-value { font-size: 1.35rem; }
}

/* ==========================================================================
   Райони и квартали (виж root/templates/districts.php и districts-map.php)
   ========================================================================== */
/* Като "Образование": на компютър редът е висок колкото картата, а списъкът скролва */
@media (min-width: 901px) {
  #districts.feature-card { height: auto; contain: size; }
}
.ds-hint { flex: none; margin: 0 0 12px; font-size: .9rem; }
.ds-widget .su-tabs { flex-wrap: wrap; }
.ds-widget .su-tab { flex: 1 1 auto; white-space: nowrap; }
.ds-badge { background: #dbeafe; color: #1e3a8a; }
.ds-card-badge {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
}
.ds-card .su-start-date { display: flex; align-items: center; gap: 6px; }
.ds-card .tl-legend-dot { width: 10px; height: 10px; flex-shrink: 0; }

#districts-map.feature-card.bg-white { background: none; }
#districts-map.tool { padding-left: 0; padding-right: 0; }
#districts-map-widget {
  position: relative;
  width: 100%;
  height: 720px;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
@media (max-width: 900px) {
  #districts-map-widget { height: 420px; }
}
#districtsMap { width: 100%; height: 100%; z-index: 1; background: #f8fafc; cursor: pointer; }
#districts-map-widget .pt-locate-btn { right: auto; left: 16px; }

/* Имената на районите и кварталите върху картата */
.ds-label { pointer-events: none; }
.ds-label span {
  display: block;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 800;
  color: #1e3a8a;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.ds-label-district span { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.ds-label-quarter span { font-size: .72rem; font-weight: 700; color: #334155; }
.ds-popup-district { margin-top: 8px; font-weight: 700; }

/* Карето с района и квартала - горе вляво до бутоните за приближение */
.ds-info {
  position: absolute;
  top: 10px;
  left: 56px;
  z-index: 1000;
  width: 300px;
  max-height: calc(100% - 90px);
  overflow-y: auto;
  padding: 12px 34px 12px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(23, 50, 75, .2);
  font-size: .9rem;
  line-height: 1.45;
}
.ds-info[hidden] { display: none; }
.ds-info-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}
/* На телефон картата е малка - карето е под нея, а на цял екран - върху долната ѝ част */
@media (max-width: 560px) {
  #districts-map-widget:not(.is-fullscreen) { height: auto; }
  #districts-map-widget:not(.is-fullscreen) #districtsMap { height: 380px; }
  #districts-map-widget:not(.is-fullscreen) .pt-locate-btn { top: 320px; bottom: auto; }
  #districts-map-widget:not(.is-fullscreen) .ds-info {
    position: relative; top: auto; left: auto; width: auto; max-height: none;
    border-top: 1px solid #e2e8f0; border-radius: 0; box-shadow: none;
  }
  #districts-map-widget.is-fullscreen .ds-info {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 40%; border-radius: 12px 12px 0 0;
  }
}
.ds-popup-district small, .outages-popup-title small { color: #64748b; font-weight: 600; }

/* Легендата - бутони, които скриват/показват вида */
.ds-legend { gap: 6px 8px; }
.ds-legend-item {
  padding: 3px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.ds-legend-item[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.ds-legend-toggle { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: .88rem; color: var(--text-muted, #64748b); cursor: pointer; }
.ds-kind-city { background: #1e3a8a; }
.ds-kind-district { background: #2563eb; }
.ds-kind-mayor { background: #0891b2; }
.ds-kind-police { background: #dc2626; }
.ds-kind-docs { background: #7c3aed; }
.ds-kind-fire { background: #ea580c; }
.ds-kind-nap { background: #16a34a; }
.ds-kind-social { background: #db2777; }
.ds-kind-court { background: #475569; }

/* ==========================================================================
   Нискоемисионна зона (виж root/templates/low-emission-zone.php).
   Статично съдържание - граници/еко групи/санкции от sofia.bg.
   ========================================================================== */

.lez-period {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--text-dark, #0f172a);
}

.lez-rings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.lez-ring {
  flex: 1 1 130px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  /* Сега е <button> (кликаем - показва картата на ринга под тях) - пълен reset
     на UA стиловете на бутона, за да изглежда текстът вътре точно както преди,
     когато беше обикновен div. */
  display: block;
  width: auto;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0;
  cursor: pointer;
  transition: .15s border-color, .15s box-shadow;
}

.lez-ring:hover {
  border-color: var(--sofia-blue, #5784cc);
}

.lez-ring.active {
  border-color: var(--sofia-blue, #5784cc);
  box-shadow: 0 0 0 1px var(--sofia-blue, #5784cc);
}

.lez-ring-name {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  /* Фиксиран цвят, не var(--text-dark)/(--text-muted) - тази кутийка е винаги
     на бял фон, независимо от цветната тема на картата отвън. */
  color: #64748b;
  margin-bottom: 2px;
}

.lez-ring-rule {
  font-size: 16px;
  color: #0f172a;
}

.lez-ring-map-wrap {
  position: relative;
  height: 220px;
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e2e8f0);
}

.lez-ring-map {
  width: 100%;
  height: 100%;
  background: #f8fafc;
}

.lez-facts {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 16px;
  color: var(--text-dark, #0f172a);
}

.lez-facts li {
  margin-bottom: 8px;
}

.lez-facts li:last-child {
  margin-bottom: 0;
}

.lez-fines {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--text-dark, #0f172a);
}

.lez-more-link {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 17px;
  border-radius: 8px;
  border: 2px solid var(--sofia-blue, #5784cc);
  background: #ffffff;
  color: var(--sofia-blue, #5784cc);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: normal;
  transition: .15s background-color, .15s color;
}

.lez-more-link:hover {
  background: var(--sofia-blue, #5784cc);
  color: #ffffff;
}

/* Декоративната снимка в ъгъла - долу вдясно, изтеглена с 15px и полу-прозрачна,
   както при другите 3 карти в реда (Промени в градския транспорт, Нискоемисионна
   зона, Новини) - .feature-blue-light иначе я показва горе вдясно, напълно видима. */
#e-services .feature-photo {
  top: auto;
  right: 15px;
  bottom: 15px;
  opacity: .2;
}
/* ---------- START LOCATION-SEARCH.CSS ("Търси във всички данни" - търсене по координати) ---------- */
.geo-search-section {
  padding-bottom: 0;
}

.geo-search-section + section {
  padding-top: 14px;
}

.geo-search {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(23, 50, 75, .05);
  padding: 16px 18px 18px;
}

.geo-search-head {
  margin-bottom: 14px;
}

.geo-search-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d97706;
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
}

.geo-search-label span {
  color: #1d2d3d;
}

.geo-search-desc {
  margin: 6px 0 10px;
  font-size: .92rem;
  line-height: 1.4;
  color: #64748b;
}

/* Къде търси - като малки етикети */
.geo-search-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.geo-search-sources li {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: .82rem;
  line-height: 1.4;
}

.geo-search-bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.geo-search-bar .geo-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 12px 14px;
  font-size: 1rem;
}

.geo-search-map-wrap[hidden],
.geo-search-results[hidden] {
  display: none;
}

.geo-search-map-wrap {
  position: relative;
  height: 320px;
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.geo-search-map {
  width: 100%;
  height: 100%;
  z-index: 0;
}

.geo-search-results {
  margin-top: 6px;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--line);
}

.geo-results-msg {
  padding: 4px 6px 6px;
  font-size: .92rem;
  color: #64748b;
}

.geo-results-msg.is-error {
  color: #b91c1c;
}

.geo-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 8px;
  font-size: .9rem;
  color: #64748b;
}

.geo-results-head strong {
  color: #1d2d3d;
  font-variant-numeric: tabular-nums;
}

.geo-results-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}

.geo-results-close:hover {
  background: #f1f5f9;
}

.geo-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}

.geo-card {
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-size: .88rem;
  line-height: 1.35;
}

.geo-card.is-ok { border-left-color: var(--sofia-green); }
.geo-card.is-warn { border-left-color: #f59e0b; }
.geo-card.is-alert { border-left-color: var(--sofia-red); background: #fff7f5; }
.geo-card.is-blue { border-left-color: #0056b3; }
.geo-card.is-green { border-left-color: #28a745; }

.geo-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.geo-card-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.geo-card-label {
  flex: 1 1 auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}

.geo-card-link {
  flex: none;
  padding: 0 4px;
  color: var(--sofia-blue);
  font-weight: 700;
}

.geo-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.geo-card-line {
  margin-top: 3px;
}

.geo-muted,
.geo-card-more {
  color: #64748b;
}

.geo-card-more {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
}

/* "Покажи на картата" в картата на тоалетните */
.geo-toilet {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sofia-blue, #5784cc);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.geo-toilet:hover {
  text-decoration: underline;
}

.geo-outage {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 6px 8px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #ffffff;
  text-align: left;
  font-size: .85rem;
  line-height: 1.3;
  cursor: pointer;
}

.geo-outage:hover {
  border-color: var(--sofia-red);
}

.geo-outage span {
  display: block;
}

.geo-outage-when {
  margin-top: 2px;
  color: #b91c1c;
  font-weight: 600;
}

@media (max-width: 700px) {
  .geo-search {
    padding: 14px 12px 12px;
  }

  .geo-search-bar .sb-locate-btn span {
    display: none;
  }

  .geo-search-bar .sb-locate-btn {
    padding: 0 10px;
  }

  .geo-search-map-wrap {
    height: 280px;
  }

  .geo-results-grid {
    grid-template-columns: 1fr;
  }
}

.geo-clamp {
  display: block;
}

/* Десктоп - компактни карти, по възможност всички 8 на един ред */
@media (min-width: 701px) {
  .geo-results-head {
    padding-bottom: 6px;
    font-size: .9rem;
  }

  .geo-results-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
  }

  .geo-card {
    min-width: 0;
    padding: 8px 10px;
    border-left-width: 3px;
    font-size: .88rem;
    line-height: 1.3;
  }

  .geo-card-head {
    margin-bottom: 2px;
  }

  .geo-card-icon {
    width: 20px;
    height: 20px;
  }

  .geo-card-label {
    font-size: .72rem;
  }

  .geo-card-title {
    font-size: 1rem;
    line-height: 1.25;
  }

  .geo-card-line {
    margin-top: 1px;
  }

  .geo-card-more {
    margin-top: 2px;
    font-size: .82rem;
  }

  .geo-extra {
    display: none;
  }

  .geo-clamp {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .geo-outage {
    margin-top: 3px;
    padding: 5px 7px;
    font-size: .85rem;
  }

  .geo-outage .geo-outage-addr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 1500px) {
  .geo-results-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Трафик + Карта на трафика — ред между "Аварии" и "Тоалетни" (виж
   root/templates/traffic.php, traffic-map.php). Данните са от TomTom
   (scripts/traffic.php). Редът ползва същата мрежа като .split-row.
   ========================================================================== */

.tf-widget .su-tabs { flex-wrap: wrap; }
.tf-widget .su-tab { flex: 1 1 auto; white-space: nowrap; }
.tf-badge { background: #fef3c7; color: #b45309; }

/* Цветовете на видовете - същите като kindColors в traffic-map.php */
.tf-card.tf-kind-jam { border-left-color: #f97316; }
.tf-card.tf-kind-jam.tf-major { border-left-color: #dc2626; }
.tf-card.tf-kind-closed { border-left-color: #7f1d1d; }
.tf-card.tf-kind-works { border-left-color: #7c3aed; }
.tf-card.tf-kind-other { border-left-color: #64748b; }

.tf-delay {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #c2410c;
}

.tf-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-fact {
  font-size: .78rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .45);
  color: var(--text-dark, #1d2d3d);
}

#traffic-map.feature-card.bg-white {
  background: none;
}

#traffic-map.tool {
  padding-left: 0;
  padding-right: 0;
}

#traffic-map-widget {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
  #traffic-map-widget {
    height: 320px;
  }
}

#trafficMap {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #f8fafc;
}

#traffic-map-widget .pt-locate-btn {
  right: auto;
  left: 16px;
}

/* Линия като на картата */
.tf-legend-line {
  display: inline-block;
  width: 18px;
  height: 5px;
  border-radius: 3px;
}
.tf-legend-line.tf-kind-jam { background: #f97316; }
.tf-legend-line.tf-kind-jam.tf-major { background: #dc2626; }
.tf-legend-line.tf-kind-closed {
  height: 7px;
  background: repeating-linear-gradient(90deg, #ffffff 0 4px, transparent 4px 7px) center / 100% 3px no-repeat, #7f1d1d;
}
.tf-legend-line.tf-kind-works { background: #7c3aed; }

/* ==========================================================================
   Култура + Програма на фестивалите — ред под "Тоалетни" (виж
   root/templates/culture.php, culture-programs.php). Данните са от
   json/culture.json (scripts/culture.php). Редът ползва същата мрежа като .split-row.
   ========================================================================== */

#culture,
#culture-programs {
  height: 480px;
  /* Иначе клетката в мрежата (1fr = minmax(auto, 1fr)) не става по-тясна от съдържанието си -
     а минималната ширина на въртящите се колони е сумата от всички тях - и на телефон редът излиза вдясно */
  min-width: 0;
}

#culture .feature-body,
#culture-programs .feature-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.cu-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cu-filters[hidden] { display: none; }
.cu-filters .su-search-input { color: #0f172a; background: #fff; font-family: inherit; }
/* Датата и търсенето - на един ред, под тях видът и (при избран вид) фестивалът/залата */
.cu-date-box, .cu-search { flex: 1 1 calc(50% - 4px); min-width: 0; }
.cu-date-box { position: relative; }
.cu-kind, .cu-source { flex: 1 1 0; min-width: 0; cursor: pointer; }
.cu-source[hidden] { display: none; }
.cu-date { padding-right: 30px; }
/* type="date" няма placeholder, а празното поле на Android е съвсем бяло - надписът стои отгоре,
   докато няма избрана дата (.has-date слага filterCulture); родният "дд.мм.гггг" на десктоп се скрива под него */
.cu-date-placeholder {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: .85rem;
  pointer-events: none;
}
.cu-date-box:not(.has-date) .cu-date:not(:focus) { color: transparent; }
.cu-date:focus ~ .cu-date-placeholder,
.cu-date-box.has-date .cu-date-placeholder { display: none; }

.cu-date-clear {
  position: absolute;
  top: 50%;
  right: 34px;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #64748b;
  font-size: .8rem;
  cursor: pointer;
  padding: 4px;
}

.cu-list { gap: 10px; }

.cu-day {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  padding-top: 6px;
}
.cu-day:first-child { padding-top: 0; }

.cu-card { border-left-color: var(--cu-color, #64748b); padding: 12px 14px; gap: 4px; }
.cu-card .su-address { font-size: .88rem; line-height: 1.4; }
.cu-card .su-district { font-size: 0.95rem; }

.cu-time {
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--sofia-blue);
}

/* Видът на картата (Театър, Кино...) пред името на източника */
.cu-kind-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: 1px;
}

/* Дясната част - колона за всеки фестивал, винаги 3 на ред, при повече - скрол надясно */
#culture-programs.feature-card.bg-white { background: none; }
#culture-programs.tool { padding-left: 0; padding-right: 0; }
#culture-programs .feature-header { margin-bottom: 12px; }

.cu-nav { display: flex; gap: 6px; }
.cu-nav[hidden] { display: none; }
.cu-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.cu-nav-btn:disabled { opacity: .35; cursor: default; }

.cu-columns {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cu-columns::-webkit-scrollbar { display: none; }

.cu-col[hidden] { display: none; }
.cu-col {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 5px solid var(--cu-color, #64748b);
  border-radius: 12px;
  overflow: hidden;
}

.cu-col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.cu-col-title { font-weight: 800; color: #0f172a; }
.cu-col-title:hover { text-decoration: underline; }
.cu-col-period { flex-shrink: 0; font-size: .8rem; color: #64748b; }

.cu-col-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 12px; }
.cu-col-list::-webkit-scrollbar { width: 4px; }
.cu-col-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.cu-col-day {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 10px 0 6px;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #64748b;
}

.cu-row {
  display: flex;
  gap: 10px;
  padding: 7px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  color: #0f172a;
}
.cu-row:hover { background: #f8fafc; }
.cu-row-time { flex-shrink: 0; width: 42px; font-size: .85rem; font-weight: 800; color: var(--sofia-blue); }
.cu-row-main { display: flex; flex-direction: column; min-width: 0; }
.cu-row-title { font-size: .9rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cu-row-venue { font-size: .8rem; color: #64748b; }

@media (max-width: 900px) {
  /* На телефон - една колона и малко от следващата, за да личи, че се върти */
  .cu-columns { grid-auto-columns: 85%; }
}

/* Подсказка "два пръста" върху картите на телефон - виж "КАРТИ НА ТЕЛЕФОН" в minified.js */
.map-gesture-hint {
  position: absolute;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.map-gesture-hint.is-visible { opacity: 1; }

/* Списъци на телефон - "Покажи още" вместо вътрешен скрол (виж "СПИСЪЦИ НА ТЕЛЕФОН" в minified.js) */
.sl-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  /* Не var(--text-primary) - оцветените карти (Аварии, Трафик...) го правят бяло */
  color: #0f172a;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.sl-more[hidden] { display: none; }

@media (max-width: 900px) {
  .feature-card:has(.gtfs-alerts-list),
  .feature-card:has(.su-tabs),
  #culture,
  #culture-programs,
  .stop-board-alerts {
    height: auto;
  }

  /* И по двете оси - overflow-x: hidden с overflow-y: visible браузърът прави на auto */
  .su-content-container,
  .gtfs-alerts-list,
  .cu-col-list {
    flex: none;
    overflow: visible;
  }

  .sl-over { display: none !important; }

  /* Табовете (Аварии, Трафик, Тоалетни) - поне 44px за пръст */
  .su-tab {
    min-height: 44px;
    padding: 8px 6px;
    font-size: 0.9rem;
  }

  .gtfs-alert-body:not(.is-open) {
    max-height: 6.4em; /* 4 реда при line-height 1.6 */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
  }
}

.sl-read {
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--accent-blue, #0284c7);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.sl-read[hidden] { display: none; }

/* Времето на телефон - един ред вместо картите "Времето" и "Чистота на въздуха"
   (виж templates/weather-summary.php и "ВРЕМЕТО НА ТЕЛЕФОН" в minified.js) */
.wx-summary { display: none; }

@media (max-width: 900px) {
  .wx-summary {
    order: -1;
    /* Като при #weather.tool - иначе grid item-ът не става по-тесен от текста си (white-space: nowrap
       на описанието) и разтяга цялата колона, а с нея и "Виртуално табло" вдясно извън екрана */
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .wx-summary-icon { flex: none; display: flex; }
  .wx-summary-icon svg { width: 34px; height: 34px; }
  .wx-summary-temp { flex: none; font-size: 24px; font-weight: 800; }

  .wx-summary-cond {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
  }

  .wx-summary-air {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
  }

  .wx-summary-chevron { flex: none; color: #64748b; transition: transform .2s; }
  .wx-open > .wx-summary .wx-summary-chevron { transform: rotate(180deg); }

  .tools:not(.wx-open) > #weather,
  .tools:not(.wx-open) > #air {
    display: none;
  }
}

/* ==========================================================================
   ГОРНИ РЕДОВЕ (.top-rows в index.php)
   В HTML-а са в реда за телефон: времето и въздухът, транспортът, картата на живо.
   На компютър order ги пренарежда: транспорт, карта, времето - а времето е без слайдер,
   с трите дни в три колони и въздуха в четвъртата.
   ========================================================================== */
.top-rows {
  display: flex;
  flex-direction: column;
}

/* Отпадъците (#waste) досега бяха преди section с padding - сега след тях е редът с Контейнери,
   затова им трябва собствен отстъп, същият като между другите редове. Под Контейнери идва
   section ("За автора") с padding-top 28px - без margin-bottom на реда, за да не стане двойно. */
#waste {
  margin-bottom: 28px;
}

.split-row-reverse {
  margin-bottom: 0;
}

@media (min-width: 901px) {
  /* Контейнери (3/4) и Електронни услуги (1/4) вдясно - обратното на .split-row
     (само тук - на телефон остава една колона от .split-row) */
  .split-row-reverse {
    grid-template-columns: 3fr 1fr;
  }

  .top-rows > .transport-row { order: 1; }
  .top-rows > #live-map { order: 2; }
  .top-rows > .weather-row { order: 3; }

  /* Първият ред няма собствена височина: таблото на спирка е с абсолютно позиционирано съдържание,
     а Разписания нарочно не расте от своето (contain: size). Без минимум редът става висок колкото
     "Градски транспорт" - а той е по-нисък, когато няма закъсняващи линии (нощем). */
  .top-rows > .transport-row .tools {
    grid-auto-rows: minmax(600px, auto);
  }

  #weather.tool {
    grid-column: span 3;
  }

  /* Слайдерът показва три слайда наведнъж и се мести с по един (JS-ът чете колко са видими от
     ширината на слайда). Всеки слайд е с 20px отстъп от двете страни, а viewport-ът излиза с 20px
     навън и ги отрязва (clip-path) - така крайните колони са подравнени с картата, а чертата
     между колоните не се вижда на ръба */
  #weather .weather-slider-viewport {
    width: auto;
    margin: 0 -20px;
    clip-path: inset(0 20px);
  }

  #weather .weather-slide {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
    box-sizing: border-box;
    padding: 0 20px;
  }
  #weather .weather-slide + .weather-slide {
    border-left: 1px solid var(--line);
  }
  /* Отстъпите отгоре/отдолу са на всички слайдове, за да са подравнени редовете с "В момента".
     Фонът на "В момента" почва от ръба на картата (лявите 20px се отрязват от clip-path), затова
     съдържанието е навътре с още 14px */
  #weather .weather-slide { padding-top: 12px; padding-bottom: 12px; }
  /* Ред под колоните за бутона "По часове" и стрелките - колоните са с еднакъв брой редове
     и под тях няма празно място */
  #weather .wx-days { padding-bottom: 44px; }
  #weather .weather-slide-now { padding-left: 34px; }
  /* Празният ред мин./макс. на "В момента" пази височината си - редовете в колоните са подравнени */
  #weather .min-max-badge.is-empty { display: flex; visibility: hidden; }
  #weather .weather-slide-now::before { inset: 0 6px 0 20px; }

  #weather .weather-slider-dots {
    display: none;
  }

  /* Платени зони и Зарядни станции - картите са по-ниски от 640px, за да не са твърде високи
     редовете с паркоместата и нискоемисионната зона (на цял екран - както си е).
     #ev-map е с inline height: 640px в charging.php, затова !important */
  #sofia-parking-widget:not(.is-fullscreen) {
    height: 500px;
  }
  #ev-charging-widget:not(.is-fullscreen) #ev-map {
    height: 500px !important;
  }

  /* "София" само над първия слайд - при другите остава място, за да са подравнени редовете в колоните */
  #weather .weather-slide + .weather-slide .location-info {
    visibility: hidden;
  }
}

/* На по-тесен компютър три колони не се събират (етикетите се пренасят, таблиците излизат) -
   слайдерът показва по два слайда */
@media (min-width: 901px) and (max-width: 1199px) {
  #weather .weather-slide {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (max-width: 900px) {
  /* Същото разстояние между реда за времето и таблото като преди, когато бяха в една мрежа */
  .top-rows > .weather-row { padding-bottom: 0; }
  .top-rows > .transport-row { padding-top: 14px; }
  /* На компютър разстоянието под горните редове идва от section-а на времето, тук картата е последна */
  .top-rows > #live-map { margin-bottom: 28px; }
}

/* ==========================================================================
   РАЗПИСАНИЯ (templates/timetables.php, "РАЗПИСАНИЯ" в minified.js)
   На компютър е ¼ от първия ред - височината е като на съседните карти, а списъците
   (линиите, спирките) се скролват вътре (contain: size - иначе растат и разпъват реда).
   На телефон растат свободно - спирките са с "Покажи още".
   ========================================================================== */
.feature-card.tt-card {
  min-width: 0;
  background: #ffffff;
  color: #0f172a;

  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --row-border: #f1f5f9;
  --row-hover: #f8fafc;
}

.feature-card.tt-card .feature-title {
  color: #0f172a;
}

/* Часовникът е кръгъл - в самия ъгъл заобленият ръб на картата го реже, затова 15px навътре
   (както при Аварии, Трафик и др.) */
.feature-card.tt-card .feature-photo {
  right: 15px;
  bottom: 15px;
}

.tt-widget {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.tt-pick,
.tt-route {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.tt-pick[hidden],
.tt-route[hidden],
.tt-widget [hidden] { display: none; }

.tt-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  contain: size;
  scrollbar-width: thin;
}

.tt-types { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-types button {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.tt-types button.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.tt-types.is-searching button.is-active { background: #fff; border-color: var(--line); color: #475569; }

.tt-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  padding-bottom: 4px;
}
.tt-line {
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
}
.tt-line:hover { filter: brightness(1.1); }

.tt-empty {
  grid-column: 1 / -1;
  padding: 12px 0;
  color: #64748b;
  font-size: .9rem;
}

.tt-route-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt-line-badge { padding: 5px 14px; border-radius: 8px; font-size: 1.15rem; font-weight: 800; }
.tt-change {
  border: 0;
  background: none;
  color: var(--accent-blue, #0284c7);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

.tt-days { display: flex; padding: 3px; border-radius: 10px; background: #f1f5f9; }
.tt-days button {
  flex: 1;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #64748b;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.tt-days button.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.tt-dir-label {
  margin-bottom: -6px;
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tt-dir { width: 100%; }
.tt-date { margin-top: -4px; color: #64748b; font-size: .78rem; }

.tt-stop { border-bottom: 1px solid #f1f5f9; }
.tt-stop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 9px 2px;
  border: 0;
  background: none;
  color: #0f172a;
  font: inherit;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.tt-stop-head::before { content: "▸"; flex: none; color: #94a3b8; transition: transform .15s; }
.tt-stop.is-open .tt-stop-head::before { transform: rotate(90deg); }
.tt-stop.is-open .tt-stop-head { font-weight: 700; }
.tt-stop-name { flex: 1; min-width: 0; }
.tt-stop-code { margin-left: 5px; color: #94a3b8; font-size: .8rem; font-weight: 400; }
.tt-stop-next { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-stop.is-empty .tt-stop-head { color: #94a3b8; cursor: default; }
.tt-stop.is-empty .tt-stop-head::before { visibility: hidden; }

.tt-hours { padding: 0 2px 10px 18px; font-size: .92rem; font-variant-numeric: tabular-nums; }
.tt-hour { display: flex; gap: 10px; padding: 2px 0; }
.tt-hour b { flex: none; width: 24px; }
.tt-hour span { color: #475569; word-spacing: 1px; }
.tt-next { padding: 0 3px; border-radius: 4px; background: var(--sofia-blue); color: #fff; }

@media (max-width: 900px) {
  .tt-body {
    flex: none;
    overflow: visible;
    contain: none;
  }
  .tt-lines { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .tt-line { height: 40px; }
}

/* Градски транспорт - "Най-закъсняващи в момента" (templates/public-transport.php) */
.pt-late-item .gtfs-line-badge {
  flex: none;
  min-width: 48px;
  text-align: center;
}
.pt-late-value {
  flex: none;
  color: var(--warning, #d97706);
  font-weight: 800;
  white-space: nowrap;
}
.pt-late-value small { font-size: .78rem; font-weight: 600; }
.pt-late-value.is-high { color: var(--danger, #dc2626); }
.pt-late-none {
  padding: 6px 0;
  color: var(--success, #16a34a);
  font-weight: 700;
}

/* ---------- START BUDGET.CSS (Бюджетът на София - templates/budget.php) ---------- */
.budget-section { padding-bottom: 0; }
/* След бюджета е "Райони" - .split-row е без отстъп отгоре */
.budget-section + .split-row { margin-top: 28px; }

.bd {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --bd-text: #0f172a;
  --bd-muted: #64748b;
  --bd-line: #e2e8f0;
  --bd-soft: #f8fafc;
  --bd-plan: var(--sofia-blue);
  --bd-executed: #a9c0e6;
  color: var(--bd-text);
}

/* Банкнотата - бледа долу вдясно като .feature-photo, но по-голяма; съдържанието е над нея */
.bd-photo {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 360px;
  height: 360px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: .15;
  z-index: 0;
  pointer-events: none;
}
.bd > :not(.bd-photo) { position: relative; z-index: 1; }

.bd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bd-title { margin: 0; font-size: 1.76rem; font-weight: 800; line-height: 1.2; }
.bd-subtitle { margin: 4px 0 0; color: var(--bd-muted); font-size: 1.1rem; }
.bd-years { margin: 0; flex: 0 0 auto; }
.bd-years .su-tab { flex: none; padding: 6px 16px; font-size: 1.04rem; color: var(--bd-muted); }
.bd-years .su-tab.active { color: var(--bd-text); }
.bd-year-status { font-size: .79rem; font-weight: 700; color: #b45309; }

/* Докато годината се зарежда, пази място колкото екран - иначе след секцията няма достатъчно страница,
   скокът от бързите връзки не може да я сложи най-горе и после браузърът "държи" края на страницата.
   След грешка (data-state="") мястото не се пази. */
.bd-year:not([data-state]),
.bd-year[data-state="loading"] { min-height: 100vh; }
.bd-loading { margin: 18px 0 4px; padding: 40px 0; text-align: center; font-size: .99rem; color: var(--bd-muted); }
.bd-note { margin: 14px 0 0; font-size: .99rem; color: var(--bd-muted); line-height: 1.5; }
.bd-note a { color: var(--accent-blue, #0284c7); font-weight: 600; white-space: nowrap; }
.bd-status {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: .83rem;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
}
.bd-status-draft { background: #fef3c7; color: #b45309; }

/* Големите числа */
.bd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.bd-kpi { padding: 14px 16px; border-radius: 12px; background: var(--bd-soft); border: 1px solid var(--bd-line); }
.bd-kpi-label { font-size: .94rem; color: var(--bd-muted); font-weight: 600; }
.bd-kpi-value { margin-top: 2px; font-size: 1.93rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bd-kpi-sub { margin-top: 2px; font-size: .88rem; color: var(--bd-muted); line-height: 1.35; }

.bd-block { margin-top: 22px; }
.bd-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bd-block-title { margin: 0; font-size: 1.32rem; font-weight: 800; }
.bd-hint { margin: 4px 0 10px; font-size: .94rem; color: var(--bd-muted); }

.bd-legend { display: flex; gap: 14px; font-size: .88rem; color: var(--bd-muted); }
.bd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bd-swatch { display: inline-block; width: 14px; height: 8px; border-radius: 2px; background: var(--bd-plan); }
.bd-swatch-executed { background: var(--bd-executed); }

/* Кръгова диаграма на перата: пръстен и легенда | останалите пера | промяна спрямо миналата година */
.bd-pie { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px 32px; margin: 10px 0 14px; }
/* Без сравнение (най-старата година) остават две колони */
.bd-pie:not(:has(.bd-yoy)) { grid-template-columns: auto minmax(0, 480px); }
.bd-pie-main { display: flex; align-items: center; gap: 20px; }
.bd-pie-main .bd-pie-item span { white-space: nowrap; }
.bd-pie-col { align-self: stretch; padding-left: 24px; border-left: 1px solid var(--bd-line); }
.bd-pie-title { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; }
.bd-yoy-sum { margin: -2px 0 6px; font-size: .94rem; color: var(--bd-muted); }
.bd-mini { list-style: none; margin: 0; padding: 0; }
.bd-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--bd-text);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.bd-mini-row:hover { background: var(--bd-soft); }
.bd-mini-row:focus-visible { outline: 2px solid var(--bd-plan); outline-offset: 1px; }
.bd-mini-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-mini-row strong { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bd .bd-yoy .bd-mini-row { grid-template-columns: minmax(0, 1fr) auto auto 3.2em; gap: 6px; }
.bd-yoy-arrow { font-style: normal; font-size: .8rem; }
.bd-yoy-up { color: #0ca30c; }
.bd-yoy-down { color: #e34948; }
.bd-yoy .bd-mini-row small { font-size: .9rem; color: var(--bd-muted); text-align: right; font-variant-numeric: tabular-nums; }
.bd-pie-chart { position: relative; flex: 0 0 200px; height: 200px; }
.bd-pie-chart svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.bd-pie-arc { fill: none; stroke-width: 18; cursor: pointer; transition: stroke-width .15s, opacity .15s; }
.bd-pie-active .bd-pie-arc { opacity: .35; }
.bd-pie-active .bd-pie-arc.active { opacity: 1; stroke-width: 20; }
.bd-pie-center {
  position: absolute;
  inset: 26%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  line-height: 1.2;
}
.bd-pie-center-label { font-size: .86rem; color: var(--bd-muted); }
.bd-pie-center-value { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-pie-center-pct { font-size: .88rem; color: var(--bd-muted); font-variant-numeric: tabular-nums; }
.bd-pie-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.bd-pie-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bd-text);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.bd-pie-item:hover,
.bd-pie-item.active { background: var(--bd-soft); }
.bd-pie-item:focus-visible { outline: 2px solid var(--bd-plan); outline-offset: 1px; }
.bd-pie-item span { flex: 1 1 auto; }
.bd-pie-item strong { font-variant-numeric: tabular-nums; }
.bd-abs { font-size: .9rem; font-weight: 400; color: var(--bd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-pie-item .bd-abs { margin-left: -4px; }
.bd .bd-rest .bd-mini-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.bd-pie-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }

/* Ред с лента: етикет | ленти | сума и дял */
.bd-row {
  display: grid;
  grid-template-columns: minmax(150px, 290px) 1fr minmax(120px, auto);
  align-items: center;
  gap: 4px 14px;
  padding: 7px 0;
}
.bd-row-label { display: flex; flex-direction: column; font-weight: 700; font-size: 1.04rem; line-height: 1.25; }
.bd-row-label small { font-weight: 400; font-size: .86rem; color: var(--bd-muted); }
.bd-row-bars { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-bar { height: 14px; border-radius: 0 4px 4px 0; background: var(--bd-plan); }
.bd-bar-executed { height: 7px; background: var(--bd-executed); }
/* Грид, а не flex с пренасяне: при свита колона (дълъг етикет на мобилно) flex-ът слагаше процента под сумата */
.bd-row-value {
  display: grid;
  grid-template-columns: auto minmax(2.6em, auto);
  justify-content: end;
  align-items: baseline;
  column-gap: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bd-row-value strong { font-size: 1.04rem; text-align: right; }
.bd-row-value span { font-size: .88rem; color: var(--bd-muted); text-align: right; }
.bd-row-value .bd-row-executed { grid-column: 1 / -1; }

/* Перата - разгъват се */
.bd-cats { border-top: 1px solid var(--bd-line); }
.bd-cat { border-bottom: 1px solid var(--bd-line); }
.bd-cat > summary { list-style: none; cursor: pointer; padding: 0 28px 0 6px; position: relative; border-radius: 8px; }
.bd-cat > summary::-webkit-details-marker { display: none; }
.bd-cat > summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bd-muted);
  border-bottom: 2px solid var(--bd-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s;
}
.bd-cat[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.bd-cat > summary:hover { background: var(--bd-soft); }
.bd-cat > summary:focus-visible { outline: 2px solid var(--bd-plan); outline-offset: 2px; }
.bd-cat-body { padding: 4px 6px 16px; }
.bd-cat-descr { margin: 0 0 10px; font-size: .99rem; color: var(--bd-muted); line-height: 1.45; }
.bd-cat-subtitle { margin: 14px 0 6px; font-size: .99rem; font-weight: 800; }

.bd-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.bd-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: .83rem;
  font-weight: 700;
  color: var(--bd-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--bd-line);
}
.bd-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; line-height: 1.35; }
.bd-table td small { display: block; font-size: .86rem; color: var(--bd-muted); }
.bd-table .bd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.bd-objects { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.bd-objects li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; line-height: 1.35; }
.bd-objects strong { white-space: nowrap; font-variant-numeric: tabular-nums; }

.bd-link-btn {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-blue, #0284c7);
  font-size: .97rem;
  font-weight: 700;
  cursor: pointer;
}

.bd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.bd-split .bd-row { grid-template-columns: minmax(130px, 200px) 1fr minmax(110px, auto); }

/* Капиталова програма */
.bd-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bd-chip { padding: 4px 10px; border-radius: 14px; background: var(--bd-soft); border: 1px solid var(--bd-line); font-size: .88rem; color: var(--bd-muted); }
.bd-chip strong { color: var(--bd-text); }

.bd-filters { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-bottom: 8px; }
.bd .bd-search { font-size: .99rem; padding: 8px 12px; border: 1px solid var(--bd-line); }
.bd-select {
  padding: 8px 10px;
  font-size: .97rem;
  border: 1px solid var(--bd-line);
  border-radius: 8px;
  background: #fff;
  color: var(--bd-text);
  max-width: 260px;
}
.bd-capital-summary { font-size: .9rem; color: var(--bd-muted); margin: 6px 0; }
.bd-capital-table td:first-child { width: 70%; }
/* Дългите имена на обекти - до 2 реда, целите при клик */
.bd-obj-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bd-obj-name.bd-clamped { cursor: pointer; }
.bd-obj-name.bd-expanded { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.bd-eu { display: inline-block; margin-left: 0; padding: 0 6px; border-radius: 8px; font-size: .77rem; font-weight: 700; background: #dbeafe; color: #1d4ed8; }
.bd-cat-tag { font-size: .88rem; color: var(--bd-muted); }
.bd-more {
  display: block;
  margin: 10px auto 0;
  padding: 8px 18px;
  border: 1px solid var(--bd-line);
  border-radius: 8px;
  background: #fff;
  font-size: .97rem;
  font-weight: 700;
  color: var(--bd-text);
  cursor: pointer;
}
.bd-more:hover { background: var(--bd-soft); }
.bd-more[hidden] { display: none; } /* иначе display:block отгоре бие атрибута hidden */

/* Откъде идват парите: лента с редовните приходи и легенда | делът на държавата по години */
.bd-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; margin-top: 6px; }
.bd-rev-col { padding-left: 24px; border-left: 1px solid var(--bd-line); }
.bd-stack { display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; }
.bd-stack-part { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; color: #fff; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-rev-legend { list-style: none; margin: 10px 0 0; padding: 0; }
.bd-rev-legend li { border-bottom: 1px solid var(--bd-line); }
.bd-rev-legend summary { display: flex; align-items: center; gap: 10px; padding: 8px 28px 8px 6px; position: relative; list-style: none; cursor: pointer; border-radius: 8px; }
.bd-rev-legend summary::-webkit-details-marker { display: none; }
.bd-rev-legend summary::after { content: ''; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--bd-muted); border-bottom: 2px solid var(--bd-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.bd-rev-legend details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.bd-rev-legend summary:hover { background: var(--bd-soft); }
.bd-rev-legend summary:focus-visible { outline: 2px solid var(--bd-plan); outline-offset: 1px; }
.bd-rev-label { flex: 1 1 auto; display: flex; flex-direction: column; font-weight: 700; line-height: 1.25; }
.bd-rev-label small { font-weight: 400; font-size: .86rem; color: var(--bd-muted); }
.bd-rev-legend summary strong { font-variant-numeric: tabular-nums; }
.bd-rev-legend .bd-table { margin: 0 0 10px; }
.bd .bd-share-row { grid-template-columns: 80px minmax(0, 1fr) 8.4em; padding: 4px 0; }
.bd-share-row .bd-row-value { grid-template-columns: 2.6em auto; justify-content: start; }
.bd-bar-state { background: #eb6834; }
.bd-swatch-state { background: #eb6834; }
.bd-rev-why { margin-top: 10px; }

.bd-foot { margin: 18px 0 0; font-size: .86rem; color: var(--bd-muted); line-height: 1.5; }

/* "Повече информация" под големите числа (more_start() в src/functions.php, "ПОВЕЧЕ ИНФОРМАЦИЯ" в minified.js) */
.more-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 9px 20px;
  border: 1px solid var(--bd-line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: .97rem;
  font-weight: 700;
  color: var(--sofia-blue);
  cursor: pointer;
}
.more-toggle:hover { background: var(--bd-soft); border-color: #c7d6ee; }
.more-toggle::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.more-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.section-more[hidden] { display: none; }
.bd-foot a { color: inherit; text-decoration: underline; }

@media (max-width: 1180px) {
  .bd-pie,
  .bd-pie:not(:has(.bd-yoy)) { grid-template-columns: 1fr 1fr; }
  .bd-pie-main { grid-column: 1 / -1; }
  .bd-pie-legend { max-width: 420px; }
  .bd-pie-main + .bd-pie-col { padding-left: 0; border-left: 0; }
}

@media (max-width: 900px) {
  .bd-split { grid-template-columns: 1fr; }
  .bd-rev { grid-template-columns: 1fr; }
  .bd-rev-col { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
  .bd-photo { width: 220px; height: 220px; }
  .bd-title { font-size: 1.49rem; }
  .bd-kpi-value { font-size: 1.59rem; }
  .bd-pie,
  .bd-pie:not(:has(.bd-yoy)) { grid-template-columns: 1fr; gap: 18px; }
  .bd-pie-main { flex-direction: column; align-items: stretch; gap: 12px; }
  .bd-pie-chart { flex-basis: auto; width: 200px; height: 200px; margin: 0 auto; }
  .bd-pie-col { padding-left: 0; border-left: 0; }
  .bd-pie-legend { max-width: none; }
  /* Абсолютните суми в скоби не се побират - остава само процентът */
  .bd-abs { display: none; }
  .bd .bd-rest .bd-mini-row { grid-template-columns: minmax(0, 1fr) auto; }
  /* Етикетът е на цял ред, а под него - лентата и вдясно сумата и дялът. Иначе дълга дума
     („Здравеопазване“) не се пречупва и избутва процента извън реда върху стрелката. */
  .bd-row,
  .bd-split .bd-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .bd-row-label { grid-column: 1 / -1; }
  .bd-row-bars { grid-column: 1; grid-row: 2; }
  .bd-row-value { grid-column: 2; grid-row: 2; grid-template-columns: minmax(5.6em, auto) 2.6em; }
  /* Делът по години е къс - на един ред */
  .bd .bd-share-row { grid-template-columns: 58px minmax(0, 1fr) 8.4em; }
  .bd-share-row .bd-row-label,
  .bd-share-row .bd-row-bars,
  .bd-share-row .bd-row-value { grid-column: auto; grid-row: auto; }
  .bd-share-row .bd-row-value { grid-template-columns: 2.6em auto; }
  .bd-filters { grid-template-columns: 1fr 1fr; }
  .bd-filters .bd-search { grid-column: 1 / -1; }
  .bd-select { max-width: none; width: 100%; }
  .bd-hide-mobile { display: none; }
  .bd-capital-table td:first-child { width: auto; }
}
/* ---------- END BUDGET.CSS ---------- */

/* ---------- CARS.CSS (templates/cars.php) ---------- */
/* Ползва оформлението на бюджета (.bd-*): сивите ленти са столиците, синята - София, тъмната - средното */
.cr { --bd-plan: #b6c3d6; }
.cr-rows { border-top: 1px solid var(--bd-line); }
.cr .bd-row { padding: 4px 0; border-bottom: 1px solid #f1f5f9; grid-template-columns: minmax(150px, 290px) 1fr minmax(60px, auto); }
.cr .bd-row-label { flex-direction: row; align-items: baseline; gap: 8px; font-weight: 600; }
.cr .bd-bar { height: 12px; }
/* Бюджетът пази колона за процента - тук няма такава */
.cr .bd-row-value { grid-template-columns: auto; }
.cr-sofia .bd-row-label,
.cr-sofia .bd-row-value strong { font-weight: 800; color: var(--sofia-blue); }
.cr-sofia .bd-bar { height: 16px; background: var(--sofia-blue); }
.cr-median .bd-row-label { font-style: italic; }
.cr-flag { font-style: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.cr-median .bd-bar { background: #475569; }
/* Електрически и хибриди - една лента от две части */
.cr-stack { display: flex; }
.cr .cr-stack .bd-bar { border-radius: 0; }
.cr .cr-stack .bd-bar:last-child { border-radius: 0 4px 4px 0; }
.cr .bd-bar.cr-bar-electric, .cr-swatch-electric { background: #0a8a3a; }
.cr .bd-bar.cr-bar-hybrid, .cr-swatch-hybrid { background: #7fcf9b; }
.cr .cr-fuel .bd-row-value span,
.cr .cr-age .bd-row-value span { font-size: .8rem; }
/* Възрастта: синята лента е София, тънката сива под нея - България */
.cr .bd-bar.cr-bar-sofia, .cr-swatch-sofia { background: var(--sofia-blue); }
.cr .bd-bar.cr-bar-bg { height: 6px; background: #b6c3d6; }
.cr-swatch-bg { background: #b6c3d6; }
@media (min-width: 901px) {
  .cr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  /* Графиката е по-къса от класацията - остава пред очите при скрол */
  .cr-col { position: sticky; top: 70px; }
  .cr-cols .cr-plot { height: 300px; }
  .cr-cols .cr .bd-row,
  .cr .cr-cols .bd-row { grid-template-columns: minmax(130px, 210px) 1fr 3em; }
  /* Областите са с броя коли до името - етикетът е по-широк, за да е на един ред */
  .cr .cr-cols .cr-rows-wide .bd-row { grid-template-columns: 250px 1fr 3em; }
  .cr-rows-wide .bd-row-label { white-space: nowrap; }
}
.cr-arrow { font-style: normal; font-size: .7em; vertical-align: .12em; }
.cr-arrow-up { color: #e34948; }
.cr-arrow-down { color: #0ca30c; }
.bd-kpi-sub .cr-arrow,
.bd-hint .cr-arrow { font-size: .85em; vertical-align: 0; }
/* Графиката по месеци: линията е SVG, а точките, мрежата и надписите - HTML, за да не се разтягат */
.cr-chart { position: relative; padding: 10px 76px 0 64px; }
.cr-plot { position: relative; height: 240px; }
.cr-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cr-plot polyline { fill: none; stroke: var(--sofia-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cr-grid { position: absolute; left: 0; right: 0; border-top: 1px solid #eef2f6; }
.cr-grid span { position: absolute; right: calc(100% + 8px); top: -.65em; font-size: .8rem; color: var(--bd-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--sofia-blue); box-shadow: 0 0 0 2px #fff; cursor: default; }
/* По-голяма зона за посочване от самата точка */
.cr-pt::before { content: ''; position: absolute; inset: -10px; }
.cr-pt b { position: absolute; left: 12px; top: -.7em; font-size: .9rem; font-weight: 800; color: var(--bd-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-pt:hover::after,
.cr-pt:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #0f172a;
  color: #fff;
  font-size: .85rem;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.cr-pt:hover,
.cr-pt:focus { outline: none; transform: scale(1.35); }
.cr-pt-last:hover::after,
.cr-pt-last:focus::after { left: auto; right: -4px; transform: none; }
.cr-xaxis { position: relative; height: 26px; margin-top: 6px; border-top: 1px solid var(--bd-line); }
.cr-xaxis span { position: absolute; top: 5px; transform: translateX(-50%); font-size: .8rem; color: var(--bd-muted); white-space: nowrap; }
.cr-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .cr .bd-row { grid-template-columns: minmax(0, 1fr) 3em; row-gap: 2px; }
  .cr-chart { padding: 6px 66px 0 52px; }
  .cr-x-minor { display: none; }
  .cr-plot { height: 200px; }
}
/* ---------- END CARS.CSS ---------- */