/* =============================================================================
   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;

  /* t_e73b2312 (26.09.2026, аудит кита + t_a7c1e79b «хексы мимо токенов»). Всё, что жило
     хексом в hotel-detail-v2.css / hotels-list-v2.css / hd-reviews.css и в самом ките вне
     :root, получило имя. Значения — ровно те, что были (визуально ничего не сдвигается).
     --on-accent  — текст/иконка на синей/коралловой/тёмной заливке (кнопки, бейджи, тост)
     --line-strong — рамка при наведении на белую кнопку/«показать ещё», трек-заглушки
     --line-hover  — рамка карточки при наведении (тёплая, как --line)
     --hover-bg    — подсветка строки/кнопки-строки при наведении
     --media-bg    — подложка под фото/галерею, пока картинка не загрузилась
     --map-bg      — подложка под карту (цвет воды), пока тайлы грузятся
     --stub-1/2    — градиент плитки «нет фото»
     --fav         — «в избранном» (сердце)
     --blue-light / --green-bright — вторые точки градиентов прогресса проверки */
  --on-accent:#FFF; --line-strong:#C9D3EA; --line-hover:#D9D9D1; --hover-bg:#F4F7FC;
  --media-bg:#000; --map-bg:#DCE8EE; --stub-1:#F2F2EC; --stub-2:#E6E6DE;
  --fav:#E0245E; --blue-light:#4C8DF6; --green-bright:#4ADE80;
  /* --muted-3 — светлее --muted-2: декоративные контурные иконки пустых состояний */
  --muted-3:#C7C7C0;

  --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:var(--on-accent);}
.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:var(--line-strong);}
.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:var(--on-accent);}
.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:var(--on-accent);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:var(--on-accent);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;}

/* =============================================================================
   ДОБАВЛЕНО 26.09.2026 — t_e73b2312 (аудит кита перед передачей Денису Воронову).
   Всё ниже уже работает на страницах отелей под своими классами; здесь — та же
   форма на токенах, чтобы главная / посадочные / детальная объекта брали отсюда.
   Живые примеры всех компонентов: /js/vse-ui.demo.html
   ============================================================================= */

/* --- ТЕКСТ ДЛЯ СКРИНРИДЕРА (визуально скрыт). Источник: .hd-sr (t_bff8265f). */
.vs-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* --- ФОТО-СВАЙП. Источник: .hgal--room (детальная) и .hf-card__track (карточки списка) —
   один и тот же паттерн на scroll-snap, без библиотек. Размер задаёт контекст: обёртке
   .vs-gal ставишь ширину/высоту или aspect-ratio. Точки переключает /js/vse-ui.js по
   позиции скролла (атрибуты data-vs-gal-track / data-vs-gal-dots). Первое фото —
   loading="eager", остальные — loading="lazy". */
.vs-gal{position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--media-bg);}
.vs-gal__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.vs-gal__track::-webkit-scrollbar{display:none;}
.vs-gal__img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;display:block;}
.vs-gal__dots{position:absolute;left:0;right:0;bottom:6px;display:flex;gap:4px;justify-content:center;pointer-events:none;z-index:2;}
.vs-gal__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 2px rgba(0,0,0,.35);transition:width .18s ease,background .18s ease;}
.vs-gal__dots i.on{background:var(--on-media);width:14px;border-radius:3px;}

/* --- ЦЕНА «за ночь + итого». Источник: .hd-room-price + .hd-room-total (t_2063eaea).
   Крупно — за ночь (сравнимо между вариантами), мелко — итог за период. Без дат —
   только «от N ₽ / ночь». Нет цены — модификатор --muted с текстом «по запросу». */
.vs-price{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:var(--font);}
.vs-price__v{font:700 var(--fs-20)/1.1 var(--font-display);color:var(--ink);white-space:nowrap;}
.vs-price__v small{font:500 var(--fs-13)/1 var(--font);color:var(--muted);margin-left:4px;}
.vs-price__total{font-size:var(--fs-12);font-weight:500;line-height:1.3;color:var(--muted);white-space:nowrap;}
.vs-price--muted .vs-price__v{font:600 var(--fs-15)/1.2 var(--font);color:var(--muted);}

/* --- СВОДКА ПОИСКА «N вариантов на ваши даты». Источник: .hd-avail--found (t_619086ab).
   Заголовок — сколько нашлось на ЭТИ даты и гостей, подпись — от какой цены и чем
   отличаются. --none — ничего не нашлось (тёплая плашка, к ней — выходы из .vs-empty). */
