/*
 * Флоу записи: Booking 01 «Услуги» и Booking 02 «Мастер».
 *
 * Файл общий на оба экрана — шапка, указатель шагов и нижняя панель у них
 * одни и те же, отличается только середина. Booking 03 и 04 лягут сюда же.
 *
 * Значения — только из tokens.css. Где в прототипе стояло значение вне шкалы,
 * взята ближайшая ступень или доля контейнера:
 *
 * - ширина колонки 760px (шаг 1) и 900px (шаг 2) — 8 и 9 колонок сетки
 *   из --container-max-width и --container-columns;
 * - высота шапки 84px — вертикальные отступы --space-24, как у шапки кабинета;
 * - кружок шага 32px, флажок услуги 22px — ступень --space-32 и --space-24;
 * - карточка мастера с фотографией 200px — пропорция 4/5, как на лендинге.
 *
 * Чего в системе нет: тени вверх (у --shadow-sm смещение вниз) — нижняя панель
 * отделена от содержимого границей, как и остальные блоки; и шкалы z-index —
 * панели стоит минимальная единица, как в client.css.
 */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Страница — колонка во всю высоту окна: так нижняя панель прилипает к низу
   окна на коротком содержимом и к низу списка на длинном */
.booking { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Шапка флоу ------------------------------------------------------------------
   Своя, не общая шапка клиента: во время записи в меню уходить некуда,
   поэтому справа только выход из флоу. */

.booking-header {
  flex-shrink: 0;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
}

.booking-header-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-desktop);
  padding-block: var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.booking-logo {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-h2);
}

.booking-quit {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary-on-inverse);
}
.booking-quit:hover { color: var(--color-text-on-inverse); }

/* --- Указатель шагов --------------------------------------------------------------
 * Три состояния: пройденный — тёмный кружок с галочкой и ссылка назад;
 * текущий — контурный тёмный; будущий — приглушённый и никуда не ведёт.
 *
 * Текущий шаг взят контурным по образцу Booking 02: там он нарисован именно
 * так, и это единственный экран прототипа, где видны все три состояния сразу.
 */

.booking-steps {
  flex-shrink: 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  padding-block: var(--space-32);
  padding-inline: var(--container-padding-desktop);
  display: flex;
  justify-content: center;
}

.steps { display: flex; align-items: flex-start; }

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding-inline: var(--space-24);
}

.step-circle {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
}

.step-label {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.step-done .step-circle {
  background: var(--color-surface-inverse);
  border-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
}
.step-done .step-label { color: var(--color-text-primary); }
.step-done:hover .step-label { color: var(--color-text-secondary); }

.step-current .step-circle {
  background: var(--color-background);
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}
.step-current .step-label { color: var(--color-text-primary); }

/* Будущий шаг — тот же приглушённый вид, что и у выключенной кнопки */
.step-next .step-circle {
  background: var(--color-background);
  border-color: var(--color-button-secondary-border-disabled);
  color: var(--color-button-ghost-text-disabled);
}
.step-next .step-label { color: var(--color-button-ghost-text-disabled); }

a.step:focus-visible { outline: none; }
a.step:focus-visible .step-circle { box-shadow: var(--button-focus-ring); }

/* Соединительная черта: тёмная за пройденным шагом, светлая дальше.
   Половина высоты кружка поднимает её на его середину. */
.step-line {
  width: var(--space-64);
  height: var(--border-width-default);
  margin-top: calc(var(--space-32) / 2);
  background: var(--color-border);
}
.step-line-done { background: var(--color-surface-inverse); }

/* --- Содержимое ------------------------------------------------------------------- */

.booking-main {
  flex-grow: 1;
  padding-inline: var(--container-padding-desktop);
  padding-block: var(--space-64);
  display: flex;
  justify-content: center;
}

/* 8 колонок сетки — на месте 760px из прототипа */
.booking-inner {
  width: 100%;
  max-width: calc(var(--container-max-width) / var(--container-columns) * 8);
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

/* 9 колонок — на месте 900px, шаг с карточками мастеров */
.booking-inner-wide {
  max-width: calc(var(--container-max-width) / var(--container-columns) * 9);
}

.booking-head { display: flex; flex-direction: column; gap: var(--space-12); }

.booking-title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.booking-lead {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--color-text-secondary);
}

/* Сводка предыдущего шага и ссылка «Изменить» рядом с ней */
.booking-recap {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.link-underline {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}
.link-underline:hover { color: var(--color-text-secondary); }

/* Короткая пометка на месте самих данных */
.data-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
}

/* Пояснение поверх списка: подходящих мастеров не осталось, выбор сброшен */
.notice {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-16);
  border: var(--border-width-hairline) solid var(--color-info);
  border-radius: var(--radius-lg);
  background: var(--color-info-surface);
  color: var(--color-info);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}
