/* =============================================================================
   Zareen Travel — статический сайт. Все стили в одном файле.

   Дизайн-идея: у сайта два читателя — проверяющий по лицензии, который ищет
   конкретные сведения, и клиент, который решает, можно ли доверять. Общее у них
   одно: им нужны условия. Поэтому центральный визуальный приём здесь — БЛАНК:
   подпись слева капителью, значение справа табличными цифрами, волосяная
   линейка между строками. Один приём работает в трёх масштабах — шапка главной,
   карточка тура, блок реквизитов, — и именно повторяемость делает сайт цельным.

   Порядок секций: токены → база → типографика → раскладка → компоненты →
   движение → печать. Селекторы держим односложными (.card, .facts), чтобы
   специфичность не воевала сама с собой при правках.
   ============================================================================= */

/* --- Шрифт ------------------------------------------------------------------
   Локально, двумя подмножествами. Кириллица отдельным файлом: латинская версия
   весит втрое больше, и грузить её ради русской страницы незачем. Google Fonts
   намеренно не используются — это сторонний домен, то есть передача IP-адреса
   посетителя третьему лицу, которую пришлось бы описывать в политике данных. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Токены ---------------------------------------------------------------- */
:root {
  /* Бренд зафиксирован логотипом и рабочей платформой — эти два цвета не наши,
     их менять нельзя. Свободны только фон и нейтрали: взят холодный «бумажный»
     оттенок с синевой, а не тёплый кремовый, чтобы не спорить с navy. */
  --navy: #0d3a5f;
  --navy-solid: #0d3a5f; /* фон плашек: не зависит от темы */
  --navy-deep: #082539;
  --orange: #f2801d;
  --orange-ink: #a85507; /* тот же акцент, но контрастный на светлом (>4.5:1) */
  --paper: #f4f7fb;
  --surface: #ffffff;
  --ink: #17293f;
  --ink-soft: #5a6b81;
  --rule: #dfe6f0;
  --rule-strong: #c3d0e0;
  --ok: #166534;
  --warn: #9a4a0c;

  /* Типографическая шкала. Заголовки набираются плотно: широкий трекинг у
     крупного кегля выглядит рыхло, а плотный — как набор на бланке. */
  --fs-label: 0.72rem;
  --fs-small: 0.84rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  --fs-h3: clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem);
  --fs-h1: clamp(2rem, 1.35rem + 3vw, 3.5rem);
  --fs-display: clamp(2.3rem, 1.4rem + 4.2vw, 4.4rem);

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.62;
  --tr-tight: -0.035em;
  --tr-label: 0.16em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --wrap: 1120px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-card: 0 1px 2px rgba(13, 40, 66, 0.05), 0 12px 28px -14px rgba(13, 40, 66, 0.28);
  --shadow-lift: 0 2px 6px rgba(13, 40, 66, 0.07), 0 26px 50px -20px rgba(13, 40, 66, 0.4);
  --ring: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--orange);

  --dur: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light dark;
}

