/* ==========================================================================
   GUIDA - стилове на приложението
   Дизайн-системата е пренесена от idea/ (SCSS) без build стъпка:
   - цветовете са същите (--c1 ... --c18)
   - флуидните размери: calc(N * var(--u)), където --u расте от 0.55px (320px екран) до 1px (768px),
     точно както fluidProp()/fsClamp() в оригинала. N = размерът от дизайна в px.
   - шрифтовете се умножават и по --fs (настройка „Размер на текста“ в профила)
   ========================================================================== */

:root {
  --c1: #000000;
  --c2: #ffffff;
  --c3: #183f6b;
  --c4: #2fb44a;
  --c5: #f7941d;
  --c6: #49b348;   /* зелен бутон */
  --c7: #42ff00;   /* близо */
  --c8: #ed9821;   /* акцент / икони / средно */
  --c9: #ff6b6b;   /* грешка / далеч */
  --c10: #15385f;  /* фон */
  --c11: #1b3c60;  /* блок */
  --c12: #335173;  /* под-блок, активен бутон, бордер на блок */
  --c13: #4b6e97;  /* бордер на под-блок */
  --c14: #8fbaec;  /* светло синьо */
  --c15: #00e4ff;  /* cyan надзаглавия */
  --c16: #0e243d;
  --c17: #d7cfd0;
  --c18: #ffaa00;  /* жълто-оранжев бутон */

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-flags: 'Noto Flags', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;

  --u: clamp(0.55px, calc(0.55px + (100vw - 320px) * 0.0010045), 1px);
  --fs: 1;
  --fu: calc(var(--u) * var(--fs));

  --r-card: calc(35 * var(--u));
  --r-btn: calc(10 * var(--u));
  --pad: calc(30 * var(--u));
  --gap: calc(20 * var(--u));

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-w: 640px;
}
html.fs-2 { --fs: 1.15; }
html.fs-3 { --fs: 1.3; }

@font-face {
  font-family: 'Noto Flags';
  src: url('../fonts/NotoColorEmoji-Regular-subset.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0061-E007A, U+E007F;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color: var(--c2);
  background-color: var(--c10);
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: calc(18 * var(--fu));
  line-height: 1.4;
  color: var(--c2);
  background-color: var(--c10);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--c15); outline-offset: 2px; }
::selection { color: #000; background: #dadada; }
[hidden] { display: none !important; }
.flag { font-family: var(--font-flags); font-weight: 400; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Фон с pattern (от idea: bdbg_*)
   -------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  background-color: var(--c10);
  background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, .75) 100%);
  pointer-events: none;
}
.bg-part {
  position: relative;
  background-repeat: repeat;
  background-size: min(45vw, 300px) min(45vw, 300px);
}
.bg-part::before { content: ''; position: absolute; inset: 0; }
.bg-top { background-image: url('../img/bg_pattern_top.svg'); }
.bg-top::before { background-image: linear-gradient(transparent 80%, var(--c10) 100%); }
.bg-bottom { background-image: url('../img/bg_pattern_bottom.svg'); }
.bg-bottom::before { background-image: linear-gradient(var(--c10) 20%, transparent 100%); }

/* --------------------------------------------------------------------------
   Шел на приложението (от idea: gc_01)
   -------------------------------------------------------------------------- */
/* Тялото е закачено за прозореца (position: fixed): документът никога не се превърта, затова
   навигацията долу не може да „падне“ под екрана (напр. в iPhone PWA след затваряне на клавиатурата).
   Превърта се само съдържанието (.app-scroll). */