.vs-summary{display:block;padding:var(--sp-3) var(--sp-4);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);color:var(--ink);font-family:var(--font);}
.vs-summary__count{display:block;font-size:var(--fs-17);font-weight:700;line-height:1.25;}
.vs-summary__sub{display:block;margin-top:3px;font-size:var(--fs-13);font-weight:500;line-height:1.4;color:var(--ink-2);}
.vs-summary--none{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-ink);}

/* --- НИЖНЯЯ ПАНЕЛЬ МОБИЛКИ. Источник: .hf-bbar (список: «Фильтры / Карта») и
   .hd-mobile-bar (детальная: цена + «Выбрать даты»). Два варианта раскладки:
   по умолчанию — равные кнопки; с .vs-bbar__price — цена слева, одна primary справа.
   Скрывается с 1024px. Странице с панелью — класс .vs-has-bbar на обёртку (отступ снизу,
   чтобы панель не перекрывала последний блок). */
.vs-bbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:10px;
  padding:8px var(--sp-4) calc(8px + var(--safe-b));background:var(--glass);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:var(--sh-3);font-family:var(--font);color:var(--ink);}
.vs-bbar > .vs-btn{flex:1;}
.vs-bbar__price{display:flex;flex-direction:column;min-width:0;margin-right:auto;}
.vs-bbar__price + .vs-btn{flex:0 0 auto;}
.vs-bbar__from{font-size:var(--fs-11);color:var(--muted);}
.vs-bbar__v{font:700 var(--fs-20)/1.1 var(--font-display);color:var(--ink);white-space:nowrap;}
.vs-bbar__meta{font-size:var(--fs-11);color:var(--muted);}
.vs-bbar__meta:empty{display:none;}
.vs-has-bbar{padding-bottom:calc(var(--bar-h) + var(--safe-b) + var(--sp-4));}
@media (min-width:1024px){.vs-bbar{display:none;}.vs-has-bbar{padding-bottom:0;}}

/* --- ПУСТОЕ СОСТОЯНИЕ С ВЫХОДАМИ. Источник: .hf-empty (t_02f23a82, t_629909ba).
   Никогда не «ничего не найдено» и всё: иконка, что случилось, и 1–3 выхода кнопками
   кита (соседние даты, другой тип, сбросить фильтры). На 375px — колонкой. */
.vs-empty{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--muted);font-family:var(--font);}
.vs-empty svg{width:52px;height:52px;stroke:var(--muted-3);fill:none;stroke-width:1.5;margin-bottom:14px;}
.vs-empty__t{display:block;font-size:var(--fs-17);font-weight:700;color:var(--ink);margin-bottom:6px;}
.vs-empty__acts{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin:18px auto 0;max-width:320px;}
@media (min-width:640px){.vs-empty__acts{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:none;}}

@media (prefers-reduced-motion:reduce){.vs-gal__dots i{transition:none;}}

/* =============================================================================
   ОТЗЫВЫ v3 (t_5af56e0b, 26.09.2026, утверждено Данилом) — сводка, критерии, карточка
   отзыва, панель ленты, фото гостей. Данные — синк отзывов Суточно (t_362e6e00):
   оценка 1..5, 6 критериев, ночи/гости/месяц заезда, фото (облако reviews/).
   Живут в ките, а не в hd-*: тот же блок нужен детальной объекта, списку и посадочным.
   Разметку строят ОДИН PHP-хелпер (hdReviewsCardHtml, ajax/hd_reviews_lib.php) и ОДНА
   JS-функция (HDReviews.card, hd-reviews.js) — одинаковую. Меняешь одно — меняй второе.
   ========================================================================== */

/* --- СПИСОК БЕЗ ТИРЕ. Тема Aspro рисует всем ul>li отступ 21px и «—» через
   ul:not([id*="bx_"]) > li::before (специфичность 0,1,3). Любой <ul> кита обязан нести
   .vs-ul — двойной класс (0,2,x) гарантированно перебивает тему при любом порядке файлов.
   Живой баг 26.09.2026: гистограмма и критерии v2 разъехались «тире-столбиком». */
.vs-ul.vs-ul{margin:0;padding:0;list-style:none;}
.vs-ul.vs-ul > li{margin:0;padding:0;list-style:none;}
.vs-ul.vs-ul > li::before,.vs-ul.vs-ul > li::after{content:none;display:none;}

/* --- ШКАЛА ОЦЕНКИ ОДНОГО ОТЗЫВА (целое 1..5) — те же токены, что .vs-rate:
   5 → best, 4 → good, 3 → mid, 1–2 → bad. Класс ставит PHP/JS: hdReviewsScoreCls(). */

