/* ============================================================
   1. ТОКЕНЫ — все цвета и размеры живут здесь, в одном месте.
   Меняешь тут — меняется весь сайт. Никогда не пиши цвет
   прямо в компоненте, всегда через var(--что-то).
   ============================================================ */

:root{
  /* Тёмная тема — основная. Ночной оазис: вода с подсветкой, песок, латунь. */
  --bg:      #0B1416;   /* фон страницы */
  --bg-2:    #121F22;   /* карточки */
  --bg-3:    #19292D;   /* поля ввода, выделенные блоки */
  --line:    #23383D;   /* границы */
  --ink:     #EDE4D3;   /* основной текст (песок) */
  --ink-2:   #93A3A1;   /* приглушённый текст */
  --brass:   #C9A15C;   /* латунь — акцент */
  --water:   #4FB3A8;   /* подсветка бассейна — второй акцент */
  --warm:    #D98850;   /* тёплый (парная) */

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);

  /* Типографика */
  --display: 'Prata', 'Times New Roman', serif;
  --body: 'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1120px;
  --gutter: 20px;
  --radius: 4px;
}

/* Сайт только тёмный — светлой темы нет.
   color-scheme говорит браузеру рисовать тёмными и свои элементы:
   полосы прокрутки, календарь в поле даты, галочки в чекбоксах. */
:root{ color-scheme: dark; }

/* ============================================================
   2. БАЗА — сброс и общие правила
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);          /* фон задаём явно, иначе тема «протечёт» */
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

/* Атрибут hidden прячет элемент, но любое своё правило display его перебивает.
   Поэтому усиливаем: иначе блок с display:flex останется на экране. */
[hidden]{ display:none !important; }
a{ color:inherit; }

/* Видимый фокус с клавиатуры — это доступность, не украшение */
:focus-visible{ outline:2px solid var(--water); outline-offset:2px; }

h1,h2,h3{ font-family:var(--display); font-weight:400; text-wrap:balance; margin:0; line-height:1.15; }

/* Обёртка: держит контент по центру и гарантирует поля по бокам */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

section{ padding-block:clamp(56px, 8vw, 104px); }

/* Надзаголовок-метка */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  margin:0 0 14px;
}

.lede{ color:var(--ink-2); max-width:62ch; font-size:17px; }

/* Цифры, которые стоят в колонках, — моноширинным */
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ============================================================
   3. ШАПКА
   ============================================================ */

.topbar{
  position:sticky;
  top:env(safe-area-inset-top, 0px);   /* не 0 — иначе уедет под чёлку телефона */
  z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Три зоны: имя слева, меню ровно по центру, телефон справа.
   Раньше здесь был flex с margin-right:auto у названия — меню и телефон
   слипались у правого края, а слева зияла пустота. Сетка из трёх колонок
   держит меню по центру страницы независимо от длины телефона. */
.topbar .wrap{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px; min-height:62px;
}
.topbar-actions{ justify-self:end; display:flex; align-items:center; gap:12px; }

.brand{ justify-self:start; font-family:var(--display); font-size:21px;
        letter-spacing:.01em; text-decoration:none; white-space:nowrap; }
.brand span{ color:var(--brass); }

.nav{ justify-self:center; display:flex; gap:20px; flex-wrap:wrap; }
.nav a{ font-size:14px; color:var(--ink-2); text-decoration:none; }
.nav a:hover{ color:var(--ink); }

.topbar-phone{
  font-family:var(--mono); font-size:14px; font-weight:500;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
/* Между 760 и 1000 меню ещё помещается, но номер цифрами вытесняет его
   из центра — убираем номер, кнопка «Позвонить» остаётся. */
@media (max-width:1000px){ .topbar-phone{ display:none; } }

/* Меню прячется — остаются две зоны, имя и кнопка по краям */
@media (max-width:760px){
  .nav{ display:none; }
  .topbar .wrap{ grid-template-columns:1fr auto; }
}

/* ============================================================
   4. БАННЕРЫ — СЛАЙДЕР
   Все слайды лежат в один ряд внутри «окна» с overflow:hidden.
   Переключение = сдвиг ряда на -100 % за каждый слайд.
   ============================================================ */

.slider{
  position:relative;
  padding-block:0;               /* гасим общий отступ section — баннер идёт вплотную к шапке */
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}

.slider-viewport{ overflow:hidden; }        /* окно: наружу торчать нечему */

.slider-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce){ .slider-track{ transition:none; } }

.slide{
  flex:0 0 100%;                            /* ровно ширина окна: не сжимается, не растёт */
  position:relative;
  min-height:300px;
  display:grid; align-content:center;
  padding:48px var(--gutter);
}

/* Пока видны стрелки — резервируем под них место по бокам,
   иначе кружки листания наезжают на заголовок и текст. */
@media (min-width:641px){
  .slide{ padding-inline:72px; }
}
@media (min-width:641px) and (max-width:860px){
  .slide{ padding-inline:62px; }
  .slider-arrow{ width:38px; height:38px; font-size:19px; }
  .slider-arrow.prev{ left:10px; }
  .slider-arrow.next{ right:10px; }
}

/* Фон слайда — фотография.
   Путь начинается с ../ потому что этот файл лежит в папке css,
   а картинки в img: сначала выходим на уровень выше.
   center/cover — кадрировать по центру и заполнить весь слайд. */
.slide-1{ background:url('../img/banner-1.jpg') center/cover no-repeat; }
.slide-2{ background:url('../img/banner-2.jpg') center/cover no-repeat; }
.slide-3{ background:url('../img/banner-3.jpg') center/cover no-repeat; }

/* Затемнение слева — чтобы текст читался поверх любой фотографии */
.slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,14,16,.92), rgba(8,14,16,.62) 55%, rgba(8,14,16,.35));
}