.layout-app { position: fixed; inset: 0; width: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
.app {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  max-width: var(--app-w);
  height: 100%;
  margin: 0 auto;
  padding-top: var(--safe-top);
}
.app-header { position: relative; z-index: 20; padding: var(--pad) var(--pad) calc(20 * var(--u)); }
.app-body { position: relative; z-index: 1; overflow: hidden; }
.app-scroll {
  position: absolute;
  inset: 0 0 calc(10 * var(--u)) 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(10 * var(--u)) var(--pad) calc(50 * var(--u));
  scroll-behavior: smooth;
}
.app-footer {
  position: relative;
  z-index: 20;
  padding: 0 var(--pad) calc(20 * var(--u) + var(--safe-bottom));
}
.view { animation: viewIn .28s ease both; }
.view.is-leaving { animation: viewOut .14s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes viewOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .view, .view.is-leaving { animation: none; } }

/* Хедър (от idea: hdr_01) */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--pad); }
.hdr-logo { display: block; height: calc(53 * var(--u) * 1.15); flex: 0 0 auto; }
.hdr-logo img { height: 100%; width: auto; display: block; }
.hdr-user { display: flex; align-items: center; gap: calc(15 * var(--u)); min-width: 0; }
.hdr-name { font-weight: 700; font-size: calc(18 * var(--fu)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.avatar {
  position: relative;
  flex: 0 0 auto;
  width: calc(60 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c12);
  border: 1px solid var(--c13);
  display: grid;
  place-items: center;
  color: var(--c2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar .icn { width: 55%; }
.avatar-flag {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: calc(20 * var(--u));
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.icn { display: block; position: relative; aspect-ratio: 1; }
.icn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.icn svg path, .icn svg .isvg_st0, .icn svg .isvg_1x1_st0, .icn svg .st_icn_0 { fill: currentColor; }

/* Долна навигация (от idea: nav_bl / btn_nav) */
.nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u));
  background: var(--c11);
  border: 1px solid var(--c12);
  border-radius: var(--r-card);
}
.nav-btn {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: calc(15 * var(--u));
  justify-items: center;
  padding: calc(16 * var(--u)) 0;
  border-radius: calc(26 * var(--u));
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background-color .2s, border-color .2s, transform .15s cubic-bezier(.2, .8, .2, 1);
}
.nav-btn:active { transform: scale(.88); }
.nav-btn.active { background: var(--c12); border-color: var(--c13); }
.nav-btn span { display: block; text-align: center; line-height: 1; font-size: calc(18 * var(--fu)); }
.nav-icn { color: var(--c8); height: calc(26 * var(--u)); display: flex; align-items: center; }
.nav-icn i { display: block; position: relative; height: 100%; }
.nav-icn svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nav-icn .isvg_st0 { fill: currentColor; }
.nav-home .nav-icn i { aspect-ratio: 100 / 89; }
.nav-outside .nav-icn i, .nav-museum .nav-icn i { aspect-ratio: 1; }
.nav-guide .nav-icn i { aspect-ratio: 100 / 66; }

/* --------------------------------------------------------------------------
   Карти и заглавия (от idea: t03, t04, t01)
   -------------------------------------------------------------------------- */
.stack { display: grid; gap: var(--gap); }
.stack-sm { display: grid; gap: calc(10 * var(--u)); }
.stack-lg { display: grid; gap: calc(30 * var(--u)); }
.card {
  position: relative;
  background: var(--c11);
  border: 1px solid var(--c12);
  border-radius: var(--r-card);
  padding: var(--pad);
}
.card-sub { background: var(--c12); border: 1px solid var(--c13); border-radius: var(--r-card); padding: calc(20 * var(--u)); }
.card-flush { padding: 0; overflow: hidden; }

.pcap { font-weight: 300; font-size: calc(15 * var(--fu)); line-height: 1.15; color: var(--c15); text-transform: uppercase; letter-spacing: .02em; }
.pcap.warn { color: var(--c18); }
.cap { font-weight: 700; line-height: 1.15; font-size: calc(40 * var(--fu)); text-wrap: pretty; }
.cap-md { font-weight: 700; line-height: 1.15; font-size: calc(30 * var(--fu)); text-wrap: pretty; }
.cap-sm { font-weight: 700; line-height: 1.2; font-size: calc(24 * var(--fu)); text-wrap: pretty; }
.pcap + .cap, .pcap + .cap-md, .pcap + .cap-sm, .cap + .pcap { margin-top: calc(10 * var(--u)); }
.accent { color: var(--c8); }
.cyan { color: var(--c15); }
.muted { color: var(--c14); }
.txt { font-size: calc(18 * var(--fu)); line-height: 1.4; }
.txt p { text-wrap: pretty; }
.txt-light { font-weight: 300; }
.txt-sm { font-size: calc(15 * var(--fu)); }
.mt-10 { margin-top: calc(10 * var(--u)); }
.mt-15 { margin-top: calc(15 * var(--u)); }
.mt-20 { margin-top: calc(20 * var(--u)); }
.mt-30 { margin-top: calc(30 * var(--u)); }
.mt-40 { margin-top: calc(40 * var(--u)); }
.mt-60 { margin-top: calc(60 * var(--u)); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: calc(15 * var(--u)); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: calc(15 * var(--u)); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* --------------------------------------------------------------------------
   Бутони (от idea: btn_1, btn_6, btn_18, btn_v2, btn_txt, tap_efx)
   -------------------------------------------------------------------------- */
.tap { transition: transform .15s cubic-bezier(.2, .8, .2, 1); user-select: none; -webkit-user-select: none; }
.tap:active { transform: scale(var(--tap-scale, .98)); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  min-height: calc(60 * var(--u));
  padding: calc(20 * var(--u)) calc(40 * var(--u));
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: calc(18 * var(--fu));
  line-height: 1.2;
  text-align: center;
  color: var(--c2);
  background: var(--c6);
  border: 1px solid transparent;
  transition: transform .15s cubic-bezier(.2, .8, .2, 1), filter .2s, opacity .2s;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(.98); }
.btn:hover { filter: brightness(1.05); }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.btn .bi { font-size: 1.15em; }
.btn-orange { background: var(--c18); }
.btn-accent { background: var(--c8); }
.btn-blue { background: var(--c12); border-color: var(--c13); }
.btn-dark { background: var(--c11); border-color: var(--c12); }
.btn-red { background: var(--c9); }
.btn-ghost { background: transparent; border-color: var(--c13); }
.btn-block { display: flex; width: 100%; }
.btn-lg { font-size: calc(36 * var(--fu)); min-height: calc(84 * var(--u)); padding: calc(15 * var(--u)) calc(20 * var(--u)); text-transform: uppercase; }
.btn-sm { min-height: 0; padding: calc(12 * var(--u)) calc(20 * var(--u)); font-size: calc(15 * var(--fu)); }
.btn-icon { width: calc(60 * var(--u)); padding: 0; flex: 0 0 auto; }
.btn-txt { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font-weight: 700; line-height: 1.15; color: var(--c2); }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.link-lg { font-weight: 700; font-size: calc(24 * var(--fu)); line-height: 1; text-transform: uppercase; }
.link-sm { font-weight: 400; font-size: calc(18 * var(--fu)); line-height: 1; }

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  min-height: calc(90 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--c12);
  border: 1px solid var(--c13);
  font-weight: 300;
  font-size: calc(15 * var(--fu));
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transition: transform .15s, border-color .15s;
}
.choice:active { transform: scale(.98); }
.choice.selected, .choice:has(input:checked) { border: calc(3 * var(--u)) solid var(--c2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   Форми (от idea: frm_01, frm_02)
   -------------------------------------------------------------------------- */
.field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: var(--c2);
  color: var(--c1);
  border-radius: var(--r-btn);
  overflow: hidden;
  border: calc(3 * var(--u)) solid transparent;
}
.field.has-error { border-color: var(--c9); }
.field-icn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(15 * var(--u)) calc(20 * var(--u));
}
.field-icn::after { content: ''; position: absolute; top: calc(15 * var(--u)); bottom: calc(15 * var(--u)); right: 0; width: 1px; background: var(--c17); }
.field-icn .icn { width: calc(35 * var(--u)); }
.field input {
  width: 100%;
  min-width: 0;
  height: calc(80 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--c1);
  font-size: calc(24 * var(--fu));
  font-weight: 700;
}
.field input::placeholder { color: #6b7a8c; font-weight: 500; }
.field-eye { padding: 0 calc(20 * var(--u)); color: #6b7a8c; font-size: calc(26 * var(--fu)); height: 100%; }
.form-err { color: var(--c9); text-align: center; font-size: calc(18 * var(--fu)); }
.form-ok { color: var(--c7); text-align: center; font-size: calc(18 * var(--fu)); }
.field-err { color: var(--c9); font-size: calc(15 * var(--fu)); margin-top: calc(6 * var(--u)); }

.lbl { display: block; color: var(--c15); font-size: calc(15 * var(--fu)); padding-bottom: calc(10 * var(--u)); }
.input {
  width: 100%;
  height: calc(80 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: calc(3 * var(--u)) solid transparent;
  border-radius: var(--r-btn);
  background: var(--c2);
  color: var(--c1);
  font-size: calc(24 * var(--fu));
  outline: 0;
}
.input.has-error { border-color: var(--c9); }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(15 * var(--u));
  align-items: start;
  font-size: calc(16 * var(--fu));
  line-height: 1.35;
  cursor: pointer;
}
.check input { width: calc(28 * var(--u)); height: calc(28 * var(--u)); min-width: 18px; min-height: 18px; accent-color: var(--c6); margin: 0; }
.check a { text-decoration: underline; }
.check.has-error { color: var(--c9); }

.switch {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(20 * var(--u));
  font-size: calc(16 * var(--fu));
  line-height: 1.3;
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui {
  position: relative;
  width: calc(64 * var(--u));
  min-width: 40px;
  aspect-ratio: 64 / 36;
  border-radius: 999px;
  background: var(--c13);
  transition: background .2s;
}
.switch-ui::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 6%;
  height: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c2);
  transition: transform .2s;
}
.switch input:checked + .switch-ui { background: var(--c6); }
.switch input:checked + .switch-ui::after { transform: translateX(calc(100% + 4px)); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--c15); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Екрани за вход (от idea: lgn_*)
   -------------------------------------------------------------------------- */
.layout-auth { overflow-x: hidden; }
.auth {
  position: relative;
  z-index: 10;
  display: grid;
  place-content: space-evenly stretch;
  gap: var(--pad);
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--app-w);
  margin: 0 auto;
  padding: calc(var(--pad) + var(--safe-top)) var(--pad) calc(var(--pad) + var(--safe-bottom));
}
.auth-top { display: grid; place-items: center; position: relative; }
.auth-logo { width: calc(280 * var(--u)); aspect-ratio: 350 / 400; }
.auth-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-lang { position: absolute; top: 0; right: 0; }
.auth-lang select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--c11);
  border: 1px solid var(--c12);
  border-radius: 999px;
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  font-size: calc(15 * var(--fu));
  color: var(--c2);
}
.auth-main { display: grid; place-items: stretch center; gap: var(--pad); }
.auth-form { width: 100%; max-width: calc(540 * var(--u) + 60px); display: grid; gap: calc(20 * var(--u)); }
.auth-form .btn-lg { margin-top: calc(10 * var(--u)); }
.auth-links { display: grid; place-items: center; gap: calc(25 * var(--u)); }
.auth-info { text-align: center; font-size: calc(20 * var(--fu)); }
.auth-success { text-align: center; max-width: 30em; margin: 0 auto; }
.auth-success .bi { font-size: calc(70 * var(--u)); color: var(--c7); display: block; margin-bottom: calc(15 * var(--u)); }