/* --- База ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* Якорь #legal из подвала не должен уезжать под липкую шапку. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--navy); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); }

/* Фокус виден всегда и одинаково: клавиатурный пользователь не должен угадывать,
   где он находится. Кольцо строится из двух теней, поэтому не сдвигает раскладку. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

::selection { background: color-mix(in srgb, var(--orange) 26%, transparent); }

/* Ссылка «к содержимому» — первая в табуляции, видима только при фокусе. */
.skip {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 60;
  padding: 10px 16px;
  background: var(--navy-solid);
  color: #fff;
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip:focus-visible { transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Типографика ----------------------------------------------------------- */
h1, h2, h3 {
  margin: 0;
  color: var(--navy);
  font-weight: 640;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-head);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* Подпись поля. Это «голос бланка»: капитель, разрядка, приглушённый цвет.
   Подпись и значение НИКОГДА не одного размера — на этом контрасте держится
   вся визуальная система сайта. */
.eyebrow,
.field-label,
.facts dt,
.legal-row dt,
.card-facts dt,
.tour-facts dt,
.pay-list dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
}
.eyebrow { margin: 0 0 var(--sp-3); }
.eyebrow a { color: inherit; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
.muted { color: var(--ink-soft); }
.note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: var(--sp-4);
}

/* --- Раскладка ------------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--sp-5), var(--wrap));
  margin-inline: auto;
}
@media (min-width: 700px) {
  .wrap { width: min(100% - 2 * var(--sp-7), var(--wrap)); }
}

/* Вертикальный ритм задаётся ОДНОЙ утилитой. Если позволить каждой странице
   свои отступы, они начнут перебивать друг друга специфичностью. */
.sect { padding-block: var(--sp-7); }
@media (min-width: 700px) { .sect { padding-block: var(--sp-9); } }
.sect-muted { background: var(--surface); border-block: 1px solid var(--rule); }

.page-head { padding-top: var(--sp-7); }
@media (min-width: 700px) { .page-head { padding-top: var(--sp-8); } }
.page-head .lead { margin-top: var(--sp-4); }

/* Блок, который идёт сразу за секцией: свой верхний отступ ему не нужен, иначе
   между двумя соседними .sect набегает двойной интервал в две сотни пикселей. */
.sect-end { padding-bottom: var(--sp-7); }
@media (min-width: 700px) { .sect-end { padding-bottom: var(--sp-9); } }

.sect-head { margin-bottom: var(--sp-6); max-width: 62ch; }
.sect-head p { color: var(--ink-soft); margin-top: var(--sp-3); margin-bottom: 0; }
.sect-head-row {
  max-width: none;
  display: flex;
  gap: var(--sp-5);
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-cards,
.grid-tours { grid-template-columns: 1fr; }
.grid-trust { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-trust { grid-template-columns: repeat(2, 1fr); }
  .grid-cards,
  .grid-tours { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid-cards,
  .grid-tours { grid-template-columns: repeat(3, 1fr); }
  .grid-trust { grid-template-columns: repeat(4, 1fr); }
}

/* --- Кнопки ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px; /* палец, а не курсор: ниже 44px промахиваются */
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ico { flex: none; }

.btn-solid { background: var(--orange); color: #10233a; border-color: var(--orange); }
.btn-solid:hover { background: #ff9236; border-color: #ff9236; }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--rule-strong); }
.btn-outline:hover { border-color: var(--navy); background: var(--surface); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--navy); }

.btn-lg { min-height: 52px; padding: 14px 24px; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: 6px 12px; font-size: var(--fs-small); }
.btn-block { width: 100%; }

/* --- Шапка ----------------------------------------------------------------- */
/* Размытие вынесено на псевдоэлемент, а не на саму шапку. Причина не
   косметическая: backdrop-filter делает элемент containing block для потомков
   с position: fixed. Выдвижная панель меню лежит внутри шапки, и с фильтром на
   .hdr она считала размеры от шапки высотой 68px, уезжала за правый край и
   растягивала страницу по горизонтали. На псевдоэлементе фильтр работает так
   же визуально, но панель снова позиционируется относительно экрана. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Класс вешает main.js после прокрутки: шапка «садится» на контент только
   когда под ней действительно что-то есть. */
.hdr.is-stuck::before {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.hdr-in { position: relative; z-index: 1; }

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 68px;
  /* Шапке — свой контейнер, шире общего --wrap (1120px).

     Общий контейнер рассчитан на колонку текста, и шапка в него не влезала:
     знак 76 + меню 551 + правый блок 483 + зазоры 40 = 1150px против 1120px.
     Не хватало на любом экране — поэтому меню наезжало на кнопки и на широком
     мониторе тоже, просто там это было не так заметно.

     Расширять именно шапку, а не --wrap целиком: колонка текста шириной 1400px
     нечитаема. В кабинете шапка и вовсе во всю ширину (padding: 5vw), так что
     широкая шапка над узким текстом — это то же решение, а не расхождение.

     1480, а не 1400: на 1400 содержимое шапки на экране 1440px вставало ровно
     впритык, зазор между меню и кнопками падал до нуля. Запас нужен, иначе
     одно удлинённое слово в переводе снова ломает вёрстку. */
  --wrap: 1480px;
}
/* Логотип: знак плюс набранное название. Пропорции и оформление повторяют
   кабинет — посетитель ходит между сайтом и кабинетом, и бренд обязан
   выглядеть одинаково. */
/* flex: 0 0 auto — логотип не сжимается. По умолчанию flex ужимает элементы,
   а название набрано в одну строку и не переносится: вместо сжатия оно
   вылезало поверх первого пункта меню. */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand-mark { height: 34px; width: auto; display: block; transition: transform var(--dur) var(--ease); }
.brand:hover .brand-mark { transform: scale(1.06) rotate(-2deg); }
.brand-word {
  font-weight: 800;
  letter-spacing: 0.15em;
  font-size: 1.02rem;
  color: var(--navy);
  white-space: nowrap;
}
.brand-word span { color: var(--orange-ink); font-weight: 750; }
/* Знак по теме: тёмно-синий на светлом, белый на тёмном. Обе картинки в
   разметке — подмена скриптом дала бы мигание при загрузке. */
.brand-mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark-dark { display: block; }
}
:root[data-theme="dark"] .brand-mark-light { display: none; }
:root[data-theme="dark"] .brand-mark-dark { display: block; }
:root[data-theme="light"] .brand-mark-light { display: block; }
:root[data-theme="light"] .brand-mark-dark { display: none; }
/* Название в шапке показывается только там, где на него есть место.

   Замеры сняты на узбекской версии — её подписи самые длинные, и пороги
   считаются по ней, иначе вёрстка ломается на языке, который для лицензии
   обязателен. Со знаком и названием шапке нужно 1328px, с одним знаком —
   1150px.

   Отсюда три ступени. Ниже 1180px меню уезжает в бургер, справа остаётся один
   бургер — места вдоволь, название показываем. От 1180 до 1439 строку занимает
   меню: название убираем, знак узнаётся и без него. От 1520px помещается всё.

   Порог 1520, а не 1440: ширину задаёт не только --wrap, но и поля по краям
   (2×48px) плюс полоса прокрутки, и на экране 1440px под шапку остаётся 1327px
   против нужных 1328 — ровно впритык, без единого пикселя запаса. На 1520px
   остаётся 1407px, то есть 79px свободных. */
@media (max-width: 420px) { .brand-word { display: none; } }
@media (min-width: 1180px) and (max-width: 1519.98px) { .brand-word { display: none; } }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
}
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(8, 37, 57, 0.45);
  border: 0;
}

/* Мобильное меню — выдвижная панель. На узком экране горизонтальный список из
   семи пунктов нечитаем, а сжимать его до 11px нельзя. */
.nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 39;
  width: min(84vw, 340px);
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-lift);
  transform: translateX(101%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav.is-open { transform: none; }

.nav-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
}

