/* Вкладка "Главная" витрины отеля - HOTEL_PLAN.md, этап 4. Длительности/
   кривые - docs-project/MOTION_LANGUAGE.md разд. 3, 7: анимации только
   внутри `prefers-reduced-motion: no-preference`, только transform/opacity -
   тот же приём, что cafe-showcase.css. */
:root {
  --hotel-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --hotel-ease-out: cubic-bezier(0, 0, .2, 1);
  --hotel-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Общая высота для всех четырёх полей панели дат/гостей (Заезд/Выезд/
     Взрослые/Дети) - одна переменная вместо четырёх одинаковых литералов,
     чтобы `height` (не `min-height`) физически не мог разъехаться между
     полями при любом их содержимом. Значение подобрано под самый высокий
     из четырёх блоков: hotel-guest-stepper, когда подпись переехала над
     счётчиком (а не рядом, см. ниже) - подпись + gap + кружки-кнопки
     1.9rem в столбик занимают больше, чем label+value у дат, поэтому
     именно guest-stepper задаёт нижнюю границу общей высоты. */
  --hotel-field-height: 4.4rem;

  /* Токены цвета для подготовки light/dark темы (см. CLAUDE.md). Где
     значение 1:1 совпадает с --color-*-rgb из :root в showcase.html
     (там, где этот файл подключается), переиспользуем те переменные
     через var() ниже по файлу без объявления здесь. Здесь - только то,
     что не покрыто тем списком: акцентный rgb-triple для альфа-подмеса
     (зеркалит дефолт --accent-color: #FF7A00, см. showcase_accent_color)
     и повторяющиеся 3+ раза цвета этого файла. Значения не менялись,
     только вынесены в переменные - рендер идентичен прежнему. */
  --color-accent-rgb: 255 122 0; /* mirrors default of --accent-color (#FF7A00); alpha-blended tints only */
  --color-ink-rgb: 15 23 42; /* slate-900 - основной текст, меняется темой (см. body.theme-dark ниже) */
  --color-text-secondary-rgb: 51 65 85; /* slate-700 */
  --color-text-faint-rgb: 148 163 184; /* slate-400 */
  --color-border-rgb: 226 232 240; /* slate-200 */
  --color-surface-1-rgb: 248 250 252; /* slate-50 */
  --color-danger-strong-rgb: 185 28 28; /* red-700 */
}

/* Тема гостя, этап 2. --color-ink-rgb здесь означал ДВЕ разные роли:
   обычный текст (должен светлеть в тёмной теме) и "всегда тёмная" подложка
   бейджей/скрима (галерея, значок 360°, бэкдроп) - если бы --color-ink-rgb
   целиком посветлел, эти бейджи стали бы светлым пятном на тёмном фоне.
   Роль "всегда тёмная" перенесена на --color-ink-fixed-rgb (общий токен из
   showcase.html, не меняется темой) - см. правки ниже по файлу у
   .hotel-gallery-counter/.hotel-gallery-360-btn/.hotel-room-card-360-badge/
   .hotel-overlay-backdrop. Обычный текст остался на --color-ink-rgb и
   теперь свободно светлеет здесь. "Белый текст на акценте" (было
   --color-overlay-rgb) переведён на общий --accent-ink-rgb (решает
   известный дефект 2.61:1, см. showcase_views.accent_ink_color) - у него
   нет темы, один и тот же выбор в обеих. "Белая карточка/контрол" (было
   тоже --color-overlay-rgb, не по смыслу) переведена на новый общий
   --color-surface-rgb. */
body.theme-dark {
  --color-ink-rgb: 228 228 228;
  --color-text-secondary-rgb: 196 196 202;
  --color-text-faint-rgb: 154 154 162;
  --color-border-rgb: 72 72 72;
  --color-surface-1-rgb: 36 36 36;
  --color-danger-strong-rgb: 252 165 165; /* red-300 */
}

