/*
 * Форма записи (З-1…З-5). Подключается после base.css и header.css.
 *
 * Раскладка и состав взяты из Design_site/«Форма записи.dc.html»: две колонки
 * — шаги слева, сводка «Ваш визит» справа; шаг-индикатор сверху; карточка
 * с белой заливкой и скруглением 20px.
 *
 * ЦВЕТА, ШРИФТЫ И РАЗМЕРЫ — ТОЛЬКО ИЗ tokens.css (правило 4). Прототип
 * нарисован не по шкале — h2 28px, подписи 15px, кнопки 16px, — каждое такое
 * место взято ближайшей ступенью typeScale.
 */

.wizard {
  display: grid;
  /* В прототипе колонка сводки 320px; размерного токена под неё нет,
     ближайший по смыслу — --column-md (340px). */
  grid-template-columns: minmax(0, 1fr) var(--column-md);
  gap: var(--space-8);
  align-items: start;
  padding-top: var(--space-12);
  padding-bottom: var(--space-24);
}

.wizard__main { min-width: 0; }

/* ============================================================ ШАГ-ИНДИКАТОР */

.steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

/*
 * Шаг — кнопка, а не ссылка: переход между шагами происходит внутри страницы
 * и адреса не меняет. Будущие шаги disabled — по прототипу они не нажимаются.
 */
.step {
  flex: 1;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid var(--color-border-subtle);
}

.step__n {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-border-strong);
}

.step__label {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-border-strong);
  margin-top: var(--space-1);
}

/* Пройденный шаг: приглушённее текущего, но кликабелен. */
.step--done { border-bottom-color: var(--color-primary-200); }
.step--done .step__label { color: var(--color-text-muted); }

/* Текущий шаг. */
.step--current { border-bottom-color: var(--color-accent); }
.step--current .step__n { color: var(--color-accent); }
.step--current .step__label { color: var(--color-text); }

/* Будущий шаг: приглушён и не нажимается. */
.step[disabled] { cursor: default; }

/* ============================================================ КАРТОЧКА ШАГА */

.card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-8);
}

.card__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h2-weight);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h2-tracking);
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
}

.card__lead {
  margin: 0 0 var(--space-8);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
}

/* ============================================================ УСЛУГА (ШАГ 1) */

/*
 * Строка услуги — настоящий чекбокс с подписью, а не кнопка с нарисованной
 * галочкой: выбор нескольких услуг это ровно набор флажков, и клавиатура
 * со скринридером должны понимать его без подсказок.
 */
.option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  cursor: pointer;
}

.option:hover { background: var(--color-neutral-25); }

.option--selected { background: var(--color-primary-50); }

.option__control {
  /* Флажок скрыт визуально, но остаётся для клавиатуры и скринридера. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Нарисованный флажок из прототипа: квадрат со скруглением 7px. */
.option__box {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-xs);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-accent);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--font-weight-bold);
}

.option--selected .option__box {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

/* Кольцо фокуса рисуем на строке: сам флажок скрыт. */
.option__control:focus-visible + .option__box {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.option__body { flex: 1; min-width: 0; }

.option__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-body-size);
  line-height: var(--text-h4-line);
  color: var(--color-text);
}

.option__note {
  display: block;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

.option__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex: none;
}

.option__duration {
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.option__price {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text);
  white-space: nowrap;
  text-align: right;
}

/* ============================================================ МАСТЕР (ШАГ 2) */

.masters-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.master-row {
  width: 100%;
  cursor: pointer;
  text-align: left;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.master-row:hover { border-color: var(--color-accent); }

.master-row--selected {
  border-color: var(--color-accent);
  background: var(--color-primary-50);
}

/*
 * Мастер, который делает не все выбранные услуги. Показываем его, а не прячем:
 * иначе исчезновение знакомого имени выглядит как ошибка, и непонятно, что
 * именно его убрало. Причина написана тут же, в строке.
 */
.master-row[disabled] {
  cursor: not-allowed;
  background: var(--color-neutral-25);
  border-color: var(--color-border-subtle);
}

.master-row[disabled]:hover { border-color: var(--color-border-subtle); }

.master-row[disabled] .master-row__name,
.master-row[disabled] .master-row__role { color: var(--color-text-subtle); }

.master-row__avatar {
  flex: none;
  /* Квадрат 64px из прототипа — это ровно ступень --space-16. */
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  color: var(--color-neutral-500);
  text-transform: uppercase;
}

/* «Любой свободный мастер» — акцентный кружок со звёздочкой. */
.master-row__avatar--any {
  background: var(--color-primary-100);
  color: var(--color-primary-800);
}

.master-row__body { flex: 1; min-width: 0; }

.master-row__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-text);
}

