/* Booking modal. Ported from redriverintegration.com's booking.css so the two stay
   diffable; the only change to the component itself is the token shim below, which
   maps RRI's names onto this site's palette, plus the field styles (RRI inherits
   those from its site.css, and we have no equivalent). */

.bk {
    --bg-raised: var(--surface);
    --bg-sunken: var(--surface-2);
    --text: var(--ink);
    --text-2: var(--ink-2);
    --text-3: var(--ink-3);
    --crimson: var(--orange);
    /* The site's own --orange-soft is an opaque wash (#3a2415 in dark) meant for small
       accents; as a full panel it reads as mud. Tint the surface instead. The plain
       value stays first as a fallback where color-mix is unsupported. */
    --crimson-soft: var(--orange-soft);
    --crimson-soft: color-mix(in srgb, var(--orange) 12%, var(--surface));
    --r-xs: 6px;
    --r-md: var(--r);
    --r-lg: 18px;
    --r-pill: 999px;
    --sans: "Figtree", system-ui, sans-serif;
    --sh-4: var(--shadow-lg);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

.bk[hidden] { display: none; }
.bk {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
body.bk-open { overflow: hidden; }

.bk__scrim {
    position: absolute; inset: 0;
    background: rgba(8, 9, 12, .68);
    backdrop-filter: blur(4px);
    animation: bk-fade .18s ease;
}

.bk__panel {
    position: relative;
    width: 100%; max-width: 620px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-4);
    animation: bk-rise .24s var(--ease);
}

@keyframes bk-fade { from { opacity: 0 } }
@keyframes bk-rise { from { opacity: 0; transform: translateY(16px) scale(.99) } }

.bk__x {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--bg-sunken); border: 1px solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--text-2);
    transition: color .16s ease, border-color .16s ease;
}
.bk__x:hover { color: var(--crimson); border-color: var(--crimson); }

.bk__head { padding: 2rem 2rem 1.3rem; }
.bk__head h2 {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 1.9rem; margin: 0 0 .5rem; color: var(--text); letter-spacing: -.02em;
}
.bk__eyebrow {
    margin: 0 0 .5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--orange);
}
.bk__sub { margin: 0; font-size: .95rem; color: var(--text-2); }
.bk__body { padding: 0 2rem 2rem; }

/* --- day strip --- */
.bk__days {
    display: flex; gap: .5rem;
    overflow-x: auto;
    /* the chips lift on hover; without headroom the scroll box shears the top edge */
    padding: 3px 3px .7rem; margin: -3px -3px 1.3rem;
    scrollbar-width: thin;
}
.bk__day {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    min-width: 78px; padding: .75rem .55rem;
    background: var(--bg); border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s var(--ease);
}
.bk__day:hover { border-color: var(--line-2); transform: translateY(-1px); }
.bk__day.is-on { background: var(--crimson); border-color: var(--crimson); }
.bk__dow {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-3);
}
.bk__date { font-size: .95rem; font-weight: 700; color: var(--text); }
.bk__count { font-size: 0.78rem; color: var(--text-3); }
.bk__day.is-on .bk__dow,
.bk__day.is-on .bk__date,
.bk__day.is-on .bk__count { color: #fff; }
.bk__day.is-on .bk__count { opacity: .85; }

/* --- time slots --- */
.bk__slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
    gap: .5rem;
    max-height: 268px; overflow-y: auto;
    padding: 3px; margin: -3px;
}
.bk__slot {
    padding: .8rem .4rem; min-height: 48px;
    background: var(--bg); border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--sans); font-size: .94rem; font-weight: 600; color: var(--text);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s var(--ease);
}
.bk__slot:hover {
    border-color: var(--crimson); color: var(--crimson);
    background: var(--crimson-soft); transform: translateY(-1px);
}

.bk__note { margin: 1rem 0 0; font-size: .92rem; color: var(--text-2); text-align: center; }
.bk__note a { color: var(--orange-bright); font-weight: 600; }

