/* ==========================================================================
   Окно онлайн-записи на ТЕЛЕФОНЕ и ПЛАНШЕТЕ — вид, перенесённый со стенда
   __bk-kontakty.html (решения владелицы 21–22.10.2026).

   Что здесь есть и чего здесь НЕТ.
   · Есть СТРУКТУРА стенда: поля шага «Контакты» собраны в карточку, подпись
     сидит в вырезе рамки, экран кода с конвертом и шестью ячейками, согласие
     двумя документами с галочкой, подвал карточкой визита над широкой
     кнопкой, две колонки на планшете, запас под клавиатуру.
   · НЕТ переопределения палитры. Оформление — ИСХОДНОЕ (решение владелицы
     22.10.2026): фирменный градиент, белые карточки, сиреневые акценты.
     Поэтому ни одного --paper/--ink/--grad здесь больше нет: окно берёт
     токены оболочки, как и вся остальная карточка салона.

   Границы правки:
   · только `@media (max-width:1023px)` там, где речь о раскладке —
     компьютер остаётся прежним;
   · только внутри `#bk` — витрина, прайс и карточка салона не трогаются;
   · оболочка не возится целиком: в salon.html добавлена одна строка <link>.
   ========================================================================== */

/* ===================== Шаг «Контакты»: поля карточкой ====================
   На проде подпись стояла СВЕРХУ заглавными серыми, а поля лежали прямо на
   полотне. На стенде иначе: поля собраны в белую карточку, подпись сидит в
   вырезе рамки. У экрана появляется центр, и кегль подписи перестаёт
   спорить с полем. */
@media (max-width:1023px){
  #bk[data-step="details"] .bk-fields{
    background:var(--surface); border:1px solid var(--line); border-radius:18px;
    padding:10px 14px 16px; box-shadow:var(--shadow-sm); gap:0 }
  #bk[data-step="details"] .bk-f{ position:relative; margin-top:16px }
  #bk[data-step="details"] .bk-f:first-child{ margin-top:8px }
  #bk[data-step="details"] .bk-f > label{
    position:absolute; top:-8px; left:12px; z-index:1; margin:0; padding:0 6px;
    background:var(--surface); font-size:12px; font-weight:600; color:var(--ink-soft);
    text-transform:none; letter-spacing:0 }
  #bk[data-step="details"] .bk-f .bk-in{ height:56px; padding:0 14px; font-size:16px;
    border-radius:var(--r) }
  #bk[data-step="details"] .bk-f textarea.bk-in{ height:auto; padding:14px }
  #bk[data-step="details"] .bk-phone .bk-in{ border-radius:0 var(--r) var(--r) 0 }
  #bk[data-step="details"] .bk-hint{ margin-top:7px }
  #bk[data-step="details"] .bk-err:empty{ display:none }
  #bk[data-step="details"] .bk-sub2{ font-size:14px; line-height:1.5 }
}

/* ===================== Форма прохождения: адрес → код → знакомство =======
   Разметка новая на всех ширинах, поэтому эти правила ВНЕ медиазапроса:
   порядок полей не может зависеть от ширины экрана. */
#bk .bk-sub2{color:var(--mute);font-size:14px;line-height:1.5;margin:0 0 18px;max-width:52ch}
#bk .bk-sub2 b{color:var(--ink-2)}
#bk .bk-fine2{font-size:12px;line-height:1.5;color:var(--faint);margin:12px 2px 0;max-width:52ch}

#bk .bk-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px;margin:16px 0}
#bk .bk-or:before,#bk .bk-or:after{content:"";height:1px;background:var(--hair);flex:1}
#bk .bk-goog{width:100%;max-width:420px;height:54px;border-radius:var(--r);
  border:1.5px solid var(--hair-2);background:var(--paper);color:var(--ink);font:inherit;
  font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
  gap:10px;cursor:pointer}
#bk .bk-goog:hover{box-shadow:var(--lift)}
#bk .bk-goog[disabled]{opacity:.55;cursor:default}

/* экран кода: конверт в кольце по центру */
#bk .bk-chead{text-align:center;display:flex;flex-direction:column;align-items:center;margin:6px 0 16px}
#bk .bk-mk{width:72px;height:72px;border-radius:50%;padding:1.5px;background:var(--grad);
  box-shadow:var(--glow);display:block}
#bk .bk-mk svg{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--paper);color:var(--brand);padding:19px;box-sizing:border-box}
#bk .bk-chead .b-h1{font-size:26px;letter-spacing:-.03em;margin:16px 0 0}
#bk .bk-csub{font-size:14px;color:var(--mute);margin:8px 0 0}
#bk .bk-caddr{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin:6px 0 0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bk .bk-caddr2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:-10px 0 18px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bk .bk-cttl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:10px 0 0}
#bk .bk-cspam{text-align:center;color:var(--mute);font-size:14px;line-height:1.5;margin:0 0 14px}
#bk .bk-otp{display:flex;gap:8px;max-width:420px}
#bk .bk-otp input{flex:1;min-width:0;height:60px;text-align:center;font:inherit;font-size:25px;
  font-weight:700;color:var(--ink);border:1.5px solid var(--hair-2);border-radius:13px;outline:0;
  background:var(--paper);caret-color:var(--brand);-webkit-appearance:none;appearance:none}
#bk .bk-otp input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,76,255,.14)}
#bk .bk-otp.bad input{border-color:var(--bad)}
#bk .bk-cerr{display:block;text-align:center;margin-top:10px}
#bk .bk-crow{display:flex;flex-direction:column;align-items:center;gap:12px;margin:18px 0 0}
#bk .bk-crow .bk-resend{background:0;border:0;color:var(--brand-ink);font:inherit;font-size:13.5px;
  font-weight:600;padding:8px 2px;cursor:pointer;text-decoration:none}
