/* =====================================================================
   BASE.CSS — Club Liberty
   Общие стили для всех страниц: design-токены, сброс, типографика,
   кнопки, шапка, мобильное меню (drawer), подвал, нижняя моб. панель.
   Подключается на КАЖДОЙ странице первым, до постраничного CSS.
   Каждый блок помечен маркерами:  BLOCK: NAME — start / end
   ===================================================================== */


/* ==== BLOCK: DESIGN TOKENS — start ====
   Цветовая палитра, шрифты и базовые размеры проекта (CSS-переменные). */
:root{
  --bg:#0c0a09; --bg-2:#141110; --bg-3:#1c1714; --bg-card:#17120f;
  --ink:#f6efe8; --muted:#b3a499; --muted-2:#8a7c72;
  --red:#e23b2e; --red-2:#ff5238; --gold:#e6a948; --gold-soft:#f0c277;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --disp:'Oswald',sans-serif; --body:'Manrope',sans-serif;
  --maxw:1240px;
}
/* ==== BLOCK: DESIGN TOKENS — end ==== */


/* ==== BLOCK: RESET & BASE — start ====
   Обнуление отступов, базовые правила для body, ссылок и изображений. */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  /* Две строки подряд — это не опечатка. Старые браузеры не знают clip и
     возьмут hidden, новые перекроют его на clip. Разница принципиальная:
     hidden создаёт прокручиваемый контейнер и способен сломать position:sticky
     у потомков, clip просто обрезает. И запомнить: Safari (весь iPhone) НЕ
     подрезает страницу по body так, как это делает Chrome, — поэтому
     полагаться на эту строку как на единственную защиту от горизонтальной
     прокрутки нельзя, ширину надо чинить в самих блоках. */
  overflow-x:hidden;
  overflow-x:clip;
}
body.no-scroll{overflow:hidden}
a{color:inherit; text-decoration:none}
/* Длинное слово («информационно-телекоммуникационных») не должно распирать
   страницу вширь: переносим его, а не выпускаем за экран. */
h1,h2,h3,h4,p,li,dd,dt,figcaption,td,th{overflow-wrap:break-word}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* ==== BLOCK: RESET & BASE — end ==== */


/* ==== BLOCK: TYPOGRAPHY HELPERS — start ====
   Вспомогательные текстовые классы: надзаголовок, дисплейный заголовок, звезда. */
.eyebrow{font-family:var(--disp); text-transform:uppercase; letter-spacing:.28em;
  font-weight:600; font-size:13px; color:var(--gold)}
.display{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  line-height:.95; letter-spacing:.01em}
.star{color:var(--red)}
/* ==== BLOCK: TYPOGRAPHY HELPERS — end ==== */


/* ==== BLOCK: BUTTONS — start ====
   Базовая кнопка .btn и её модификаторы: ghost, gold, sm. */
.btn{
  font-family:var(--disp); text-transform:uppercase; letter-spacing:.14em;
  font-weight:600; font-size:14px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; padding:15px 26px;
  background:var(--red); color:#fff; border-radius:3px;
  transition:.18s ease; white-space:nowrap;
}
.btn:hover{background:var(--red-2); transform:translateY(-1px);
  box-shadow:0 10px 30px -8px rgba(226,59,46,.6)}
.btn--ghost{background:transparent; color:var(--ink);
  border:1px solid var(--line); box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3);
  box-shadow:none; transform:translateY(-1px)}
.btn--gold{background:var(--gold); color:#1a1206}
.btn--gold:hover{background:var(--gold-soft); box-shadow:0 10px 30px -8px rgba(230,169,72,.55)}
.btn--sm{padding:11px 18px; font-size:12.5px}
/* ==== BLOCK: BUTTONS — end ==== */


/* ==== BLOCK: HEADER — start ====
   Фиксированная шапка, логотип-бренд, навигация, телефон и бургер.
   .scrolled добавляется скриптом base.js при прокрутке (только там, где
   шапка position:fixed — например, главная). На внутренних страницах
   шапка sticky и фон задан сразу. */
header{position:fixed; inset:0 0 auto 0; z-index:60; transition:.3s ease;
  border-bottom:1px solid transparent}
header.scrolled{background:rgba(12,10,9,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2)}
header.is-sticky{position:sticky; top:0; background:rgba(12,10,9,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2)}
.nav{display:flex; align-items:center; gap:30px; height:74px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--disp);
  text-transform:uppercase; font-weight:700; font-size:22px; letter-spacing:.06em;
  flex:none; white-space:nowrap}
