/* ============================================================
   Reliva Medical Institute — booking page

   Loaded only on /book, on top of tokens.css + site.css.

   The page is a two-hander: the picture, the promise and the
   running total stay put on the left while the three steps
   move on the right. The total is the point — it is the one
   thing a patient is nervous about, so it never scrolls away
   and it never changes without being asked.

   Fields are set as underlines rather than boxes. The rest of
   the site was rebuilt away from boxes; a booking form is the
   last place that should go back to them.
   ============================================================ */

/* display:grid/flex on a component beats the UA sheet's [hidden]{display:none},
   so panels marked hidden in the markup were painting anyway. One guard rather
   than a :not([hidden]) on every rule below. */
[hidden]{ display:none !important; }

/* ---------------- Header on this page ---------------- */
/* No "Book an appointment" button here — you are already doing it. */
.nav-back{ font-size:var(--step--1); color:var(--text-soft); text-decoration:none;
  white-space:nowrap; transition:color .18s ease; }
.nav-back:hover{ color:var(--ink); }
@media (max-width:520px){ .nav-back{ display:none; } }

/* ---------------- Shell ---------------- */
.bk{ padding-block:clamp(2rem,1.4rem + 2.5vw,4rem) clamp(3.5rem,2.2rem + 4.5vw,7rem); }
.bk-wrap{ max-width:1240px; margin-inline:auto; padding-inline:var(--gutter);
  display:grid; gap:clamp(2.5rem,1.6rem + 3.5vw,4.5rem); }
@media (min-width:1000px){
  .bk-wrap{ grid-template-columns:minmax(0,22rem) minmax(0,1fr); align-items:start; }
  /* 6.5rem clears the sticky header plus its own breathing room. */
  .bk-side{ position:sticky; top:6.5rem; }
}

/* ---------------- Left column ---------------- */
.bk-shot{ margin:0 0 1.75rem; overflow:hidden; border-radius:var(--r-lg); background:var(--mist); }
/* 4:3, not 3:4. As a portrait this photograph ran 437px tall and the left column
   finished 402px below the right one, which is where all that empty space on the
   right was coming from. object-position keeps the two faces in frame through
   the crop. */
.bk-shot img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 38%; }
@media (max-width:999px){ .bk-shot img{ aspect-ratio:16/9; } }