/* ------------------------------------------------------------- Галерея -- */
.hotel-gallery-wrap { position: relative; margin: 0 -1rem 0.5rem; }
.hotel-gallery-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hotel-gallery-carousel::-webkit-scrollbar { display: none; }
.hotel-gallery-item {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  background: rgb(var(--color-surface-2-rgb));
}
.hotel-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-gallery-item[hidden] { display: none; }
.hotel-gallery-counter {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  background: rgb(var(--color-ink-fixed-rgb) / 0.65); color: rgb(var(--color-overlay-rgb));
  font-size: 0.75rem; font-weight: 600;
  border-radius: 999px; padding: 0.2rem 0.65rem;
}
.hotel-gallery-360-btn {
  position: absolute; left: 0.75rem; bottom: 0.75rem;
  background: rgb(var(--color-ink-fixed-rgb) / 0.65); color: rgb(var(--color-overlay-rgb)); border: none;
  font-size: 0.75rem; font-weight: 700;
  border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer;
}
.hotel-gallery-filters {
  display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.1rem 0 0.75rem;
}
.hotel-gallery-filters::-webkit-scrollbar { display: none; }
.hotel-filter-chip {
  /* #475569 (slate-600) - значение не трогаем в светлой теме (не тот же
     токен, что --color-text-secondary-rgb=slate-700 - замена на var()
     сдвинула бы пиксель без причины). Тёмная тема - отдельным правилом
     ниже по файлу (body.theme-dark .hotel-filter-chip и т.п.). */
  flex: none; border: 1px solid rgb(var(--color-border-rgb)); background: rgb(var(--color-surface-1-rgb)); color: #475569;
  padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.hotel-filter-chip.is-active { background: var(--accent-color, #FF7A00); border-color: transparent; color: rgb(var(--accent-ink-rgb)); }

.hotel-address-row {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: #475569; margin-bottom: 0.75rem;
}

.hotel-amenity-icons {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem;
}
.hotel-amenity-icon {
  display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: rgb(var(--color-text-secondary-rgb));
}
.hotel-amenity-icon svg { color: rgb(var(--accent-text-rgb, 194 82 0)); flex: none; }

/* --------------------------------------------------------- Даты/гости -- */
.hotel-dates-panel {
  background: rgb(var(--color-surface-1-rgb)); border-radius: 1rem; padding: 0.85rem; margin-bottom: 1.25rem;
}
.hotel-dates-row { display: flex; align-items: stretch; gap: 0.6rem; margin-bottom: 0.65rem; }
.hotel-date-btn {
  /* -webkit-appearance/appearance: без сброса WebKit-движки (в т.ч. вебвью
     MAX на телефоне) игнорируют justify-content на <button> и держат
     колоночный контент прижатым к низу - на десктопном Chromium в
     Playwright это не воспроизводится, поэтому предыдущая правка (min-height
     без сброса appearance) не помогала на реальном телефоне. Сброс остаётся
     в силе и нужен по-прежнему (justify-content отвечает за вертикальную
     центровку) - но саму горизонтальную центровку ниже намеренно решили
     через text-align (обычное текстовое свойство, не свойство flex-
     выравнивания), а не через align-items на самой кнопке: align-items —
     из той же группы flex-alignment свойств, что и justify-content, и
     тоже может не сработать в WebKit без доп. проверки на реальном
     устройстве, а text-align так не ломается ни в одном движке.
     height (не min-height) + overflow:hidden: одна и та же переменная на
     всех четырёх полях панели физически не может дать разную высоту - в
     отличие от min-height, где высота блока могла отличаться от соседнего
     блока при разном содержимом (см. hotel-guest-stepper). Дочерние
     элементы остаются на всю ширину (align-items по умолчанию stretch) -
     text-overflow:ellipsis у значения даты продолжает работать от той же
     полной ширины, что и раньше, а не от ширины по содержимому. */
  flex: 1; min-width: 0; max-width: 100%; height: var(--hotel-field-height); box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  text-align: center; border: 1px solid rgb(var(--color-border-rgb)); background: rgb(var(--color-surface-rgb));
  border-radius: 0.8rem; padding: 0.55rem 0.75rem; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  overflow: hidden;
}
.hotel-date-label { display: block; font-size: 0.75rem; line-height: 1.3; color: rgb(var(--color-text-faint-rgb)); }
.hotel-date-value {
  display: block; width: 100%; font-size: 0.88rem; line-height: 1.35; font-weight: 600; color: rgb(var(--color-ink-rgb));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hotel-calendar-panel {
  background: rgb(var(--color-surface-rgb)); border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.9rem;
  margin-bottom: 0.75rem; overflow: hidden;
}
.hotel-calendar-scroll { max-height: 340px; overflow-y: auto; padding: 0.75rem; }
.hotel-calendar-month { margin-bottom: 1rem; }
.hotel-calendar-month-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: capitalize; }
.hotel-calendar-weekdays, .hotel-calendar-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem;
}
.hotel-calendar-weekdays span { text-align: center; font-size: 0.68rem; color: rgb(var(--color-text-faint-rgb)); padding-bottom: 0.25rem; }
.hotel-calendar-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: none; background: none; font-size: 0.8rem; border-radius: 0.5rem; cursor: pointer; color: rgb(var(--color-ink-rgb));
}
.hotel-calendar-day:disabled { color: #cbd5e1; cursor: not-allowed; }
.hotel-calendar-day.is-empty { visibility: hidden; }
.hotel-calendar-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent-color, #FF7A00); }
.hotel-calendar-day.is-selected { background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); font-weight: 700; box-shadow: none; }
.hotel-calendar-day.is-in-range { background: rgb(var(--color-accent-rgb) / 0.14); }
.hotel-calendar-done {
  width: 100%; border: none; border-top: 1px solid rgb(var(--color-surface-2-rgb)); background: rgb(var(--color-surface-rgb));
  padding: 0.7rem; font-weight: 700; color: rgb(var(--accent-text-rgb, 194 82 0)); cursor: pointer;
}

.hotel-guests-row { display: flex; align-items: stretch; gap: 0.6rem; margin-bottom: 0.5rem; }
.hotel-guest-stepper {
  /* Раньше подпись и счётчик стояли в один ряд с justify-content:
     space-between - у «Взрослые» подпись длиннее, чем у «Дети», и при
     нехватке ширины (подпись не переносится как единое слово) счётчик
     сдвигался вправо по-разному между блоками. Тот же паттерн, что и у
     hotel-date-btn: подпись над счётчиком, а не рядом - тогда позиция
     минуса/числа/плюса не зависит от длины подписи вообще. Горизонтальная
     центровка - тем же способом, что и у hotel-date-btn: text-align:center
     на подписи (наследуется) + justify-content:center на
     hotel-stepper-controls (это обычный div, не <button>, но для
     единообразия и здесь не полагаемся на align-items) - блок остаётся на
     всю ширину (align-items по умолчанию stretch), поэтому оба блока
     одной ширины дают одинаковое смещение центра независимо от длины
     подписи. */
  flex: 1; min-width: 0; height: var(--hotel-field-height); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 0.25rem;
  background: rgb(var(--color-surface-rgb)); border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.8rem; padding: 0.55rem 0.75rem;
  overflow: hidden;
}
.hotel-guest-label {
  display: block; width: 100%; font-size: 0.75rem; line-height: 1.3; color: rgb(var(--color-text-faint-rgb));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hotel-stepper-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; }
.hotel-qty-btn {
  width: 1.9rem; height: 1.9rem; min-width: 1.9rem; min-height: 1.9rem; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border-radius: 999px; border: 1px solid rgb(var(--color-border-rgb));
  background: rgb(var(--color-surface-rgb)); font-size: 1rem; cursor: pointer; color: rgb(var(--color-text-secondary-rgb));
}
.hotel-qty-value { font-weight: 700; min-width: 1.2rem; text-align: center; }
.hotel-children-ages { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
/* Раньше цвет ставился через wrap.style.color в JS (hotel-showcase.js) -
   инлайн-стиль нельзя перебить темой без !important; вынесено в класс. */
.hotel-child-age-label { font-size: 0.75rem; color: #64748b; }
body.theme-dark .hotel-child-age-label { color: rgb(154 154 162); }
.hotel-children-ages select {
  border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.6rem; padding: 0.4rem 0.5rem; font-size: 0.8rem;
}

.hotel-search-btn {
  width: 100%; margin-top: 0.5rem; padding: 0.8rem 1rem; border-radius: 0.9rem; border: none;
  background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.hotel-search-error { color: rgb(var(--color-danger-strong-rgb)); font-size: 0.8rem; margin-top: 0.5rem; }

/* --------------------------------------------------- Аккордеон номеров -- */
.hotel-rooms-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.hotel-room-card { border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; background: rgb(var(--color-surface-rgb)); }
.hotel-room-card-header {
  width: 100%; display: flex; gap: 0.75rem; align-items: center; text-align: left;
  border: none; background: none; padding: 0.65rem; cursor: pointer;
}
.hotel-room-card-thumb { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 0.75rem; overflow: hidden; background: rgb(var(--color-surface-2-rgb)); }
.hotel-room-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hotel-room-card-body { flex: 1; min-width: 0; overflow: hidden; }
.hotel-room-card-title-row { display: flex; align-items: center; gap: 0.4rem; }
.hotel-room-card-title { font-weight: 700; font-size: 0.92rem; }
.hotel-room-card-360-badge {
  font-size: 0.65rem; font-weight: 700; color: rgb(var(--color-overlay-rgb)); background: rgb(var(--color-ink-fixed-rgb));
  border-radius: 999px; padding: 0.1rem 0.45rem;
}
.hotel-room-card-capacity { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: rgb(var(--color-text-muted-rgb)); margin-top: 0.2rem; }
.hotel-room-card-beds { margin-left: 0.35rem; }
.hotel-room-card-price { font-size: 0.85rem; font-weight: 700; color: rgb(var(--accent-text-rgb, 194 82 0)); margin-top: 0.25rem; }
.hotel-room-card-chevron { flex: none; color: rgb(var(--color-text-faint-rgb)); transition: transform 200ms var(--hotel-ease-out); }
.hotel-room-card.is-open .hotel-room-card-chevron { transform: rotate(90deg); }

.hotel-room-card-rates { border-top: 1px solid rgb(var(--color-surface-2-rgb)); padding: 0.6rem 0.75rem 0.85rem; }
.hotel-rate-hint { font-size: 0.82rem; color: rgb(var(--color-text-muted-rgb)); padding: 0.5rem 0; }
.hotel-rate-row {
  border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.8rem; padding: 0.65rem 0.8rem; margin-bottom: 0.6rem; cursor: pointer;
}
.hotel-rate-row:last-child { margin-bottom: 0; }
.hotel-rate-row.is-selected { border-color: var(--accent-color, #FF7A00); background: rgb(var(--color-accent-rgb) / 0.06); }
.hotel-rate-title { font-weight: 700; font-size: 0.86rem; }
.hotel-rate-meta { font-size: 0.76rem; color: rgb(var(--color-text-muted-rgb)); margin-top: 0.15rem; }
.hotel-rate-cancellation { font-size: 0.76rem; margin-top: 0.25rem; }
.hotel-rate-cancellation.is-free { color: rgb(var(--color-success-strong-rgb)); }
.hotel-rate-cancellation.is-none { color: #b45309; }
.hotel-rate-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.4rem; }
.hotel-rate-price-total { font-size: 1.05rem; font-weight: 800; color: rgb(var(--color-ink-rgb)); }
.hotel-rate-price-per-night { font-size: 0.72rem; color: rgb(var(--color-text-faint-rgb)); }

/* --------------------------------------------------------------- Удобства -- */
.hotel-section-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; }
.hotel-amenities-full { margin-bottom: 1.5rem; }
.hotel-amenity-group { border: 1px solid #e5e7eb; border-radius: 0.8rem; margin-bottom: 0.5rem; padding: 0.15rem 0.8rem; }
.hotel-amenity-group summary { padding: 0.6rem 0; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.hotel-amenity-group-list { list-style: none; margin: 0; padding: 0 0 0.6rem; }
.hotel-amenity-group-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; font-size: 0.85rem; border-top: 1px solid rgb(var(--color-surface-1-rgb)); }
.hotel-amenity-group-list li.is-unavailable .hotel-amenity-item-title { text-decoration: line-through; color: rgb(var(--color-text-faint-rgb)); }
.hotel-amenity-item-price { color: rgb(var(--color-text-muted-rgb)); font-size: 0.78rem; white-space: nowrap; }

.hotel-rules { margin-bottom: 1.5rem; }
.hotel-rules-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(var(--color-surface-2-rgb)); }
.hotel-rules-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgb(var(--color-surface-2-rgb)); font-size: 0.85rem; }
.hotel-rules-list li span:first-child { color: rgb(var(--color-text-muted-rgb)); }
.hotel-rules-list li span:last-child { font-weight: 600; text-align: right; }

/* ------------------------------------------------------------ Оверлеи -- */
.hotel-overlay-backdrop { position: fixed; inset: 0; background: rgb(var(--color-ink-fixed-rgb) / 0.75); z-index: 1050; }
.hotel-360-modal {
  position: fixed; inset: 0; z-index: 1060; background: #000;
  display: flex; flex-direction: column;
}
.hotel-360-close {
  position: absolute; top: calc(0.75rem + env(safe-area-inset-top)); right: 0.75rem; z-index: 2;
  width: 2.2rem; height: 2.2rem; border-radius: 999px; border: none;
  background: rgb(var(--color-overlay-rgb) / 0.15); color: rgb(var(--color-overlay-rgb)); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hotel-360-frame { flex: 1; min-height: 0; }
.hotel-360-frame iframe { width: 100%; height: 100%; border: none; }

.hotel-offer-bar {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 900; display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); border: none; border-radius: 1rem;
  padding: 0.85rem 1.1rem; box-shadow: 0 6px 20px rgba(0,0,0,0.2); font-weight: 700; cursor: pointer;
}

.hotel-screen { position: fixed; inset: 0; z-index: 1060; background: rgb(var(--color-surface-rgb)); display: flex; flex-direction: column; }
.hotel-screen-header {
  flex: none; display: flex; align-items: center; gap: 0.6rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem; border-bottom: 1px solid rgb(var(--color-surface-2-rgb));
}
.hotel-screen-header h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.hotel-screen-back {
  width: 2.2rem; height: 2.2rem; border-radius: 999px; border: none; background: rgb(var(--color-surface-2-rgb));
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgb(var(--color-text-secondary-rgb));
}
.hotel-screen-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1rem; }
.hotel-screen-footer {
  flex: none; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--color-surface-2-rgb)); display: flex; flex-direction: column; gap: 0.5rem;
}

.hotel-checkout-summary {
  background: rgb(var(--color-surface-1-rgb)); border-radius: 0.9rem; padding: 0.75rem 0.9rem; margin-bottom: 1rem; font-size: 0.85rem;
}
.hotel-checkout-summary-row { display: flex; justify-content: space-between; padding: 0.15rem 0; color: #475569; }
.hotel-checkout-summary-row.total { font-weight: 800; color: rgb(var(--color-ink-rgb)); font-size: 0.98rem; margin-top: 0.3rem; padding-top: 0.4rem; border-top: 1px dashed rgb(var(--color-border-rgb)); }

.hotel-addons-block { margin-bottom: 1rem; }
.hotel-addon-row {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0;
  border-bottom: 1px solid rgb(var(--color-surface-2-rgb));
}
.hotel-addon-row:last-child { border-bottom: none; }
.hotel-addon-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 0.6rem; object-fit: cover; background: rgb(var(--color-surface-2-rgb));
}
.hotel-addon-thumb-empty { background: rgb(var(--color-surface-2-rgb)); }
.hotel-addon-info { flex: 1; min-width: 0; }
.hotel-addon-title { font-size: 0.85rem; font-weight: 600; color: rgb(var(--color-ink-rgb)); }
.hotel-addon-price { font-size: 0.76rem; color: rgb(var(--color-text-muted-rgb)); margin-top: 0.1rem; }
.hotel-addon-toggle {
  flex: none; border: 1px solid rgb(var(--color-border-rgb)); background: rgb(var(--color-surface-rgb)); color: rgb(var(--color-text-secondary-rgb)); border-radius: 999px;
  padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.hotel-addon-toggle.is-added {
  background: var(--accent-color, #FF7A00); border-color: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb));
}

.hotel-form-field { margin-bottom: 0.9rem; }
.hotel-form-field label { display: block; font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.3rem; }
.hotel-form-field input, .hotel-form-field select, .hotel-form-field textarea {
  width: 100%; border: 1px solid rgb(var(--color-border-rgb)); border-radius: 0.7rem; padding: 0.55rem 0.7rem; font-size: 0.85rem;
}
.hotel-form-field textarea { margin-top: 0.6rem; resize: vertical; }

.hotel-checkbox-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; margin-bottom: 0.75rem; cursor: pointer; }
.hotel-occupant-fields { border-left: 2px solid rgb(var(--color-surface-2-rgb)); padding-left: 0.75rem; margin-bottom: 0.5rem; }

.hotel-preset-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.hotel-preset-chip {
  display: flex; align-items: center; gap: 0.4rem; border: 1px solid rgb(var(--color-border-rgb)); border-radius: 999px;
  padding: 0.35rem 0.75rem; font-size: 0.78rem; cursor: pointer; color: rgb(var(--color-text-secondary-rgb));
}
.hotel-preset-chip input { accent-color: var(--accent-color, #FF7A00); }
.hotel-preset-hint { font-size: 0.72rem; color: rgb(var(--color-text-faint-rgb)); margin: 0.2rem 0 0.6rem; }

.hotel-checkout-error {
  color: rgb(var(--color-danger-strong-rgb)); background: rgb(var(--color-danger-rgb) / 0.08); border-radius: 0.6rem;
  padding: 0.6rem 0.75rem; font-size: 0.82rem; margin-top: 0.75rem;
}

.hotel-submit-btn {
  width: 100%; padding: 0.9rem 1rem; border-radius: 0.9rem; border: none;
  background: var(--accent-color, #FF7A00); color: rgb(var(--accent-ink-rgb)); font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
/* Раньше текст оставался белым (унаследован от .hotel-submit-btn) поверх
   светло-серого disabled-фона - 1.48:1, ниже 4.5:1 даже с учётом что
   кнопка disabled (сквозное требование задачи явно включает disabled).
   Тёмная тема - ниже, body.theme-dark .hotel-submit-btn:disabled. */
.hotel-submit-btn:disabled { background: #cbd5e1; color: #1e293b; cursor: not-allowed; }

/* -------------------------------------------------------- Экран успеха -- */
.hotel-success-badge { display: flex; justify-content: center; margin: 0.5rem 0 0.75rem; }
.hotel-success-number { text-align: center; font-size: 1.3rem; font-weight: 800; margin-bottom: 0.75rem; }
.hotel-success-summary { background: rgb(var(--color-surface-1-rgb)); border-radius: 0.9rem; padding: 0.75rem 0.9rem; font-size: 0.85rem; margin-bottom: 0.75rem; }
.hotel-success-cancellation { font-size: 0.85rem; color: rgb(var(--color-success-strong-rgb)); text-align: center; margin-bottom: 0.5rem; }
.hotel-success-cancelled { color: rgb(var(--color-danger-strong-rgb)); background: rgb(var(--color-danger-rgb) / 0.08); border-radius: 0.7rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; text-align: center; }
.hotel-success-scratch-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgb(var(--color-surface-2-rgb)); }
.hotel-success-scratch-thanks { text-align: center; font-size: 0.9rem; font-weight: 600; color: rgb(var(--color-ink-rgb)); margin-bottom: 0.75rem; }
.hotel-upsell-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgb(var(--color-surface-2-rgb)); }
.hotel-upsell-submit { margin-top: 0.6rem; }

.hotel-status-cancel-btn {
  width: 100%; padding: 0.8rem 1rem; border-radius: 0.9rem; border: 1px solid #fca5a5;
  background: rgb(var(--color-surface-rgb)); color: rgb(var(--color-danger-strong-rgb)); font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.hotel-status-phone-btn {
  display: block; text-align: center; width: 100%; padding: 0.8rem 1rem; border-radius: 0.9rem;
  background: rgb(var(--color-call-btn-rgb)); color: rgb(var(--color-overlay-rgb)); font-weight: 700; font-size: 0.88rem; text-decoration: none;
}

.hotel-my-bookings-link {
  display: table; margin: 0 auto 1.1rem; text-align: center; padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--accent-color, #FF7A00); border-radius: 0.9rem; background: rgb(var(--color-surface-rgb));
  color: rgb(var(--accent-text-rgb, 194 82 0)); font-weight: 700;
  font-size: 0.9rem; text-decoration: none; cursor: pointer;
}
.hotel-booking-card {
  background: rgb(var(--color-surface-1-rgb)); border-radius: 0.9rem; padding: 0.8rem 0.9rem; font-size: 0.85rem;
  margin-bottom: 0.9rem;
}
.hotel-booking-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.hotel-booking-card-number { font-weight: 800; color: rgb(var(--color-ink-rgb)); }
.hotel-booking-card-status { font-size: 0.75rem; font-weight: 700; color: rgb(var(--color-text-muted-rgb)); }
.hotel-booking-card .hotel-success-cancellation { text-align: left; margin: 0.4rem 0; }
.hotel-booking-card .hotel-status-cancel-btn { margin-top: 0.6rem; padding: 0.6rem 1rem; font-size: 0.82rem; }
.hotel-my-bookings-empty { text-align: center; color: rgb(var(--color-text-faint-rgb)); font-size: 0.85rem; padding: 2rem 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .hotel-screen { transition: transform 300ms var(--hotel-ease-spring); }
  .hotel-screen[data-anim="enter"] { animation: hotel-screen-in 250ms var(--hotel-ease-out); }
  @keyframes hotel-screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .hotel-offer-bar[data-anim="enter"] { animation: hotel-pop-in 250ms var(--hotel-ease-spring); }
  @keyframes hotel-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .hotel-room-card-rates[data-anim="enter"] { animation: hotel-rates-in 200ms var(--hotel-ease-out); }
  @keyframes hotel-rates-in { from { opacity: 0; } to { opacity: 1; } }
  .hotel-room-card-header, .hotel-qty-btn, .hotel-filter-chip, .hotel-search-btn, .hotel-submit-btn, .hotel-rate-row, .hotel-calendar-day {
    transition: transform 100ms var(--hotel-ease-out);
  }
  .hotel-room-card-header:active, .hotel-search-btn:active, .hotel-submit-btn:active { transform: scale(0.98); }
  .hotel-qty-btn:active, .hotel-calendar-day:active { transform: scale(0.92); }
}

@media (max-width: 380px) {
  .hotel-success-number { font-size: 1.1rem; }
}

/* Тема гостя, этап 2 - оставшиеся точечные литералы (не через var(), общий
   принцип не подходил - см. комментарии у каждого значения выше по файлу). */
body.theme-dark .hotel-filter-chip,
body.theme-dark .hotel-address-row,
body.theme-dark .hotel-checkout-summary-row {
  color: rgb(196 196 202);
}
body.theme-dark .hotel-calendar-day:disabled { color: rgb(100 100 100); }
body.theme-dark .hotel-room-card,
body.theme-dark .hotel-amenity-group {
  border-color: rgb(72 72 72);
}
body.theme-dark .hotel-rate-cancellation.is-none { color: rgb(251 191 36); }
body.theme-dark .hotel-submit-btn:disabled {
  background: rgb(66 66 66);
  color: rgb(228 228 228);
}