.master-row__role {
  display: block;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

.master-row__hint {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-text-subtle);
  margin-top: var(--space-2);
}

/* Причина, по которой мастер недоступен: тот же моно-стиль, но заметнее. */
.master-row__blocked { color: var(--color-danger-text); }

.master-row__badge {
  flex: none;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-link);
}

/* ============================================================ ТУПИК З-2а */

.deadend {
  padding: var(--space-12) var(--space-8);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

.deadend__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  color: var(--color-text);
}

.deadend__body {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
  margin: var(--space-2) auto var(--space-6);
  max-width: var(--measure-md);
}

.deadend__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================ НИЗ ФОРМЫ */

.wizard__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/*
 * Пояснение, чего не хватает для перехода дальше. Стоит рядом с кнопкой,
 * а не под ней: заблокированная кнопка без объяснения выглядит поломкой.
 */
.wizard__hint {
  margin: 0 0 0 auto;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
  text-align: right;
}

/* ============================================================ СВОДКА */

.summary {
  position: sticky;
  /* Ниже липкой шапки: --space-16 её высота, --space-6 — зазор. */
  top: var(--space-24);
}

.card--aside { padding: var(--space-6); }

.summary__title {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.summary__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.summary__line-price {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.summary__total-key {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
}

.summary__total-value {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.summary__total--sum .summary__total-key {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  color: var(--color-text);
}

.summary__total--sum .summary__total-value {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.summary__empty {
  margin: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-subtle);
}

.summary__rows {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.summary__key { color: var(--color-text-subtle); }
.summary__value { color: var(--color-text-body); text-align: right; }
.summary__value--unset { color: var(--color-border-strong); }

/* ============================================================ ЗАГЛУШКИ */

.skeleton {
  display: block;
  background: var(--color-neutral-100);
  border-radius: var(--radius-xs);
  animation: booking-skeleton 1.4s ease-in-out infinite;
}

@keyframes booking-skeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

.skeleton--box { width: var(--space-6); height: var(--space-6); flex: none; }
.skeleton--avatar { width: var(--space-16); height: var(--space-16); flex: none; border-radius: var(--radius-lg); }
.skeleton--title { height: var(--space-4); width: 50%; }
.skeleton--line { height: var(--space-3); width: 100%; margin-top: var(--space-2); }
.skeleton--short { width: 35%; }
/* Клетка сетки окон на время загрузки — того же роста, что настоящая. */
.skeleton--slot { min-height: var(--space-12); border-radius: var(--radius-md); }

/* ============================================================ АДАПТИВ */

/* Брейкпоинты дизайн-системы: lg ≥1280px, md ≥768px. Переменными они быть
   не могут — пользовательские свойства в media-запросах не работают. */
@media (max-width: 1279px) {
  .wizard { grid-template-columns: minmax(0, 1fr); }

  /* В одну колонку сводка уже не «сбоку» — липкость только мешает. */
  .summary { position: static; }
}

@media (max-width: 767px) {
  .wizard { padding-top: var(--space-8); padding-bottom: var(--space-12); }

  .card { padding: var(--space-6); }

  /*
   * Пять подписей в строку на узком экране не помещаются и наезжают друг
   * на друга. Прятать их нельзя — на телефоне должно быть всё то же, что
   * на компьютере, — поэтому полоса шагов прокручивается вбок, а каждый шаг
   * получает свою ширину под подпись.
   */
  .steps {
    overflow-x: auto;
    gap: var(--space-4);
    /* Чтобы у крайних шагов был воздух при прокрутке. */
    padding-bottom: var(--space-1);
  }

  /* Ширина шага — по его подписи: flex: 0 0 auto плюс nowrap ниже. */
  .step { flex: 0 0 auto; }

  .step__label { white-space: nowrap; }

  /*
   * На узком экране строка услуги перестраивается в сетку: флажок слева,
   * название с описанием справа, длительность и цена — отдельной строкой
   * под ними. Простой перенос по flex ставил бы цену поверх описания.
   */
  .option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "box  body"
      "meta meta";
    gap: var(--space-2) var(--space-4);
    align-items: start;
  }

  .option__box { grid-area: box; }
  .option__body { grid-area: body; }
  .option__meta { grid-area: meta; justify-content: space-between; }
  .option__price { text-align: left; }

  /*
   * Панель с кнопкой «Далее» прижимается к низу экрана, чтобы до неё
   * не приходилось прокручивать всю сетку. Именно sticky, а не fixed:
   * панель остаётся в потоке и поэтому физически не может перекрыть
   * содержимое — под ней всегда есть место, а не пустота под наложением.
   */
  .wizard__nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--color-background);
    border-top: var(--border-width) solid var(--color-border);
    padding: var(--space-3) 0;
    /* Кнопки в строку, пояснение над ними: столбиком панель занимала 150px. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  /* Пояснение — первой строкой во всю ширину. */
  .wizard__hint {
    order: -1;
    flex-basis: 100%;
    margin: 0;
    text-align: center;
  }

  /* «Далее» забирает остаток строки: это главное действие шага. */
  .wizard__next { flex: 1; }

  /* Запас снизу, чтобы последняя строка не упиралась в липкую панель. */
  .wizard { padding-bottom: var(--space-16); }
}

/* ============================================================ ЗАГРУЗКА */

/*
 * Подпись над заглушкой. Пустая сетка и «свободного времени нет» — разные
 * состояния, и клиент обязан их различать: пока идёт запрос, на экране
 * написано, что именно сейчас происходит.
 */
.loading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
}

/* ============================================================ КАЛЕНДАРЬ (ШАГ 3) */

.calendar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.month { min-width: 0; }

.month__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  margin: 0 0 var(--space-3);
  text-transform: capitalize;
}