/* EU футър (задължителен - проект по ЕФРР) */
.eu {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(20 * var(--u));
  align-items: center;
  padding-top: calc(15 * var(--u));
}
.eu-logos {
  display: grid;
  gap: calc(15 * var(--u));
  align-content: start;
  background: var(--c2);
  padding: calc(15 * var(--u)) calc(20 * var(--u));
}
.eu-logos img { width: auto; max-height: calc(40 * var(--u)); min-height: 30px; }
.eu-text { font-size: calc(15 * var(--fu)); line-height: 1.35; color: var(--c14); }
@media (max-width: 414px) {
  .eu { grid-template-columns: 1fr; }
  .eu-logos { grid-template-columns: auto auto; place-content: center space-evenly; }
}

/* --------------------------------------------------------------------------
   Списък с разстояния (от idea: wt05 / t05_1)
   -------------------------------------------------------------------------- */
.dlist { display: grid; gap: calc(8 * var(--u)); }
.drow {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "dot lbl name dist";
  gap: calc(10 * var(--u));
  align-items: baseline;
  padding: calc(20 * var(--u));
  background: var(--c12);
  border: 1px solid var(--c13);
  border-radius: calc(12 * var(--u));
  font-size: calc(18 * var(--fu));
  line-height: 1.2;
}
.drow-dot { grid-area: dot; color: var(--c14); }
.drow-dot i { display: inline-block; width: calc(15 * var(--u)); min-width: 9px; aspect-ratio: 1; border-radius: 50%; background: currentColor; transform: translateY(-.1em); }
.drow-lbl { grid-area: lbl; font-weight: 300; }
.drow-name { grid-area: name; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.drow-name small { display: block; font-weight: 400; font-size: .78em; color: var(--c14); margin-top: .25em; }
.drow-dist { grid-area: dist; font-weight: 700; white-space: nowrap; color: var(--c14); }
.drow.near .drow-dot, .drow.near .drow-dist { color: var(--c7); }
.drow.mid .drow-dot, .drow.mid .drow-dist { color: var(--c8); }
.drow.far .drow-dot, .drow.far .drow-dist { color: var(--c9); }
.drow-lock { color: var(--c18); margin-left: .3em; font-size: .9em; }
@media (max-width: 414px) {
  .drow { grid-template-columns: auto auto 1fr auto; grid-template-areas: "dot lbl lbl lbl" "dot name name dist"; }
}

/* --------------------------------------------------------------------------
   Броячи (от idea: wt06) и плочки (t07)
   -------------------------------------------------------------------------- */
.counters { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: calc(30 * var(--u)); margin: 0; padding: calc(40 * var(--u)) 0; }
.counter { display: grid; text-align: center; }
.counter dd { order: 0; margin: 0; font-weight: 700; font-size: calc(40 * var(--fu)); line-height: 1.2; color: var(--c14); font-variant-numeric: tabular-nums; }
.counter dt { order: 1; font-size: calc(14 * var(--fu)); line-height: 1.2; }
.tile { display: grid; grid-template-columns: auto 1fr; gap: calc(20 * var(--u)); align-items: center; }
.tile-icn { width: calc(100 * var(--u)); min-height: calc(100 * var(--u)); display: flex; align-items: center; justify-content: center; color: var(--c8); }
.tile-icn .icn { width: calc(70 * var(--u)); }
.tile h3 { font-size: calc(24 * var(--fu)); font-weight: 700; line-height: 1.2; }
.tile p { font-size: calc(16 * var(--fu)); margin-top: calc(12 * var(--u)); }
.tile.is-soon { opacity: .75; }
.badge {
  display: inline-block;
  padding: .25em .7em;
  border-radius: 999px;
  font-size: calc(13 * var(--fu));
  font-weight: 700;
  line-height: 1.2;
  background: var(--c12);
  border: 1px solid var(--c13);
  color: var(--c2);
  vertical-align: middle;
}
.badge-green { background: rgba(73, 179, 72, .2); border-color: var(--c6); color: var(--c7); }
.badge-orange { background: rgba(255, 170, 0, .15); border-color: var(--c18); color: var(--c18); }

/* --------------------------------------------------------------------------
   Карта (от idea: t09)
   -------------------------------------------------------------------------- */
.map-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 590 / 430;
  border-radius: calc(26 * var(--u));
  background: var(--c13);
  border: 1px solid var(--c13);
  color: var(--c11);
}
.map-box > .gmap { position: absolute; inset: 0; }
.map-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: calc(12 * var(--u));
  padding: var(--pad);
  text-align: center;
  color: var(--c2);
  font-size: calc(16 * var(--fu));
  background: linear-gradient(135deg, var(--c12), var(--c11));
}
.map-msg .bi { font-size: calc(40 * var(--u)); color: var(--c8); }
.map-locate {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c2);
  color: var(--c10);
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  display: grid;
  place-items: center;
}
/* HTML маркери върху Google Maps */
.gm-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 38px;
  height: 46px;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  transition: transform .15s;
}
.gm-pin:hover, .gm-pin.is-active { transform: translate(-50%, -100%) scale(1.15); z-index: 10; }
.gm-pin svg { width: 100%; height: 100%; display: block; }
.gm-pin .bi { position: absolute; top: 9px; left: 0; right: 0; text-align: center; font-size: 17px; color: #fff; }
.gm-me {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #2b7cff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(43, 124, 255, .6);
  animation: mePulse 2s infinite;
}
@keyframes mePulse { 0% { box-shadow: 0 0 0 0 rgba(43, 124, 255, .55); } 70% { box-shadow: 0 0 0 16px rgba(43, 124, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 124, 255, 0); } }
.map-card {
  position: absolute;
  left: 10px;
  right: 60px;
  bottom: 10px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  background: var(--c11);
  border: 1px solid var(--c12);
  color: var(--c2);
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  animation: viewIn .2s ease both;
}
.map-card img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.map-card b { display: block; }
.map-card small { color: var(--c14); }
.map-card .bi { font-size: 20px; color: var(--c8); }

/* --------------------------------------------------------------------------
   Обект: снимка, инфо, секции (от idea: t08)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  margin: 0 0 calc(-60 * var(--u));
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c12);
}
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(14, 36, 61, .85)); }
.hero-tags { position: absolute; left: var(--pad); top: calc(20 * var(--u)); z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.hero + .card { margin-left: calc(12 * var(--u)); margin-right: calc(12 * var(--u)); }
.meta { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(18 * var(--u)); color: var(--c14); font-size: calc(15 * var(--fu)); }
.meta .bi { margin-right: .3em; }
.meta .near { color: var(--c7); }
.meta .mid { color: var(--c8); }
.meta .far { color: var(--c9); }
.info { display: grid; gap: calc(14 * var(--u)); }
.info-row { display: grid; grid-template-columns: calc(30 * var(--u) + 10px) 1fr; gap: calc(10 * var(--u)); font-size: calc(16 * var(--fu)); line-height: 1.35; }
.info-row .bi { color: var(--c8); font-size: 1.2em; }
.info-row small { display: block; color: var(--c15); font-size: calc(13 * var(--fu)); text-transform: uppercase; margin-bottom: .2em; }
.info-row a { text-decoration: underline; overflow-wrap: anywhere; }
.price-tag { font-weight: 700; font-size: calc(18 * var(--fu)); white-space: nowrap; }
.price-tag.free { color: var(--c6); }
.section-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head price" "btn btn"; gap: calc(20 * var(--u)) calc(30 * var(--u)); }
.section-card .sc-head { grid-area: head; }
.section-card .sc-price { grid-area: price; text-align: right; }
.section-card .sc-btn { grid-area: btn; }
.section-card .sc-price small { display: block; font-size: calc(13 * var(--fu)); color: var(--c14); }

/* Списък с елементи / експонати */
.ilist { display: grid; gap: calc(10 * var(--u)); counter-reset: il; }
.irow {
  display: grid;
  grid-template-columns: calc(84 * var(--u) + 20px) 1fr auto;
  gap: calc(15 * var(--u));
  align-items: center;
  padding: calc(10 * var(--u));
  background: var(--c12);
  border: 1px solid var(--c13);
  border-radius: calc(20 * var(--u));
}
.irow-img { position: relative; aspect-ratio: 1; border-radius: calc(14 * var(--u)); overflow: hidden; background: var(--c13); }
.irow-img img { width: 100%; height: 100%; object-fit: cover; }
.irow-num {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(14, 36, 61, .85);
  font-size: 11px;
  font-weight: 700;
}
.irow-body { min-width: 0; }
.irow-body b { display: block; font-size: calc(18 * var(--fu)); line-height: 1.2; }
.irow-body span { display: block; margin-top: .3em; font-size: calc(14 * var(--fu)); line-height: 1.3; color: var(--c14); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.irow-go { color: var(--c8); font-size: calc(22 * var(--fu)); padding-right: calc(8 * var(--u)); }
.irow.is-playing { border-color: var(--c8); }
.irow.is-playing .irow-go .bi::before { content: "\f610"; }

/* Номер на експонат */
.numpad { display: grid; grid-template-columns: 1fr auto; gap: calc(12 * var(--u)); }
.numpad .input { text-align: center; font-weight: 700; letter-spacing: .1em; }

/* Предишен / следващ */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(10 * var(--u)); align-items: center; }
.pager-pos { font-size: calc(15 * var(--fu)); color: var(--c14); text-align: center; white-space: nowrap; }
.pager .btn { padding-left: calc(14 * var(--u)); padding-right: calc(14 * var(--u)); font-size: calc(15 * var(--fu)); }
.pager .is-empty { visibility: hidden; }

/* Галерия (от idea: gall_bl) */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.gallery a { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: calc(20 * var(--u)); background: var(--c12); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery a:active img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(5, 15, 28, .94);
  animation: viewIn .2s ease both;
  touch-action: pan-y;
}
.lightbox img { max-width: 100vw; max-height: 86vh; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
}
.lightbox-close { top: calc(14px + var(--safe-top)); right: 14px; }
.lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; bottom: calc(18px + var(--safe-bottom)); left: 0; right: 0; text-align: center; color: var(--c14); font-size: 14px; }