.notice a { text-decoration: underline; text-underline-offset: var(--space-4); }

/* --- Услуги (Booking 01) ------------------------------------------------------------ */

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

.service {
  position: relative;
  display: flex;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--border-width-default) solid var(--color-input-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  cursor: pointer;
}
.service:hover { border-color: var(--color-text-primary); }

/* Выбранная услуга: тёмный контур и подложка карточки */
.service:has(.service-input:checked) {
  border-color: var(--color-text-primary);
  background: var(--color-surface);
}

/* Сам флажок скрыт, но остаётся в фокусе клавиатуры: кольцо получает карточка */
.service-input,
.staff-input {
  position: absolute;
  width: var(--border-width-hairline);
  height: var(--border-width-hairline);
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.service:has(.service-input:focus-visible),
.staff:has(.staff-input:focus-visible),
.staff-any:has(.staff-input:focus-visible) { box-shadow: var(--button-focus-ring); }

.service-box {
  width: var(--space-24);
  height: var(--space-24);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: var(--border-width-default) solid var(--color-text-primary);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: transparent;
  font-size: var(--font-size-body-small);
  line-height: 1;
}
.service:has(.service-input:checked) .service-box {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.service-body { display: flex; flex-direction: column; gap: var(--space-4); flex-grow: 1; }

.service-name {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-bold);
}

.service-desc {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.service-meta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
}

.service-duration { font-size: var(--font-size-caption); color: var(--color-text-secondary); letter-spacing: normal; }

.service-price {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-extrabold);
}

/* --- Мастера (Booking 02) ------------------------------------------------------------ */

/* «Любой свободный мастер» — та же карточка, но в строку и во всю ширину */
.staff-any {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24);
  border: var(--border-width-default) solid var(--color-input-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  cursor: pointer;
}
.staff-any:hover { border-color: var(--color-text-primary); }

.staff-any:has(.staff-input:checked) {
  border-color: var(--color-text-primary);
  background: var(--color-surface);
}

/* Три головы друг за другом — знак «кто угодно из команды» */
.staff-any-mark {
  width: var(--space-48);
  height: var(--space-48);
  flex-shrink: 0;
  position: relative;
}
.staff-any-mark i {
  position: absolute;
  width: var(--space-32);
  height: var(--space-32);
  border: var(--border-width-default) solid var(--color-background);
  border-radius: var(--radius-pill);
}
.staff-any-mark i:nth-child(1) { top: 0; left: 0; background: var(--color-border); }
.staff-any-mark i:nth-child(2) { top: 0; right: 0; background: var(--color-text-secondary); }
.staff-any-mark i:nth-child(3) { bottom: 0; left: calc(var(--space-48) / 2 - var(--space-32) / 2); background: var(--color-text-primary); }

.staff-any-body { flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-4); }

.staff-any-name { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); }

.staff-any-desc {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

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

.staff {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-input-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  cursor: pointer;
}
.staff:hover { border-color: var(--color-text-primary); }

.staff:has(.staff-input:checked) {
  border-color: var(--color-text-primary);
  background: var(--color-surface);
}

/* Галочка выбранного мастера — поверх фотографии */
.staff-check,
.staff-any-check {
  display: grid;
  place-items: center;
  width: var(--space-24);
  height: var(--space-24);
  flex-shrink: 0;
  border: var(--border-width-default) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: transparent;
  font-size: var(--font-size-caption);
  line-height: 1;
  letter-spacing: normal;
}
.staff-check { position: absolute; top: var(--space-12); right: var(--space-12); z-index: 1; }

.staff:has(.staff-input:checked) .staff-check,
.staff-any:has(.staff-input:checked) .staff-any-check {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.staff-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Фотографии у мастера может не быть — тогда на её месте инициалы */
.staff-initials {
  display: grid;
  place-items: center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-h3);
}

.staff-body { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }

.staff-name { font-size: var(--font-size-body-small); font-weight: var(--font-weight-bold); }

.staff-spec,
.staff-line {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
}

.staff-line { margin-top: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-8); }