.month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.month__weekday {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding-bottom: var(--space-1);
}

/* Пустая клетка до первого числа месяца. */
.day--blank { visibility: hidden; }

.day {
  height: var(--space-12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
}

.day:hover { border-color: var(--color-accent); }

/*
 * День без свободных окон. Виден, но не нажимается — по прототипу
 * «приглушённые дни: свободных слотов нет».
 */
.day[disabled] {
  cursor: not-allowed;
  background: var(--color-background);
  border-color: var(--color-border-subtle);
  color: var(--color-text-subtle);
}

.day[disabled]:hover { border-color: var(--color-border-subtle); }

/* Прошедший день: ещё тише, чем занятый, — он не станет свободным. */
.day--past {
  background: transparent;
  border-color: transparent;
  color: var(--color-border-strong);
}

.day--past:hover { border-color: transparent; }

.day--selected,
.day--selected:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* ============================================================ ОКНА (ШАГ 4) */

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

.card__change {
  flex: none;
  font-size: var(--text-body-sm-size);
  padding: var(--space-2) var(--space-4);
}

.slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.slot {
  min-height: var(--space-12);
  padding: var(--space-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
}

.slot:hover { border-color: var(--color-accent); }

.slot--selected,
.slot--selected:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

/*
 * Занятое время. Показываем, а не прячем: по дыре в сетке видно, что день
 * плотный, а исчезнувшие часы выглядели бы как укороченный рабочий день.
 */
.slot--busy,
.slot--busy:hover {
  cursor: not-allowed;
  background: var(--color-danger-surface);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* Прошедшее время сегодняшнего дня. */
.slot--past,
.slot--past:hover {
  cursor: not-allowed;
  background: var(--color-background);
  border-color: var(--color-border-subtle);
  color: var(--color-text-subtle);
}

/* Имя мастера под временем — в режиме «любой свободный». */
.slot__master {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.slot--selected .slot__master { color: var(--color-primary-100); }

/* Строка «визит закончится в …» под сеткой. */
.slots__end {
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-body);
}

.slots__end-time {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* ============================================================ ЛЕГЕНДА */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-text-muted);
}

.legend__swatch {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-xs);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
}

.legend__swatch--selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.legend__swatch--busy {
  background: var(--color-danger-surface);
  border-color: var(--color-danger-border);
}

.legend__swatch--past {
  background: var(--color-background);
  border-color: var(--color-border-subtle);
}

/* ============================================================ ДЕНЬ БЕЗ ОКОН */

.nofree__list {
  margin: var(--space-4) auto var(--space-6);
  padding: 0;
  list-style: none;
  max-width: var(--measure-md);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
}

.nofree__nearest {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-body);
  margin: var(--space-2) 0 0;
}

.nofree__nearest-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* ============================================================ АДАПТИВ ШАГОВ 3–4 */

@media (max-width: 1279px) {
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* Два месяца рядом на узком экране не помещаются. */
  .calendar { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

  /*
   * Две колонки вместо трёх: клетка становится вдвое шире, и в неё легко
   * попасть пальцем. Высота — не меньше рекомендуемых 44px для касания.
   */
  .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .slot { min-height: var(--space-16); }

  .card__head { flex-direction: column; align-items: stretch; }
}

/* ============================================================ УДЕРЖАНИЕ (ШАГ 5) */

/*
 * Строка удержания с таймером. В прототипе её нет вовсе — удержания там
 * не вызываются ни разу (docs/ui-map.md, раздел про удержание слота).
 * Собрана в том же языке, что остальные состояния: акцентная рамка,
 * моноширинное время, при истечении — цвета ошибки.
 */
.hold {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-primary-200);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  margin-bottom: var(--space-6);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-body);
}

