/* Booking flow in the VibeTint design system. The class names here are the ones public/js/booking.js
   renders and toggles (service-option, option-card, calendar-day, time-slot, selected, active, …). */

/* Names the script uses in inline styles, mapped to the design tokens. */
:root { --text-secondary: var(--ink-muted); --success-color: #0f7a4c; }
@keyframes slideInRight { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOutRight { from { transform: none; opacity: 1; } to { transform: translateX(24px); opacity: 0; } }

.booking-section { padding-top: var(--space-12); }

/* ---- Progress: 01–05 in mono, the current step under the red line */
.booking-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-bottom: var(--space-12); }
.progress-step { border-top: 2px solid var(--line); padding-top: var(--space-3); color: var(--ink-muted); min-width: 0; }
.progress-step .step-number { font: 600 14px/20px var(--font-mono); }
.progress-step .step-label { font: 600 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; margin-top: var(--space-1); display: none; }
.progress-step.active { border-top-color: var(--redline); color: var(--ink); }
.progress-step.active .step-number, .progress-step.completed .step-number { color: var(--redline-text); }
.progress-step.active .step-label { display: block; }
.progress-step.completed { border-top-color: var(--line-strong); }

/* ---- Steps */
.booking-step { display: none; scroll-margin-top: 96px; }
.booking-step.active { display: grid; gap: var(--space-8); }
.step-header { display: grid; gap: var(--space-2); }
.step-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.button-feedback { flex-basis: 100%; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.validation-icon { display: none; }

/* ---- Step 1 and 2: selectable cards */
.service-grid, .option-grid { display: grid; gap: var(--space-4); }
.service-option, .option-card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-6); cursor: pointer; display: grid; gap: var(--space-2); align-content: start;
  --c: var(--chamfer-lg); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); transition: background .15s, box-shadow .15s; }
.service-option:hover, .option-card:hover { background: var(--surface-raised); }
.service-option.selected, .option-card.selected { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--redline), inset 0 -4px 0 var(--redline); }
.service-option h3, .option-card h4 { font: 600 18px/26px var(--font-sans); margin: 0; padding-right: var(--space-6); }
.service-option p, .option-description { color: var(--ink-muted); font-size: 14px; line-height: 22px; margin: 0; }
.service-duration, .option-duration { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.option-price { font: 600 32px/1 var(--font-mono); letter-spacing: -.03em; color: var(--redline-text); }

/* ---- Step 3: date and time */
.datetime-container { display: grid; gap: var(--space-8); }
.date-selection, .time-selection { display: grid; gap: var(--space-4); align-content: start; }
.calendar-header { font: 800 36px/1 var(--font-display); text-transform: uppercase; margin-bottom: var(--space-4); }
.calendar-week { display: grid; grid-template-columns: 44px 1fr 44px; gap: var(--space-2); align-items: stretch; }
.calendar-nav { appearance: none; background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 20px/1 var(--font-mono); cursor: pointer; }
.calendar-nav:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink); }
.calendar-nav:disabled { color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; }
.week-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.calendar-day { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-3) var(--space-1); text-align: center; cursor: pointer; display: grid; gap: var(--space-1); min-width: 0; }
.calendar-day:hover { background: var(--surface-raised); }
.calendar-day .day-label { font: 600 12px/16px var(--font-sans); letter-spacing: .14em; color: var(--ink-muted); }
.calendar-day .day-number { font: 600 18px/24px var(--font-mono); }
.calendar-day.selected { background: var(--surface-raised); box-shadow: inset 0 -4px 0 var(--redline), inset 0 0 0 1px var(--redline); }
.calendar-day.selected .day-number { color: var(--redline-text); }
.calendar-day.disabled { opacity: .35; cursor: not-allowed; }
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-2); min-height: 48px; }
.time-slot { font: 500 14px/20px var(--font-mono); text-align: center; padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.time-slot:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.time-slot.selected { background: var(--blush); box-shadow: inset 0 0 0 1px var(--redline); }
.time-slots > p { text-align: left !important; margin: 0; }

/* ---- Step 5: summary */
.booking-summary { display: grid; gap: var(--space-4); }
.summary-card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-6); display: grid; align-content: start; }
.summary-card h3 { margin-bottom: var(--space-3); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--line); font: 500 14px/20px var(--font-mono); }
.summary-row .label { color: var(--ink-muted); flex: none; }
.summary-row .value { text-align: right; overflow-wrap: anywhere; }
.summary-row.total .value { font: 600 22px/28px var(--font-mono); color: var(--redline-text); }
.checkbox-label { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.checkbox-label input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--redline); }
.checkbox-label a { color: var(--redline-text); }

.error-message { background: var(--blush); border-left: 2px solid var(--redline); padding: var(--space-3) var(--space-4); }

/* ---- Success */
.booking-success { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-8) var(--space-6); gap: var(--space-6);
  --c: var(--chamfer-lg); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); }
.booking-success[style*="block"] { display: grid !important; }
.booking-success__tag { color: var(--ok); }
.success-details { display: grid; gap: var(--space-3); }
#confirmationId { font-family: var(--font-mono); color: var(--redline-text); }

/* ---- Terms modal */
.terms-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(12, 9, 10, .82); padding: var(--space-4); align-items: center; justify-content: center; }
.terms-modal.show { display: flex; }
.terms-modal-content { background: var(--surface); box-shadow: var(--lift), inset 0 0 0 1px var(--line); width: 100%; max-width: 760px; max-height: min(86vh, 900px); display: grid; grid-template-rows: auto 1fr auto; }
.terms-modal-header, .terms-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.terms-modal-header { border-bottom: 1px solid var(--line); }
.terms-modal-footer { border-top: 1px solid var(--line); justify-content: flex-end; flex-wrap: wrap; }
.terms-modal-close { appearance: none; background: none; border: 0; color: var(--ink); font-size: 28px; line-height: 1; width: 44px; height: 44px; cursor: pointer; }
.terms-modal-body { overflow-y: auto; padding: var(--space-6); }
.terms-content { display: grid; gap: var(--space-3); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.terms-content h3 { font: 600 18px/26px var(--font-sans); color: var(--ink); margin-top: var(--space-4); }
.terms-content h4 { font: 600 14px/22px var(--font-sans); color: var(--ink); }
.terms-content ul { list-style: disc; padding-left: var(--space-6); display: grid; gap: var(--space-1); }
.terms-content strong { color: var(--ink); }
.terms-content a { color: var(--redline-text); }
.terms-highlight-box, .terms-warning-box { background: var(--blush); border-left: 2px solid var(--redline); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); color: var(--ink); }

@media (min-width: 640px) {
  .progress-step .step-label { display: block; }
  .service-grid, .option-grid, .booking-summary { grid-template-columns: repeat(2, 1fr); }
  .booking-success { padding: var(--space-12); }
}
@media (min-width: 960px) {
  .service-grid, .option-grid { grid-template-columns: repeat(3, 1fr); }
  .datetime-container { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.service-option:focus-visible, .option-card:focus-visible, .calendar-day:focus-visible, .time-slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* waiting list, on a day with no free time */
.waitlist { grid-column: 1 / -1; margin-top: var(--space-3); padding: var(--space-4); box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-sm); }
.waitlist p { margin: 0 0 var(--space-3); }
.waitlist form { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; align-items: end; }
.waitlist form .vt-btn, .waitlist-msg { grid-column: 1 / -1; justify-self: start; }
.waitlist-msg { color: var(--redline-text); margin: 0; }
.waitlist-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) { .waitlist form { grid-template-columns: 1fr; } }