/* Lavish Cutz — Booking flow */

.book-page { min-height: 100vh; background: var(--charcoal); color: var(--bone); display: flex; flex-direction: column; }

.book-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--page-pad); border-bottom: 1px solid var(--hairline-on-dark);
}
.book-header__title { font-size: var(--text-caption); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ash); }
.book-header__right { display: flex; align-items: center; gap: var(--space-3); }
.book-close { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.book-close svg { width: 16px; height: 16px; }

/* ---- progress ---- */
.book-progress { display: flex; gap: var(--space-2); padding: var(--space-2) var(--page-pad) 0; overflow-x: auto; }
.book-progress__step { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ash); white-space: nowrap; padding-bottom: var(--space-1); border-bottom: 2px solid transparent; }
.book-progress__step.is-active { color: var(--bone); border-color: var(--lavish-red); }
.book-progress__step.is-done { color: var(--bone); }

.book-main { flex: 1; padding: var(--space-6) var(--page-pad) var(--space-10); max-width: 980px; margin: 0 auto; width: 100%; }
.book-step { display: none; }
.book-step.is-active { display: block; animation: bookstepin 420ms var(--ease-out); }
@keyframes bookstepin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.book-step__eyebrow { margin-bottom: var(--space-2); }
.book-step__heading { font-size: clamp(2.2rem, 5vw, 3.75rem); margin-bottom: var(--space-1); }
.book-step__sub { color: var(--ash); margin-bottom: var(--space-6); font-size: var(--text-lg); }

.book-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-6); gap: var(--space-2); }

/* ---- service select ---- */
.svc-list { display: flex; flex-direction: column; }
.svc-option {
  display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2); border-top: 1px solid var(--hairline-on-dark); text-align: left; width: 100%;
  transition: background var(--dur-fast) var(--ease-out);
}
.svc-list > .svc-option:last-child { border-bottom: 1px solid var(--hairline-on-dark); }
.svc-option:hover { background: rgba(243,237,228,0.05); }
.svc-option.is-selected { background: rgba(175,30,45,0.12); }
.svc-option__num { font-family: var(--font-display); font-weight: 700; color: var(--ash); }
.svc-option__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-lg); }
.svc-option__desc { font-size: var(--text-sm); color: var(--ash); margin-top: 2px; }
.svc-option__duration { font-size: var(--text-sm); color: var(--ash); text-transform: uppercase; }
.svc-option__price { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; color: var(--lavish-red); white-space: nowrap; }
@media (max-width: 640px) { .svc-option { grid-template-columns: 36px 1fr; row-gap: 4px; } .svc-option__duration, .svc-option__price { grid-column: 2; justify-self: start; } }

/* ---- barber select ---- */
.brb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.brb-option { border: 1px solid var(--hairline-on-dark); padding: var(--space-3); text-align: left; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.brb-option:hover { border-color: var(--ash); }
.brb-option.is-selected { border-color: var(--lavish-red); background: rgba(175,30,45,0.1); }
.brb-option__mono { width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; background: rgba(243,237,228,0.06); margin-bottom: var(--space-2); }
.brb-option__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.brb-option__role { font-size: var(--text-caption); color: var(--ash); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
@media (max-width: 800px) { .brb-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- calendar ---- */
.cal { max-width: 480px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.cal__month { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-lg); }
.cal__nav { display: flex; gap: var(--space-1); }
.cal__nav button { width: 36px; height: 36px; border: 1px solid var(--hairline-on-dark); display: flex; align-items: center; justify-content: center; }
.cal__nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.cal__nav svg { width: 16px; height: 16px; }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal__dow span { font-size: var(--text-caption); color: var(--ash); text-align: center; text-transform: uppercase; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__day {
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); border: 1px solid transparent; color: var(--bone);
}
.cal__day.is-empty { visibility: hidden; }
.cal__day.is-available { border-color: var(--hairline-on-dark); }
.cal__day.is-available:hover { border-color: var(--bone); }
.cal__day.is-unavailable { color: var(--ash); opacity: 0.35; cursor: not-allowed; }
.cal__day.is-selected { background: var(--lavish-red); border-color: var(--lavish-red); font-weight: 700; }
.cal__day.is-today:not(.is-selected) { color: var(--lavish-red); font-weight: 700; }

/* ---- time slots ---- */
.time-groups { display: flex; flex-direction: column; gap: var(--space-4); }
.time-group__label { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ash); margin-bottom: var(--space-2); }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.time-slot { padding: 0.85rem 0.5rem; text-align: center; border: 1px solid var(--hairline-on-dark); font-size: var(--text-sm); font-weight: 600; }
.time-slot:hover { border-color: var(--bone); }
.time-slot.is-selected { background: var(--lavish-red); border-color: var(--lavish-red); }
.time-empty { color: var(--ash); font-size: var(--text-lg); padding: var(--space-4) 0; }

/* ---- info form ---- */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.info-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } }

/* ---- review ---- */
.review-summary { display: flex; flex-direction: column; }
.review-summary__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--hairline-on-dark); }
.review-summary__row:last-child { border-bottom: 1px solid var(--hairline-on-dark); }
.review-summary__row dt { color: var(--ash); text-transform: uppercase; font-size: var(--text-caption); letter-spacing: var(--tracking-wide); }
.review-summary__row dd { font-weight: 600; text-align: right; }

/* ---- confirmation ---- */
.book-confirm { text-align: center; padding: var(--space-6) 0; }
.book-confirm__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--lavish-red); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.book-confirm__mark svg { width: 28px; height: 28px; color: var(--bone); }
.book-confirm .display { font-size: clamp(3rem, 10vw, 6rem); }
.book-confirm__sub { color: var(--ash); font-size: var(--text-lg); margin: var(--space-3) auto var(--space-5); max-width: 42ch; }
.book-confirm__summary { text-align: left; max-width: 420px; margin: 0 auto var(--space-6); }
.book-confirm__code { font-size: var(--text-caption); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ash); margin-bottom: var(--space-5); }
.book-confirm__code strong { color: var(--bone); font-family: var(--font-display); font-size: var(--text-lg); display: block; margin-top: 4px; letter-spacing: var(--tracking-wide); }
.book-confirm__actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }