/* ==========================================================
   Booking form redesign — design reference build
   Figma node 4446:18700 (file rXkYsvfFcXhSOHgb18Gys2)

   Self-contained, matching the house convention: the theme's own
   hand-coded pages ship their own CSS rather than consuming the
   --t-* tokens (see the note at the top of theme-tokens.css).
   Local palette below is the same one includes/contact-test uses,
   so this form sits natively next to the rest of the site.

   Prefix: .bkf-
   No GSAP, no Elementor. Transitions are CSS only and all of them
   are disabled under prefers-reduced-motion at the foot of the file.
   ========================================================== */

.bkf {
  --bkf-primary:      #233963;
  --bkf-text:         #1E2E4C;
  --bkf-black:        #09101D;
  --bkf-white:        #FFFFFF;
  --bkf-n9:           #F4F6F9;
  --bkf-n8:           #EBEEF2;
  --bkf-n7:           #DADEE3;
  /* Was #858C94 = 3.40:1 on white — below the 4.5:1 AA minimum, and it carries
     every resting floating label plus all secondary body text. #667078 is 5.09:1.
     It is also used as a border/icon colour (.bkf-duration-dot, .bkf-card-online);
     those get --bkf-n5-line so they do not visually thicken. */
  --bkf-n5:           #667078;
  --bkf-n5-line:      #858C94;
  --bkf-accent:       #6AC2B7;
  --bkf-mint:         #D6F5E3;
  --bkf-mint-line:    #8ADBBB;
  --bkf-danger:       #C0392B;
  --bkf-gradient:     linear-gradient(90deg, #47B0A3 0%, #4FB799 30.4%, #4CC86F 77.4%, #84BA4C 100%);

  --bkf-gap:          24px;
  --bkf-field-h:      48px;

  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--bkf-text);
  display: block;
  /* No padding or background of its own.
     On the standalone preview page this section IS the page, but as a shortcode it
     renders inside .dc-intro on /discovery-call/, which already supplies
     `padding: 2% 5% 10%` and a bottom-right watermark. A 24px side padding here
     pushed the shell out of line with the breadcrumb and the "Book Discovery Call"
     heading above it, and an opaque white background painted over the watermark.
     The shell below carries its own padding, so nothing is lost. */
  padding: 0;
  background: transparent;
}

/* ...and this is the rule that actually wins.
   `.bkf` alone is specificity (0,1,0). The host theme sets
   `.dc-page section { padding: 80px 5% }` (discovery-call-test.css:36) which is
   (0,1,1), so the declaration above LOSES on every /discovery-call/ breakpoint —
   including the <=767px override at :37. The background half of the intent worked
   (nothing sets a background on `.dc-page section`), which is exactly why this was
   easy to miss: the watermark showed through while the shell still sat ~65px right
   of the breadcrumb and the "Book Discovery Call" heading.
   `.dc-page section.bkf` is (0,2,1) and beats it at every breakpoint regardless of
   stylesheet order, which is why this is a separate rule rather than !important. */
.dc-page section.bkf { padding: 0; }

.bkf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The Figma's outer container: a hairline navy frame. Radius is intentional
   and matches the design; the house "no radius" rule covers content cards,
   which the service cards below honour with a restrained 4px. */
.bkf-shell {
  max-width: 1280px;
  margin: 0 auto;
  border: 1.5px solid var(--bkf-text);
  border-radius: 24px;
  padding: 32px;
  background: var(--bkf-white);
}
@media (max-width: 900px) { .bkf-shell { padding: 20px; border-radius: 16px; } }
/* The .bkf half of this rule went with the padding above — the host container
   handles outer spacing now. The shell keeps its own tightening. */
@media (max-width: 560px) { .bkf-shell { padding: 16px; } }

.bkf-notice {
  margin: 0; padding: 20px; background: var(--bkf-n9);
  border-left: 3px solid var(--bkf-accent); font-size: 15px;
}

.bkf-form { display: flex; flex-direction: column; gap: 44px; }
/* An author `display` beats the UA sheet's [hidden]{display:none}, so setting
   form.hidden = true on success would NOT have hidden anything without this —
   the success panel just stacked underneath the still-visible form. Any element
   this file gives a display value to needs the same guard. */
