/* Neovision booking form — palette pulled from v7 layout */
:root {
  --bk-bg:        #FBEEE2;
  --bk-card:      #FBEEE2;
  --bk-ink:       #1F2D5C;
  --bk-orange:    #E89764;
  --bk-orange-2:  #D9824B;
  --bk-teal:      #3FA09C;
  --bk-teal-2:    #00AFB7;
  --bk-line:      #1F2D5C;
  --bk-mute:      #6E7689;
  --bk-white:     #FFFFFF;
  --bk-radius:    2px;
  --bk-gap:       16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bk-ink); }

/* ---------- Layout ---------- */
.bk { max-width: 880px; margin: 0 auto; padding: 32px 20px; }
.bk-step + .bk-step { margin-top: 24px; }

.bk-card {
  background: var(--bk-card);
  padding: 28px 32px 32px;
  border-radius: var(--bk-radius);
}
.bk-card + .bk-card { margin-top: 28px; }
/* MA panel sits visually adjacent to the patient details card WITHOUT
   shrinking the parent card. We use a negative margin to overlap into the
   parent's bottom padding instead — this way the parent card stays the
   exact same height whether MA is open or closed, so the "I will be
   claiming from medical aid" checkbox doesn't jump up when ticked. */
.bk-card + .bk-card--ma {
  margin-top: -32px;  /* pull further up into the parent card's 32px bottom padding */
  padding-top: 6px;   /* and keep the panel's own top breathing room minimal */
}
/* Kill the row's own bottom margin so nothing else adds to the gap */
.bk-row--ma-claim { margin-bottom: 0; padding-bottom: 0; }

.bk-card__head { margin-bottom: 18px; }
/* Subtitle under the step eyebrow — used for "Booking at <store>" so the
   customer always sees which store this booking belongs to without it
   eating a whole input row. */
.bk-card__subtitle {
  margin: 6px 0 12px;
  font-size: 14px;
  color: var(--bk-mute);
  line-height: 1.4;
}
.bk-card__subtitle strong { color: var(--bk-ink); font-weight: 700; }

/* ---------- Type ---------- */
.bk-eyebrow {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bk-orange);
  margin: 0 0 14px;
}
.bk-section {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-teal-2);
  margin: 22px 0 12px;
}
.bk-section--small {
  font-size: 12px;
  margin-top: 26px;
  color: var(--bk-orange);
}
.bk-fineprint {
  margin: 0;
  font-size: 13px;
  color: var(--bk-ink);
  line-height: 1.4;
  max-width: 420px;
}
.bk-fineprint a { text-decoration: none; }
.bk-fineprint a:hover { text-decoration: underline; }

/* ---------- Progress ---------- */
/* Visual-only bar — no text inside. The bar fill colour is the dark ink,
   the unfilled portion is the white card background. A tiny step label
   sits above via the data-step-label attribute on the parent if needed. */
.bk-progress {
  height: 14px;
  width: 320px;
  max-width: 100%;
  background: #E8E5DC;          /* faint band so the unfilled portion is visible against the cream card */
  border-radius: 8px;
  overflow: hidden;
}
.bk-progress span {
  display: block;
  height: 100%;
  background: var(--bk-ink);
  border-radius: 8px;
  transition: width .25s ease;
}
.bk-progress span::before { content: ''; }

/* ---------- Grid ---------- */
.bk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px var(--bk-gap);
}
.bk-grid--ma { grid-template-columns: 1fr 1fr; }
.bk-grid--time { grid-template-columns: 1fr 1fr; align-items: start; }

@media (max-width: 600px) {
  .bk-grid, .bk-grid--ma, .bk-grid--time { grid-template-columns: 1fr; }
  /* Slimmer outer / card padding so content gets more horizontal room
     on narrow viewports — was 18px+12px+18px+22px = 70px of padding per
     side; now 8px+14px = 22px, giving back ~48px of usable width on a
     375px iPhone. */
  .bk-card { padding: 20px 14px; }
  .bk { padding: 12px 8px; }
  /* Safety net — keep any wide descendant (image, table, long URL,
     date-picker popover, etc.) from forcing the card to scroll. */
  .bk-card,
  .bk-card * { max-width: 100%; box-sizing: border-box; }
  .bk-card img { height: auto; }
}
/* Belt-and-braces: anything appended to <body> directly (e.g. flatpickr
   calendar) must never push the document wider than the viewport. */