.hold__dot {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.hold__text { flex: 1; }

.hold__time {
  font-family: var(--font-mono);
  font-size: var(--text-time-size);
  line-height: var(--text-time-line);
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  font-variant-numeric: tabular-nums;
}

/* Меньше минуты — вид меняется: это последнее предупреждение. */
.hold--soon {
  border-color: var(--color-danger-border);
  background: var(--color-danger-surface);
  color: var(--color-danger-text);
}

.hold--soon .hold__dot { background: var(--color-danger); }
.hold--soon .hold__time { color: var(--color-danger-text); }

/* Срок вышел — время больше не закреплено. */
.hold--expired {
  border-color: var(--color-border-strong);
  background: var(--color-background);
  color: var(--color-text-muted);
}

.hold--expired .hold__dot { background: var(--color-text-subtle); }
.hold--expired .hold__time { color: var(--color-text-subtle); }

/* Истёкшее удержание должно быть действием, а не тупиком. */
.hold__again {
  flex: none;
  font-size: var(--text-label-size);
  padding: var(--space-2) var(--space-4);
}

/* ============================================================ ФОРМА КОНТАКТОВ */

.confirm-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.agree {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.agree__control {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.agree__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-body);
}

.agree__box {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-xs);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-accent);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--font-weight-bold);
}

.agree__control:checked + .agree__label .agree__box {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.agree__control:checked + .agree__label .agree__box::after { content: '✓'; }

.agree__control:focus-visible + .agree__label .agree__box {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.agree--invalid .agree__box { border-color: var(--color-danger); }

.confirm-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.confirm-form__submit { width: 100%; }

/* ============================================================ ВРЕМЯ ЗАНЯЛИ (З-8) */

/*
 * Отказ «время занято» — состояние этого же экрана, а не отдельная страница:
 * заполненная форма остаётся на месте, меняется только выбор времени.
 */
.conflict {
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid var(--color-danger-border);
  border-radius: var(--radius-md);
  background: var(--color-danger-surface);
  margin-bottom: var(--space-6);
}

.conflict__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-danger-text);
  margin: 0;
}

.conflict__body {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-body);
}

.conflict__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.conflict__slot {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-link);
}

.conflict__slot:hover { background: var(--color-primary-50); }

.conflict__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-link);
  text-decoration: underline;
  font-family: var(--font-body);
}

/* ============================================================ УСПЕХ (З-7) */

.success {
  border: var(--border-width) solid var(--color-success-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-12);
}

.success__dot {
  display: inline-flex;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-success);
}

.success__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h2-weight);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  text-transform: uppercase;
  margin: var(--space-4) 0 var(--space-2);
}

.success__lead {
  margin: 0 0 var(--space-8);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-text-muted);
}

.success__card {
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: var(--measure-xl);
}

.success__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.success__key { color: var(--color-neutral-500); }

.success__value { font-weight: var(--font-weight-medium); }

.success__price {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.success__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.success__total-key {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
}

.success__total-value {
  font-family: var(--font-mono);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  font-weight: var(--font-weight-medium);
}

.success__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* ============================================================ «ИЗМЕНИТЬ» В СВОДКЕ */

.summary__services-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.summary__change {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-link);
  text-decoration: underline;
  white-space: nowrap;
}

.summary__change:hover { color: var(--color-primary-400); }

/* Ссылка стоит между подписью и значением — значение прижато вправо. */
.summary__row .summary__value { margin-left: auto; }

/* ============================================================ АДАПТИВ ШАГА 5 */

@media (max-width: 767px) {
  .confirm-form__grid { grid-template-columns: minmax(0, 1fr); }

  .success { padding: var(--space-8); }

  .success__actions { flex-direction: column; }
}

/* ============================================================ ПЕРЕНОС (К-3) */

/*
 * Баннер режима переноса. В прототипе он есть (isReschedule в «Форма
 * записи.dc.html»), и вид взят оттуда: акцентная рамка и светлая заливка.
 * Кнопки «Изменить мастера» здесь нет — при переносе мастер зафиксирован.
 */
.reschedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid var(--color-primary-200);
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.reschedule__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-link);
}

.reschedule__summary {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-text);
}

/* Старое время — зачёркнуто: его заменяют, а не дополняют. */
.reschedule__old {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* При переносе контакты и согласие не спрашиваются: PATCH их не меняет. */
.confirm-form--move .confirm-form__grid,
.confirm-form--move .agree { display: none; }