/* =============================================================================
   app.css — ВСЯ дизайн-система Travel Mini Apps (единый файл, НЕ инлайн-CSS).
   Источник истины: docs/DESIGN_SYSTEM.md. Точные значения сверены с mockups/design-*.html.
   Один общий движок на все курорты; бренд-цвета курорта переопределяются из config.js.

   Оглавление:
     0. Шрифт Manrope
     1. Токены (:root) — базовые + бренд-тема курорта
     2. База: reset, body, .wrap
     3. Hero (главная) + Hero внутренней страницы + .backbtn
     4. Заголовок секции .sec-h
     5. Меню (.menu/.mc) и широкие плитки (.bt-tile/.news-tile)
     6. Соцсети (.socials/.soc)
     7. Карточки списков (.card) + премиум (gold) + важное/срочное (red)
     8. Бейджи, плашка акции, таблица деталей, действия, разделитель категории
     9. Кнопки (.btn*)
    10. Фильтры (.filters/.fbtn/.sfbtn)
    11. Аккордеон функциональный (.acc/.acc-arr)
    12. Дисклеймер (.disc) + жёлтая плашка-предупреждение (.warn)
    13. Блок «Полезно знать» (.tips)
    14. Нижняя навигация (.nav)
    15. Состояния: загрузка / пусто / ошибка
    16. Кнопка «Назад» — матрица по площадкам
    17. Адаптивность
   ============================================================================= */

/* 0. ШРИФТ -------------------------------------------------------------------- */
/* Manrope, веса 400–800. @import должен идти первым правилом файла. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* 1. ТОКЕНЫ ------------------------------------------------------------------- */
/* Базовые токены — общие для ВСЕХ курортов (DESIGN_SYSTEM §2). */
:root{
  --ink:#0E1B2A; --ink-soft:#5B6675; --ink-faint:#9AA4B2;
  --line:#E7ECF1; --bg:#FFFFFF; --bg-soft:#F5F8FB;
  --green:#2E9E5B;        /* статус «открыт» */
  --red:#D8232A;          /* Brusnika red — точечно (туры, важное/срочное) */
  --gold:#C9A227; --gold-tint:#FBF6E6;   /* партнёрские/премиум-карточки */
  --amber:#E8A317;        /* звёзды отелей (рейтинг) */
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(14,27,42,.04), 0 6px 22px rgba(14,27,42,.06);
  --font:'Manrope', system-ui, -apple-system, sans-serif;
}

/* Бренд-тема курорта (DESIGN_SYSTEM §3). Значения по умолчанию = Домбай.
   КУРОРТ ПЕРЕОПРЕДЕЛЯЕТ эти 4 переменные из своего config.js (через инлайн-:root
   или data-resort) — остальная система наследует. Новый курорт = заменить 4 значения. */
:root{
  --brand:#2965A1; --brand-light:#3576B3; --brand-deep:#1F5085; --brand-tint:#EAF4FB;
}

/* 2. БАЗА --------------------------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

body{
  font-family:var(--font);
  background:var(--bg-soft);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Узкий layout 430px по центру — стандарт. Резерв снизу под нижнюю навигацию + iOS safe-area. */
.wrap{
  max-width:430px;
  margin:0 auto;
  background:var(--bg-soft);
  min-height:100vh;
  padding-bottom:max(78px, env(safe-area-inset-bottom));
}

