/* ============================================================
   TFT.aero — «Предполётная подготовка»: визард брони и покупки.
   Слева шаги с маршрутным прогрессом, справа живой посадочный
   талон, который заполняется по мере ответов.
   ============================================================ */

.bk {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* Небо на этой странице закреплено, а закатная полоса стоит на одной и той же
   высоте экрана - значит любой текст, проезжая мимо неё, оказывается светлым по
   светлому (замер давал 2.45 при норме 4.5). Утемнять сам закат нельзя, он тут
   главный, поэтому колонка с формой получает собственную палубу: заголовки и
   подписи опираются на неё, а не на небо. */
.bk__flow {
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.4rem, 2.6vw, 2.1rem);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(9, 13, 28, 0.66) 0%, rgba(7, 11, 24, 0.58) 100%);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(3, 6, 16, 0.35);
}

/* ============ Прогресс: маршрут из вейпоинтов ============ */

.bk-route {
  list-style: none;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.2rem;
}
.bk-route li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(242, 240, 233, 0.5);
}
.bk-route li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: calc(-50% + 14px);
  right: calc(50% + 14px);
  border-top: 2px dashed rgba(242, 240, 233, 0.3);
}
.bk-route li:first-child::before { display: none; }
.bk-route i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(242, 240, 233, 0.45);
  background: transparent;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.bk-route li.is-done { color: rgba(96, 246, 170, 0.9); }
.bk-route li.is-done i {
  border-color: #35e08c;
  background: rgba(53, 224, 140, 0.9);
  box-shadow: 0 0 10px rgba(53, 224, 140, 0.5);
}
.bk-route li.is-done::before { border-color: rgba(53, 224, 140, 0.55); border-top-style: solid; }
.bk-route li.is-current { color: #ffd21f; }
.bk-route li.is-current i {
  border-color: #ffd21f;
  box-shadow: 0 0 0 4px rgba(255, 210, 31, 0.18);
  animation: bk-pulse 2.2s ease-in-out infinite;
}
@keyframes bk-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 210, 31, 0.16); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 210, 31, 0.06); }
}

/* ============ Шаги ============ */

.bk-step { border: 0; display: none; }
.bk-step.is-active { display: block; animation: bk-in 0.45s var(--ease-out); }
@keyframes bk-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.bk-step legend {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.bk-step__hint { color: var(--night-soft); font-size: 0.98rem; margin-bottom: 1.6rem; max-width: 52ch; }

/* Карточки-варианты */
.bk-opts { display: grid; gap: 0.9rem; }
.bk-opts--2 { grid-template-columns: 1fr 1fr; }
.bk-opts--3 { grid-template-columns: repeat(3, 1fr); }
.bk-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-out);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .bk-opt:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); }
}
.bk-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bk-opt__icon { font-size: 1.7rem; color: var(--accent); }
.bk-opt b { font-size: 1.08rem; font-weight: 750; letter-spacing: -0.01em; }
.bk-opt small { font-size: 0.88rem; color: var(--night-soft); line-height: 1.45; }
.bk-opt .bk-opt__price {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bk-opt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(247, 161, 92, 0.12);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px rgba(233, 133, 59, 0.15);
}
.bk-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.bk-opt__badge {
  position: absolute;
  top: -11px;
  right: 1rem;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}

/* Дата и слоты */
.bk-field { margin-bottom: 1.4rem; }
.bk-field label {
  display: block;
  font-weight: 650;
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
}
.bk-field input,
.bk-field textarea {
  width: 100%;
  font: inherit;
  color: var(--night-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-chip);
  padding: 0.85rem 1.1rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.bk-field input:focus-visible,
.bk-field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}
.bk-field input::placeholder,
.bk-field textarea::placeholder { color: rgba(242, 240, 233, 0.45); }
.bk-field__help { font-size: 0.85rem; color: var(--night-soft); margin-top: 0.4rem; }

/* ============ Поле даты + кастомный календарь ============ */

#bkDateField { position: relative; }