/*
 * Мастер, который не делает часть выбранных услуг: карточка гаснет целиком,
 * фотография уходит в серый, а под ней стоит строка с тем, чего он не делает.
 * Пояснение обязательно: без него погашенная карточка выглядит поломкой.
 */
.staff-off,
.staff-any-off { cursor: not-allowed; }
.staff-off:hover,
.staff-any-off:hover { border-color: var(--color-input-border); }

.staff-off { border-color: var(--color-slot-disabled-border); }
.staff-off:hover { border-color: var(--color-slot-disabled-border); }
.staff-off .staff-photo { filter: grayscale(1); opacity: .5; }
.staff-off .staff-name { color: var(--color-button-ghost-text-disabled); }
.staff-off .staff-spec,
.staff-off .staff-line { color: var(--color-slot-disabled-text); }
.staff-any-off .staff-any-name,
.staff-any-off .staff-any-desc { color: var(--color-button-ghost-text-disabled); }
.staff-any-off .staff-any-check { border-color: var(--color-button-secondary-border-disabled); }

.staff-missing {
  margin-top: var(--space-8);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-button-ghost-text-disabled);
}

/* --- Сводка над содержимым (Booking 03) ------------------------------------------
   Полоса «мастер · услуги · длительность и цена» под указателем шагов. */

.booking-summary {
  flex-shrink: 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  padding-inline: var(--container-padding-desktop);
}

.booking-summary-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-block: var(--space-24);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.booking-summary-name { font-weight: var(--font-weight-bold); color: var(--color-text-primary); }

/* --- Плашка переноса (Booking 06) ------------------------------------------------
   Человек двигает существующую запись, а не создаёт новую: старое время видно
   всё время, и выйти из переноса можно в любой момент. */

.move-banner {
  flex-shrink: 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  padding-inline: var(--container-padding-desktop);
}

.move-banner-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-block: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.move-banner-text { font-size: var(--font-size-button); font-weight: var(--font-weight-bold); }

/* Остаток переносов — предупреждающим цветом: их число конечно */
.move-limit {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
}