html, body { overflow-x: hidden; }

/* Breathing room between the "I am a dependant" checkbox and the
   main-member name fields that open below it. Applies on both desktop
   and mobile — without this the field labels sit flush against the
   checkbox and read as one block. */
#bk-main-member-fields { margin-top: 28px; }

/* ---------- Fields ---------- */
.bk-field { display: flex; flex-direction: column; }
.bk-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-ink);
  margin-bottom: 6px;
}
.bk-field input,
.bk-field select,
.bk-field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--bk-ink);
  background: var(--bk-white);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: 12px 14px;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.bk-field input[readonly] {
  background: var(--bk-white);
  color: var(--bk-mute);
}
.bk-field textarea { resize: vertical; min-height: 88px; line-height: 1.4; }
.bk-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%231F2D5C' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
}
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
  border-color: var(--bk-teal);
  box-shadow: 0 0 0 3px rgba(63,160,156,.18);
}
.bk-field--invalid input,
.bk-field--invalid select { border-color: #C44; box-shadow: 0 0 0 3px rgba(196,68,68,.12); }
.bk-field__error { color: #C44; font-size: 12px; margin-top: 4px; display: none; }
.bk-field--invalid .bk-field__error { display: block; }
.bk-field__hint { font-size: 11px; color: var(--bk-mute); margin-top: 4px; line-height: 1.35; }
/* "Did you mean foo@gmail.com?" suggestion under the email field */
.bk-field__suggest { font-size: 12px; color: var(--bk-mute); margin-top: 4px; display: block; }
.bk-link {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--bk-teal);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.bk-link:hover { color: var(--bk-teal-2, var(--bk-teal)); }
.bk-field--full { grid-column: 1 / -1; }
.bk-field--full input { max-width: 360px; }
/* When the date field is alone in its row (Step 2 after the store-name
   was moved to the header), let it sit at the natural 360px without
   stretching across the full card width. */
.bk-grid--date-only { grid-template-columns: 360px; }
@media (max-width: 600px) {
  .bk-grid--date-only { grid-template-columns: 1fr; }
}

/* ---------- Rows ---------- */
.bk-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 4px;
  flex-wrap: wrap;
}
.bk-row--end {
  justify-content: space-between;
  margin-top: 22px;
  gap: 14px;
}
.bk-row--end > :first-child { flex: 1 1 240px; min-width: 0; }
/* MA-claim row: Next button stays right-aligned (space-between).
   The "gap" the customer perceives is between this checkbox and the next
   one in the MA panel below — handled by tightening the card spacing.
   Pull the row's own margin tight too so it doesn't add to the gap. */
.bk-row--ma-claim {
  margin-top: 14px;
  margin-bottom: 0;
}
.bk-row--ma-claim > :first-child { flex: 0 0 auto; }
/* First child of MA panel — the dependant checkbox — sits tight to the top */
#bk-ma-panel > .bk-check:first-child { margin-top: 0; }
/* Right-only variant: when nothing's on the left, just align the Next button right. */
.bk-row--end--right { justify-content: flex-end; }
.bk-row--end--right > :first-child { flex: 0 0 auto; }
@media (max-width: 600px) {
  .bk-row--end { flex-direction: column; align-items: stretch; gap: 16px; }
  .bk-row--end > :first-child { flex: 0 0 auto; }
  .bk-row--end .bk-btn { width: 100%; min-width: 0; }
  .bk-row--ma-claim { flex-direction: column; align-items: stretch; }
}

/* Driver-screening mode hides booking-only inputs (MA-claim + MA panel). */
body.bk-screening-mode .bk-check--ma-claim,
body.bk-screening-mode #bk-ma-panel { display: none; }

/* Auto-skip banner — shows when the wizard jumps the picker forward because
   the chosen date is fully booked. Sits above the slot grid. */
.bk-skip-banner {
  background: #FBEEE2;
  border-left: 4px solid var(--bk-orange);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 14px 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bk-ink);
}
.bk-skip-banner strong { color: var(--bk-orange-2); }
.bk-row--screening {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.bk-row--consent { margin-top: 22px; }

/* ---------- Checkbox ---------- */
.bk-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--bk-ink);
  flex: 1;
  min-width: 0;
}
.bk-check input { position: absolute; opacity: 0; pointer-events: none; }
.bk-check__box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--bk-teal);
  background: transparent;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: background .15s, border-color .15s;
}
.bk-check input:checked + .bk-check__box { background: var(--bk-teal); }
.bk-check input:checked + .bk-check__box::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 9px;
  border: solid var(--bk-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bk-check input:focus-visible + .bk-check__box {
  box-shadow: 0 0 0 3px rgba(63,160,156,.3);
}

/* ---------- Buttons ---------- */
/* Split-arrow design: solid orange "NEXT" panel + white square at the right
   with an orange arrow. Single rounded container, two segments meeting at a
   thin separator. Explicit height on the parent + flex on both children
   guarantees both segments fill the same height (was the source of the
   "floating arrow box" rendering before). */
.bk-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bk-white);
  background: var(--bk-orange);
  border: none;
  border-radius: var(--bk-radius);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: stretch;
  height: 50px;
  min-width: 220px;
  overflow: hidden;
  transition: background .15s;
}
.bk-btn__label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.bk-btn__arrow {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bk-white);
  color: var(--bk-orange);
  font-size: 22px;
  font-weight: 700;
  border-left: 1px solid rgba(31, 45, 92, 0.08);
}
.bk-btn:hover:not([disabled]) { background: var(--bk-orange-2); }
.bk-btn:hover:not([disabled]) .bk-btn__arrow { color: var(--bk-orange-2); }
.bk-btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Backwards compat for any plain "Next →" markup that hasn't been split yet */
.bk-btn span[aria-hidden] { font-size: 18px; }

