/* =====================================================================
   BOOKING.CSS — Club Liberty · страница «Бронирование» (booking)
   Только стили этой страницы: шапка страницы, раскладка брони, выбор зон,
   карточка-форма, экран успеха, инфоблок, мобильная панель брони и брейкпоинты.
   Подключается ПОСЛЕ base.css.
   ===================================================================== */


/* ==== BLOCK: PAGE HEAD — start ====
   Заголовочная зона страницы: крошки, заголовок, описание и бейджи. */
.phead{position:relative; padding:56px 0 40px; overflow:hidden;
  border-bottom:1px solid var(--line-2)}
.phead::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 90% 0%, rgba(226,59,46,.22), transparent 55%),
    radial-gradient(60% 100% at 0% 100%, rgba(230,169,72,.14), transparent 55%)}
.phead .wrap{position:relative; z-index:2}
.crumbs{font-size:13px; color:var(--muted-2); margin-bottom:18px; font-family:var(--disp);
  letter-spacing:.1em; text-transform:uppercase}
.crumbs a:hover{color:var(--ink)}
.crumbs a{position:relative; z-index:3; color:var(--gold); transition:.15s}  /* crumbs-clickable */
.phead h1{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(38px,6vw,76px); line-height:.92; letter-spacing:.01em}
.phead p{margin-top:16px; color:var(--muted); max-width:54ch; font-size:17px}
.badges{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--muted)}
.badge b{color:var(--ink); font-weight:600}
.badge .d{width:7px; height:7px; border-radius:50%; background:var(--gold)}
/* ==== BLOCK: PAGE HEAD — end ==== */


/* ==== BLOCK: LAYOUT — start ====
   Двухколоночная раскладка: контент брони слева, липкая форма справа. */
.book{display:grid; grid-template-columns:1fr 440px; gap:40px; padding-top:56px; padding-bottom:90px;
  align-items:start}
.stepnum{font-family:var(--disp); color:var(--red); font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px}
.stepnum span{display:inline-flex; width:26px; height:26px; border:1px solid var(--red);
  border-radius:50%; align-items:center; justify-content:center; font-size:13px}
.block{margin-bottom:46px}
.block > h2{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(26px,3vw,38px); line-height:1; margin-bottom:6px}
.block > .hint{color:var(--muted); font-size:15px; margin-bottom:22px}
/* ==== BLOCK: LAYOUT — end ==== */


/* ==== BLOCK: ZONES — start ====
   Карточки залов с выбором (.sel), галочкой и планом-схемой. */
.zones{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.zone{position:relative; border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
  cursor:pointer; transition:.18s ease; background:var(--bg-2); text-align:left}
.zone img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:.5s ease}
.zone:hover img{transform:scale(1.05)}
.zone-b{padding:16px 18px}
.zone-b h3{font-family:var(--disp); text-transform:uppercase; font-weight:600; font-size:22px;
  display:flex; align-items:center; justify-content:space-between}
.zone-b .cap{font-size:13px; color:var(--gold); font-family:var(--disp); letter-spacing:.08em}
.zone-b p{font-size:13.5px; color:var(--muted); margin-top:5px}
.zone .tick{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  background:var(--red); color:#fff; display:none; align-items:center; justify-content:center;
  font-size:15px; z-index:2}
.zone.sel{border-color:var(--red)}
.zone.sel .tick{display:flex}
.zone.sel::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--red);
  border-radius:12px; pointer-events:none}
.plan{margin-top:22px; border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
  background:var(--bg-2)}
.plan-h{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line-2)}
.plan-h span{font-family:var(--disp); text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--muted)}
.plan img{width:100%; background:#fff}
/* ==== BLOCK: ZONES — end ==== */


/* ==== BLOCK: FORM CARD — start ====
   Липкая карточка формы брони: чипы дат/времени, поля, степпер гостей, кнопка. */
.form-card{position:sticky; top:96px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:16px; padding:30px 28px}
.form-card h2{font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:26px;
  margin-bottom:4px}
.form-card .fsub{color:var(--muted); font-size:14px; margin-bottom:22px}
.field{margin-bottom:20px}
.field > label{display:block; font-family:var(--disp); text-transform:uppercase;
  letter-spacing:.14em; font-size:11.5px; color:var(--muted-2); margin-bottom:10px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--ink); cursor:pointer; font-family:var(--body); font-size:13.5px; transition:.15s; line-height:1.2}