/* День текущей записи в календаре: пунктир, чтобы не путать с выбранным */
.calendar-day.is-current {
  border-style: dashed;
  border-color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.legend-current { border-style: dashed; border-color: var(--color-text-primary); }

/* 11 колонок сетки — на месте 1100px из прототипа */
.booking-inner-full {
  max-width: calc(var(--container-max-width) / var(--container-columns) * 11);
}

/* --- Дата и время: две колонки ------------------------------------------------------
   Календарь занимает 4 колонки сетки (на месте 400px), окна — остаток. */

.time-layout {
  display: grid;
  grid-template-columns: calc(var(--container-max-width) / var(--container-columns) * 4) 1fr;
  gap: var(--space-48);
  align-items: start;
}

.time-side { display: flex; flex-direction: column; gap: var(--space-16); }

/* --- Календарь месяца ------------------------------------------------------------- */

.calendar {
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.calendar-title { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-bold); }

.calendar-arrow {
  padding: 0 var(--space-8);
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  line-height: 1;
  cursor: pointer;
}
.calendar-arrow:hover { color: var(--color-text-secondary); }
.calendar-arrow:disabled { color: var(--color-button-ghost-text-disabled); cursor: default; }
.calendar-arrow:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

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

.calendar-weekdays {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  color: var(--color-text-secondary);
  text-align: center;
}

/*
 * Состояния дня — ровно легенда из прототипа, и каждое приходит из ответа
 * `/api/availability/month`: свободный день — has_slots, выходной и прошедший —
 * closed_reason, «сегодня» — первый день месяца без признака past_date.
 */
.calendar-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-slot-free-background);
  color: var(--color-slot-free-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.calendar-day:hover { background: var(--color-surface); }
.calendar-day:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.calendar-day:disabled { cursor: default; }
.calendar-day:disabled:hover { background: var(--color-slot-free-background); }

/* Нет свободных окон и прошедший день — только текст гаснет */
.calendar-day.is-empty,
.calendar-day.is-past { color: var(--color-slot-disabled-text); }

/* Выходной мастера — ещё и подложка */
.calendar-day.is-off {
  background: var(--color-surface);
  color: var(--color-slot-disabled-text);
}
.calendar-day.is-off:disabled:hover { background: var(--color-surface); }

.calendar-day.is-today { border-color: var(--color-text-primary); font-weight: var(--font-weight-extrabold); }

.calendar-day.is-selected {
  background: var(--color-slot-selected-background);
  border-color: var(--color-slot-selected-border);
  color: var(--color-slot-selected-text);
  font-weight: var(--font-weight-bold);
}
.calendar-day.is-selected:hover { background: var(--color-slot-selected-background); }

.calendar-note {
  margin: var(--space-16) 0 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
}

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

.legend { display: flex; flex-direction: column; gap: var(--space-8); }
.legend-item { display: flex; align-items: center; gap: var(--space-8); }

.legend-swatch {
  width: var(--space-16);
  height: var(--space-16);
  flex-shrink: 0;
  border: var(--border-width-default) solid var(--color-input-border-disabled);
  border-radius: var(--radius-sm);
  background: var(--color-slot-free-background);
}
.legend-free { border-color: var(--color-slot-free-border); }
.legend-today { border-color: var(--color-text-primary); }
.legend-off { background: var(--color-surface); }
.legend-selected {
  background: var(--color-slot-selected-background);
  border-color: var(--color-slot-selected-border);
}

.legend-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
}

/* --- Окна дня ---------------------------------------------------------------------- */

.slots { display: flex; flex-direction: column; gap: var(--space-32); }

.slots-date {
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}

.slot-group { display: flex; flex-direction: column; gap: var(--space-12); }

.slot-group-title {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  letter-spacing: var(--letter-spacing-caption);
  line-height: var(--line-height-caption);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

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

.slot {
  padding: var(--space-16) 0;
  border: var(--border-width-default) solid var(--color-slot-free-border);
  border-radius: var(--radius-md);
  background: var(--color-slot-free-background);
  color: var(--color-slot-free-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  cursor: pointer;
}
.slot:hover { border-color: var(--color-text-primary); }
.slot:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

/*
 * Недоступное время не прячется, а гаснет и перечёркивается: человек видит,
 * что день не пустой. Одно состояние на все причины — API отдаёт только
 * свободные окна и не говорит, занято время или до закрытия не осталось
 * места под визит. Поэтому под сеткой стоит поясняющая подпись.
 */
.slot:disabled {
  border-color: var(--color-slot-busy-border);
  background: var(--color-slot-busy-background);
  color: var(--color-slot-busy-text);
  text-decoration: line-through;
  cursor: default;
}
.slot:disabled:hover { border-color: var(--color-slot-busy-border); }

.slot.is-selected {
  background: var(--color-slot-selected-background);
  border-color: var(--color-slot-selected-border);
  color: var(--color-slot-selected-text);
}

.slots-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.slots-hint {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
}

/* --- Нет свободного времени (Booking 03a) --------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-12);
  padding: var(--space-48) var(--space-32);
  border: var(--border-width-hairline) dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.empty-title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.empty-text {
  margin: 0;
  max-width: calc(var(--container-max-width) / var(--container-columns) * 4);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--color-text-secondary);
}

.empty-state .btn { margin-top: var(--space-8); padding: var(--button-padding-large); }

.empty-links { margin-top: var(--space-8); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-24); }

/* --- Загрузка -------------------------------------------------------------------------
 * Пустая сетка и «нет свободного времени» — разные вещи, поэтому на время
 * запроса стоит спиннер с подписью, а не пустое место.
 *
 * Спиннер — компонент дизайн-системы (28px, граница 3px, оборот за 0.8s).
 * Размер и толщина взяты ближайшими ступенями токенов; длительности вращения
 * в шкале нет вовсе — она объявлена здесь, как и в самом компоненте. */

.loading {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-32);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}

.spinner {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  border: var(--border-width-focus) solid var(--color-input-border-disabled);
  border-top-color: var(--color-text-primary);
  border-radius: var(--radius-pill);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Тем, кто просил убрать движение, спиннер показывается статичным кольцом */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* --- Подтверждение (Booking 04) --------------------------------------------------
   Слева форма, справа сводка визита. Сводка занимает 4 колонки сетки —
   на месте 380px из прототипа — и липнет к верху при прокрутке формы. */

.confirm-layout {
  display: grid;
  grid-template-columns: 1fr calc(var(--container-max-width) / var(--container-columns) * 4);
  gap: var(--space-48);
  align-items: start;
}

.confirm-col { display: flex; flex-direction: column; gap: var(--space-24); }

.confirm-form { display: flex; flex-direction: column; gap: var(--space-24); }

/* --- Гость (Booking 04a) --------------------------------------------------------
 * Вкладки «Вход» и «Регистрация» встают на место формы. Сводка и таймер справа
 * при этом продолжают идти: удержание слота авторизации не требует, и бронь
 * гостя жива, пока он заводит аккаунт.
 */

.guest { display: flex; flex-direction: column; gap: var(--space-24); }

.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--border-width-default) solid var(--color-input-border-disabled);
}