/* Содержимое поверх затемнения */
.slide-inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; width:100%; }

/* У баннеров свой контраст, не зависящий от темы сайта — как у картинки */
.slide .eyebrow{ color:rgba(243,234,218,.72); }
.slide h2{ font-size:clamp(24px, 3.4vw, 40px); color:#F3EADA; margin-bottom:12px; max-width:22ch; line-height:1.15; text-wrap:balance; }
.slide p{ margin:0 0 24px; font-size:clamp(14px, 1.8vw, 16px); color:rgba(243,234,218,.85); max-width:54ch; }
.slide .btn-primary{ background:#F3EADA; color:#14211F; }

/* Стрелки */
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-content:center;
  font-size:22px; line-height:1; font-family:var(--body);
  color:#F3EADA; background:rgba(8,14,16,.5);
  border:1px solid rgba(243,234,218,.28); border-radius:50%;
  cursor:pointer; backdrop-filter:blur(4px);
  transition:background .15s, transform .18s cubic-bezier(.34,1.3,.64,1);
}
.slider-arrow:hover{ background:rgba(8,14,16,.85); transform:translateY(-50%) scale(1.12); }
.slider-arrow.prev{ left:14px; }
.slider-arrow.next{ right:14px; }
@media (max-width:640px){
  .slider-arrow{ display:none; }                 /* на телефоне листают пальцем */
  /* стрелок нет — можно вернуть тексту нормальный размер */
  .slide{ padding-block:40px; }
  .slide h2{ font-size:clamp(24px, 6.2vw, 32px); }
  .slide p{ font-size:15px; }
}

/* Точки */
.slider-dots{
  position:absolute; z-index:2; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:9px;
}
.slider-dots button{
  width:10px; height:10px; padding:0; cursor:pointer;
  border-radius:50%; border:1px solid rgba(243,234,218,.65); background:transparent;
  transition:background .15s, transform .18s;
}
.slider-dots button:hover{ transform:scale(1.35); }
.slider-dots button[aria-current="true"]{ background:#F3EADA; transform:scale(1.25); }

/* ============================================================
   5. ГЛАВНЫЙ ЭКРАН
   ============================================================ */

.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  padding-block:clamp(48px, 9vw, 96px);
}
/* Атмосфера — чистый CSS, без картинок: свет из воды снизу */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% 108%, color-mix(in srgb, var(--water) 26%, transparent), transparent 70%),
    radial-gradient(48% 40% at 88% -8%, color-mix(in srgb, var(--brass) 16%, transparent), transparent 70%);
}
.hero .wrap{ position:relative; }

.hero h1{ font-size:clamp(38px, 7vw, 68px); margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--brass); }
.hero .lede{ font-size:clamp(17px, 2vw, 19px); }

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--radius);
  font-family:var(--body); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s cubic-bezier(.34,1.3,.64,1), opacity .15s, background .15s, box-shadow .18s;
}
/* Чуть приподнимаем и увеличиваем — курсор «цепляет» кнопку */
.btn:hover{ transform:translateY(-2px) scale(1.035); box-shadow:0 8px 20px -10px rgba(0,0,0,.7); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-primary{ background:var(--brass); color:var(--bg); }
.btn-primary:hover{ opacity:.88; }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:var(--bg-2); }

/* Полоса ключевых фактов */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius);
  margin-top:44px; overflow:hidden;
}
.fact{ background:var(--bg); padding:18px 20px; }
.fact dt{ font-size:12px; color:var(--ink-2); margin-bottom:6px; }
.fact dd{ margin:0; font-family:var(--mono); font-size:19px; font-weight:500; }

/* ============================================================
   6. ЗАЛЫ — две карточки с реальными характеристиками
   ============================================================ */