#bk .bk-thin{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border:1px solid var(--hair-2);border-radius:999px;background:transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2)}
#bk .bk-thin:hover{border-color:var(--brand);color:var(--brand-ink)}

/* согласие: два документа строками и одна галочка */
#bk .bk-docs{background:var(--paper);border:1px solid var(--hair);border-radius:18px;margin:16px 0 0;
  overflow:hidden;max-width:520px}
#bk .bk-docs.bad{border-color:var(--bad)}
#bk .bk-docs-h{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);padding:13px 15px 9px}
#bk .bk-doc{display:flex;align-items:center;gap:11px;padding:12px 15px;border-top:1px solid var(--hair);
  color:var(--ink);text-decoration:none;font-size:14.5px}
#bk .bk-doc .ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--sunken);
  color:var(--ink-2);display:grid;place-items:center}
#bk .bk-doc b{flex:1;font-weight:500}
#bk .bk-doc .ar{color:var(--faint);display:flex}
#bk .bk-take{display:flex;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid var(--hair);
  cursor:pointer;background:var(--canvas)}
#bk .bk-take input{position:absolute;opacity:0;width:0;height:0}
#bk .bk-take .bx{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--hair-2);
  background:var(--paper);display:grid;place-items:center}
#bk .bk-take .bx svg{opacity:0;color:#fff;transform:scale(.5);transition:.18s var(--ease)}
#bk .bk-take input:checked + .bx{background:var(--grad);border-color:transparent}
#bk .bk-take input:checked + .bx svg{opacity:1;transform:none}
#bk .bk-take b{font-size:14.5px;font-weight:600}
#bk .bk-docs:has(input:checked) .bk-take{background:var(--tint)}

/* ===================== Подвал как на стенде ==============================
   Было: одна строка — сводка слева, кнопка справа. Стало (только телефон и
   планшет): карточка визита с плиткой-значком СВЕРХУ, широкая кнопка снизу.
   Деньги в карточке показываем справа, а прежний .bk-money прячем — он нёс
   то же самое второй раз. */
/* ВНИМАНИЕ к именам. В живом окне подвал — `.b-foot`, сводка — `#bk-fs`
   (класс `b-fsum`), колонка — `#bk-side.b-side`. Классы `.bk-foot`, `.bk-fs`
   и `.bk-side` в оболочке ТОЖЕ есть, но в DOM их нет: это остатки прежней
   разметки, и правила по ним не срабатывают вовсе. Проверено на проде
   22.10.2026 запросом к живому DOM, а не по CSS оболочки. */
@media (max-width:1023px){
  /* Вескость: подвал показывает `#bk[data-step="book"] .b-foot{display:flex}`
     (оболочка, 3730) — это id+атрибут+класс, моё `#bk .b-foot` слабее, и
     display оставался flex. Повторяем ту же форму селектора, а не бьём
     !important: так правило остаётся предсказуемым. */
  /* Вескость равная (#bk + атрибут + класс), а мой файл подключён РАНЬШЕ
     инлайновых стилей оболочки — значит при равенстве побеждает оболочка.
     Поднять вескость нечем (id там уже есть), поэтому здесь !important —
     единственное место в файле, где он оправдан, и только на display. */
  #bk[data-step] .b-foot{ display:block !important }
  #bk .b-foot{ background:var(--surface);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)) }
  /* `.b-foot .q-btn{margin-left:auto}` (оболочка, 3786) прижимал кнопку
     вправо — в столбце это съедало ширину. */
  #bk .b-foot .q-btn{ margin-left:0 }
  #bk .b-foot #bk-fs{ display:flex; align-items:center; gap:11px; min-width:0;
    background:var(--surface-2); border-radius:var(--r); padding:10px 12px; margin-bottom:11px;
    font-size:13.5px }
  #bk .b-foot .bk-fsi{ flex:none; width:38px; height:38px; border-radius:11px;
    background:var(--surface); color:var(--brand); display:grid; place-items:center }
  #bk .b-foot .bk-fsx{ flex:1; min-width:0 }
  #bk .b-foot .bk-fsx b{ display:block; font-size:13.5px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis }
  #bk .b-foot .bk-fsx i{ display:block; font-style:normal; font-size:12px; color:var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  #bk .b-foot .bk-money{ flex:none; font-size:16px; font-weight:700; white-space:nowrap }
  /* Кнопка подвала зовётся `.q-btn` (проверено на живом DOM: дети .b-foot —
     b-back, b-fsum, q-btn). `.btn` оставлен на случай старой разметки. */
  #bk .b-foot .q-btn,#bk .b-foot .btn{ width:100%; height:54px; border-radius:var(--r);
    font-size:16px; flex:none }
  #bk .b-foot .b-back{ display:none }
  /* Клавиатура: класс bk-kb код ставит до сих пор, а правило оболочки целит
     в мёртвый `.bk-foot` — поэтому подвал с клавиатурой не прятался и
     накрывал ячейки кода. Перевешиваем на живое имя. */
  #bk.bk-kb .b-foot{ display:none }
}
@media (min-width:1024px){
  #bk .b-foot .bk-fsi,#bk .b-foot .bk-fsx{ display:none }
}

