/* ============================================================
   CUSTOM BOOKING FORM (Booked plugin, Caxton front end)
   ============================================================
   Every colour, radius and face below comes from the tokens in
   globals.css — --brand-purple (the green, despite the name),
   --cream, --border, --font-heading, --font-primary — so this
   form inherits any future brand change instead of pinning a
   second copy of the palette.

   Fallbacks are supplied on each var() because this stylesheet
   is also loaded on pages that do not enqueue globals first.

   TYPE — the site loads four faces and uses each for one job:
     Playfair Display  headings, 700-900, tight leading
     DM Sans           body and controls, 400-700
     Syne              small uppercase labels and eyebrows, 700,
                       .15em tracking (see .section-badge-text)
     Cinzel            the shopfront wordmark ONLY — never here
   This form follows that division rather than setting everything
   in the body face, which is what made it read as a plug-in.
   ============================================================ */

.cbf-section {
  padding: 4.5rem 0;
  background: var(--cream, #F7F2E8);
}

.cbf-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.cbf-title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--text-dark, #1E2A23);
  margin: 1rem 0 0.75rem;
  line-height: 1.15;
  text-wrap: balance;
}

.cbf-subtitle {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-gray, #5B655E);
  margin: 0;
}

/* ---- shell -------------------------------------------------- */
.cbf {
  display: grid;
  /* minmax(0,…) so a long service name cannot push the grid wider
     than the page — the classic flex/grid overflow trap. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.5rem;
  /* held in a custom property because the sidebar cancels it with negative
     margins to reach the card's edges — the two must stay in step */
  --cbf-pad: clamp(1rem, 2vw, 1.75rem);
  padding: var(--cbf-pad);
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));
}

@media (min-width: 900px) {
  /* Body then sidebar. The gap is breathing room between the step and the
     cream column; the column itself then bleeds to the card's edges below. */
  .cbf {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 0 1.5rem;
    align-items: start;
  }
  /* The sidebar spans every row so it reaches the bottom of the card even on
     a page that also renders the "call us" line below the flow — otherwise its
     negative bottom margin would run straight over that line. */
  .cbf-body    { grid-column: 1; grid-row: 1; }
  .cbf-side    { grid-column: 2; grid-row: 1 / -1; }
  .cbf-fallback{ grid-column: 1; grid-row: 2; }

  /* A full-height column, not a panel floating inside the card. The negative
     margins cancel the card's padding on three sides so the cream runs from
     the very top of the form to the very bottom and out to its right edge;
     the only border is the rule down its left, which then runs the whole
     height as well. The card's overflow:hidden keeps the fill inside the
     rounded corners, so no radius is needed here. */
  .cbf-side {
    align-self: stretch;
    margin: calc(var(--cbf-pad) * -1) calc(var(--cbf-pad) * -1) calc(var(--cbf-pad) * -1) 0;
    padding: var(--cbf-pad) var(--cbf-pad) var(--cbf-pad) 1.25rem;
    border-left: 1px solid var(--border, #E6DFD0);
  }
}

/* ---- sidebar ------------------------------------------------ */
/* Cream, as it was — the fill is what tells the eye this column is a
   different kind of thing from the step it sits beside. It is still a
   column rather than a floating card: it runs the height of the flow
   and sticks as the patient scrolls. */
.cbf-side {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  background: var(--cream, #F7F2E8);
}

/* phone progress ---------------------------------------------- */
/* Hidden on desktop, where the step list does this job properly. */
.cbf-prog { display: none; }

.cbf-prog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.4375rem;
}

.cbf-prog-step {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-gray, #5B655E);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cbf-prog-name {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cbf-prog-bar {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--border, #E6DFD0);
  overflow: hidden;
}
.cbf-prog-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-purple, #2F6B4E);
  transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cbf-prog-bar span { transition: none; }
}

/* steps ------------------------------------------------------- */
.cbf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cbf-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0 0 0.875rem 1.875rem;
}