/* --- СВОДКА — .vs-rvsum. Одна карточка ≈ 270px на 375px:
   [ 4.8 | Превосходно | 1045 отзывов ]  [ 5 ━━━━━━━━ 863 … 1 ━ 5 ]  (строки гистограммы —
   кнопки: тап фильтрует ленту по этой оценке)
   [ Чистота 4.4 ━ | Как на фото 4.8 ━ | Расположение 4.9 ━ ] ×2 — 6 критериев, 3 колонки.
   <div class="vs-rvsum">
     <div class="vs-rvsum__top">
       <div class="vs-rvsum__main"><b class="vs-rvsum__score vs-rate vs-rate--best">4.8</b>
         <span class="vs-rvsum__word">Превосходно</span><span class="vs-rvsum__cnt">1045 отзывов</span></div>
       <ul class="vs-rvsum__histo vs-ul"><li><button type="button" class="vs-rvsum__hrow" data-vs-rv-stars="5">
         <span>5</span><meter min="0" max="1045" value="863"></meter><em>863</em></button></li>…</ul>
     </div>
     <ul class="vs-crit vs-ul">…</ul>
   </div> */
.vs-rvsum{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);font-family:var(--font);}
.vs-rvsum__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:center;}
.vs-rvsum__main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:92px;}
.vs-rvsum__score{font:700 28px/1 var(--font-display);padding:10px 12px;border-radius:var(--r-m);margin-bottom:6px;}
.vs-rvsum__word{font-weight:700;font-size:var(--fs-15);color:var(--ink);line-height:1.2;}
.vs-rvsum__cnt{font-size:var(--fs-13);color:var(--muted);line-height:1.3;}
.vs-rvsum__histo{display:flex;flex-direction:column;gap:1px;min-width:0;}
.vs-rvsum__hrow{display:grid;grid-template-columns:18px minmax(0,1fr) 36px;align-items:center;gap:var(--sp-2);width:100%;min-height:22px;
  padding:0 4px;border:0;border-radius:var(--r-xs);background:none;font:500 var(--fs-12)/1 var(--font);color:var(--muted);cursor:pointer;text-align:left;}