.tab {
  margin-bottom: calc(-1 * var(--border-width-default));
  padding: var(--space-12) var(--space-24);
  border: 0;
  border-bottom: var(--border-width-focus) solid transparent;
  background: transparent;
  color: var(--color-button-ghost-text-disabled);
  font-family: var(--font-family-base);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  cursor: pointer;
}
.tab:hover { color: var(--color-text-secondary); }
.tab:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.tab.is-active {
  border-bottom-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.guest-note,
.guest-switch {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
  text-align: center;
}
.guest-note { text-align: left; }

/* Переключатель вкладки внутри текста: кнопка, но выглядит ссылкой */
.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
  cursor: pointer;
}
.link-button:hover { color: var(--color-text-secondary); }
.link-button:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.confirm-side {
  position: sticky;
  top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* --- Поля формы -------------------------------------------------------------------
   Те же значения, что в auth.css: файл общий на четыре экрана авторизации,
   и тащить его сюда ради трёх полей незачем. */

.field { display: flex; flex-direction: column; gap: var(--space-4); }

.field-label {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.field-hint { font-weight: var(--font-weight-regular); color: var(--color-button-ghost-text-disabled); }

.input,
.textarea {
  width: 100%;
  padding: var(--input-padding);
  border: var(--border-width-default) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--input-font-size);
  outline: none;
}
.input:focus,
.textarea:focus { border-color: var(--color-input-border-focus); box-shadow: var(--input-focus-ring); }

/* Поле, на которое указал сервер или проверка формы */
.input-error,
.input-error:focus { border-color: var(--color-input-border-error); }

.textarea { min-height: var(--space-64); resize: vertical; line-height: var(--line-height-body-medium); }

/* Имя и телефон приходят из профиля и меняются там же — здесь они только видны */
.input[readonly] {
  border-color: var(--color-input-border-disabled);
  background: var(--color-input-background-disabled);
}

.field-error {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-input-text-error);
}

/* Ответ сервера на форме — правило 7. Те же значения, что и в auth.css */
.form-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-hairline) solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-danger-surface);
  color: var(--color-danger);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

.form-error-code {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
}

.agree { display: flex; align-items: flex-start; gap: var(--space-8); }

.agree input {
  margin: 0;
  width: var(--space-16);
  height: var(--space-16);
  flex-shrink: 0;
  accent-color: var(--color-text-primary);
}

.agree label { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }
.agree a { text-decoration: underline; text-underline-offset: var(--space-4); }

/* Пункт, за которым ещё нет страницы (System 01), — текстом, а не ссылкой в никуда */
.pending { text-decoration: underline; text-underline-offset: var(--space-4); }