.nav-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 2px; }
.nav-list a {
  display: block;
  padding: 12px 10px;
  border-radius: var(--r-sm);
  color: var(--navy);
  text-decoration: none;
  font-weight: 520;
}
.nav-list a:hover { background: var(--paper); }
.nav-list a[aria-current="page"] { color: var(--orange-ink); background: color-mix(in srgb, var(--orange) 8%, transparent); }

.nav-aside { display: grid; gap: var(--sp-3); }
.langs { display: inline-flex; gap: 2px; padding: 3px; background: var(--paper); border-radius: var(--r-sm); width: max-content; }
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 32px;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
}
.lang:hover { color: var(--navy); }
.lang.on { background: var(--surface); color: var(--orange-ink); box-shadow: 0 1px 2px rgba(13, 40, 66, 0.12); }

/* Порог намеренно высокий. Пунктов семь, а подписи на узбекском и русском
   длиннее английских: на 1000px они ещё влезают в строку, но стоят впритык,
   и любое удлинение слова роняет меню на вторую строку. Ниже порога честнее
   отдать всё бургеру, чем показывать сплюснутый ряд. */
@media (min-width: 1180px) {
  .burger, .nav-scrim, .nav-close { display: none; }
  .nav {
    position: static;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex: 1;
    justify-content: space-between;
  }
  .nav-list { display: flex; gap: var(--sp-1); margin: 0; min-width: 0; }
  /* nowrap — главное здесь. Без него «Оплата и бронирование» ломается пополам
     и шапка вырастает вдвое: пункт меню обязан быть одной строкой. */
  .nav-list a { padding: 8px 10px; font-size: 0.92rem; white-space: nowrap; }
  .nav-aside { display: flex; align-items: center; gap: var(--sp-3); }
  .nav-aside .btn { white-space: nowrap; }
}