.vs-rvsum__hrow span::after{content:'★';margin-left:1px;font-size:10px;color:var(--gold);}
.vs-rvsum__hrow em{font-style:normal;text-align:right;color:var(--ink-2);}
.vs-rvsum__hrow:hover{background:var(--paper);}
.vs-rvsum__hrow.is-on{background:var(--blue-soft);color:var(--blue-deep);}
.vs-rvsum__hrow:disabled{cursor:default;background:none;}
.vs-rvsum__hrow:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.vs-rvsum__hrow meter{display:block;width:100%;height:6px;border:0;border-radius:var(--r-pill);background:var(--line-2);-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.vs-rvsum__hrow meter::-webkit-meter-bar{background:var(--line-2);border:0;border-radius:var(--r-pill);height:6px;}
.vs-rvsum__hrow meter::-webkit-meter-optimum-value,
.vs-rvsum__hrow meter::-webkit-meter-suboptimum-value,
.vs-rvsum__hrow meter::-webkit-meter-even-less-good-value{background:var(--gold);border-radius:var(--r-pill);}
.vs-rvsum__hrow meter::-moz-meter-bar{background:var(--gold);border-radius:var(--r-pill);}
.vs-rvsum > .vs-crit{padding-top:var(--sp-4);border-top:1px solid var(--line-2);}
@media (min-width:640px){.vs-rvsum__top{grid-template-columns:auto minmax(0,1fr);} .vs-rvsum__main{min-width:120px;}}
/* Десктоп: сводка в две колонки — слева оценка+гистограмма, справа критерии (не тянутся на 800px) */
@media (min-width:1000px){
  .vs-rvsum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--sp-6);padding:var(--sp-5);}
  .vs-rvsum > .vs-crit{padding:0 0 0 var(--sp-6);border-top:0;border-left:1px solid var(--line-2);grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* --- КРИТЕРИИ — .vs-crit (сводка отеля/варианта). 3 колонки на экране ≥ 340px:
   подпись сверху, под ней число + тонкая полоса. Подписи короткие (hdReviewsCritLabels).
   <ul class="vs-crit vs-ul"><li class="vs-crit__row vs-crit__row--good">
     <span class="vs-crit__lbl">Чистота</span><b class="vs-crit__val">4.4</b>
     <meter class="vs-crit__bar" min="1" max="5" value="4.4"></meter></li>…</ul> */
.vs-crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-3);font-family:var(--font);}
@media (min-width:340px){.vs-crit{grid-template-columns:repeat(3,minmax(0,1fr));}}
.vs-crit__row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lbl lbl" "val bar";gap:3px 6px;align-items:center;min-width:0;}
.vs-crit__lbl{grid-area:lbl;font-size:var(--fs-12);line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vs-crit__val{grid-area:val;font:700 var(--fs-15)/1 var(--font-display);color:var(--ink);}
.vs-crit__bar{grid-area:bar;display:block;width:100%;height:4px;border:0;border-radius:var(--r-pill);background:var(--line-2);-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.vs-crit__bar::-webkit-meter-bar{background:var(--line-2);border:0;border-radius:var(--r-pill);height:4px;}
.vs-crit__bar::-webkit-meter-optimum-value,
.vs-crit__bar::-webkit-meter-suboptimum-value,
.vs-crit__bar::-webkit-meter-even-less-good-value{background:var(--vs-crit-c,var(--rate-good-ink));border-radius:var(--r-pill);}
.vs-crit__bar::-moz-meter-bar{background:var(--vs-crit-c,var(--rate-good-ink));border-radius:var(--r-pill);}
.vs-crit__row--best{--vs-crit-c:var(--rate-best-ink);}
.vs-crit__row--good{--vs-crit-c:var(--rate-good-ink);}
.vs-crit__row--mid{--vs-crit-c:var(--rate-mid-ink);}
.vs-crit__row--bad{--vs-crit-c:var(--rate-bad-ink);}
.vs-crit__row--mid .vs-crit__val{color:var(--rate-mid-ink);}
.vs-crit__row--bad .vs-crit__val{color:var(--rate-bad-ink);}

/* --- ОЦЕНКИ ГОСТЯ ПО КРИТЕРИЯМ В КАРТОЧКЕ — .vs-critstrip. 6 плиток в одну строку
   (число сверху, короткая подпись снизу: Чистота/Фото/Место/Цена/Сервис/Заезд), цвет
   плитки — по оценке. Правило «не бесить»: если ВСЕ шесть = 5, вместо шести одинаковых
   плиток одна тихая строка .vs-critstrip--all5 «Все 6 критериев — на 5».
   <ul class="vs-critstrip vs-ul" aria-label="Оценки гостя по критериям">
     <li class="vs-critstrip__i vs-critstrip__i--mid" title="Чистота: 3 из 5"><b>3</b><span>Чистота</span></li>…</ul>
   <p class="vs-critstrip vs-critstrip--all5">Все 6 критериев — на 5</p> */
.vs-critstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:var(--sp-3) 0 0;font-family:var(--font);}
@media (min-width:640px){.vs-critstrip{max-width:420px;}}
.vs-critstrip__i{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border-radius:var(--r-s);background:var(--paper);min-width:0;}
.vs-critstrip__i b{font:700 var(--fs-15)/1 var(--font-display);color:var(--ink);}
.vs-critstrip__i span{max-width:100%;font-size:10.5px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vs-critstrip__i--best{background:var(--rate-best-bg);} .vs-critstrip__i--best b{color:var(--rate-best-ink);}
.vs-critstrip__i--good{background:var(--rate-good-bg);} .vs-critstrip__i--good b{color:var(--rate-good-ink);}
.vs-critstrip__i--mid{background:var(--rate-mid-bg);} .vs-critstrip__i--mid b{color:var(--rate-mid-ink);}
.vs-critstrip__i--bad{background:var(--rate-bad-bg);} .vs-critstrip__i--bad b{color:var(--rate-bad-ink);}
.vs-critstrip--all5.vs-critstrip--all5{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:5px 10px 5px 8px;border-radius:var(--r-pill);
  background:var(--rate-best-bg);color:var(--rate-best-ink);font-size:var(--fs-12);font-weight:600;line-height:1.2;}
.vs-critstrip--all5::before{content:'';flex:none;width:12px;height:7px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg);}

/* --- КАРТОЧКА ОТЗЫВА — .vs-rvcard.
   [А] Александра                    [2★]   ← оценка цветом шкалы: зелёная/жёлтая/красная
       9 августа 2026
   1 ночь · 1 гость · в июле 2026 · Уютная двухкомнатная…    (.vs-stay, вторичная строка)
   [ 3 Чистота | 4 Фото | … ]  или  ✓ Все 6 критериев — на 5    (.vs-critstrip)
   (+) текст «понравилось»   (−) текст «не понравилось»   текст комментария
   [фото гостя…]
   ┃ Ответ отеля · 10 августа 2026 — текст
   Иконки +/− вместо заголовков «Понравилось/Не понравилось»: на 375px экономят по строке
   на каждую часть; для скринридера слова остаются (.vs-sr). */
.vs-rvcard{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);font-family:var(--font);}
.vs-rvcard__head{display:flex;align-items:center;gap:var(--sp-3);}
.vs-rvcard__ava{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue-deep);font:700 var(--fs-15)/1 var(--font);}
.vs-rvcard__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vs-rvcard__name{font-size:var(--fs-15);font-weight:700;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vs-rvcard__date{font-size:var(--fs-12);color:var(--muted);line-height:1.2;}
.vs-rvcard__score{flex:none;font:700 var(--fs-15)/1 var(--font-display);padding:6px 9px;border-radius:var(--r-s);}
.vs-rvcard__score::after{content:'★';margin-left:3px;font-size:12px;}
.vs-rvcard__stay{margin:var(--sp-3) 0 0;}
.vs-rvcard__part{position:relative;margin:var(--sp-3) 0 0;padding-left:28px;}
.vs-rvcard__part--note{padding-left:0;}
.vs-rvcard__part::before{position:absolute;left:0;top:1px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font:700 14px/1 var(--font);}
.vs-rvcard__part--plus::before{content:'+';background:var(--green-soft);color:var(--green);}
.vs-rvcard__part--minus::before{content:'−';background:var(--coral-soft);color:var(--coral);}
/* <p> в карточке: .hd-section p (0,1,1) на детальной перебивал одиночный класс — поэтому двойной */
.vs-rvcard__txt.vs-rvcard__txt{margin:0;font-size:var(--fs-14);line-height:1.55;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;}
.vs-rvcard__txt--clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.vs-rvcard__more{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--blue);font:600 var(--fs-13)/1 var(--font);cursor:pointer;}
.vs-rvcard__more:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.vs-rvcard .vs-thumbs{margin-top:var(--sp-3);}
.vs-rvcard__reply{margin:var(--sp-3) 0 0;padding:10px 12px;border-left:3px solid var(--line-strong);border-radius:0 var(--r-s) var(--r-s) 0;background:var(--paper);}
.vs-rvcard__replyhead{margin:0 0 3px;font-size:var(--fs-12);font-weight:700;color:var(--ink-2);}
.vs-rvcard__reply .vs-rvcard__txt.vs-rvcard__txt{font-size:var(--fs-13);color:var(--ink-2);}
.vs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* v3.1 (26.09.2026, правка Данила): оценки гостя — выпадашка ИЗ ОЦЕНКИ. Оценка-кнопка «5★ ⌄»
   (vs-rvcard__score--btn, data-vs-toggle → vse-ui.js), по тапу под шапкой раскрываются 6 плиток
   .vs-critstrip (по умолчанию hidden). Вариант размещения — метка .vs-rvcard__room с иконкой. */