.bkf-form[hidden],
.bkf-success[hidden],
.bkf-booking-for[hidden] { display: none !important; }

/* ---------- Bands ---------- */
.bkf-band { border: 0; padding: 0; margin: 0; min-width: 0; }

.bkf-band-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0; margin: 0 0 20px; float: none; width: 100%;
}
.bkf-band-icon { color: var(--bkf-text); display: inline-flex; flex-shrink: 0; }
.bkf-band-title {
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--bkf-text);
}
.bkf-band-sub { margin: 0 0 20px; font-size: 13px; color: var(--bkf-n5); }
/* .bkf-band > .bkf-band-head + .bkf-grid { margin-top: 26px; } */

/* "Booking for X" chip, from the Figma */
.bkf-booking-for {
  margin-left: auto; padding: 4px 12px;
  background: var(--bkf-mint); color: var(--bkf-text);
  font-size: 13px; white-space: nowrap;
}
.bkf-booking-for strong { font-weight: 700; }
/* The chip is nowrap + margin-left:auto, which pushed it past the viewport on a
   narrow screen (measured 3px of real overflow at 420px). Below the split
   breakpoint let the head wrap and drop the chip onto its own line. */
@media (max-width: 1000px) {
  .bkf-band-head { flex-wrap: wrap; }
  .bkf-booking-for {
    margin-left: 0;
    white-space: normal;
    max-width: 100%;
    order: 3;
    flex-basis: 100%;
  }
}

/* ---------- Field grids ---------- */
.bkf-grid { display: grid; gap: var(--bkf-gap); }
.bkf-grid + .bkf-grid { margin-top: var(--bkf-gap); }
.bkf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bkf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Figma row 2: two narrow fields then a wide message spanning the rest. */
.bkf-grid--details2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bkf-field--wide { grid-column: span 2; }

@media (max-width: 1080px) {
  .bkf-grid--4, .bkf-grid--details2, .bkf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bkf-field--wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bkf-grid--4, .bkf-grid--details2, .bkf-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .bkf-field--wide { grid-column: span 1; }
}

/* ---------- Floating-label fields (the Figma's notched inputs) ---------- */
.bkf-field { position: relative; min-width: 0; }

.bkf-field input,
.bkf-field select,
.bkf-field textarea {
  width: 100%;
  height: var(--bkf-field-h);
  padding: 14px 16px;
  border: 1px solid var(--bkf-n7);
  border-radius: 6px;
  background: var(--bkf-white);
  font-family: inherit;
  font-size: 15px;
  color: var(--bkf-black);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.bkf-field textarea { height: auto; min-height: var(--bkf-field-h); resize: vertical; padding-top: 14px; }

.bkf-field label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  background: var(--bkf-white);
  color: var(--bkf-n5);
  font-size: 15px;
  pointer-events: none;
  transition: top .14s ease, font-size .14s ease, color .14s ease;
}
/* Raise the label when the control has content or focus. :placeholder-shown is
   why every input carries placeholder=" " — the same trick the live form uses. */
.bkf-field input:focus + label,
.bkf-field textarea:focus + label,
.bkf-field select:focus + label,
.bkf-field input:not(:placeholder-shown) + label,
.bkf-field textarea:not(:placeholder-shown) + label,
.bkf-field select:valid + label {
  top: 0;
  font-size: 12px;
  color: var(--bkf-text);
}
.bkf-field textarea:focus + label,
.bkf-field textarea:not(:placeholder-shown) + label { top: 0; }

.bkf-field input:focus,
.bkf-field select:focus,
.bkf-field textarea:focus {
  outline: none;
  border-color: var(--bkf-primary);
  box-shadow: 0 0 0 3px rgba(35, 57, 99, .12);
}
.bkf-req label span { color: var(--bkf-danger); }

.bkf-field--select::after {
  content: "";
  position: absolute; right: 16px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--bkf-n5-line);
  border-bottom: 2px solid var(--bkf-n5-line);
  transform: rotate(45deg);
  pointer-events: none;
}
.bkf-field select { padding-right: 40px; }

/* invalid state, applied by JS only after a submit attempt */
.bkf-field.is-invalid input,
.bkf-field.is-invalid select,
.bkf-field.is-invalid textarea { border-color: var(--bkf-danger); }
.bkf-field.is-invalid label { color: var(--bkf-danger); }

/* ---------- Band 2: the split ---------- */
.bkf-band--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* Figma puts the date on the LEFT and the service on the RIGHT, but the DOM
   order is service-first so tab order follows the real dependency. Grid
   placement restores the designed visual order on wide screens only. */
.bkf-col--date    { grid-column: 1; grid-row: 1; }
.bkf-col--service { grid-column: 2; grid-row: 1; }
.bkf-col { border: 0; padding: 0; margin: 0; min-width: 0; }

@media (max-width: 1000px) {
  .bkf-band--split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Stacked, the dependency order wins: choose a service, then a date. */
  .bkf-col--service { grid-column: 1; grid-row: 1; }
  .bkf-col--date    { grid-column: 1; grid-row: 2; }
}

/* Date column is inert until a service is chosen. */
.bkf-col--date[aria-disabled="true"] { opacity: .55; }
.bkf-col--date[aria-disabled="true"] .bkf-schedule-grid { pointer-events: none; }

/* ---------- Service cards ---------- */
.bkf-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1240px) { .bkf-services { grid-template-columns: minmax(0, 1fr); } }

.bkf-card {
  position: relative;
  border: 1.5px solid var(--bkf-text);
  border-radius: 4px;
  background: var(--bkf-white);
  display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bkf-card.is-selected { box-shadow: 0 0 0 1px var(--bkf-text); }

.bkf-card-radio {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.bkf-card-label {
  display: block; padding: 18px 18px 12px; cursor: pointer; flex: 1 1 auto;
}
.bkf-card-title { display: block; font-size: 18px; font-weight: 700; color: var(--bkf-text); }
.bkf-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px; font-size: 13px; color: var(--bkf-n5); line-height: 1.5;
}
.bkf-card-check {
  position: absolute; top: 18px; right: 18px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--bkf-n7);
  transition: border-color .15s ease, background .15s ease;
}
.bkf-card.is-selected .bkf-card-check { border-color: var(--bkf-accent); background: var(--bkf-accent); }
.bkf-card.is-selected .bkf-card-check::after {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bkf-card-radio:focus-visible + .bkf-card-label .bkf-card-check {
  outline: 2px solid var(--bkf-primary); outline-offset: 2px;
}

/* Spacing here is measured, not guessed: at the Figma's 296px card the row
   needs price + two duration labels + the online glyph on ONE line. With
   14px gaps it overflowed by 9px and wrapped to two lines. */
.bkf-card-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bkf-n9);
  border-top: 1px solid var(--bkf-n8);
  transition: background .15s ease;
}
.bkf-card.is-selected .bkf-card-foot { background: var(--bkf-mint); border-top-color: var(--bkf-mint-line); }
.bkf-card-price { font-size: 13px; font-weight: 600; color: var(--bkf-text); }
.bkf-card-online { margin-left: auto; color: var(--bkf-n5-line); display: inline-flex; }

.bkf-durations { display: flex; gap: 10px; flex-wrap: wrap; }
.bkf-duration { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; color: var(--bkf-text); }
.bkf-duration input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bkf-duration-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--bkf-n5-line); flex-shrink: 0; position: relative;
  transition: border-color .15s ease;
}
.bkf-duration input:checked + .bkf-duration-dot { border-color: #2FA36B; }
.bkf-duration input:checked + .bkf-duration-dot::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #2FA36B;
}
.bkf-duration input:focus-visible + .bkf-duration-dot { outline: 2px solid var(--bkf-primary); outline-offset: 2px; }

