/*
 * Шаги записи `B-01`…`B-05`: шапка мастера, полоса шагов, карточки выбора,
 * нижняя панель с итогом. Значения — из `web/tokens.css`.
 */

/* ─── Шапка шага ─────────────────────────────────────────────────────────── */

.booking-header__cancel {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-200);
}

.booking-header__close {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--neutral-600);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-200);
  font-size: var(--text-body-s-size);
  flex: 0 0 auto;
}

.booking-header__close:hover {
  border-color: var(--neutral-0);
  color: var(--color-text-inverse);
}

/* ─── Полоса шагов ───────────────────────────────────────────────────────── */

.steps-bar {
  padding: var(--space-5) var(--page-padding);
  border-bottom: var(--border-width) solid var(--color-border);
  display: flex;
  justify-content: center;
}

.steps-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.step-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Пройденный шаг: галочка и ссылка назад. Будущие приглушены и не ссылки. */
.step-chip--done .step-chip__num {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

.step-chip--done .step-chip__label {
  color: var(--color-text-primary);
}

a.step-chip:hover .step-chip__label {
  color: var(--color-text-secondary);
}

.step-chip__num {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.step-chip__label {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-300);
  white-space: nowrap;
}

.step-chip--current .step-chip__num {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

.step-chip--current .step-chip__label {
  color: var(--color-text-primary);
}

.step-chip__line {
  width: var(--space-6);
  height: var(--border-width);
  background: var(--color-border);
}

/* ─── Тело шага ──────────────────────────────────────────────────────────── */

.booking {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  padding: var(--space-7) var(--page-padding) var(--space-9);
}

.booking__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
  margin: 0 0 var(--space-3);
}

.booking__lead {
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 0 var(--space-7);
}

/* Место под нижнюю панель: она закреплена и иначе накрыла бы последний ряд. */
.booking--with-bar {
  padding-bottom: var(--space-9);
}

/* Сводка выбранного на шагах после первого. */
.booking__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.booking__summary-text {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  /* Сводка шага «Время» собрана из кусочков со ссылками «Изменить» между
     ними — без этого они слипаются в одно слово. */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.booking__summary-text .skeleton {
  width: 320px;
  max-width: 100%;
}

/* ─── Шаг «Мастер» ───────────────────────────────────────────────────────── */

.any-pick {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  cursor: pointer;
}

.any-pick--checked {
  border: var(--border-width-accent) solid var(--color-text-primary);
  padding: calc(var(--space-5) - var(--border-width));
}

/* Кружок с пунктиром — «мастер пока не назван». */
.any-pick__mark {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.any-pick__mark::after {
  content: '';
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-pill);
  border: var(--border-width-accent) dashed var(--color-text-inverse);
}

.any-pick__body {
  flex: 1;
  min-width: 0;
}

.any-pick__title {
  display: block;
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.any-pick__text {
  display: block;
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.masters-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.master-pick {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
}

.master-pick--checked {
  border: var(--border-width-accent) solid var(--color-text-primary);
}

/* Мастер, который не выполняет выбранное: виден, но не выбирается. */
.master-pick--off {
  opacity: 0.45;
  cursor: not-allowed;
}

.master-pick__photo {
  height: 160px;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
}

.master-pick__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.master-pick__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.master-pick__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.master-pick__name {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
}

/* Точка выбора — она же у «любого мастера». */
.master-pick__dot {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-border);
  flex: 0 0 auto;
}

.master-pick--checked .master-pick__dot,
.any-pick--checked .master-pick__dot {
  background: var(--color-text-primary);
}

.master-pick__spec {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
}

.master-pick__meta {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.master-pick__off-note {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-error);
}

/* ─── Шаг «Время» ────────────────────────────────────────────────────────── */

/* Календарь и слоты рядом — шагу нужно больше ширины, чем карточкам выбора. */
.booking--wide {
  max-width: var(--container-max-width);
}

.time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.booking__summary-master {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.booking__summary-dot {
  color: var(--neutral-200);
}

/* Ширина ограничена: растянутый на полколонки месяц — это поле сорокапиксельных
   ячеек метровой длины, и попасть в нужную становится труднее, а не легче. */
.calendar {
  max-width: 460px;
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.calendar__title {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.calendar__nav {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-text-primary);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body-s-size);
  line-height: 1;
  cursor: pointer;
}

.calendar__nav:disabled {
  border-color: var(--color-border);
  color: var(--neutral-200);
  cursor: not-allowed;
}

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

.calendar__grid--weekdays {
  margin-bottom: var(--space-2);
}

.calendar__weekday {
  text-align: center;
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-300);
}

.calendar__note {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
  margin: var(--space-4) 0 var(--space-5);
}

/* ─── День календаря ─────────────────────────────────────────────────────── */

.day {
  height: 40px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  color: var(--color-text-primary);
  cursor: pointer;
}

.day--empty {
  border: none;
  background: none;
}

.day--free {
  border-color: var(--slot-free-border);
}

.day--free:hover {
  background: var(--button-secondary-bg-hover);
}

/*
 * Прошедший день и день за горизонтом записи: видны, но не выбираются.
 * Приглушены одинаково — это «не наше время»; разница объясняется подписью
 * ячейки и строкой «Запись открыта до …» под календарём.
 */
.day--past,
.day--beyond {
  color: var(--neutral-200);
  cursor: not-allowed;
}

/* День, где всё занято: приглушён, но нажимается — он показывает `B-03a`. */
.day--no-windows {
  border-color: var(--color-border);
  color: var(--neutral-200);
}

.day--no-windows:hover {
  background: var(--button-secondary-bg-hover);
}

/*
 * Три причины, которые прототип свёл в один «выходной»: выходной мастера,
 * отпуск и закрытый салон. Ответ их различает, поэтому различает и вёрстка —
 * потерять различие можно, придумать нельзя.
 */
.day--day-off {
  background: var(--slot-unavailable-bg);
  color: var(--neutral-200);
  cursor: not-allowed;
}

.day--master-away {
  background: var(--slot-unavailable-bg);
  border: var(--border-width) dashed var(--neutral-200);
  color: var(--neutral-200);
  cursor: not-allowed;
}

.day--salon-closed {
  background: var(--neutral-100);
  color: var(--neutral-300);
  cursor: not-allowed;
}

.day--today {
  border: var(--border-width-accent) solid var(--color-text-primary);
}

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

/* День переносимой записи: пунктир, как «текущая» в прототипе `Booking 06`. */
.day--current {
  border: var(--border-width) dashed var(--neutral-300);
  color: var(--color-text-secondary);
}

.day--selected.day--current {
  border-style: solid;
}

/* ─── Легенда ────────────────────────────────────────────────────────────── */

.legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.legend__swatch {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: var(--border-width) solid transparent;
  flex: 0 0 auto;
}

.legend__swatch--free {
  border-color: var(--slot-free-border);
}

.legend__swatch--today {
  border: var(--border-width-accent) solid var(--color-text-primary);
}

.legend__swatch--selected {
  background: var(--color-text-primary);
}

.legend__swatch--no-windows {
  border-color: var(--color-border);
}

.legend__swatch--day-off {
  background: var(--slot-unavailable-bg);
}

.legend__swatch--master-away {
  background: var(--slot-unavailable-bg);
  border: var(--border-width) dashed var(--neutral-200);
}

.legend__swatch--salon-closed {
  background: var(--neutral-100);
}

.legend__swatch--past {
  background: var(--neutral-100);
  opacity: 0.4;
}

.legend__swatch--current {
  border: var(--border-width) dashed var(--neutral-300);
}

/* ─── Слоты дня ──────────────────────────────────────────────────────────── */

.slots-col__day {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
}

.slot-group {
  margin-bottom: var(--space-5);
}

.slot-group__title {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--neutral-300);
  margin-bottom: var(--space-3);
}

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

.slot {
  padding: var(--space-3) 0;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--slot-free-border);
  background: var(--slot-free-bg);
  color: var(--slot-free-text);
  font-family: inherit;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.slot:hover {
  background: var(--button-secondary-bg-hover);
}

/*
 * Недоступное время. В прототипе это «занято» — зачёркнутое серым; здесь тем
 * же видом показано всё, чего в свободных окнах нет: занято, перерыв, визит
 * не помещается до закрытия. Причину экран не знает — занятость наружу не
 * отдаётся, — поэтому и не подписывает её.
 */
.slot--busy,
.slot--busy:hover {
  background: var(--slot-busy-bg);
  border-color: var(--slot-busy-border);
  color: var(--slot-busy-text);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Ожидание слотов: сетка есть, но она ещё не значит «времени нет». */
.slots-col__loading {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

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

.slots-col__note {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}

/* Время самой переносимой записи: видно, но не нажимается. */
.slot--current,
.slot--current:hover {
  background: var(--color-surface);
  border: var(--border-width) dashed var(--neutral-300);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

/* ─── Перенос записи (`Booking 06`) ──────────────────────────────────────── */

.reschedule-bar {
  background: var(--slot-unavailable-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-4) var(--page-padding);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.reschedule-bar__text {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
}

/* Счётчик переносов — предупреждение, а не украшение: он ограничен. */
.reschedule-bar__left {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-warning);
  margin-left: auto;
}

/* ─── «Было / Стало» после переноса (`Booking 07`) ───────────────────────── */

.booking--done {
  display: flex;
  justify-content: center;
}

.moved {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.moved__card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
}

.moved__card--was {
  opacity: 0.55;
}

.moved__card--now {
  border: var(--border-width-accent) solid var(--color-text-primary);
  background: var(--slot-unavailable-bg);
}

.moved__label {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--neutral-300);
  margin-bottom: var(--space-3);
}

.moved__date {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.moved__time {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
}

.moved__card--was .moved__date,
.moved__card--was .moved__time {
  text-decoration: line-through;
  color: var(--neutral-300);
}

/* ─── Месяц без окон, состояние `B-03a` ──────────────────────────────────── */

.noslots {
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

.noslots__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--slot-unavailable-bg);
  margin: 0 auto var(--space-5);
}

.noslots__title {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  margin-bottom: var(--space-3);
}

.noslots__text {
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary);
  max-width: 340px;
  margin: 0 auto var(--space-6);
}

.noslots__nearest {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.noslots__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
}

/* ─── Шаг «Подтверждение» ────────────────────────────────────────────────── */

.confirm-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

/* Сводка едет за страницей: форма длиннее её, а кнопка живёт в сводке. */
.confirm-side {
  position: sticky;
  top: var(--space-5);
}

.confirm-form {
  gap: var(--space-5);
}

/* Слот увели — форма гаснет, но остаётся на месте: она ещё пригодится. */
.confirm-form--off {
  opacity: 0.5;
  pointer-events: none;
}

.field__label-note {
  color: var(--neutral-300);
  font-weight: var(--font-weight-regular);
}

.field__input--area {
  resize: vertical;
  min-height: 92px;
  font-family: inherit;
}

/* ─── Гость на шаге: табы входа и регистрации (`B-04a`) ──────────────────── */

.guest-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-5);
}

.guest-tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  /* Подчёркивание текущего таба перекрывает линию под всей полосой. */
  border-bottom: var(--border-width-accent) solid transparent;
  margin-bottom: calc(-1 * var(--border-width));
  background: none;
  font-family: inherit;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-300);
  cursor: pointer;
}