.halls{ display:grid; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); gap:22px; margin-top:38px; }

.hall{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden;
}
/* Фотография зала.
   object-fit:cover — фото заполняет рамку и лишнее обрезается,
   пропорции при этом не плывут. Без него картинка растянулась бы. */
.hall-photo{
  display:block; width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:var(--bg-3);                    /* видно, пока фото грузится */
  border-bottom:1px solid var(--line);
}

.hall-body{ padding:22px; display:flex; flex-direction:column; gap:16px; flex:1; }
.hall h3{ font-size:26px; }
.hall p{ margin:0; color:var(--ink-2); font-size:15px; }

/* Таблица характеристик — метка слева, значение справа */
.specs{ margin:0; display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.specs > div{ background:var(--bg-2); display:flex; justify-content:space-between; gap:14px; padding:9px 0; }
.specs dt{ font-size:14px; color:var(--ink-2); }
.specs dd{ margin:0; font-family:var(--mono); font-size:14px; text-align:right; }

.price-line{ display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.price-line b{ font-family:var(--mono); font-size:30px; font-weight:700; color:var(--brass); }
.price-line span{ font-size:14px; color:var(--ink-2); }

/* ============================================================
   7. АКЦИИ
   Полоска часов показывает саму механику: сколько платишь и что
   достаётся сверху. Так акция читается за секунду, без вчитывания.
   ============================================================ */

.promos{
  display:grid; gap:16px; margin-top:36px;
  grid-template-columns:1fr 1fr 0.85fr;
}
@media (max-width:940px){ .promos{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .promos{ grid-template-columns:1fr; } }

.promo{
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .22s cubic-bezier(.34,1.2,.64,1), border-color .22s, background .22s;
}
.promo:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--brass) 55%, var(--line));
  background:var(--bg-3);
}

.promo-day{
  margin:0; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.promo h3{
  font-family:var(--body); font-size:19px; font-weight:600; margin:0;
  line-height:1.3;
}
.promo-note{ margin:0; font-size:14px; color:var(--ink-2); }
/* Мелкая приписка под акцией: условие, при котором она не работает */
.promo-fine{ margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line);
             font-size:13px; line-height:1.45; color:var(--ink-2); }

/* Полоска часов: оплаченные — приглушённые, подарочный — выше и золотом */
.hourstrip{ display:flex; align-items:flex-end; gap:6px; margin-top:auto; padding-top:6px; }
.hourstrip i{
  flex:1; height:34px; border-radius:3px;
  background:var(--bg-3); border:1px solid var(--line);
  display:grid; place-content:center;
  font-family:var(--mono); font-style:normal; font-size:12px; color:var(--ink-2);
  transition:height .25s cubic-bezier(.34,1.2,.64,1), background .25s;
}
.promo:hover .hourstrip i{ background:var(--bg-2); }
.hourstrip i.free{
  height:46px;
  background:var(--brass); border-color:var(--brass);
  color:var(--bg); font-weight:700;
  box-shadow:0 6px 18px -8px var(--brass);
}
.promo:hover .hourstrip i.free{ height:52px; background:var(--brass); }

/* Карточка скидки — другого рода, поэтому и выглядит иначе */
.promo.discount{ background:linear-gradient(150deg, var(--bg-3), var(--bg-2)); }
.promo.discount .promo-day{ color:var(--water); }
.promo-figure{
  margin:auto 0 0; font-family:var(--mono); font-weight:700;
  font-size:clamp(38px, 5vw, 52px); line-height:1; color:var(--water);
}
.promo-figure span{ font-size:.5em; margin-left:2px; }

/* ============================================================
   8. ЧТО ЕСТЬ ВНУТРИ — плитки разного размера
   Крупная плитка достаётся тому, что важнее: бассейн. Остальное мельче.
   Так глаз сразу цепляет главное, а не читает четыре одинаковых списка.
   ============================================================ */

.amenities{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px; margin-top:36px;
}

.am{
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px;
  display:flex; flex-direction:column; gap:11px;
  transition:transform .22s cubic-bezier(.34,1.2,.64,1), border-color .22s, background .22s;
}
.am:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--water) 50%, var(--line));
  background:var(--bg-3);
}

.am-ico{ width:26px; height:26px; color:var(--water); flex:none; }
.am h3{ font-family:var(--body); font-size:16px; font-weight:600; margin:0; }
.am p{ margin:0; font-size:14px; color:var(--ink-2); }

/* Главная плитка — бассейн */
.am.feature{ grid-column:span 2; background:linear-gradient(145deg, var(--bg-3), var(--bg-2)); }
.am.feature .am-ico{ width:34px; height:34px; color:var(--brass); }
.am.feature h3{ font-family:var(--display); font-size:clamp(22px, 3vw, 30px); font-weight:400; }
.am.wide{ grid-column:span 2; }