/* 3. HERO --------------------------------------------------------------------- */
/* Hero главной — крупный (DESIGN_SYSTEM §6.1). Градиент бренда, скруглён снизу. */
.hero{
  position:relative; overflow:hidden; padding:38px 22px 22px; color:#fff; text-align:center;
  background:linear-gradient(160deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  border-radius:0 0 22px 22px;
}
.kicker{ font-size:11px; font-weight:700; letter-spacing:.4em; text-transform:uppercase; opacity:.6; }
.htitle-xl{ font-size:52px; font-weight:800; line-height:.98; letter-spacing:.01em; margin-top:6px; }
.hbadges{ display:flex; gap:8px; margin-top:18px; }
.pill{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:700; padding:9px 6px; border-radius:12px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.18);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pill.status{ background:rgba(46,158,91,.95); border-color:transparent; }
.pill .d{ width:7px; height:7px; border-radius:50%; background:#fff; flex:0 0 7px; }
.phone{ margin-top:18px; }
.phone a{ font-size:20px; font-weight:800; color:#fff; text-decoration:none; }
.phone span{ display:block; font-size:11.5px; font-weight:500; opacity:.7; margin-top:2px; }

/* Hero внутренней страницы — единый шаблон (DESIGN_SYSTEM §6.2).
   Заголовок центрирован на одной линии с кнопкой «Назад» (верхний padding 16px, боковые 44px). */
.hero.inner{ padding:16px 22px 18px; }
.htitle{ font-size:24px; font-weight:800; line-height:1.15; padding:0 44px; }
.hsub{ font-size:14.5px; color:rgba(255,255,255,.82); margin-top:9px; line-height:1.45; }
/* .hupd — только страницы с парсингом: «Данные актуальны на …» */
.hupd{
  font-size:11.5px; color:rgba(255,255,255,.5); margin-top:10px; line-height:1.4;
  padding-top:8px; border-top:1px solid rgba(255,255,255,.12);
}
.hupd span{ color:rgba(255,255,255,.4); }

/* Кнопка «Назад» в hero (видимость — по площадке, см. §16). */
.backbtn{
  position:absolute; top:14px; left:16px; z-index:5; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; cursor:pointer;
}

/* 4. ЗАГОЛОВОК СЕКЦИИ ---------------------------------------------------------- */
/* Единая вертикальная система: до заголовка секции всегда 22px (DESIGN_SYSTEM §5). */
.sec-h{
  padding:22px 22px 11px; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
/* Секция сразу после плиток (.tile/.bt-tile c margin-bottom:11px) → верхний отступ 11px (итог 22px). */
.tile + .sec-h, .bt-tile + .sec-h, .news-tile + .sec-h{ padding-top:11px; }

/* 5. МЕНЮ И ПЛИТКИ ------------------------------------------------------------- */
/* minmax(0,1fr) обязателен — иначе контент распирает колонки (DESIGN_SYSTEM §5). */
.menu{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; padding:14px 18px 0; }
.mc{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:17px 14px;
  box-shadow:var(--shadow); min-width:0; overflow:hidden; text-align:center;
  display:flex; flex-direction:column; align-items:center; cursor:pointer;
}
.mc:active{ transform:scale(.97); }
.mc .ci{
  width:46px; height:46px; border-radius:13px; background:var(--brand-tint);
  display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:11px;
}
/* Название/описание карточки меню — строго 1 строка, обрезка … (DESIGN_SYSTEM §4). */
.mc .cn{
  font-size:15px; font-weight:700; color:var(--brand); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.mc .cd{
  font-size:11.5px; color:var(--ink-soft); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
/* Акцентная (первая) плитка — заливка брендом, белый текст. */
.mc.accent{ background:linear-gradient(160deg,var(--brand),var(--brand-deep)); border-color:transparent; }
.mc.accent .ci{ background:rgba(255,255,255,.2); }
.mc.accent .cn, .mc.accent .cd{ color:#fff; }
.mc.accent .cd{ opacity:.85; }

/* Широкая плитка — туры Brusnika (DESIGN_SYSTEM §6.4). .txt с min-width:0 обязателен. */
.bt-tile{
  margin:0 18px 11px; border-radius:16px; padding:16px; display:flex; align-items:center; gap:14px;
  color:#fff; box-shadow:var(--shadow); text-decoration:none;
}
.bt-tile.winter{ background:linear-gradient(120deg,#0D3B66,#1A6196); }
.bt-tile.summer{ background:linear-gradient(120deg,#1E5E3A,#2E9E5B); }
.bt-tile .ti{
  width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:23px; flex:0 0 46px;
}
.bt-tile .txt{ flex:1; min-width:0; }
.bt-tile .tt{ font-size:16px; font-weight:800; }
.bt-tile .ts{ font-size:12.5px; opacity:.85; margin-top:2px; }
.bt-tile .tc{ font-size:11.5px; opacity:.7; margin-top:3px; }
.bt-tile .arr{ margin-left:auto; font-size:20px; opacity:.7; }

/* Плитка рассылки — бренд-градиент. */
.news-tile{
  margin:0 18px; border-radius:16px; padding:16px; display:flex; align-items:center; gap:14px;
  color:#fff; box-shadow:var(--shadow); text-decoration:none;
  background:linear-gradient(120deg,var(--brand),var(--brand-light));
}
.news-tile .ti{
  width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:23px; flex:0 0 46px;
}
.news-tile .txt{ flex:1; min-width:0; }
.news-tile .tt{ font-size:16px; font-weight:800; }
.news-tile .ts{ font-size:11.5px; opacity:.8; margin-top:3px; line-height:1.35; }
.news-tile .arr{ margin-left:auto; font-size:20px; opacity:.7; }

/* 5.1 INDEX — ЕДИНЫЕ ВЕРТИКАЛЬНЫЕ ИНТЕРВАЛЫ (scoped к корню экрана .index) -----
   Образец — секция «Туры Brusnika Travel» (верно): .sec-h даёт 22px НАД заголовком
   и 11px ПОД ним, а контент под заголовком не имеет своего верхнего отступа.
   Приводим к этому ВСЕ разделы главной: заголовок→контент = 11px, блок→заголовок = 22px.
   (Слот туров — div-обёртка — ломал смежность .X+.sec-h; у .news-tile нет нижнего margin.) */
.index .menu{ padding-top:0; }                  /* было 14px → под «Разделы» лишний отступ (25→11) */
.index .bt-tile{ margin-bottom:0; }             /* низ убираем — интервал к след. секции даёт .sec-h (33→22) */
.index .bt-tile + .bt-tile{ margin-top:11px; }  /* интервал МЕЖДУ соседними плитками туров (как было) */
.index .news-tile + .sec-h{ padding-top:22px; } /* у .news-tile нет нижнего margin → нужен полный отступ (11→22) */

/* 6. СОЦСЕТИ (2×2) ------------------------------------------------------------- */
.socials{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; padding:0 18px; }
.soc{ border-radius:13px; padding:14px; text-align:center; font-size:14px; font-weight:700; color:#fff; text-decoration:none; }
.soc.vk{ background:#0077FF; }
.soc.tg{ background:#29A9EB; }
.soc.dzen{ background:#111; }
.soc.max{ background:linear-gradient(120deg,#5B8DEF,#8B5BEF); }

/* 7. КАРТОЧКИ СПИСКОВ ---------------------------------------------------------- */
.list{ padding:10px 18px 0; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:11px; overflow:hidden;
}
/* Премиум/партнёрская — золотая обводка + тёплое свечение (DESIGN_SYSTEM §6.7). До 3 на категорию. */
.card.partner{
  border:1.5px solid var(--gold);
  box-shadow:0 1px 2px rgba(201,162,39,.12), 0 8px 26px rgba(201,162,39,.22);
  background:linear-gradient(180deg,#FFFDF7,#fff);
}
.card.partner .card-ic{ background:var(--gold-tint); }
/* Важное/срочное — красная обводка + красное свечение (паттерн important-post из news). */
.card.important{
  border:1.5px solid var(--red);
  box-shadow:0 1px 2px rgba(216,35,42,.12), 0 8px 26px rgba(216,35,42,.18);
}

.card-head{ padding:14px 15px; display:flex; gap:12px; }
.card-ic{
  width:44px; height:44px; border-radius:12px; background:var(--brand-tint);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 44px;
}
.card-main{ flex:1; min-width:0; }
.card-name{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.2; }
.card-cat{ font-size:11.5px; color:var(--ink-faint); margin-top:1px; }
.card-desc{ font-size:12.5px; color:var(--ink-soft); margin-top:7px; line-height:1.4; }
/* Краткая плашка времени работы. */
.card-hours{ font-size:11.5px; font-weight:600; margin-top:6px; }
.card-hours.open{ color:var(--green); }
.card-hours.closed{ color:var(--red); }
/* Раскрытие карточки. */
.card-body{ display:none; border-top:1px solid var(--line); background:var(--bg-soft); padding:13px 15px; }
.card.open .card-body{ display:block; }

/* 8. БЕЙДЖИ / АКЦИЯ / ДЕТАЛИ / ДЕЙСТВИЯ / РАЗДЕЛИТЕЛЬ -------------------------- */
.card-badges{ display:flex; gap:6px; margin-bottom:5px; flex-wrap:wrap; }
.bdg{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.bdg.partner{ background:var(--gold-tint); color:var(--gold); }
.bdg.top{ background:var(--brand-tint); color:var(--brand); }

/* Плашка акции (offer) — оранжевая. */
.offer{
  margin:10px 15px 0; background:linear-gradient(120deg,#FFF3E0,#FFE8CC);
  border:1px solid #FFD9A8; border-radius:10px; padding:8px 11px;
  font-size:12px; font-weight:700; color:#B45309; display:flex; align-items:center; gap:7px;
}
.offer .ic{ flex:0 0 auto; }

/* Таблица деталей с тонкими гранями (DESIGN_SYSTEM §6.7). */
.det-table{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
/* align-items:stretch (натуральный дефолт flex) — ключ .k заливается на всю высоту строки,
   даже когда значение .v многострочное (иначе слева белый «хвост»; урок L10). Для однострочных
   строк (contacts) визуально идентично center: высоты .k и .v совпадают. Общее правило — без скоупов. */
.det{ display:flex; align-items:stretch; font-size:13px; border-bottom:1px solid var(--line); }
.det:last-child{ border-bottom:none; }
.det .k{ color:var(--ink-faint); background:var(--bg-soft); padding:9px 12px; flex:0 0 110px; border-right:1px solid var(--line); font-size:12px; }
.det .v{ color:var(--ink); font-weight:600; padding:9px 12px; flex:1; min-width:0; word-break:break-word; }
.det .v a{ color:var(--brand); font-weight:700; text-decoration:none; }
/* Соцсети строкой в таблице — компаунд-селектор перебивает цвет ссылки (урок L8). */
.det .v.socs-v{ display:flex; gap:14px; flex-wrap:wrap; }
.det .v.socs-v a.vk{ color:#0077FF; }
.det .v.socs-v a.tg{ color:#29A9EB; }
.det .v.socs-v a.max{ color:#8B5BEF; }

/* Действия (бронь/написать) — отделены разделителем. */
.actions{ display:flex; gap:8px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.actions .b{ flex:1; height:42px; border-radius:11px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.actions .book{ background:var(--brand-deep); color:#fff; }   /* «Забронировать стол/номер» */
.actions .msg{ background:#E6F4EC; color:var(--green); }      /* «Написать» */

/* Разделитель категории (режим «Все»). */
.cat-divider{ padding:18px 4px 9px; font-size:13px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:9px; }
.cat-divider:first-child{ padding-top:4px; }
.cat-divider .cd-ic{ font-size:17px; }
.cat-divider .cd-count{ font-size:11px; font-weight:600; color:var(--ink-faint); margin-left:auto; }

/* 9. КНОПКИ -------------------------------------------------------------------- */
/* На кнопках с белым текстом — --brand-deep (светлый бренд плохо читается, DESIGN_SYSTEM §6.8). */
.btn{ height:40px; border-radius:11px; font-size:13px; font-weight:700; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.btn-primary{ background:var(--brand-deep); color:#fff; height:42px; }   /* основная */
.btn-secondary{ background:var(--bg-soft); color:var(--ink); }           /* вторичная бледная */
.btn-more{ flex:1; background:var(--bg-soft); color:var(--ink); }        /* «Подробнее» (половинка) */
.btn-ic{ flex:0 0 40px; width:40px; background:var(--bg-soft); color:var(--ink); font-size:17px; }  /* иконочная, фикс. ширина */
.card-btns{ display:flex; gap:8px; padding:12px 15px; }

/* 10. ФИЛЬТРЫ ------------------------------------------------------------------ */
/* Горизонтальный скролл без скроллбара, sticky-панель (DESIGN_SYSTEM §6.7). */
.filters{
  display:flex; flex-wrap:nowrap; gap:8px; padding:12px 18px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  position:sticky; top:0; z-index:20; background:var(--bg-soft);
}
.filters::-webkit-scrollbar{ display:none; }
.fbtn{ flex:0 0 auto; padding:8px 15px; border-radius:999px; background:#fff; border:1.5px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap; cursor:pointer; display:flex; align-items:center; gap:6px; }
.fbtn.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
/* Цветная точка в фильтре (группы контактов). */
.fdot{ width:8px; height:8px; border-radius:50%; }
.fdot.r{ background:var(--red); }
.fdot.g{ background:var(--green); }
.fdot.b{ background:var(--brand); }
.fdot.faint{ background:var(--ink-faint); }
/* Подфильтры — бледная активная (brand-tint). */
.sfbtn{ flex:0 0 auto; padding:6px 12px; border-radius:999px; background:transparent; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-soft); white-space:nowrap; cursor:pointer; }
.sfbtn.on{ background:var(--brand-tint); border-color:var(--brand); color:var(--brand); }

/* 11. АККОРДЕОН ФУНКЦИОНАЛЬНЫЙ ------------------------------------------------- */
/* <details class="acc"><summary>…<span class="acc-arr"></span></summary><div class="acc-body">…</div></details>
   CSS-шеврон .acc-arr поворачивается при [open]. (Паттерн .qa из mockups/design-faq.) */
.acc{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); margin-bottom:10px; overflow:hidden; }
.acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px; padding:13px 15px; min-height:58px; }
.acc summary::-webkit-details-marker{ display:none; }
.acc .acc-t{ flex:1; font-size:14px; font-weight:700; color:var(--ink); line-height:1.35; }
.acc-arr{ width:9px; height:9px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(45deg); transition:transform .2s; flex:0 0 auto; margin-right:3px; margin-top:-3px; }
.acc[open] .acc-arr{ transform:rotate(-135deg); margin-top:2px; }
.acc-body{ padding:0 15px 15px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.acc-body b{ color:var(--ink); font-weight:700; }

/* 12. ДИСКЛЕЙМЕР --------------------------------------------------------------- */
/* Универсальный компактный центрированный аккордеон — ФИНАЛ (DESIGN_SYSTEM §6.4).
   На всех страницах одинаковый. */
.disc{ margin:18px 18px 0; border:1px solid var(--line); border-radius:14px; background:transparent; overflow:hidden; }
.disc summary{ list-style:none; cursor:pointer; padding:10px 30px; position:relative; display:flex; align-items:center; justify-content:center; gap:7px; }
.disc summary::-webkit-details-marker{ display:none; }
.disc .ic{ font-size:13px; color:var(--ink-faint); }     /* ⓘ */
.disc .t{ font-size:11.5px; font-weight:600; color:var(--ink-faint); text-align:center; }
.disc .arr{ position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:translateY(-65%) rotate(45deg); }
.disc[open] .arr{ transform:translateY(-35%) rotate(-135deg); }
.disc .txt{ font-size:11px; color:var(--ink-faint); line-height:1.5; padding:0 13px 11px; }
.disc .txt a{ color:var(--brand); font-weight:700; text-decoration:none; }
/* Жёлтая плашка-предупреждение на виду — для критичных предупреждений (напр. slopes). */
.warn{ margin:18px 18px 0; background:#FFF8E8; border:1px solid #F1E2B8; border-radius:12px; padding:12px 14px; font-size:11.5px; color:#7A6520; line-height:1.5; display:flex; gap:9px; }
.warn .ic{ flex:0 0 auto; }

/* 13. БЛОК «ПОЛЕЗНО ЗНАТЬ» ----------------------------------------------------- */
/* Источник — лист Полезно_знать (фильтр по странице). Нет записей → блок скрыт. */
.tips{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px; }
.tip{ display:flex; gap:10px; padding:6px 0; font-size:13px; color:var(--ink); line-height:1.45; }
.tip .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); margin-top:7px; flex:0 0 6px; }
.tip .dot.red{ background:var(--red); }   /* контекстный цвет точки (напр. «При ЧП в горах») */

/* 13.1 КОНТАКТЫ (экран contacts) — точные стили из mockups/design-contacts.html ---- */
/* SOS-блок: красный градиент, единый экстренный 112, всегда виден. */
.sos{ margin:14px 18px 0; background:linear-gradient(120deg,#D8232A,#B01C22); border-radius:16px; padding:16px 18px; color:#fff; display:flex; align-items:center; box-shadow:0 6px 22px rgba(216,35,42,.25); }
.sos .l{ flex:1; }
.sos .kicker{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.sos .num{ font-size:34px; font-weight:800; line-height:1.05; margin:2px 0; }
.sos .num a{ color:#fff; text-decoration:none; }
.sos .s{ font-size:12px; opacity:.85; }
.sos .badge{ width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; letter-spacing:.03em; }

/* Карточка контакта = аккордеон (.acc/.acc-arr из §11) + таблица деталей (.det из §6.7).
   Свёрнуто: иконка группы + название + первый телефон (жирный, кликабельный) + шеврон.
   Раскрыто: .det-table (Телефон 2 / Адрес / Часы / Сайт — только заполненные). */
.contacts{ padding:0 18px; }
/* Иконка группы в свёрнутой шапке. */
.contacts .ic{ width:44px; height:44px; border-radius:12px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; font-size:21px; flex:0 0 44px; }
.contacts .ic.emerg{ background:#FBE9E9; }       /* экстренные */
.contacts .ic.med{ background:#E6F4EC; }         /* медицина */
.contacts .ic.admin{ background:var(--brand-tint); } /* администрация */
.contacts .ic.other{ background:var(--bg-soft); }    /* прочее */
/* Текст свёрнутой шапки: только название (телефоны — в раскрытии). */
.contacts .acc-t{ flex:1; min-width:0; }
.contacts .acc-t .nm{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.25; }
/* Плоская карточка (нечего раскрывать) — та же шапка, без шеврона. */
.acc .acc-row{ display:flex; align-items:center; gap:11px; padding:13px 15px; min-height:58px; }
/* Раскрытая область деталей — серая заливка на ВЕСЬ блок (фон на контейнере, не под текстом),
   равномерный padding, разделитель сверху. Таблица деталей сливается с фоном (без белых полей). */
.contacts .acc-body{ background:var(--bg-soft); border-top:1px solid var(--line); padding:10px 14px; }
.contacts .acc-body .det-table{ background:transparent; border:none; border-radius:0; }
/* Подпись подгруппы внутри секции — СЛАБЕЕ главной .sec-h (иерархия: РАЗДЕЛ > подгруппа > карточки).
   Выровнена по левому краю карточек (18px), мельче, без капса/трекинга, тесно привязана к своим карточкам. */
.subnote{ font-size:11px; font-weight:600; color:var(--ink-faint); padding:6px 18px 6px; }

/* 13.2 ГИД (экран guide) — точные стили из mockups/design-guide.html -------------- */
/* Управление: sticky-обёртка над фильтрами/тулбаром/поиском. */
.controls{ position:sticky; top:0; z-index:40; background:var(--bg-soft); padding:14px 0 6px; }
/* Фильтры внутри .controls: обёртка уже sticky → сами не липнут, свои отступы (§10 .filters переиспользуем). */
.guide .filters{ position:static; padding:0 18px 4px; }
/* Тулбар: счётчик слева + кнопка поиска справа. */
.toolbar{ display:flex; align-items:center; gap:10px; padding:8px 18px 2px; }
.count{ font-size:12px; color:var(--ink-faint); font-weight:600; }
.toolbar .sp{ margin-left:auto; }
.tb-btn{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 11px; cursor:pointer; }
/* Поле поиска — скрыто, показывается по .show. */
.search-field{ margin:8px 18px 0; display:none; }
.search-field.show{ display:block; }
.search-field input{ width:100%; border:1.5px solid var(--brand); border-radius:11px; padding:10px 13px; font-size:14px; font-family:inherit; outline:none; }
/* (Заливка ключа-.k на всю высоту строки теперь общая — .det{ align-items:stretch } в §8; скоуп .guide .det убран.) */
/* Кнопки карточки гида: обе серые, одинаковой ширины; шапка уже даёт верхний отступ (§7). */
.guide .card-btns{ padding:0 15px 13px; }
.btn-map{ flex:1; background:var(--bg-soft); color:var(--ink); }
/* «Показать ещё (N)» — фирменная обводка (режим «Все»). */
.showmore{ display:block; width:calc(100% - 36px); margin:4px 18px 6px; padding:13px; border-radius:12px; background:#fff; border:2px solid var(--brand); color:var(--brand); font-size:13.5px; font-weight:700; cursor:pointer; }

/* 13.3 ОТЕЛИ (экран hotels) — точные стили из mockups/design-hotels.html --------- */
/* Фильтры внутри .controls (как guide): обёртка sticky → сами не липнут, свои отступы. */
.hotels .filters{ position:static; padding:0 18px 4px; }
/* Премиум-карточка отеля — золотая обводка + тёплое свечение (монетизация; вверху категории). */
.card.premium{ border:1.5px solid var(--gold); box-shadow:0 1px 2px rgba(201,162,39,.12), 0 8px 26px rgba(201,162,39,.22); background:linear-gradient(180deg,#FFFDF7,#fff); }
.card.premium .card-ic{ background:var(--gold-tint); }
.bdg.premium{ background:var(--gold-tint); color:var(--gold); }
/* Звёзды отеля (stars → ★). */
.stars{ color:var(--amber); font-size:12px; margin-top:2px; letter-spacing:1px; }
/* Рейтинг (опц., если понадобится). */
.card-rating{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:var(--amber); margin-top:5px; }
/* Дистанция до подъёмника. */
.card-dist{ font-size:12px; font-weight:700; color:var(--brand); margin-top:7px; display:inline-flex; align-items:center; gap:5px; }
/* Удобства строкой (amenities → иконки/подписи). */
.card-amen{ display:flex; gap:10px; margin-top:8px; font-size:14px; }
.card-amen span{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--ink-soft); font-weight:600; }
/* Цена от. */
.card-price{ margin-top:9px; font-size:13px; }
.card-price b{ font-size:17px; font-weight:800; color:var(--brand); }
.card-price span{ color:var(--ink-faint); font-size:11.5px; }
/* Кнопки карточки отеля: обе на всю ширину, 42px; «Забронировать» — бренд. */
.hotels .card-btns .btn{ flex:1; height:42px; }
.btn-book{ background:var(--brand); color:#fff; }
/* Действия в раскрытии: «Позвонить»/«Написать» — зелёные; «Забронировать» — бренд
   (перебивает общий .actions .book = --brand-deep; скоуп под .hotels, общий не трогаем). */
.actions .call{ background:#E6F4EC; color:var(--green); }
.hotels .actions .book{ background:var(--brand); }

/* Плитка рассылки выгодных предложений отелей (config.hotelsNewsletter.url). Пусто → скрыта. */
.hotel-news{ margin:14px 18px 0; background:linear-gradient(120deg,#2965A1,#3576B3); border-radius:14px; padding:18px 16px; color:#fff; box-shadow:var(--shadow); text-align:center; }
.hotel-news .tt{ font-size:15px; font-weight:800; line-height:1.25; }
.hotel-news .ss{ font-size:12px; opacity:.85; margin-top:5px; line-height:1.4; }
.hotel-news .b{ display:inline-block; margin-top:12px; background:#fff; color:var(--brand); font-weight:700; font-size:13px; padding:9px 26px; border-radius:10px; text-decoration:none; cursor:pointer; }

/* Агрегаторы бронирования (config.aggregators.booking). Нет ссылок → блок скрыт целиком. */
.aggs{ padding:0 18px; }
.agg{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 15px; margin-bottom:10px; cursor:pointer; text-decoration:none; }
.agg .ic{ width:14px; height:14px; border-radius:50%; flex:0 0 14px; margin:0 8px; }
.agg .ya{ background:#FFCC00; } .agg .tv{ background:#2BA6DE; } .agg .sut{ background:#16B47F; } .agg .ostr{ background:#3DCC79; } .agg .avito{ background:#0AF; } .agg .tutu{ background:#1A3FB5; }
.agg .body{ flex:1; min-width:0; }
.agg .tt{ font-size:14.5px; font-weight:800; color:var(--ink); }
.agg .ss{ font-size:12px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agg .arr{ color:var(--ink-faint); font-size:18px; flex:0 0 auto; }
/* Подсказка «как выбрать выгоднее» — акцентная плашка под агрегаторами. */
.agg-tip{ margin:14px 18px 0; background:var(--brand-tint); border:1px solid #CFE3F5; border-radius:12px; padding:13px 15px; display:flex; gap:11px; align-items:flex-start; }
.agg-tip .ic{ font-size:19px; flex:0 0 auto; }
.agg-tip .t{ font-size:13px; font-weight:800; color:var(--brand-deep); }
.agg-tip .s{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
/* Сворачиваемый дисклеймер агрегаторов (статичный текст, показывается всегда). */
.aggs-disc{ margin:18px 18px 0; border:1px solid var(--line); border-radius:14px; background:transparent; overflow:hidden; }
.aggs-disc summary{ list-style:none; cursor:pointer; padding:10px 30px; position:relative; display:flex; align-items:center; justify-content:center; gap:7px; }
.aggs-disc summary::-webkit-details-marker{ display:none; }
.aggs-disc .ic{ font-size:13px; color:var(--ink-faint); }
.aggs-disc .t{ font-size:11.5px; font-weight:600; color:var(--ink-faint); text-align:center; }
.aggs-disc .arr{ position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:translateY(-65%) rotate(45deg); }
.aggs-disc[open] .arr{ transform:translateY(-35%) rotate(-135deg); }
.aggs-disc .txt{ font-size:11px; color:var(--ink-faint); line-height:1.5; padding:0 13px 11px; }

/* Плашка «Разместить свой отель» (config.promoPlace). Пусто → скрыта. */
.promo-place{ margin:18px 18px 0; background:linear-gradient(120deg,#2965A1,#3576B3); border-radius:14px; padding:16px; color:#fff; text-align:center; }
.promo-place .t{ font-size:15px; font-weight:800; }
.promo-place .s{ font-size:12px; opacity:.85; margin-top:4px; line-height:1.4; }
.promo-place .b{ display:inline-block; margin-top:11px; background:#fff; color:var(--brand); font-weight:700; font-size:13px; padding:9px 20px; border-radius:10px; text-decoration:none; cursor:pointer; }

/* 13.4 ЗАВЕДЕНИЯ (экран places) — точные стили из mockups/design-places.html ----- */
/* Фильтры внутри .controls (как guide/hotels): обёртка sticky → сами не липнут, свои отступы. */
.places .filters{ position:static; padding:0 18px 4px; }
/* Подфильтры (второй ряд) — появляются для групп с подкатегориями (Магазины/Отдых).
   Контейнер (сами .sfbtn — общие, §10). Горизонтальный скролл без скроллбара. */
.subfilters{ display:flex; gap:7px; overflow-x:auto; padding:8px 18px 4px; scrollbar-width:none; }
.subfilters::-webkit-scrollbar{ display:none; }
/* Действие «Забронировать стол» — фирменный синий --brand (поправка PAGES_SPEC §4;
   перебивает общий .actions .book = --brand-deep; скоуп под .places, общий не трогаем). */
.places .actions .book{ background:var(--brand); }

/* 13.5 ЭКСКУРСИИ (экран excursions) — точные стили из mockups/design-excursions.html --- */
/* Фильтры внутри .controls (как guide/hotels/places): обёртка sticky → сами не липнут. */
.excursions .filters{ position:static; padding:0 18px 4px; }
/* Кнопки карточки экскурсии: обе на всю ширину, 42px ([Подробнее]/[Смотреть тур]). */
.excursions .card-btns .btn{ flex:1; height:42px; }
/* Мета-строка карточки (⏱️ длительность · 👥 размер группы). */
.card-meta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:8px; font-size:11.5px; color:var(--ink-soft); font-weight:600; }
/* Бейдж типа экскурсии — нейтральный серый (без капса, в отличие от .bdg.premium). */
.bdg.type{ background:var(--bg-soft); color:var(--ink-soft); text-transform:none; letter-spacing:normal; }
/* Туры Brusnika — новогодний вариант плашки (фиолетовый; winter/summer уже в §5). */
.bt-tile.ny{ background:linear-gradient(120deg,#3A1C5E,#6B2FA0); }

/* 13.6 МАРШРУТЫ (экран routes) ----------------------------------------------- */
/* Фильтры внутри .controls (как guide/hotels/places/excursions): обёртка sticky → сами не липнут. */
.routes .filters{ position:static; padding:0 18px 4px; }
/* Кнопки карточки маршрута: обе серые, одинаковой ширины. */
.routes .card-btns .btn{ flex:1; height:42px; }
/* Бейдж сложности: зелёный/жёлтый/красный, без капса. */
.bdg.diff{ text-transform:none; letter-spacing:normal; }
.bdg.diff.easy{ background:#E6F4EC; color:var(--green); }
.bdg.diff.medium{ background:#FFF8E8; color:#9A6A00; }
.bdg.diff.hard{ background:#FBE9E9; color:var(--red); }
/* Разделители сложности в режиме «Все». */
.route-diff.easy .cd-ic{ color:var(--green); }
.route-diff.medium .cd-ic{ color:#D89A00; }
.route-diff.hard .cd-ic{ color:var(--red); }
/* Раскрытие маршрута: нитка, снаряжение, предупреждение. */
.route-detail{ border-radius:12px; padding:12px 13px; background:#fff; border:1px solid var(--line); margin-bottom:10px; }
.route-detail:last-child{ margin-bottom:0; }
.route-detail-title{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.route-path ol{ counter-reset:route-step; list-style:none; display:grid; gap:8px; }
.route-path li{ position:relative; padding-left:30px; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.route-path li::before{
  counter-increment:route-step; content:counter(route-step);
  position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand); font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.route-take{ background:#F3FBF6; border-color:#D8EFE0; }
.take-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; }
.take-grid span{ background:#fff; border:1px solid #D8EFE0; border-radius:9px; padding:7px 9px; font-size:12px; color:var(--ink); font-weight:600; line-height:1.25; }
.route-warning{ background:#FFF8E8; border-color:#F1E2B8; }
.route-warning-text{ font-size:12.5px; color:#7A6520; line-height:1.5; }
.route-phone{ margin-top:8px; font-size:12.5px; font-weight:700; color:#7A6520; }
.route-phone a{ color:#7A6520; text-decoration:none; white-space:nowrap; }
/* Компактные полезные контакты на маршрутах. */
.route-contacts{ padding:0 18px; display:grid; gap:9px; }
.route-contact{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:12px 14px; }
.route-contact .ic{ width:38px; height:38px; border-radius:11px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 38px; }
.route-contact .body{ flex:1; min-width:0; }
.route-contact .name{ font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.route-contact .phone{ margin-top:2px; }
.route-contact .phone a{ font-size:12.5px; font-weight:700; color:var(--brand); text-decoration:none; }

/* 13.7 Акции ------------------------------------------------------------------ */
.deals .filters{ position:static; padding:0 18px 4px; }
.deals .feed{ padding:10px 18px 0; }
.super{
  background:#fff; border:1.5px solid var(--red); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(216,35,42,.12), 0 8px 26px rgba(216,35,42,.18);
  padding:15px; margin-bottom:13px;
}
.super .sh{
  display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin-bottom:8px;
}
.super .st{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.3; }
.super .sd{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:6px; }
.super .sb{
  display:block; width:100%; text-align:center; margin-top:12px; padding:11px;
  border-radius:11px; background:var(--red); border:0; color:#fff;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.deal{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:15px; margin-bottom:12px;
}
.deal.premium{
  border:1.5px solid var(--gold); background:linear-gradient(180deg,#FFFDF7,#fff);
  box-shadow:0 1px 2px rgba(201,162,39,.12), 0 8px 26px rgba(201,162,39,.18);
}
.deal-head{ display:flex; align-items:center; gap:11px; }
.deal-ic{
  width:42px; height:42px; border-radius:12px; background:var(--brand-tint);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 42px;
}
.deal.premium .deal-ic{ background:var(--gold-tint); }
.deal-main{ flex:1; min-width:0; }
.deal-badges{ display:flex; gap:6px; margin-bottom:3px; flex-wrap:wrap; }
.bdg.gold{ background:var(--gold-tint); color:var(--gold); }
.deal-name{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.2; }
.deal-offer{
  font-size:13px; color:var(--ink); line-height:1.45; margin-top:9px;
  padding:10px 12px; background:var(--bg-soft); border-radius:10px;
}
.deal.premium .deal-offer{ background:var(--gold-tint); }
.deal-btn{
  display:block; width:100%; text-align:center; margin-top:11px; padding:10px;
  border-radius:11px; background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.deals .disc{ margin-top:8px; }

/* 13.8 FAQ ---------------------------------------------------------------------- */
.faq .filters{ position:static; padding:0 18px 4px; }
.faq .faq-cta-actions{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:9px; margin-top:12px;
}
.faq .faq-cta-actions .b{
  margin-top:0; min-height:40px; padding-left:8px; padding-right:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
}
.faq .faq-cta-actions .b:only-child{ grid-column:1 / -1; }
.faq .ask-btn.tg{ background:#29A9EB; color:#fff; }
.faq .ask-btn.vk{ background:#0077FF; color:#fff; }
.faq .ask-btn:active{ filter:brightness(.94); }
.faq .acc-body{ overflow-wrap:anywhere; word-break:break-word; }
.faq .es-sub{ font-size:12.5px; color:var(--ink-faint); line-height:1.45; margin-top:5px; }
.faq{ padding-bottom:18px; }

/* 13.9 О КУРОРТЕ -------------------------------------------------------------- */
.about .about-nav{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  padding:14px 18px 4px; position:sticky; top:0; z-index:30; background:var(--bg-soft);
}
.about .about-nav::-webkit-scrollbar{ display:none; }
.about .about-nav button{
  flex:0 0 auto; padding:7px 13px; border-radius:999px; background:#fff;
  border:1.5px solid var(--line); color:var(--ink-soft); font:inherit;
  font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.about .about-acc{ margin:16px 18px 0; }
.about .about-acc-ic{ font-size:19px; flex:0 0 auto; }
.about .acc-body p + p{ margin-top:10px; }
.about-facts{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; padding:0 18px; }
.about-fact{
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:16px 14px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.about-fact .ic{ font-size:24px; }
.about-fact .n{ font-size:20px; font-weight:800; color:var(--brand-deep); margin-top:8px; line-height:1.15; }
.about-fact .l{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; line-height:1.3; }
.about-timeline{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:18px 16px 8px; }
.about-tl{ position:relative; padding:0 0 20px 72px; }
.about-tl-year{ position:absolute; left:0; top:1px; width:46px; font-size:11.5px; font-weight:800; color:var(--brand); }
.about-tl::before{
  content:""; position:absolute; left:48px; top:3px; width:9px; height:9px; border-radius:50%;
  background:var(--brand); border:2px solid #fff; box-shadow:0 0 0 1.5px var(--brand);
}
.about-tl::after{ content:""; position:absolute; left:52px; top:16px; width:2px; height:calc(100% - 12px); background:var(--line); }
.about-tl:last-child{ padding-bottom:10px; }
.about-tl:last-child::after{ display:none; }
.about-tl-title{ font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.about-tl-text{ font-size:12px; color:var(--ink-soft); margin-top:5px; line-height:1.5; }
.about-season{ margin:0 18px 11px; border-radius:14px; padding:15px 16px; color:#fff; box-shadow:var(--shadow); }
.about-season.winter{ background:linear-gradient(135deg,#1A3A5C,#0D2540); }
.about-season.spring{ background:linear-gradient(135deg,#1E5E4A,#123D30); }
.about-season.summer{ background:linear-gradient(135deg,#1E5E3A,#14401F); }
.about-season.autumn{ background:linear-gradient(135deg,#5E3A1A,#3D260F); }
.about-season-head{ display:flex; align-items:center; gap:10px; }
.about-season-ic{ font-size:22px; flex:0 0 auto; }
.about-season-title{ font-size:15px; font-weight:800; line-height:1.25; }
.about-season-period{ font-size:11.5px; opacity:.8; margin-top:2px; }
.about-season-tags{ display:flex; gap:6px; flex-wrap:wrap; margin:9px 0; }
.about-season-tag{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.18); }
.about-season-tag.best{ background:rgba(255,255,255,.92); color:var(--ink); }
.about-season-text{ font-size:12px; opacity:.9; line-height:1.5; }
.about-activities{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; padding:0 18px; }
.about-activity{
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:16px 14px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.about-activity .ic{ font-size:23px; }
.about-activity .t{ font-size:14px; font-weight:800; color:var(--ink); margin-top:8px; line-height:1.25; }
.about-activity .d{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; line-height:1.4; }
.about-peaks{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.about-peak{ display:flex; align-items:center; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line); }
.about-peak:last-child{ border-bottom:none; }
.about-peak .rank{
  width:24px; height:24px; border-radius:50%; background:var(--bg-soft); color:var(--ink-faint);
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 24px;
}
.about-peak.top .rank{ background:var(--gold); color:#fff; }
.about-peak .body{ flex:1; min-width:0; }
.about-peak .name{ font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.about-peak .desc{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; line-height:1.35; }
.about-peak .height{ font-size:13px; font-weight:800; color:var(--brand); flex:0 0 auto; white-space:nowrap; }
.about-tips .tip{ display:flex; gap:11px; padding:7px 0; font-size:12.5px; color:var(--ink); line-height:1.45; }
.about-tips .tip .ic{ font-size:15px; flex:0 0 auto; }
.about-getting{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.about-get-row{ display:flex; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line); }
.about-get-row:last-child{ border-bottom:none; }
.about-get-row .ic{ font-size:19px; flex:0 0 auto; }
.about-get-row .t{ font-size:13px; font-weight:800; color:var(--ink); }
.about-get-row .d{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
.about-transfer{
  display:block; width:calc(100% - 36px); margin:11px 18px 0; padding:12px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-size:13px; font-weight:700; text-align:center; cursor:pointer;
}
.about-promo{ margin:18px 18px 0; background:linear-gradient(135deg,var(--brand),var(--brand-deep)); border-radius:16px; padding:18px; color:#fff; text-align:center; }
.about-promo .t{ font-size:16px; font-weight:800; line-height:1.25; }
.about-promo .s{ font-size:12px; opacity:.85; margin-top:5px; line-height:1.4; }
.about-promo .btns{ display:flex; gap:9px; margin-top:13px; }
  .about-promo button{
    flex:1; padding:11px; border-radius:11px; background:#fff; border:0; color:var(--brand);
    font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  }

/* 13.9 SLOPES ---------------------------------------------------------------- */
.slopes .statusbar{ margin:14px 18px 0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.slopes .sb-now{ padding:14px 16px; display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--line); }
.slopes .sb-now .ic{ width:42px; height:42px; border-radius:12px; background:#E6F4EC; display:flex; align-items:center; justify-content:center; font-size:21px; flex:0 0 42px; }
.slopes .sb-now .big{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.25; }
.slopes .sb-now .big b{ color:var(--green); }
.slopes .sb-now .sm, .slopes .sb-upd{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.35; }
.slopes .sb-upd{ color:var(--brand); font-weight:700; }
.slopes .sb-link{ padding:11px 16px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.slopes .sb-link .t{ font-size:12.5px; font-weight:700; color:var(--brand); }
.slopes .sb-link .s{ font-size:11px; color:var(--ink-faint); }
.slopes .sb-link .arr{ margin-left:auto; color:var(--ink-faint); font-size:19px; }
.slopes-season-note{
  padding:0 22px 10px;
  line-height:1.45;
  font-size:11px;
  font-weight:500;
  color:var(--ink-faint);
}

.lift{ margin:0 18px 12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.lift-head{ padding:15px 16px 13px; display:flex; gap:12px; align-items:flex-start; }
.lift-num{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:#fff; flex:0 0 34px; background:var(--brand); }
.lift-1 .lift-num{ background:#2965A1; } .lift-2 .lift-num{ background:#7A3FA0; } .lift-3 .lift-num{ background:#C0504D; }
.lift-name{ font-size:16px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.25; }
.lift-desc{ font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.4; }
.st{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.st.open{ background:#E6F4EC; color:var(--green); } .st.closed{ background:#FBE9E9; color:var(--red); } .st.unknown{ background:var(--bg-soft); color:var(--ink-faint); }

.elev{ margin:0 16px; padding:10px 0 4px; }
.elev-bar{ height:5px; border-radius:999px; background:linear-gradient(90deg,var(--brand-light),#7A3FA0); position:relative; margin:6px 0; }
.elev-row{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink); }
.elev-row .end{ text-align:right; }
.elev-row .lbl{ font-size:10px; font-weight:500; color:var(--ink-faint); }
.elev-mid{ text-align:center; font-size:10.5px; color:var(--ink-faint); margin-top:2px; }
.params{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:9px 16px 14px; }
.param{ background:var(--bg-soft); border-radius:10px; padding:9px 10px; min-width:0; }
.param .k{ font-size:10px; color:var(--ink-faint); margin-bottom:3px; }
.param .v{ font-size:12px; font-weight:800; color:var(--ink); line-height:1.25; }

.trails-toggle{ padding:11px 16px; background:var(--bg-soft); border-top:1px solid var(--line); display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12px; font-weight:700; color:var(--brand); }
.trails-toggle .chev{ margin-left:auto; transition:transform .2s; color:var(--ink-faint); }
.lift.open .trails-toggle .chev{ transform:rotate(90deg); }
.trails{ background:var(--bg-soft); padding:0 16px 12px; display:none; }
.lift.open .trails{ display:block; }
.trail{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid rgba(0,0,0,.04); }
.trail:last-child{ border-bottom:none; }
.trail-num{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex:0 0 22px; background:var(--ink-faint); }
.d-green{ background:#2E9E5B; } .d-blue{ background:#2F6FB0; } .d-red{ background:#D8232A; } .d-black{ background:#1A1A1A; } .d-unknown{ background:var(--ink-faint); }
.trail-name{ font-size:13px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap; line-height:1.3; }
.trail-desc{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.st-sm{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; }
.st-sm.closed{ background:#FBE9E9; color:var(--red); } .st-sm.open{ background:#E6F4EC; color:var(--green); } .st-sm.unknown{ background:#fff; color:var(--ink-faint); }
.dlabel{ font-size:10px; color:var(--ink-faint); }
.trails-alone{ margin:0 18px; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:4px 14px; }

.pass{ margin:0 18px 10px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.pass-head{ padding:14px 15px; display:flex; align-items:center; gap:13px; cursor:pointer; }
.pass.single .pass-head{ cursor:default; }
.pass .ic{ width:40px; height:40px; border-radius:11px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 40px; }
.pass-title{ flex:1; min-width:0; }
.pass .tt{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.25; }
.pass .ss{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; line-height:1.35; }
.pass .price{ margin-left:auto; text-align:right; display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.pass .price .p{ font-size:16px; font-weight:800; color:var(--brand); white-space:nowrap; }
.pass .price .u{ font-size:10px; color:var(--ink-faint); white-space:nowrap; }
.pass .chev{ font-size:15px; color:var(--ink-faint); transition:transform .2s; }
.pass.open .chev{ transform:rotate(90deg); }
.pass-body{ display:none; border-top:1px solid var(--line); background:var(--bg-soft); }
.pass.open .pass-body{ display:block; }
.prow{ display:flex; justify-content:space-between; gap:12px; padding:10px 15px; font-size:13px; border-bottom:1px solid rgba(0,0,0,.04); }
.prow:last-child{ border-bottom:none; }
.prow .k{ color:var(--ink-soft); } .prow .v{ font-weight:800; color:var(--ink); white-space:nowrap; }
.pass-note{ font-size:11px; color:var(--ink-faint); margin:2px 22px 0; line-height:1.45; font-weight:500; }
.pass-empty{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:15px; display:grid; gap:12px; font-size:13px; color:var(--ink-soft); }

.hours{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.hour-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 15px; border-bottom:1px solid var(--line); font-size:13px; gap:12px; }
.hour-row:last-child{ border-bottom:none; }
.hour-row .k{ color:var(--ink-soft); } .hour-row .k b{ color:var(--ink); font-weight:700; }
.hour-row .k .sub{ display:block; font-size:11px; color:var(--ink-faint); margin-top:1px; }
.hour-row .v{ font-weight:800; color:var(--ink); white-space:nowrap; }
.hour-row.evening{ background:var(--brand-tint); } .hour-row.evening .v{ color:var(--brand); }
.slopes-error-link .empty-state{ padding-bottom:20px; }

/* 13.10 WEATHER -------------------------------------------------------------- */
.wcards{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; padding:14px 18px 0; }
.wcard{ background:linear-gradient(160deg,var(--brand-light) 0%,var(--brand) 55%,var(--brand-deep) 100%); border-radius:16px; padding:14px; color:#fff; box-shadow:var(--shadow); min-width:0; }
.wcard .elev{ margin:0; padding:0; font-size:10.5px; color:rgba(255,255,255,.65); font-weight:600; }
.wcard .place{ font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fff; min-width:0; }
.wcard .place .ico{ font-size:22px; flex:0 0 auto; }
.wcard .temp{ font-size:34px; font-weight:800; line-height:1.1; margin-top:4px; color:#fff; }
.wcard .feels{ font-size:11px; color:rgba(255,255,255,.68); margin-bottom:9px; }
.wcard .wrow{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; padding:3px 0; border-top:1px solid rgba(255,255,255,.12); }
.wcard .wrow .k{ color:rgba(255,255,255,.72); }
.wcard .wrow .v{ font-weight:700; color:#fff; text-align:right; }
.weather-cond{ margin-top:0; }
.weather .ski-cond{ margin:0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.weather .sc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.weather .sc-cell{ min-width:0; padding:12px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.weather .sc-cell:nth-child(2n){ border-right:none; }
.weather .sc-cell:nth-last-child(-n+2){ border-bottom:none; }
.weather .sc-cell .k{ font-size:10.5px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; line-height:1.25; }
.weather .sc-cell .v{ margin-top:3px; font-size:14px; font-weight:800; color:var(--ink); line-height:1.25; overflow-wrap:anywhere; }
.weather .sc-cell .s{ margin-top:2px; font-size:10.5px; color:var(--ink-soft); line-height:1.3; overflow-wrap:anywhere; }
.weather .sc-warn{ padding:11px 14px; background:#FFF8E8; border-top:1px solid #F3E3B2; font-size:12px; font-weight:700; color:#8A6B14; display:grid; gap:5px; line-height:1.35; }
.weather .sc-warn-item{ min-width:0; overflow-wrap:anywhere; }
.weather .sc-warn-item::before{ content:'!'; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-right:7px; border-radius:50%; background:#E8A317; color:#fff; font-size:10px; font-weight:800; vertical-align:1px; }
.fc-toggle{ display:flex; gap:7px; padding:0 18px 10px; }
.fc-tab{ flex:1; min-width:0; text-align:center; padding:8px; border-radius:10px; background:#fff; border:1px solid var(--line); font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; }
.fc-tab.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fc-days{ display:flex; gap:8px; overflow-x:auto; padding:0 18px 4px; scrollbar-width:none; }
.fc-days::-webkit-scrollbar{ display:none; }
.fc-day{ flex:0 0 auto; width:62px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:11px 6px; text-align:center; box-shadow:var(--shadow); }
.fc-day.on{ background:var(--brand-tint); border-color:var(--brand); }
.fc-day .d{ font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; }
.fc-day.on .d{ color:var(--brand); }
.fc-day .ic{ font-size:22px; margin:6px 0; }
.fc-day .tmax{ font-size:14px; font-weight:800; color:var(--ink); }
.fc-day .tmin{ font-size:11px; color:var(--ink-faint); }
.fc-hours{ padding:0 18px 4px; }
.fc-hour{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:9px 14px; margin-bottom:7px; box-shadow:var(--shadow); min-width:0; }
.fc-hour .h{ font-size:13px; font-weight:700; color:var(--ink); flex:0 0 48px; }
.fc-hour .ic{ font-size:19px; flex:0 0 auto; }
.fc-hour .t{ font-size:14px; font-weight:800; color:var(--ink); }
.fc-hour .extra{ margin-left:auto; font-size:11px; color:var(--ink-faint); display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.weather-link{ margin:0 18px 11px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.weather-link .t{ font-size:12.5px; font-weight:800; color:var(--brand); }
.weather-link .s{ font-size:11px; color:var(--ink-faint); }
.weather-link .arr{ margin-left:auto; color:var(--ink-faint); font-size:19px; }
.cam-filters{ display:flex; gap:8px; overflow-x:auto; padding:0 18px 4px; scrollbar-width:none; }
.cam-filters::-webkit-scrollbar{ display:none; }
.cf{ flex:0 0 auto; padding:7px 14px; border-radius:999px; background:#fff; border:1.5px solid var(--line); font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft); white-space:nowrap; cursor:pointer; }
.cf.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.cam{ margin:11px 18px 0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 15px; }
.cam-head{ display:flex; gap:11px; align-items:flex-start; }
.cam-ic{ width:38px; height:38px; border-radius:10px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 38px; }
.cam-name{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.cam-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; align-items:center; }
.cam-tags .live{ background:var(--red); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; display:inline-flex; align-items:center; gap:3px; }
.cam-tags .loc{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; background:var(--brand-tint); color:var(--brand); }
.cam-desc{ font-size:12px; color:var(--ink-soft); margin-top:9px; line-height:1.4; }
.cam-meta{ display:flex; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--ink-faint); margin-top:9px; }
.cam-btns, .cam-actions{ display:flex; gap:8px; margin-top:11px; }
.cam-btns .b, .cam-actions .b{ flex:1 1 0; min-width:0; height:38px; border:0; border-radius:10px; background:var(--brand); color:#fff; font:inherit; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; white-space:nowrap; }
.cam-actions{ display:none; }
.cam-actions .b.secondary{ background:#fff; border:1px solid var(--line); color:var(--ink-soft); }
.cam-video{ display:none; margin-top:11px; border-radius:10px; overflow:hidden; background:#0E1B2A; aspect-ratio:16/9; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:12px; }
.cam-video iframe{ width:100%; height:100%; border:0; display:block; background:#0E1B2A; }
.cam.playing .cam-video{ display:flex; }
.cam.playing .cam-btns{ display:none; }
.cam.playing .cam-actions{ display:flex; }
.empty-state.small{ padding:20px 24px; }

/* 13.11 НОВОСТИ -------------------------------------------------------------- */
.news .feed{ padding:0 18px; }
.news-important{ padding:10px 18px 0; }
.news .post{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.news .news-post{ margin-bottom:13px; }
.news .important-post{
  border:1.5px solid var(--red);
  box-shadow:0 1px 2px rgba(216,35,42,.12), 0 8px 26px rgba(216,35,42,.18);
}
.news .post-img{ width:100%; height:180px; object-fit:cover; display:block; background:linear-gradient(135deg,#cfe0ef,#a9c4dd); }
.news .post-body{ padding:14px 15px 15px; }
.news .post-meta{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin-bottom:8px; }
.news .post-cat{
  min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; background:var(--brand-tint); color:var(--brand);
}
.news .post-cat.warn{ background:#FBE9E9; color:var(--red); }
.news .post-title{ font-size:14px; font-weight:800; color:var(--ink); line-height:1.35; margin-bottom:6px; }
.news .post-date{ font-size:11.5px; color:var(--ink-faint); font-weight:600; white-space:nowrap; }
.news .post-text{ font-size:13.5px; color:var(--ink); line-height:1.5; overflow-wrap:anywhere; }
.news .post-text.clamp{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.news .post.open .post-text.clamp{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.news .post-actions{ display:flex; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.news .pa-btn{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:2px 8px; border:0; background:none; font:inherit; font-size:13px; font-weight:700;
  color:var(--brand); cursor:pointer; line-height:1.2; text-align:center;
}
.news .pa-btn + .pa-btn{ border-left:1px solid var(--line); }
.news .pa-btn .chev{
  width:7px; height:7px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg); flex:0 0 auto;
}
.news .pa-btn.off{ color:var(--ink-faint); cursor:default; }
.news .pa-btn.off .chev{ border-color:var(--ink-faint); }
.news .post.open .pa-btn[data-news-toggle] .chev{ transform:rotate(45deg); }
.news .news-empty{
  margin:0 0 13px; padding:28px 20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.news .subscribe{
  margin:2px 0 13px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:15px;
}
.news .subscribe .st{ font-size:14.5px; font-weight:800; color:var(--ink); text-align:center; }
.news .subscribe .ss{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:3px; line-height:1.4; }
.news .subscribe .socials{ padding:0; margin-top:13px; gap:9px; }
.news .subscribe .soc{
  border:0; font:inherit; border-radius:12px; padding:12px; text-align:center;
  font-size:13px; font-weight:700; color:#fff; cursor:pointer;
}
.news .subscribe .soc.tg{ background:#29A9EB; }
.news .subscribe .soc.vk{ background:#0077FF; }
.news .subscribe .soc.max{ background:linear-gradient(120deg,#5B8DEF,#8B5BEF); }
.news .subscribe .soc.dzen{ background:#111; }

/* 13.12 ТРАНСФЕР ------------------------------------------------------------- */
.transfer .sec-h-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 22px 11px;
}
.transfer .sec-h-row .sec-h{
  padding:0; min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.transfer .sec-link{
  flex:0 0 auto; border:0; background:transparent; color:var(--brand); font:inherit;
  font-size:12px; font-weight:800; line-height:1; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px; padding:4px 0;
}
.transfer .sec-link:after{ content:"↓"; font-size:12px; line-height:1; }
.transfer-how{ padding:0 12px; }
.transfer .transfer-acc{ margin-bottom:10px; }
.transfer .transfer-acc .acc-body{ padding:0 10px 12px; }
.transfer-acc-ic{
  width:34px; height:34px; border-radius:10px; background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:0 0 34px;
}
.transfer-ways{ display:block; }
.transfer-way{
  display:block; padding:10px 0; border-top:1px solid var(--line);
  min-width:0;
}
.transfer-way:first-child{ border-top:0; padding-top:1px; }
.transfer-way-ic{
  display:none;
}
.transfer-way-body{ flex:1; min-width:0; }
.transfer-way-title{ font-size:14.2px; font-weight:800; color:var(--ink); line-height:1.25; overflow-wrap:anywhere; }
.transfer-way-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.42; margin-top:4px; }
.transfer-arrival-scenario .transfer-way-desc + .transfer-way-desc{ margin-top:10px; }
.transfer-meta{ display:grid; gap:2px; margin-top:7px; }
.transfer-meta span{
  font-size:11.5px; color:var(--ink-faint); font-weight:600; background:transparent; border-radius:0;
  padding:0; overflow-wrap:anywhere;
}
.transfer-info-actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:10px; }
.transfer-info-actions button{
  width:100%; height:40px; border-radius:10px; padding:0 12px; border:0; font:inherit;
  font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; overflow:hidden; text-overflow:ellipsis;
}
.transfer-info-btn{ background:var(--bg-soft); color:var(--ink); }
.transfer-info-link{ background:var(--bg-soft); color:var(--ink); }
.transfer-note{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-bottom:10px; }
.transfer-note-after{ margin:10px 0 0; }
.transfer-routes-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.transfer-route-card{
  background:var(--bg-soft); border:0; border-radius:10px; padding:11px 12px; min-width:0;
}
.transfer-route-title{ font-size:12px; font-weight:800; color:var(--brand-deep); line-height:1.25; margin-bottom:10px; overflow-wrap:anywhere; }
.transfer-stops{ display:grid; gap:0; }
.transfer-stop{
  position:relative; padding:0 0 9px 18px; font-size:11.7px; color:var(--ink); line-height:1.25; overflow-wrap:anywhere;
}
.transfer-stop:before{
  content:""; position:absolute; left:3px; top:3px; width:7px; height:7px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 2px #fff;
}
.transfer-stop:after{
  content:""; position:absolute; left:6px; top:11px; bottom:0; border-left:1px solid rgba(41,101,161,.28);
}
.transfer-stop.end{ color:var(--green); font-weight:800; padding-bottom:0; }
.transfer-stop.end:before{ background:var(--green); box-shadow:0 0 0 2px #fff; }
.transfer-stop.end:after{ display:none; }
.transfer-route-meta{
  font-size:11px; color:var(--ink-faint); font-weight:700; line-height:1.25; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.transfer-service-btn,
.transfer-public-row{
  display:flex; align-items:center; gap:9px; background:var(--bg-soft); border:0; border-radius:10px;
  box-shadow:none; min-width:0; cursor:pointer;
}
.transfer-service-btn{
  width:100%; height:40px; padding:0 2px; justify-content:center; font:inherit;
}
.transfer-service-list{ display:grid; gap:8px; margin-top:10px; }
.transfer-service-name,
.transfer-public-row .t{
  flex:1; min-width:0; font-size:12px; font-weight:800; color:var(--ink); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.transfer-service-name{ flex:0 1 auto; max-width:100%; text-align:center; }
.transfer-public-row{ min-height:40px; padding:0 12px; }
.transfer-public-action{
  flex:0 0 auto; font-size:11.5px; font-weight:800; color:var(--brand); white-space:nowrap;
}
.transfer-public-list{ display:grid; gap:8px; margin-top:10px; }
.transfer .card-btns .btn{ flex:1; height:42px; }
.transfer-call-btn{ background:#E6F4EC; color:var(--green); }
.transfer .det .v .yes{ color:var(--green); }
.transfer .det .v .no{ color:var(--ink-faint); }
.transfer-status{ padding:0 18px; }
.transfer-status .empty-state{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:26px 18px; }
.transfer .empty-state.small .es-icon{ font-size:30px; }
.transfer .empty-state.small .es-text{ font-size:13px; }
.transfer-error{ padding:0 18px; }
@media (max-width:360px){
  .transfer .sec-h-row{ padding-left:18px; padding-right:18px; gap:8px; }
  .transfer .sec-h-row .sec-h{ font-size:11px; letter-spacing:.08em; }
  .transfer .sec-link{ font-size:11px; }
  .transfer-routes-grid{ grid-template-columns:minmax(0,1fr); }
  .transfer-info-actions{ display:grid; grid-template-columns:minmax(0,1fr); }
  .transfer-service-btn, .transfer-public-row{ align-items:center; }
  .transfer-service-btn{ padding:0 6px; }
  .transfer-service-name{ font-size:9.6px; }
  .transfer-public-row{ padding:0 8px; gap:6px; }
  .transfer-public-row .t{ font-size:10.8px; }
  .transfer-public-action{ font-size:10.4px; }
  .transfer .card-btns{ display:grid; grid-template-columns:minmax(0,1fr); }
}
@media (max-width:330px){
  .transfer-service-btn{ padding:0 4px; }
  .transfer-service-name{ font-size:8.7px; }
}

/* 13.13 ADS / РЕКЛАМА И СОТРУДНИЧЕСТВО ------------------------------------- */
.ads .acc{
  margin:0 18px 11px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden;
}
.ads .acc summary{
  min-height:48px; display:flex; align-items:center; gap:10px; padding:13px 15px;
  cursor:pointer; list-style:none;
}
.ads .acc summary::-webkit-details-marker{ display:none; }
.ads .acc summary::after{
  content:"›"; margin-left:auto; color:var(--ink-faint); font-size:24px; line-height:1;
  transform:rotate(90deg); transition:transform .18s ease;
}
.ads .acc[open] summary::after{ transform:rotate(-90deg); }
.ads .acc-ic{
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  flex:0 0 24px; font-size:17px; line-height:1;
}
.ads .acc-t{ font-size:14.5px; font-weight:800; color:var(--ink); }
.ads .acc-body{ padding:0 15px 14px; }
.ads .acc-feat{
  display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink); line-height:1.45;
}
.ads .acc-feat:first-child{ border-top:0; }
.ads .acc-feat .ck{ color:var(--green); font-weight:800; flex:0 0 auto; }
.ads .acc-cat{ padding:9px 0; border-top:1px solid var(--line); }
.ads .acc-cat:first-child{ border-top:0; }
.ads .acc-cat .ct{
  display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:var(--ink);
}
.ads .acc-cat .cd{ margin-top:3px; font-size:12px; color:var(--ink-soft); line-height:1.45; }
.ads .tariffs{ padding:0 18px; display:grid; gap:11px; }
.ads .tariff{
  min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px; overflow:hidden;
}
.ads .tariff.premium{
  border:1.5px solid var(--gold); background:linear-gradient(180deg,#FFFDF7,#fff);
  box-shadow:0 1px 2px rgba(201,162,39,.12),0 8px 26px rgba(201,162,39,.16);
}
.ads .tariff-h{ display:flex; align-items:flex-start; gap:9px; margin-bottom:10px; }
.ads .tariff-badge{
  display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px;
  background:var(--bg-soft); color:var(--ink-soft); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.03em;
}
.ads .premium .tariff-badge{ background:var(--gold-tint); color:var(--gold); }
.ads .tariff-title{ margin-top:5px; font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.ads .tariff-condition{
  margin-left:auto; flex:0 0 auto; max-width:132px; min-height:32px; border:0; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-deep); padding:7px 10px; font:inherit;
  font-size:11.5px; font-weight:800; line-height:1.2; cursor:pointer;
}
.ads .premium .tariff-condition{ background:var(--gold-tint); color:var(--gold); }
.ads .tariff-condition:disabled{ opacity:.55; cursor:default; }
.ads .feat{
  display:flex; align-items:flex-start; gap:9px; padding:5px 0; font-size:12.5px;
  color:var(--ink); line-height:1.4;
}
.ads .feat span{ color:var(--green); font-weight:800; flex:0 0 auto; }
.ads .feat b{ font-weight:700; }
.ads .steps{ margin:0; background:transparent; border:0; box-shadow:none; padding:0; }
.ads .step{ display:flex; align-items:flex-start; gap:13px; padding:8px 0; }
.ads .step + .step{ border-top:1px solid var(--line); }
.ads .step-n{
  width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 26px;
  font-size:12.5px; font-weight:800;
}
.ads .step-t{ padding-top:4px; font-size:13px; font-weight:700; color:var(--ink); line-height:1.35; }
.ads .ch-card{
  width:calc(100% - 36px); min-width:0; margin:0 18px 10px; background:#fff;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px 13px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:11px;
  color:inherit; cursor:pointer; font:inherit; text-align:left; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.ads .ch-card:active{ transform:translateY(1px); box-shadow:0 1px 1px rgba(16,24,40,.04); }
.ads .ch-card:disabled{ opacity:.55; cursor:default; transform:none; }
.ads .ch-card:focus{ outline:none; }
.ads .ch-card:focus-visible{ box-shadow:var(--shadow),0 0 0 3px var(--brand-tint); }
.ads .ch-ic{
  width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:900; color:#fff;
}
.ads .ch-ic.telegram,
.ads .ch-ic.tg{ background:#29A9EB; }
.ads .ch-ic.vk{ background:#0077FF; }
.ads .ch-ic.max{ background:linear-gradient(135deg,#5B8DEF,#8B5BEF); }
.ads .ch-ic .d{ transform:translateY(.5px); }
.ads .ch-main{ min-width:0; }
.ads .ch-name{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.2; }
.ads .ch-sub{
  margin-top:3px; font-size:10.5px; color:var(--ink-faint); line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ads .ch-metric{ text-align:right; min-width:64px; }
.ads .ch-num{ font-size:13px; font-weight:800; color:var(--ink); line-height:1.15; white-space:nowrap; }
.ads .ch-cap{ margin-top:2px; font-size:10.5px; color:var(--ink-faint); line-height:1.1; }
.ads .ch-arr{ color:var(--ink-faint); font-size:24px; line-height:1; }
.ads .contact{
  width:calc(100% - 36px); margin:0 18px; border:0; border-radius:14px; padding:14px 15px; color:#fff; cursor:pointer;
  display:flex; align-items:center; gap:11px; background:linear-gradient(135deg,var(--brand-deep),var(--brand));
  box-shadow:0 10px 24px rgba(41,128,185,.2); font:inherit; text-align:left;
}
.ads .contact .ic{
  width:36px; height:36px; border-radius:11px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex:0 0 36px; font-size:17px;
}
.ads .contact-copy{ flex:1 1 auto; min-width:0; }
.ads .contact .t{ font-size:15px; font-weight:800; line-height:1.2; white-space:nowrap; }
.ads .contact .s{ margin-top:2px; font-size:11.6px; opacity:.86; line-height:1.3; white-space:nowrap; }
.ads .contact .arr{ flex:0 0 auto; font-size:24px; opacity:.8; }
.ads .tips{ margin:0 18px; }
.ads .tip{ font-size:12.5px; line-height:1.45; }
.ads .disc{ margin-top:18px; }
.ads .disc .txt p + p{ margin-top:8px; }
@media (max-width:360px){
  .ads .tariff-h{ align-items:stretch; flex-direction:column; }
  .ads .tariff-condition{ margin-left:0; max-width:none; width:100%; }
  .ads .ch-card{ grid-template-columns:auto minmax(0,1fr) auto; gap:9px; padding:11px 12px; }
  .ads .ch-metric{ min-width:58px; }
  .ads .ch-cap{ display:none; }
  .ads .ch-arr{ display:none; }
  .ads .contact .t{ white-space:normal; }
  .ads .contact .s{ white-space:normal; }
}

/* 14. НИЖНЯЯ НАВИГАЦИЯ --------------------------------------------------------- */
/* Фикс, 5 кнопок: Главная · Трассы · Заведения · Отели · Контакты. Активная — --brand. */
.nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
  background:#fff; border-top:1px solid var(--line); display:flex; justify-content:space-around;
  padding:8px 0 max(10px, env(safe-area-inset-bottom)); z-index:50;
}
.nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:600; color:var(--ink-faint); text-decoration:none; cursor:pointer; }
.nav a.on{ color:var(--brand); }
.nav .ni{ font-size:20px; }

/* 15. СОСТОЯНИЯ: ЗАГРУЗКА / ПУСТО / ОШИБКА ------------------------------------- */
/* Единый паттерн, обязателен на всех страницах с данными (DESIGN_SYSTEM §9). */
.empty-state{ text-align:center; padding:40px 24px; color:var(--ink-soft); }
.es-icon{ font-size:40px; margin-bottom:12px; }
.es-text{ font-size:14px; line-height:1.5; }
.retry-btn{ margin-top:16px; background:var(--brand-deep); color:#fff; border:none; border-radius:11px; padding:11px 22px; font-weight:700; cursor:pointer; }

/* Скелетоны (shimmer) — форма контента, не спиннер. */
.sk-line{ height:12px; border-radius:6px; background:linear-gradient(90deg,#EEF1F5,#F7F9FB,#EEF1F5); background-size:200% 100%; animation:sk 1.2s infinite; }
@keyframes sk{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){
  .sk-line{ animation:none; }
  .mc:active{ transform:none; }
}

/* 16. КНОПКА «НАЗАД» — МАТРИЦА ПО ПЛОЩАДКАМ ------------------------------------ */
/* TG — нативная BackButton (своя скрыта). VK/MAX/Web — показываем свою .backbtn. */
.backbtn{ display:none; }
[data-platform="vk"] .backbtn,
[data-platform="max"] .backbtn,
[data-platform="web"] .backbtn{ display:flex; }

/* Платформенные хелперы: показывать блок только на своей площадке. */
.tg-only, .vk-only, .max-only{ display:none; }
[data-platform="tg"]  .tg-only{ display:block; }
[data-platform="vk"]  .vk-only{ display:block; }
[data-platform="max"] .max-only{ display:block; }

/* 17. АДАПТИВНОСТЬ ------------------------------------------------------------- */
/* Узкий layout — стандарт. На широких экранах полоса по центру, фон по бокам. НЕ добавляем колонки. */
@media (max-width:360px){
  .htitle-xl{ font-size:44px; }
  .menu{ gap:9px; padding:14px 14px 0; }
  .pill{ font-size:11.5px; }
}
@media (max-width:320px){
  .menu{ grid-template-columns:1fr; }
}
@media (min-width:500px){
  body{ background:var(--bg-soft); }
  .wrap{ box-shadow:0 0 40px rgba(14,27,42,.06); }
}