/* ============================================================================
   book.css — Public demo-booking page (/book)
   ----------------------------------------------------------------------------
   Dark, poster-branded (GrapplingU × Greg Souders). Uses the global design
   tokens from styles/base/variables.css — no hardcoded colors. BEM-ish naming
   (block__element--modifier). Desktop-first per project convention, but must
   not break at 320px. :focus-visible rings, >=44px targets, reduced-motion
   respected. No Firebase, no SPA chrome — this is a standalone static page.
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

.book-page {
    min-height: 100vh;
    background: var(--bg-base);
    /* Subtle radial accents lifted from the printed poster */
    background-image:
        radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), 0.16) 0%, transparent 48%),
        radial-gradient(circle at 84% 92%, rgba(var(--accent-rgb), 0.10) 0%, transparent 48%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    line-height: var(--line-height-normal);
}

/* Top accent stripe — matches the poster's signature bar */
.book-stripe {
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        var(--accent-hover) 50%,
        var(--accent) 100%);
}

/* ── Skip link (a11y) ───────────────────────────────────────────────── */
.book-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-skip-nav);
    background: var(--accent);
    color: var(--text-on-accent);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}
.book-skip-link:focus {
    left: var(--space-md);
    top: var(--space-md);
}

/* Screen-reader-only utility */
.book-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.book-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.book-hero {
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.book-brand {
    font-size: var(--font-size-xs);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-md);
}
.book-brand__x {
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    margin: 0 6px;
}
.book-hero__title {
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.05;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md);
}
.book-hero__sub {
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 38ch;
    margin: 0 auto;
}

.book-hero__points {
    list-style: none;
    margin: var(--space-md) auto 0;
    padding: 0;
    max-width: 40ch;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: left;
}
.book-hero__points li {
    position: relative;
    padding-left: 1.5rem;
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: var(--text-secondary);
    line-height: 1.4;
}
.book-hero__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}
.book-hero__points strong { color: var(--text-primary); }

/* ── Offer card ─────────────────────────────────────────────────────── */
.book-offer {
    border: 1px solid var(--border-medium);
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.10) 0%,
        rgba(var(--accent-rgb), 0.03) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-2xl);
}
.book-offer__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-sm);
}
.book-offer__star {
    color: var(--accent-warning);
    font-size: 1.1em;
}
.book-offer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
}
.book-offer__list li {
    position: relative;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}
.book-offer__list li::before {
    content: '★';
    position: absolute;
    left: 0;
    color: var(--accent-warning);
    font-size: 0.8em;
    top: 0.15em;
}

/* ── Widget ─────────────────────────────────────────────────────────── */
.book-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: var(--space-xl);
}
.book-widget__heading,
.book-form-section__heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-lg);
}

.book-widget__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

/* Week navigation */
.book-week-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.book-week-nav__btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition-colors);
}
@media (hover: hover) and (pointer: fine) {
    .book-week-nav__btn:hover:not(:disabled) {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
}
.book-week-nav__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.book-week-nav__label {
    font-size: var(--font-size-sm-mid);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    min-width: 11ch;
    text-align: center;
}

/* Timezone selector */
.book-tz {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}
.book-tz__select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.book-tz__select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 10px 2rem 10px 0.75rem;
    min-height: 44px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    max-width: 60vw;
}
.book-tz__caret {
    position: absolute;
    right: 0.7rem;
    pointer-events: none;
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

/* Two-pane picker */
.book-picker {
    display: grid;
    grid-template-columns: minmax(150px, 240px) 1fr;
    gap: var(--space-lg);
    align-items: start;
}

/* LEFT: day list */
.book-days {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.book-day {
    text-align: left;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    min-height: 44px;
    /* Never shrink: .book-days is a height-capped flex column, and the default
       flex-shrink:1 squeezed seven three-line pills to ~53px so the date and
       count text overflowed the bottom edge. Keep natural height and scroll. */
    flex: 0 0 auto;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-colors);
}
@media (hover: hover) and (pointer: fine) {
    .book-day:hover {
        background: var(--bg-hover);
        border-color: var(--border-medium);
    }
}
.book-day--selected {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: var(--accent);
}
.book-day__weekday {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-weight: var(--font-weight-semibold);
}
.book-day--selected .book-day__weekday {
    color: var(--accent-text);
}
.book-day__date {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-top: 2px;
}
.book-day__count {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* RIGHT: times pane */
.book-times-pane {
    min-height: 220px;
}
.book-times-pane__heading {
    font-size: var(--font-size-sm-mid);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
}
.book-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--space-sm);
}
.book-slot {
    min-height: 44px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.5rem;
    font-family: inherit;
    font-size: var(--font-size-sm-mid);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-colors);
}
@media (hover: hover) and (pointer: fine) {
    .book-slot:hover {
        background: var(--bg-hover);
        border-color: var(--accent);
    }
}
.book-slot--selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