/* ===================== Шапка окна Ш1: полоса шага =======================
   На проде полосы НЕТ ни на одной ширине: оболочка глушит узел насмерть
   (`.bk-prog,.bk-mprog{display:none !important}` вне медиазапросов, по
   прежнему ТЗ). Возвращаем её вескостью id — оболочку целиком не возим.
   Сам узел лежит внутри прокручиваемой колонки, поэтому его переносит под
   шапку JS (salon-app.js · bkProg): иначе полоса уезжала бы вместе с
   содержимым. */
@media (max-width:1023px){
  #bk .bk-mprog{ display:block !important; flex:none; padding:0; border-bottom:0;
    background:var(--surface) }
  #bk .bk-mprog .t{ display:none }
  #bk .bk-mprog .b{ height:3px; border-radius:0; background:var(--line); overflow:hidden }
  #bk .bk-mprog .b i{ display:block; height:100%; background:var(--grad);
    border-radius:0 3px 3px 0; transition:width .32s var(--ease) }
}

/* ===================== Планшет: две колонки (Д1) =========================
   Оболочка складывает боковую сводку в верхнюю полосу уже с 920 px. На
   планшете ширины хватает: содержимое слева, сводка колонкой справа — ровно
   та анатомия, что на компьютере. */
@media (min-width:768px) and (max-width:1023px){
  #bk #bk-side{ display:flex; flex-direction:column; border-right:1px solid var(--line);
    border-bottom:0; padding:18px 0 24px; overflow:auto; max-height:none }
  #bk #bk-side .b-sumtog{ display:none }
  /* …но НЕ на подтверждении и «Готово»: там оболочка складывает сетку в одну
     колонку (3729), и поднятая сводка уезжает второй строкой за нижний край
     окна — невидимый блок в 450 px. На этих экранах визит рассказывает билет,
     сводка не нужна вовсе. Форма селектора с атрибутом — чтобы перебить своё
     же правило выше. */
  #bk[data-step="confirm"] #bk-side,#bk[data-step="done"] #bk-side{ display:none }
}
/* Телефон: на шаге «Контакты» сводка снизу не нужна — визит, время и цену
   держит подвал, а карточка с логотипом и рейтингом повторяла то же самое и
   отжимала форму вверх. */
@media (max-width:767px){
  #bk[data-step="details"] #bk-side{ display:none !important }
}

/* ===================== Клавиатура и шесть ячеек ==========================
   Клавиатура забирает половину экрана, подвал остаётся липким — и ряд
   ячеек оказывался ПОД подвалом: человек печатал вслепую. Лечится запасом
   снизу у прокрутки и сжатием шапки экрана на низких окнах. */
@media (max-width:1023px){
  /* Запас ТОЛЬКО на экране кода: там клавиатура поднимается и ряд ячеек
     должен иметь куда подняться. На экране адреса содержимое укладывается
     целиком, и лишний запас заставлял экран ездить вверх-вниз впустую. */
  #bk[data-phase="code"] #bk-scroll{ padding-bottom:168px }
}
@media (max-width:1023px) and (max-height:760px){
  #bk .bk-chead{ margin:2px 0 12px }
  #bk .bk-mk{ width:56px; height:56px }
  #bk .bk-mk svg{ padding:14px }
  #bk .bk-chead .b-h1{ font-size:22px; margin-top:12px }
  #bk .bk-csub{ margin-top:6px }
  #bk .bk-cttl{ margin-top:7px }
  #bk .bk-cspam{ font-size:13px; margin-bottom:10px }
  #bk .bk-otp input{ height:54px; font-size:22px }
}

/* ===================== Исход «ждёт подтверждения» =======================
   Билет выдаётся как обычно — меняется СОСТОЯНИЕ. Названо трижды: заголовком,
   плашкой над карточкой визита и строкой под ней. Янтарь, а не красный: это
   пауза, а не ошибка. Имя бизнеса стоит своим узлом (data-no-i18n) — внутрь
   переводимой фразы его класть нельзя, словарь сверяет текст узла точно. */
#bk .b-fin-who{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin:6px 0 0}
#bk .bk-pendbar{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:11px 13px;
  border-radius:var(--r);background:#FFF3DF;color:#8A5A00;font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
#bk .bk-pendbar svg{flex:none;width:17px;height:17px}
#bk .bk-pendnote{display:block;margin:12px 2px 0;font-size:12.5px;line-height:1.5;
  color:var(--ink-soft)}
#bk .bk-pendwarn{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:11px 13px;
  border-radius:var(--r);background:#FFF3DF;color:#7A5112;font-size:13px;line-height:1.45}


/* ═══════════════════════ билет визита ═══════════════════════════════
   Перенос со стенда __bk-kontakty.html (утверждено 22.10.2026). Правила
   живут здесь, а не в оболочке: оболочку целиком возить нельзя. Имена
   токенов у стенда и витрины совпадают (--paper, --canvas, --grad,
   --hair-2, --faint, --ink-2) — ни одного цвета не переопределяем.
   Дырки перфорации красим в --canvas: ровно такой фон у окна записи
   (.bk-card.b-shell = #F7F7FB), иначе на месте вырезов были бы пятна. */
#bk .bk-tkt{position:relative;overflow:hidden;border-radius:24px;background:var(--paper);
  box-shadow:0 18px 44px -26px rgba(24,20,60,.55);margin:0 0 16px}
#bk .bk-tkt .tk-top{padding:18px 18px 16px;position:relative;overflow:hidden;
  background:var(--grad);color:#fff}
#bk .bk-tkt .tk-hd{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:13px}
#bk .bk-tkt .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:5px 10px;
  background:rgba(255,255,255,.22);color:#fff;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#bk .bk-tkt .code{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;color:rgba(255,255,255,.72);white-space:nowrap;flex:none}