.bk-datefield {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font: inherit;
  text-align: left;
  color: var(--night-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-chip);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.bk-datefield:hover { background: rgba(255, 255, 255, 0.1); }
.bk-datefield:focus-visible { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.1); }
.bk-datefield[aria-expanded="true"] { border-color: var(--accent); }
.bk-datefield #bkDateText.is-empty { color: rgba(242, 240, 233, 0.45); }
.bk-datefield i { font-size: 1.25rem; color: var(--accent); flex-shrink: 0; }
.has-error .bk-datefield { border-color: #e2725b; }

.cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(320px, 100%);
  padding: 1rem;
  border-radius: 18px;
  background: rgba(16, 21, 50, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(6, 9, 26, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.cal.open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s;
}
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.cal__month {
  font-weight: 750;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.cal__nav {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--night-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.cal__nav:hover { background: rgba(255, 255, 255, 0.14); }
.cal__nav:disabled { opacity: 0.28; pointer-events: none; }
.cal__week,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal__week {
  margin-bottom: 4px;
}
.cal__week span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(242, 240, 233, 0.5);
  padding: 0.2rem 0;
}
.cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--night-text);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.cal__day--empty { pointer-events: none; }
.cal__day:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.cal__day:disabled { color: rgba(242, 240, 233, 0.22); cursor: default; }
.cal__day.is-today:not(.is-sel) { box-shadow: inset 0 0 0 1.5px rgba(255, 210, 31, 0.55); }
.cal__day.is-sel {
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}
.cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bk-field__error {
  display: none;
  font-size: 0.87rem;
  font-weight: 600;
  color: #ffb0a0;
  margin-top: 0.4rem;
}
.bk-field.has-error input { border-color: #e2725b; }
.bk-field.has-error .bk-field__error { display: block; }

.bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 0.6rem;
}
.bk-slot {
  position: relative;
  display: block;
  text-align: center;
  padding: 0.7rem 0.4rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.bk-slot input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .bk-slot:hover { background: rgba(255, 255, 255, 0.11); }
}
.bk-slot:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}
.bk-slot:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-slot.is-off { opacity: 0.32; pointer-events: none; }

/* Промокод */
.bk-promo { display: flex; gap: 0.6rem; }
.bk-promo input { flex: 1; text-transform: uppercase; letter-spacing: 0.06em; }
.bk-promo .btn { flex-shrink: 0; }
.bk-promo-ok {
  display: none;
  margin-top: 0.55rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: rgba(96, 246, 170, 0.95);
}
.bk-promo-ok.show { display: block; }

/* Навигация шагов */
.bk-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.bk-nav .btn--ghost { visibility: hidden; }
.bk-nav.can-back .btn--ghost { visibility: visible; }

/* Итог */
.bk-summary { list-style: none; display: flex; flex-direction: column; margin-bottom: 1.6rem; }
.bk-summary li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: 0.98rem;
}
.bk-summary span { color: var(--night-soft); }
.bk-summary b { font-weight: 700; text-align: right; }
.bk-summary button {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
  margin-left: 0.6rem;
}
.bk-send { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.bk-copy {
  border: 0;
  background: none;
  color: var(--night-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bk-copy:hover { color: var(--night-text); }
.bk-note { margin-top: 1.4rem; font-size: 0.88rem; color: var(--night-soft); max-width: 56ch; }

/* ============ Посадочный талон ============ */

.pass {
  /* Палитра бортового компьютера, затемнённая до читаемости на бумаге */
  --mcdu-green: #0b6e37;
  --mcdu-cyan: #0d5a7c;
  --mcdu-amber: #8f5406;
  --mcdu-magenta: #8b2a66;
  position: sticky;
  top: 100px;
  color: var(--ink);
  max-width: 480px;
}

/* Тень раньше висела на .pass, а он выше самого билета: под корешком
   оставался прямоугольник без тени и читался полупрозрачной коробкой.
   drop-shadow идёт по фактической форме, включая вырезы перфорации и
   зазор разрыва, поэтому после отрыва половины отбрасывают тень каждая
   свою. Заодно фильтр изолирует смешивание, и печать множится по бумаге,
   а не по небу за талоном. */
.pass__card {
  filter:
    drop-shadow(0 8px 16px rgba(6, 9, 26, 0.32))
    drop-shadow(0 26px 56px rgba(6, 9, 26, 0.42));
}

/* Половины талона. Перфорация раньше была одной маской на корне, но второй
   маской разрыв не добавить, поэтому вырезы разъехались по обращённым друг
   к другу краям: лист режет снизу, корешок сверху. */
.pass__sheet,
.pass__stub {
  position: relative;
  background: #f7f9fc;
  overflow: hidden;
}
.pass__sheet {
  border-radius: 20px 20px 0 0;
  -webkit-mask-image:
    radial-gradient(circle 11px at 0 100%, transparent 10px, #000 11px),
    radial-gradient(circle 11px at 100% 100%, transparent 10px, #000 11px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 11px at 0 100%, transparent 10px, #000 11px),
    radial-gradient(circle 11px at 100% 100%, transparent 10px, #000 11px);
  mask-composite: intersect;
}
.pass__stub {
  border-radius: 0 0 20px 20px;
  transform-origin: 18% 0;
  -webkit-mask-image:
    radial-gradient(circle 11px at 0 0, transparent 10px, #000 11px),
    radial-gradient(circle 11px at 100% 0, transparent 10px, #000 11px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 11px at 0 0, transparent 10px, #000 11px),
    radial-gradient(circle 11px at 100% 0, transparent 10px, #000 11px);
  mask-composite: intersect;
}
/* Тень листа на корешке. Обычной box-shadow не обойтись: маска её срежет,
   поэтому падающий свет рисуется градиентом внутри корешка. */
.pass__stub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  background: linear-gradient(180deg, rgba(6, 9, 26, 0.13), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out) 1.55s;
  z-index: 2;
}
.pass__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(90deg, #22294f, #3a3f6e);
  color: #f2f0e9;
}
.pass__brand { line-height: 0; }
.pass__brand img { display: block; width: auto; height: 24px; }
.pass__flight {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd21f;
}
.pass__body {
  padding: 1.4rem 1.5rem 1.2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.05rem 1rem;
}
.pass__cell--wide { grid-column: 1 / -1; }
.pass__label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(34, 41, 79, 0.72);
  margin-bottom: 0.2rem;
}
/* Строка значения ведёт себя как строка MCDU: моноширинный набор,
   палитра бортового компьютера и квадраты вместо пустоты. Цвета взяты
   с экрана, но затемнены под светлый талон: на бумаге чистый зелёный
   и янтарь экрана не читаются. */
.pass__value {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.005em;
  min-height: 1.45em;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pass__value--set { color: var(--mcdu-green); }   /* значение принято */
.pass__value--sys { color: var(--mcdu-cyan); }    /* подставила система */
.pass__value--box {                                /* поле ещё не заполнено */
  color: var(--mcdu-amber);
  letter-spacing: 0.12em;
  font-weight: 500;
}
/* Курсор набора: тот же мигающий блок, что в скретчпаде */
.pass__value.is-typing::after {
  content: "\25AE";
  margin-left: 0.06em;
  animation: mcdu-caret 0.52s steps(1, end) infinite;
}
@keyframes mcdu-caret { 50% { opacity: 0; } }
/* Принятая строка коротко подсвечивается, как при переносе из скретчпада */
.pass__value.is-fresh { animation: mcdu-accept 0.62s var(--ease-out); }
@keyframes mcdu-accept {
  from {
    background: rgba(11, 110, 55, 0.2);
    box-shadow: -0.5rem 0 0 rgba(11, 110, 55, 0.2), 0.5rem 0 0 rgba(11, 110, 55, 0.2);
  }
  to {
    background: transparent;
    box-shadow: -0.5rem 0 0 transparent, 0.5rem 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pass__value.is-typing::after,
  .pass__value.is-fresh { animation: none; }
}
.pass__tear {
  border-top: 2px dashed rgba(34, 41, 79, 0.25);
  margin: 0 1.1rem;
}
.pass__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.5rem 1.25rem;
}
.pass__price { text-align: right; }
.pass__price del {
  display: block;
  font-size: 0.85rem;
  color: rgba(34, 41, 79, 0.45);
  font-variant-numeric: tabular-nums;
}
.pass__price b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(34, 41, 79, 0.58);
  transition: color 0.3s ease;
}
/* Сумму считает система, поэтому зелёная - как вычисленное значение */
.pass__price b.is-set { color: var(--mcdu-green); }
/* Скидка - ограничение, а такие на экране идут пурпурным */
.pass__price small {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mcdu-magenta);
}
.pass__barcode {
  transition: opacity 0.24s var(--ease-out) 1.94s;
  width: 46%;
  height: 44px;
  background:
    repeating-linear-gradient(90deg,
      #22294f 0 2px, transparent 2px 5px,
      #22294f 5px 6px, transparent 6px 11px,
      #22294f 11px 14px, transparent 14px 17px,
      #22294f 17px 18px, transparent 18px 24px);
  opacity: 0.85;
}

/* Строка с галочкой: согласие с офертой и доставка устроены одинаково */
.bk-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--night-soft);
}
.bk-check input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.bk-check a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.bk-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#bkOfferField.has-error .bk-check { color: var(--night-text); }

/* Счётчик сертификатов. Скидку за объём считает админка по суммарному
   налёту, поэтому здесь только количество, без арифметики. */
.bk-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--radius-chip);
  background: var(--glass-dark);
}
.bk-count[hidden] { display: none; }
.bk-count__text label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.bk-count__hint { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--night-soft); max-width: 44ch; }
.bk-count__ctl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.bk-count__ctl button {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--glass-dark-border);
  border-radius: 50%;
  background: transparent;
  color: var(--night-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.bk-count__ctl button:hover:not(:disabled) { border-color: var(--accent); background: rgba(247, 161, 92, 0.12); }
.bk-count__ctl button:disabled { opacity: 0.35; cursor: default; }
.bk-count__ctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-count__ctl input {
  width: 3.2rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--night-text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}
.bk-count__ctl input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Адрес появляется только когда выбрали курьера */
#bkAddrWrap { margin-top: 1.5rem; }
#bkAddrWrap[hidden] { display: none; }

/* Пока расписание едет из админки, слоты не выдумываем */
.bk-slots__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.92rem;
  color: var(--night-soft);
}

/* Занято на выбранном борту: предлагаем соседний одной кнопкой */
.bk-slots__switch {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.2rem;
}

/* Тестовый режим виден и не даёт спутать проверку с настоящей оплатой */
.bk-test {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(247, 161, 92, 0.45);
  border-radius: var(--radius-chip);
  background: rgba(247, 161, 92, 0.1);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
}
.bk-test i { font-size: 1.1rem; flex-shrink: 0; }
.bk-test[hidden] { display: none; }

/* Класс .btn задаёт свой display, и атрибут hidden сам по себе кнопку не
   прячет: после выписки талона кнопка оплаты оставалась на экране. */
.bk-send .btn[hidden] { display: none; }

/* Заголовок шага получает фокус ради читалок с экрана, но он не
   интерактивен, и кольцо фокуса на нём только шумит */
.bk-step legend:focus,
.bk-step legend:focus-visible { outline: none; }

/* ============ Талон выписан ============ */
/* Один жест, расходящийся кругами наружу: знак, строка, предмет, печать,
   небо. Такты идут внахлёст, ни один не начинается на пустом месте.
   Хронометраж и обоснование - в DESIGN-success.md. */

/* --- такт 2: строка оплаты раскрывается, а не выпрыгивает --- */
.pass__paid {
  display: grid;
  grid-template-rows: 0fr;
  padding-inline: 1.5rem;
  transition: grid-template-rows 0.42s var(--ease-out), opacity 0.42s var(--ease-out);
  opacity: 0;
}
.pass__paid-in { overflow: hidden; min-height: 0; }
body.is-issued .pass__paid {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 1.2rem;
  transition-delay: 0.5s;
}

/* --- такт 3: отрыв --- */
body.is-issued .pass__sheet { animation: pass-lift 0.9s var(--ease-out) 1.2s both; }
@keyframes pass-lift {
  to { transform: translate3d(0, -2px, 0); }
}
/* Микрозадержка на 10%: бумага сначала натягивается и только потом рвётся */
body.is-issued .pass__stub { animation: pass-tear 1.1s var(--ease-out) 1.2s both; }
@keyframes pass-tear {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  10%  { transform: translate3d(0, -1px, 0) rotate(0deg); }
  100% { transform: translate3d(0, 7px, 0) rotate(1.3deg); }
}
body.is-issued .pass__stub::before { opacity: 1; }

/* --- такт 4: печать --- */
/* Штамп собран как настоящий кашет: слово, черта во всю ширину, строка
   с датой под ней. Обе строки выровнены по одному левому краю, поэтому
   блок не разъезжает от разной длины, как было при центрировании.
   Внешняя рамка сделана вторым слоем box-shadow, а не outline: у outline
   радиус скругления не совпадает с бордюром, и углы шли внахлёст. */
.pass__stamp {
  position: absolute;
  left: 6%;
  bottom: 11%;
  z-index: 3;
  display: grid;
  gap: 0.28rem;
  justify-items: stretch;
  padding: 0.5rem 0.8rem 0.42rem;
  border: 2px solid var(--mcdu-green);
  border-radius: 6px;
  box-shadow: 0 0 0 3px #f7f9fc, 0 0 0 4px var(--mcdu-green);
  color: var(--mcdu-green);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Штрихкод под печатью гасится почти в ноль: полосы резали буквы и
   съедали вторую строку штампа. Настоящая печать перебивает то, что
   под ней, а не соседствует с этим. */
.pass__stamp b {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
}
.pass__stamp em { font-size: 0.72rem; font-weight: 700; font-style: normal; letter-spacing: 0.12em; }
body.is-issued .pass__barcode { opacity: 0.12; }
body.is-issued .pass__stamp { animation: pass-stamp 0.32s var(--ease-out) 1.9s both; }
@keyframes pass-stamp {
  0%   { opacity: 0; transform: translateY(-7px); }
  70%  { opacity: 1; transform: translateY(1px); }
  /* Заканчиваем ровно на none: слой композитора снимается, и текст
     дорисовывается по пиксельной сетке, а не тянется растром */
  100% { opacity: 1; transform: none; }
}

/* --- такт 5: разрешение на взлёт --- */
.pass__clear {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  padding-top: 1.1rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
body.is-issued .pass__clear.is-live { opacity: 1; }
.pass__lights { display: flex; gap: 0.5rem; }
.pass__lights i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(247, 161, 92, 0.2);
}
body.is-issued .pass__clear.is-live .pass__lights i { animation: pass-runway 0.34s var(--ease-out) both; }
@keyframes pass-runway {
  0%   { background: rgba(247, 161, 92, 0.2); box-shadow: 0 0 0 rgba(247, 161, 92, 0); }
  30%  { background: #ffd21f; box-shadow: 0 0 10px 2px rgba(247, 161, 92, 0.6); }
  100% { background: rgba(247, 161, 92, 0.2); box-shadow: 0 0 0 rgba(247, 161, 92, 0); }
}
.pass__cleared {
  min-height: 1.2em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2fd07a;
  text-align: center;
}
.pass__cleared.is-typing::after {
  content: "\25AE";
  margin-left: 0.1em;
  animation: mcdu-caret 0.52s steps(1, end) infinite;
}

/* Номер рейса зеленеет: тот же смысл, что на бумаге, но среда светящаяся,
   поэтому берётся экранный зелёный, а не бумажный */
.pass__flight { transition: color 0.4s var(--ease-out); }
body.is-issued .pass__flight { color: #2fd07a; }

.pass__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  /* Играет только финал: строка написана, печать стоит, корешок отделён */
  body.is-issued .pass__sheet,
  body.is-issued .pass__stub,
  body.is-issued .pass__stamp,
  body.is-issued .pass__clear.is-live .pass__lights i { animation: none; }
  body.is-issued .pass__paid,
  body.is-issued .pass__clear,
  body.is-issued .pass__barcode,
  body.is-issued .pass__stub::before { transition: none; }
  body.is-issued .pass__stub { transform: translate3d(0, 7px, 0) rotate(1.3deg); }
  body.is-issued .pass__stamp { opacity: 1; transform: none; }
  .pass__cleared.is-typing::after { animation: none; }
}

/* ============ Второй акт: сцена очищается ============ */
/* Талон уезжает влево на своё место, форма исчезает, справа встаёт итог.
   Перелёт талона считается FLIP-ом: замеряем прямоугольник до и после
   перестроения сетки и проигрываем разницу. Так он едет ровно туда, где
   окажется, а не в вычисленную на глаз точку. */
body.is-issued .bk__flow { display: none; }
/* Шапка страницы уходит вместе с формой: «Успешная оплата» становится
   единственным заголовком экрана и берёт на себя роль h1 */
body.is-issued .pg-hero,
body.is-issued .crumbs { display: none; }
body.is-issued .pg-main { padding-top: clamp(7rem, 14vh, 10rem); }
/* Талон уходит в левую колонку по своей ширине, заголовку достаётся всё
   остальное. Обе стороны встают сразу: анимации идут одновременно. */
body.is-issued .bk { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }

.done {
  display: grid;
  align-content: start;
  gap: 1.15rem;
  padding-top: clamp(0.5rem, 3vh, 2rem);
}
.done[hidden] { display: none; }

.done__title {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--night-text);
}
.done__title:focus { outline: none; }
/* Строка выезжает из-под собственной кромки: крупно, плавно, один жест */
.done__line { display: block; overflow: hidden; }
/* Строка выходит из-под собственной кромки и одновременно наводится на
   резкость: расфокус в палитре движения разрешён, если он плавный. */
.done__line i {
  display: block;
  font-style: normal;
  transform: translateY(106%) scale(1.06);
  filter: blur(9px);
}
.done__line--ok { color: #2fd07a; }
body.is-issued .done__line i { animation: done-line 0.9s var(--ease-out) both; }
body.is-issued .done__line:nth-child(2) i { animation-delay: 0.12s; }
@keyframes done-line {
  to { transform: translateY(0) scale(1); filter: blur(0); }
}

/* Черта под заголовком прочерчивается сама, как линия горизонта */
.done__rule {
  display: block;
  height: 2px;
  width: 100%;
  max-width: 26rem;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #2fd07a, rgba(247, 161, 92, 0.9) 62%, transparent);
}
body.is-issued .done__rule { animation: done-rule 1s var(--ease-out) 0.38s both; }
@keyframes done-rule {
  to { transform: scaleX(1); }
}

.done__sum {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2fd07a;
}

.done__rows { margin: 0.4rem 0 0; display: grid; gap: 0.85rem; }
.done__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(242, 240, 233, 0.12);
}
.done__rows dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 240, 233, 0.55);
}
.done__rows dd { margin: 0; font-weight: 700; color: var(--night-text); }

.done__mail {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--night-soft);
  max-width: 44ch;
}
.done__mail b { color: var(--night-text); font-weight: 700; }