/* Вторая ступень: от 1180 до 1339 контейнер шапки даёт 1132–1291px, а нужно
   1150px — на нижнем крае не хватает даже без названия бренда.
   Сворачиваем самое широкое, что там есть, — номер телефона (204px) до одной
   иконки. Номер не удаляется: он остаётся в href и читается вслух, потому что
   спрятан через clip, а не display:none. Кнопка при этом работает так же —
   нажатие звонит. Ниже 1180px меню уходит в бургер, и номер возвращается
   целиком: в выдвинутой панели ширина не ограничена. */
@media (min-width: 1180px) and (max-width: 1339.98px) {
  .btn-tel { padding-left: 12px; padding-right: 12px; }
  .btn-tel span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Тёмная тема ---------------------------------------------------------- */
/* Значения взяты из тёмной темы приложения (frontend/src/styles.css), а не
   подобраны заново: посетитель ходит между сайтом и кабинетом, и разные
   оттенки того же бренда читаются как два разных продукта. До этого тёмной
   темы не было вовсе, и Chrome инвертировал светлую страницу сам — отсюда
   «дизайны разные» на скриншотах. */
/* Тёмная тема включается двумя путями, и ручной выбор всегда сильнее:
   :not([data-theme="light"]) — системная тёмная, но НЕ когда посетитель явно
   выбрал светлую; отдельный блок [data-theme="dark"] — явный выбор тёмной,
   даже если система светлая. Значения в обоих блоках одинаковы, поэтому
   вынесены в переменные ниже и продублированы селекторами, а не текстом. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #dfe9f5;        /* был цветом заголовков — в тёмной теме светлеет */
    --orange-ink: #ff9838;  /* акцент, читаемый на тёмном (= --brand-orange-bright) */
    --paper: #081321;
    --surface: #142238;
    --ink: #eef3fb;
    --ink-soft: #b9c5d6;
    --rule: #293850;
    --rule-strong: #394b65;
    --ok: #5fd08a;
    --warn: #ffb366;
  }
}

/* Явно выбранная тёмная тема — работает и при светлой системе. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --navy: #dfe9f5;        /* был цветом заголовков — в тёмной теме светлеет */
    --orange-ink: #ff9838;  /* акцент, читаемый на тёмном (= --brand-orange-bright) */
    --paper: #081321;
    --surface: #142238;
    --ink: #eef3fb;
    --ink-soft: #b9c5d6;
    --rule: #293850;
    --rule-strong: #394b65;
    --ok: #5fd08a;
    --warn: #ffb366;
  }


/* --- Герой ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}
/* Фотография намеренно приглушена и уведена под затемнение: на этом сайте
   герой — не пейзаж, а условия. Снимок даёт настроение, но не спорит с типом. */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 37, 57, 0.5), rgba(8, 37, 57, 0.94));
}
.hero-in { padding-block: var(--sp-8) var(--sp-7); }
@media (min-width: 700px) { .hero-in { padding-block: var(--sp-9) var(--sp-8); } }

.hero .eyebrow { color: rgba(255, 255, 255, 0.68); }
.hero h1 {
  color: #fff;
  font-size: var(--fs-display);
  /* Ширину строки ограничивает колонка сетки, а не max-width: иначе заголовок
     ломался бы на три строки, пока справа пустует место. */
  max-width: 18ch;
}
@media (min-width: 1000px) { .hero h1 { max-width: none; } }
.hero-text {
  margin-top: var(--sp-4);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.82);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* Карточка-бланк в герое. На узком экране идёт под текстом, на широком встаёт
   справа — это единственное место, где документ и фотография встречаются. */
.hero-in { display: grid; gap: var(--sp-6); align-items: end; }
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: var(--sp-8); }
}
.hero-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lift);
}
.hero-card-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-card .facts > div:first-child { border-top: 0; }
/* В узкой карточке бланк остаётся одноколоночным: подпись сверху, значение
   снизу. Двухколоночный вариант на такой ширине сжимает адрес в четыре строки. */
.hero-card .facts > div { grid-template-columns: 1fr; }
.hero-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration: none;
}

/* --- БЛАНК: подпись слева, значение справа, волосяная линейка ---------------
   Главный приём сайта. Используется тремя блоками: .facts, .legal-grid и
   .pay-list. Держим его одним набором правил, чтобы они не разъехались. */