/* ---------- Schedule column ---------- */
.bkf-schedule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* Collapse to one column below 1240px, NOT 700px.
   This split is nested inside .bkf-band--split, which is itself two columns above
   1000px, so between roughly 1001px and 1240px the calendar column is only ~170px
   wide: day cells render 19-25px and the weekday header runs together as
   "SunMonTueWedThuFriSat". The old 700px value was measured against the standalone
   preview page, where this grid had the full page width; the breakpoint was keyed to
   the VIEWPORT while the real constraint is the CONTAINER. 1240px is where the inner
   column stops being cramped in the live layout. */
@media (max-width: 1240px) { .bkf-schedule-grid { grid-template-columns: minmax(0, 1fr); } }
.bkf-schedule-left { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Branded select (custom listbox) ----------
   A native <select>'s OPEN list is OS chrome and takes no CSS, so with 419
   timezone options it read as stock browser UI. The real <select> is kept as the
   form control and visually hidden; this is the branded surface on top. If the
   JS never runs, .bkf-has-combo is never added and the native select shows
   normally. */
.bkf-has-combo select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: var(--bkf-field-h); left: 0; top: 0;
}
.bkf-combo-btn {
  width: 100%; height: var(--bkf-field-h);
  padding: 14px 40px 14px 16px;
  border: 1px solid var(--bkf-n7); border-radius: 6px;
  background: var(--bkf-white); color: var(--bkf-black);
  font-family: inherit; font-size: 15px; text-align: left;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bkf-combo-btn:hover { border-color: var(--bkf-n5); }
.bkf-combo-btn:focus-visible,
.bkf-combo-btn[aria-expanded="true"] {
  outline: none; border-color: var(--bkf-primary);
  box-shadow: 0 0 0 3px rgba(35, 57, 99, .12);
}
.bkf-field.is-invalid .bkf-combo-btn { border-color: var(--bkf-danger); }
/* The floating label rides on the combo's filled state, since :placeholder-shown
   cannot apply to a button. */
.bkf-has-combo.bkf-combo-filled label,
.bkf-has-combo:focus-within label { top: 0; font-size: 12px; color: var(--bkf-text); }

.bkf-combo-panel {
  /* The timezone field shares its row with the Auto-detect button, so it is only
     ~155px wide — narrow enough that every option wrapped onto three lines. The
     panel is free to be wider than its trigger; min-width lets it spill right,
     max-width keeps it inside the schedule column on small screens. */
  position: absolute; z-index: 40; left: 0; top: calc(var(--bkf-field-h) + 4px);
  min-width: 290px; max-width: min(360px, 88vw);
  background: var(--bkf-white);
  border: 1px solid var(--bkf-n7); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(9, 16, 29, .14);
  overflow: hidden;
}
.bkf-combo-panel[hidden] { display: none !important; }
.bkf-combo-search {
  width: 100%; height: 40px; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--bkf-n8);
  font-family: inherit; font-size: 14px; color: var(--bkf-black);
}
/* `outline: none` left this with NO focus indicator: the only change was the
   background going #FFFFFF -> #F4F6F9, which is 1.08:1 — invisible. Keyboard users
   opening the timezone list had no way to see where they were typing.
   The ring is inset (negative offset) so it reads as part of the search box at the
   top of the popup instead of overflowing the listbox edge.

   SELECTOR IS DELIBERATELY THIS LONG. `.bkf-combo-search:focus` is (0,2,0) and loses
   to the generic field reset a few hundred lines above —
   `.bkf-field input:focus { outline: none }` is (0,2,1), so it wins on specificity no
   matter which comes later. The symptom was subtle: `outline-offset` and `background`
   from this block applied while `outline-style` stayed `none`, because the reset only
   sets the shorthand and not the offset. `input.bkf-combo-search` makes this (0,3,1). */