/* Плашка «Ждёт подтверждения» втрое длиннее «Визита», а номер записи рядом
   не ужимается — на узком телефоне ряд не помещался и плашку обрезало
   многоточием. Ряд переносится, номер прижат вправо: обрезать нечего. */
#bk .bk-tkt .tk-hd{flex-wrap:wrap}
#bk .bk-tkt .code{margin-left:auto}
#bk .bk-tkt.wait .pill{font-size:10.5px;letter-spacing:.05em;padding:5px 9px}
#bk .bk-tkt.wait .code{font-size:11px;letter-spacing:.04em}
#bk .bk-tkt h4{font-size:29px;letter-spacing:-.03em;margin:0;line-height:1.05;font-weight:700}
#bk .bk-tkt .dur{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:5px}
#bk .bk-tkt .deco{position:absolute;right:-26px;top:-34px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
#bk .bk-tkt .tk-rows{margin-top:17px;display:grid;gap:9px}
#bk .bk-tkt .tk-rows .r{display:flex;gap:9px;align-items:baseline}
/* Подписей у строк нет — порядок и кегль говорят сами. Разряды по классам,
   а не по nth-child: процедур в визите бывает несколько. */
#bk .bk-tkt .tk-rows .r > b{min-width:0;font-weight:600;line-height:1.3;color:#fff;
  font-variant-numeric:tabular-nums}
#bk .bk-tkt .tk-rows .r.svc > b{font-size:16.5px;letter-spacing:-.01em;display:block}
#bk .bk-tkt .tk-rows .r.svc small{display:block;font-size:12.5px;font-weight:500;
  opacity:.8;margin-top:3px;letter-spacing:0}
#bk .bk-tkt .tk-rows .r.who > b{font-size:14.5px;display:inline-flex;align-items:center;gap:9px}
#bk .bk-tkt .tk-rows .r.at > b{font-size:14px;font-weight:500;opacity:.86;display:block}
#bk .bk-tkt .tk-rows .r.at small{display:block;font-size:12.5px;font-weight:500;
  opacity:.78;margin-top:2px}
#bk .bk-tkt .tk-rows .av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:700;line-height:1;object-fit:cover;
  background:rgba(255,255,255,.2);color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
/* Строка состояния стоит ПЕРЕД перфорацией — в верхней половине, там, где
   визит, а не там, где деньги. Внутри градиента: на стенде она лежала ниже,
   на бумажной половине, и белым по белому её не было видно вовсе. */
#bk .bk-tkt .tk-wait{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:600;
  color:rgba(255,255,255,.92)}
#bk .bk-tkt .tk-wait svg{flex:none;width:17px;height:17px;opacity:.9}
#bk .bk-tkt .tk-wait span{opacity:.86}
#bk .bk-tkt .tk-wait b{font-weight:700}
#bk .bk-tkt .perf{position:relative;height:24px;background:var(--paper)}
#bk .bk-tkt .perf:before,#bk .bk-tkt .perf:after{content:"";position:absolute;top:50%;
  width:24px;height:24px;border-radius:50%;background:var(--canvas);transform:translateY(-50%)}
#bk .bk-tkt .perf:before{left:-12px}
#bk .bk-tkt .perf:after{right:-12px}
#bk .bk-tkt .perf span{position:absolute;left:16px;right:16px;top:50%;
  border-top:2px dashed var(--hair-2)}
#bk .bk-tkt .tk-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:4px 18px 18px;background:var(--paper)}
#bk .bk-tkt .tk-bot .lb{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);display:block}
#bk .bk-tkt .tk-bot .lb i{display:block;font-style:normal;font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-2);margin-top:4px}
#bk .bk-tkt .tk-bot .pr{font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* На билете карточка подвала лишняя — она пересказывает то, что человек уже
   видит крупно. Так же сделано на стенде (footHTML: на шагах ok и done
   карточки нет вовсе), иначе визит стоит на экране дважды. */
#bk[data-step="confirm"] .b-foot #bk-fs,
#bk[data-step="done"] .b-foot #bk-fs{ display:none }


/* ═══════════ ПОДАРОЧНАЯ КАРТА ПРИ ЗАПИСИ — «ПОЛЗУНОК» ═══════════════
   Перенос стенда `karta-podarunkowa-polzunok.html` (утверждён владелицей
   22.10.2026). Разметку отдаёт bkGcSliderHTML в salon-app.js; имена
   классов и правила переехали ДОСЛОВНО, расхождение в букву означало бы
   блок без вида. Все селекторы живут внутри #bk — короткие имена `gcd-*`
   иначе однажды совпадут с чем-нибудь на витрине.

   Прежняя тонированная оболочка блока на этом шаге гасится: у ползунка
   своя белая плита, и две плиты друг в друге читались рамкой. Класс
   вешает bkGcPaint — на :has() полагаться нельзя, Safari 15.4 его не знает
   (а рабочий браузер владелицы — Safari). */
#bk #bk-gc.gc-plain{ background:none; box-shadow:none; padding:0; border-radius:0 }
#bk #bk-gc.gc-plain::after{ display:none }
#bk #bk-gc.gc-plain #bk-gc-body:not(:empty){ padding:0 }
/* ===== Направление «Ползунок»: блок подарочной карты в окне записи =======
   Один корневой класс .gcd-slider, все селекторы под ним. Только токены
   витрины. Три кегля: 13 / 15 / 20 (на планшете число 22). Ни одного
   :has() — рабочий браузер владелицы Safari 15.4 его не знает. */

