/* ==========================================================================
   Booking card — closing-CTA appointment form
   --------------------------------------------------------------------------
   A light card that sits on the dark closing band of every variation. It is
   built only from the shared tokens, so each variation's palette, type scale
   and corner radii come through without a per-variation copy of these rules —
   including variasi P, whose three palettes swap the same token names.

   Loads AFTER the variation stylesheet on purpose. The closing bands style
   their own descendants for a dark ground (`.i-cta p`, `.p-cta h2`,
   `.l-cta :focus-visible`), and those rules would otherwise reach inside this
   card and paint light-on-light. The overrides below match their specificity
   and win on order.
   ========================================================================== */

p + .booking {
  margin-top: var(--space-4);
}

.booking {
  max-width: 34rem;
  background-color: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-align: left;
}

/* The dark bands set --on-dark focus rings for their own buttons. Inside the
   card the ground is light again, so the ring goes back to the accent. */
.booking :focus-visible {
  outline-color: var(--accent);
}

/* Undo the dark-band paragraph treatment (on-dark-muted, step-1, centred
   measure) for every paragraph inside the card. */
.booking p {
  margin: 0;
  max-width: none;
  font-size: var(--step-0);
  color: var(--ink-muted);
}

.booking a {
  color: var(--brand-700);
}

.booking a:hover {
  color: var(--accent-700);
}

.booking [hidden] {
  display: none;
}

/* --- Step indicator ------------------------------------------------------ */

.booking__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.booking__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
}

.booking__step::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--line);
  flex: none;
}

.booking__step[aria-current="step"] {
  color: var(--ink);
  font-weight: 700;
}

.booking__step[aria-current="step"]::before {
  background-color: var(--accent);
}

/* --- Heading ------------------------------------------------------------- */

.booking__head {
  padding: var(--space-3) var(--space-3) var(--space-3);
  display: grid;
  gap: var(--space-1);
}

.booking__title {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--brand-900);
}

/* --- Form ---------------------------------------------------------------- */

.booking__form {
  padding: 0 var(--space-3) var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.booking__field {
  display: grid;
  gap: 0.35rem;
}

.booking__row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .booking__row {
    grid-template-columns: 1fr 1fr;
  }
}

.booking__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.65rem 0.85rem;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease);
}

.booking__input:hover {
  border-color: var(--ink-muted);
}

.booking__input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

/* The country code and the number read as one control, so the border belongs
   to the wrapper and the two fields inside it are borderless. */
.booking__phone {
  display: flex;
  align-items: stretch;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.booking__phone:hover {
  border-color: var(--ink-muted);
}

.booking__cc {
  flex: none;
  padding: 0.65rem 0.6rem;
  background-color: var(--surface-2);
  border: 0;
  border-right: 1px solid var(--line);
  font-size: var(--step-0);
  cursor: pointer;
}

.booking__phone .booking__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
}

/* The wrapper owns the border, so an invalid number has to tint the wrapper
   rather than the input that carries aria-invalid. */
.booking__input[aria-invalid="true"],
.booking__phone:has(.booking__input[aria-invalid="true"]) {
  border-color: var(--brand-700);
  box-shadow: inset 3px 0 0 var(--brand-700);
}

.booking__phone:has(.booking__input[aria-invalid="true"]) .booking__input {
  box-shadow: none;
}

.booking__consent {
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.booking .booking__consent {
  font-size: var(--step--1);
}

.booking__submit {
  width: 100%;
  margin-top: var(--space-1);
}

/* The honeypot. Positioned off-canvas rather than display:none — some bots
   skip hidden inputs, and a bot that skips it is a bot that gets through. */
.booking__nota {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Collapsed summary (after step one) ---------------------------------- */

.booking__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-2);
  background-color: var(--surface-2);
  border-radius: var(--radius-md);
}

.booking .booking__summary-text {
  font-size: var(--step--1);
  color: var(--ink);
}