.facts,
.legal-grid,
.pay-list { display: grid; gap: 0; margin: 0; }

.facts > div,
.legal-row,
.pay-list > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1) var(--sp-5);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.facts > div:last-child,
.legal-row:last-child,
.pay-list > div:last-child { border-bottom: 1px solid var(--rule); }

.facts dd,
.legal-row dd,
.pay-list dd {
  margin: 0;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.45;
}

@media (min-width: 620px) {
  .facts > div,
  .legal-row,
  .pay-list > div { grid-template-columns: minmax(10rem, 24%) 1fr; align-items: baseline; }
}

/* --- Секции главной -------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card-body p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange-ink);
}
.card-service:hover .card-more .ico { transform: translateX(3px); }
.card-more .ico { transition: transform var(--dur) var(--ease); }

/* Шаги. Нумерация здесь оправданна: это действительно последовательность, а не
   украшение — заявка не может идти после оплаты. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }
.step { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--rule); }
.step-num {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  color: var(--orange-ink);
  margin-bottom: var(--sp-3);
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.trust { display: grid; gap: var(--sp-3); align-content: start; }
.trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange-ink);
}
.trust p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* --- Карточка тура --------------------------------------------------------- */
.card-tour .card-link { display: block; position: relative; text-decoration: none; }
.card-badge-dest,
.card-badge-seats {
  position: absolute;
  top: var(--sp-3);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Префикс обязателен: без него на Safari и iOS подложка бейджа остаётся
     прозрачной, и белый текст ложится прямо на светлые участки фотографии. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.card-badge-dest { left: var(--sp-3); background: rgba(8, 37, 57, 0.78); color: #fff; }
.card-badge-seats { right: var(--sp-3); background: rgba(255, 255, 255, 0.92); color: var(--ok); }
.card-badge-seats.is-out { color: var(--warn); }

.card-tour h3 { font-size: 1.1rem; }
.card-tour h3 a { text-decoration: none; }
.card-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-facts { margin: 0; display: grid; gap: var(--sp-2); }
.card-facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
.card-facts dd { margin: 0; font-size: 0.95rem; color: var(--navy); }
.card-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.price {
  display: grid;
  font-size: 1.18rem;
  font-weight: 640;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.price small {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price-lg { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* --- Страница тура --------------------------------------------------------- */
.tour-detail { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .tour-detail { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-7); } }
.tour-cover { width: 100%; border-radius: var(--r-md); aspect-ratio: 16 / 10; object-fit: cover; }
.tour-lists { margin-top: var(--sp-6); }
.tour-box {
  position: sticky;
  top: 88px;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--sp-4);
}
.tour-facts { margin: 0; display: grid; }
.tour-facts > div { display: grid; gap: 2px; padding-block: var(--sp-3); border-top: 1px solid var(--rule); }
.tour-facts > div:last-child { border-bottom: 1px solid var(--rule); }
.tour-facts dt { display: inline-flex; align-items: center; gap: 6px; }
.tour-facts dd { margin: 0; color: var(--navy); font-weight: 500; }

/* Два списка состава услуги. Цвет — вспомогательный признак, основной несёт
   иконка и заголовок: по одному цвету статус читать нельзя. */
.incl h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.incl ul, .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.incl li, .ticks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; }
.incl li .ico, .ticks li .ico { margin-top: 3px; }
.incl-yes li .ico { color: var(--ok); }
.incl-no li .ico { color: var(--ink-soft); }
.ticks li .ico { color: var(--orange-ink); }

/* --- Проза и документы ----------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { margin-bottom: var(--sp-4); }
.prose .block + .block { margin-top: var(--sp-7); }
.prose p { color: var(--ink); }

.doc-layout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 920px) { .doc-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); } }

.doc-toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
@media (min-width: 920px) { .doc-toc { position: sticky; top: 88px; } }
.doc-toc h2 {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
/* Без маркеров: номер уже входит в заголовок раздела («1. Общие положения»),
   и автонумерация списка давала бы «1. 1. Общие положения». */
.doc-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.doc-toc a { text-decoration: none; color: var(--ink-soft); }
.doc-toc a:hover { color: var(--navy); }

.doc section + section { margin-top: var(--sp-7); }
.doc h2 { font-size: var(--fs-h3); }
.doc-date { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-soft); }

/* --- Реквизиты и лицензия --------------------------------------------------
   Блок статьи 20. Оформлен как документ, а не как виджет: без тени и без
   скруглений внутри — рамка, линейки, ничего лишнего. */
.legal {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  scroll-margin-top: 88px;
}
@media (min-width: 700px) { .legal { padding: var(--sp-6) var(--sp-7); } }
.legal-title { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-h2); }
.legal-title .ico { color: var(--orange-ink); flex: none; }
.legal-lead { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-small); max-width: 70ch; }
.legal-grid { margin-top: var(--sp-5); }