/* --------------------------------------------------------------------------
   Аудио плейър (от idea: spv_audio_player) + мини плейър
   -------------------------------------------------------------------------- */
.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "btn bar time" "btn sub speed";
  gap: calc(6 * var(--u)) calc(15 * var(--u));
  align-items: center;
  padding: calc(12 * var(--u));
  background: var(--c12);
  border: 1px solid var(--c13);
  border-radius: calc(26 * var(--u));
}
.player-btn {
  grid-area: btn;
  position: relative;
  width: calc(64 * var(--u));
  min-width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c8);
  color: var(--c2);
  display: grid;
  place-items: center;
  font-size: calc(30 * var(--u));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.player-btn:active { transform: scale(.92); }
.player-btn .i-pause, .player-btn .i-load { display: none; }
.player.is-playing .player-btn .i-play { display: none; }
.player.is-playing .player-btn .i-pause { display: block; }
.player.is-loading .player-btn .i-play, .player.is-loading .player-btn .i-pause { display: none; }
.player.is-loading .player-btn .i-load { display: block; width: 45%; aspect-ratio: 1; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-bar { grid-area: bar; position: relative; height: calc(14 * var(--u)); min-height: 8px; background: var(--c10); border-radius: 4px; cursor: pointer; overflow: hidden; touch-action: none; }
.player-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c14); border-radius: 4px; }
.player-time { grid-area: time; font-size: calc(16 * var(--fu)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-sub { grid-area: sub; font-size: calc(13 * var(--fu)); color: var(--c14); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-speed { grid-area: speed; font-size: calc(13 * var(--fu)); font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--c13); background: var(--c11); }
.player.is-error .player-sub { color: var(--c9); }

.mini {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: calc(12 * var(--u));
  align-items: center;
  margin-bottom: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  background: var(--c16);
  border: 1px solid var(--c12);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
  animation: viewIn .25s ease both;
  overflow: hidden;
  position: relative;
}
.mini-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--c8); display: grid; place-items: center; font-size: 20px; }
.mini-title { min-width: 0; font-size: 14px; line-height: 1.2; }
.mini-title b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-title small { display: block; color: var(--c14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-x, .mini-next { width: 34px; height: 34px; display: grid; place-items: center; color: var(--c14); font-size: 18px; }
.mini-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c8); width: 0; }
.mini .i-pause { display: none; }
.mini.is-playing .i-play { display: none; }
.mini.is-playing .i-pause { display: block; }