.vs-rvcard__score--btn{display:inline-flex;align-items:center;gap:0;min-height:32px;border:0;cursor:pointer;font:700 var(--fs-15)/1 var(--font-display);}
.vs-rvcard__score--btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.vs-rvcard__chev{display:inline-block;width:6px;height:6px;margin:0 1px 0 7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s;}
.vs-rvcard__score--btn[aria-expanded="true"] .vs-rvcard__chev{transform:translateY(1px) rotate(-135deg);}
.vs-rvcard__score--btn .vs-rvcard__chev{order:2;}
.vs-critstrip[hidden]{display:none;}
/* .vs-ul.vs-ul{margin:0} (0,2,0) обнуляет отступ полосы — возвращаем тройным селектором */
.vs-rvcard .vs-critstrip.vs-ul{margin:var(--sp-3) 0 var(--sp-1);}
.vs-rvcard__room{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:var(--sp-2) 0 0;padding:4px 10px 4px 8px;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink-2);font-size:var(--fs-12);line-height:1.3;font-family:var(--font);}
.vs-rvcard__room svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.vs-rvcard__room span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* --- ОЦЕНКИ БЕЗ ТЕКСТА — .vs-rvbare. Одна плашка на ленту: имя, дата, цветная оценка.
   Такие отзывы не занимают по карточке, но честно учтены (N в «Все N отзывов»). */
.vs-rvbare{padding:10px 12px;border-radius:var(--r-m);background:var(--paper);font-family:var(--font);}
.vs-rvbare__h{margin:0 0 6px;font-size:var(--fs-12);font-weight:700;color:var(--muted);}
.vs-rvbare__list{display:flex;flex-wrap:wrap;gap:6px;}
.vs-rvbare__chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font-size:var(--fs-12);color:var(--muted);white-space:nowrap;}
.vs-rvbare__chip b{font-weight:600;color:var(--ink);}
.vs-rvbare__chip .vs-rate{padding:3px 7px;font-size:var(--fs-12);border-radius:var(--r-pill);}