#bk .gcd-slider{
  display:block;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  margin:12px 0 0;
  padding:16px;
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  background:var(--paper);
  font-family:var(--font);
  font-size:15px;
  line-height:1.35;
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
#bk .gcd-slider *,
#bk .gcd-slider *::before,
#bk .gcd-slider *::after{ box-sizing:border-box; }
#bk .gcd-slider p{ margin:0; }
#bk .gcd-slider b{ font-weight:600; }

/* Подарок в углу — обычный узел, а не :has(). Сам он ничего не сообщает,
   поэтому скрыт от озвучки и не ловит касания. */
#bk .gcd-slider .gcd-wm{
  position:absolute;
  top:15px; right:15px;
  width:44px; height:44px;
  color:var(--tint-2);
  pointer-events:none;
}

/* --- шапка: факт приёма карты и её паспорт одной строкой --------------- */
#bk .gcd-slider .gcd-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
#bk .gcd-slider .gcd-seal{
  flex:0 0 auto;
  width:26px; height:26px;
  margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--ok-tint);
  color:var(--good);
}
#bk .gcd-slider .gcd-seal svg{ width:15px; height:15px; display:block; }
#bk .gcd-slider .gcd-headtx{ min-width:0; padding-right:52px; }
#bk .gcd-slider .gcd-ok{
  display:block;
  font-size:15px; font-weight:600;
  letter-spacing:-.01em;
}
#bk .gcd-slider .gcd-meta{
  margin-top:3px;
  font-size:13px;
  color:var(--mute);
}
#bk .gcd-slider .gcd-meta b{
  color:var(--ink-2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
#bk .gcd-slider .gcd-sep{ padding:0 2px; color:var(--hair-2); }

/* --- занято чужой записью --------------------------------------------- */
#bk .gcd-slider .gcd-held{
  display:flex; align-items:center; gap:8px;
  margin-top:12px;
  padding:9px 11px;
  border-radius:var(--r-sm);
  background:var(--sunken);
  font-size:13px;
  color:var(--mute);
}
#bk .gcd-slider .gcd-held svg{ flex:0 0 auto; width:14px; height:14px; color:var(--warning); }
#bk .gcd-slider .gcd-held b{
  color:var(--ink-2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* --- стенд ползунка ---------------------------------------------------- */
#bk .gcd-slider .gcd-split{ margin-top:14px; }
#bk .gcd-slider .gcd-legend{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:13px;
  color:var(--mute);
}
#bk .gcd-slider .gcd-legend b{
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
#bk .gcd-slider .gcd-loose{
  font-size:13px;
  color:var(--mute);
}

/* Полоса: 44 px на касание, видимая дорожка 14 px по центру. */
#bk .gcd-slider .gcd-bar{
  position:relative;
  height:44px;
  margin:4px 0 2px;
  padding:0 14px;
  touch-action:none;
  cursor:pointer;
  outline:none;
}
#bk .gcd-slider .gcd-rail,
#bk .gcd-slider .gcd-fill{
  position:absolute;
  top:50%;
  height:14px;
  margin-top:-7px;
  border-radius:7px;
}
#bk .gcd-slider .gcd-rail{ left:14px; right:14px; background:var(--sunken); }
/* Доля полосы считается одним числом --gcd-k (0…1): его ставит разметка,
   его же меняет протяжка. Без скрипта полоса стоит там, где её поставил
   сервер, — состояние живёт в разметке, а не в JS. */
#bk .gcd-slider .gcd-fill{
  left:14px;
  width:calc(var(--gcd-k, 0) * (100% - 28px));
  background:var(--brand);
  transition:background .14s linear;
}
/* Доля остатка, занятая чужой записью: до неё ползунок дойти не может. */
#bk .gcd-slider .gcd-thumb{
  position:absolute;
  top:50%;
  left:calc(14px + var(--gcd-k, 0) * (100% - 28px));
  width:28px; height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 2px var(--brand), 0 0 0 7px var(--tint);
  transition:box-shadow .14s linear;
}
#bk .gcd-slider .gcd-thumb::after{      /* насечка: за это тянут */
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:7px; height:11px;
  margin:-5.5px 0 0 -3.5px;
  background:repeating-linear-gradient(90deg,
    var(--brand) 0 2px, transparent 2px 5px);
}
#bk .gcd-slider .gcd-bar:focus-visible .gcd-thumb{
  box-shadow:0 0 0 2px var(--brand), 0 0 0 9px var(--tint-2);
}
#bk .gcd-slider .gcd-bar.is-drag .gcd-thumb{
  box-shadow:0 0 0 2px var(--brand), 0 0 0 10px var(--tint-2);
}

/* --- два числа: сколько с карты (ввод) и сколько на месте -------------- */
#bk .gcd-slider .gcd-figs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
#bk .gcd-slider .gcd-figs.is-one{ grid-template-columns:1fr; }
#bk .gcd-slider .gcd-fig{ min-width:0; }
#bk .gcd-slider .gcd-cap{
  display:block;
  font-size:13px;
  color:var(--mute);
}
#bk .gcd-slider .gcd-val{
  display:flex; align-items:baseline; gap:4px;
  white-space:nowrap;
  margin-top:2px;
  font-size:20px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
#bk .gcd-slider .gcd-in{
  width:auto;
  max-width:100%;
  min-width:0;
  padding:0 0 2px;
  line-height:1.2;
  border:0;
  border-bottom:1px dashed var(--hair-2);
  border-radius:0;
  background:transparent;
  font:inherit;
  color:inherit;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  text-align:left;
  -webkit-appearance:none;
  appearance:none;
}
#bk .gcd-slider .gcd-in:focus{
  outline:none;
  border-bottom-color:var(--brand);
}
#bk .gcd-slider .gcd-cur{
  flex:0 0 auto;
  font-size:15px;
  font-weight:600;
  color:var(--faint);
}
/* Правая колонка добирает те же 3 px, что у соседа ушли на подчёркивание
   поля: иначе два крупных числа стоят на разных базовых линиях. */
