/* Customer portal — one column, one decision per screen.
   The slot grid is where the design spends its energy: everything else stays
   quiet so the times read as the content, not as chrome. */

.booking-body { background: var(--paper); }

.biz-header {
  background: var(--primary);
  color: #fff;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.biz-header__inner { max-width: 34rem; margin: 0 auto; }
.biz-name { margin: 0; font-size: var(--step-2); font-weight: 700; letter-spacing: -.015em; }
.biz-meta { margin: 2px 0 0; font-size: var(--step--1); color: #bfd8d8; }

.wrap { max-width: 34rem; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-7); }

/* ---- step rail: a real sequence, so numbering is information ---- */
.steps { margin: -18px 0 var(--sp-4); }
.steps ol {
  display: flex; align-items: center; gap: var(--sp-1);
  list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 999px; box-shadow: var(--shadow-1); overflow-x: auto;
  scrollbar-width: none;
}
.steps ol::-webkit-scrollbar { display: none; }
.steps li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); color: var(--ink-faint); white-space: nowrap;
}
.steps li::after { content: ""; width: 14px; height: 1px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps .step-num {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-faint);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
}
.steps li[data-state="done"] { color: var(--primary-ink); }
.steps li[data-state="done"] .step-num { background: var(--primary-wash); color: var(--primary-ink); border-color: #cfe0e0; }
.steps li[data-state="current"] { color: var(--ink); font-weight: 700; }
.steps li[data-state="current"] .step-num { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- stage ---- */
.stage { padding: var(--sp-5) var(--sp-4); }
.stage-loading { display: block; }
.stage h1 { font-size: var(--step-2); margin-bottom: var(--sp-1); }
.stage .lede { color: var(--ink-soft); font-size: var(--step-0); margin-bottom: var(--sp-4); }

.back-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: 0; padding: 0 0 var(--sp-3);
  color: var(--ink-soft); cursor: pointer; font-size: var(--step--1);
}
.back-link:hover { color: var(--primary-ink); }

/* ---- service list ---- */
.service-list { display: grid; gap: var(--sp-2); }
.service {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: start; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.service:hover { border-color: var(--primary); background: var(--surface-2); }
.service[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-wash); }
.service-name { font-weight: 700; }
.service-desc { font-size: var(--step--1); color: var(--ink-soft); }
.service-duration {
  font-variant-numeric: tabular-nums; font-size: var(--step--1);
  color: var(--primary-ink); background: var(--primary-wash);
  padding: 3px var(--sp-2); border-radius: 999px; white-space: nowrap;
}

/* ---- calendar ---- */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.cal-title { font-weight: 700; font-size: var(--step-1); }
.cal-nav { display: flex; gap: var(--sp-1); }
.cal-nav button {
  width: 38px; height: 38px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-soft);
}
.cal-nav button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-ink); }
.cal-nav button:disabled { opacity: .35; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; font-size: 11px; color: var(--ink-faint);
  padding-bottom: var(--sp-1); font-weight: 600;
}
.cal-day {
  aspect-ratio: 1; min-height: 42px; border-radius: var(--r-md);
  border: 1px solid transparent; background: var(--surface-2);
  color: var(--ink); font-variant-numeric: tabular-nums; font-size: var(--step-0);
  cursor: pointer; position: relative;
}
.cal-day:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-wash); }
.cal-day[data-open="1"] { font-weight: 700; }
.cal-day[data-open="1"]::after {
  content: ""; position: absolute; inset-inline: 50%; inset-block-end: 6px;
  width: 4px; height: 4px; margin-inline-start: -2px; border-radius: 50%; background: var(--primary);
}
.cal-day:disabled { color: var(--ink-faint); opacity: .45; cursor: not-allowed; background: transparent; }
.cal-day[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-day[aria-pressed="true"]::after { background: #fff; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--line); }
.cal-empty { visibility: hidden; }
.cal-legend { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--ink-faint); }

/* ---- slots ---- */
.slot-period + .slot-period { margin-top: var(--sp-4); }
.slot-period h3 {
  font-size: var(--step--1); color: var(--ink-soft); font-weight: 600;
  margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
}
.slot-period h3::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.slot {
  min-height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  font-variant-numeric: tabular-nums; font-size: var(--step-1); font-weight: 600;
  color: var(--ink); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.slot:hover { border-color: var(--primary); background: var(--primary-wash); color: var(--primary-ink); }
.slot[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- summary ---- */
.summary { border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.summary-row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft);
  font-size: var(--step-0);
}
.summary-row:last-child { border-bottom: 0; }
.summary-row dt { color: var(--ink-soft); }
.summary-row dd { margin: 0; font-weight: 600; }
.summary-note { white-space: pre-wrap; font-weight: 400; }

.actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.actions .btn { flex: 1; }

/* ---- confirmation ---- */
.done-mark {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--moss-wash); color: var(--moss); margin-bottom: var(--sp-3);
}
.code-chip {
  display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px dashed var(--line);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 700;
}
.link-box {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); align-items: center;
}
.link-box input { flex: 1; border: 0; background: transparent; min-width: 0; font-size: var(--step--1); }

.fineprint { text-align: center; color: var(--ink-faint); font-size: var(--step--1); margin-top: var(--sp-4); }

@media (min-width: 620px) {
  .stage { padding: var(--sp-6); }
  .cal-day { min-height: 46px; }
}

/* loading placeholders (kept in CSS so the page needs no inline styles) */
.sk-line { height: 20px; width: 45%; }
.sk-block { height: 64px; margin-top: 16px; }
.sk-block + .sk-block { margin-top: 10px; }
.sk-tall { height: 120px; margin-top: 16px; }