/* ---------- Driver-screening info ---------- */
.bk-info {
  background: var(--bk-ink);
  color: var(--bk-white);
  padding: 14px 16px;
  border-radius: var(--bk-radius);
  font-size: 12px;
  line-height: 1.45;
}
.bk-info strong {
  display: block;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-orange);
  font-size: 11px;
  margin-bottom: 6px;
}
.bk-info p { margin: 0; }

/* ---------- Time slot grid ---------- */
/* Always 5 across — matches the 2+1+2 cap from timeslots.php so every booking
   day fits in a single row. On narrow phones we drop to 3 across so the
   buttons stay tappable; the 5-cap means at most 2 rows even then. */
.bk-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .bk-slots { grid-template-columns: repeat(3, 1fr); }
}
.bk-slot {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--bk-white);
  color: var(--bk-ink);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}
.bk-slot:hover { border-color: var(--bk-teal); }
.bk-slot[aria-pressed="true"] {
  background: var(--bk-teal);
  border-color: var(--bk-teal);
  color: var(--bk-white);
}
.bk-slots__hint {
  margin: 0;
  color: var(--bk-mute);
  font-size: 13px;
  grid-column: 1 / -1;
  padding: 12px 0 4px;
}
.bk-slots__hint--error { color: #C44; }
/* Phone fallback inside slot hints — clearly tappable on mobile, ink-coloured
   even when the parent hint is the muted/error red so the number stands out. */
.bk-slots__phone {
  color: var(--bk-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.bk-slots__phone:hover { color: var(--bk-teal); }
/* Callback-mode notice — shown in place of the slot grid when the diary
   couldn't be reached. Visually a card-within-a-card so the customer
   sees "this isn't normal, but there's still a way forward". */
.bk-callback-notice {
  background: #FFF5EC;
  border-left: 4px solid var(--bk-orange);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--bk-ink);
  line-height: 1.5;
  font-size: 14px;
}
.bk-callback-notice strong { color: var(--bk-orange-2); }

/* ---------- Confirmation ---------- */
.bk-confirm {
  font-size: 15px;
  margin: 0 0 18px;
}
.bk-confirm-body p { margin: 0 0 12px; }

/* PayJustNow hero banner — single centred image, full-width within the
   body container. Sits above the two side-by-side deal banners. */
.bk-promo-hero {
  margin: 24px auto 16px;
  text-align: center;
}
.bk-promo-hero a {
  display: inline-block;
  width: 100%;
  border-radius: var(--bk-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31, 45, 92, 0.08);
  transition: transform .15s, box-shadow .15s;
}
.bk-promo-hero a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 45, 92, 0.14);
}
.bk-promo-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Side-by-side on desktop, stacked on narrow phones. The grid stretches each
   image to fill its column (no max-width per cell), so the whole row is
   notably bigger than the original tiny CSS-card layout. */