.booking__edit {
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.booking__edit:hover {
  color: var(--accent-700);
}

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

.booking__cal {
  position: relative;
  padding: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Locked is the initial state: the calendar is visible so the reader can see
   what they are working towards, but drained of colour and covered by the
   notice. Every control inside it is also disabled in script, so the dimming
   is never the only thing standing between a keyboard and a dead date. */
.booking__cal[data-locked="true"] .booking__cal-inner {
  opacity: 0.35;
  filter: grayscale(1);
}

.booking__lock {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(22rem, calc(100% - var(--space-4)));
  padding: var(--space-2);
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.booking .booking__lock {
  font-size: var(--step--1);
  color: var(--ink);
}

.booking__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.booking .booking__month-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--brand-900);
}

.booking__month-nav {
  display: flex;
  gap: 0.5rem;
}

.booking__nav {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step-1);
  line-height: 1;
  color: var(--ink);
}

.booking__nav:hover:not(:disabled) {
  border-color: var(--ink-muted);
  background-color: var(--surface-2);
}

.booking__nav:disabled {
  color: var(--ink-muted);
  opacity: 0.45;
  cursor: default;
}

.booking__loading {
  margin: 0 0 0.75rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.booking__dow,
.booking__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.booking__dow {
  margin-bottom: 0.35rem;
}

.booking .booking__dow span {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}

.booking__day {
  min-height: 2.5rem;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.booking__day:hover:not(:disabled):not([aria-pressed="true"]) {
  background-color: var(--surface-2);
}

.booking__day:disabled {
  color: var(--ink-muted);
  opacity: 0.45;
  cursor: default;
}

.booking__day[aria-pressed="true"] {
  background-color: var(--accent);
  color: #fff;
}

/* Empty leading cells keep the grid aligned without being announced. */
.booking__day--pad {
  visibility: hidden;
}

.booking__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--accent);
}

.booking__day[aria-pressed="true"] .booking__dot {
  background-color: #fff;
}

/* A dot is drawn for today only; every other cell reserves the same space so
   the rows do not shift by four pixels when the month changes. */
.booking__dot--blank {
  background-color: transparent;
}

/* --- Time slots ---------------------------------------------------------- */

.booking__slots {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.booking .booking__slots-title {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand-900);
  margin-bottom: var(--space-1);
}

.booking__slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}

.booking__slot {
  min-height: var(--tap);
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.booking__slot:hover:not([aria-pressed="true"]) {
  border-color: var(--accent);
  color: var(--brand-700);
}

.booking__slot[aria-pressed="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.booking__confirm {
  width: 100%;
  margin-top: var(--space-2);
}

.booking__confirm:disabled {
  background-color: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-muted);
  cursor: default;
}

.booking__confirm:disabled:active {
  transform: none;
}

/* --- Confirmed ----------------------------------------------------------- */

.booking__done {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  display: grid;
  gap: var(--space-1);
}

.booking .booking__done-mark {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-1);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-size: var(--step-2);
  font-weight: 700;
}

.booking .booking__done-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--brand-900);
}

/* --- Failure notice -------------------------------------------------------
   Colour is hardcoded rather than token-based, matching .field__error above:
   this is an error state, not part of a variation's palette. */

.booking__fail {
  margin: var(--space-3) var(--space-3) var(--space-3);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(170, 17, 17, 0.08);
  color: #a11;
  font-size: var(--step--1);
}

.booking__fail a {
  color: inherit;
}

/* --- Secondary WhatsApp line under the card ------------------------------ */

p.booking-alt {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--on-dark-muted);
  text-align: center;
}

p.booking-alt a {
  color: var(--on-dark);
  font-weight: 700;
}

p.booking-alt a:hover {
  color: var(--on-dark);
}

/* --- Placement -----------------------------------------------------------
   In I, L and O the card sits in the body column of a two-column band, so it
   lines up with the paragraph above it. In P the band is a single centred
   column and the card centres with it. */

.p-cta .booking {
  margin-inline: auto;
}