/* =============================================================================
   vse.rent UI-кит — ЕДИНСТВЕННЫЙ источник правды по токенам и базовым компонентам.
   Задача t_69476ef4 (19.09.2026, постановка Арсения: «все компоненты должны быть
   выполнены в едином стиле как на мобиле, так и на десктопе»).

   Диздок и правила применения: /js/vse-ui.README.md — читать ДО того, как
   заводить новый цвет, кнопку или карточку на странице.

   Подключается ПЕРВЫМ, до постраничных стилей:
     <link rel="stylesheet" href="/js/vse-ui.css?v=1">

   Значения токенов взяты один в один из эталона v2 (hotels-list-v2.css, t_f2946159),
   чтобы перенос на кит ничего визуально не сдвинул. Постраничные файлы свои копии
   токенов постепенно удаляют, но пока дублируют — это безвредно (те же значения) и
   даёт откат без простоя.
   ============================================================================= */

:root{
  /* --- Цвет ----------------------------------------------------------------
     ink      — основной текст и тёмные поверхности
     blue     — фирменный акцент: ГЛАВНОЕ действие экрана, ссылки-действия
     coral    — внимание: цена, счётчик активных фильтров, «осталось N»
     green    — успех/свободно, gold — рейтинг
     Больше никаких хексов на страницах: нужен оттенок — заводится здесь. */
  --ink:#12213B; --ink-2:#3C4A63; --muted:#6B7280; --muted-2:#9AA1AD;
  --blue:#1E4FA3; --blue-deep:#0F2F66; --blue-soft:#EAF0FA;
  --coral:#E8502A; --green:#1E8E5A; --green-soft:#E8F5EE; --gold:#F0A93E;
  /* t_0ae843ce (20.09.2026): мягкие подложки под coral и gold — парные к уже
     существующим --blue-soft и --green-soft. Заведены здесь, а не в постраничном
     CSS: оттенок, нужный одной странице, всё равно понадобится следующей, и хекс
     в hotel-detail-v2.css был бы ровно тем расхождением, которое запрещает п.1
     диздока. Применение: тонированная шапка группы причин недоступности. */
  --coral-soft:#FCEFEA; --gold-soft:#FDF4E3;
  --paper:#F7F7F4; --card:#FFF; --line:#E8E8E2; --line-2:#F0F0EA;
  /* t_80266c45 (21.09.2026): затемнение под шторками/модалками и «стекло» для
     кнопок поверх фото. Раньше каждая шторка держала свой rgba(18,33,59,.45)
     прямо в постраничном CSS — теперь одно значение на всех. */
  --scrim:rgba(18,33,59,.48); --glass:rgba(255,255,255,.92); --on-media:#FFF;
  /* Ошибка/опасное действие. Заведён 19.09.2026 при переводе компонента поиска на кит:
     в sc-calendar.css свой красный жил хексом. */
  --danger:#E5484D;

  /* t_bec45fc5 (22.09.2026, консолидация): собрано из hotel-detail-v2.css,
     hd-room-popup.css, hd-reviews.css, hotels-list-v2.css — всё, что там было
     хексом мимо кита, теперь здесь. Дальше главная/посадочные/детальная берут
     эти же токены, а не заводят свои (задача Дениса Воронова).
     Коралловая ТЁПЛАЯ плашка (не путать с --coral — тот для цены/счётчиков):
     предупреждение/заметка «по запросу», «нет точных координат» и т.п.
     Было идентичным хексом в 3 местах hotel-detail-v2.css. */
  --warn-bg:#FBF3F0; --warn-border:#F0DED7; --warn-ink:#A14A34;
  /* Мягкая зелёная плашка «хороший показатель» — было в hotel-detail-v2.css как
     фон рейтинга. Полная шкала по значению (t_155a1712, «рейтинг всегда зелёный,
     плохой не должен выглядеть хорошо») — 4 ступени, средние близки к текущему
     --gold/--coral, чтобы не плодить ещё цветов сверх уже принятых. */
  --rate-bad-bg:#FCEAEA; --rate-bad-ink:#B23A3A;     /* < 3.5 */
  --rate-mid-bg:#FDF4E3; --rate-mid-ink:#96650F;     /* 3.5–4.2 */
  --rate-good-bg:#E8F5EE; --rate-good-ink:#137A4B;   /* 4.2–4.7 */
  --rate-best-bg:#E3F3EC; --rate-best-ink:#0E5C39;   /* 4.7+ */

  /* --- Форма ---------------------------------------------------------------
     Расширено 22.09.2026 по факту использования в hotel-detail-v2.css/hd-room-
     popup.css: r-s/r-m/r-l покрывали не все размеры, страницы городили 10/11/14/16/20
     px напрямую. Полная лестница — чтобы новый радиус на новой странице выбирался
     ИЗ НЕЁ, а не изобретался. */
  --r-xs:6px; --r-s:8px; --r-m:12px; --r-lg:16px; --r-l:18px; --r-xl:20px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --tap:44px;                      /* минимальная зона нажатия, канон 04.09.2026 */
  --sh-1:0 1px 2px rgba(18,33,59,.06);
  --sh-2:0 4px 16px rgba(18,33,59,.10);
  --sh-3:0 -2px 20px rgba(18,33,59,.10);
  /* Приподнятая плавающая панель (липкий блок брони и т.п.) — было хексом-копией
     в hotel-detail-v2.css (.hd-booking). */
  --sh-4:0 20px 44px rgba(18,33,59,.10);

  /* --- Типографика ---------------------------------------------------------
     Одна гарнитура на текст. Для КРУПНЫХ чисел и заголовков (цена, рейтинг,
     H1) — вторая, акцентная: было хардкодом 'Space Grotesk' десятком копий в
     hotel-detail-v2.css. Кегли — только из набора ниже. */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk',var(--font);
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-17:17px; --fs-20:20px; --fs-24:24px;

  --safe-b:env(safe-area-inset-bottom,0px);
  --bar-h:60px;
}

