/* ═══════════════════════════════════════════════════════════════════
   ВИТРИНА В ФИРМЕННЫХ ЦВЕТАХ САЙТА (вариант на согласование, 10.09.2026)

   Палитра не подобрана «на глаз», а взята из логотипа: буквы «ЗАБАВА»
   набраны синим, бирюзовым, оранжевым, золотым, мятным и розовым —
   те же шесть значений стоят в :root у zabava46.ru. Поэтому витрина
   и сайт красятся из ОДНОГО набора, а не «примерно похоже»: подкрасят
   сайт — станет видно, что расходится, а не «кажется, другой оттенок».

   Разметка и логика шагов не тронуты: имена классов те же, что
   в старом файле, и браузерные тесты ходят по ним же.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --blue:#2C4E94;    /* чернила: весь текст сайта набран синим, а не чёрным */
  --teal:#00A6B6;    /* выбрано, подтверждено, «входит в пакет» */
  --orange:#FF5B33;  /* действие: «Дальше», «Оплатить». Больше ничего */
  --gold:#FF9E18;    /* подсказка о выгоде */
  --mint:#55947F;
  --pink:#F2727E;    /* ошибка — намеренно не оранжевая: иначе беда
                        и главная кнопка на одном экране одного цвета */
  --bg:#F8FAFC; --card:#FFFFFF; --line:#E2E8F0; --muted:#5B6C7E;
  --r-lg:28px; --r:20px; --r-sm:14px;
  --shadow:0 10px 25px -5px rgba(44,78,148,.07), 0 8px 10px -6px rgba(44,78,148,.03);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--blue);
  font-size:16px; line-height:1.5;
  padding-bottom:124px; /* место под чек-бар */
}
/* Фирменный ореол под шапкой — та же пара цветов, что в градиенте
   первого экрана сайта, только выцветшая до фона. Картинок сайта
   (видеофон, bg3.png) здесь нет намеренно: витрина обязана открываться
   на плохой мобильной связи, а градиент не весит ничего. */
body::before{
  content:'';position:fixed;left:0;right:0;top:0;height:300px;z-index:-1;
  background:radial-gradient(130% 100% at 50% 0%,
    rgba(0,166,182,.16) 0%, rgba(44,78,148,.07) 45%, rgba(248,250,252,0) 78%);
}
.wrap{max-width:560px;margin:0 auto;padding:14px 16px 20px}

/* ── шапка: логотип сайта ──
   Клиент приходит сюда кнопкой с zabava46.ru, и первое, что он обязан
   увидеть, — что попал туда же, куда шёл. Логотип кликабельный: назад
   на сайт, а не в тупик. */
h1.brand{margin:0;text-align:center;line-height:0}
h1.brand a{display:inline-block}
h1.brand img{width:186px;height:auto;display:block}
.claim{
  font-family:'Shantell Sans',cursive;font-weight:600;font-size:19px;
  text-align:center;color:var(--blue);margin-top:12px;line-height:1.25;
}
h2{font-family:'Shantell Sans',cursive;font-weight:600;font-size:21px;margin:26px 0 12px;color:var(--blue)}
.sub{color:var(--muted);font-size:14px;margin-top:6px}

/* ── гирлянда-прогресс ──
   Пройденные флажки красятся по буквам логотипа: З — синяя, А —
   бирюзовая, Б — оранжевая, А — золотая, В — мятная, А — розовая.
   К последнему шагу над формой стоит слово «ЗАБАВА» из флажков.
   Текущий шаг всегда оранжевый и с тенью — иначе в разноцветном ряду
   его пришлось бы искать. */