/* Строка характеристик внизу главной плитки */
/* Кнопка меню внутри плитки услуг — прижата к низу, во всю ширину на телефоне */
.menu-btn{ align-self:flex-start; margin-top:14px; }
@media (max-width:560px){ .menu-btn{ align-self:stretch; text-align:center; } }

.am-specs{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.am-specs span{ font-family:var(--mono); font-size:13px; color:var(--ink); }

/* Мелкие пункты — «таблетками», а не списком с тире */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{
  font-size:13px; padding:6px 12px; border-radius:100px;
  color:var(--ink-2); background:var(--bg-3); border:1px solid var(--line);
  transition:color .16s, border-color .16s, transform .16s;
}
.am:hover .chips span{ background:var(--bg-2); }
.chips span:hover{ color:var(--ink); border-color:var(--water); transform:translateY(-2px); }

@media (max-width:900px){
  .amenities{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .amenities{ grid-template-columns:1fr; }
  .am.feature, .am.wide{ grid-column:span 1; }
}

/* ============================================================
   9. БРОНИРОВАНИЕ — форма + живой расчёт
   ============================================================ */

.booking{ background:var(--bg-2); border-block:1px solid var(--line); }
.booking-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:34px; margin-top:34px; align-items:start; }
@media (max-width:820px){ .booking-grid{ grid-template-columns:1fr; } }

.field{ display:grid; gap:7px; margin-bottom:18px; }
.field > label{ font-size:13px; font-weight:600; color:var(--ink-2); }

input[type="date"], input[type="time"], input[type="number"], input[type="tel"], input[type="text"], select{
  width:100%; padding:11px 13px;
  background:var(--bg-3); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--body); font-size:15px;
}
input[type="number"]{ font-family:var(--mono); }

.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Выбор зала радиокнопками, но выглядит как две плитки */
.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice label{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:13px; cursor:pointer; background:var(--bg-3); display:grid; gap:3px;
}
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice label:has(input:checked){ border-color:var(--brass); background:color-mix(in srgb, var(--brass) 12%, var(--bg-3)); }
.choice label:has(input:focus-visible){ outline:2px solid var(--water); outline-offset:2px; }
.choice .c-name{ font-size:14px; font-weight:600; }
.choice .c-price{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }

.extras{ display:grid; gap:10px; }
.extras label{ display:flex; align-items:center; gap:10px; font-size:15px; cursor:pointer; }

/* Согласие на обработку данных */
.consent{
  display:flex; align-items:flex-start; gap:11px;
  margin:4px 0 20px; font-size:14px; line-height:1.5; color:var(--ink-2); cursor:pointer;
}
.consent input{ width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--brass); }
.consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
            text-decoration-color:var(--line); transition:color .15s, text-decoration-color .15s; }
.consent a:hover{ color:var(--brass); text-decoration-color:var(--brass); }
.consent.missing{ color:var(--warm); }
.consent.missing input{ outline:2px solid var(--warm); outline-offset:2px; }
.extras input{ width:17px; height:17px; accent-color:var(--brass); }

/* Чек — итоговый расчёт */
.receipt{
  position:sticky; top:96px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); padding:22px;
}
@media (max-width:820px){ .receipt{ position:static; } }
.receipt h3{ font-family:var(--body); font-size:13px; font-weight:600;
             letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:16px; }
.receipt-lines{ display:grid; gap:9px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.rline{ display:flex; justify-content:space-between; gap:14px; font-size:14px; }
.rline span:first-child{ color:var(--ink-2); }
.rline span:last-child{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rline.gift span{ color:var(--water); }
/* Пояснение в чеке (например, почему не сработала акция) — без суммы справа */
.rline.note{ margin:0; font-size:13px; }
.rline.note span:first-child{ color:var(--ink-2); opacity:.85; }
.total{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:16px; }
.total span{ font-size:14px; color:var(--ink-2); }
.total b{ font-family:var(--mono); font-size:29px; font-weight:700; color:var(--brass); }
.note{ font-size:13px; color:var(--ink-2); margin:14px 0 0; }
.warn{ color:var(--warm); }

/* ============================================================
   10. КОНТАКТЫ И ПОДВАЛ
   ============================================================ */

.contacts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:28px; margin-top:34px; }
.contact h3{ font-family:var(--body); font-size:13px; font-weight:600;
             letter-spacing:.08em; text-transform:uppercase; color:var(--water); margin-bottom:10px; }
.contact p{ margin:0 0 4px; font-size:16px; }
.contact .small{ font-size:14px; color:var(--ink-2); }
.contact a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contact a:hover{ border-color:var(--brass); }

/* ---------- Кнопка «Позвонить» ---------- */

.phone-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Общее правило «.contact a» подчёркивает все ссылки в контактах.
   Здесь оно мешает дважды: подчёркивание висит низко под номером,
   а у кнопки перекрашивает нижнюю грань в серый — получается пилюля
   с тремя бирюзовыми сторонами и одной чужой. Гасим обе беды. */
.phone-row a[data-c="phone"]{ border-bottom:0; font-size:17px; }
.contact .call-btn{ border:1px solid var(--water); }
.contact .call-btn:hover{ border-color:var(--water); }

.call-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:100px;
  border:1px solid var(--water); color:var(--water);
  font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap;
  transition:background .18s, transform .18s cubic-bezier(.34,1.3,.64,1);
}
.call-btn:hover{ background:color-mix(in srgb, var(--water) 16%, transparent); transform:translateY(-1px); }
.call-btn svg{ width:16px; height:16px; flex:none; }
.call-btn.small{ padding:5px 11px; font-size:13px; }

/* В шапке на узком экране остаётся только значок */
@media (max-width:860px){ .call-btn.small span{ display:none; } .call-btn.small{ padding:7px; } }

/* ---------- Новости и акции ---------- */

.news-grid{ display:grid; gap:14px; margin-top:34px;
            grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }

.news-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:10px;
}
.news-card .badge{
  align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bg); background:var(--brass);
  padding:3px 9px; border-radius:100px;
}
.news-card h3{ font-family:var(--body); font-size:18px; font-weight:600; }
.news-card p{ margin:0; color:var(--ink-2); font-size:15px; white-space:pre-wrap; }
.news-card .when{ font-family:var(--mono); font-size:12px; color:var(--ink-2); margin-top:auto; }

/* ---------- Отзывы ---------- */

.review-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }

.reviews-grid{ display:grid; gap:14px; margin-top:20px;
               grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }

.review-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:9px;
}
.review-card .stars{ color:var(--brass); letter-spacing:.12em; font-size:15px; }
.review-card p{ margin:0; font-size:15px; line-height:1.6; white-space:pre-wrap; }
.review-card .who{ font-size:13px; color:var(--ink-2); margin-top:auto; }
.review-card .who b{ color:var(--ink); font-weight:500; }

/* Виджет Яндекса: чужая страница внутри рамки, поэтому только размеры */
.review-widget{ margin-top:26px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.review-widget iframe{ width:100%; height:560px; border:0; display:block; }

/* ---------- Карта ---------- */

.map{ margin-top:34px; }

.map-frame{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;                    /* чтобы карта не вылезала за скругления */
  aspect-ratio:21/7; background:var(--bg-2);
  display:grid; place-content:center;
}
/* На телефоне полоса 21:7 превращается в щёлку — делаем повыше */
@media (max-width:700px){ .map-frame{ aspect-ratio:4/3; } }

.map-frame iframe{
  position:absolute; inset:0;         /* растягиваем на всю рамку */
  width:100%; height:100%; border:0; display:block;
}

/* Своя метка по центру карты: виджет Яндекса свою метку прячет
   в панель «1 найдено», а гостю нужно видеть точку сразу. */
.map-pin{
  position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-50%, -100%);
  width:42px; height:42px; display:grid; place-content:center;
  color:var(--brass); pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.map-pin svg{ width:42px; height:42px; fill:rgba(11,20,22,.92); }

/* Прозрачный слой поверх карты: не даёт утащить её мышкой — иначе метка
   по центру перестала бы указывать на вход — и по клику открывает
   полные Яндекс.Карты. */
.map-cover{
  position:absolute; inset:0; z-index:3;
  border:0; padding:0; cursor:pointer;
  background:transparent; color:transparent; font-size:0;
}
.map-cover:focus-visible{ outline:2px solid var(--brass); outline-offset:-4px; }

.map-wait{ color:var(--ink-2); font-family:var(--mono); font-size:13px; }

.map-link{
  display:inline-block; margin-top:14px; font-size:15px;
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.map-link:hover{ color:var(--brass); border-bottom-color:var(--brass); }

footer{ border-top:1px solid var(--line); padding-block:26px; }
footer .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
              font-size:13px; color:var(--ink-2); }

/* Документы: отдельной строкой под основной, чтобы не спорить с адресом */
footer .footer-docs{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px;
  /* footer .wrap разводит колонки по краям — здесь это не нужно,
     ссылки должны идти подряд слева. Справа оставляем место
     под круглые кнопки, иначе последняя ссылка уезжает под них. */
  justify-content:flex-start;
  padding-right:76px;
}
footer .footer-docs a{
  font-size:13px; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
footer .footer-docs a:hover{ color:var(--brass); border-bottom-color:var(--brass); }
footer .footer-docs:empty{ display:none; }



/* ============================================================
   11. КАЛЕНДАРЬ И ВРЕМЯ
   Занятые дни видно сразу: они приглушены и не нажимаются.
   ============================================================ */

.picker{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-3); padding:14px; }

.picker-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.picker-head strong{ font-size:15px; font-weight:600; }
.picker-head button{
  width:30px; height:30px; flex:none; padding:0; cursor:pointer;
  font-size:17px; line-height:1; font-family:var(--body);
  color:var(--ink); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:background .15s, transform .15s;
}
.picker-head button:hover{ background:var(--bg); transform:scale(1.08); }

.picker-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.picker-grid .dow{ font-size:11px; color:var(--ink-2); text-align:center; padding-bottom:4px; }

.picker-grid button{
  aspect-ratio:1; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:13px;
  color:var(--ink); background:var(--bg-2);
  border:1px solid transparent; border-radius:var(--radius);
  transition:background .15s, border-color .15s, transform .15s;
}
.picker-grid button:hover{ background:var(--bg); border-color:var(--line); transform:scale(1.08); }

/* Занятый или прошедший день: видно, но нажать нельзя */
.picker-grid button.off{
  color:var(--ink-2); opacity:.3; cursor:default;
  text-decoration:line-through;
}
.picker-grid button.off:hover{ background:var(--bg-2); border-color:transparent; transform:none; }

.picker-grid button.picked{ background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:700; }

/* Время заезда — «таблетками» */
.slots{ display:flex; flex-wrap:wrap; gap:7px; }

/* Пояснение под полем: например, почему закрыт час после чужой брони */
.field-note{ margin:9px 0 0; font-size:13px; line-height:1.45; color:var(--ink-2); }
.slots button{
  padding:8px 13px; cursor:pointer;
  font-family:var(--mono); font-size:13px;
  color:var(--ink-2); background:var(--bg-3);
  border:1px solid var(--line); border-radius:100px;
  transition:color .15s, border-color .15s, background .15s, transform .15s;
}
.slots button:hover{ color:var(--ink); border-color:var(--water); transform:translateY(-2px); }
.slots button.picked{ background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:600; }

/* Занятое время не прячем, а гасим: видно, что зал работает,
   и понятно, почему из списка пропала половина часов. */
.slots button.busy{
  opacity:.32; cursor:not-allowed; text-decoration:line-through;
}
.slots button.busy:hover{ color:var(--ink-2); border-color:var(--line); transform:none; }

.slots .none{ font-size:14px; color:var(--warm); }

/* ============================================================
   12. ГАЛЕРЕЯ
   Первый снимок крупнее остальных — так сетка не выглядит
   каталогом одинаковых плиток.
   ============================================================ */

.gallery{
  display:grid; gap:12px; margin-top:34px;
  grid-template-columns:repeat(4, 1fr);
}
.gallery button{
  padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--radius); overflow:hidden; position:relative;
  display:block; line-height:0;
}
.gallery img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio:4/3;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s;
}
.gallery button:hover img{ transform:scale(1.05); filter:brightness(1.08); }

/* Подпись проявляется при наведении */
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 12px; text-align:left;
  font-family:var(--body); font-size:13px; line-height:1.4; color:#F3EADA;
  background:linear-gradient(transparent, rgba(8,14,16,.9));
  opacity:0; transition:opacity .25s;
}
.gallery button:hover figcaption,
.gallery button:focus-visible figcaption{ opacity:1; }

.gallery button:first-child{ grid-column:span 2; grid-row:span 2; }
.gallery button:first-child img{ aspect-ratio:auto; height:100%; }

@media (max-width:820px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery button:first-child{ grid-column:span 2; grid-row:auto; }
  .gallery button:first-child img{ aspect-ratio:4/3; }
}

/* ---------- Просмотр во весь экран ---------- */

.lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:clamp(16px, 4vw, 48px);
  background:rgba(6,10,11,.94); backdrop-filter:blur(6px);
}
.lightbox-fig{ margin:0; max-width:min(1100px, 100%); max-height:100%;
               display:flex; flex-direction:column; gap:12px; min-width:0; }
.lightbox-fig img{
  max-width:100%; max-height:calc(100vh - 160px);
  object-fit:contain; border-radius:var(--radius);
}
.lightbox-fig figcaption{ text-align:center; font-size:14px; color:var(--ink-2); }

.lightbox-x{
  position:absolute; top:calc(16px + env(safe-area-inset-top, 0px)); right:18px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(243,234,218,.1); border:1px solid rgba(243,234,218,.25);
  color:#F3EADA; font-size:16px; cursor:pointer;
}
.lightbox-x:hover{ background:rgba(243,234,218,.2); }