/* Точка-печать. Единственный декоративный элемент сайта, и он несёт смысл:
   помечает строки, которые обязательны по статье 20 и без которых лицензию
   не выдадут. Рисуется на подписи, чтобы не мешать чтению значения. */
.legal-row dt { position: relative; padding-left: 16px; }
.legal-row dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 380ms var(--ease), opacity 380ms var(--ease);
}
.legal.is-visible .legal-row dt::before { transform: none; opacity: 1; }

.legal-license-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.legal-license-list b { color: var(--ink-soft); font-weight: 600; }
.legal-activities { margin: var(--sp-2) 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.legal-specialists { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.legal-missing {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--warn);
  font-size: var(--fs-small);
}
.legal-qr { margin: var(--sp-4) 0 0; max-width: 180px; }
.legal-qr img { border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; padding: 6px; }
.legal-qr figcaption { margin-top: var(--sp-2); font-size: var(--fs-label); color: var(--ink-soft); line-height: 1.4; }
.legal-compact { border: 0; padding: 0; background: none; margin-top: var(--sp-5); }
.legal-compact .legal-title { font-size: var(--fs-h3); }

/* --- Оплата ---------------------------------------------------------------- */
.pay-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 820px) { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-box {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.pay-box h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.pay-box-wide { grid-column: 1 / -1; }
.pay-status {
  margin: var(--sp-5) 0 0;
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}
.pay-status .ico { flex: none; margin-top: 2px; }
.pay-status.is-on { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.pay-status.is-off { background: var(--paper); color: var(--ink-soft); }
.pay-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pay-table td, .pay-table th { padding: var(--sp-3) 0; border-top: 1px solid var(--rule); text-align: left; }
.pay-table th { text-align: right; color: var(--navy); font-weight: 640; }

/* --- Контакты и форма ------------------------------------------------------ */
.contacts-grid { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) { .contacts-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-8); } }
.contacts-list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); }
.contacts-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-3); align-items: start; }
.contacts-list b { display: block; color: var(--navy); font-weight: 560; font-size: 1.05rem; }
.contacts-list b a { text-decoration: none; }
.contacts-list small { display: block; font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--navy);
}
.socials { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--navy);
  text-decoration: none;
  font-size: var(--fs-small);
}
.socials a:hover { border-color: var(--navy); }
.contacts-socials h2 { font-size: var(--fs-h3); }

.form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: var(--sp-2); }
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* меньше 16px — и iOS зумит страницу при фокусе */
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: var(--navy); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--warn); }

/* Ловушка для ботов. Не display:none — часть автоматики такие поля пропускает;
   поле остаётся в потоке, но выведено за пределы экрана. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-small); color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
.consent a { color: var(--navy); }
.form-error, .form-ok { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-small); }
.form-error { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.form-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.form-noscript { margin: 0; font-size: var(--fs-small); color: var(--warn); }

.map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); background: var(--surface); }
.map iframe { display: block; width: 100%; height: 380px; border: 0; }

.empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
}
.empty p { margin: 0; color: var(--ink-soft); max-width: 46ch; }

.notfound { text-align: center; display: grid; justify-items: center; gap: var(--sp-4); padding-block: var(--sp-9); }
.notfound .eyebrow { color: var(--orange-ink); }
.notfound .hero-cta { justify-content: center; }

/* --- CTA-полоса ------------------------------------------------------------ */
.cta { background: var(--navy-solid); color: #fff; }
.cta-in {
  padding-block: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.cta h2 { color: #fff; }
.cta p { margin: var(--sp-3) 0 0; color: rgba(255, 255, 255, 0.78); max-width: 52ch; }

/* --- Подвал ---------------------------------------------------------------- */
.ftr { background: var(--navy-deep); color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
.ftr-in { display: grid; gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-6); }
@media (min-width: 760px) { .ftr-in { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-6); } }
.ftr-brand img { height: 38px; width: auto; margin-bottom: var(--sp-4); }
.ftr-brand p { margin: 0 0 var(--sp-2); max-width: 34ch; }
.ftr-company { color: #fff; font-weight: 500; }
.ftr h3 {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ftr a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); }
.ftr-contacts li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-2); align-items: start; }
.ftr-contacts .ico { margin-top: 3px; color: rgba(255, 255, 255, 0.5); }
.ftr .socials a { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #fff; }

/* Режим работы и лицензия в подвале КАЖДОЙ страницы — требование ст. 20 и
   ст. 5 ЗоЗПП, поэтому строка отбита линейкой и не теряется среди ссылок. */
.ftr-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small);
}
.ftr-legal span { display: inline-flex; align-items: center; gap: 6px; }
.ftr-legal .ico { color: var(--orange); }
.ftr-legal-link { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; font-weight: 500; }