/* --- Таймер удержания слота ---------------------------------------------------------
 * Три состояния: бронь идёт, осталось меньше минуты, бронь снята. Цвета —
 * статусные пары токенов, ровно как в прототипе.
 *
 * Цифры набраны табличными: моноширинного шрифта в системе нет, а без
 * выравнивания цифр таймер дёргается на каждой секунде.
 */

.hold-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  border: var(--border-width-hairline) solid var(--color-success);
  border-radius: var(--radius-lg);
  background: var(--color-success-surface);
  color: var(--color-success);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
}

.hold-time {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
}

.hold-bar.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.hold-bar.is-expired {
  border-color: var(--color-input-border-disabled);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.hold-bar.is-expired .hold-time { color: var(--color-button-ghost-text-disabled); }

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

.summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
}

/* Бронь снята или время заняли — сводка гаснет вместе с кнопкой */
.summary-card.is-void { opacity: .6; }
.summary-card.is-void .summary-when-text { text-decoration: line-through; }

.summary-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }

.summary-master { display: flex; align-items: center; gap: var(--space-12); }

.summary-avatar {
  width: var(--space-48);
  height: var(--space-48);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
}
.summary-avatar img { width: 100%; height: 100%; object-fit: cover; }

.summary-name { font-size: var(--font-size-body-small); font-weight: var(--font-weight-bold); }

.summary-when-text {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.summary-link {
  flex-shrink: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  letter-spacing: normal;
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}
.summary-link:hover { color: var(--color-text-secondary); }

.summary-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
}

.summary-service { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--font-size-body-small); }
.summary-service b { font-weight: var(--font-weight-semibold); }
.summary-services .summary-link { align-self: flex-start; }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
}

.summary-total-label { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-extrabold); }
.summary-total-value { font-size: var(--font-size-h4); font-weight: var(--font-weight-extrabold); }

.summary-card .btn { width: 100%; }
.summary-card .btn-large { padding: var(--button-padding-large); }

/* --- Время заняли (Booking 04b) ---------------------------------------------------------
   Состояние того же экрана: сообщение и готовые альтернативы из ответа сервера
   встают над формой, сводка справа гаснет. */

.conflict {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border: var(--border-width-hairline) solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

.conflict-title {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h4);
}

.conflict-text {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

.conflict-options { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.conflict-option {
  padding: var(--button-padding-small);
  border: var(--border-width-default) solid var(--color-button-danger-border);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-button-danger-text-outline);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.conflict-option:hover {
  background: var(--color-button-danger-background);
  color: var(--color-button-danger-text);
}
.conflict-option:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.conflict-link {
  align-self: flex-start;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

/* --- Вы записаны (Booking 05) -------------------------------------------------------- */

.done {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  padding: var(--space-96) var(--container-padding-desktop);
  text-align: center;
}

.done-mark {
  width: var(--space-64);
  height: var(--space-64);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
}

.done-title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.done-card {
  width: 100%;
  max-width: calc(var(--container-max-width) / var(--container-columns) * 5);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
  text-align: left;
}

.done-head { display: flex; align-items: center; gap: var(--space-12); }
.done-name { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-bold); }
.done-services { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

.done-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  font-size: var(--font-size-body-small);
}
.done-row-sep { padding-top: var(--space-16); border-top: var(--border-width-hairline) solid var(--color-input-border-disabled); }
.done-row dt { color: var(--color-text-secondary); }
.done-row dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; }

.done-total { font-size: var(--font-size-body-medium); }
.done-total dt,
.done-total dd { font-weight: var(--font-weight-extrabold); color: var(--color-text-primary); }

.done-note {
  margin: 0;
  max-width: calc(var(--container-max-width) / var(--container-columns) * 4);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}

/* --- Было и стало (Booking 07) -------------------------------------------------------
   Две карточки рядом: старое время перечёркнуто и приглушено, новое обведено. */

.move-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  width: 100%;
  max-width: calc(var(--container-max-width) / var(--container-columns) * 6);
  text-align: left;
}

.move-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-24);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
}

.move-cell-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.move-cell-value { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-extrabold); }