/* the numbered marker */
.cbf-step::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: -0.0625rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border, #E6DFD0);
  background: var(--white, #fff);
  color: var(--text-gray, #5B655E);
}

/* the connector, so the steps read as one run rather than a list */
.cbf-step::after {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 1.5rem;
  bottom: 0.25rem;
  width: 1.5px;
  background: var(--border, #E6DFD0);
}
.cbf-step:last-child::after { display: none; }

/* Sentence case throughout.
   The theme does set uppercase in ~117 places, but every one of them is a
   badge, an eyebrow or a stat label — decoration beside the content. It is
   never used on the reading path, and a booking form is nothing but reading
   path: these are labels a patient works through, not ornaments. Tracking
   comes down with the caps, since letter-spacing exists to open up capitals
   and only smears lowercase. */
.cbf-step-label {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-gray, #5B655E);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-variant-numeric: normal;
}

.cbf-step-value {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dark, #1E2A23);
  overflow-wrap: break-word;
}

/* pending — present but clearly not yet reached */
.cbf-step[data-state="pending"] .cbf-step-label { opacity: .5; }
.cbf-step[data-state="pending"]::before { opacity: .5; }

/* current */
.cbf-step[data-state="current"] .cbf-step-label { color: var(--brand-purple, #2F6B4E); }
.cbf-step[data-state="current"]::before {
  border-color: var(--brand-purple, #2F6B4E);
  background: var(--brand-purple, #2F6B4E);
  color: var(--white, #fff);
  box-shadow: 0 0 0 3px var(--brand-light, #E4EDE6);
}

/* done — and clickable, to change an earlier answer */
.cbf-step[data-state="done"]::before {
  content: "\2713";
  border-color: var(--brand-accent, #6E9583);
  background: var(--brand-accent, #6E9583);
  color: var(--white, #fff);
}
.cbf-step[data-state="done"]::after { background: var(--brand-accent, #6E9583); }
.cbf-step[data-state="done"] .cbf-step-label { cursor: pointer; }
.cbf-step[data-state="done"] .cbf-step-label:hover { color: var(--brand-purple, #2F6B4E); text-decoration: underline; }
.cbf-step-label:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 3px; border-radius: 3px; }

/* details ----------------------------------------------------- */
.cbf-side-details dl { margin: 0; display: grid; gap: 0.75rem; }
.cbf-side-details dt {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-slate, #5B655E);
}
.cbf-side-details dd {
  margin: 0.1875rem 0 0;
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
  overflow-wrap: break-word;
}
.cbf-side-sub { font-weight: 400; font-size: 0.8125rem; color: var(--text-gray, #5B655E); }

/* The map, on the confirmation only. Loaded lazily and only once a location is
   chosen, so Google is not contacted at all before that. It used to sit in the
   sidebar too, but that column runs the full height of the form and the frame
   stretched the whole thing. */
.cbf-map {
  margin-top: 0.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid var(--border, #E6DFD0);
  background: var(--white, #fff);
  line-height: 0;
}

.cbf-map iframe {
  display: block;
  width: 100%;
  height: 8.5rem;
  border: 0;
}

.cbf-map-link {
  display: block;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-purple, #2F6B4E);
  text-decoration: none;
  line-height: 1.4;
  border-top: 1px solid var(--border, #E6DFD0);
}
.cbf-map-link:hover { text-decoration: underline; }
.cbf-map-link:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: -3px; }

.cbf-done .cbf-map { max-width: 26rem; margin: 1.25rem auto 0; }
.cbf-done .cbf-map iframe { height: 11rem; }

/* total — the foot of the column, on its own */
.cbf-side-total {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border, #E6DFD0);
  display: grid;
  gap: 0.25rem;
}
.cbf-total-label {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-slate, #5B655E);
}
/* Set in the body sans, not the display serif.
   Playfair is a high-contrast face: its hairlines thin almost to nothing, and
   on figures that is where legibility goes first — a 3 and an 8 stop being
   easy to tell apart at a glance, which matters most to the readers who most
   need the price to be plain. DM Sans keeps even stroke weight and open
   counters, and tabular figures hold the digits on a common width. */
.cbf-total-value {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--brand-dark, #234F3A);
  font-variant-numeric: tabular-nums lining;
}
.cbf-total-value--free { font-size: 1.5rem; letter-spacing: 0; }
.cbf-total-note {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-gray, #5B655E);
}

/* ---- steps -------------------------------------------------- */
/* The script moves focus to this heading on every step change so a screen
   reader announces it. That is a programmatic focus, not the patient tabbing
   here, and the browser's default ring on it reads as the page flashing blue
   on load. The heading is not a control and cannot be reached by tabbing —
   tabindex is -1 — so suppressing the ring costs a keyboard user nothing. */
.cbf-step-title:focus,
.cbf-step-title:focus-visible {
  outline: none;
}

.cbf-step-title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  font-weight: 800;
  color: var(--text-dark, #1E2A23);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cbf-step-hint {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-gray, #5B655E);
  margin: 0 0 1rem;
}

/* [hidden] has to beat every display rule below it. The browser's own
   [hidden] { display: none } is a bare attribute selector, so any rule with a
   class in it outranks it — which is exactly what happened when the date step
   was given `display: grid` for its two-column layout: the calendar rendered
   underneath every other step, on every step. Anything that sets display on a
   panel must therefore be written :not([hidden]), and this is the backstop. */
.cbf-panel[hidden] { display: none !important; }

.cbf-panel { animation: cbf-in .28s ease both; }

@keyframes cbf-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cbf-panel { animation: none; }
}

/* ---- option cards ------------------------------------------- */
.cbf-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.625rem;
  margin: 0 0 0.5rem;
}

.cbf-opt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  font: inherit;
  color: inherit;
}

.cbf-opt:hover { border-color: var(--brand-accent, #6E9583); transform: translateY(-2px); }
.cbf-opt:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }

.cbf-opt[aria-checked="true"] {
  border-color: var(--brand-purple, #2F6B4E);
  background: var(--brand-light, #E4EDE6);
}

.cbf-opt-name {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-dark, #1E2A23);
  /* long clinical names must wrap, not widen the grid */
  overflow-wrap: break-word;
}

.cbf-opt-meta {
  font-size: 0.8125rem;
  color: var(--text-gray, #5B655E);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cbf-opt-price {
  font-weight: 700;
  color: var(--brand-purple, #2F6B4E);
  font-variant-numeric: tabular-nums;
}

.cbf-opt-note {
  flex-basis: 100%;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-gray, #5B655E);
  margin-top: 0.125rem;
}

.cbf-opt-free {
  font-weight: 700;
  color: var(--brand-purple, #2F6B4E);
  letter-spacing: .02em;
}

/* ---- category cards ----------------------------------------- */
/* Its own step now, so these are full cards rather than pills: the
   patient is choosing between eight groups, not filtering a list. */
.cbf-options--cats {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
}

.cbf-options--cats .cbf-opt {
  gap: 0.25rem;
  padding: 0.9375rem 1rem;
}

/* Body sans here too. These are names people scan rather than read, often at
   arm's length on a phone, and several run long ("Weight loss — Mounjaro
   injection"). A serif at this size makes that harder work than it needs to
   be. Slightly larger than the old serif setting, because the sans reads
   smaller at the same nominal size. */
.cbf-options--cats .cbf-opt-name {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-dark, #1E2A23);
}

.cbf-options--cats .cbf-opt-meta {
  font-size: 0.8125rem;
  color: var(--text-gray, #5B655E);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

/* A one-service tile carries that service's price, so it gets the same
   treatment as a price on a service card rather than being muted meta. */
.cbf-options--cats .cbf-opt-price { font-size: 0.9375rem; }

/* The chosen group, shown above its services. */
[data-service-hint] {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand-purple, #2F6B4E);
}

/* ---- category pills (kept for triage answers) ---------------- */
.cbf-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.cbf-cat {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.6875rem 1.125rem;
  border-radius: 999px;
  border: 1.5px solid var(--border, #E6DFD0);
  background: var(--white, #fff);
  color: var(--text-gray, #5B655E);
  cursor: pointer;
  transition: all .2s ease;
}

.cbf-cat:hover { border-color: var(--brand-accent, #6E9583); }
.cbf-cat:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }
/* Both attributes, because the same pill plays two roles. As a category tab
   it is role="tab" and carries aria-selected; as a Yes/No answer it is
   role="radio" and carries aria-checked. Styling only the first left every
   intake answer looking unselected after it had been chosen — the state was
   recorded, it simply was not drawn. */
.cbf-cat[aria-selected="true"],
.cbf-cat[aria-checked="true"] {
  background: var(--brand-purple, #2F6B4E);
  border-color: var(--brand-purple, #2F6B4E);
  color: var(--white, #fff);
}

/* ---- earliest available ------------------------------------- */
/* Offered as one tap, above the calendar. Most patients want the next
   free appointment; making them read a month grid to find it is work
   for nothing. */
.cbf-soonest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  width: 100%;
  text-align: left;
  padding: 0.6875rem 0.875rem;
  margin: 0 0 0.875rem;
  background: var(--brand-light, #E4EDE6);
  border: 1.5px solid var(--brand-accent, #6E9583);
  border-radius: 0.75rem;
  cursor: pointer;
  font: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.cbf-soonest:hover { border-color: var(--brand-purple, #2F6B4E); }
.cbf-soonest:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }

.cbf-soonest-label {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-dark, #234F3A);
}
.cbf-soonest-when {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
}
.cbf-soonest-cta {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-purple, #2F6B4E);
  white-space: nowrap;
}
.cbf-soonest-cta::after { content: " \2192"; }

/* ---- month calendar ------------------------------------------ */
.cbf-cal {
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.75rem;
  padding: 0.6875rem 0.75rem 0.75rem;
  margin: 0 0 1rem;
}

.cbf-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.cbf-cal-month {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
  margin: 0;
}

.cbf-cal-nav {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.375rem;
  background: var(--white, #fff);
  color: var(--text-dark, #1E2A23);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.cbf-cal-nav:hover:not([disabled]) { border-color: var(--brand-accent, #6E9583); }
.cbf-cal-nav:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }
.cbf-cal-nav[disabled] { opacity: .35; cursor: not-allowed; }

.cbf-cal-dows,
.cbf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1875rem;
}

.cbf-cal-dows {
  margin: 0 0 0.25rem;
}
.cbf-cal-dows span {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text-gray, #5B655E);
  padding: 0.125rem 0;
}

/* Short rows, not squares. A square cell across seven columns made the grid
   as tall as it was wide and pushed the times below the fold — the whole point
   of the calendar was to save scrolling, not add it. 2rem still clears a
   comfortable tap once the cell gap is counted. */
/* Number and dot are stacked with a real gap rather than the dot being
   absolutely positioned against the cell floor. At 1.875rem tall the dot sat
   almost on the baseline of the number and read as part of the digit. */
.cbf-cal-day {
  height: 2.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  border: 1.5px solid transparent;
  border-radius: 0.375rem;
  background: var(--white, #fff);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark, #1E2A23);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.cbf-cal-day:hover:not([disabled]) { border-color: var(--brand-accent, #6E9583); }
.cbf-cal-day:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 1px; }

/* A day with nothing free is shown, not hidden — "closed Sunday" is
   information, and a gap where a date should be is confusing. */
.cbf-cal-day[disabled] {
  color: var(--text-gray, #5B655E);
  opacity: .38;
  cursor: not-allowed;
}

/* days spilling in from the neighbouring month */
.cbf-cal-day[data-out="true"] { opacity: .22; }
.cbf-cal-day[data-out="true"][disabled] { opacity: .14; }

.cbf-cal-day[data-today="true"] .cbf-cal-num { text-decoration: underline; text-underline-offset: 3px; }

.cbf-cal-day[aria-selected="true"] {
  background: var(--brand-purple, #2F6B4E);
  border-color: var(--brand-purple, #2F6B4E);
  color: var(--white, #fff);
  opacity: 1;
}
.cbf-cal-day[aria-selected="true"] .cbf-cal-dot { background: var(--white, #fff); }

.cbf-cal-num { line-height: 1; }

/* the availability marker — in flow under the number, not floated over it */
.cbf-cal-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--brand-accent, #6E9583);
  flex: 0 0 auto;
}

/* A day with nothing free still reserves the dot's row, so every number sits
   on one baseline across the grid instead of shifting down on free days.
   [disabled] is exactly the set without a dot — the dot is only rendered for
   days that have slots, and those days are never disabled. */
.cbf-cal-day[disabled] .cbf-cal-num { margin-bottom: 0.5rem; }

.cbf-cal-key {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  color: var(--text-gray, #5B655E);
}
.cbf-cal-key-dot {
  width: 0.25rem; height: 0.25rem; border-radius: 50%;
  background: var(--brand-accent, #6E9583);
}

.cbf-skeleton--cal { height: 11rem; border-radius: 0.5rem; }

/* ---- times --------------------------------------------------- */
.cbf-times-head {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
  margin: 0 0 0.75rem;
}

/* Each part of the day is a native <details>. Closed, the whole list is three
   short rows; open, only the part someone is actually looking at is expanded. */
.cbf-slot-group {
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.5rem;
  overflow: hidden;
}
.cbf-slot-group + .cbf-slot-group { margin-top: 0.4375rem; }

.cbf-slot-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
  background: var(--white, #fff);
}
/* the default disclosure triangle, in both engines */
.cbf-slot-group-head::-webkit-details-marker { display: none; }
.cbf-slot-group-head::marker { content: ""; }

.cbf-slot-group-head:hover { background: var(--cream, #F7F2E8); }
.cbf-slot-group-head:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: -3px; }

/* our own chevron, which turns when the group opens */
.cbf-slot-group-head::after {
  content: "";
  margin-left: auto;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 2px solid var(--text-gray, #5B655E);
  border-bottom: 2px solid var(--text-gray, #5B655E);
  transform: rotate(45deg) translate(-0.0625rem, -0.0625rem);
  transition: transform .2s ease;
}
.cbf-slot-group[open] > .cbf-slot-group-head::after {
  transform: rotate(-135deg) translate(-0.125rem, -0.125rem);
}
@media (prefers-reduced-motion: reduce) {
  .cbf-slot-group-head::after { transition: none; }
}

.cbf-slot-group[open] > .cbf-slot-group-head {
  border-bottom: 1px solid var(--border, #E6DFD0);
}

.cbf-slot-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-purple, #2F6B4E);
  background: var(--brand-light, #E4EDE6);
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
  font-variant-numeric: tabular-nums;
}

.cbf-slot-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr));
  gap: 0.375rem;
  padding: 0.625rem 0.75rem 0.75rem;
}

.cbf-slot {
  padding: 0.5rem 0.25rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.4375rem;
  background: var(--white, #fff);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark, #1E2A23);
  cursor: pointer;
  transition: all .2s ease;
}

.cbf-slot:hover { border-color: var(--brand-accent, #6E9583); }
.cbf-slot:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }
.cbf-slot[aria-checked="true"] {
  background: var(--brand-purple, #2F6B4E);
  border-color: var(--brand-purple, #2F6B4E);
  color: var(--white, #fff);
}

.cbf-empty {
  padding: 1.25rem;
  text-align: center;
  background: var(--cream, #F7F2E8);
  border-radius: 0.75rem;
  color: var(--text-gray, #5B655E);
}

/* ---- fields -------------------------------------------------- */
.cbf-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.875rem;
}

.cbf-field { margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.cbf-field--wide { grid-column: 1 / -1; }

.cbf-field label {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-dark, #1E2A23);
}

.cbf-field input,
.cbf-field textarea,
.cbf-field select {
  font: 400 1rem/1.5 var(--font-primary, 'DM Sans', sans-serif);
  padding: 0.6875rem 0.8125rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.5rem;
  background: var(--white, #fff);
  color: var(--text-dark, #1E2A23);
  width: 100%;
  /* stops iOS zooming the page when a field is focused */
  max-width: 100%;
}

.cbf-field input:focus,
.cbf-field textarea:focus,
.cbf-field select:focus {
  outline: 3px solid var(--brand-accent, #6E9583);
  outline-offset: 1px;
  border-color: var(--brand-purple, #2F6B4E);
}

.cbf-field[data-invalid="true"] input,
.cbf-field[data-invalid="true"] textarea { border-color: #B3261E; }

.cbf-field-hint { font-size: 0.8125rem; color: var(--text-gray, #5B655E); }
.cbf-field-error { font-size: 0.8125rem; font-weight: 700; color: #B3261E; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything that is not rendered. Never shown to a real person. */
.cbf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- intake / triage ----------------------------------------- */

/* ---- see other appointments ---------------------------------- */
.cbf-unpin {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-gray, #5B655E);
}
.cbf-unpin button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--brand-purple, #2F6B4E);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cbf-unpin button:hover { color: var(--brand-dark, #234F3A); }
.cbf-unpin button:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; border-radius: 3px; }

/* ---- actions --------------------------------------------------- */
.cbf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.375rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--border, #E6DFD0);
}

.cbf-btn {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 0.75rem 1.4375rem;
  border-radius: 0.5rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
}

.cbf-btn:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }

.cbf-btn--primary {
  background: var(--brand-purple, #2F6B4E);
  color: var(--white, #fff);
  margin-left: auto;
}
.cbf-btn--primary:hover:not([disabled]) { background: var(--brand-dark, #234F3A); }
.cbf-btn--primary[disabled] { opacity: .45; cursor: not-allowed; }

.cbf-btn--ghost {
  background: transparent;
  border-color: var(--border, #E6DFD0);
  color: var(--text-gray, #5B655E);
}
.cbf-btn--ghost:hover { border-color: var(--brand-accent, #6E9583); color: var(--brand-purple, #2F6B4E); }

.cbf-btn[data-busy="true"] { opacity: .7; pointer-events: none; }

/* ---- intake questions + documents ---------------------------- */
/* Short answers two to a row, long ones across. Fourteen full-width rows is a
   longer page than the content needs, and a yes/no does not want the width of
   a sentence. */
.cbf-qs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem 1.25rem;
  /* stretch, not start: every cell in a row is the same height, which is what
     lets the controls line up along its foot */
  align-items: stretch;
}

/* Each question is a column with its control pinned to the bottom. Without
   this, one question carrying a help line pushed its input lower than the one
   beside it, and two fields that should read as a pair — height and weight —
   sat at different heights. Labels can now be any length and the controls
   still share a baseline. */
.cbf-q {
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
}
.cbf-q--narrow { grid-column: auto; }

.cbf-q .cbf-q-input,
.cbf-q .cbf-q-choices { margin-top: auto; }

/* Yes/No matches an input's height, so a row mixing the two still lines up. */
.cbf-q-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cbf-q-choices .cbf-cat {
  flex: 1 1 0;
  min-width: 4.5rem;
  min-height: 2.875rem;
  text-align: center;
}

/* One height for every control in the set. */
.cbf-q-input { min-height: 2.875rem; }

.cbf-q-label {
  display: block;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
  margin: 0 0 0.25rem;
}
.cbf-req { color: var(--terracotta, #C2714C); }

.cbf-q-help {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-gray, #5B655E);
}

.cbf-q-input {
  width: 100%;
  max-width: 100%;
  font: 400 1rem/1.5 var(--font-primary, 'DM Sans', sans-serif);
  padding: 0.6875rem 0.8125rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.5rem;
  background: var(--white, #fff);
  color: var(--text-dark, #1E2A23);
}
.cbf-q-input:focus {
  outline: 3px solid var(--brand-accent, #6E9583);
  outline-offset: 1px;
  border-color: var(--brand-purple, #2F6B4E);
}

/* documents */
.cbf-docs { margin-top: 0.25rem; }

.cbf-doc {
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.625rem;
  padding: 0.8125rem 0.875rem;
}
.cbf-doc + .cbf-doc { margin-top: 0.625rem; }

.cbf-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cbf-doc-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
}
.cbf-doc-hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-gray, #5B655E);
  margin-top: 0.125rem;
}

/* The file input is hidden inside its own <label>, so the label IS the
   control — clicking it opens the picker without any JavaScript. */
.cbf-doc-btn { cursor: pointer; flex: 0 0 auto; }
.cbf-doc-btn:focus-within { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }

.cbf-doc-state {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-purple, #2F6B4E);
  overflow-wrap: anywhere;
}
.cbf-doc-state[data-bad="1"] { color: #B3261E; }

.cbf-consent {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0.875rem 0.9375rem;
  background: var(--cream, #F7F2E8);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-dark, #1E2A23);
  cursor: pointer;
}
.cbf-consent input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  accent-color: var(--brand-purple, #2F6B4E);
}

/* ---- BMI read-out -------------------------------------------- */
/* Worked out as the numbers are typed. The bar is drawn to a fixed 15-40
   range so the marker means the same thing every time, and the band is named
   in words as well as shown by position — colour alone tells a colour-blind
   reader nothing. */
.cbf-bmi {
  margin-top: 1rem;
  padding: 0.875rem 1rem 1rem;
  background: var(--cream, #F7F2E8);
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.75rem;
}

.cbf-bmi-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  margin: 0 0 0.75rem;
}

.cbf-bmi-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-gray, #5B655E);
}

.cbf-bmi-value {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-dark, #1E2A23);
  font-variant-numeric: tabular-nums lining;
}

.cbf-bmi-band {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
}
.cbf-bmi-band.is-under   { background: #E3EDF5; color: #2A5270; }
.cbf-bmi-band.is-healthy { background: var(--brand-light, #E4EDE6); color: var(--brand-dark, #234F3A); }
.cbf-bmi-band.is-over    { background: #FBEEDF; color: #8A5A16; }
.cbf-bmi-band.is-obese   { background: #F6E2DC; color: #8A3A26; }
.cbf-bmi-band.is-waiting {
  background: transparent;
  color: var(--text-gray, #5B655E);
  font-weight: 600;
  padding-left: 0;
  padding-right: 0;
}

/* Waiting for the numbers: the scale is drawn but muted, so it reads as
   something about to be filled in rather than a result. */
.cbf-bmi.is-empty .cbf-bmi-seg { opacity: .3; }
.cbf-bmi.is-empty .cbf-bmi-value { color: var(--text-gray, #5B655E); }

.cbf-bmi-bar {
  position: relative;
  display: flex;
  height: 0.625rem;
  border-radius: 999px;
  overflow: hidden;
}

.cbf-bmi-seg.is-under   { background: #9FC0D8; }
.cbf-bmi-seg.is-healthy { background: var(--brand-accent, #6E9583); }
.cbf-bmi-seg.is-over    { background: #E0B070; }
.cbf-bmi-seg.is-obese   { background: #CE8874; }

/* The marker sits above the bar so it reads at any band width. */
.cbf-bmi-pin {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  width: 0.1875rem;
  margin-left: -0.09375rem;
  border-radius: 999px;
  background: var(--text-dark, #1E2A23);
  box-shadow: 0 0 0 2px var(--cream, #F7F2E8);
}

.cbf-bmi-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--text-gray, #5B655E);
  font-variant-numeric: tabular-nums;
}

.cbf-bmi-note {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-gray, #5B655E);
}

/* ---- question paging ----------------------------------------- */
.cbf-intake-progress {
  margin: 0 0 0.875rem;
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-slate, #5B655E);
}

/* ---- add to calendar ----------------------------------------- */
/* Four visible buttons rather than a toggle hiding a list: two taps and a
   guess at what is behind it was too much ceremony for something this small.
   Each mark is drawn inline — a calendar glyph in the service's own colour,
   carrying the day of the appointment — which is recognisable at 22px, costs
   no request, and does not reproduce anyone's trademark. Every one is
   labelled in words too, so the colour never works alone. */
.cbf-calopts {
  margin: 1.25rem 0 0;
  padding: 0.875rem 1rem 1rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.75rem;
}

.cbf-calopts-label {
  display: block;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-gray, #5B655E);
  margin: 0 0 0.75rem;
}

.cbf-calopts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: 0.5rem;
}

.cbf-calopt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.5rem;
  background: var(--white, #fff);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.cbf-calopt:hover {
  border-color: var(--brand-accent, #6E9583);
  background: var(--cream, #F7F2E8);
}
.cbf-calopt:focus-visible {
  outline: 3px solid var(--brand-accent, #6E9583);
  outline-offset: 2px;
}

.cbf-calopt img,
.cbf-calopt svg { flex: 0 0 auto; display: block; width: 22px; height: 22px; }

@media (max-width: 640px) {
  /* Two across on a phone; four in a row would put each label under 4rem. */
  .cbf-calopts-row { grid-template-columns: repeat(2, 1fr); }
  .cbf-calopt { min-height: 44px; }
}

/* ---- payment ------------------------------------------------- */
/* Built as a receipt rather than a checkout, because nothing is charged here.
   The shape holds a deposit line or a card field the day either is switched
   on, without having to be redrawn. */
.cbf-pay {
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 0 0 1rem;
}

.cbf-pay-rows { padding: 0.25rem 0.875rem; }

.cbf-pay-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6875rem 0;
  font-size: 0.9375rem;
  color: var(--text-dark, #1E2A23);
}
.cbf-pay-line + .cbf-pay-line { border-top: 1px solid var(--border, #E6DFD0); }
.cbf-pay-line--sub { color: var(--text-gray, #5B655E); font-size: 0.875rem; }

.cbf-pay-figure {
  font-weight: 700;
  font-variant-numeric: tabular-nums lining;
  white-space: nowrap;
}

.cbf-pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  background: var(--cream, #F7F2E8);
  border-top: 1.5px solid var(--border, #E6DFD0);
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
}

.cbf-pay-total-figure {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-dark, #234F3A);
  font-variant-numeric: tabular-nums lining;
}
.cbf-pay-total-figure.is-free { font-size: 1.125rem; }

/* The reassurance is the point of the step, so it is a panel rather than a
   line of small print under the figure. */
.cbf-pay-note {
  display: flex;
  gap: 0.625rem;
  padding: 0.8125rem 0.9375rem;
  background: var(--brand-light, #E4EDE6);
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--brand-dark, #234F3A);
}

.cbf-pay-note-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-purple, #2F6B4E);
  color: var(--white, #fff);
  font-size: 0.75rem;
  line-height: 1;
}

.cbf-pay-small {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-gray, #5B655E);
}
.cbf-pay-small a { color: var(--brand-purple, #2F6B4E); font-weight: 700; text-decoration: none; }
.cbf-pay-small a:hover { text-decoration: underline; }

/* ---- error + confirmation -------------------------------------- */
.cbf-error {
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid #B3261E;
  background: #FDECEA;
  color: #7A1B14;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.9375rem;
}

.cbf-done { padding: 0.5rem 0 0; }

.cbf-done-head { text-align: center; margin: 0 0 1.25rem; }

.cbf-done-tick {
  width: 3rem; height: 3rem; margin: 0 auto 0.875rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-light, #E4EDE6);
  color: var(--brand-purple, #2F6B4E);
  font-size: 1.5rem;
}

.cbf-done-lead {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-gray, #5B655E);
}

/* The reference is what the pharmacy will have against the booking and what a
   patient is asked for on the phone, so it is the largest thing on the screen
   after the heading — and the one thing worth copying. */
.cbf-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  margin: 0 0 1rem;
  background: var(--cream, #F7F2E8);
  border: 1.5px dashed var(--brand-accent, #6E9583);
  border-radius: 0.75rem;
}

.cbf-ref-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-gray, #5B655E);
  margin: 0 0 0.125rem;
}

.cbf-ref-value {
  display: block;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-dark, #234F3A);
  font-variant-numeric: tabular-nums lining;
  /* a reference gets read aloud down a phone, so it must be selectable */
  user-select: all;
}

.cbf-ref-copy {
  flex: 0 0 auto;
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.5rem;
  background: var(--white, #fff);
  font: 600 0.875rem/1 var(--font-primary, 'DM Sans', sans-serif);
  color: var(--brand-purple, #2F6B4E);
  cursor: pointer;
}
.cbf-ref-copy:hover { border-color: var(--brand-accent, #6E9583); }
.cbf-ref-copy:focus-visible { outline: 3px solid var(--brand-accent, #6E9583); outline-offset: 2px; }

.cbf-done-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6875rem 1rem;
  margin: 0 0 1rem;
  padding: 0.9375rem 1rem;
  border: 1.5px solid var(--border, #E6DFD0);
  border-radius: 0.75rem;
}

.cbf-done-list dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-gray, #5B655E);
}

.cbf-done-list dd {
  margin: 0;
  font-weight: 700;
  color: var(--text-dark, #1E2A23);
  overflow-wrap: break-word;
}

.cbf-done-sub {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--text-gray, #5B655E);
  margin-top: 0.125rem;
}

.cbf-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1rem 0;
}
.cbf-done-actions .cbf-btn { flex: 1 1 10rem; text-align: center; text-decoration: none; }

.cbf-done-note { margin-top: 0.25rem; }
.cbf-done-note a { color: var(--brand-dark, #234F3A); font-weight: 700; }

@media (max-width: 640px) {
  .cbf-ref { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .cbf-ref-copy { width: 100%; min-height: 44px; }
  .cbf-done-list { grid-template-columns: 1fr; gap: 0.25rem 0; }
  .cbf-done-list dt { margin-top: 0.5rem; }
  .cbf-done-actions .cbf-btn { flex: 1 1 100%; min-height: 48px; }
}

/* ---- footer bits ------------------------------------------------ */
.cbf-fallback,
.cbf-noscript {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-gray, #5B655E);
  margin: 1.25rem 0 0;
}

.cbf-fallback a,
.cbf-noscript a {
  color: var(--brand-purple, #2F6B4E);
  font-weight: 700;
  text-decoration: none;
}
.cbf-fallback a:hover,
.cbf-noscript a:hover { text-decoration: underline; }

.cbf-skeleton {
  height: 3.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(90deg, var(--cream, #F7F2E8) 25%, #fff 50%, var(--cream, #F7F2E8) 75%);
  background-size: 200% 100%;
  animation: cbf-shim 1.2s infinite;
}
@keyframes cbf-shim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cbf-skeleton { animation: none; } }

/* ============================================================
   MOBILE
   ============================================================
   The form is used on a phone more than anything else — someone
   standing in the shop or on the bus — so the small screen is
   treated as the real case rather than a shrunk desktop.

   Four things drive this block:
     1. Tap targets. Every control clears 44px, the minimum a
        thumb can hit reliably.
     2. iOS zoom. Safari zooms the whole page when a focused
        input is under 16px, which throws the layout sideways and
        is nearly impossible to recover from one-handed. Inputs
        stay at 16px on small screens for that reason alone.
     3. The summary moves above the flow, because a running total
        below the fold is a total nobody sees.
     4. Nothing may scroll the page sideways. The day strip is
        the one deliberate horizontal scroller and it is opted in
        explicitly.
   ============================================================ */

@media (max-width: 899px) {
  /* The sidebar becomes a header strip: steps as one scrollable row, then the
     choices and the price. It stays ABOVE the flow — a running total below the
     fold is a total nobody sees. */
  .cbf { display: flex; flex-direction: column; }
  .cbf-side    { order: 1; }
  .cbf-body    { order: 2; }
  .cbf-fallback{ order: 3; }

  .cbf-side {
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-radius: 0.875rem;
  }

  /* The step list is a column of names with a connector — right on a wide
     screen, useless on a narrow one, where it became a scrolling row of
     numbered dots that told you neither where you were nor how much was left.
     The bar replaces it here and says both in words. */
  .cbf-steps { display: none; }
  .cbf-prog  { display: block; }

  /* Choices and price side by side, so the strip stays shallow. */
  .cbf-side-details { display: none; }
  .cbf-side-total {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
  }
  .cbf-total-value { font-size: 1.5rem; }
  .cbf-total-note  { display: none; }
}

@media (max-width: 640px) {
  .cbf-section { padding: 3.5rem 0; }

  .cbf {
    padding: 1.125rem;
    border-radius: 1.125rem;
    gap: 1.125rem;
  }

  /* The rail becomes a single "Step 2 of 5" line. Six uppercase
     labels wrapping over three rows ate a third of the screen and
     told the patient nothing they could act on. */
  .cbf-rail {
    gap: 0.5rem;
    padding-bottom: 1rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .cbf-rail::-webkit-scrollbar { display: none; }
  .cbf-rail li { flex: 0 0 auto; }
  /* Only the current step keeps its label; the rest shrink to
     their numbered dot, so the whole rail fits one row. */
  .cbf-rail li:not([data-state="current"]) {
    font-size: 0;
    gap: 0;
  }
  .cbf-rail li:not([data-state="current"])::before { margin: 0; }

  /* One option per row: two 15rem cards side by side on a 375px
     screen leaves ~8 characters per line for a service name. */
  .cbf-options { grid-template-columns: 1fr; gap: 0.625rem; }
  .cbf-opt { padding: 0.875rem 1rem; min-height: 44px; }

  /* Four times per row at 375px, still comfortably tappable. */
  .cbf-slot-row { grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: 0.4375rem; }
  .cbf-slot     { padding: 0.8125rem 0.25rem; min-height: 44px; }

  /* The calendar keeps square cells, so a 7-column grid on a 375px screen
     gives roughly 42px a side — at the edge of a comfortable tap, which is
     why the whole cell is the button rather than the number inside it. */
  .cbf-cal { padding: 0.625rem; }
  .cbf-cal-grid, .cbf-cal-dows { gap: 0.1875rem; }
  .cbf-cal-day { font-size: 0.875rem; height: 2.625rem; border-radius: 0.375rem; }

  .cbf-soonest { padding: 0.8125rem 0.875rem; }
  .cbf-soonest-cta { margin-left: 0; }

  .cbf-cats { gap: 0.4375rem; }
  .cbf-cat  { padding: 0.625rem 0.875rem; min-height: 40px; }

  .cbf-fields { grid-template-columns: 1fr; gap: 0.875rem; }

  /* 16px minimum: anything smaller and iOS Safari zooms the page
     on focus. This is the one place a magic number is the point. */
  .cbf-field input,
  .cbf-field textarea,
  .cbf-field select {
    font-size: 16px;
    min-height: 44px;
  }

  /* Full-width stacked buttons, primary first under the thumb. */
  .cbf-actions {
    flex-direction: column-reverse;
    gap: 0.625rem;
    margin-top: 1.375rem;
    padding-top: 1.25rem;
  }
  .cbf-btn { width: 100%; min-height: 48px; margin-left: 0; }
  .cbf-btn--primary { margin-left: 0; }

}

/* Very narrow (older/smaller phones, ~320px) */
@media (max-width: 380px) {
  .cbf { padding: 0.875rem; }
  .cbf-slot-row { grid-template-columns: repeat(3, 1fr); }
  .cbf-cal-day { font-size: 0.8125rem; }
}

/* Landscape phones: keep the day strip from eating the viewport */
@media (max-height: 480px) and (orientation: landscape) {
  .cbf-section { padding: 2rem 0; }
}

/* Coarse pointers — touch devices of any size. Hover lifts are a
   mouse affordance; on a touchscreen they fire on tap and read as
   a glitch. */
@media (hover: none) {
  .cbf-opt:hover { transform: none; }
}