/* --- ПАНЕЛЬ ЛЕНТЫ — .vs-rvtools. Одна строка, листается пальцем (без переноса):
   [Сначала новые ▾] | С фото 128 · С текстом 212 · Хорошие 1001 · Критические 44 · От недели 31
   Над ней (только у отеля с несколькими вариантами) — выбор варианта размещения.
   Сортировка — нативный <select> в виде пилюли (на телефоне — системный список). */
.vs-rvtools{display:flex;flex-direction:column;gap:var(--sp-2);margin:0 0 var(--sp-3);font-family:var(--font);}
.vs-rvtools__row{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin:0 calc(var(--sp-4) * -1);padding:2px var(--sp-4);}
.vs-rvtools__row::-webkit-scrollbar{display:none;}
.vs-rvtools__row > *{flex:none;}
.vs-rvtools__sep{width:1px;height:20px;background:var(--line);margin:0 2px;}
.vs-pillsel{height:36px;max-width:100%;padding:0 30px 0 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance:none;appearance:none;font:600 var(--fs-13)/1 var(--font);color:var(--ink);cursor:pointer;text-overflow:ellipsis;}
.vs-pillsel:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.vs-pillsel:not(.vs-pillsel--wide){field-sizing:content;}
.vs-pillsel--wide{width:100%;max-width:480px;}
.vs-rvtools .vs-chip{height:36px;display:inline-flex;align-items:center;gap:6px;}
.vs-rvtools .vs-chip em{font-style:normal;font-weight:500;color:var(--muted);}
.vs-rvtools .vs-chip.is-on em{color:inherit;}
.vs-rvtools__x::after{content:'×';margin-left:2px;font-size:15px;line-height:1;}
.vs-rvempty.vs-rvempty{margin:0;padding:var(--sp-4);border-radius:var(--r-m);background:var(--paper);font-size:var(--fs-14);color:var(--muted);text-align:center;}

/* --- ПАРАМЕТРЫ ПРОЖИВАНИЯ: «1 ночь · 1 гость · в июле 2026». Вторичная строка. */
.vs-stay{display:flex;flex-wrap:wrap;gap:2px var(--sp-2);font-size:var(--fs-12);color:var(--muted);font-family:var(--font);line-height:1.35;}
.vs-stay > span + span::before{content:'·';margin-right:var(--sp-2);color:var(--muted-2);}
.vs-stay__room{flex-basis:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);}
.vs-stay > .vs-stay__room::before{content:none;}

/* --- ЛЕНТА ФОТО (превью 480px из облака). Кнопки открывают полноэкранный просмотр
   (.vs-lb, vse-ui.js). Пока превью грузится — шиммер; не загрузилось — плитка прячется
   (vse-ui.js ставит .is-broken), битых иконок на странице не бывает.
   Полный набор для просмотра: у группы [data-vs-lb-group] может быть
   data-vs-lb-src="<url JSON {items:[{thumb,full}]}>" — тогда просмотр листает ВСЕ фото
   (а не только превью, видимые в ленте); последняя плитка несёт «+N».
   <div class="vs-thumbs" data-vs-lb-group data-vs-lb-src="/ajax/hd_reviews.php?photos=1&hotel=1">
     <button class="vs-thumbs__i" type="button" data-vs-lb="<полный url>" data-vs-lb-thumb="<превью>"><img src="<превью>" alt=""></button>… */
.vs-thumbs{display:flex;gap:6px;margin:var(--sp-3) 0 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.vs-thumbs::-webkit-scrollbar{display:none;}
.vs-thumbs__i{position:relative;flex:0 0 auto;width:76px;height:76px;padding:0;border:0;border-radius:var(--r-s);
  overflow:hidden;background:var(--stub-1);cursor:zoom-in;scroll-snap-align:start;}
.vs-thumbs__i.is-broken{display:none;}
.vs-thumbs__i img{display:block;width:100%;height:100%;object-fit:cover;} /* t_b0055ce6: без шиммера и проявления — загрузку не показываем */
.vs-thumbs__i:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.vs-thumbs__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--scrim);color:var(--on-media);font:700 var(--fs-15)/1 var(--font);pointer-events:none;}
@media (min-width:640px){.vs-thumbs__i{width:88px;height:88px;}}
/* Галерея «Фото гостей · 35» над лентой: превью крупнее, тап по любому — просмотр ВСЕХ 35. */
.vs-guestph{margin:0;font-family:var(--font);}
.vs-guestph__h{display:flex;align-items:baseline;gap:var(--sp-2);margin:0 0 var(--sp-2);font-size:var(--fs-15);font-weight:700;color:var(--ink);}
.vs-guestph__h span{font-weight:400;font-size:var(--fs-13);color:var(--muted);}
.vs-thumbs--lg{margin-top:0;}
.vs-thumbs--lg .vs-thumbs__i{width:96px;height:96px;border-radius:var(--r-m);}
@media (min-width:640px){.vs-thumbs--lg .vs-thumbs__i{width:112px;height:112px;}}