.move-cell-was { background: var(--color-neutral-50); }
.move-cell-was .move-cell-label { color: var(--color-button-ghost-text-disabled); }
.move-cell-was .move-cell-value {
  color: var(--color-button-ghost-text-disabled);
  font-weight: var(--font-weight-bold);
  text-decoration: line-through;
}

.move-cell-now { border-width: var(--border-width-focus); border-color: var(--color-text-primary); }

.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}
.btn-secondary:hover { background: var(--color-button-secondary-background-hover); }

/* --- Нижняя панель ------------------------------------------------------------------
   Прилипает к низу окна и остаётся на виду при прокрутке списка. */

.booking-bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-shrink: 0;
  border-top: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-background);
  padding-inline: var(--container-padding-desktop);
}

.booking-bar-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-block: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

/* Чего не хватает для «Далее» — читается рядом с самой кнопкой */
.booking-bar-note {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.booking-bar-total {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
}

/* --- Кнопки --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--button-padding-medium);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size-medium);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  cursor: pointer;
}
.btn:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.btn-primary {
  background: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
}
.btn-primary:hover { background: var(--color-button-primary-background-hover); }

.btn-primary:disabled {
  background: var(--color-button-primary-background-disabled);
  color: var(--color-button-primary-text-disabled);
  cursor: default;
}

.btn-ghost { background: transparent; color: var(--color-button-ghost-text); }
.btn-ghost:hover { background: var(--color-button-ghost-background-hover); }

.btn-sm { padding: var(--button-padding-small); font-size: var(--button-font-size-small); }

/* --- Ошибка загрузки ------------------------------------------------------------------
   Правило 7: ответ сервера человек читает на странице, а не в консоли. */

.load-error {
  flex-shrink: 0;
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-bottom: var(--border-width-hairline) solid var(--color-danger);
  padding-inline: var(--container-padding-desktop);
}

.load-error-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-block: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--font-size-body-small);
}

.load-error .btn {
  border-color: var(--color-button-danger-border);
  color: var(--color-button-danger-text-outline);
  background: transparent;
}
.load-error .btn:hover {
  background: var(--color-button-danger-background);
  color: var(--color-button-danger-text);
}

/* --- Заглушки на время загрузки ---------------------------------------------------------
   Пустого места на месте данных не остаётся: до ответа API стоят блоки той же
   формы. Мигания у них нет — шкалы длительностей в системе не объявлено. */

.skeleton { background: var(--color-surface); border-radius: var(--radius-lg); color: transparent; }
.skeleton-service { height: var(--space-96); }
.skeleton-staff { aspect-ratio: 3 / 5; }

/* --- Планшет: 768–1199px ------------------------------------------------------------- */

@media (max-width: 1199px) {
  .booking-header-inner,
  .booking-steps,
  .booking-summary,
  .move-banner,
  .booking-main,
  .booking-bar,
  .load-error { padding-inline: var(--container-padding-tablet); }

  .staff-grid { grid-template-columns: repeat(3, 1fr); }
  .step { padding-inline: var(--space-12); }
  .step-line { width: var(--space-32); }

  /* Календарь ужимается вместе с колонкой, а не держит свои 400px */
  .time-layout { grid-template-columns: 5fr 7fr; gap: var(--space-32); }
  .confirm-layout { grid-template-columns: 7fr 5fr; gap: var(--space-32); }

  .done { padding-block: var(--space-48); }
}

/* --- Мобильный: до 767px ---------------------------------------------------------------
   Календарь встаёт над окнами, сводка визита — под форму, нижняя панель
   переносится в две строки, кнопка действия — во всю ширину. Подписи шагов
   остаются: они переносятся по слогам, а не пропадают. */