/* --- details step --- */
.bk__back {
    background: none; border: 0; padding: .3rem 0; cursor: pointer;
    font-family: var(--sans); font-size: .88rem; font-weight: 600; color: var(--text-2);
}
.bk__back:hover { color: var(--crimson); }
.bk__chosen {
    margin: .7rem 0 1.3rem; padding: .9rem 1.1rem;
    background: var(--crimson-soft);
    border-left: 3px solid var(--orange);
    border-radius: var(--r-sm);
    font-size: .96rem; color: var(--text);
}
.bk__tz { color: var(--text-3); font-size: .85rem; }
.bk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* --- fields (RRI gets these from site.css; we don't have an equivalent) --- */
.bk .field { margin-bottom: .9rem; }
.bk label {
    display: block; margin-bottom: .4rem;
    font-family: "JetBrains Mono", monospace;
    font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3);
}
.bk label .opt {
    text-transform: none; letter-spacing: .02em; opacity: .8;
}
.bk .field input, .bk .field textarea {
    width: 100%;
    font-family: var(--sans); font-size: .97rem;
    color: var(--ink); background: var(--bg);
    border: 1.5px solid var(--line); border-radius: 10px;
    padding: .8rem .9rem;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
}
.bk .field input:focus, .bk .field textarea:focus {
    outline: 0; border-color: var(--orange); box-shadow: 0 0 0 4px var(--ring);
}
.bk .field textarea { resize: vertical; min-height: 104px; }

.field__err {
    display: block; min-height: 1rem;
    font-size: .79rem; color: #d0453b; margin-top: .2rem;
}
.field--bad input, .field--bad textarea { border-color: #d0453b; }
.field--bad input:focus, .field--bad textarea:focus { box-shadow: 0 0 0 4px rgba(208, 69, 59, .16); }

.bk__error {
    margin: 0 0 1rem; padding: .85rem 1rem;
    background: rgba(208, 69, 59, .1);
    border-left: 3px solid #d0453b;
    border-radius: var(--r-xs);
    color: #d0453b; font-size: .9rem;
}
.bk__submit { width: 100%; margin-top: .4rem; }
.bk__submit:disabled { opacity: .55; cursor: default; transform: none; }
.bk__fine { margin: .9rem 0 0; text-align: center; font-size: .88rem; color: var(--text-2); }
.bk__fine a { color: var(--orange-bright); font-weight: 600; }

/* --- confirmation --- */
.bk__step--done { text-align: center; padding: 1.5rem 0 .5rem; }
.bk__tick {
    width: 64px; height: 64px; margin: 0 auto 1.2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill); background: var(--crimson); color: #fff; font-size: 1.9rem;
}
.bk__step--done h3 {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 1.6rem; margin-bottom: .6rem; color: var(--text);
}
.bk__when { font-size: 1.05rem; color: var(--text); margin-bottom: .8rem; }
.bk__links { margin-top: 1.2rem; font-size: .9rem; }
.bk__links a { color: var(--orange-bright); font-weight: 600; }

@media (max-width: 560px) {
    .bk { padding: 0; align-items: flex-end; }

    /* A bottom sheet, not a scrolling page. The panel itself no longer scrolls:
       it is a flex column with a pinned head and a scrolling body, so the close
       button cannot scroll out of reach. dvh (not vh) because Safari's URL bar
       would otherwise push the bottom of the sheet under the fold. */
    .bk__panel {
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        display: flex; flex-direction: column;
        overflow: hidden;
    }
    .bk__head {
        flex: 0 0 auto;
        padding: 1.35rem 1.2rem .8rem;
        padding-right: 3.6rem; /* clear of the close button */
    }
    .bk__head h2 { font-size: 1.4rem; }
    .bk__body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
    }
    .bk__x { top: 10px; right: 10px; width: 36px; height: 36px; }

    /* On the details step the intro has done its job, and on a phone it costs a
       whole screen of scrolling before the first field. */
    .bk__panel:has(.bk__step--who:not([hidden])) .bk__sub { display: none; }

    .bk__grid { grid-template-columns: 1fr; }
    .bk__slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: none; }
    .bk .field { margin-bottom: .6rem; }
    /* Desktop reserves a blank line under every field so an error can't shift the
       layout. On a phone that reservation costs more than the shift does. */
    .bk .field__err { min-height: 0; }
    .bk .field--bad .field__err { margin-bottom: .15rem; }
    .bk .field input, .bk .field textarea { padding: .7rem .8rem; font-size: 16px; } /* 16px: iOS zooms below it */
    .bk .field textarea { min-height: 88px; }
    .bk__chosen { margin: .6rem 0 1rem; padding: .75rem .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bk__scrim, .bk__panel { animation: none !important; }
    .bk__slot:hover, .bk__day:hover { transform: none; }
}