/* --------------------------------------------------------------------------
   Езици (от idea: langs_lst, lang_search)
   -------------------------------------------------------------------------- */
.langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.lang-btn {
  display: grid;
  place-content: center;
  gap: calc(6 * var(--u));
  min-height: calc(90 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--c12);
  border: 1px solid var(--c13);
  text-align: center;
  line-height: 1;
  transition: transform .15s;
}
.lang-btn:active { transform: scale(.97); }
.lang-btn .flag { font-size: calc(26 * var(--u)); }
.lang-btn .name { font-weight: 300; font-size: calc(15 * var(--fu)); overflow-wrap: anywhere; }
.lang-btn.selected { border: calc(3 * var(--u)) solid var(--c2); }
.lang-more { grid-column: span 2; }
.lang-search { position: relative; }
.lang-search .field { margin-bottom: calc(15 * var(--u)); }
.lang-list { list-style: none; background: var(--c12); border: 1px solid var(--c13); border-radius: var(--r-btn); max-height: 55vh; overflow-y: auto; }
.lang-list li + li { border-top: 1px solid var(--c13); }
.lang-item { display: flex; width: 100%; align-items: center; gap: calc(20 * var(--u)); padding: calc(15 * var(--u)) calc(20 * var(--u)); font-size: calc(18 * var(--fu)); text-align: start; line-height: 1.15; }
.lang-item:active { background: var(--c11); }
.lang-item .flag { font-size: 1.3em; flex: 0 0 auto; }
.lang-item .nm { flex: 1 1 auto; }
.lang-item .nm small { display: block; font-size: .75em; color: var(--c14); margin-top: .2em; }
.lang-item.selected { background: rgba(73, 179, 72, .2); }
.lang-item .bi-check-lg { color: var(--c7); }