.bk-promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
@media (max-width: 600px) {
  .bk-promos { grid-template-columns: 1fr; }
}

.bk-promo {
  display: block;
  width: 100%;
  border-radius: var(--bk-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(31, 45, 92, 0.08);
}
.bk-promo img {
  display: block;
  width: 100%;
  height: auto;
}
.bk-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 45, 92, 0.15);
}

/* ---------- Misc ---------- */
[hidden] { display: none !important; }
.bk-error-banner {
  background: #FBE3D7;
  border: 1px solid #C44;
  color: #5a1a0a;
  padding: 10px 14px;
  border-radius: var(--bk-radius);
  font-size: 13px;
  margin: 12px 0;
}
.bk-loading { opacity: .55; pointer-events: none; }

/* ============================================================
   Step 2 redesign (Pixel Option A)
   Single-column vertical flow, store name in eyebrow pill,
   collapsible notes, wide solid CTA at the bottom.
   ============================================================ */

/* Step 2 eyebrow + store-label subtitle: "You are making a booking at <store>".
   Reads as a normal sentence, the store name in ink so it stands out without
   needing a pill or badge. */
.bk-store-label {
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bk-mute);
}
.bk-store-label strong {
  color: var(--bk-ink);
  font-weight: 700;
}

/* Stacked field — label on top, input below, full-width */
.bk-field--stacked {
  display: block;
  margin: 18px 0;
}
.bk-field__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-ink);
  margin-bottom: 8px;
}
.bk-field--stacked input[type="date"] {
  width: 100%;
  max-width: 100%;
}

/* Notes — collapsible */
.bk-notes-details { margin: 22px 0 18px; }
.bk-notes-details summary {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bk-teal);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.bk-notes-details summary::-webkit-details-marker { display: none; }
.bk-notes-details summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s;
}
.bk-notes-details[open] summary::before { transform: rotate(90deg); }
.bk-notes-details textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: var(--bk-white);
  resize: vertical;
  min-height: 90px;
  box-sizing: border-box;
}

/* Turnstile wrapper */
.bk-turnstile-wrap { margin: 18px 0 6px; }

/* Consent — full-width, comfortable line height */
.bk-check--consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 18px;
  font-size: 14px;
  line-height: 1.55;
}

/* CTA hint above the button — names missing fields */
.bk-cta-hint {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #FFF5EC;
  border-left: 3px solid var(--bk-orange);
  border-radius: 4px;
  font-size: 13px;
  color: var(--bk-ink);
}

/* The big CTA — replaces the split-arrow Next */
.bk-cta {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
  padding: 18px 28px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bk-white);
  background: var(--bk-orange);
  border: none;
  border-radius: var(--bk-radius);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(216, 130, 75, 0.25);
  transition: background .15s, box-shadow .15s, transform .08s;
}
.bk-cta:hover:not([disabled]) {
  background: var(--bk-orange-2);
  box-shadow: 0 4px 14px rgba(216, 130, 75, 0.35);
}
.bk-cta:active:not([disabled]) { transform: translateY(1px); }
.bk-cta[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 600px) {
  .bk-store-label { font-size: 13px; }
  .bk-cta { padding: 16px 20px; font-size: 14px; }
}