/* ============================================================================
   consultation booking (/book-consultation/): consultant cards, date and
   time pickers, summary and confirmation. Built on forms.css (fieldset, chip,
   field) and ui.css (avatar, state, skeleton); logical properties for RTL.
   ========================================================================= */

.booking__facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-block-start: var(--sp-5);
  font-size: var(--fs-small); color: var(--fg-muted);
}
.booking__facts span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.booking__facts svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--ember-deep); }
.booking__intro > * + * { margin-block-start: var(--sp-3); }

.booking__step[hidden], .booking__form[hidden] { display: none; }
.booking__step:focus { outline: none; } /* focused when shown, for screen readers */
/* Back and Continue: Back at the start, Continue at the end (also when alone). */
.booking__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}
.booking__nav > :last-child { margin-inline-start: auto; }
.booking__step[data-booking-step="details"]:not([hidden]) { display: grid; gap: var(--sp-5); }
.booking__step[data-booking-step="details"] .booking__summary,
.booking__step[data-booking-step="details"] .booking__error { margin-block-end: 0; }
.booking__n {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-weight: var(--weight-medium); color: var(--fg-muted);
  margin-block-end: var(--sp-2);
}

/* --- consultants: radio cards ------------------------------------------- */
.booking__consultants {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin-block-start: var(--sp-4);
}
.consultant {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
  min-block-size: var(--tap);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .consultant:hover { border-color: var(--border-strong); } }
.consultant:active { transform: scale(0.99); }
.consultant input { position: absolute; opacity: 0; pointer-events: none; }
.consultant:has(:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
.consultant:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.consultant__photo { object-fit: cover; }
.consultant__initials {
  background: var(--ember-wash); color: var(--ember-deep);
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--weight-semi);
}
.consultant__text { display: grid; gap: 2px; }
.consultant__name { font-weight: var(--weight-semi); }
.consultant__title { font-size: var(--fs-small); color: var(--fg-muted); }
.consultant__check {
  inline-size: 20px; block-size: 20px; color: var(--ember);
  opacity: 0; transition: opacity var(--dur-hover) var(--ease-out);
}
.consultant:has(:checked) .consultant__check { opacity: 1; }

/* --- dates and times: chips --------------------------------------------- */
.booking__dates, .booking__times {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.booking__dates .chip, .booking__times .chip { position: relative; justify-content: center; text-align: center; }
.booking__dates .chip { flex-direction: column; gap: 0; padding-block: var(--sp-3); line-height: 1.25; }
.chip__day { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .75; }
.chip__date { font-weight: var(--weight-semi); }
.booking__times .chip { font-variant-numeric: tabular-nums; flex-direction: column; gap: 0; line-height: 1.25; }
/* A time already booked: still shown so the day reads as a whole, but not selectable. */
.booking__times .chip.is-booked {
  cursor: not-allowed; background: var(--mist); border-style: dashed; border-color: var(--border); color: var(--fg-muted);
}
.booking__times .chip.is-booked > span:first-of-type { text-decoration: line-through; }
.booking__times .chip.is-booked:active { transform: none; }
.chip__note { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }

.booking__status:empty { display: none; }
.booking__status { margin-block-end: var(--sp-4); }
.booking__loading { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.booking__loading .skeleton { block-size: 56px; }

/* --- summary, errors, confirmation -------------------------------------- */
.booking__summary {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-5);
  border-inline-start: 3px solid var(--ember);
  background: var(--surface-sunk);
  border-radius: var(--r-input);
}
.booking__summary dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.booking__summary dd { margin: 0; font-weight: var(--weight-semi); }

.booking__error {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-5);
  border: 1px solid var(--critical); border-inline-start-width: 3px; border-radius: var(--r-input);
  color: var(--critical); font-weight: var(--weight-medium); background: var(--surface);
}
.booking__error[hidden] { display: none; }
.booking__error svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 2px; }

.booking__choices { border: 0; padding: 0; margin: 0; }
.booking__choices .field__label { margin-block-end: var(--sp-1); }

.booking__done { display: grid; gap: var(--sp-5); max-inline-size: 60ch; }
.booking__done[hidden] { display: none; }
.booking__done:focus { outline: none; }
.booking__done-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--weight-semi); letter-spacing: var(--tracking-display);
}
.booking__done-title svg {
  inline-size: 36px; block-size: 36px; flex: none; padding: 8px; border-radius: 50%;
  background: var(--good); color: #fff;
}
.booking__done .booking__summary { margin-block-end: 0; }
.booking__confirmation > * + * { margin-block-start: var(--sp-3); }