/* ============================================================
   booking.css — секция «Запись и бронирование». Владеет таск 07.
   Фон поверх колоды — усиленным селектором (контракт таска 05).
   z-index внутри секции < 100 (контракт stacking, таск 04).
   ============================================================ */

section[data-section='booking'][data-stack] {
  background: var(--color-surface-base);
  /* Локальный токен секции: цвет ошибок валидации (объявлен один раз). */
  --booking-error: #E4A0A0;
}

.booking-head { margin-bottom: var(--space-4); }

.booking-head__eyebrow {
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.booking-head__note {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* Вторичная ссылка «ПОДОБРАТЬ ОБРАЗ» (ТЗ §3.8): ghost, не конкурирует с формой. */
.booking-head__alt { margin-top: var(--space-1); }

/* --- Раскладка: форма + сводка --- */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1024px) {
  .booking-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .booking-aside { position: sticky; top: calc(var(--header-height) + var(--space-3)); }
}

/* --- Шаги --- */
.booking-step {
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
}

.booking-step__legend {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  padding-inline: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.booking-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

/* --- Поля --- */
.booking-field { margin-bottom: var(--space-2); }

.booking-label {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.booking-req { color: var(--color-accent-primary); }

.booking-input {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.booking-input:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
  border-color: var(--color-accent-primary);
}

/* G82: селекты единообразны — форму и стрелку задаёт базовое правило select
   в base.css. Здесь только размер шрифта: Safari на iPhone САМ увеличивает
   («зумит») страницу, если в поле шрифт мельче 16px, и сбить этот зум потом
   нельзя. Базовое правило ставит селектам 14px — форма записи возвращает 16px
   всем своим полям. booking.css подключается после base.css, поэтому
   при равной силе селектора побеждает это правило. */
.booking-form .booking-input,
.booking-form select.booking-input {
  font-size: var(--text-base);
}

/* Шапка сайта «приклеена» к верху окна и высотой 64px. Браузер, подводя поле
   к экрану (Tab, автофокус, переход по ошибке), останавливался ровно под ней —
   поле пряталось. scroll-margin-top говорит «оставь сверху столько места». */
.booking-step,
.booking-field,
.booking-consent,
.booking-input,
.booking-actions {
  scroll-margin-top: calc(var(--header-height) + var(--space-2));
}

.booking-hint {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.booking-error {
  color: var(--booking-error);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.booking-error--form { margin-bottom: var(--space-2); }

.booking-linkbtn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent-primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.booking-waitlist-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border: 1px dashed var(--color-accent-primary);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

/* --- Тарифы --- */
.booking-tariffs {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.booking-tariff {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
  cursor: pointer;
  transition: opacity var(--motion-duration) var(--motion-ease);
}

.booking-tariff.is-active { border-color: var(--color-accent-primary); }

.booking-tariff input { position: absolute; opacity: 0; }

.booking-tariff__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
}

.booking-tariff.is-active .booking-tariff__name { color: var(--color-accent-primary); }

.booking-tariff__price { color: var(--color-text-primary); font-size: var(--text-sm); }
.booking-tariff__price s { color: var(--color-text-secondary); }
.booking-tariff__seats { color: var(--color-text-secondary); font-size: var(--text-xs); }

/* --- Согласие --- */
.booking-consent {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.booking-consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent-primary);
  flex: none;
}

.booking-consent a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Панель отправки --- */
.booking-actions { margin-top: var(--space-3); }

.booking-submit { width: 100%; }

/* Телефон: панель «липнет» к нижнему краю окна, пока форма на экране, и
   отпускается на своём месте в конце формы — кнопка достижима с любого шага.
   position: fixed внутри секций не работает (у предка есть transform колоды),
   а sticky работает — им и пользуемся. Фон непрозрачный токеном: под панелью
   не должны просвечивать поля. z-index внутри секции < 100 (контракт колоды). */
@media (max-width: 768px) {
  .booking-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--space-2);
    padding-block: var(--space-2);
    background: var(--color-surface-base);
    border-top: 1px solid color-mix(in srgb, var(--color-accent-primary) 25%, transparent);
  }
}

@media (min-width: 769px) {
  .booking-submit { width: auto; min-width: 280px; }
}

/* --- Сводка --- */
.booking-summary {
  padding: var(--space-3);
  background: var(--color-surface-card);
  outline: 1px solid color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
}

.booking-summary__eyebrow {
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-1);
}

.booking-summary__event {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.booking-summary__meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.booking-summary__price {
  font-size: var(--text-lg);
  margin: var(--space-2) 0;
}

.booking-summary__price s { color: var(--color-text-secondary); font-size: var(--text-sm); }

.booking-summary__note {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  margin: 0;
}

/* --- Экран результата: место удержано / лист ожидания --- */
.booking-result { max-width: 640px; }

.booking-hold {
  padding: var(--space-4);
  background: var(--color-surface-card);
  outline: 1px solid var(--color-accent-primary);
}

.booking-hold__eyebrow {
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-1);
}

.booking-hold__title { margin-bottom: var(--space-2); }

.booking-hold__timer {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-accent-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}

.booking-hold__note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.booking-hold__amount { font-size: var(--text-lg); }

.booking-hold__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.booking-hold__status {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0;
  overflow-wrap: anywhere;
}