/* Запись по шагам, выбор дня и времени (общий с админкой), экран «Ваша запись», «Мои записи». */
.book__top { display: flex; align-items: center; gap: 12px; min-height: 30px; margin: 0 52px 10px 0 }
.book__progress { display: flex; gap: 6px; margin-left: auto }
.book__progress span { width: 22px; height: 4px; border-radius: 4px; background: var(--line-2); transition: background .3s }
.book__progress span.is-on { background: var(--accent) }
.book__sub { color: var(--muted); font-size: 14.5px; margin-bottom: 14px }
.book__step { animation: rise .3s var(--ease) both }

.optgroup { margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; margin: 0 0 8px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; text-align: left; transition: border-color .2s, background .2s }
.opt:hover { border-color: var(--accent-2) }
.opt.is-on { border-color: var(--accent); background: var(--accent-soft) }
.opt__title { font-weight: 700 }
.opt__price { font-weight: 800; white-space: nowrap }
.opt__meta { grid-column: 1 / -1; color: var(--muted); font-size: 13px }

/* Дни и время */
.days { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 12px; scroll-padding: 0 18px; scroll-snap-type: x proximity; scrollbar-width: none }
.notice { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--err-soft); color: var(--err); font-weight: 700; font-size: 14px }
.notice:empty { display: none }
.days::-webkit-scrollbar { display: none }
.day { flex: none; display: grid; justify-items: center; gap: 1px; width: 68px; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--line); background: #fff; scroll-snap-align: start; transition: border-color .2s, background .2s }
.day__wd { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: capitalize }
.day__n { font: 600 26px/1 var(--serif) }
.day__m { font-size: 11.5px; color: var(--muted) }
.day__free { margin-top: 3px; font-size: 10.5px; font-weight: 800; color: var(--ok) }
.day.is-weekend .day__wd { color: var(--accent-2) }
.day:disabled { opacity: .45; background: transparent }
.day:disabled .day__free { color: var(--faint) }
.day.is-on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink) }
.day.is-on .day__wd, .day.is-on .day__m, .day.is-on .day__free { color: var(--accent-ink) }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 4px }
.time { height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s }
.time:hover { border-color: var(--accent-2) }
.time.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.times__label { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }

.summary { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line) }
.summary b { font-size: 15.5px }
.summary span { color: var(--ink-2); font-size: 14px }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 6px; font-size: 13.5px; color: var(--ink-2); cursor: pointer }
.consent input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent) }

/* Ваша запись */
.status h2 { margin-top: 12px }
.status__when { font: 600 24px/1.2 var(--serif); color: var(--accent) }
.status__note { margin: 10px 0 14px; color: var(--ink-2); font-size: 15px }
.status__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 14px; padding: 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); font-size: 14.5px }
.status__card:empty { display: none }
.status__card dt { color: var(--muted) }
.status__card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere }
.status__call { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px }
.status.is-cancelled .status__when { color: var(--muted); text-decoration: line-through }
.status__badge .badge { animation: pop .4s var(--ease) }

/* Мои записи */
.mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left }
.mine__title { font-weight: 700 }
.mine__when { color: var(--muted); font-size: 13.5px }
.mine .badge { grid-row: 1 / span 2; grid-column: 2 }

@media (min-width: 900px) {
  .days { margin: 0 -32px; padding: 4px 32px 12px; scroll-padding: 0 32px }
}