.lightbox-nav{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:rgba(243,234,218,.1); border:1px solid rgba(243,234,218,.25);
  color:#F3EADA; font-size:22px; line-height:1; cursor:pointer;
  transition:background .15s, transform .15s;
}
.lightbox-nav:hover{ background:rgba(243,234,218,.22); transform:scale(1.08); }
@media (max-width:620px){ .lightbox-nav{ position:absolute; bottom:24px; }
  .lightbox-nav.prev{ left:24px; } .lightbox-nav.next{ right:24px; } }

/* ============================================================
   12. ЧАТ С АДМИНИСТРАТОРОМ
   Кнопка внизу справа, панель разворачивается над ней.
   ============================================================ */

/* Обе кнопки живут в одной колонке внизу справа */
.fab-stack{
  position:fixed; z-index:60;
  right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}

/* ---------- Круглые кнопки внизу справа ----------
   В покое — только значок. При наведении подпись выезжает влево:
   анимируем max-width, поэтому ширина кнопки плавно растёт.
   На телефоне наведения нет, поэтому там подписи не показываем вовсе —
   вместо них у каждой кнопки есть aria-label для голосовых программ. */

.fab{
  position:relative;
  display:flex; align-items:center;
  padding:14px; border-radius:100px;
  border:1px solid var(--line); background:var(--bg-3); color:var(--ink);
  font-family:var(--body); font-size:15px; font-weight:500;
  text-decoration:none; cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8);
  transition:transform .18s cubic-bezier(.34,1.3,.64,1),
             border-color .18s, color .18s, background .18s;
}
.fab svg{ width:20px; height:20px; flex:none; }

.fab .fab-label{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width .3s cubic-bezier(.4,0,.2,1), opacity .22s, margin-left .3s;
}

/* Разворачиваем и при наведении, и при переходе табом — с клавиатуры
   кнопка должна вести себя так же, как под мышкой. */
.fab:hover, .fab:focus-visible{ transform:translateY(-2px) scale(1.04); }
.fab:hover .fab-label, .fab:focus-visible .fab-label{
  max-width:260px; opacity:1; margin-left:10px;
}

.fab.tg-fab:hover, .fab.tg-fab:focus-visible,
.fab.max-fab:hover, .fab.max-fab:focus-visible{ border-color:var(--water); color:var(--water); }

/* Главная кнопка — латунная, она заметнее остальных */
.fab.chat-fab{ background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:600; }
.fab.chat-fab:hover, .fab.chat-fab:focus-visible{ background:var(--brass); color:var(--bg); }

.fab[hidden]{ display:none; }

/* Кому мышь недоступна — подпись не выезжает никогда, и ширина не прыгает */
@media (hover: none){
  .fab .fab-label{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .fab, .fab .fab-label{ transition:none; }
}

/* Точка — пришёл ответ, пока чат был свёрнут */
.chat-dot{
  position:absolute; top:-3px; right:-3px; width:12px; height:12px;
  border-radius:50%; background:var(--water); border:2px solid var(--bg);
}

.chat{
  position:fixed; z-index:61;
  /* Окно чата — это <section>, а у всех section в проекте большие
     вертикальные отступы. Здесь они не нужны: гасим, иначе внутри
     панели сверху и снизу остаётся пустота под сто пикселей. */
  padding-block:0;
  right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:min(370px, calc(100vw - 32px));
  max-height:min(560px, calc(100vh - 100px));
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  overflow:hidden;
}

.chat-head{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
            border-bottom:1px solid var(--line); background:var(--bg-3); }
.chat-head b{ display:block; font-size:15px; font-weight:600; }
.chat-head span{ display:block; font-size:12px; color:var(--ink-2); margin-top:2px; }
.chat-x{ margin-left:auto; background:transparent; border:0; color:var(--ink-2);
         font-size:15px; cursor:pointer; padding:2px 4px; line-height:1; }
.chat-x:hover{ color:var(--ink); }

.chat-start{ padding:18px; display:grid; gap:11px; }
.chat-start p{ margin:0 0 3px; font-size:14px; color:var(--ink-2); }
.chat-start input, .chat-start textarea, .chat-send textarea{
  width:100%; padding:11px 13px; background:var(--bg-3); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--body); font-size:15px; resize:vertical;
}
.chat-msg{ margin:0; font-size:13px; color:var(--ink-2); min-height:18px; }
.chat-msg.err{ color:var(--warm); }