#bk .gcd-slider .gcd-fig--site .gcd-val{ color:var(--ink); padding-bottom:3px; }
#bk .gcd-slider .gcd-fig--site .gcd-val.is-zero{ color:var(--good); }
#bk .gcd-slider .gcd-rest{
  margin-top:10px;
  font-size:13px;
  color:var(--mute);
}
#bk .gcd-slider .gcd-rest b{
  color:var(--ink-2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
#bk .gcd-slider .gcd-err{
  display:none;
  margin-top:8px;
  font-size:13px;
  color:var(--accent);
}
#bk .gcd-slider.is-bad .gcd-err{ display:block; }
#bk .gcd-slider.is-bad .gcd-fill{ background:var(--accent); }
#bk .gcd-slider.is-bad .gcd-thumb{ box-shadow:0 0 0 2px var(--accent), 0 0 0 7px var(--tint); }
#bk .gcd-slider.is-bad .gcd-thumb::after{
  background:repeating-linear-gradient(90deg,
    var(--accent) 0 2px, transparent 2px 5px);
}
#bk .gcd-slider.is-bad .gcd-in{ border-bottom-color:var(--accent); }


/* --- карта на процедуру ------------------------------------------------ */
#bk .gcd-slider .gcd-svc{
  display:flex; align-items:center; gap:9px;
  margin-top:14px;
  padding:12px;
  border:1px solid var(--tint-2);
  border-radius:var(--r);
  background:var(--tint);
  font-size:15px;
  font-weight:600;
  color:var(--brand-ink);
}
#bk .gcd-slider .gcd-svc svg{ flex:0 0 auto; width:16px; height:16px; }
#bk .gcd-slider .gcd-note{
  margin-top:10px;
  font-size:13px;
  color:var(--mute);
}

/* --- действия ---------------------------------------------------------- */
#bk .gcd-slider .gcd-act{
  display:flex; align-items:stretch; gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--hair);
}
#bk .gcd-slider .gcd-go,
#bk .gcd-slider .gcd-alt{
  min-height:48px;
  border-radius:var(--r);
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
#bk .gcd-slider .gcd-go{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 16px;
  border:0;
  background:var(--brand);
  color:var(--paper);
}
#bk .gcd-slider .gcd-go:active{ background:var(--brand-ink); }
#bk .gcd-slider .gcd-alt{
  flex:0 0 auto;
  padding:0 16px;
  border:1px solid var(--hair-2);
  background:var(--paper);
  color:var(--ink-2);
}
#bk .gcd-slider .gcd-alt:active{ background:var(--sunken); }

/* Работа: отдельный знак, а не только смена подписи. */
#bk .gcd-slider .gcd-spin{
  flex:0 0 auto;
  width:16px; height:16px;
  border:2px solid var(--tint-2);
  border-top-color:var(--paper);
  border-radius:50%;
  animation:gcd-spin .7s linear infinite;
}
@keyframes gcd-spin{ to{ transform:rotate(360deg); } }

#bk .gcd-slider[data-busy] .gcd-go{
  background:var(--tint-2);
  color:var(--brand-ink);
  cursor:default;
}
#bk .gcd-slider[data-busy] .gcd-spin{
  border-color:var(--paper);
  border-top-color:var(--brand);
}
#bk .gcd-slider[data-busy] .gcd-alt{ color:var(--faint); cursor:default; }
#bk .gcd-slider[data-busy] .gcd-bar{ cursor:default; }
#bk .gcd-slider[data-busy] .gcd-fill{ background:var(--hair-2); }
#bk .gcd-slider[data-busy] .gcd-thumb{ box-shadow:0 0 0 2px var(--hair-2), 0 0 0 7px var(--sunken); }
#bk .gcd-slider[data-busy] .gcd-thumb::after{
  background:repeating-linear-gradient(90deg,
    var(--hair-2) 0 2px, transparent 2px 5px);
}
#bk .gcd-slider[data-busy] .gcd-val{ color:var(--mute); }
#bk .gcd-slider[data-busy] .gcd-in{ border-bottom-style:solid; border-bottom-color:var(--hair); }

@media (prefers-reduced-motion:reduce){
  #bk .gcd-slider .gcd-spin{ animation-duration:2.4s; }
  #bk .gcd-slider .gcd-fill,
  #bk .gcd-slider .gcd-thumb{ transition:none; }
}

/* --- 320 px: число мельче, кнопки в столбик ---------------------------- */
@media (max-width:359px){
  #bk .gcd-slider{ padding:14px; }
  #bk .gcd-slider .gcd-val{ font-size:18px; }
  #bk .gcd-slider .gcd-figs{ gap:8px; }
  #bk .gcd-slider .gcd-act{ flex-wrap:wrap; }
  #bk .gcd-slider .gcd-go,
  #bk .gcd-slider .gcd-alt{ flex:1 1 100%; }
}