.bk-kicker{ margin:0 0 .55rem; font-size:var(--step--1); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.bk-h{ margin:0 0 1.75rem; font-size:var(--step-2); letter-spacing:-.025em; max-width:14ch; }

.bk-summary{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:clamp(1.25rem,1rem + .8vw,1.75rem); display:grid; gap:.65rem; }
/* Stacked, not a two-column row: "Neuro Mobility & Safety Assessment" pushed
   into a right-aligned column broke over three ragged lines. */
.bk-summary-row{ display:grid; gap:.3rem; }
.bk-key{ font-size:var(--step--1); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.bk-val{ font-size:var(--step-0); font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.bk-summary-line{ display:flex; justify-content:space-between; gap:1rem;
  font-size:var(--step--1); color:var(--text-soft); }
.bk-summary-line span:last-child{ text-align:right; color:var(--ink); }
.bk-summary-rule{ height:1px; background:var(--line); margin-block:.35rem; }
.bk-summary-total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.bk-total-val{ font-size:var(--step-2); font-weight:600; letter-spacing:-.035em; line-height:1; }
.bk-fine{ margin:.5rem 0 0; font-size:var(--step--1); line-height:1.5; color:var(--text-soft); }

/* Sits under the steps now. Three across once there is room, so it reads as one
   quiet line rather than a third stacked block. */
.bk-trust{ list-style:none; margin:clamp(1.75rem,1.2rem + 2vw,2.75rem) 0 0; padding:1.35rem 0 0;
  border-top:1px solid var(--line); display:grid; gap:.7rem; }
@media (min-width:720px){ .bk-trust{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; } }
.bk-trust li{ position:relative; padding-left:1.15rem;
  font-size:var(--step--1); line-height:1.5; color:var(--text-soft); }
.bk-trust li::before{ content:""; position:absolute; left:0; top:.68em;
  width:.45rem; height:1px; background:var(--border-strong); }

/* ---------------- Step indicator ---------------- */
.bk-steps{ list-style:none; margin:0 0 clamp(2rem,1.4rem + 2vw,3rem); padding:0;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.bk-step{ display:flex; align-items:center; gap:.6rem; }
/* The rule between the markers carries the sense of progress; it is drawn on the
   item rather than between them so it disappears cleanly when the row wraps. */
.bk-step + .bk-step::before{ content:""; width:clamp(1.25rem,4vw,3rem); height:1px;
  background:var(--line); margin-right:.15rem; }
.bk-step-n{ flex:none; width:1.75rem; height:1.75rem; border-radius:50%;
  display:grid; place-items:center; font-size:var(--step--1); font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease; }
.bk-step-l{ font-size:var(--step--1); font-weight:500; letter-spacing:-.005em; color:var(--muted); }
.bk-step.is-active .bk-step-n{ background:var(--garnet); border-color:var(--garnet); color:var(--surface); }
.bk-step.is-active .bk-step-l{ color:var(--ink); }
.bk-step.is-done .bk-step-n{ background:var(--surface); border-color:var(--garnet); color:var(--garnet); }
.bk-step.is-done .bk-step-l{ color:var(--text-soft); }
@media (max-width:420px){ .bk-step.is-todo .bk-step-l{ display:none; } }

/* ---------------- Panels ---------------- */
.bk-panel{ display:none; }
.bk-panel.is-on{ display:grid; gap:clamp(2rem,1.4rem + 2vw,3rem); }
.bk-set{ border:0; margin:0; padding:0; min-width:0; }
.bk-legend{ padding:0; margin:0 0 1.1rem; font-size:var(--step--1); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bk-hint{ margin:.9rem 0 0; font-size:var(--step--1); line-height:1.5; color:var(--muted); }

/* ---------------- Option cards ---------------- */
.bk-opts{ display:grid; gap:.9rem; }
@media (min-width:680px){ .bk-opts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bk-opt{ display:grid; gap:.45rem; align-content:start; text-align:left; font:inherit; cursor:pointer;
  padding:clamp(1.1rem,.9rem + .6vw,1.5rem); border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease; }
.bk-opt:hover{ border-color:var(--border-strong); }
/* Ring rather than a fill: a selected card should still read as the same card. */
.bk-opt.is-on{ border-color:var(--garnet); box-shadow:0 0 0 1px var(--garnet); }
.bk-opt-t{ font-size:var(--step-0); font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.bk-opt-d{ font-size:var(--step--1); line-height:1.5; color:var(--text-soft); }
.bk-opt-p{ margin-top:.35rem; font-size:var(--step--1); font-weight:600; color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums; }

/* ---------------- Fields ---------------- */
.bk-fields{ display:grid; gap:1.6rem 1.75rem; }
@media (min-width:680px){ .bk-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bk-field{ margin:0; display:grid; gap:.4rem; min-width:0; }
.bk-field-wide{ grid-column:1 / -1; }
.bk-field label{ font-size:var(--step--1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.bk-field input,
.bk-field textarea{
  width:100%; padding:.55em 0; font-family:var(--font-sans); font-size:var(--step-0);
  color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--border-strong); border-radius:0;
  transition:border-color .18s ease; }
.bk-field textarea{ resize:vertical; min-height:3.5rem; line-height:1.55; }
.bk-field input::placeholder,
.bk-field textarea::placeholder{ color:var(--muted); }
.bk-field input:hover,
.bk-field textarea:hover{ border-bottom-color:var(--muted); }
.bk-field input:focus,
.bk-field textarea:focus{ outline:none; border-bottom-color:var(--garnet); border-bottom-width:2px;
  /* the extra pixel is taken out of the padding so the baseline does not jump */
  padding-bottom:calc(.55em - 1px); }
.bk-field.is-bad input,
.bk-field.is-bad textarea{ border-bottom-color:var(--garnet-link); }

/* ---------------- Day and time pickers ---------------- */
/* A horizontal rail rather than a month grid: the clinic books a few weeks out,
   and a month view would ask the patient to read 30 squares to find 15 open ones. */
.bk-days{ display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.5rem;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.bk-days::-webkit-scrollbar{ height:4px; }
.bk-days::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }
.bk-day{ flex:none; scroll-snap-align:start; cursor:pointer; font:inherit;
  display:grid; gap:.15rem; justify-items:center; min-width:4.25rem;
  padding:.7rem .6rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.bk-day:hover{ border-color:var(--border-strong); }
.bk-day-w{ font-size:var(--step--1); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.bk-day-d{ font-size:var(--step-0); font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums; }
.bk-day-m{ font-size:var(--step--1); color:var(--muted); }
.bk-day.is-on{ border-color:var(--garnet); box-shadow:0 0 0 1px var(--garnet); }
.bk-day.is-on .bk-day-w,
.bk-day.is-on .bk-day-m{ color:var(--text-soft); }

.bk-times{ display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(5.25rem, 1fr)); }
.bk-time{ cursor:pointer; font:inherit; font-size:var(--step--1); font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  padding:.7em .5em; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.bk-time:hover:not(:disabled){ border-color:var(--border-strong); }
.bk-time.is-on{ border-color:var(--garnet); box-shadow:0 0 0 1px var(--garnet); color:var(--garnet); }
.bk-time:disabled{ cursor:not-allowed; color:var(--muted); background:var(--mist);
  border-color:transparent; text-decoration:line-through; }
.bk-times:empty{ display:none; }

/* ---------------- Review ---------------- */
.bk-review{ margin:0; display:grid; }
.bk-review > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding-block:1rem; border-top:1px solid var(--line); }
.bk-review > div:last-child{ border-bottom:1px solid var(--line); }
.bk-review dt{ font-size:var(--step--1); color:var(--muted); flex:none; }
.bk-review dd{ margin:0; font-size:var(--step-0); text-align:right; letter-spacing:-.01em; }
.bk-review .is-total dd{ font-weight:600; }
.bk-consent{ margin:0; font-size:var(--step--1); line-height:1.55; color:var(--muted); max-width:56ch; }

/* ---------------- Navigation and errors ---------------- */
.bk-nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
/* Step one has nothing on the left any more, and a lone button would drift there. */
.bk-nav.is-end{ justify-content:flex-end; }
/* On a phone the button that moves you forward runs the full width of the column
   — a pill floating at the right edge of a 320px screen reads as an afterthought. */
@media (max-width:559px){
  .bk-nav{ flex-direction:column; align-items:stretch; gap:.85rem; }
  .bk-nav .btn{ width:100%; }
  .bk-link{ text-align:center; }
}
.bk-link{ font:inherit; font-size:var(--step--1); color:var(--text-soft); background:none;
  border:0; padding:.5em 0; cursor:pointer; text-decoration:underline;
  text-underline-offset:.15em; transition:color .18s ease; }
.bk-link:hover{ color:var(--ink); }
.bk-error{ margin:0; font-size:var(--step--1); line-height:1.5; color:var(--garnet-link); }
.bk-error:empty{ display:none; }

/* ---------------- Done ---------------- */
.bk-done{ display:grid; gap:1.1rem; justify-items:start; }
.bk-done-h{ margin:0; font-size:var(--step-3); letter-spacing:-.03em; }
.bk-done-p{ margin:0; font-size:var(--step-1); color:var(--text-soft); max-width:44ch; letter-spacing:-.01em; }
.bk-next{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:0; width:100%; }
.bk-next li{ display:grid; gap:.3rem; padding-block:1.35rem; border-top:1px solid var(--line); }
.bk-next li:last-child{ border-bottom:1px solid var(--line); }
.bk-next span{ font-size:var(--step--1); font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.bk-next b{ font-size:var(--step-0); font-weight:600; letter-spacing:-.02em; }
.bk-next p{ margin:0; font-size:var(--step--1); line-height:1.6; color:var(--text-soft); max-width:60ch; }
.bk-done-alt{ margin:.5rem 0 0; font-size:var(--step--1); color:var(--text-soft); }