/* Booking page — service/date pickers, slot grid, confirmation panel */

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 32px;
  align-items: start;
}

@media (max-width: 860px) {
  .booking-layout { grid-template-columns: 1fr; }
}

/* ---------- Confirmation screen ---------- */

/* Replaces the wizard entirely (see js/booking.js's submit handler) once
   a booking succeeds — a persistent confirmation instead of a toast that
   disappears in a few seconds, for a 4-step form worth reassuring the
   customer actually went through. */
.booking-confirmation {
  max-width: 60ch;
  margin: 0 auto;
  padding: 48px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.booking-confirmation-heading {
  margin-bottom: 16px;
}
/* Focused via JS right after the wizard is replaced, so screen readers
   announce the state change — outline suppressed since this isn't a
   keyboard-navigated focus (no visible tab stop leads here). */
.booking-confirmation-heading:focus { outline: none; }

.booking-confirmation-summary {
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.booking-confirmation .btn-row { justify-content: center; }

/* ---------- Wizard chrome ---------- */

.wizard-progress { margin-bottom: 32px; }

.wizard-progress-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-bottom: 18px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-step { flex: 1; text-align: center; }

.wizard-step-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}

.wizard-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-muted);
}

.wizard-step-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wizard-step.is-active .wizard-step-num { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-black); }
.wizard-step.is-active .wizard-step-label { color: var(--color-text); }
.wizard-step.is-complete .wizard-step-num { border-color: var(--color-primary-dark); background: var(--color-black); color: var(--color-primary); }
.wizard-step.is-locked .wizard-step-btn { opacity: 0.45; pointer-events: none; }

.wizard-step-hint {
  text-transform: none;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 13px;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.wizard-nav .btn { min-width: 120px; }

/* Yellow border appears only once the current step's requirement is met
   (js/booking.js toggles .is-ready from the same computeStepErrors check
   Next/Book already validate against) — not shown unconditionally, so it
   reads as "you're clear to continue" rather than permanent chrome. */
#wizardNext.is-ready, #wizardBook.is-ready { border-color: var(--color-primary); }

/* ---------- Step 1: concern cards ---------- */

.concern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.concern-grid--single { grid-template-columns: 1fr; }

/* Reserves space for renderConcernGrid()'s 12 cards, populated by JS after
   load — id scoped rather than the shared .concern-grid class above, which
   also styles #concernGridOther (the single "Something Else" card, a very
   different height). Same two-tier CLS rationale as #servicesGrid in
   css/main.css (measured, not guessed) — this grid's fixed 12-item count
   makes it a genuine reservable target, unlike #slotGrid below it in the
   markup, whose item count varies per date the customer picks (a shift
   driven directly by that interaction, which Core Web Vitals' CLS metric
   already excludes rather than something to reserve space against). */
#concernGrid { min-height: 675px; }
@media (max-width: 640px) {
  #concernGrid { min-height: 1400px; }
}

.concern-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 20px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.concern-card:hover { border-color: var(--color-primary-dark); }

.concern-card .concern-checkbox {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  margin: 0;
}

.concern-card .service-icon {
  width: 32px;
  height: 5px;
  background: var(--color-primary);
  border-radius: 3px;
  margin-bottom: 12px;
}

.concern-card .concern-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-right: 26px;
}

.concern-card .concern-blurb {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.concern-card:has(.concern-checkbox:checked),
.concern-card.is-selected {
  border-color: var(--color-primary-dark);
  background: var(--color-selected-bg);
}

/* Native focus lands on the small 18px checkbox in the corner — highlight the
   whole card too so keyboard focus is easy to spot. */
.concern-card:has(.concern-checkbox:focus-visible) {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.concern-card--other { border-style: dashed; }

.concern-section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 24px 0 12px;
}

/* ---------- Sticky summary ---------- */

.summary-list { margin: 0 0 16px; font-size: 14px; }
.summary-row { margin-bottom: 12px; }
.summary-row dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.summary-row dd { margin: 0; color: var(--color-text); }
.summary-row.is-empty dd { color: var(--color-text-muted); font-style: italic; }

.slot-section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 20px 0 10px;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.slot-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-slot-border);
  background: var(--color-slot-bg);
  color: var(--color-text);
  cursor: pointer;
}

.slot-btn:hover:not(:disabled) {
  border-color: var(--color-primary-dark);
}

.slot-btn[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: var(--color-black);
}

.slot-btn.is-taken,
.slot-btn:disabled {
  background: var(--color-slot-booked-bg);
  color: var(--color-slot-booked-text);
  border-color: var(--color-slot-booked-bg);
  cursor: not-allowed;
}

.slot-empty {
  padding: 18px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
}

/* .field.is-error/.inline-error live in css/main.css (shared with the
   contact form's inline validation) — the concern grid and slot grid have
   no border of their own to recolor, so those two rely on the message text
   alone instead of .field.is-error. */

.booking-summary {
  position: sticky;
  top: 90px;
}

.booking-summary .card { padding: 24px; }

.contact-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

/* ---------- Vehicle info + parts-check ---------- */

.vehicle-section-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: -4px 0 14px;
}

.vehicle-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 110px;
  gap: 14px;
}

@media (max-width: 560px) {
  .vehicle-fields { grid-template-columns: 1fr; }
}

.vehicle-fields select:disabled {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 14px 0;
}

.checkbox-field input { width: 16px; height: 16px; }

.diagnostic-note {
  font-size: 13.5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0;
}

.diagnostic-note strong { color: var(--color-text); }

.parts-check-list .parts-check { margin: 10px 0; }

.parts-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--surface);
  margin: 14px 0;
}

.parts-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
}

.parts-dot--in-stock { background: var(--color-success); }
.parts-dot--out-of-stock { background: var(--color-danger); }

.parts-check--warning {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.parts-message {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
}

/* ---------- Sticky mobile summary bar ---------- */

/* On mobile, .booking-layout collapses to one column (see top of this
   file), which drops the "Your Appointment So Far" card below the entire
   4-step form — a customer gets no live confirmation their picks
   registered without scrolling past a 12-card concern grid first. This bar
   surfaces a condensed one-line version, pinned to the bottom of the
   viewport the whole time. It reuses partials/cta-toast.html's
   .mobile-cta-bar fixed-bottom treatment (css/main.css) rather than
   inventing new positioning, but that generic "Call Now / Book Now" bar is
   redundant on this exact page (you're already booking) and would
   visually collide with this one — booking.css only loads on booking.html,
   so hiding it here doesn't affect any other page. */
.wizard-sticky-summary { display: none; }

@media (max-width: 760px) {
  .mobile-cta-bar { display: none; }

  .wizard-sticky-summary {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--surface);
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.12);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
    color: var(--color-text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Replaces (not stacks with) css/main.css's own .mobile-cta-bar-sized
     body padding — booking.css loads after main.css, so this later,
     equally-specific `body` rule wins via normal cascade order. */
  body { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0)); }
}