.garland{display:flex;gap:4px;margin:20px 0 6px;position:relative}
.garland::before{content:'';position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line);z-index:0}
.flag{flex:1;min-width:0;position:relative;z-index:1;text-align:center}
.flag .pennant{
  width:26px;height:32px;margin:0 auto;
  clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);
  background:var(--line); transition:background .25s;
}
.flag:nth-child(1).done .pennant{background:var(--blue)}
.flag:nth-child(2).done .pennant{background:var(--teal)}
.flag:nth-child(3).done .pennant{background:var(--orange)}
.flag:nth-child(4).done .pennant{background:var(--gold)}
.flag:nth-child(5).done .pennant{background:var(--mint)}
.flag:nth-child(6).done .pennant{background:var(--pink)}
.flag:nth-child(7).done .pennant{background:var(--blue)}
.flag.active .pennant{background:var(--orange);box-shadow:0 5px 12px rgba(255,91,51,.4)}
/* ⚠️ 9px и отрицательный трекинг — не «мелко ради красоты». Шагов семь,
   и на телефоне 375 px флажку достаётся 45 px: при 9.5px «Праздник»
   не влезал и переносился как «Праздни/к», а «Контакты» — «Контакт/ы».
   Слово, разорванное посреди, читается как опечатка, а не как подпись. */
.flag small{display:block;font-size:9px;line-height:1.25;letter-spacing:-.15px;color:var(--muted);margin-top:6px;font-weight:700;overflow-wrap:anywhere}
.flag.active small{color:var(--orange)}

/* ── карточки-опции ──
   Белая карточка с тонкой рамкой и мягкой тенью — как карточки услуг
   и цен на сайте. Выбранная не просто обводится: рамка бирюзовая плюс
   бледная заливка. Одной рамки мало на солнце и на печати, а согласовывать
   этот макет собственник будет как раз с листа. */