/* Итог проявляется лесенкой снизу вверх, следом за заголовком */
.done__sum,
.done__rows > div,
.done__mail { opacity: 0; transform: translateY(12px); }
body.is-issued .done__sum,
body.is-issued .done__rows > div,
body.is-issued .done__mail { animation: done-in 0.6s var(--ease-out) both; }
body.is-issued .done__sum { animation-delay: 0.52s; }
body.is-issued .done__rows > div:nth-child(1) { animation-delay: 0.82s; }
body.is-issued .done__rows > div:nth-child(2) { animation-delay: 0.88s; }
body.is-issued .done__rows > div:nth-child(3) { animation-delay: 0.94s; }
body.is-issued .done__rows > div:nth-child(4) { animation-delay: 1s; }
body.is-issued .done__rows > div:nth-child(5) { animation-delay: 1.06s; }
body.is-issued .done__rows > div:nth-child(6) { animation-delay: 1.12s; }
body.is-issued .done__mail { animation-delay: 0.66s; }
@keyframes done-in {
  to { opacity: 1; transform: none; }
}

/* Контакты под билетом: они принадлежат человеку, а не талону, поэтому
   лежат вне бумаги и набраны тише */
.pass__who {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  padding-top: 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(242, 240, 233, 0.72);
}
.pass__who[hidden] { display: none; }
.pass__who span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pass__who i { font-size: 0.95rem; color: var(--accent); }
.pass__who b { font-weight: 600; }

