/* ============================================================
   BOOKING PAGE
   Loaded after styles.css and reuses its tokens, .btn, .h2,
   .lede, .eyebrow, .wrap, .nav and .foot. Everything here is
   namespaced .bk* so nothing leaks back into the landing page.

   The landing page's .field styles are built for the dark CTA
   panel (white text on ink). This page sits on paper, so it
   defines its own .bk-field rather than fighting those.
   ============================================================ */

.bk-body{background:var(--paper)}

.bk{
  padding-top:calc(78px + clamp(2rem,5vw,4.5rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  min-height:100svh;
}

.bk__head{max-width:60ch;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.bk__title{margin-bottom:1rem}
.bk__lede{max-width:52ch}

.bk__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:clamp(1.75rem,4vw,4rem);
  align-items:start;
}
@media (max-width:980px){
  .bk__grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------------- steps ---------------- */

.bk__step{
  border-top:1px solid var(--line);
  padding-top:clamp(1.5rem,3vw,2.25rem);
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.bk__step:first-child{border-top:0;padding-top:0}

.bk__stepH{
  display:flex;align-items:center;gap:.85rem;
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);font-weight:900;
  letter-spacing:-.025em;line-height:1.1;color:var(--ink);
  margin:0 0 1.25rem;
}
.bk__num{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  font-size:.75rem;font-weight:800;letter-spacing:0;
}

.bk__hint{
  margin:1rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted);max-width:56ch;
}

/* ---------------- step 1 — calendar ---------------- */

.bk__cal{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(.9rem,2vw,1.4rem);max-width:460px;
}
.bk__calTop{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.9rem}
.bk__calMo{margin:0;font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bk__calNav{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);border-radius:50%;color:var(--ink);
  transition:border-color .25s,background .25s;
}
.bk__calNav:hover{border-color:var(--ink);background:var(--paper-2)}
.bk__calNav .ico{width:16px;height:16px}

.bk__dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.35rem;
}
.bk__dow span{
  text-align:center;font-size:.625rem;font-weight:700;letter-spacing:.14em;
  color:var(--muted);padding-bottom:.35rem;
}

.bk__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bk__day{
  font:inherit;font-size:.875rem;font-weight:600;
  aspect-ratio:1;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1.5px solid transparent;border-radius:10px;
  color:var(--ink);
  transition:background .2s,border-color .2s,color .2s;
}
.bk__day--pad{cursor:default}
.bk__day:hover:not(:disabled){background:var(--paper-2);border-color:var(--line)}
.bk__day.is-today{font-weight:900;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.bk__day.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bk__day.is-on:hover{background:var(--ink)}
.bk__day.is-past,.bk__day.is-off{color:rgba(18,18,16,.22);cursor:not-allowed}
.bk__day.is-off{text-decoration:line-through;text-decoration-thickness:1px}
.bk__day.is-pending{color:rgba(18,18,16,.45)}

.bk__calMsg{
  margin:.85rem 0 0;font-size:.75rem;font-weight:600;color:var(--muted);min-height:1.1em;
}
.bk__calMsg.is-err{color:var(--accent-2)}

/* ---------------- step 2 — the hour rail ----------------

   One row per hour, drawn as a continuous column so a selection
   reads as one block of time rather than a set of ticked boxes.
   touch-action:none is what makes the drag work on a phone: the
   gesture has to belong to the rail, not to the page scroll. */

.bk__railWrap{max-width:460px}

.bk__railEmpty{
  margin:0;font-size:.875rem;color:var(--muted);
  padding:1.1rem 1.25rem;background:var(--paper-2);border-radius:12px;
}

.bk__rail{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:.65rem .8rem;max-width:460px;
  touch-action:none;-webkit-user-select:none;user-select:none;
}

.bk__hr{
  font:inherit;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:58px minmax(0,1fr);align-items:stretch;gap:.7rem;
  height:38px;padding:0;background:transparent;border:0;color:var(--ink);
}
.bk__hrT{font-size:.75rem;font-weight:700;color:var(--muted);align-self:center}
.bk__hrB{
  border-top:1px solid var(--line);background:var(--paper-2);
  transition:background .15s,border-color .15s;
}
.bk__hr:first-child .bk__hrB{border-top-left-radius:8px;border-top-right-radius:8px}
.bk__hr:last-child .bk__hrB{
  border-bottom:1px solid var(--line);
  border-bottom-left-radius:8px;border-bottom-right-radius:8px;
}
.bk__hr:hover:not(:disabled) .bk__hrB{background:rgba(18,18,16,.08)}
.bk__hr:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}

/* Booked, or free but with no free neighbour to make up the
   two-hour minimum. Both are equally unbookable, so both are
   hatched rather than inviting a drag that would be rejected. */
.bk__hr.is-busy,.bk__hr.is-tight{cursor:not-allowed}
.bk__hr.is-busy .bk__hrT,.bk__hr.is-tight .bk__hrT{color:rgba(18,18,16,.28)}
.bk__hr.is-busy .bk__hrB,.bk__hr.is-tight .bk__hrB{
  background:repeating-linear-gradient(
    45deg,transparent,transparent 4px,rgba(18,18,16,.09) 4px,rgba(18,18,16,.09) 8px);
}

.bk__hr.is-sel .bk__hrT{color:var(--ink);font-weight:800}
.bk__hr.is-sel .bk__hrB{background:var(--accent);border-top-color:rgba(255,255,255,.28)}
.bk__hr.is-selTop .bk__hrB{
  border-top-color:var(--accent);
  border-top-left-radius:8px;border-top-right-radius:8px;
}
.bk__hr.is-selEnd .bk__hrB{border-bottom-left-radius:8px;border-bottom-right-radius:8px}

.bk__railBar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:.9rem 0 0;max-width:460px;
}
.bk__sel{margin:0;font-size:.875rem;font-weight:700;color:var(--muted);letter-spacing:-.01em}
.bk__sel.is-on{color:var(--ink)}
.bk__railBtns{display:flex;gap:.45rem;flex:0 0 auto}
.bk__railBtn{
  font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;
  padding:.4rem .85rem;background:transparent;
  border:1.5px solid var(--line);border-radius:999px;color:var(--ink);
  transition:border-color .2s,background .2s;
}
.bk__railBtn:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)}
.bk__railBtn:disabled{opacity:.35;cursor:not-allowed}