.ftr-cards { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); font-size: var(--fs-small); }
.cards { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.card-badge {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy-deep);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ftr-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  padding-block: var(--sp-4) var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-small);
}
.ftr-disclaimer { max-width: 56ch; }

/* --- Движение --------------------------------------------------------------
   Одно оркестрованное появление вместо россыпи эффектов: блок выезжает на 12px
   и проявляется, соседи внутри группы — со сдвигом. Класс вешает main.js через
   IntersectionObserver, поэтому без JS контент виден сразу (стартовое состояние
   задаётся тем же скриптом, а не CSS). */
.reveal { transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.reveal.is-hidden { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal.is-hidden { opacity: 1; transform: none; }
}

/* --- Печать ----------------------------------------------------------------
   Оферту и политику проверяющий распечатывает. На бумаге не нужны шапка,
   меню, подвал и тени, зато нужны развёрнутые адреса ссылок. */
@media print {
  /* Страховка на случай, если beforeprint не отработал: непроявленный блок
     не должен уйти на бумагу пустым местом. */
  .reveal.is-hidden { opacity: 1 !important; transform: none !important; }
  .hdr, .nav, .nav-scrim, .burger, .cta, .ftr, .doc-toc, .skip, .map { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { width: auto; }
  .sect, .page-head { padding-block: 0; }
  .legal { border: 1px solid #000; break-inside: avoid; }
  .doc section { break-inside: avoid-page; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* Два действия на карточке тура: «подробнее» и «забронировать». На узком
   экране встают в столбец во всю ширину — рядом они не помещаются, а
   ужиматься до нечитаемого кегля кнопкам нельзя. */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
@media (max-width: 480px) {
  /* Цена и кнопки перестают делить строку: на телефоне рядом им тесно, и
     кнопка «забронировать» ужимается до нечитаемой. Цена сверху, действия
     под ней во всю ширину — так по кнопке легко попасть пальцем. */
  .card-foot { flex-direction: column; align-items: stretch; }
  .card-actions { width: 100%; }
  .card-actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* На странице тура кнопки идут одна под другой: между ними нужен воздух,
   иначе «забронировать» и «оставить заявку» читаются как одна плашка. */
.tour-box .btn-block + .btn-block { margin-top: var(--sp-3); }

/* --- Переключатель темы ---------------------------------------------------- */
/* Показываем ровно одну иконку: солнце в тёмной теме (нажатие вернёт светлую),
   луну в светлой. Обе лежат в разметке, потому что скрипт не должен рисовать
   SVG — иначе иконка появлялась бы рывком после загрузки JavaScript. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--rule-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.theme-ico { display: none; line-height: 0; }
.theme-ico-moon { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-ico-moon { display: none; }
  :root:not([data-theme="light"]) .theme-ico-sun { display: inline-flex; }
}
:root[data-theme="dark"] .theme-ico-moon { display: none; }
:root[data-theme="dark"] .theme-ico-sun { display: inline-flex; }
/* Явно выбранная светлая тема при тёмной системе — луна возвращается. */
:root[data-theme="light"] .theme-ico-sun { display: none; }
:root[data-theme="light"] .theme-ico-moon { display: inline-flex; }