/* Hyde Park Pharmacy — service-booking.css
 * ============================================================================
 * SERVICE-ACCESS1: the ONE stylesheet for the booking widget, extracted from
 * src/nhs/blood-pressure-check/index.html lines 75-139 (the .bk-* block), which
 * was itself duplicated in src/nhs/contraception-service/index.html. One copy
 * now; the two page-local copies converge onto this file.
 * Behaviour lives in /assets/service-booking.js — this file is looks only.
 * Colour variables (--teal, --dark-teal, --cream, --border, --text, --muted,
 * --error, --nhs-blue) come from each page's own :root, so the widget inherits
 * the page's palette instead of hard-coding one.
 * DO NOT paste these rules into a page. Link the stylesheet.
 */
#book { scroll-margin-top: 84px; }
/* The hidden attribute must ALWAYS win. Without this, display:flex/grid on .bk-field etc.
   out-specifies the browser's [hidden]{display:none} — an empty "Which condition?" box was
   visibly rendered on services with no pathways (caught on the live screenshot, 2026-07-31). */
#book [hidden] { display: none !important; }
.bk-card { background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 20px 0; box-shadow: 0 10px 30px rgba(10,46,54,0.06); }
.bk-head { background: linear-gradient(135deg, var(--nhs-blue, var(--dark-teal)) 0%, var(--dark-teal) 100%); color: var(--cream); padding: 24px 28px; }
.bk-head h2 { color: var(--cream); font-size: 22px; margin: 0 0 6px; }
.bk-head p { margin: 0; font-size: 14.5px; opacity: 0.95; }
.bk-body { padding: 24px 28px 28px; }
@media (max-width: 560px) { .bk-head, .bk-body { padding-left: 18px; padding-right: 18px; } }
.bk-walkin { display: flex; gap: 10px; align-items: flex-start; background: rgba(15,82,87,0.05); border-left: 4px solid var(--teal); border-radius: 0 8px 8px 0; padding: 13px 16px; font-size: 14px; color: var(--text); line-height: 1.55; margin-bottom: 24px; }
.bk-walkin strong { color: var(--dark-teal); }
/* VACC-BOOK1: eligibility quick-check panel — filled by /book/'s renderInfo() from the
   catalogue's `elig` fields (PGD-sourced, projected from data/vaccines.json). Same visual
   family as .bk-walkin; lime accent so it reads as "good to know", not a warning. */
.bk-elig { display: flex; flex-direction: column; gap: 5px; background: rgba(167,205,58,0.12); border-left: 4px solid var(--lime, #A7CD3A); border-radius: 0 8px 8px 0; padding: 13px 16px; margin: 14px 0 2px; font-size: 14px; color: var(--text); line-height: 1.55; }
.bk-elig strong { color: var(--dark-teal); font-size: 14.5px; }
.bk-elig-note { font-size: 12.5px; color: var(--muted); }
.bk-leg { display: flex; align-items: center; gap: 10px; font-family: 'Proxima Nova', sans-serif; font-weight: 700; font-size: 15.5px; color: var(--dark-teal); margin: 26px 0 12px; }
.bk-leg:first-of-type { margin-top: 0; }
.bk-leg .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--dark-teal), var(--teal)); color: var(--cream); font-size: 13px; font-weight: 800; flex-shrink: 0; }
/* mode picker (walk-in / video / phone) — the one NEW block: nothing owned this before */
.bk-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.bk-mode { flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px; min-height: 62px; padding: 12px 15px; border: 1.5px solid #d8dee3; background: #fff; border-radius: 12px; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .12s, background .12s, box-shadow .12s; }
.bk-mode:hover { border-color: var(--teal); }
.bk-mode.selected { background: var(--teal); border-color: var(--teal); box-shadow: 0 5px 14px rgba(15,82,87,.26); }
.bk-mode .m-name { font-size: 15px; font-weight: 800; color: var(--dark-teal); }
.bk-mode .m-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.bk-mode.selected .m-name, .bk-mode.selected .m-sub { color: var(--cream); }
.bk-mode:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* fields */
.bk-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field.full { grid-column: 1 / -1; }
.bk-field label { font-size: 13px; font-weight: 700; color: var(--dark-teal); }
.bk-field input, .bk-field select { min-height: 48px; border: 1.5px solid #d8dee3; border-radius: 10px; padding: 10px 14px; font-family: inherit; font-size: 15px; color: var(--text); background: #fff; width: 100%; max-width: 100%; }
.bk-field input:focus, .bk-field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,82,87,.14); }
.bk-err { display: none; font-size: 12.5px; color: var(--error); font-weight: 600; }
.bk-field.bad input, .bk-field.bad select { border-color: var(--error); }
.bk-field.bad .bk-err { display: block; }
.bk-dobnote { display: none; margin-top: 7px; font-size: 13px; line-height: 1.45; border-radius: 8px; padding: 8px 11px; }
.bk-dobnote a { font-weight: 700; color: inherit; }
.bk-dobnote.ok { display: block; background: #eaf5ec; color: #1e6b34; }
.bk-dobnote.warn { display: block; background: #fff5e9; color: #8a5a1c; }
.bk-dobnote.stop { display: block; background: #fdecea; color: #b3261e; }
.bk-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 560px) { .bk-fgrid { grid-template-columns: 1fr; } }
/* slot picker */
.bk-status { font-size: 14px; font-weight: 600; color: var(--teal); background: rgba(15,82,87,0.06); border: 1px solid #cfe5e2; border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; display: none; }
.bk-datestrip { display: flex; gap: 9px; overflow-x: auto; max-width: 100%; padding: 2px 2px 12px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bk-date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; min-height: 44px; padding: 9px 11px 8px; border: 1.5px solid #d8dee3; background: #fff; border-radius: 12px; font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.bk-date:hover { border-color: var(--teal); }
.bk-date.active { background: var(--teal); border-color: var(--teal); box-shadow: 0 5px 14px rgba(15,82,87,.26); }
.bk-date-wd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.bk-date-dm { font-size: 15px; font-weight: 800; color: var(--dark-teal); line-height: 1.1; }
.bk-date-n { font-size: 10px; font-weight: 600; color: #9aa0a8; margin-top: 2px; }
.bk-date.active .bk-date-wd, .bk-date.active .bk-date-dm, .bk-date.active .bk-date-n { color: var(--cream); }
.bk-times-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 6px 0 10px; }
.bk-times { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-time { min-height: 44px; min-width: 74px; padding: 10px 14px; border: 1.5px solid #d8dee3; background: #fff; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .12s, background .12s, color .12s, box-shadow .12s; }
.bk-time:hover { border-color: var(--teal); }
.bk-time.selected { background: var(--teal); border-color: var(--teal); color: var(--cream); box-shadow: 0 2px 8px rgba(15,82,87,.25); }
.bk-time:focus-visible, .bk-date:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.bk-loading, .bk-empty { font-size: 14px; color: var(--muted); font-style: italic; padding: 8px 0; }
/* submit + errors */
.bk-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 26px; padding: 13px 24px; border: none; border-radius: 10px; background: var(--nhs-blue, var(--teal)); color: #fff; font-family: 'Proxima Nova', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.bk-submit:hover { filter: brightness(.92); transform: translateY(-1px); }
.bk-submit:disabled { opacity: .65; cursor: default; transform: none; }
.bk-submit:focus-visible { outline: 3px solid var(--dark-teal); outline-offset: 3px; }
.bk-formerr { display: none; background: rgba(192,57,43,0.05); border: 1px solid rgba(192,57,43,0.25); color: var(--error); border-radius: 10px; padding: 13px 16px; font-size: 14px; font-weight: 600; margin-top: 16px; }
.bk-formerr.show { display: block; }
.bk-small { font-size: 12.5px; color: var(--muted); text-align: center; margin: 14px 0 0; line-height: 1.55; }
/* confirmation */
.bk-done { padding: 32px 28px 34px; text-align: center; }
.bk-done .tick { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(15,82,87,0.08); color: var(--teal); margin-bottom: 16px; }
.bk-done .tick svg { width: 30px; height: 30px; }
.bk-done h2 { font-size: 24px; margin-bottom: 8px; }
.bk-when { font-size: 17px; font-weight: 800; color: var(--teal); margin: 0 0 12px; }
.bk-next { text-align: left; max-width: 480px; margin: 0 auto; background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.bk-ref { font-size: 13px; color: var(--muted); margin: 18px 0 0; }
@media (prefers-reduced-motion: reduce) { .bk-time, .bk-date, .bk-mode, .bk-submit { transition: none; } .bk-submit:hover { transform: none; } }