/* =============================================================================
   КНОПКИ. Три роли, больше ролей не заводим.

   .vs-btn--primary    одно главное действие на экран: «Найти», «Показать отели»,
                       «Забронировать». Синяя заливка.
   .vs-btn--secondary  равноправные второстепенные действия: «Фильтры», «Карта»,
                       «Показать ещё». Белая с рамкой.
   .vs-btn--ghost      третьестепенное: «Сбросить», «Отмена». Без рамки и заливки.

   Почему это правило появилось: в нижней панели списка отелей «Фильтры» была
   тёмной, лупа поиска — синей, «Карта» — белой с рамкой. Три соседние кнопки
   одного уровня выглядели как три разных элемента интерфейса.
   ============================================================================= */
.vs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:0 var(--sp-4);
  font:600 var(--fs-15)/1.2 var(--font);
  border-radius:var(--r-m);border:1px solid transparent;cursor:pointer;
  background:none;color:var(--ink);
  transition:background .15s,border-color .15s,color .15s;
}
.vs-btn--primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.vs-btn--primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);}
.vs-btn--secondary{background:var(--card);border-color:var(--line);color:var(--ink);}
.vs-btn--secondary:hover{background:var(--paper);border-color:#C9D3EA;}
.vs-btn--ghost{background:none;border-color:transparent;color:var(--ink-2);}
.vs-btn--ghost:hover{color:var(--ink);}
.vs-btn:disabled{opacity:.6;cursor:default;}
.vs-btn--wide{width:100%;}
.vs-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* Круглая кнопка-иконка (лупа поиска и т.п.) — та же роль, другая форма. */
.vs-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);min-width:var(--tap);
  border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
}
.vs-iconbtn--primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.vs-iconbtn--primary:hover{background:var(--blue-deep);}

/* Счётчик/метка на кнопке: только коралловый, только для «требует внимания». */
.vs-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--coral);color:#fff;font:700 var(--fs-11)/1 var(--font);
}

/* =============================================================================
   ПОЛЕ И ТРИГГЕР. Одинаково выглядят и в шторке, и в закреплённой панели, и в
   шапке: белая карточка с рамкой. Заливка вместо рамки (бывший модификатор
   sc-fields--soft) больше не используется — именно из-за неё одно и то же поле
   на соседних экранах выглядело по-разному.
   ============================================================================= */
.vs-field{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--tap);padding:var(--sp-2) var(--sp-4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  font:var(--fs-15)/1.3 var(--font);color:var(--ink);text-align:left;
}
.vs-field__label{font-size:var(--fs-11);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.vs-field__value{font-size:var(--fs-15);font-weight:600;color:var(--ink);}
.vs-field__value.is-placeholder{color:var(--muted-2);font-weight:500;}

/* =============================================================================
   ШТОРКА (bottom sheet). Одна геометрия на все шторки: поиск, фильтры, сортировка.
   ============================================================================= */
.vs-sheet{
  background:var(--card);border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:var(--sh-3);font-family:var(--font);color:var(--ink);
}
.vs-sheet__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-4) var(--sp-2);}
.vs-sheet__head h2{margin:0;font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em;}
.vs-sheet__body{padding:var(--sp-2) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);}

/* Доступность: везде, где кит анимирует, движение выключается по системной настройке. */
@media (prefers-reduced-motion:reduce){
  .vs-btn,.vs-iconbtn{transition:none;}
}