.bkf-field input.bkf-combo-search:focus {
  outline: 2px solid var(--bkf-primary);
  outline-offset: -2px;
  background: var(--bkf-n9);
}
.bkf-combo-list { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.bkf-combo-opt {
  padding: 9px 12px; font-size: 14px; color: var(--bkf-text);
  cursor: pointer; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bkf-combo-opt:hover,
.bkf-combo-opt.is-active { background: var(--bkf-n9); }
.bkf-combo-opt.is-selected { background: var(--bkf-mint); font-weight: 600; }
.bkf-combo-none { padding: 14px 12px; font-size: 13px; color: var(--bkf-n5); }

/* The chevron belongs to the combo button once enhanced. */
.bkf-has-combo.bkf-field--select::after { z-index: 1; }

/* Timezone row: select + the Auto-detect control the live form offers. */
.bkf-tz-row { display: flex; gap: 8px; align-items: stretch; }
.bkf-tz-row .bkf-field { flex: 1 1 auto; min-width: 0; }
.bkf-tz-detect {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; height: var(--bkf-field-h);
  border: 1px solid var(--bkf-n7); border-radius: 6px;
  background: var(--bkf-white); color: var(--bkf-text);
  font-family: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.bkf-tz-detect:hover { background: var(--bkf-n9); border-color: var(--bkf-n5); }
.bkf-tz-detect:focus-visible { outline: 2px solid var(--bkf-primary); outline-offset: 2px; }
.bkf-tz-detect[disabled] { opacity: .5; cursor: not-allowed; }
.bkf-tz-detect[data-result="ok"] { border-color: var(--bkf-mint-line); background: var(--bkf-mint); }
@media (max-width: 480px) {
  .bkf-tz-row { flex-direction: column; }
  .bkf-tz-detect { height: 40px; justify-content: center; }
}

/* Calendar */
.bkf-cal { border: 1px solid var(--bkf-n7); border-radius: 6px; padding: 16px; background: var(--bkf-white); }
.bkf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bkf-cal-title { font-size: 15px; font-weight: 600; color: var(--bkf-text); }
.bkf-cal-nav {
  border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--bkf-text); border-radius: 4px; line-height: 0;
}
.bkf-cal-nav:hover { background: var(--bkf-n9); }
.bkf-cal-nav:focus-visible { outline: 2px solid var(--bkf-primary); outline-offset: 1px; }
.bkf-cal-nav[disabled] { opacity: .3; cursor: not-allowed; }

.bkf-cal-dow, .bkf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bkf-cal-dow { margin-bottom: 4px; }
.bkf-cal-dow span { text-align: center; font-size: 12px; color: var(--bkf-n5); padding: 6px 0; }
.bkf-cal-dow span:first-child, .bkf-cal-dow span:last-child { color: var(--bkf-danger); }

/* Restore the centring the theme's design system takes away.
   intone-design-system.css carries
       :where(button, [type="button"], [type="reset"], [type="submit"]) { text-align: inherit }
   `:where()` has ZERO specificity, so it never fights another rule — it just removes the
   browser's own `text-align: center` default for buttons, and anything of ours that is
   wider than its own text then renders hard left. That is invisible on content-sized
   buttons and glaring on the calendar, where the 7-column `1fr` grid stretches every day
   cell to ~36px around a one- or two-digit number.
   .bkf-combo-btn is deliberately NOT in this list: it stands in for a <select> and its
   value belongs on the left, which is why it sets its own `text-align: left`. */
.bkf-day,
.bkf-btn,
.bkf-cal-nav,
.bkf-tz-detect { text-align: center; }

.bkf-day {
  border: 0; background: none; font-family: inherit; font-size: 13px;
  color: var(--bkf-text); padding: 7px 0; cursor: pointer; border-radius: 4px;
  transition: background .12s ease, color .12s ease;
}
.bkf-day:hover:not([disabled]) { background: var(--bkf-n9); }
.bkf-day:focus-visible { outline: 2px solid var(--bkf-primary); outline-offset: -2px; }
/* The selected day is painted --bkf-text (#1E2E4C) and the ring above is
   --bkf-primary (#233963) drawn INSIDE it by the negative offset — two navies,
   1.18:1, so the keyboard cursor vanishes on the one cell the visitor is most
   likely to be standing on. White on that same navy is 13.55:1.
   Only the COLOUR is overridden so the ring keeps its geometry; WCAG 2.2 SC 1.4.11
   wants >=3:1 for a focus indicator against what it is drawn over.
   If another dark-background day state is ever added, it needs the same treatment —
   the ring colour has to follow the cell, not the palette. */
.bkf-day.is-selected:focus-visible { outline-color: var(--bkf-white); }
.bkf-day.is-beyond { color: var(--bkf-n7); cursor: not-allowed; background: none !important; }
.bkf-day.is-beyond::after { display: none; }
.bkf-day[disabled] { color: var(--bkf-n7); cursor: not-allowed; }
.bkf-day.is-empty { visibility: hidden; }
/* Today. The brand green #2FA36B is only 3.20:1 on white, which 13px bold does
   not qualify for large-text leniency — darkened to #17693F (7.0:1). The
   underline is deliberate: colour was the only thing marking today, so the cue
   disappeared entirely for anyone who cannot separate it from the neighbours. */
.bkf-day.is-today {
  font-weight: 700; color: #17693F;
  text-decoration: underline; text-underline-offset: 2px;
}
.bkf-day.is-selected { background: var(--bkf-text); color: #fff; }
/* Availability heat.
   The colour comes from the SERVER (--bkf-avail is set per cell from the
   metadata's own `color`), so this calendar can never disagree with the live
   form's thresholds. The full palette is get_availability_color() in
   class-rk-booking-handler.php:1352-1356 — high #28a745 green, medium #ffc107
   amber, low #dc3545 RED, none #6c757d grey. Do not hardcode it here. */
.bkf-day.has-avail::after {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  margin: 3px auto 0; background: var(--bkf-avail, transparent);
}
.bkf-day.is-none { color: var(--bkf-n7); }
/* Weekdays the admin has excluded (rk_booking_working_days). Distinct from
   is-none, which means "a working day the presenter has no capacity on". */
.bkf-day.is-offday { color: var(--bkf-n7); cursor: not-allowed; background: none !important; }
.bkf-day.is-offday::after { display: none; }
.bkf-day.is-none::after { opacity: .55; }
.bkf-day.is-selected::after { background: #fff; }
/* A tinted ground keeps the month scannable at a glance without relying on a 5px
   dot alone (accessibility: the dot is not the only cue — the title/aria-label
   carries the count too).
   The tint is MIXED FROM --bkf-avail, the same custom property the dot uses, so
   ground and mark can never disagree. They did: `low` was hand-tinted amber while
   the server paints its dot red, which read as "some availability" on the days
   that have least. Deriving it removes the class of bug, not just the instance.
   The rgba() line is the pre-color-mix fallback and is intentionally neutral —
   a wrong-colour fallback would reintroduce exactly what this fixes. */
.bkf-day.has-avail:not(.is-selected):not(.is-none) { background: rgba(0, 0, 0, .035); }
@supports (background: color-mix(in srgb, red 10%, white)) {
  .bkf-day.has-avail:not(.is-selected):not(.is-none) {
    background: color-mix(in srgb, var(--bkf-avail, transparent) 14%, #fff);
  }
}

.bkf-cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bkf-n8);
}
.bkf-cal-legend[hidden] { display: none !important; }
.bkf-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--bkf-n5); }
.bkf-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Time slots */
.bkf-slots-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--bkf-text); }
.bkf-slots-label span { color: var(--bkf-danger); }
.bkf-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-content: start; }
@media (max-width: 420px) { .bkf-slots { grid-template-columns: minmax(0, 1fr); } }
.bkf-slots[aria-busy="true"] { opacity: .5; }
.bkf-slots-empty, .bkf-slots-msg {
  grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--bkf-n5); line-height: 1.5;
}

.bkf-slot {
  border: 1.5px solid var(--bkf-text); border-radius: 4px; background: var(--bkf-white);
  padding: 9px 8px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--bkf-text); cursor: pointer; text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.bkf-slot:hover { background: var(--bkf-n9); }
.bkf-slot:focus-visible { outline: 2px solid var(--bkf-primary); outline-offset: 2px; }
.bkf-slot.is-selected { background: var(--bkf-mint); border-color: var(--bkf-mint-line); }
.bkf-slot[disabled] { opacity: .4; cursor: not-allowed; }

/* Per-field errors and hints */
.bkf-field-err {
  margin: 6px 0 0; font-size: 13px; color: var(--bkf-danger); line-height: 1.4;
}
.bkf-field-err[hidden] { display: none !important; }
.bkf-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--bkf-n5); }
/* .bkf-tz-row deliberately does NOT wrap: it is exactly two items, the timezone
   control and Detect. Anything added as a third child steals width from the control
   rather than dropping below it — which is what happened to the short-lived
   "timezone detected" note. Add flex-wrap first if a third item is ever wanted. */

/* Slot status lives outside the radiogroup so it can be announced. */
.bkf-slots-status { margin: 0 0 10px; font-size: 13px; color: var(--bkf-n5); line-height: 1.5; }
.bkf-slots-status[hidden] { display: none !important; }

