/* Booking presentation only: existing selections, schedules and submission stay in charge. */
html[data-theme="light"] { --bg:#f7f5f1; --panel-bg:#fff; --panel-border:#e6e1da; --text:#25221e; --muted:#716b63; }
html[data-theme="dark"] { --bg:#171918; --panel-bg:#212522; --panel-border:#394039; --text:#f1f3ec; --muted:#b7bdb4; }
body { background:var(--bg); }
.booking-main { max-width:720px; padding:28px 20px 32px; }
#salonInfo { display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:18px; text-align:start; padding:8px 4px 24px; margin-bottom:0; }
#salonLogo { grid-column:1; grid-row:1 / span 3; width:72px; height:72px; margin:0; border-radius:22px; box-shadow:none; border:1px solid var(--panel-border); }
#salonName { grid-column:2; font-size:clamp(22px,4vw,30px); line-height:1.5; margin:0; overflow-wrap:anywhere; }
#salonAddress { grid-column:2; color:var(--muted); margin:2px 0; }
#salonInfo > .inline-flex { grid-column:2; justify-self:start; padding:0; border:0; background:transparent; margin-top:6px; color:var(--muted); }
#salonInfo .booking-display-controls { grid-column:1 / -1; position:static; width:100%; max-width:none; margin:20px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--panel-border); border-radius:0; box-shadow:none; background:transparent; justify-content:flex-end; gap:8px; }
#salonInfo .theme-toggle { min-height:44px; padding:8px 14px; box-shadow:none; font-size:13px; color:var(--text); background:var(--panel-bg); border:1px solid var(--panel-border); }
.booking-shell { border-radius:24px; padding:26px; box-shadow:0 12px 40px #161e1810; min-height:0; }
#bookingForm { padding-bottom:8px; }
.step-pane { min-height:0; }
.stepper-row { padding:0 0 22px; margin-bottom:24px; gap:8px; border-bottom:1px solid var(--panel-border); counter-reset:booking-step; }
.stepper-row::before,.stepper-row::after { display:none; }
.step-chip { gap:8px; counter-increment:booking-step; }
.step-dot { width:28px; height:28px; transform:none; display:grid; place-items:center; border:0; background:var(--panel-border); color:var(--muted); }
.step-dot::before { content:counter(booking-step); font:700 12px/1 system-ui; }
.step-chip.active .step-dot,.step-chip.completed .step-dot { background:#35634c!important; color:#fff; border:0; }
.step-label { font-size:12px; line-height:1.5; }
.step-chip.active .step-label { color:#35634c!important; }
html[data-theme="dark"] .step-chip.active .step-label { color:#a8d4b9!important; }
#bookingForm label { display:block; color:var(--text); font-weight:700; font-size:15px; }
.staff-photo-options { gap:10px; padding-bottom:8px; }
.staff-photo-option { flex-basis:106px; border-radius:16px; border-color:var(--panel-border); font-size:13px; }
.staff-photo-option[aria-pressed="true"] { border-color:#548569; background:#54856914; }
.person-portrait { background:#e7eee7; color:#35634c; }
.service-option { padding:16px!important; border-radius:14px!important; transition:border-color .15s,background .15s; }
.service-option.selected { border-color:#548569!important; box-shadow:inset 3px 0 #548569; background:#5485690d!important; }
#bookingForm input:not([type="hidden"]),#bookingForm select { border-radius:12px; min-height:48px; }
.calendar-shell { border-radius:16px; }
.calendar-day.selected,.quick-day-card.selected { background:#35634c!important; color:#fff!important; border-color:#35634c!important; }
.time-slots-two-row { grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; }
.time-slot { min-height:48px; font-size:15px!important; border-radius:12px!important; }
.time-slot.selected { background:#35634c!important; color:#fff!important; border-color:#35634c!important; }
html[data-theme] #timeSlots .time-slot.selected,
html[data-theme] .calendar-day.selected,
html[data-theme] .quick-day-card.selected { background:#35634c!important; color:#fff!important; border-color:#35634c!important; }
html[data-theme="dark"] .service-option { background:var(--panel-bg)!important; }
html[data-theme="dark"] .service-option.selected { background:#54856922!important; }
.sticky-booking-nav-inner { max-width:680px; border-radius:18px; padding:8px; box-shadow:0 8px 30px #111a1326; }
.step-nav-btn-main:not(:disabled) { background:#35634c!important; color:#fff!important; border-color:#35634c!important; }
.step-nav-btn-main:hover:not(:disabled) { background:#294e3b!important; }
.step-nav-btn { height:50px; border-radius:12px; }
.footer-meta { margin-top:20px; gap:12px; }
.footer-meta a { font-size:11px; }
#globalCopyrightNotice { background:transparent!important; border:0!important; margin-bottom:105px; }
.booking-display-controls :focus-visible,.staff-photo-option:focus-visible { outline:3px solid #548569; outline-offset:3px; }
@media(max-width:480px) { .booking-main { padding:20px 14px; } .booking-shell { padding:20px 16px; border-radius:20px; } #salonInfo { column-gap:14px; } .step-label { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .service-option { transition:none; } }

/* Compact logo-led header, with optional staff portraits. */
#salonInfo { display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 0 14px; text-align:center; }
#salonLogo { width:112px; height:112px; border-radius:24px; font-size:40px; margin:0; }
#salonLogo img { object-fit:contain; border-radius:inherit; }
#salonName { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#salonAddress { font-size:13px; line-height:1.5; margin:0; max-width:100%; }
#salonAddress:empty { display:none; }
#salonInfo > .inline-flex { margin:0; }
#salonInfo .booking-display-controls { margin:2px 0 0; padding:0; border:0; justify-content:center; }
#salonInfo .theme-toggle { min-height:36px; padding:6px 12px; }
.staff-photos-toggle { display:block; padding:8px 0; color:var(--text); font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.staff-photos-toggle[hidden],#staffPhotoOptions[hidden] { display:none!important; }
@media(max-width:640px) {
 .booking-main { padding:12px 12px 86px; }
 .booking-shell { padding:14px; border-radius:18px; }
 .stepper-row { padding-bottom:12px; margin-bottom:12px; }
 .step-chip { gap:4px; }
 #bookingForm > * + *,#bookingStep1 > * + *,#serviceStepBlock > * + * { margin-top:12px; }
 #bookingForm label { font-size:13px; margin-bottom:6px; }
 .service-option { padding:10px!important; }
 .footer-meta { margin-top:10px; }
 #globalCopyrightNotice { margin-bottom:80px; }
 .sticky-booking-nav-inner { padding:6px; }
 .step-nav-btn { height:44px; }
}