/* --- ПОЛНОЭКРАННЫЙ ПРОСМОТР ФОТО. Создаётся vse-ui.js по клику на [data-vs-lb].
   Свайп/стрелки/Esc, счётчик «3 из 8», фон — --media-bg. Тап-зоны кнопок ≥ --tap. */
.vs-lb{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--media-bg);color:var(--on-media);font-family:var(--font);}
.vs-lb[hidden]{display:none;}
.vs-lb__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:calc(var(--sp-2) + env(safe-area-inset-top,0px)) var(--sp-3) var(--sp-2);}
.vs-lb__cnt{font-size:var(--fs-14);font-weight:600;}
.vs-lb__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--on-media);cursor:pointer;}
.vs-lb__btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vs-lb__track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.vs-lb__track::-webkit-scrollbar{display:none;}
.vs-lb__slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;padding-bottom:var(--safe-b);}
.vs-lb__slide img{max-width:100%;max-height:100%;object-fit:contain;}
.vs-lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--scrim);}
.vs-lb__nav--prev{left:var(--sp-3);}
.vs-lb__nav--next{right:var(--sp-3);}
@media (hover:none){.vs-lb__nav{display:none;}}
html.vs-lb-open{overflow:hidden;}

/* t_698434a9 + t_b0055ce6 (26.09.2026): просмотр фото v2 — подпись отзыва, точки, без видимой загрузки.
   Под полным фото лежит ЧЁТКОЕ превью (оно уже в кэше со страницы) — вместо блюра и спиннера.
   Низ: точки (окно из 7, крайние меньше — «дальше есть ещё») + подпись: кто, оценка, когда,
   вариант и параметры проживания, 2 строки текста; «Весь отзыв» раскрывает панель с полным текстом. */
.vs-lb{--lb-fg-2:rgba(255,255,255,.74);--lb-fg-3:rgba(255,255,255,.5);--lb-glass:rgba(255,255,255,.14);}
.vs-lb__slide{position:relative;overflow:hidden;}
.vs-lb__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.vs-lb__slide img.vs-lb__img{position:relative;}
.vs-lb__slide.is-loaded .vs-lb__ph{visibility:hidden;}
.vs-lb__slide.is-broken .vs-lb__img{display:none;}
.vs-lb__foot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px var(--sp-4) calc(var(--sp-4) + var(--safe-b));
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.78) 34%);pointer-events:none;}
.vs-lb__foot > *{pointer-events:auto;}
.vs-lb__dots{display:flex;justify-content:center;align-items:center;gap:6px;height:8px;margin:0 0 var(--sp-3);}
.vs-lb__dots[hidden]{display:none;}
.vs-lb__dots i{width:7px;height:7px;border-radius:50%;background:var(--lb-fg-3);transition:transform .15s,background .15s;}
.vs-lb__dots i.on{background:var(--on-media);}
.vs-lb__dots i.sm{transform:scale(.6);}
.vs-lb__cap{max-width:640px;margin:0 auto;color:var(--on-media);font-family:var(--font);}
.vs-lb__cap[hidden]{display:none;}
.vs-lb__caphead{display:flex;align-items:center;gap:var(--sp-3);}
.vs-lb__ava{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--lb-glass);font:700 var(--fs-14)/1 var(--font);}
.vs-lb__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vs-lb__who b.vs-lb__name,.vs-lb__who > b{color:var(--on-media);}
.vs-lb__who b{font-size:var(--fs-14);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vs-lb__who span{font-size:var(--fs-12);color:var(--lb-fg-2);}
.vs-lb__rate{flex:none;font:700 var(--fs-14)/1 var(--font-display);padding:5px 8px;border-radius:var(--r-s);}
.vs-lb__caproom{margin:var(--sp-2) 0 0;font-size:var(--fs-13);font-weight:600;color:var(--on-media);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vs-lb__capsub{display:flex;flex-wrap:wrap;gap:2px var(--sp-2);margin:2px 0 0;font-size:var(--fs-12);color:var(--lb-fg-2);}
.vs-lb__capsub span + span::before{content:'·';margin-right:var(--sp-2);color:var(--lb-fg-3);}
.vs-lb__capbody{margin:var(--sp-2) 0 0;max-height:44px;overflow:hidden;}
.vs-lb--capopen .vs-lb__capbody{max-height:45vh;overflow-y:auto;overscroll-behavior:contain;}
.vs-lb__part{position:relative;margin:0 0 6px;padding-left:18px;font-size:var(--fs-14);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;}
.vs-lb__part::before{position:absolute;left:0;top:0;font-weight:700;}
.vs-lb__part--plus::before{content:'+';color:var(--green-bright);}
.vs-lb__part--minus::before{content:'−';color:var(--coral);}
.vs-lb__part--note,.vs-lb__part--reply{padding-left:0;}
.vs-lb__part--reply{margin-top:var(--sp-2);padding:8px 10px;border-radius:var(--r-s);background:var(--lb-glass);color:var(--lb-fg-2);font-size:var(--fs-13);}
.vs-lb__replyh{display:block;font-weight:700;color:var(--on-media);font-size:var(--fs-12);margin-bottom:2px;}
.vs-lb__capmore{min-height:32px;margin-top:2px;padding:0;border:0;background:none;color:var(--on-media);font:600 var(--fs-13)/1 var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.vs-lb__capmore[hidden]{display:none;}
.vs-lb--capopen .vs-lb__foot{background:rgba(0,0,0,.86);}

/* --- ВСЕ ОТЗЫВЫ — .vs-rvmodal (t_4214ed1a / t_f0276a42, 26.09.2026, утверждено Данилом).
   На странице — сводка + 5 отзывов; «Все N отзывов» и строки гистограммы открывают эту шторку:
   мобила — на весь экран снизу вверх, десктоп — окно 720px по центру. Шапка «Отзывы гостей ·
   4.8 · 1045 отзывов» + крестик; панель фильтров .vs-rvtools прилипает к верху прокрутки; лента
   догружается сама у низа (IntersectionObserver), кнопка — запасной путь. «Назад» закрывает. */
html.vs-rvmodal-open{overflow:hidden;}
.vs-rvmodal{position:fixed;inset:0;z-index:1000030;font-family:var(--font);}
.vs-rvmodal[hidden]{display:none;}
.vs-rvmodal__scrim{position:absolute;inset:0;background:var(--scrim);}
.vs-rvmodal__panel{position:absolute;left:0;right:0;bottom:0;top:calc(var(--sp-6) + env(safe-area-inset-top,0px));display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);overflow:hidden;animation:vs-rvmodal-up .26s cubic-bezier(.2,.7,.3,1);}
@keyframes vs-rvmodal-up{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.vs-rvmodal__panel{animation:none;}}
.vs-rvmodal__head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-2);}
.vs-rvmodal__ttl{display:flex;flex-direction:column;gap:2px;min-width:0;}
.vs-rvmodal__ttl b{font:700 var(--fs-17)/1.2 var(--font);color:var(--ink);}
.vs-rvmodal__sub{font-size:var(--fs-13);color:var(--muted);}
.vs-rvmodal__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.vs-rvmodal__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 var(--sp-4) calc(var(--sp-6) + var(--safe-b));}
.vs-rvmodal__tools{position:sticky;top:0;z-index:2;margin:0 calc(var(--sp-4) * -1) var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-2);background:var(--card);box-shadow:0 1px 0 var(--line-2);}
.vs-rvmodal__tools:empty{display:none;}
.vs-rvmodal__tools .vs-rvtools{margin:0;}
.vs-rvmodal__list[aria-busy="true"]{opacity:.5;}
.vs-rvmodal__sentinel{height:1px;}
.vs-rvmodal .hd-rv__more{width:100%;margin-top:var(--sp-4);}
@media (min-width:900px){
  .vs-rvmodal__panel{left:50%;top:5vh;bottom:5vh;width:720px;transform:translateX(-50%);border-radius:var(--r-xl);animation:none;}
}

/* t_896e4cc8 (26.09.2026): кнопка входа в шапке сайта — kit secondary. Тема Aspro навешивает на
   ссылку кабинета свои правила (капс, разрядка, квадрат) — перебиваем ровно их. */
.vs-btn.vs-hdr-login{min-height:40px;padding:0 var(--sp-4);text-transform:none;letter-spacing:0;font-size:var(--fs-14);border-radius:var(--r-m);}