/* ==========================================================================
   INOSSI — Request an Appointment (book.html)
   Editorial redesign: numbered steps (01–04) using the same gold-kicker /
   serif-question language as Services/service-detail.css, a searchable
   treatment list, selectable location cards and time pills. Checkbox/radio
   primitives (44px targets, soft border, gold focus ring) are unchanged from
   the original form-primitives pass — only their visual shell changed.
   Loaded after tokens.css / navigation.css / main.css.
   ========================================================================== */

.book-page .book-intro,
.book-page .book-form,
.book-page .book-done {
    width: var(--width-container, min(100% - 40px, 1400px));
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* ===== INTRO ===== */
.book-intro {
    margin-top: clamp(20px, 4vw, 40px);
    text-align: center;
}

.book-intro__heading {
    margin: 0 0 0.75rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: var(--line-height-heading, 1.2);
    color: var(--color-ink, #000);
}

.book-intro__text {
    margin: 0 auto;
    color: var(--color-text-muted, #6b6b6b);
}

/* Paired with the "with laptop" figure as a 2-column feature (mobile:
   picture stacked above the text -- see the 768px query for side-by-side).
   Replaces the old standalone hairline-note treatment now that this reads
   as its own small section rather than an appended note. */
.book-notice-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1.5rem;
    margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
    max-width: 30rem;
    text-align: left;
}

.book-notice-row__media img {
    display: block;
    width: 100%;
    /* ~1/3 of the original render (was width:100% of the column -- 304-330px
       depending on breakpoint) -- a small supporting image now, not a full
       column-width figure. */
    max-width: 100px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-sm, 5px);
}

.book-notice {
    margin: 0;
    font-weight: 400;
    color: var(--color-text-muted, #6b6b6b);
    text-align: center;
}

@media (min-width: 768px) {
    .book-notice-row {
        /* auto, not 1fr, for the media column: at 100px the image no longer
           fills a 1fr half, which left an oversized empty gap next to it. */
        grid-template-columns: auto 1fr;
        max-width: 40rem;
        gap: 2rem;
    }
}

/* ===== FORM SHELL ===== */
.book-form {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}

.book-form__alert {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-error, #b3261e);
    border-radius: var(--radius-sm, 5px);
    color: var(--color-error-text, #8c1d18);
    font-weight: 600;
}

.book-form__alert-action {
    margin: -0.75rem 0 0;
}

/* Quiet outline button: the escape hatch under a failed send, the WhatsApp
   continuation on the thank-you panel, and the copy action beside it.
   Deliberately not .btn-book — it must not compete with the black primary. */
.book-outline-btn,
.book-done__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1.35rem;
    border: 1px solid var(--color-ink, #000);
    background-color: transparent;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-ink, #000);
    cursor: pointer;
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.book-outline-btn:hover,
.book-done__copy:hover {
    background-color: var(--color-ink, #000);
    color: var(--color-bg, #fff);
}

.book-outline-btn:focus-visible,
.book-done__copy:focus-visible {
    outline: 2px solid var(--color-focus, #d2ab66);
    outline-offset: 2px;
}

.book-form__honey {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.book-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ===== STEPS ===== */
.book-step {
    margin: 0;
    padding: 0;
    border: 0;
}

.book-step + .book-step {
    margin-top: clamp(0.5rem, 2vw, 1rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--color-accent-soft, #ddcdbc);
}

/* A <legend> follows a special UA layout algorithm; forcing block prevents
   width/overflow quirks so the eyebrow and question stack predictably. */
.book-step__legend {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 0.6rem;
}

.book-step__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(0.78rem, 0.9vw, 0.95rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent-text, #856828);
}

.book-step__question {
    margin: 0;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 500;
    line-height: var(--line-height-heading, 1.2);
    color: var(--color-ink, #000);
}

.book-step__hint {
    margin: 0.5rem 0 1.1rem;
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* Confirms what arrived preselected from a service page, or that a promo
   code was picked up — so no part of a client's context is ever silently
   applied without them seeing it. */
.book-preselect,
.book-promo {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--color-accent, #d2ab66);
    background-color: var(--color-band, #f8f4ee);
    font-size: 0.95rem;
    color: var(--color-text, #111);
}

/* ===== TREATMENT SEARCH ===== */
.book-search {
    margin: 0 0 1rem;
}

.book-search__input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
    background-color: var(--color-bg, #fff);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    color: var(--color-text, #111);
}

.book-search__input:focus-visible {
    outline: 2px solid var(--color-accent, #d2ab66);
    outline-offset: 1px;
}

.book-search__status {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b6b6b);
}

.book-search__status:empty {
    display: none;
}

.book-search__empty {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.95rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* ===== CHECKBOX / RADIO OPTIONS (shared primitive) ===== */
/* The whole row is the target: 44px tall including padding, so a thumb can
   never miss it, and the native control keeps its own semantics. */
.book-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.55rem 0.25rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    line-height: var(--line-height-body, 1.7);
    color: var(--color-text, #111);
    cursor: pointer;
}

.book-option input[type="checkbox"],
.book-option input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0.35rem 0 0;
    accent-color: var(--color-accent, #d2ab66);
    cursor: pointer;
}

.book-option input:focus-visible {
    outline: 2px solid var(--color-accent, #d2ab66);
    outline-offset: 2px;
}

.book-option__text a {
    color: var(--color-ink, #000);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Filtering never removes a checked row from the DOM — only [hidden] — and
   .book-option's own display:flex would otherwise defeat the UA [hidden]
   rule, so it has to be restated explicitly. */
.book-option[hidden] {
    display: none;
}

/* Set apart from the treatment list: it is an alternative to that list, not
   one more item in it. */
.book-option--discuss {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
}

.book-option--consent {
    align-items: flex-start;
}

.book-consent {
    margin-top: clamp(0.5rem, 2vw, 1rem);
}

/* ===== TREATMENT ROWS ===== */
.book-treatments {
    display: flex;
    flex-direction: column;
}

.book-option--treatment {
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--color-accent-soft, #ddcdbc);
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        border-color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.book-option--treatment:last-child {
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
}

.book-option--treatment:has(input:checked) {
    background-color: var(--color-band, #f8f4ee);
    border-left: 3px solid var(--color-accent, #d2ab66);
    padding-left: calc(0.5rem - 3px);
}

.book-treatment__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.book-step__hint a {
    color: var(--color-ink, #000);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.book-treatment__name {
    font-weight: 400;
}

.book-treatment__meta {
    font-size: 0.85rem;
    color: var(--color-text, #111);
}

/* ===== LOCATION CARDS ===== */
.book-locations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.book-option--location {
    align-items: flex-start;
    padding: 1.1rem 1rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        border-color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.book-option--location:has(input:checked) {
    background-color: var(--color-band, #f8f4ee);
    border-color: var(--color-accent, #d2ab66);
}

.book-location__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.book-location__name {
    font-weight: 600;
    font-size: 1.1rem;
}

.book-location__address,
.book-location__hours {
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* Visible by default — without JavaScript the Sunday policy must stay
   readable on the Etobicoke card. .is-enhanced (added by book.js) narrows it
   down to only the selected card; CSS never hides it on its own. */
.book-location__note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: var(--color-text, #111);
}

.book-locations.is-enhanced .book-location__note {
    display: none;
}

.book-locations.is-enhanced input:checked ~ .book-location__body .book-location__note {
    display: block;
}

/* ===== DATE / TIME ===== */
.book-field__optional {
    font-weight: 400;
    color: var(--color-text-muted, #6b6b6b);
}

.book-field__why {
    margin: 0.2rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted, #6b6b6b);
}

.book-sundays {
    margin: 0.75rem 0 0;
}

.book-sundays__label {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #111);
}

.book-sundays__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.book-sunday {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: 999px;
    background-color: var(--color-bg, #fff);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-ink, #000);
    cursor: pointer;
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        border-color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.book-sunday:hover {
    border-color: var(--color-accent, #d2ab66);
}

.book-sunday:focus-visible {
    outline: 2px solid var(--color-accent, #d2ab66);
    outline-offset: 2px;
}

/* Guidance, never a blocker — visually distinct from .book-field__error
   (which carries the "Error: " prefix and stops submission): a soft band,
   not a red line. Losing an Etobicoke weekday request costs a real client. */
.book-field__note {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--color-accent-soft, #ddcdbc);
    background-color: var(--color-band, #f8f4ee);
    font-size: 0.9rem;
    color: var(--color-text, #111);
}

.book-times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.book-option--pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    gap: 0;
}

/* Kept in the tab order and focusable — only visually hidden, never
   display:none/visibility:hidden. */
.book-option--pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.book-option--pill .book-option__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    color: var(--color-ink, #000);
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        color var(--duration-base, 0.25s) var(--ease-standard, ease),
        border-color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

/* Checked state reads by fill + label, never colour alone. */
.book-option--pill input:checked + .book-option__text {
    background-color: var(--color-ink, #000);
    border-color: var(--color-ink, #000);
    color: var(--color-bg, #fff);
}

.book-option--pill input:focus-visible + .book-option__text {
    outline: 2px solid var(--color-accent, #d2ab66);
    outline-offset: 2px;
}

/* ===== TEXT FIELDS (same shape as contact.css) ===== */
.book-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1.1rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink, #000);
}

.book-field:first-child {
    margin-top: 0;
}

.book-field input,
.book-field textarea {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
    background-color: var(--color-bg, #fff);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text, #111);
}

.book-field textarea {
    resize: vertical;
}

.book-field input:focus-visible,
.book-field textarea:focus-visible {
    outline: 2px solid var(--color-accent, #d2ab66);
    outline-offset: 1px;
}

.book-field input[aria-invalid="true"],
.book-field textarea[aria-invalid="true"] {
    border-color: var(--color-error, #b3261e);
}

.book-field__hint {
    margin: 0.35rem 0 0;
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* Errors carry a word, never colour alone. */
.book-field__error {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-error-text, #8c1d18);
}

.book-field__error::before {
    content: "Error: ";
}

/* ===== SUBMIT ===== */
.book-submit {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.book-submit__button {
    align-self: flex-start;
    justify-content: center;
}

.book-submit__note {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
}

.book-status {
    margin: 0;
    font-weight: 600;
    color: var(--color-ink, #000);
}

.book-status:empty {
    display: none;
}

/* ===== SENT PANEL ===== */
.book-done {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
    background-color: var(--color-band, #f8f4ee);
}

.book-done__heading {
    margin: 0 0 0.6rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 400;
    color: var(--color-ink, #000);
}

.book-done__text {
    margin: 0;
    color: var(--color-text, #111);
}

.book-done__id-line {
    margin: 0.5rem 0 0;
    color: var(--color-text, #111);
}

.book-done__id {
    white-space: nowrap;
}

.book-done__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.book-done__whatsapp {
    align-self: stretch;
    width: 100%;
}

.book-done__note {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 650px) {
    .book-page .book-intro,
    .book-page .book-form,
    .book-page .book-done {
        width: var(--width-container-mobile, min(100% - 30px, 1200px));
    }

    .book-locations {
        grid-template-columns: 1fr;
    }

    .book-submit__button,
    .book-done__copy {
        align-self: stretch;
        width: 100%;
    }
}

/* ---- Wide / 4K, scoped to .book-page (same pattern as contact.css) ---- */
@media (min-width: 1600px) {
    .book-page .book-intro,
    .book-page .book-form,
    .book-page .book-done {
        max-width: 60rem;
    }

    .book-page .book-intro__heading {
        font-size: clamp(3.2rem, 2.4vw, 5rem);
    }

    .book-page .book-intro__text,
    .book-page .book-notice,
    .book-page .book-option,
    .book-page .book-field,
    .book-page .book-field input,
    .book-page .book-field textarea,
    .book-page .book-done__text {
        font-size: clamp(1rem, 0.5vw, 1.25rem);
    }

    .book-page .book-step__question {
        font-size: clamp(2rem, 1.6vw, 2.9rem);
    }
}