/* Booking page: three simple steps (who, day, time), then details and payment. */

.bk-head { text-align: center; margin-bottom: 1.25rem; }
.bk-head h1 { margin-bottom: 0.5rem; text-align: center; }
@media (max-width: 899px) { .bk { padding-left: 1rem; padding-right: 1rem; } }
.bk-serif { font-family: var(--font-display); font-style: normal; text-transform: uppercase; letter-spacing: 0.02em; }
.bk-script { font-family: 'Royale Couture Script', 'Brush Script MT', cursive; color: #8a6a1f; text-transform: none; font-size: 1.25em; }
.bk-head .lede { max-width: 34rem; margin: 0 auto; }
.bk-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.8rem; margin: 0.75rem 0 0; font-weight: 600; font-size: 0.95rem; }
.bk-links a { white-space: nowrap; }
.bk-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.bk-main, .bk-side { min-width: 0; }
@media (max-width: 899px) { .bk { padding-bottom: 5.5rem; } }
@media (min-width: 900px) { .bk-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .bk-side { position: sticky; top: 1rem; } }
.bk-step { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.1rem 1.25rem; margin-bottom: 1rem; }
.bk-step h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.45rem; margin: 0 0 0.9rem; }
.bk-num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--fairway); color: var(--fairway-ink); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; flex: none; }
.bk-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.bk-label { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.seg { display: flex; gap: 0.35rem; background: var(--paper); border-radius: 999px; padding: 0.25rem; }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--fairway); color: var(--fairway-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.seg-wide button { font-size: 0.92rem; }
.seg-wide small { display: block; font-weight: 500; font-size: 0.75rem; opacity: 0.8; }
.day-strip { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.4rem; scrollbar-width: thin; }
.day-pill { flex: 0 0 auto; scroll-snap-align: start; min-width: 4.6rem; padding: 0.55rem 0.5rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.day-pill .dow { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.day-pill .dnum { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.day-pill .dfree { display: block; font-size: 0.75rem; color: var(--muted); }
.day-pill .dpay { display: inline-block; margin-top: 0.2rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--flag); }
.day-pill .dpay.later { background: transparent; border: 1.5px solid var(--muted); }
.day-pill[aria-pressed='true'] { border-color: var(--fairway); background: var(--fairway); color: var(--fairway-ink); }
.day-pill[aria-pressed='true'] .dow, .day-pill[aria-pressed='true'] .dfree { color: var(--fairway-ink); opacity: 0.85; }
.day-key { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.day-key i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--flag); margin-right: 0.35rem; }
.day-key i.later { background: transparent; border: 1.5px solid var(--muted); }
#parts { margin-bottom: 0.9rem; }
.course-note { display: grid; gap: 0.15rem; margin: 0 0 0.9rem; padding: 0.7rem 0.85rem; border-radius: 8px; border-left: 4px solid; font-size: 0.95rem; }
.course-note.closed { background: #fbeae5; border-color: #a3341f; }
.course-note.frost { background: #e8f0f9; border-color: #5b8fc7; }
.course-note.temp { background: #fbf3dd; border-color: #c9a24a; }
.course-note.open { background: #e3eee6; border-color: #2e7d4f; }
.bk-rule { display: block; }
.bk-rule { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: #fbf3dd; font-size: 0.92rem; }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 0.5rem; }
.time-chip { min-height: 58px; padding: 0.4rem 0.3rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.time-chip .t { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.time-chip .p { display: block; font-size: 0.8rem; color: var(--muted); }
.time-chip:hover { border-color: var(--fairway); }
.time-chip[aria-pressed='true'] { background: var(--flag); border-color: var(--flag); color: var(--flag-ink); }
.time-chip[aria-pressed='true'] .p { color: var(--flag-ink); }
.time-chip .sh { display: block; margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #23436e; }
.time-chip.shared { border-style: dashed; }
.time-chip[aria-pressed='true'] .sh { color: var(--flag-ink); }
.time-grid.small .time-chip { min-height: 44px; background: var(--surface); border-style: dashed; }
.no-times { padding: 1rem; text-align: center; color: var(--muted); background: var(--paper); border-radius: 10px; }
.full-times { margin-top: 1rem; }
.full-times summary { cursor: pointer; font-weight: 600; color: var(--fairway); }
.bk-side .bk-summary { background: var(--band, #11231a); color: #f1ecd9; border-radius: 12px 12px 0 0; padding: 1.1rem 1.2rem; }
.bk-side .bk-summary.empty { border-radius: 12px; background: var(--surface); color: var(--muted); border: 1px dashed var(--line); text-align: center; }
.bk-summary .when { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.bk-summary .date { margin-top: 0.25rem; font-weight: 600; }
.bk-summary .meta { margin-top: 0.15rem; color: rgba(241,236,217,0.85); font-size: 0.92rem; }
.bk-summary .waitlist-note { margin: 0.6rem 0 0; font-size: 0.9rem; color: rgba(241, 236, 217, 0.92); } /* light text on the dark summary */
#booking-form { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 1.1rem 1.2rem 1.25rem; }
.extras { margin: 0.25rem 0 1rem; }
.extras summary { cursor: pointer; font-weight: 600; color: var(--fairway); padding: 0.4rem 0; }

.extras[open] summary { margin-bottom: 0.5rem; }
.bk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: #11231a; color: #f1ecd9; box-shadow: 0 -4px 16px rgba(0,0,0,0.2); }
.bk-bar .bk-bar-text { flex: 1; font-weight: 600; font-size: 0.95rem; }
.bk-bar .btn { width: auto; min-height: 46px; padding: 0 1.2rem; background: var(--flag); color: var(--flag-ink); }
.bk-bar { transition: transform 0.2s ease; }
.bk-bar.away { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .bk-bar { transition: none; } }
@media (min-width: 900px) { .bk-bar { display: none !important; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bk-head .lede { margin-top: 0.25rem; }
.bk-step .day-key { margin-top: 0.5rem; }

/* ---- Dark mode ---------------------------------------------------------------
   Phones set to dark mode get dark backgrounds and light text throughout, so the
   coloured notes and labels need their own darker versions to stay readable. */
@media (prefers-color-scheme: dark) {
  .bk-rule { background: rgba(201, 162, 74, 0.16); color: var(--ink); border-left: 3px solid #c9a24a; }
  .course-note { color: var(--ink); }
  .course-note.closed { background: rgba(240, 140, 116, 0.14); border-color: #f08c74; }
  .course-note.frost { background: rgba(122, 170, 224, 0.15); border-color: #7aaae0; }
  .course-note.temp { background: rgba(217, 180, 92, 0.15); border-color: #d9b45c; }
  .course-note.open { background: rgba(143, 195, 162, 0.14); border-color: #8fc3a2; }
  .time-chip .sh { color: #9cc4f0; }
  .time-chip.shared { border-color: #4f6a5b; }
  .time-chip .p { color: #b9c3b7; }
  .bk-script { color: #d9b45c; }
  .day-key i.later, .day-pill .dpay.later { border-color: #b9c3b7; }
  .no-times { color: #b9c3b7; }
}

.field.marketing { margin-top: 0.5rem; }
.field.marketing .hint { margin: 0.25rem 0 0 1.9rem; font-size: 0.85rem; }

/* Member call-out on the booking form: hard to miss */
.member-strip.callout { background: #fbf3dc; border: 2px solid #c9a24a; border-left-width: 6px; border-radius: 10px; padding: 0.95rem 1rem; color: #251c06; font-size: 1rem; }
.member-strip.callout p { margin: 0; }
.member-strip.callout .mc-head { font-weight: 800; font-size: 1.08rem; display: flex; align-items: center; gap: 0.45rem; }
.member-strip.callout .mc-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #c9a24a; color: #251c06; font-size: 0.9rem; }
.member-strip.callout .mc-body { margin-top: 0.35rem; }
.member-strip.callout .mc-btn { margin-top: 0.75rem; min-height: 46px; padding: 0 1.2rem; border: 0; border-radius: 6px; background: #1f4a33; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.member-strip.callout .mc-btn:focus-visible { outline: 3px solid #c9a24a; outline-offset: 2px; }
.member-strip.callout .mc-small { margin-top: 0.6rem; font-size: 0.88rem; color: #5a4a1d; }
.member-strip.callout a { color: #1f4a33; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .member-strip.callout { background: #2e2610; border-color: #c9a24a; color: #f6ecd2; }
  .member-strip.callout .mc-small { color: #e2d2a6; }
  .member-strip.callout a { color: #e2c47c; }
  .member-strip.callout .mc-btn { background: #c9a24a; color: #1d1604; }
}