/* Booking form — shared by book.html.
   Everything is namespaced .bkg- so it can never collide with a page's inline <style>.
   Colours/typography come from the :root tokens every page already defines; this file
   adds no tokens of its own, so the form inherits any future palette change for free.
   Conventions are lifted from the landing page's "Your stay" card: dark surface, faint
   cream borders, rgba(255,255,255,.08) inputs, amber for the selected/primary state.

   ── colour system (2026-07-28) ─────────────────────────────────────────────
   This card stays dark — it sits on book.html's own explicitly-dark section
   (background:var(--charcoal) now, was --teal), independent of landing.html's
   own booking widget, which went light in an earlier PR in this series. The
   provenance note above is now slightly stale (that widget is white today) but
   left as historical context; this form's own dark aesthetic is a deliberate,
   separate choice, not a stale copy. cream borders/text become neutral white/
   paper throughout, matching the same de-tealing every dark surface in this
   series has gotten. */

.bkg-card {
  background: #2A2A2A;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bkg-step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  padding-bottom: 12px;
}
.bkg-step-head .bkg-n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--mist);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bkg-step-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--paper);
}

.bkg-field-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mist);
}

.bkg-field { display: flex; flex-direction: column; gap: 6px; }
.bkg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .bkg-grid2 { grid-template-columns: 1fr; } }

.bkg-card input[type="text"],
.bkg-card input[type="tel"],
.bkg-card input[type="email"],
.bkg-card input[type="date"],
.bkg-card textarea {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 14px;
  width: 100%;
  min-height: 44px;
}
.bkg-card textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.bkg-card input::placeholder,
.bkg-card textarea::placeholder { color: rgba(168, 189, 195, .6); }
.bkg-card input:focus-visible,
.bkg-card textarea:focus-visible,
.bkg-card button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
/* A field the server rejected. aria-invalid is the source of truth, so the ring can
   never disagree with what a screen reader announces. */
.bkg-card [aria-invalid="true"] { border-color: rgba(245, 166, 35, .7); }

/* Room chooser — the landing widget's roombtn, plus a sold-out state. */
.bkg-rooms { display: flex; flex-direction: column; gap: 8px; }
.bkg-roombtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  font-family: var(--body);
  text-align: left;
  transition: border-color .2s, background .2s;
}
.bkg-roombtn:hover:not([disabled]) { border-color: rgba(255, 255, 255, .5); }
.bkg-roombtn[aria-pressed="true"] { border-color: var(--amber); background: rgba(245, 166, 35, .12); }
.bkg-roombtn .bkg-rn { color: var(--paper); font-size: 14px; font-weight: 600; }
.bkg-roombtn .bkg-rr { color: var(--mist); font-size: 13px; font-weight: 600; white-space: nowrap; }
.bkg-roombtn[aria-pressed="true"] .bkg-rr { color: var(--amber); }
.bkg-roombtn[disabled] { cursor: not-allowed; opacity: .45; }
.bkg-roombtn[disabled] .bkg-rr { color: var(--mist); }
.bkg-soldout {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}

.bkg-guests {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  padding: 8px 12px;
}
.bkg-step { display: flex; align-items: center; gap: 14px; }
.bkg-step button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: transparent;
  color: var(--paper);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bkg-step button:hover:not([disabled]) { background: rgba(255, 255, 255, .12); }
.bkg-step button[disabled] { opacity: .35; cursor: not-allowed; }
.bkg-step b { color: var(--paper); font-weight: 600; font-size: 15px; min-width: 16px; text-align: center; }

/* Quote — same rows/total treatment as the landing widget, so a guest who saw the
   estimate there recognises it here. */
.bkg-quote {
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 16px;
}
.bkg-quote .bkg-qr { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--mist); }
.bkg-quote .bkg-qr span:last-child { color: var(--paper); white-space: nowrap; }
.bkg-quote .bkg-qtot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 12px;
}
.bkg-quote .bkg-qtot span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mist);
}
.bkg-quote .bkg-qtot b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--amber);
}

.bkg-hint { font-size: 14px; color: var(--mist); line-height: 1.6; }
.bkg-hint.bkg-quiet { opacity: .65; }
.bkg-err {
  background: rgba(245, 166, 35, .12);
  border: 1px solid rgba(245, 166, 35, .45);
  color: var(--amber);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 11px 14px;
}
/* Per-field message under an input. */
.bkg-fielderr { font-size: 13px; font-weight: 600; color: var(--amber); }

.bkg-submit {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--amber);
  color: var(--charcoal);
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 15px;
  border: 0;
  border-radius: 12px;
  min-height: 48px;
  cursor: pointer;
  transition: background .25s;
}
.bkg-submit:hover:not([disabled]) { background: var(--paper); }
.bkg-submit[disabled] { opacity: .6; cursor: progress; }

.bkg-legal { font-size: 12.5px; line-height: 1.7; color: var(--mist); opacity: .8; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden fields but
   fill everything else, and a displayless input is the easiest tell. Kept out of the tab
   order and hidden from the accessibility tree so no real guest can reach it. */
.bkg-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result panels — success / sold out / error. */
.bkg-panel { display: flex; flex-direction: column; gap: 16px; }
.bkg-panel .bkg-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
}
.bkg-panel h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
  color: var(--paper);
}
.bkg-panel p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--mist); max-width: 52ch; }
.bkg-ref {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(245, 166, 35, .45);
  background: rgba(245, 166, 35, .1);
  border-radius: 12px;
  padding: 16px 18px;
}
.bkg-ref span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mist);
}
.bkg-ref b {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1;
  color: var(--amber);
  letter-spacing: 1px;
}
.bkg-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bkg-actions a {
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--paper);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.bkg-actions a:hover { border-color: var(--paper); background: rgba(255, 255, 255, .08); }

/* Availability is fetched as the guest types; keep the layout from jumping. */
.bkg-busy { opacity: .5; transition: opacity .15s; }

@media (prefers-reduced-motion: reduce) {
  .bkg-roombtn, .bkg-submit, .bkg-busy { transition: none; }
}

/* Way back out of the picker to each room's own page. */
.bkg-roomlinks{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--mist)}
.bkg-roomlinks a{color:var(--amber);font-weight:600}
.bkg-roomlinks a:hover{color:var(--paper)}