.bk__empty{
  grid-column:1/-1;margin:0;font-size:.875rem;color:var(--muted);
  padding:1.1rem 1.25rem;background:var(--paper-2);border-radius:12px;
}

/* ---------------- step 3 — details ---------------- */

.bk__fields{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;
}
@media (max-width:560px){.bk__fields{grid-template-columns:1fr}}

.bk-field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.bk-field--wide{grid-column:1/-1}
.bk-field label{
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.bk-field__opt{
  letter-spacing:.08em;text-transform:none;font-weight:600;
  color:rgba(119,113,102,.7);
}
.bk-field input,.bk-field textarea{
  font:inherit;font-size:.9375rem;font-weight:500;color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;width:100%;min-width:0;
  transition:border-color .25s,background .25s;
}
.bk-field textarea{border-radius:12px;resize:vertical;line-height:1.5}
.bk-field input:hover,.bk-field textarea:hover{border-color:rgba(18,18,16,.3)}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--accent)}
.bk-field input::placeholder,.bk-field textarea::placeholder{color:rgba(119,113,102,.55)}

/* ---------------- summary rail ---------------- */

.bk__side{position:sticky;top:calc(78px + 1.25rem)}
@media (max-width:980px){.bk__side{position:static}}

.bk__sum{
  background:var(--ink);color:var(--paper);
  border-radius:18px;padding:clamp(1.35rem,2.5vw,1.85rem);
}
.bk__sumH{
  margin:0 0 1.15rem;font-size:.6875rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}

.bk__lines{margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.7rem}
.bk__line{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.bk__line dt{
  font-size:.75rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.5);flex:0 0 auto;
}
.bk__line dd{
  margin:0;font-size:.875rem;font-weight:700;color:var(--paper);text-align:right;
  letter-spacing:-.01em;
}

.bk__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid rgba(255,255,255,.18);padding-top:1.1rem;
}
.bk__totalL{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.bk__totalV{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:900;letter-spacing:-.04em;color:var(--paper);line-height:1}
.bk__totalNote{margin:.5rem 0 1.25rem;font-size:.6875rem;color:rgba(255,255,255,.45)}

.bk__pay{width:100%;justify-content:center}
.bk__pay:disabled{opacity:.4;cursor:not-allowed}
.bk__pay:disabled:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

.bk__msg{
  margin:.75rem 0 0;min-height:1.2em;font-size:.8125rem;font-weight:600;
  letter-spacing:.01em;color:rgba(255,255,255,.72);
}
.bk__msg:empty{min-height:0;margin-top:0}
.bk__msg.is-err{color:#FF8B6B}

.bk__fine{
  margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.6875rem;line-height:1.5;color:rgba(255,255,255,.45);
}

.bk__alt{
  margin:1.25rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted);
}
.bk__alt a{
  color:var(--ink);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid var(--accent);padding-bottom:1px;
}
.bk__alt a:hover{color:var(--accent)}

/* ---------------- confirmation page ---------------- */

.bk__done{max-width:60ch;padding-top:clamp(1rem,3vw,2rem)}
.bk__doneMark{
  width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;margin-bottom:1.5rem;
}
.bk__doneMark .ico{width:26px;height:26px;stroke-width:2.5}
.bk__doneList{
  margin:2rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.9rem;
}
.bk__doneList li{display:flex;gap:.85rem;align-items:flex-start;font-size:.9375rem;color:var(--ink-soft)}
.bk__doneList .ico{color:var(--accent);margin-top:.2em}

@media (prefers-reduced-motion:reduce){
  .bk__hrB,.bk__railBtn{transition:none}
}

/* The five-minute hold countdown. It sits under the selection line because
   that is where the visitor is already reading what they picked, and it has to
   be legible enough that the deadline is not a surprise -- the selection is
   dropped when it runs out. */
.bk__hold {
  margin: .35rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted);
  font-variant-numeric: tabular-nums; /* the seconds must not jitter the line */
}

.bk__hold.is-soon {
  color: var(--ink);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .bk__hold.is-soon { animation: bkHoldPulse 1.6s ease-in-out infinite; }
}

@keyframes bkHoldPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}