/* Empty / error states */
.book-empty,
.book-error {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
}
.book-empty__title,
.book-error__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-sm);
}
.book-error__detail {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-lg);
}
.book-link-btn {
    background: none;
    border: none;
    color: var(--accent-text);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: var(--space-sm);
    min-height: 44px;
    text-decoration: underline;
}

/* Skeleton shimmer */
.book-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.book-skeleton__bar {
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg,
        var(--bg-elevated) 0%,
        var(--bg-hover) 50%,
        var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: book-shimmer 1.4s ease-in-out infinite;
}
.book-skeleton__bar:nth-child(2) { width: 88%; }
.book-skeleton__bar:nth-child(3) { width: 94%; }
.book-skeleton__bar:nth-child(4) { width: 80%; }
.book-skeleton__bar:nth-child(5) { width: 90%; }

@keyframes book-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Form ───────────────────────────────────────────────────────────── */
.book-form-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: var(--space-xl);
}
.book-form-section__summary {
    color: var(--accent-text);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-lg);
}
.book-field {
    margin-bottom: var(--space-lg);
}
.book-field__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}
.book-field__opt {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-normal);
}
.book-field__input {
    width: 100%;
    min-height: 44px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    transition: var(--transition-colors);
}
.book-field__input::placeholder {
    color: var(--text-quaternary);
}
@media (hover: hover) and (pointer: fine) {
    .book-field__input:hover {
        border-color: var(--border-strong);
    }
}
.book-field__input--area {
    resize: vertical;
    min-height: 84px;
}
.book-field__input[aria-invalid="true"] {
    border-color: var(--accent-danger);
}

/* Honeypot — visually hidden but still in the DOM for bots. Kept off-screen
   rather than display:none (some bots skip display:none fields). */
.book-honeypot {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.book-form__status {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
}
.book-form__status--error {
    background: var(--accent-danger-light);
    color: var(--accent-danger);
}
.book-form__status--info {
    background: var(--accent-light);
    color: var(--accent-text);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: var(--transition-colors);
}
.book-btn--primary {
    background: var(--accent);
    color: var(--text-on-accent);
}
@media (hover: hover) and (pointer: fine) {
    .book-btn--primary:hover {
        background: var(--accent-hover);
    }
}
.book-btn--ghost {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-medium);
}
@media (hover: hover) and (pointer: fine) {
    .book-btn--ghost:hover {
        background: var(--bg-hover);
    }
}
.book-btn--block {
    width: 100%;
}
.book-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Confirmation ───────────────────────────────────────────────────── */
.book-confirm {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: var(--space-xl);
    box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.18);
}
.book-confirm__check {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--accent-success);
    color: #fff;
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
}
.book-confirm__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-sm);
}
.book-confirm__time {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--accent-text);
    margin: 0 0 var(--space-sm);
}
.book-confirm__invite {
    color: var(--text-secondary);
    margin: 0 0 var(--space-xl);
}
/* Contact echo. Deliberately plain and high-contrast rather than decorative:
   its whole job is to be READ, because the only cheap moment to catch a
   mistyped address is while the booker is still looking at this screen. A
   bounced invite means no calendar entry, no reminder, and a no-show. */
.book-confirm__contact {
    margin: 0 0 var(--space-xl);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 8px);
    text-align: left;
}
.book-confirm__contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    align-items: baseline;
    margin: 0 0 var(--space-xs);
}
.book-confirm__contact-row:last-of-type { margin-bottom: 0; }
/* `display: flex` above outranks the UA's `[hidden] { display: none }`, so
   without this the phone row renders as a dangling label with no value on the
   hosts that omit the phone field (/free-weeks does). */
.book-confirm__contact-row[hidden] { display: none; }
/* Same trap, and it PRE-DATES the contact echo: `.book-btn` sets
   `display: inline-flex`, which outranks the UA's `[hidden] { display: none }`.
   So `renderConfirmActions()`'s `btn.hidden = true` for an unknown email
   provider (a coach on their own gym domain) never actually hid the "open your
   email" button — it stayed on screen with no href. */
.book-btn[hidden] { display: none; }
.book-confirm__contact-label {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}
.book-confirm__contact-row strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    /* Long addresses must wrap rather than overflow a 320px screen. */
    overflow-wrap: anywhere;
}
/* A real <button>, not a styled link: it toggles content on this page and
   keyboard users need the button semantics (Enter AND Space). */