.opts{display:grid;gap:12px}
.opt{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.opt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.opt.sel{border-color:var(--teal);background:#F3FBFC;box-shadow:0 10px 22px -8px rgba(0,166,182,.35)}
.opt.off{opacity:.5;cursor:not-allowed;box-shadow:none}
.opt .t{font-weight:800;font-size:16px;color:var(--blue)}
/* pre-line — не косметика: описание набирают в textarea справочников,
   и перенос строки там ставят осознанно. Без него абзац схлопывался бы
   в одну строку, а собственник видел бы на витрине не то, что написал. */
.opt .d{font-size:13.5px;color:var(--muted);margin-top:3px;white-space:pre-line}
/* УТП пакета (0031) — чем он лучше соседнего. Чернилами, а не серым:
   это ответ на вопрос «почему этот», а серая строка ниже — границы
   пакета, справка. Два серых абзаца подряд читались бы как один. */
.opt .u{font-size:14px;line-height:1.4;margin-top:6px;color:var(--blue)}
.opt .u + .d{margin-top:6px}
/* Цена оранжевая — ровно как на сайте в блоках «Цены» и «Доп. услуги».
   Человек, пришедший с прайса сайта, ищет глазами тот же цвет. */
.opt .p{font-weight:800;color:var(--orange);white-space:nowrap;font-size:16px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}

/* ── что входит в пакет ── */
.incl{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.incl li{position:relative;padding-left:30px;font-size:15px;line-height:1.4;font-weight:600}
.incl li::before{
  content:'✓';position:absolute;left:0;top:.05em;
  width:20px;height:20px;border-radius:50%;background:var(--teal);
  color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ── свёрнутый выбор программы ──
   Выбранное стоит строкой, остальное прячется за «Другое». Развёрнутая
   сетка из шести карточек отжимала гостей и цену за нижний край экрана,
   а выбирать программу человеку нужно один раз. */
.picked{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#F3FBFC;border:1.5px solid var(--teal);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);
}
.picked .t{font-weight:800;font-size:16px}
.picked .more{color:var(--orange);font-weight:800;white-space:nowrap;font-size:14.5px}
.picked .caret{display:inline-block;transition:transform .15s}
.picked.open .caret{transform:rotate(180deg)}
.picked:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.picked + .opts{margin-top:12px}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
input[type=date],input[type=text],input[type=tel],textarea{
  width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;font:inherit;font-weight:600;color:var(--blue);
}
textarea{resize:vertical;min-height:84px;line-height:1.4}
input:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,182,.16)}
label{font-size:12px;font-weight:800;letter-spacing:.4px;display:block;margin:18px 0 8px;color:var(--muted);text-transform:uppercase}

/* счётчики гостей: круглые кнопки — тот же приём, что у круглых иконок
   мессенджеров в шапке сайта */
.counter{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:11px 16px;justify-content:space-between;box-shadow:var(--shadow)}
.counter b{font-size:15px}
.cbtns{display:flex;gap:10px;align-items:center}
.cbtns button{
  width:40px;height:40px;border-radius:50%;background:var(--card);
  font-size:21px;font-weight:800;color:var(--teal);cursor:pointer;
  border:1.5px solid var(--line);line-height:1;transition:all .15s;
}
.cbtns button:hover{border-color:var(--teal);background:#F3FBFC}
.cbtns button:active{transform:scale(.94)}
.cbtns span{min-width:28px;text-align:center;font-weight:800;font-size:18px}

/* подсказка о выгоде — золотая, как «выгодно» на сайте */
.hint{
  background:#FFF7E8;border:1.5px solid var(--gold);border-radius:var(--r);
  padding:13px 15px;font-size:14px;margin-top:12px;line-height:1.45;
}
.hint b{color:#B26A00}
/* Предупреждение — не то же, что подсказка о выгоде: подсказка предлагает
   сэкономить, а это говорит «услугу ещё подтверждают». Одинаковый вид
   у них читался бы как ещё один совет, и клиент прошёл бы мимо. */
.hint.warn{background:#FFF1EC;border-color:var(--orange)}
.hint.warn b{color:#D63F16}

/* допуслуги (0046): строка с галочкой. Галочка нарисована, а не input —
   вся строка кликабельна, как карточка варианта рядом */
#addonsBox,#extBox{margin-top:26px}
#addonsBox[hidden],#extBox[hidden]{display:none}
.addons .opt{padding:13px 16px}
.addons .row{align-items:flex-start}
.addons .t{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.addons .box{flex:0 0 22px;height:22px;border:2px solid var(--line);border-radius:7px;
  background:#fff;position:relative;margin-top:-1px}
.addons .sel .box{background:var(--teal);border-color:var(--teal)}
.addons .sel .box::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.addons .d{margin-left:32px}

/* герои */
/* поиск и группы героев: фото костюмов публиковать нельзя, а 56 кружков
   с буквой без навигации — это девятнадцать рядов прокрутки */
input[type=search]{
  width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:13px 16px;font:inherit;font-weight:600;color:var(--blue);margin-top:14px;-webkit-appearance:none;
}
input[type=search]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,182,.16)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  padding:9px 16px;font:inherit;font-size:13.5px;font-weight:800;color:var(--muted);cursor:pointer;
  transition:all .15s;
}
.chip.on{border-color:var(--teal);background:var(--teal);color:#fff}
.chip:active{transform:scale(.97)}
.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 8px;text-align:center;cursor:pointer;position:relative;box-shadow:var(--shadow);transition:all .15s}
.hero .ava{
  width:56px;height:56px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Shantell Sans',cursive;font-size:22px;color:#fff;font-weight:700;
}
.hero .nm{font-size:12.5px;font-weight:800;line-height:1.2}
.hero .badge{
  position:absolute;top:-8px;right:-6px;background:var(--orange);color:#fff;
  width:25px;height:25px;border-radius:50%;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(255,91,51,.45);
}
.hero.sel{border-color:var(--teal);background:#F3FBFC}
.grouplbl{margin-top:20px;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.grouplbl span{text-transform:none;font-weight:700;color:var(--orange)}
.anyok{margin-top:14px}
.anyok label{display:flex;align-items:center;gap:10px;text-transform:none;font-size:14.5px;font-weight:600;color:var(--blue);cursor:pointer;margin:0;letter-spacing:0}
.anyok input{width:20px;height:20px;accent-color:var(--teal)}

/* ── чек-бар ──
   Скруглён сверху — зеркало шапки сайта, у которой скруглён низ
   (border-radius: 0 0 20px 20px). */
/* промокод (0039) */
.promo{margin-top:22px}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;min-width:0;text-transform:uppercase}
.promo-row button{flex:0 0 auto;padding:0 16px;border:2px solid var(--line);
  background:#fff;border-radius:12px;font:inherit;font-weight:700;cursor:pointer}
.promo-msg{margin-top:6px;font-size:13.5px;line-height:1.35;min-height:1px}
.promo-msg.ok{color:#0a7a4a}
.promo-msg.bad{color:#c62828}
.checkbar{
  position:fixed;bottom:0;left:0;right:0;background:var(--card);
  border-top:1.5px solid var(--line);box-shadow:0 -8px 28px rgba(44,78,148,.1);
  border-radius:24px 24px 0 0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));z-index:50;
}
.checkbar .in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px}
.checkbar .total{flex:1;min-width:0}
.total .lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.total .val{font-size:23px;font-weight:800;color:var(--blue);line-height:1.15}
.total .dep{font-size:12px;color:var(--teal);font-weight:800}
/* Кнопка-таблетка (radius 60px) и оранжевый — ровно .btn-accent сайта:
   такую же кнопку человек нажал, когда шёл сюда с zabava46.ru. */
.cta{
  background:var(--orange);color:#fff;border:none;border-radius:60px;
  font:inherit;font-weight:800;font-size:16px;padding:14px 26px;cursor:pointer;
  box-shadow:0 8px 18px -6px rgba(255,91,51,.55);
  transition:transform .1s, opacity .15s, box-shadow .15s;
}
.cta:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.cta:active{transform:scale(.97)}
/* «Назад» — вторичная: контур, без заливки. Оранжевая кнопка на экране
   ровно одна, иначе «главное действие» перестаёт быть главным. */
.cta-back{background:var(--card);color:var(--blue);border:1.5px solid var(--line);border-radius:60px;font:inherit;font-weight:800;font-size:15px;padding:13px 18px;cursor:pointer;transition:transform .1s;white-space:nowrap}
.cta-back:hover{border-color:var(--blue)}
.cta-back:active{transform:scale(.97)}

/* пол именинника */
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gbtn{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:14px 12px;font:inherit;font-weight:800;color:var(--blue);cursor:pointer;box-shadow:var(--shadow)}
.gbtn.sel{border-color:var(--teal);background:#F3FBFC;box-shadow:0 10px 22px -8px rgba(0,166,182,.35)}
.gbtn:active{transform:scale(.98)}
.agehint{margin-top:10px;font-weight:800;color:var(--teal);min-height:1px}

/* согласие с документами */
.consent{margin-top:24px;display:grid;gap:12px}
.consent label{display:flex;gap:10px;align-items:flex-start;text-transform:none;
  font-size:13.5px;font-weight:500;color:var(--blue);line-height:1.5;cursor:pointer;margin:0;letter-spacing:0}
.consent input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--teal)}
.consent a{color:var(--teal);font-weight:800}

/* Ошибка — розовая. Оранжевый на этом экране занят кнопкой, и «беда»
   с «нажми сюда» одного цвета читались бы как одно и то же. */
.err{background:#FDF1F2;border:1.5px solid var(--pink);border-radius:var(--r);padding:13px 15px;font-size:14px;margin-top:14px;font-weight:600;color:#B8434F}
.ok-screen{text-align:center;padding:36px 0}
.ok-screen .party{font-size:58px;line-height:1}
.ok-screen h1{font-family:'Shantell Sans',cursive;font-weight:700;font-size:27px;margin:14px 0 8px;color:var(--blue);line-height:1.2}
.ok-screen .sub{text-align:center}
.paylink{display:inline-block;margin-top:20px;background:var(--orange);color:#fff;text-decoration:none;font-weight:800;padding:15px 30px;border-radius:60px;box-shadow:0 8px 18px -6px rgba(255,91,51,.55)}
/* ── РЕЖИМ ОПЕРАТОРА (?op=1) ─────────────────────────────────────────
   Полоска нужна затем же, зачем в пульте написано имя вошедшего: с телефона
   администратора эта страница выглядит ровно как клиентская, и «я думал,
   это моя бронь» — ошибка, которая стоит чужого праздника. */
.opbar{
  position:sticky;top:0;z-index:50;background:var(--blue);color:#fff;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 12px 9px;
  display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;
  /* ⚠️ Полоска лежит ВНЕ .wrap, поэтому никаких отрицательных полей:
     первая редакция вытягивала её на padding обёртки (`margin:0 -16px`),
     и на 390 px заголовок уезжал за левый край — «ронь от оператора». */
  margin:0 0 14px;
}
/* ⚠️ Без этой строки `hidden` не прячет полоску: авторский display:flex
   перебивает display:none из стилей браузера, и «Бронь оператора» стояла
   на КЛИЕНТСКОЙ витрине (найдено скриншотом 13.09.2026). Та же порода,
   что `.tabbar button[hidden]` в /m/. */
.opbar[hidden]{display:none}
/* ⚠️ На телефоне полоска не помещалась (найдено 30.09.2026): «Бронь
   оператора», имя, «Инструкция» и «В приложение» — 440 px при экране 390,
   кнопка «В приложение» на 50 px за краем, и вся витрина ездила вбок.
   Сторож смотрел на рамку полоски, а вылезало СОДЕРЖИМОЕ. Теперь:
   «Инструкция» на узком экране — кружок «?», как значки инструкции везде,
   а если и так не влезает (360 px, длинное имя) — ссылки уходят на вторую
   строку вместе, а не за край. Имя не уже 64 px, чтобы не рассыпаться
   по буквам. Сторож — test_operator_bar_fits_the_narrow_screen. */
.opbar{flex-wrap:wrap;row-gap:7px}
.opbar .who{flex:1 1 64px;min-width:64px;opacity:.85;font-weight:600;overflow-wrap:anywhere}
.opbar .oplinks{display:flex;gap:9px;margin-left:auto}
.opbar .ophelp .sm{display:none}
@media (max-width:520px){
  .opbar .ophelp .lg{display:none}
  .opbar .ophelp .sm{display:inline}
}
.opbar a{color:#fff;text-decoration:none;font-weight:800;background:rgba(255,255,255,.16);
  padding:7px 11px;border-radius:9px;white-space:nowrap}
.opbar.bad{background:var(--pink)}
.opwarn{background:#FFF1F2;border:1.5px solid var(--pink);border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--blue)}
.opdone{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.opdone button{
  border:1.5px solid var(--line);background:var(--card);color:var(--blue);
  font:inherit;font-weight:800;padding:13px 18px;border-radius:60px;cursor:pointer;
  min-height:46px;
}
.opdone button.go{background:var(--teal);border-color:var(--teal);color:#fff}
/* ⚠️ Та же порода, что .opbar[hidden]: у ссылки оплаты свой display,
   и без этой строки `hidden` её не прячет — после «Принял задаток»
   оператор видел бы «Открыть оплату» у уже оплаченной брони.
   У самого .opdone display:flex — до 15.10.2026 (аудит) правила на него
   не было, и «Скопировать ссылку» с «Отправить клиенту» видел на экране
   «Праздник забронирован!» каждый клиент. */
.paylink[hidden],.opdone[hidden],.opdone button[hidden]{display:none}
/* Задаток принят в точке — рядом со ссылкой, но отдельной карточкой:
   это другое действие, и оно отменяет первое. */
.optaken{margin:22px auto 0;max-width:420px;text-align:left;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.optaken[hidden],.optaken-msg[hidden],.optaken-form[hidden]{display:none}
.optaken-h{font-weight:800;color:var(--blue);font-size:16px}
.optaken-sub{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.optaken-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.dpm{display:flex;flex-wrap:wrap;gap:6px}
/* ⚠️ Общий `label` витрины — подпись поля: заглавные, block и поля 18 px.
   Здесь label — это сам вариант, поэтому всё это сбрасываем явно. */
.dpm label{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);
  border-radius:60px;padding:8px 12px;font-weight:700;font-size:14px;cursor:pointer;
  margin:0;text-transform:none;letter-spacing:0;color:var(--blue)}
.dpm label:has(input:checked){border-color:var(--teal);color:var(--blue)}
.dpsum{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
  margin:0;text-transform:none;letter-spacing:0}
.dpsum input{width:110px;font:inherit;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px}
#opDpBtn{border:0;background:var(--teal);color:#fff;font:inherit;font-weight:800;
  padding:13px 18px;border-radius:60px;cursor:pointer;min-height:46px}
#opDpBtn:disabled{opacity:.6;cursor:default}
.optaken-msg{margin-top:10px;font-size:14px;font-weight:700;line-height:1.4}
.optaken-msg.ok{color:#0a7a4a}
.optaken-msg.bad{color:#c62828}
.timer{margin-top:16px;font-size:14px;color:var(--muted)}
.timer b{color:var(--orange)}
/* Подсказка «позвоните администратору» (собственник, 16.09.2026). Клиенту,
   не оператору; на экране «закрыто» её нет — там те же телефоны крупно. */
.help{margin-top:30px;padding:14px 16px;border:1.5px dashed var(--line);border-radius:var(--r);
  font-size:14px;line-height:1.5;color:var(--muted)}
.help[hidden]{display:none}
.help b{color:var(--blue)}
.help .phones{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.help a{font-weight:800;color:var(--teal);white-space:nowrap;text-decoration:none}
footer.legal{margin-top:36px;padding-top:18px;border-top:1.5px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.7;text-align:center}
footer.legal a{color:var(--muted);font-weight:700}

/* ── ОКНО ПРАВИЛ ПОСЕЩЕНИЯ (0036) ───────────────────────────────────────
   ⚠️ Показ — классом .on, а не el.hidden и не style.display='': у окна
   авторский display, и оба пути уже трижды давали «работает, но не видно». */
.rules-ovl{position:fixed;inset:0;background:rgba(20,33,61,.5);z-index:90;display:none}
.rules-ovl.on{display:block}
.rules{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:91;
  width:min(520px,calc(100% - 24px));max-height:calc(100% - 32px);overflow:auto;
  background:var(--card);border-radius:var(--r-lg);padding:22px 20px 18px;
  box-shadow:0 24px 60px rgba(20,33,61,.3);display:none}
.rules.on{display:block}
.rules h2{font-family:'Shantell Sans',cursive;font-size:22px;line-height:1.25;margin:0 0 12px}
.rules ul{list-style:none;display:grid;gap:9px;margin:0 0 10px}
.rules li{background:#F8FAFC;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;font-size:14.5px;line-height:1.45}
.rules li.strong{font-weight:800;border-color:var(--orange)}
.rules .full{font-size:13.5px;font-weight:800;color:var(--teal)}
.rules .note{font-size:13.5px;font-weight:700;color:#B8434F;margin:0 0 10px}
.rules .note:empty{display:none}
.rules label{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-size:14.5px;font-weight:700;color:var(--blue);margin:14px 0 14px;cursor:pointer}
.rules label input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--teal)}
/* Кнопки прилипают к низу окна: на телефоне пять пунктов выше экрана,
   и «Согласен и бронирую» уезжала за край — снято скриншотом на 390 px */
.rules .btns{display:flex;gap:9px;position:sticky;bottom:-18px;background:var(--card);
  padding:10px 0 18px;margin-bottom:-18px}
.rules .btns button{flex:1;border-radius:60px;font:inherit;font-weight:800;padding:13px 10px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--blue)}
.rules .btns button.go{background:var(--orange);border-color:var(--orange);color:#fff}
.rules .btns button.go:disabled{opacity:.35;cursor:not-allowed}
/* ── ОНЛАЙН-БРОНИРОВАНИЕ ЗАКРЫТО (0038) ── */
#closedMsg:empty{display:none}
.closed-spots{display:grid;gap:12px;margin-top:22px;text-align:left}
.closed-spots .spot{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px}
.closed-spots .spot.pick{border-color:var(--teal);background:#F3FBFC}
.closed-spots .t{font-weight:800;font-size:16px}
.closed-spots .d{font-size:13.5px;color:var(--muted);margin-top:3px}
.closed-spots a{display:block;text-align:center;margin-top:12px;background:var(--orange);color:#fff;
  text-decoration:none;font-weight:800;font-size:17px;padding:13px 18px;border-radius:60px;
  box-shadow:0 8px 18px -6px rgba(255,91,51,.55)}
.ok-screen .agree{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.ok-screen .agree a{color:var(--muted);font-weight:700}

.step{display:none}
.step.on{display:block}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.helpq{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font:700 11px/1 Manrope,system-ui,sans-serif;text-decoration:none;color:#8a93a8;vertical-align:middle;margin-left:6px;opacity:.85}
.helpq:hover{opacity:1;color:var(--blue)}
.opbar .ophelp{color:inherit;font-weight:700;white-space:nowrap}