.chat-msgs{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble{ max-width:80%; padding:10px 14px; border-radius:12px;
              font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.chat-bubble.admin{ align-self:flex-start; background:var(--bg-3); border-bottom-left-radius:3px; }
.chat-bubble.guest{ align-self:flex-end;
                    background:color-mix(in srgb, var(--brass) 26%, var(--bg-3));
                    border-bottom-right-radius:3px; }
.chat-bubble time{ display:block; font-size:11px; color:var(--ink-2);
                   font-family:var(--mono); margin-top:5px; }

.chat-send{ display:flex; gap:9px; padding:14px; border-top:1px solid var(--line); }
.chat-send .btn{ padding:11px 16px; }
.chat-note{ padding:0 18px 16px; margin:0; font-size:13px; color:var(--ink-2); }

/* ============================================================
   12. ПРЕДОПЛАТА
   Реквизиты приходят с сервера и появляются только после заявки.
   ============================================================ */

.prepay{
  margin-top:34px; padding:28px;
  background:var(--bg-3); border:1px solid var(--brass); border-radius:var(--radius);
  padding-block:28px;
}
.prepay h3{ font-family:var(--display); font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.prepay-lede{ margin:0 0 22px; color:var(--ink-2); max-width:56ch; }

.prepay-grid{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; }
@media (max-width:640px){ .prepay-grid{ grid-template-columns:1fr; gap:18px; } }

.prepay-sum{ display:grid; gap:4px; }
.prepay-sum span{ font-size:13px; color:var(--ink-2); }
.prepay-sum b{ font-family:var(--mono); font-size:34px; font-weight:700; color:var(--brass); }

.prepay-req{ margin:0; display:grid; gap:9px; }
.prepay-req div{ display:flex; gap:12px; flex-wrap:wrap; align-items:baseline; }
.prepay-req dt{ font-size:13px; color:var(--ink-2); min-width:100px; }
.prepay-req dd{ margin:0; font-family:var(--mono); font-size:16px; }

.prepay-note{ margin:22px 0 0; font-size:14px; color:var(--ink-2); max-width:60ch; }

/* Выбор способа связи — в самой форме, под телефоном */
.channels{ display:flex; gap:8px; flex-wrap:wrap; }
.channels button{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; border-radius:100px; cursor:pointer;
  font-family:var(--body); font-size:14px; font-weight:500;
  color:var(--ink-2); background:var(--bg-3); border:1px solid var(--line);
  transition:transform .18s cubic-bezier(.34,1.3,.64,1), border-color .18s, background .18s, color .18s;
}
.channels button:hover{ transform:translateY(-2px); border-color:var(--water); color:var(--ink); }
.channels button svg{ width:16px; height:16px; flex:none; }
.channels button[aria-pressed="true"]{
  background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:600;
}
.prepay-msg{ font-size:14px; color:var(--ink-2); margin:12px 0 0; min-height:20px; }
.prepay-msg.ok{ color:var(--water); }
.prepay-msg.err{ color:var(--warm); }

/* ============================================================
   12. ДВИЖЕНИЕ
   Всё выключается, если в системе включено «уменьшить движение».
   ============================================================ */

/* Появление главного экрана при загрузке */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.hero .eyebrow     { animation:rise .6s .00s both; }
.hero h1           { animation:rise .6s .08s both; }
.hero .lede        { animation:rise .6s .16s both; }
.hero-actions      { animation:rise .6s .24s both; }
.facts             { animation:rise .6s .32s both; }

/* Появление секций при прокрутке.
   Класс вешает скрипт — значит, без JS страница просто видна целиком. */
.js-reveal{ opacity:0; transform:translateY(20px); }
.js-reveal.shown{
  opacity:1; transform:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1);
}

/* Фото зала чуть наезжает при наведении на карточку */
.hall-photo{ transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.hall:hover .hall-photo{ transform:scale(1.045); }

/* Карточка зала и плашка акции приподнимаются */
.hall, .promo{ transition:transform .22s cubic-bezier(.34,1.2,.64,1), border-color .22s; }
.hall:hover, .promo:hover{ transform:translateY(-4px); }

/* Подчёркивание в меню выезжает слева направо */
.nav a{ position:relative; transition:color .15s; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after{ transform:scaleX(1); }

/* Плитки выбора зала в калькуляторе */
.choice label{ transition:transform .18s cubic-bezier(.34,1.2,.64,1), border-color .18s, background .18s; }
.choice label:hover{ transform:translateY(-2px); }

/* Фото выбранной комнаты в чеке */
.room-photo{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius); margin-bottom:18px;
  transition:opacity .3s ease;
}
.room-photo.fading{ opacity:0; }

/* Итоговая сумма коротко подсвечивается при пересчёте */
@keyframes pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
.total b.bump{ animation:pulse .4s ease; display:inline-block; }

@media (prefers-reduced-motion: reduce){
  .hero .eyebrow, .hero h1, .hero .lede, .hero-actions, .facts{ animation:none; }
  .js-reveal, .js-reveal.shown{ opacity:1; transform:none; transition:none; }
  .hall:hover, .promo:hover, .btn:hover, .am:hover,
  .choice label:hover, .hall:hover .hall-photo{ transform:none; }
  .total b.bump{ animation:none; }
}