/* Статус ред (от idea: status_bl) */
.status { display: flex; align-items: center; gap: calc(20 * var(--u)); padding: calc(10 * var(--u)) var(--pad); background: var(--c11); border: 1px solid var(--c12); border-radius: var(--r-card); font-size: calc(14 * var(--fu)); color: var(--c14); }
.status i { width: calc(10 * var(--u)); min-width: 7px; aspect-ratio: 1; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.on { color: var(--c2); }
.status.on i { color: var(--c7); }

/* Градове */
.city-row { display: grid; grid-template-columns: auto 1fr auto; gap: calc(15 * var(--u)); align-items: center; padding: calc(18 * var(--u)) calc(20 * var(--u)); background: var(--c12); border: 1px solid var(--c13); border-radius: calc(20 * var(--u)); }
.city-row.selected { border: calc(3 * var(--u)) solid var(--c2); }
.city-row .bi { color: var(--c8); font-size: calc(26 * var(--fu)); }
.city-row b { display: block; font-size: calc(20 * var(--fu)); }
.city-row small { color: var(--c14); font-size: calc(14 * var(--fu)); }
.city-pick { display: inline-flex; align-items: center; gap: .2em; border-bottom: 2px dashed currentColor; }
.city-pick .bi { font-size: .55em; }

/* Платено съдържание и QR */
.paywall { text-align: center; display: grid; gap: calc(15 * var(--u)); justify-items: center; }
.paywall > .bi { font-size: calc(46 * var(--u)); color: var(--c18); }
.qr-box { background: #fff; padding: calc(20 * var(--u)); border-radius: calc(20 * var(--u)); width: min(78vw, 320px); margin: 0 auto; }
.qr-box svg, .qr-box img, .qr-box canvas { display: block; width: 100%; height: auto; }
.buy-state { text-align: center; font-weight: 700; font-size: calc(20 * var(--fu)); }
.buy-state .dots::after { content: '…'; animation: dots 1.2s steps(4) infinite; display: inline-block; width: 1em; text-align: left; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.buy-state.ok { color: var(--c7); }
.buy-state.bad { color: var(--c9); }

/* --------------------------------------------------------------------------
   Съобщения, sheet, известие при близост, банер за инсталиране
   -------------------------------------------------------------------------- */
.toasts { position: fixed; left: 0; right: 0; top: calc(12px + var(--safe-top)); z-index: 2000; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast {
  pointer-events: auto;
  max-width: min(92vw, 520px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--c16);
  border: 1px solid var(--c12);
  color: var(--c2);
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  animation: toastIn .25s ease both;
}
.toast.is-out { animation: toastOut .2s ease both; }
.toast .bi { font-size: 18px; }
.toast.ok .bi { color: var(--c7); }
.toast.error .bi { color: var(--c9); }
.toast.info .bi { color: var(--c15); }
.toast button { font-weight: 700; color: var(--c8); white-space: nowrap; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

.sheet-back { position: fixed; inset: 0; z-index: 900; background: rgba(5, 15, 28, .6); animation: viewIn .2s both; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  max-width: var(--app-w);
  max-height: 88vh;
  margin: 0 auto;
  overflow-y: auto;
  padding: var(--pad) var(--pad) calc(var(--pad) + var(--safe-bottom));
  background: var(--c11);
  border: 1px solid var(--c12);
  border-radius: var(--r-card) var(--r-card) 0 0;
  animation: sheetIn .28s cubic-bezier(.2, .8, .2, 1) both;
}
.sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--c13); margin: calc(-12 * var(--u)) auto calc(18 * var(--u)); }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }

.prox {
  position: fixed;
  left: 50%;
  top: calc(12px + var(--safe-top));
  z-index: 1500;
  transform: translateX(-50%);
  width: min(94vw, 560px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 20px;
  background: var(--c11);
  border: 2px solid var(--c8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: toastIn .3s ease both;
}
.prox img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; background: var(--c12); }
.prox small { display: block; color: var(--c15); font-size: 12px; text-transform: uppercase; }
.prox b { display: block; font-size: 16px; line-height: 1.2; }
.prox-actions { display: grid; gap: 6px; justify-items: end; }
.prox-actions .btn { min-height: 0; padding: 10px 14px; font-size: 14px; }
.prox-x { color: var(--c14); font-size: 16px; padding: 2px 6px; }

.install { display: grid; grid-template-columns: auto 1fr auto; gap: calc(15 * var(--u)); align-items: center; }
.install img { width: calc(56 * var(--u)); min-width: 40px; border-radius: 12px; }
.install b { display: block; }
.install small { color: var(--c14); }

/* Празно състояние и грешки */
.empty { text-align: center; color: var(--c14); padding: calc(20 * var(--u)) 0; }
.empty .bi { font-size: calc(46 * var(--u)); display: block; margin-bottom: calc(10 * var(--u)); color: var(--c13); }
.error-page { text-align: center; display: grid; gap: calc(20 * var(--u)); justify-items: center; padding: calc(40 * var(--u)) 0; }
.error-page .bi { font-size: calc(60 * var(--u)); color: var(--c8); }

/* Профил */
.profile-head { display: grid; grid-template-columns: auto 1fr; gap: calc(20 * var(--u)); align-items: center; }
.profile-avatar { position: relative; width: calc(110 * var(--u)); min-width: 70px; }
.profile-avatar .avatar { width: 100%; }
.profile-avatar label { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--c8); display: grid; place-items: center; cursor: pointer; font-size: 16px; }
.profile-avatar input { display: none; }
.purchase-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: calc(14 * var(--u)) calc(18 * var(--u)); background: var(--c12); border: 1px solid var(--c13); border-radius: calc(16 * var(--u)); font-size: calc(15 * var(--fu)); }
.purchase-row small { display: block; color: var(--c14); }
.danger-zone { border-color: rgba(255, 107, 107, .4); }

/* RTL езици */
[dir="rtl"] .drow-dist, [dir="rtl"] .sc-price { text-align: left; }
[dir="rtl"] .bi-chevron-right::before { content: "\f284"; }
[dir="rtl"] .bi-chevron-left::before { content: "\f285"; }
[dir="rtl"] .bi-arrow-right::before { content: "\f12f"; }
[dir="rtl"] .bi-arrow-left::before { content: "\f138"; }

/* По-широки екрани: приложението остава колона в центъра */
@media (min-width: 700px) {
  .app-scroll { scrollbar-width: thin; scrollbar-color: var(--c13) transparent; }
}

/* Списък с лимит (JS пренарежда по разстояние, видими са първите N) */
.dlist[data-limit="5"] > :nth-child(n+6) { display: none; }

/* Лента за зареждане при смяна на екран */
html.is-loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3000;
  background: linear-gradient(90deg, transparent, var(--c8), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: loadbar .9s linear infinite;
}
@keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
button.city-row { width: 100%; text-align: start; color: inherit; }
.lang-btn input { position: absolute; opacity: 0; pointer-events: none; }
.lang-btn { position: relative; cursor: pointer; }
.map-msg .i-load { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--c8); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto; }

/* SVG флагове (emoji флаговете не се рисуват на Windows) */
.flag-img { display: inline-block; width: 1.35em; height: auto; aspect-ratio: 4 / 3; border-radius: 3px; object-fit: cover; vertical-align: -0.15em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.lang-btn .flag-img { width: calc(34 * var(--u)); min-width: 22px; margin: 0 auto; }
.lang-item .flag-img { width: 28px; flex: 0 0 auto; }
.avatar-flag { right: -4px; bottom: -2px; line-height: 0; }
.avatar-flag .flag-img { width: calc(24 * var(--u)); min-width: 16px; box-shadow: 0 0 0 2px var(--c10); }