.brand .mark{width:30px; height:30px; flex:none}
.brand small{display:block; font-size:9px; letter-spacing:.34em; color:var(--muted-2);
  font-weight:500; margin-top:2px}
.nav-links{display:flex; gap:26px; margin-left:18px; flex-wrap:nowrap}
.nav-links a{font-family:var(--disp); text-transform:uppercase; letter-spacing:.13em;
  font-size:13.5px; font-weight:500; color:var(--muted); transition:.15s; white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-perk{position:relative; color:var(--gold)!important; font-weight:700!important;
  display:inline-flex; align-items:center; gap:6px}
.nav-perk::before{content:"\2605"; font-size:11px; color:var(--gold)}
.nav-perk::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.6}
.nav-perk:hover{color:var(--gold-soft)!important}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:18px}
.nav-phone{font-family:var(--disp); font-size:16px; letter-spacing:.04em; font-weight:600;
  white-space:nowrap}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:8px}
.burger span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
/* ==== BLOCK: HEADER — end ==== */


/* ==== BLOCK: MOBILE DRAWER — start ====
   Полноэкранное выезжающее меню для мобильных. Открывается toggleDrawer()
   из base.js добавлением класса .open. .mclose — кнопка закрытия. */
.drawer{position:fixed; inset:0; z-index:70; background:rgba(12,10,9,.97);
  backdrop-filter:blur(10px); display:none; flex-direction:column; padding:30px 24px}
.drawer.open{display:flex}
.drawer .dtop{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:40px}
.drawer a{font-family:var(--disp); text-transform:uppercase; font-size:30px;
  font-weight:600; padding:14px 0; border-bottom:1px solid var(--line-2); letter-spacing:.04em}
.drawer .dphone{margin-top:auto; font-family:var(--disp); font-size:22px}
.mclose{width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; font-size:18px; transition:.15s}
.mclose:hover{background:rgba(255,255,255,.08)}
/* ==== BLOCK: MOBILE DRAWER — end ==== */


/* ==== BLOCK: FOOTER — start ====
   Подвал: бренд, копирайт и круглые иконки соцсетей. */
footer{border-top:1px solid var(--line-2); padding:46px 0 40px; margin-top:30px}
.foot{display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap}
.foot small{color:var(--muted-2); font-size:13px}
.foot-soc{display:flex; gap:12px}
.foot-soc a{width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.15s; font-size:13px;
  font-family:var(--disp); letter-spacing:.05em}
.foot-soc a:hover{background:var(--red); border-color:var(--red)}
/* ==== BLOCK: FOOTER — end ==== */


/* ==== BLOCK: MOBILE STICKY BAR — start ====
   Нижняя липкая панель на мобильных: кнопка звонка + основная CTA.
   Видна только в мобильной раскладке (см. RESPONSIVE). */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(12,10,9,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); gap:12px; align-items:center}
