/* booking.css — заявка на аудит ИИ: квиз в ПОПАПЕ (кнопки data-quiz в любом месте сайта)
   и тот же квиз встроенно на странице /audit. Слотов/выбора времени больше нет (05.09).
   Токены берутся из feed.css — своих :root тут нет, монохром редизайна.
   Отступы — только шкала --sp-* (SPACING-STANDARD §1). */

.bk{ max-width:720px; }
.bk .stack > * + *{ margin-top:var(--sp-6); }

/* ── ШАГИ ── */
.bk-steps{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.bk-steps i{ font-style:normal; min-width:26px; height:26px; padding:0 7px; border-radius:8px; display:grid;
  place-items:center; font-size:12px; font-variant-numeric:tabular-nums; border:1px solid var(--line);
  color:var(--muted); transition:border-color .16s var(--ease), color .16s var(--ease); }
.bk-steps i.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:650; }
.bk-steps i.done{ border-color:var(--line-2); color:var(--ink-2); }
.bk-steps b{ font-size:12.5px; font-weight:500; color:var(--muted); margin-left:var(--sp-2); }

/* ── КАРТОЧКА ЭКРАНА ── */
.bk-card{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:var(--sp-6); }
.bk-card[hidden]{ display:none; }
.bk-q{ font-size:22px; line-height:1.25; font-weight:640; letter-spacing:-.022em; margin:0 0 var(--sp-5);
  text-wrap:balance; }
.bk-hint{ font-size:13.5px; color:var(--muted); margin:0 0 var(--sp-4); }

/* ── ВАРИАНТЫ ОТВЕТА: крупные цели для пальца, один тап ── */
.bk-opts{ display:flex; flex-direction:column; gap:var(--sp-2); }
.bk-opt{ display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:12px;
  padding:14px 16px; font:inherit; font-size:15px; transition:border-color .16s var(--ease), background .16s var(--ease); }
.bk-opt:hover{ border-color:var(--ink); }
.bk-opt.on{ border-color:var(--ink); background:var(--surface-2); font-weight:550; }
.bk-opt .bk-tick{ margin-left:auto; opacity:0; font-size:13px; color:var(--ink); }
.bk-opt.on .bk-tick{ opacity:1; }

/* ── ФОРМА КОНТАКТОВ ── */
.bk-form{ display:flex; flex-direction:column; gap:var(--sp-4); }
.bk-field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.bk-field input, .bk-field textarea{ width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; }
.bk-field textarea{ min-height:84px; resize:vertical; }
.bk-field input:focus, .bk-field textarea:focus{ outline:none; border-color:var(--ink); }
.bk-two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }


/* ── КНОПКИ И СЛУЖЕБНОЕ ── */
.bk-actions{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); flex-wrap:wrap; }
.bk-btn{ cursor:pointer; font:inherit; font-size:15px; font-weight:550; border-radius:999px; padding:12px 24px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper); transition:opacity .16s var(--ease); }
.bk-btn:hover{ opacity:.88; }
.bk-btn[disabled]{ opacity:.45; cursor:default; }
.bk-back{ cursor:pointer; font:inherit; font-size:14px; color:var(--muted); background:none; border:none; padding:0; }
.bk-back:hover{ color:var(--ink); }
.bk-note{ font-size:12.5px; color:var(--muted); }
.bk-err{ font-size:14px; color:var(--ink); border:1px solid var(--line-2); border-left:3px solid var(--ink);
  border-radius:8px; padding:11px 14px; background:var(--surface-2); }
.bk-err[hidden]{ display:none; }

/* ── ЭКРАН УСПЕХА ── */
.bk-done{ text-align:center; padding:var(--sp-7) var(--sp-5); }
.bk-done .bk-mark{ font-size:34px; line-height:1; margin-bottom:var(--sp-4); }
.bk-done h2{ font-size:24px; font-weight:640; letter-spacing:-.022em; margin:0 0 var(--sp-3); }
.bk-done p{ font-size:15px; color:var(--muted); margin:0 auto var(--sp-4); max-width:44ch; line-height:1.55; }

/* ── КНОПКА-ВЫЗОВ (например под hero главной) ── */
/* Обёртка для кнопки квиза в любом месте страницы. С 06.09.2026 на главной её нет
   (владелец убрал призыв из хиро) — правила оставлены, кнопка возвращается одной строкой. */
.hero-cta{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin:var(--sp-6) 0 var(--sp-5); }
.hero-cta .btn{ cursor:pointer; font:inherit; font-size:15px; font-weight:550; border-radius:999px;
  padding:13px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:opacity .16s var(--ease); }
.hero-cta .btn:hover{ opacity:.88; }
.hero-cta-note{ font-size:13.5px; color:var(--muted); }
@media (max-width:620px){
  .hero-cta{ gap:var(--sp-3); margin:var(--sp-5) 0 var(--sp-4); }
  .hero-cta .btn{ width:100%; }
}

/* ══════════════ ПОПАП ══════════════
   Разметку окна создаёт booking.js при первом открытии — в вёрстке страниц её нет,
   поэтому кнопку data-quiz можно поставить куда угодно, ничего больше не подключая. */
.bk-overlay{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--sp-4);
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px); overflow-y:auto; }
.bk-overlay[hidden]{ display:none; }
/* Блокируем прокрутку фона, пока окно открыто */
html.bk-locked{ overflow:hidden; }

.bk-modal{ position:relative; width:100%; max-width:560px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:16px; padding:var(--sp-6); box-shadow:0 24px 60px rgba(0,0,0,.28);
  animation:bk-pop .18s var(--ease) both; }
@keyframes bk-pop{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .bk-modal{ animation:none; } }

.bk-close{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--muted); font:inherit; font-size:14px;
  display:grid; place-items:center; }
.bk-close:hover{ color:var(--ink); border-color:var(--ink); }

/* В окне карточка уже обрамлена самим окном — второй рамки не нужно */
.bk-in-modal{ max-width:none; }
.bk-in-modal .bk-card{ border:none; background:transparent; padding:0; }
.bk-in-modal .bk-steps{ margin-bottom:var(--sp-4); padding-right:40px; } /* не заезжать под крестик */
.bk-in-modal .bk-done{ padding:var(--sp-5) 0; }

@media (max-width:620px){
  .bk-overlay{ padding:0; place-items:stretch; }
  .bk-modal{ max-width:none; min-height:100%; border:none; border-radius:0; padding:var(--sp-6) var(--sp-4); }
}

/* ── СНОСКА ПОД ВИДЖЕТОМ ── */
.bk-alt{ border-top:1px solid var(--line); margin-top:var(--sp-7); padding-top:var(--sp-5);
  font-size:14px; color:var(--muted); }
.bk-alt a{ color:var(--ink); border-bottom:1px solid var(--line-2); }
.bk-alt a:hover{ border-bottom-color:var(--ink); }

@media (max-width:620px){
  .bk-card{ padding:var(--sp-5) var(--sp-4); }
  .bk-q{ font-size:19px; }
  .bk-two{ grid-template-columns:1fr; }
}