/* ---------- Errors ---------- */
.bkf-error { margin: 12px 0 0; color: var(--bkf-danger); font-size: 14px; }
.bkf-error--submit { flex: 1 1 100%; margin: 0 0 8px; text-align: right; }

/* ---------- Actions ---------- */
.bkf-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 16px; margin-top: 28px;
}
.bkf-btn {
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; padding: 12px 26px; border-radius: 4px;
  cursor: pointer; transition: opacity .15s ease, box-shadow .15s ease;
}
.bkf-btn:focus-visible { outline: 2px solid var(--bkf-primary); outline-offset: 3px; }
.bkf-btn--ghost { background: none; border: 1.5px solid var(--bkf-text); color: var(--bkf-text); }
.bkf-btn--ghost:hover { background: var(--bkf-n9); }
/* White on the brand gradient measures 2.14:1 at its lightest stop — far below
   AA. The gradient is a site-wide brand asset, so rather than recolour the brand
   here, the CTA uses a darkened variant of the SAME ramp that clears 4.5:1 with
   white at every stop. Flagged for a site-wide decision; see the audit note. */
.bkf-btn--primary {
  background: linear-gradient(90deg, #2E7D6E 0%, #2F7F63 30.4%, #2C8347 77.4%, #4A7A2E 100%);
  border: 0; color: #fff; min-width: 204px;
}
.bkf-btn--primary:hover { opacity: .92; }
.bkf-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Success ---------- */
/* ---------- Confirmation ----------
   The shell is sized for the FORM (two-column, wide). A confirmation is one narrow
   column, so it gets .is-success on the shell: the border then hugs the content
   instead of framing ~300px of empty space either side. Sharp corners throughout,
   per the house rule — the shell's own radius is the one Figma-mandated exception. */
.bkf-shell.is-success {
  max-width: 980px;
  padding: 40px 44px 44px;
  /* LEFT-aligned, not centred. `.bkf-shell` centres itself, which is invisible at the
     form's 1280px but throws the 720px confirmation 324px right of the breadcrumb and
     the "Book Discovery Call" heading — everything else on the page starts at the
     container's left edge, so a centred box reads as misplaced rather than centred. */
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 900px) { .bkf-shell.is-success { padding: 24px 20px 28px; } }

.bkf-success { text-align: center; }

.bkf-success-hero { margin-bottom: 30px; }
/* Filled disc rather than a thin outline ring: reads as a state, not an icon. */
.bkf-success-mark {
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: #17693F; color: #fff; border-radius: 50%;
}
.bkf-success-title {
  margin: 0 0 10px; font-size: 28px; font-weight: 700;
  letter-spacing: -.015em; color: var(--bkf-text);
}
/* showSuccess() moves focus here so a screen reader announces the confirmation instead
   of being dumped at <body>. The element carries tabindex="-1" and cannot be tabbed to,
   so the focus is purely an announcement hook — but Chrome still matches :focus-visible
   for a programmatic focus and painted a black rectangle across the whole heading.
   Suppressed here rather than by dropping the focus, which would lose the announcement. */
.bkf-success-title:focus { outline: none; }
.bkf-success-lead {
  /* 60ch, not 46: the hero sits above a 980px two-column body, and a narrow measure
     centred over that reads as a stray fragment rather than a lead. */
  margin: 0 auto; max-width: 60ch; font-size: 15.5px;
  color: var(--bkf-n5); line-height: 1.65;
}
.bkf-success-sub {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--bkf-n5);
}