/* =============================================================================
   КОМПОНЕНТЫ, СОБРАННЫЕ С ОТЕЛЕЙ (t_bec45fc5, 22.09.2026). Постановка Данила:
   «в кит заведи абсолютно всё, что мы сделали по отелям — все компоненты, стили,
   шрифты — чтобы главная, посадочные и детальная делались в таком же стиле».

   Это ГОТОВЫЕ, проверенные на живых страницах компоненты — не черновик. Источник
   у каждого указан явно: смотреть оригинал перед тем, как менять форму, а не
   гадать. Главная/посадочные/детальная (Денис Воронов) берут классы отсюда, а
   не копируют CSS из hotel-detail-v2.css/hd-room-popup.css — те файлы остаются
   местом, где живут доработки ПОД отельные страницы, а не источником правды.
   ============================================================================= */

/* --- ЧИП. Источник: .hf-chip (hotels-list-v2.css, фильтры) и .hd-rv__starchip
   (hd-reviews.css, чипы оценок). Один паттерн — пилюля с рамкой, синяя заливка
   в выбранном состоянии. Используется и как переключатель (одиночный выбор),
   и как тег (без состояния .is-on). */
.vs-chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:0 var(--sp-3);border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font:600 var(--fs-13)/1.2 var(--font);cursor:pointer;
}
.vs-chip.is-on{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-deep);}
.vs-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* --- КАРТОЧКА-СТРОКА СПИСКА. Источник: .hd-room (hotel-detail-v2.css) — карточка
   номера: белая, рамка, скругление, мягкий подъём тени на ховере/фокусе. Годится
   для любого списка «объект + фото + действие» (номера, отели на списке, статьи). */
.vs-card{
  display:block;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);padding:var(--sp-4);
  transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
}
.vs-card:hover,.vs-card:focus-within{box-shadow:var(--sh-2);border-color:var(--line-2);}

/* --- ПРЕДУПРЕЖДАЮЩАЯ ПЛАШКА (тёплая, не «ошибка»). Источник: .hd-stub-note /
   .hd-avail / .hd-map-badge (hotel-detail-v2.css) — были идентичным хексом в
   трёх местах. Для «по запросу», «нет точных координат», «уточняйте у хозяина». */
.vs-warn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border);
  font:600 var(--fs-13)/1.5 var(--font);padding:10px 13px;border-radius:var(--r-s);
}

/* --- СТАТУС-ПЛАШКА (доступно/недоступно/нейтрально). Источник: .hrp__status
   (hd-room-popup.css) — плашка доступности номера на выбранные даты. Три
   модификатора: успех, отказ, нейтральная информация. */
.vs-status{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-m);
  font:var(--fs-14)/1.4 var(--font);
}
.vs-status--ok{background:var(--rate-good-bg);color:var(--rate-good-ink);}
.vs-status--bad{background:var(--coral-soft);color:var(--coral);}
.vs-status--info{background:var(--blue-soft);color:var(--blue-deep);}

/* --- РЕЙТИНГ ПО ШКАЛЕ. Источник: .hd-raterow b (hotel-detail-v2.css) — раньше
   ВСЕГДА зелёный хекс, независимо от числа (t_155a1712: «плохой рейтинг тоже
   зелёным светится — это не круто»). Класс модификатора ставит JS/PHP по
   значению: <3.5 --bad, 3.5–4.2 --mid, 4.2–4.7 --good, 4.7+ --best. */
.vs-rate{
  display:inline-flex;align-items:center;gap:4px;font:700 var(--fs-14)/1 var(--font);
  padding:4px 9px;border-radius:var(--r-s);
}
.vs-rate--bad{background:var(--rate-bad-bg);color:var(--rate-bad-ink);}
.vs-rate--mid{background:var(--rate-mid-bg);color:var(--rate-mid-ink);}
.vs-rate--good{background:var(--rate-good-bg);color:var(--rate-good-ink);}
.vs-rate--best{background:var(--rate-best-bg);color:var(--rate-best-ink);}

/* --- ТОСТ. Источник: .hd-toast (hotel-detail-v2.css) — фон буквально равен
   --ink, отдельный хекс был не нужен. Всплывающее уведомление снизу по центру. */
.vs-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r-m);
  font:600 var(--fs-13)/1.5 var(--font);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:999;box-shadow:var(--sh-2);
  max-width:min(90vw,470px);
}
.vs-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

/* --- ПАНЕЛЬ УПРАВЛЕНИЯ ЛЕНТОЙ (сортировка + чипы в ряд). Источник: .hd-rv__tools
   (hd-reviews.css) — строка из select и .vs-chip, переносится на новую строку
   на узком экране. Не отдельный визуальный стиль, а раскладка — сами select и
   чипы берут свой вид из .vs-field/.vs-chip. */
.vs-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}