@media (max-width: 960px) {
  body.is-issued .bk { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .done__line i { transform: none; filter: none; }
  .done__rule { transform: none; }
  body.is-issued .done__line i,
  body.is-issued .done__rule,
  body.is-issued .done__sum,
  body.is-issued .done__rows > div,
  body.is-issued .done__mail { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ============ Телефон: действие закреплено, талон после оплаты ============ */

@media (max-width: 860px) {
  /* На телефоне в экран помещалось полтора варианта: ужимаем карточки и
     отступы, чтобы шаг читался целиком без прокрутки. */
  .bk__flow {
    padding: 1rem 0.9rem 1.2rem;
    display: flex;
    flex-direction: column;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #bkForm { padding-bottom: 0.2rem; }

  .bk-step__hint { font-size: 0.92rem; margin-bottom: 1rem; }
  .bk-opt { padding: 0.85rem 0.95rem; }
  .bk-opt__icon { font-size: 1.35rem; margin-bottom: 0.4rem; }
  .bk-opt b { font-size: 1rem; }
  .bk-opt span { font-size: 0.86rem; }
  .bk-opts { gap: 0.65rem; }
  .bk-route { margin-bottom: 1rem; }

  /* Кнопка шага уезжала за край вместе с содержимым: на каждом шаге
     приходилось докручивать вниз. Теперь она стоит полосой над нижней
     панелью и всегда под большим пальцем. */
  .bk-nav {
    margin-top: 1.4rem;
    gap: 0.7rem;
  }
  .bk-nav .btn { min-height: 48px; }
  .bk-nav .btn--primary { flex: 1; }
  .bk-nav .btn--ghost { flex: 0 0 auto; padding-inline: 1.1rem; }

  /* Место под закреплённую полосу, иначе она накрывает конец страницы */
  body.bk-page { padding-bottom: calc(60px + 24px + env(safe-area-inset-bottom, 0px)); }

  /* На оплате и после неё предложение ввести код сертификата уже не к месту:
     выбор сделан, а плашка занимает целый экран над итогом. */
  body[data-bk-step="done"] .vch,
  body.is-issued .vch { display: none; }

  /* Талон до оплаты на телефоне не нужен: он длинный, стоит под формой и
     всё равно не попадает в поле зрения. Появляется там, где имеет смысл -
     в момент, когда его выписали. */
  .bk__pass { display: none; }
  body.is-issued .bk__pass { display: block; }
  /* Форма уже скрыта, полоса действия вместе с ней */
  body.is-issued .bk-nav,
  body.is-issued .bk-send { display: none; }
  body.is-issued.bk-page { padding-bottom: calc(60px + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ Адаптив ============ */

/* Моноширинный набор шире пропорционального, и на узком экране строки
   вроде «действует 180 дней» переносились на две. Ужимаем кегль, чтобы
   значение оставалось одной строкой. */
@media (max-width: 520px) {
  .pass__body { grid-template-columns: 1fr 1fr; gap: 0.95rem 0.8rem; }
  .pass__label { font-size: 0.75rem; letter-spacing: 0.07em; }
  /* Строка маршрута и штамп на телефоне тоже уходили ниже 10px */
  .bk-route span, .pass__stamp em, .pass__stamp b { font-size: 0.75rem; }
  .pass__value { font-size: 0.82rem; }
  .pass__price b { font-size: 1.3rem; }
  .pass__paid { padding-inline: 1.5rem; }
  .pass__stamp { left: 5%; bottom: 10%; padding: 0.4rem 0.66rem 0.34rem; }
  .pass__stamp b { font-size: 1rem; letter-spacing: 0.16em; }
  .pass__stamp em { font-size: 0.72rem; }
  .pass__lights { gap: 0.38rem; }
}

@media (max-width: 960px) {
  .bk { grid-template-columns: 1fr; }
  .pass { position: static; max-width: 480px; }
  .bk-opts--2, .bk-opts--3 { grid-template-columns: 1fr; }
  .bk-route li span { display: none; }
  .bk-route li.is-current span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-route li.is-current i { animation: none; }
  .bk-step.is-active { animation: none; }
}