/* Two columns once there is room: what you booked, then what happens next. A single
   narrow column left the confirmation as a small card against a very wide empty page —
   the opposite imbalance to the one this replaced. Reading order is unchanged because
   the card still comes first in the DOM. */
.bkf-success-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 820px) {
  .bkf-success-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
}

.bkf-success-card {
  margin: 0; padding: 0; text-align: left;
  background: var(--bkf-n9); border-left: 3px solid var(--bkf-accent);
}
/* The reference sits above the pairs, on its own ground, because it is the one
   line people screenshot or quote back to us. */
.bkf-success-ref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--bkf-n7);
}
.bkf-success-ref-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bkf-n5);
}
.bkf-success-ref-value {
  font-size: 17px; font-weight: 700; color: var(--bkf-text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.bkf-success-list {
  margin: 0; padding: 6px 22px 18px;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0 24px; font-size: 15px;
}
.bkf-success-list dt,
.bkf-success-list dd { padding: 10px 0; border-bottom: 1px solid var(--bkf-n8); }
.bkf-success-list dt { color: var(--bkf-n5); white-space: nowrap; }
.bkf-success-list dd { margin: 0; color: var(--bkf-text); font-weight: 600; overflow-wrap: anywhere; }
/* No rule under the final pair — it would float free of the card edge. */
.bkf-success-list dt:nth-last-of-type(1),
.bkf-success-list dd:nth-last-of-type(1) { border-bottom: 0; }
@media (max-width: 520px) {
  .bkf-success-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bkf-success-list dt { padding-bottom: 0; border-bottom: 0; }
}

.bkf-success-next { text-align: left; margin: 0; }
.bkf-next-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.bkf-next-steps li { display: flex; gap: 14px; font-size: 14.5px; line-height: 1.6; color: var(--bkf-n5); }
.bkf-next-steps strong { color: var(--bkf-text); font-weight: 600; }
.bkf-next-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bkf-mint); color: var(--bkf-text);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

.bkf-success-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 34px 0 0; padding-top: 28px; border-top: 1px solid var(--bkf-n8);
}
.bkf-success-actions .bkf-btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .bkf *, .bkf *::before, .bkf *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- Host-theme guard ----------
 *
 * This form renders inside a page that scopes typography to ELEMENTS:
 *     .dc-page p        { margin: 0; line-height: 1.55 }
 *     .dc-page h1..h4   { margin: 0; color; font-weight; font-family }
 * (includes/discovery-call-test/css/discovery-call-test.css)
 *
 * Both are specificity (0,1,1) and beat any bare `.bkf-*` class at (0,1,0) — regardless
 * of which stylesheet loads later. So EVERY <p> and heading in this form silently lost
 * its margins to the host page: the confirmation lead stopped centring because
 * `margin: 0 auto` became `margin: 0`, "What happens next" lost the gap beneath it, and
 * on the form itself the hints, field errors, the slot status line and the error text all
 * lost their spacing.
 *
 * Re-asserted here at (0,2,0) by prefixing `.bkf`. This block is LAST on purpose and is
 * the one place to look when a margin "does nothing". ADD TO IT whenever a new <p> or
 * heading class is introduced — a plugin cannot assume the host theme leaves elements
 * alone, and this is the third time this exact collision has cost a debugging pass.
 */
.bkf .bkf-success-title { margin: 0 0 10px; color: var(--bkf-text); font-weight: 700; }
.bkf .bkf-success-sub   { margin: 0 0 14px; color: var(--bkf-n5); font-weight: 700; }
.bkf .bkf-success-lead  { margin: 0 auto; line-height: 1.65; }
.bkf .bkf-hint          { margin: 6px 0 0; }
.bkf .bkf-field-err     { margin: 6px 0 0; }
.bkf .bkf-slots-status  { margin: 0 0 10px; line-height: 1.5; }
.bkf .bkf-error         { margin: 12px 0 0; }
.bkf .bkf-error--submit { margin: 0 0 8px; }