/* =============================================================================
   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;
  /* Ошибка/опасное действие. Заведён 19.09.2026 при переводе компонента поиска на кит:
     в sc-calendar.css свой красный жил хексом. */
  --danger:#E5484D;

  /* --- Форма --------------------------------------------------------------- */
  --r-s:8px; --r-m:12px; --r-l:18px; --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);

  /* --- Типографика ---------------------------------------------------------
     Одна гарнитура на весь фронт. Кегли — только из этого набора. */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --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;}
}