@media (max-width: 767px) {
  .booking-header-inner,
  .booking-steps,
  .booking-summary,
  .move-banner,
  .booking-main,
  .booking-bar,
  .load-error { padding-inline: var(--container-padding-mobile); }

  /* Календарь встаёт над окнами: рядом им на узком экране не поместиться */
  .time-layout { grid-template-columns: 1fr; gap: var(--space-32); }
  .slot-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .empty-links { flex-direction: column; align-items: center; gap: var(--space-12); }
  .empty-state { padding: var(--space-32) var(--space-24); }

  /*
   * Пальцем нужно попадать, а не целиться. Окно и день календаря получают
   * высоту в ступень --space-48: у слота она и так выходила из отступов,
   * а у дня зависела от ширины экрана и на узком проваливалась.
   */
  .slot { min-height: var(--space-48); }

  /*
   * Семь колонок на узком экране — предел: при полях страницы 20px, отступе
   * карточки 12px и зазоре 4px на телефоне 375px ячейка выходит ~41px.
   * Поэтому отступ карточки здесь уменьшен, а зазор оставлен минимальным:
   * каждый лишний пиксель между ячейками отнимается у самой ячейки.
   */
  .calendar { padding: var(--space-12); }
  .calendar-day { min-height: var(--space-32); }

  /* Стрелки месяца — такая же цель, как и всё остальное */
  .calendar-arrow {
    min-width: var(--space-48);
    min-height: var(--space-48);
    padding: 0;
  }

  /* Сводка визита уезжает под форму и перестаёт липнуть: на узком экране
     липкий блок съел бы половину окна */
  .confirm-layout { grid-template-columns: 1fr; gap: var(--space-32); }
  .confirm-side { position: static; }

  .done { padding: var(--space-32) var(--container-padding-mobile); gap: var(--space-24); }
  .done-title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
  .done-card { padding: var(--space-24); }

  /* Кнопки экрана успеха — в столбец во всю ширину, а не в три обрубка */
  .done-actions { flex-direction: column; align-self: stretch; }
  .done-actions .btn { width: 100%; }

  /* «Было / стало» переноса: рядом две карточки не встают */
  .move-pair { grid-template-columns: 1fr; }

  /* Строки «ключ — значение» переносятся, а не жмутся к правому краю */
  .done-row { flex-wrap: wrap; gap: var(--space-4); }
  .done-row dd { text-align: left; }

  /* Вкладки гостя и альтернативы занятого слота — целиком под палец */
  .tabs { gap: 0; }
  .tab { flex: 1 1 0; padding-inline: var(--space-8); text-align: center; }
  .conflict-option { flex: 1 1 auto; min-height: var(--space-48); }

  .booking-main { padding-block: var(--space-32); }
  .booking-inner { gap: var(--space-32); }

  .booking-title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }

  /*
   * Указатель шагов на узком экране: четыре подписи в строку не встают
   * в одну строчку каждая — поэтому они переносятся. Шаги делят ширину
   * поровну (flex: 1 1 0 плюс min-width: 0), «Подтверждение» рвётся
   * по слогам через hyphens — у страниц стоит lang="ru", и браузер знает,
   * где переносить. Прятать подписи нельзя: на телефоне человек должен
   * видеть тот же путь, что и на компьютере.
   */
  .booking-steps { padding-block: var(--space-24); }
  .steps { width: 100%; }

  .step { flex: 1 1 0; min-width: 0; padding-inline: var(--space-4); }

  .step-label {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: center;
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    letter-spacing: normal;
  }

  .step-line { width: var(--space-8); }

  .service-grid,
  .staff-grid { grid-template-columns: 1fr; }

  .staff-any { flex-wrap: wrap; }

  /*
   * Нижняя панель: подпись «чего не хватает» занимает свою строку, под ней
   * итог и кнопка действия. Панель липкая, а не фиксированная, поэтому
   * содержимое она не перекрывает: в конце списка она встаёт в поток
   * и последний слот остаётся виден целиком.
   */
  .booking-bar-inner { flex-wrap: wrap; gap: var(--space-12); padding-block: var(--space-12); }
  .booking-bar-note { order: 1; width: 100%; }
  .booking-bar-total { order: 2; }
  .booking-bar .btn-ghost { order: 3; }
  .booking-bar .btn-primary { order: 4; flex-grow: 1; }

  /* Плашка переноса и сводка визита тоже сворачиваются в столбец */
  .move-banner-inner { padding-block: var(--space-12); gap: var(--space-8); }
  .booking-summary-inner { padding-block: var(--space-16); gap: var(--space-4); }
}