/* --- планшет 834 px: паспорт карты и числа дышат ---------------------- */
@media (min-width:720px){
  #bk .gcd-slider{ padding:20px 22px; }
  #bk .gcd-slider .gcd-wm{ top:19px; right:20px; width:50px; height:50px; }
  #bk .gcd-slider .gcd-headtx{ padding-right:62px; }
  #bk .gcd-slider .gcd-split{ margin-top:16px; }
  #bk .gcd-slider .gcd-figs{ gap:24px; margin-top:12px; }
  #bk .gcd-slider .gcd-val{ font-size:22px; }
  #bk .gcd-slider .gcd-act{ gap:10px; }
  #bk .gcd-slider .gcd-go{ flex:0 1 300px; }
}

/* ═══ ТИПОГРАФИКА: пересобрано 22.10.2026 ════════════════════════════
   Было: почти всё 13 px весом 600 — подписи, паспорт карты, остаток и
   ошибка одинаковой серой массой, а два главных числа одного кегля 22/600
   стояли близнецами, хотя левое правят, а правое читают.

   Стало четыре разряда, у каждого своя работа:
     11,5 px капителью  — подписи чисел (как «DO ZAPŁATY» на билете)
     12,5 px            — третий план: остаток после списания, заморозка
     13,5 px            — паспорт карты и контекст (цена визита)
     15 px              — текст и кнопки
     20 / 26 px         — два числа, и они НАРОЧНО разные
   Вес: подписи 600, числа 700-800. Цифры везде табличные.             */

/* шапка */
#bk .gcd-slider .gcd-ok{ font-size:15px; font-weight:700; letter-spacing:-.012em; color:var(--ink) }
#bk .gcd-slider .gcd-meta{ margin-top:2px; font-size:13.5px; font-weight:600; color:var(--mute) }
#bk .gcd-slider .gcd-meta b{ font-weight:700; color:var(--ink-2) }
/* Срок — своей строкой и тише: это паспорт карты, а не решение экрана. */
#bk .gcd-slider .gcd-till{
  margin-top:1px;
  font-size:12.5px; font-weight:600; color:var(--faint);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* контекст: цена визита над полосой */
#bk .gcd-slider .gcd-legend{ font-size:13.5px; font-weight:600 }
#bk .gcd-slider .gcd-legend b{ font-weight:700; color:var(--ink-2) }

/* подписи двух чисел — гравировка, как на билете */
#bk .gcd-slider .gcd-cap{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); line-height:1.3;
}

/* Два числа нарочно разного роста. Крупнее — то, что человек ПЛАТИТ:
   списание он правит, а доплату достаёт из кошелька, и именно её он
   ищет глазами. Левое число тише на разряд и подчёркнуто пунктиром —
   это поле, а не итог. */
#bk .gcd-slider .gcd-val{ margin-top:4px; font-size:20px; font-weight:700; color:var(--ink-2) }
#bk .gcd-slider .gcd-fig--site .gcd-val{ font-size:26px; font-weight:800; color:var(--ink) }
/* 16 px — НИЖНИЙ предел, а не вкус: при меньшем iOS Safari зумит страницу
   на фокусе, шторка записи уезжает, и человек печатает вслепую (тот же урок,
   что у поля кода). Здесь 20 px, и цифра обязана остаться видимой в коде —
   её сторожит scripts/test-giftcards.mjs. */
#bk .gcd-slider .gcd-in{ font-weight:700; font-size:20px }
@media (max-width:359px){ #bk .gcd-slider .gcd-in{ font-size:19px } }
/* На сенсорном экране оболочка загоняет ВСЕ поля в 16px силой
   (`salon.html`: @media(pointer:coarse){input,select,textarea{font-size:16px!important}}) —
   защита от зума iOS. Здесь она била по числу ползунка: в макете 20 px, на
   живом телефоне 16, и левое число становилось вдвое мельче правого.
   Перебиваем ТОЛЬКО это поле и только ВВЕРХ: 20 и 19 больше 16, значит
   смысл защиты цел, а вид — тот, что утверждён. */
@media (pointer:coarse){
  #bk .gcd-slider .gcd-in{ font-size:20px !important }
}
@media (pointer:coarse) and (max-width:359px){
  #bk .gcd-slider .gcd-in{ font-size:19px !important }
}
/* Паспорт карты обязан стоять ОДНОЙ строкой. На стенде полоса содержимого
   была 343 px и строка «Na karcie pozostało 120,50 zł» влезала впритык; в
   окне записи на проде она 339, и остатка хватило ровно на перенос перед
   суммой. Освобождаем 14 px: подарок в углу чуть меньше, отбивка под него
   точнее (он занимает 36+15−16 = 35 px внутри поля текста). */
@media (max-width:420px){
  #bk .gcd-slider .gcd-wm{ width:36px; height:36px }
  #bk .gcd-slider .gcd-headtx{ padding-right:38px }
}

/* третий план */
#bk .gcd-slider .gcd-rest{ font-size:12.5px; font-weight:600; color:var(--faint) }
#bk .gcd-slider .gcd-rest b{ font-weight:700; color:var(--ink-2) }
#bk .gcd-slider .gcd-held{ font-size:12.5px; font-weight:600 }
#bk .gcd-slider .gcd-loose{ font-size:13px; font-weight:600 }
#bk .gcd-slider .gcd-svc{ font-weight:600 }
#bk .gcd-slider .gcd-err{ font-size:12.5px; font-weight:700 }

/* кнопки: главное действие весомее запасного */
#bk .gcd-slider .gcd-go{ font-size:15px; font-weight:700; letter-spacing:-.012em }
#bk .gcd-slider .gcd-alt{ font-size:15px; font-weight:600; color:var(--ink-2) }

/* На узком экране крупное число ужимается, мелкие разряды — нет:
   ужимать подписи некуда, они и так на пределе читаемости. */
@media (max-width:359px){
  #bk .gcd-slider .gcd-fig--site .gcd-val{ font-size:23px }
  #bk .gcd-slider .gcd-val{ font-size:19px }
}


/* Подписи чисел капителью не живут: «ILE ODLICZYĆ Z KARTY, ZŁ» — 24 знака,
   и в колонке 137 px они ломались на две строки, причём обе колонки
   становились двухэтажными. Капитель оставляем билету, где подпись короткая
   («DO ZAPŁATY»), а здесь — обычный регистр на разряд мельче паспорта
   карты. Разряд между подписью и числом всё равно держится: 12,5 против 20
   и 26 px. */
#bk .gcd-slider .gcd-cap{
  font-size:12.5px; font-weight:650; letter-spacing:0; text-transform:none;
  color:var(--mute);
}
/* Числа стоят в своих колонках, поэтому подписи обязаны быть в одну строку:
   иначе левая и правая цифры съезжают по базовой линии друг от друга. */