.mbar .mb-call{flex:none; width:52px; height:52px; border-radius:10px;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.mbar .btn{flex:1; justify-content:center; padding:16px}
/* ==== BLOCK: MOBILE STICKY BAR — end ==== */


/* ==== BLOCK: RESPONSIVE (shared) — start ====
   Общие брейкпоинты для шапки, бургера и нижней панели.
   Логика шапки: пока хватает места — показываем полное меню; как только
   ссылки рискуют перенестись — сворачиваем в бургер (≤960px). Это
   предотвращает «разрыв» навигации по высоте на узких десктопах/планшетах.
   Постраничные брейкпоинты живут в соответствующих page-CSS. */
/* Шапка с 8 пунктами (сезонно — «Корпоративы», 24.10.2026) не помещалась в 1240 px
   контейнера: на 1024–1440 вылезала за экран ещё с v40. Порядок ужатия: телефон
   прячем (он есть в кнопке-звонке и в подвале), поджимаем отступы и разрядку,
   а ниже 1240 сворачиваем в бургер. */
@media (max-width:1800px){
  .nav{gap:22px}
  .nav-phone{display:none}
  .nav-links{gap:18px; margin-left:8px}
  .nav-links a{letter-spacing:.08em}
  .nav-right{gap:14px}
}
@media (max-width:1240px){
  .nav-links,.nav-phone{display:none}
  .burger{display:flex}
  .nav-right .btn--sm{display:none}
  .mbar{display:flex}
  footer{margin-bottom:78px}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  /* На узком экране длинная надпись («Выбрать зал и забронировать») в одну
     строку не помещается: разрешаем перенос и поджимаем боковые отступы,
     иначе кнопка вылезает за экран и на iPhone появляется горизонтальный сдвиг. */
  .btn{white-space:normal; text-align:center; padding-left:20px; padding-right:20px}
  .nav{height:64px}
  header .brand{font-size:19px}
  .mbar{display:flex}
  footer{margin-bottom:78px}
}
/* ==== BLOCK: RESPONSIVE (shared) — end ==== */

/* ==== BLOCK: CONSENT CHECKBOX (shared) — start ==== */
.consent{display:flex; align-items:flex-start; gap:10px; margin:16px 0 14px; cursor:pointer;
  font-size:13px; line-height:1.45; color:var(--muted)}
.consent input[type="checkbox"]{flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  accent-color:var(--red); cursor:pointer}
.consent a{color:var(--gold); text-decoration:underline; text-underline-offset:2px}
.consent a:hover{color:var(--ink)}
.consent.consent-error{color:var(--red-2)}
.consent.consent-error input[type="checkbox"]{outline:2px solid var(--red); outline-offset:2px}
/* Подсветка незаполненного поля (время, дата) */
.field-error{border-color:var(--red) !important; outline:1px solid var(--red)}
/* ==== BLOCK: CONSENT CHECKBOX (shared) — end ==== */

/* ==== BLOCK: LIGHTBOX (shared: меню + схема залов) — start ==== */
.dish-lightbox{position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,5,4,.9); backdrop-filter:blur(8px)}
.dish-lightbox.open{display:flex}
.dish-lightbox__fig{margin:0; max-width:min(1100px, 94vw); max-height:88vh; display:flex;
  flex-direction:column; align-items:center; gap:14px}
.dish-lightbox__img{max-width:100%; max-height:76vh; object-fit:contain}
.dish-lightbox__cap{font-family:var(--disp); text-transform:uppercase; letter-spacing:.08em;
  font-size:15px; color:var(--ink); text-align:center}
.dish-lightbox__close{position:absolute; top:18px; right:18px; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--line); background:rgba(12,10,9,.6);
  color:var(--ink); font-size:20px; cursor:pointer; transition:.15s}
.dish-lightbox__close:hover{background:var(--red); border-color:var(--red)}
/* Подпись под схемой залов */
.plan-note{margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.45}
/* ==== BLOCK: LIGHTBOX (shared) — end ==== */

/* ==== BLOCK: PLAN LIGHTBOX (zoom) — start ==== */
.plan-lb .dish-lightbox__fig{width:min(1100px,94vw); max-width:100%; gap:10px}
.plan-lb__scroll{width:100%; max-height:76vh; display:flex; align-items:center; justify-content:center}
.plan-lb .dish-lightbox__img{cursor:zoom-in; touch-action:manipulation}
.plan-lb.zoom .plan-lb__scroll{display:block; overflow:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom; overscroll-behavior:contain}
.plan-lb.zoom .dish-lightbox__img{max-width:none; max-height:none; width:min(1500px,280vw);
  display:block; cursor:zoom-out}
.plan-lb__hint{font-family:var(--disp); text-transform:uppercase; letter-spacing:.08em;
  font-size:12px; color:var(--muted)}
/* ==== BLOCK: PLAN LIGHTBOX (zoom) — end ==== */

/* Реквизиты организации в подвале */
.req{display:block; margin-top:8px; font-size:11.5px; line-height:1.6; color:var(--muted-2)}
.req a{color:var(--muted); text-decoration:none}
.req a:hover{color:var(--ink)}