.guest-tab:hover {
  color: var(--color-text-secondary);
}

.guest-tab--current,
.guest-tab--current:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

.guest-form {
  max-width: 400px;
}

.guest-hint {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-4);
}

/* Переключатель таба — не ссылка: он никуда не ведёт, а меняет эту же форму. */
.guest-hint__link {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-bottom: var(--border-width) solid var(--color-text-primary);
  cursor: pointer;
}

/* ─── Плашка удержания ───────────────────────────────────────────────────── */

.hold {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Последняя минута: вид из дизайн-системы — цвет отказа. */
.hold--urgent {
  background: var(--color-error);
}

/* Бронь снята или истекла: плашка гаснет, а не исчезает. */
.hold--gone {
  background: var(--slot-unavailable-bg);
  color: var(--color-text-secondary);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hold__link {
  font-weight: var(--font-weight-medium);
  border-bottom: var(--border-width) solid var(--color-text-secondary);
}

/* ─── Сводка визита ──────────────────────────────────────────────────────── */

.summary-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.summary-card__master {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.summary-card__photo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  flex: 0 0 auto;
}

.summary-card__master-text {
  flex: 1;
  min-width: 0;
}

.summary-card__name {
  display: block;
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.summary-card__spec {
  display: block;
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
}

.summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.summary-card__date {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.summary-card__time {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
}

.summary-card__time--gone {
  text-decoration: line-through;
  color: var(--neutral-200);
}

.summary-card__services {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}

.summary-card__service {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  font-size: var(--text-body-s-size);
}

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

.summary-card__divider {
  height: var(--border-width);
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.summary-card__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.summary-card__total-label {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.summary-card__total-value {
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
}

.summary-card__duration {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
  margin-bottom: var(--space-5);
}

/* ─── Состояние `B-04b`: время уже заняли ────────────────────────────────── */

.taken {
  background: var(--color-error-bg);
  border: var(--border-width) solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.taken__head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.taken__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-error);
  margin-top: var(--space-2);
  flex: 0 0 auto;
}

.taken__title {
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
}

.taken__label {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-error);
  margin-bottom: var(--space-3);
}

.taken__slots {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.taken__slot {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-error);
  background: var(--color-surface);
  color: var(--color-error);
  font-family: inherit;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.taken__slot:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
}

.taken__slot:disabled {
  opacity: 0.6;
  cursor: default;
}

.taken__link {
  display: inline-block;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  border-bottom: var(--border-width) solid var(--color-error);
}

.taken__link:hover {
  color: var(--color-error);
}

/* ─── Экран `B-05`: запись создана ───────────────────────────────────────── */

.done {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--page-padding);
}

.done__box {
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.done__mark {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-bold);
  margin: 0 auto var(--space-5);
}

.done__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--text-h2-tracking);
  margin: 0 0 var(--space-6);
}

.done__card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

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

.done__label {
  font-size: var(--text-body-s-size);
  color: var(--neutral-300);
  flex: 0 0 auto;
}

.done__value {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.done__value--strong {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.done__divider {
  height: var(--border-width);
  background: var(--color-border);
}

.done__note {
  font-size: var(--text-body-s-size);
  color: var(--neutral-300);
  margin: 0 0 var(--space-6);
}

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

/* ─── Карточка выбора ────────────────────────────────────────────────────── */

.picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.pick {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}

.pick:hover {
  border-color: var(--neutral-200);
}

/* Отмеченная карточка: акцентная рамка и заливка, как в прототипе. */
.pick--checked {
  border: var(--border-width-accent) solid var(--color-text-primary);
  background: var(--button-secondary-bg-hover);
  /* Рамка стала толще на 1px — компенсируем, чтобы карточка не подпрыгивала. */
  padding: calc(var(--space-5) - var(--border-width));
}

.pick__box {
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--neutral-200);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: var(--space-1);
  color: var(--color-text-inverse);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
}

.pick--checked .pick__box {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* Настоящий флажок скрыт, но жив: карточка переключается и с клавиатуры. */
.pick__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pick__input:focus-visible ~ .pick__box {
  border-color: var(--color-border-focus);
}

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

.pick__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.pick__name,
.pick__price {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.pick__desc {
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.pick__duration {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
}

/* ─── Нижняя панель с итогом ─────────────────────────────────────────────── */

.sumbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-5) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.sumbar__text {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

/* Подсказка «Выберите хотя бы одну услугу» — приглушённее сводки. */
.sumbar__text--hint {
  color: var(--neutral-300);
}

.sumbar__total {
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
  margin-left: auto;
}

.sumbar__next {
  flex: 0 0 auto;
}

/* ─── Узкий экран ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .masters-pick {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Календарь и слоты друг под другом: рядом им тесно уже на планшете. */
  .time-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Сводка встаёт над формой: кнопка подтверждения должна быть видна сразу,
     а не после трёх полей. */
  .confirm-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .confirm-side {
    position: static;
    order: -1;
  }
}

@media (max-width: 768px) {
  .picks,
  .masters-pick {
    grid-template-columns: 1fr;
  }

  /* ─── Полоса шагов ─────────────────────────────────────────────────────── */

  /*
   * Подписи шагов остаются: без них «1 2 3 4» не говорит, где человек сейчас.
   * Чтобы они не наезжали друг на друга, чипы переносятся на вторую строку, а
   * соединительные линии убираются — это украшение, а не содержимое.
   */
  .steps-bar {
    padding: var(--space-4) var(--page-padding);
  }

  .steps-bar__inner {
    gap: var(--space-2) var(--space-4);
  }

  .step-chip__label {
    font-size: var(--text-caption-size);
    letter-spacing: 0;
  }

  .step-chip__line {
    display: none;
  }

  /* ─── Сетка времени ────────────────────────────────────────────────────── */

  .slots {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Палец толще курсора: слот и день календаря дорастают до 48 и 44 точек. */
  .slot {
    min-height: 48px;
    padding: var(--space-3) var(--space-2);
  }

  .day {
    height: 44px;
  }

  .calendar__nav {
    width: 44px;
    height: 44px;
  }

  /* ─── Нижняя панель ────────────────────────────────────────────────────── */

  /*
   * Панель закреплена внизу, и на узком экране она раскладывалась в три
   * строки (подсказка, кнопка «Назад», кнопка во всю ширину) — 153 точки,
   * которые накрывали последний ряд слотов. Теперь строки две: подсказка
   * сверху, кнопки рядом, — и под них отведён отступ содержимого.
   */
  .sumbar {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--page-padding);
  }

  .sumbar__text {
    width: 100%;
    order: -1;
  }

  .sumbar__total {
    order: -1;
  }

  /*
   * Главная кнопка остаётся во всю ширину и в одну строку: подпись вроде
   * «Перенести на 22 сентября, 12:00» в ужатой кнопке ломалась бы на три
   * строки. Панель от этого высокая — значит, под неё и отводится место,
   * с запасом на самый длинный случай (подсказка, «Назад», кнопка).
   */
  .sumbar__next {
    width: 100%;
  }

  .booking--with-bar {
    padding-bottom: 176px;
  }

  /* «Было / Стало» друг под другом: рядом две карточки по 150 точек. */
  .moved {
    grid-template-columns: 1fr;
  }
}