#bk .gcd-slider .gcd-cap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Многоточие в подписи — хуже переноса: оно прячет слова. В окне записи
   колонка уже, чем была на стенде (оболочка добавляет 18 px у .b-wrap плюс
   16 у прокрутки, итого 307 против 343), и «Ile odliczyć z karty, zł» в
   половину такой колонки одной строкой не ложится. Поэтому до 430 px
   подписи переносятся, и ОБЕ колонки получают одинаковую высоту подписи —
   иначе числа встанут на разные базовые линии. */
@media (max-width:430px){
  #bk .gcd-slider .gcd-cap{ white-space:normal; text-overflow:clip; min-height:2.6em }
}


/* Два числа стоят в разных колонках и разного роста (20 и 26 px), поэтому
   сами по себе они встают на РАЗНЫЕ базовые линии — замерено 7 px расхождения,
   и ряд читается рваным. Колонки разбираем на общую сетку (`display:contents`),
   подписи кладём в первый ряд, числа во второй — тогда выключка по базовой
   линии работает внутри ряда, а не внутри колонки. */
#bk .gcd-slider .gcd-figs{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:10px;
  row-gap:0;
  align-items:baseline;
}
#bk .gcd-slider .gcd-figs.is-one{ grid-template-columns:1fr }
#bk .gcd-slider .gcd-fig{ display:contents }
#bk .gcd-slider .gcd-cap{ grid-row:1 }
#bk .gcd-slider .gcd-val{ grid-row:2; margin-top:4px }
/* Правой колонке больше не нужен подпор в 3 px: его ставили, чтобы догнать
   подчёркивание поля слева, а теперь ряд выравнивает сетка. */
#bk .gcd-slider .gcd-fig--site .gcd-val{ padding-bottom:0 }


/* ═══ БЕГУНОК ════════════════════════════════════════════════════════
   Было: белый кружок в двойном кольце, внутри насечка из двух полосок —
   ровно знак «пауза». На экране оплаты это читается как кнопка, а не как
   то, за что тянут.

   Стало: плотный брендовый кружок с белой обводкой — так выглядит ручка
   у системных ползунков iOS и Android, узнаётся без объяснений. Насечки
   нет вовсе: подсказка «тяни» живёт в самой форме и в том, что полоса
   закрашена слева. Размер ручки 26 px, но попадать в неё не нужно —
   тянется вся полоса высотой 44 px (pointerdown на .gcd-bar), и это
   главное, чего требует палец. */
#bk .gcd-slider .gcd-thumb{
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  background:var(--brand);
  box-shadow:0 0 0 3px var(--paper), 0 2px 7px -1px rgba(91,76,255,.5);
}
#bk .gcd-slider .gcd-thumb::after{ content:none }
#bk .gcd-slider .gcd-bar:focus-visible .gcd-thumb{
  box-shadow:0 0 0 3px var(--paper), 0 0 0 6px var(--tint-2);
}
#bk .gcd-slider .gcd-bar.is-drag .gcd-thumb{
  box-shadow:0 0 0 3px var(--paper), 0 0 0 8px var(--tint-2);
}
/* Засечка потолка на полосе остаётся, но тише: это граница, а не орган. */
/* В ожидании ответа ручка гаснет вместе с заливкой. */
#bk .gcd-slider[data-busy] .gcd-thumb{
  background:var(--hair-2);
  box-shadow:0 0 0 3px var(--paper);
}


/* Своя страховка на случай широкой колонки: блок не шире 520 px в любом
   окружении. Ползунок длиной в полэкрана не точнее — он только дальше
   уводит палец от числа, которое он меняет. */
#bk .gcd-slider{ max-width:520px }


/* ═══════════ ПЛАНШЕТ: ЭКРАН ПОДТВЕРЖДЕНИЯ — КОЛОНКА ════════════════
   Телефон и планшет, компьютер (от 1024) остаётся прежним — так решила
   владелица. На 834 px содержимое растягивалось во всю ширину: билет 802,
   полоса ползунка 756, а «Ile odliczyć» и «Do zapłaty» разъезжались на
   373 px друг от друга.

   Держим ПОЛЯМИ прокрутки, а не max-width у детей: у заголовков окна свои
   строки margin, и они перебивают margin-left:auto — заголовок оставался у
   левого края, пока остальное стояло по центру (поймано на стенде).
   Верх и низ полей не трогаем: их задают правила окна выше. */
@media (min-width:680px) and (max-width:1023px){
  #bk[data-step="confirm"] #bk-scroll,
  #bk[data-step="done"] #bk-scroll{
    padding-left:calc((100% - 520px) / 2);
    padding-right:calc((100% - 520px) / 2);
  }
}