.book-confirm__fix {
    margin-top: var(--space-sm);
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-text);
    font-size: var(--font-size-sm);
    text-decoration: underline;
    cursor: pointer;
}
.book-confirm__fix:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 2px;
}
.book-confirm__fix-form { margin-top: var(--space-sm); }
.book-confirm__fix-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.book-confirm__fix-status {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
/* --accent-danger, not a raw red: the raw token is not theme-flipped and
   fails contrast on the light surface. */
.book-confirm__fix-status.is-error { color: var(--accent-danger, #f87171); }
/* Bounced state. The border carries the signal as well as the text, because
   the panel is otherwise indistinguishable from the happy path and this is the
   one case where the booking has silently failed. --accent-danger is the
   theme-aware token; the raw red is not theme-flipped and fails contrast on
   the light surface. */
.book-confirm__contact.is-bounced {
    border-color: var(--accent-danger, #f87171);
}
.book-confirm__hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    margin: var(--space-lg) 0 0;
}
/* The Meet link, demoted from primary button to a quiet secondary link.
   It is genuinely useful on the DAY of the call, but it is inert until then —
   so the loud button belongs to "go accept the invite", which is what actually
   turns a booking into a show. Rendered by book.js renderConfirmActions(). */
.book-confirm__meetlink {
    display: inline-block;
    margin-top: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .book-confirm__meetlink:hover { color: var(--text-primary); }
}
.book-confirm__meetlink:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Attendance-gated reward line, repeated in the post-booking confirmation
   (greg-instructionals-preview.html) — possession framing, no conditional
   "if". */
.book-confirm__reward {
    color: var(--accent-text);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-lg);
}
/* "Continue to your dashboard" link shown after a successful booking
   (greg-instructionals-preview.html) — sits below the Meet-link CTA. */
#giContinueConfirm {
    margin-top: var(--space-lg);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.book-footer {
    text-align: center;
    color: var(--text-quaternary);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    margin-top: var(--space-2xl);
}

/* ── Toast ──────────────────────────────────────────────────────────── */
.book-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    max-width: calc(100vw - 32px);
    text-align: center;
}
.book-toast--error {
    border-color: var(--accent-danger);
}

/* ── Focus visibility (WCAG 2.4.7 / 2.4.11) ─────────────────────────── */
.book-page a:focus-visible,
.book-page button:focus-visible,
.book-page input:focus-visible,
.book-page textarea:focus-visible,
.book-page select:focus-visible,
.book-day:focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: 2px;
}
/* Keep keyboard focus obvious even on the selected (accent-bg) slot/day */
.book-slot--selected:focus-visible,
.book-day--selected:focus-visible {
    outline-color: var(--text-primary);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .book-picker {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    /* Day strip → a smooth, snappy horizontal carousel. The faded right
       edge signals "scroll for more days" so a clipped card reads as
       intentional, not broken. */
    .book-days {
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        gap: var(--space-sm);
        padding-bottom: var(--space-sm);
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--space-xs);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
        mask-image: linear-gradient(to right, #000 88%, transparent);
    }
    .book-days::-webkit-scrollbar { display: none; }
    .book-day {
        flex: 0 0 auto;
        min-width: 124px;
        scroll-snap-align: start;
    }
    /* Roomier thumb targets + a touch more separation on phones. */
    .book-slot {
        min-height: 48px;
    }
    .book-times {
        gap: var(--space-sm);
    }
    .book-widget__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    .book-week-nav {
        justify-content: space-between;
    }
}

/* 320px hardening — no horizontal scroll on the oldest iPhone SE */
@media (max-width: 360px) {
    .book-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .book-offer {
        padding: var(--space-md);
    }
    .book-times {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .book-skeleton__bar {
        animation: none;
    }
    .book-page * {
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------------------
   SMS consent (Twilio A2P 10DLC / CTIA / TCR)
   Optional, unchecked by default, and deliberately NOT gating the submit.
   `--text-secondary` (not `--text-tertiary`) because this is legal disclosure
   text a user must actually be able to read — tertiary fails WCAG AA on this
   surface. The 44px min touch target on the row keeps the tap area honest on
   mobile, where the checkbox glyph itself is far smaller than a fingertip.
--------------------------------------------------------------------------- */
.book-consent {
    margin-bottom: var(--space-md);
}
.book-consent__row {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    min-height: 44px;
    cursor: pointer;
}
.book-consent__row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.book-consent__row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.book-consent__text {
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--text-secondary);
}
.book-consent__text strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}
.book-consent__text a {
    color: var(--accent);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Always-visible legal footer.
   Required by A2P 10DLC vetting (error 30896): the page collecting the phone
   number must carry a VISIBLE, CLICKABLE link to the Terms. The links inside
   the consent checkbox do not satisfy this — #bookFormSection is `hidden`
   until a slot is picked, so on load a reviewer sees no legal links at all.
   This sits outside the form and therefore always renders.
--------------------------------------------------------------------------- */
.legal-footer {
    max-width: 640px;
    margin: var(--space-xl) auto var(--space-lg);
    padding: var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--text-secondary);
}
.legal-footer a {
    color: var(--text-secondary);
    text-decoration: underline;
}
.legal-footer a:focus-visible {
    color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
    .legal-footer a:hover {
        color: var(--accent);
    }
}
.legal-footer__note {
    margin-top: var(--space-xs);
    color: var(--text-tertiary);
}