.chip small{display:block; color:var(--muted-2); font-size:11px; margin-top:3px}
.chip:hover{border-color:rgba(255,255,255,.34)}
.chip.active{background:var(--red); border-color:var(--red); color:#fff}
.chip.active small{color:rgba(255,255,255,.8)}
/* Выходные (пт/сб) — золотой акцент как «премиальные» вечера. */
.chip--weekend{border-color:rgba(230,169,72,.55); background:rgba(230,169,72,.07)}
.chip--weekend small{color:var(--gold)}
.chip--weekend:hover{border-color:rgba(230,169,72,.8)}
/* Выбранный чип (в т.ч. выходной) — сплошной красный поверх акцента. */
.chip--weekend.active{background:var(--red); border-color:var(--red); color:#fff}
.chip--weekend.active small{color:rgba(255,255,255,.8)}
.slots-note{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.4}
.slots-note.closed{color:var(--red-2)}
.date-sublabel{font-size:12px; color:var(--muted-2); margin-bottom:9px}
.date-sublabel--cal{margin-top:16px}
.inp,.sel,.ta{width:100%; padding:14px 15px; background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:8px; color:var(--ink); font-family:var(--body); font-size:15px; transition:.15s}
.inp:focus,.sel:focus,.ta:focus{outline:none; border-color:var(--red)}
.ta{resize:vertical; min-height:74px}
.sel{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b3a499' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stepper{display:flex; align-items:center; width:fit-content; border:1px solid var(--line);
  border-radius:8px; overflow:hidden}
.stepper button{width:46px; height:46px; background:var(--bg-3); border:none; color:var(--ink);
  font-size:20px; cursor:pointer; transition:.15s}
.stepper button:hover{background:rgba(255,255,255,.08)}
.stepper .val{width:54px; text-align:center; font-family:var(--disp); font-size:20px; font-weight:600}
.form-card .btn{width:100%; justify-content:center; padding:17px; margin-top:4px}
.reassure{margin-top:14px; font-size:12.5px; color:var(--muted-2); text-align:center}
.form-alt{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); text-align:center;
  font-size:13px; color:var(--muted)}
.form-alt a{color:var(--gold); font-family:var(--disp); letter-spacing:.06em}
/* ==== BLOCK: FORM CARD — end ==== */


/* ==== BLOCK: SUCCESS — start ====
   Экран подтверждения брони со сводкой. */
.ok{text-align:center; padding:8px 0}
.ok .check{width:72px; height:72px; border-radius:50%; background:rgba(94,200,120,.14);
  border:1px solid rgba(94,200,120,.4); color:#74d68a; display:flex; align-items:center;
  justify-content:center; font-size:34px; margin:6px auto 18px}
.ok h2{margin-bottom:8px}
.ok p{color:var(--muted); font-size:15px}
.summary{background:var(--bg-3); border:1px solid var(--line-2); border-radius:10px;
  padding:16px 18px; text-align:left; margin:20px 0; font-size:14px}
.summary div{display:flex; justify-content:space-between; padding:5px 0}
.summary .k{color:var(--muted-2)}
/* ==== BLOCK: SUCCESS — end ==== */


/* ==== BLOCK: INFO STRIP — start ====
   Нижний инфоблок: адрес/график/правила в три колонки. */
.info{border-top:1px solid var(--line-2); padding:54px 0}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.info-grid h4{font-family:var(--disp); text-transform:uppercase; letter-spacing:.08em;
  font-size:16px; margin-bottom:12px}
.info-grid p{color:var(--muted); font-size:14.5px}
.hours{display:grid; grid-template-columns:auto auto; gap:3px 16px; font-size:14px; margin-top:4px}
.hours .day{color:var(--muted)} .hours .hl{color:var(--gold)}
.note{margin-top:14px; padding:14px 16px; background:rgba(226,59,46,.08);
  border:1px solid rgba(226,59,46,.22); border-radius:8px; font-size:13px; color:var(--muted)}
/* ==== BLOCK: INFO STRIP — end ==== */


/* ==== BLOCK: MOBILE BOOKING BAR — start ====
   Мобильная нижняя панель с мини-сводкой и кнопкой брони (специфична для booking;
   расширяет базовую .mbar из base.css). */
.mbar .summary-mini{flex:1; font-size:12px; color:var(--muted); line-height:1.3}
.mbar .summary-mini b{color:var(--ink); font-family:var(--disp); font-size:15px; display:block}
.mbar .btn{flex:none; padding:14px 22px}
/* ==== BLOCK: MOBILE BOOKING BAR — end ==== */


/* ==== BLOCK: RESPONSIVE (booking) — start ==== */
@media (max-width:980px){
  .book{grid-template-columns:1fr; gap:30px}
  .form-card{position:static; order:-1}
  .info-grid{grid-template-columns:1fr; gap:22px}
}
@media (max-width:760px){
  .nav{height:64px}
  .book{padding-top:34px; padding-bottom:90px}
  .zones{grid-template-columns:1fr 1fr; gap:12px}
}
@media (max-width:420px){ .zones{grid-template-columns:1fr} }
/* ==== BLOCK: RESPONSIVE (booking) — end ==== */