/* ==========================================================================
   Booking flow: stepper, service picker, calendar, slot grid, summary
   ========================================================================== */

.booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(22px, 3.5vw, 40px);
  align-items: start;
}

@media (max-width: 1000px) {
  .booking { grid-template-columns: 1fr; }
  /* Stacked, the running summary reads as noise above an empty form - put it
     after the panel the customer is actually filling in. */
  .booking__aside { position: static !important; }
}

/* ---------- Stepper ---------- */

.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

.stepper__item { display: flex; align-items: center; gap: 9px; flex: none; }
.stepper__dot {
  width: 27px; height: 27px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 600;
  flex: none;
}
.stepper__dot svg { width: 15px; height: 15px; }
.stepper__label { font-size: 0.86rem; font-weight: 500; color: var(--faint); white-space: nowrap; }
.stepper__line { width: 24px; height: 1px; background: var(--line); flex: none; }

.stepper__item[data-state='active'] .stepper__dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.stepper__item[data-state='active'] .stepper__label { color: var(--ink); font-weight: 600; }
.stepper__item[data-state='done'] .stepper__dot { background: var(--ok-tint); border-color: #c9e6d3; color: var(--ok); }
.stepper__item[data-state='done'] .stepper__label { color: var(--muted); }

@media (max-width: 700px) {
  .stepper__label { display: none; }
  .stepper__line { width: 16px; }
}

/* ---------- Panels ---------- */

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px);
}
.panel[hidden] { display: none; }
.panel__head { margin-bottom: 20px; }
.panel__head h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 6px; }
.panel__head p { color: var(--muted); font-size: 0.94rem; margin: 0; }

/* The date and time half of step 1. Separated from the service list by a rule
   rather than a page change: it is the same decision continued, not a new one. */
.when {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.panel__head--sub { margin-bottom: 18px; }
.panel__head--sub h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--ink);
}

/* Grid children floor at min-content unless told otherwise; this keeps one
   wide child inside a panel from widening the whole booking column. */
.booking > *, .booking__aside { min-width: 0; }

.panel__nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- Service picker ---------- */

.service-options { display: grid; gap: 9px; }

/* One line per service: icon, short name, radio. Same row shape as the list
   on the home page, so the step a customer lands on looks like the thing they
   just tapped.

   The blurb lives in the fourth grid cell, spanning the row, and is only
   displayed on the option that is checked. Ten paragraphs stacked up made this
   step something you had to read before you could answer it; one paragraph,
   on the row you just chose, is the only place it does any work. */
.service-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 19px;
  /* The row keeps its 62px whether or not the description is open, so opening
     one does not squash the icon and the name upward. The description lands in
     an implicit second row underneath. */
  grid-template-rows: 62px;
  align-items: center;
  column-gap: 14px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.service-option:hover { border-color: #b9c6d4; background: #fcfdfe; }
.service-option input { position: absolute; opacity: 0; pointer-events: none; }

.service-option__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--navy-tint);
  border-radius: var(--radius-sm);
  color: var(--navy);
}
.service-option__icon svg { width: 17px; height: 17px; }

.service-option__name {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.service-option__mark {
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.5px solid #c2ccd8;
  display: grid; place-items: center;
}
.service-option__mark::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--navy);
  transform: scale(0);
  transition: transform 0.15s;
}

.service-option__blurb {
  /* Column 2 only: the description hangs off the name it belongs to, not off
     the left edge of the tile, and it stops before the radio rather than
     running underneath it. */
  grid-column: 2 / 3;
  grid-row: 2;
  align-self: start;
  display: none;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  margin: -6px 0 0;
  padding-bottom: 16px;
}
.service-option:has(input:checked) .service-option__blurb { display: block; }

.service-option:has(input:checked) {
  border-color: var(--navy);
  background: #fbfdff;
  box-shadow: inset 0 0 0 1px var(--navy);
}
.service-option:has(input:checked) .service-option__mark { border-color: var(--navy); }
.service-option:has(input:checked) .service-option__mark::after { transform: scale(1); }
.service-option:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- Calendar ---------- */

.calendar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px;
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}
.calendar__month { font-size: 1rem; font-weight: 600; }
.calendar__nav { display: flex; gap: 6px; }
.calendar__nav button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.calendar__nav button:hover:not([disabled]) { background: var(--bg-soft); }
.calendar__nav button[disabled] { opacity: 0.35; cursor: not-allowed; }
.calendar__nav svg { width: 16px; height: 16px; }

.calendar__dows,
.calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__dows { margin-bottom: 6px; }
.calendar__dows span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
  padding: 4px 0;
}

.day-cell {
  aspect-ratio: 1 / 1;
  min-height: 40px;
  /* Load-bearing. An aspect ratio transfers min-height into an automatic
     minimum WIDTH, and a grid item's min-width is auto by default, so seven
     48px cells plus gaps gave the calendar a 440px min-content width. That
     floor propagated up through the booking grid and pushed a 390px phone
     into horizontal scroll. min-width:0 lets the cells narrow; min-height
     still holds the 48px touch target vertically. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  transition: background 0.14s, border-color 0.14s;
}
.day-cell:hover:not([disabled]) { background: var(--navy-tint); border-color: #bdd1e3; }
.day-cell__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); }
.day-cell[disabled] {
  background: transparent;
  color: #c3cbd5;
  cursor: not-allowed;
}
/* Both selectors: ':hover:not()' outranks a bare attribute selector, so the
   selected state has to match the hover specificity to win while hovered. */
.day-cell[data-selected='true'],
.day-cell[data-selected='true']:hover:not([disabled]) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.day-cell[data-selected='true'] .day-cell__dot { background: rgba(255, 255, 255, 0.85); }
.day-cell--blank { visibility: hidden; cursor: default; }
.day-cell[data-today='true']:not([data-selected='true']) { box-shadow: inset 0 0 0 1px #c2ccd8; }

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--muted);
}
.calendar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar__legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }

/* ---------- Slot grid ---------- */

.slots-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin: 24px 0 12px;
}
.slots-head h3 { font-size: 1rem; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); gap: 8px; }

.slot {
  padding: 11px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: border-color 0.14s, background 0.14s;
  /* The slot used to carry a second line ("to 11:00 AM"), which gave it its
     height. With one line it has to be held open deliberately or it drops
     under the 44px touch minimum. */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot:hover { border-color: var(--navy); background: var(--navy-tint); }
.slot[data-selected='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }

.slots-empty {
  padding: 24px 20px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.93rem;
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}
.on-dark .spinner, .btn--primary .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  padding: 20px 0;
}

/* ---------- Summary aside ---------- */

.booking__aside { position: sticky; top: 86px; }

.summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.summary h3 { font-size: 1rem; margin-bottom: 14px; }

.summary__list { list-style: none; margin: 0; padding: 0; }
.summary__list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.89rem;
}
.summary__list li:last-child { border-bottom: 0; }
.summary__list .k { color: var(--muted); flex: none; }
.summary__list .v { text-align: right; font-weight: 600; min-width: 0; word-break: break-word; }
.summary__list .v--empty { color: var(--faint); font-weight: 400; }

.summary__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.6;
}

.aside-help {
  margin-top: 14px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.aside-help h4 { font-size: 0.95rem; margin-bottom: 6px; }
.aside-help p { font-size: 0.87rem; color: var(--muted); margin-bottom: 12px; }

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

.confirm-card {
  text-align: center;
  padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 36px);
}
.confirm-card__tick {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok-tint);
  color: var(--ok);
}
.confirm-card__tick svg { width: 30px; height: 30px; }
.confirm-card h2 { margin-bottom: 10px; }
.confirm-card > p { color: var(--muted); max-width: 52ch; margin: 0 auto 22px; }

.ref-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 26px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.ref-chip span { font-size: 0.76rem; color: var(--muted); font-weight: 500; }
.ref-chip strong {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.confirm-details {
  text-align: left;
  max-width: 420px;
  margin: 0 auto 24px;
  list-style: none;
  padding: 0;
}
.confirm-details li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
.confirm-details li:last-child { border-bottom: 0; }
.confirm-details .k { color: var(--muted); }
.confirm-details .v { font-weight: 600; text-align: right; }

.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- Lookup page ---------- */

.lookup-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.lookup-form input {
  flex: 1 1 220px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge--pending { background: var(--warn-tint); color: var(--warn); border-color: #eedfb4; }
.status-badge--confirmed { background: var(--ok-tint); color: var(--ok); border-color: #c9e6d3; }
.status-badge--completed { background: var(--info-tint); color: var(--info); border-color: #cfdcfa; }
.status-badge--cancelled { background: var(--bad-tint); color: var(--bad); border-color: #f2d2d2; }
.status-badge--no_show { background: var(--bg-soft); color: var(--muted); border-color: var(--line); }

/* ==========================================================================
   Thumb ergonomics - customer booking flow
   Same 44px floor as the dashboard. A mis-tapped date is a lost booking.
   ========================================================================== */

@media (max-width: 720px), (pointer: coarse) {
  /* Calendar days: square and comfortably bigger than a fingertip. */
  /* The square comes off on a phone. aspect-ratio turns the 48px height into
     a 48px minimum WIDTH as well, and seven of those plus gaps need 372px of
     calendar, which does not exist inside a 390px screen once the gutter, the
     panel and the calendar's own padding are paid for. Cells overflowed their
     tracks and overlapped each other.

     So: the cell fills whatever width its track gives it, and keeps the 48px
     height, which is the dimension a thumb actually misses on. Trimming the
     padding here buys the width back from ~32px a cell to ~36px. */
  .day-cell {
    aspect-ratio: auto;
    height: 48px;
    min-height: 48px;
    font-size: 1rem;
    border-radius: 8px;
  }
  .calendar__days, .calendar__dows { gap: 4px; }
  .calendar { padding: 8px; }
  .panel { padding: 16px; }
  .calendar__nav button { width: 44px; height: 44px; }

  /* Time slots: two comfortable columns rather than three cramped ones. */
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
  .slot { min-height: 56px; font-size: 0.98rem; padding: 10px 8px; }

  /* Whole service row is the tap target - no hunting for the radio. */
  .service-option { padding: 0 15px; grid-template-rows: 64px; }

  /* Step navigation: big, and the forward action is unmistakable. */
  .panel__nav { gap: 10px; }
  .panel__nav .btn { min-height: 50px; flex: 1 1 auto; font-size: 0.95rem; }

  .lookup-form .btn { min-height: 50px; }
  .lookup-form input { min-height: 50px; }
}