/*
 * The booking flow (#8): the séjour reservation form, its live price card and
 * the recap/payment screens that follow. Loaded after scrapbook.css and
 * availability.css, whose tokens and calendar base classes it builds on.
 *
 * Design: docs/design/Écrans & Backoffice.dc.html, screens 1a and 2b — a pale
 * selection fill on the nights of the stay, an ink-filled pill on the two
 * range endpoints, a cream price card with per-line prices and a total.
 */

/* ==========================================================================
   Funnel step indicator (booking/_funnel_steps.html.twig), shown under the
   compact hero on every recap/payment/confirmation page.
   ========================================================================== */

.vo-funnel-steps {
    padding: 18px var(--vo-gutter) 0;
}

.vo-funnel-steps__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    max-width: var(--vo-container);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.vo-funnel-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vo-muted);
    font-size: 13px;
    font-weight: 600;
}

.vo-funnel-steps__index {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--vo-hairline);
    font-size: 12px;
}

.vo-funnel-steps__item.is-current {
    color: var(--vo-ink);
}

.vo-funnel-steps__item.is-current .vo-funnel-steps__index {
    background: var(--vo-terracotta-deep);
    border-color: transparent;
    color: var(--vo-cream);
}

/* ==========================================================================
   Layout — calendar + form on the left, sticky price card on the right
   ========================================================================== */

.vo-book-section {
    padding-block: clamp(50px, 6vw, 90px);
}

.vo-book-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas: 'main price' 'submit price';
    align-items: start;
    gap: 28px;
}

.vo-book-layout__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vo-book-layout__price {
    grid-area: price;
    position: sticky;
    top: 24px;
}

.vo-book-layout__submit {
    grid-area: submit;
    width: 100%;
}

.vo-book-calendar .vo-avail {
    box-shadow: var(--vo-shadow-card);
}

/* ==========================================================================
   Form
   ========================================================================== */

.vo-book-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vo-book-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vo-book-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A form control in a plain flex-column child keeps its own intrinsic width
   otherwise (CLAUDE.md): the field's flex context alone does not stretch it. */
.vo-book-form__field .vo3-input {
    width: 100%;
}

.vo-book-form__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vo-ink);
}

.vo-book-form__error {
    margin: 0;
    color: var(--vo-error);
    font-size: 13px;
}

.vo-book-form__field--guests {
    max-width: 220px;
}

.vo-book-form__field--guests .vo-book__guests {
    margin-top: 0;
}

/* The hero's own dark-card counter (shell.css) styled for a light card here:
   ink text, a visible input rather than a plain display span. */
.vo-book-form__field--guests .vo-book__guest-btn {
    border-color: rgba(33, 28, 23, .25);
    color: var(--vo-ink);
}

.vo-book-form__field--guests .vo-book__guest-btn:hover {
    background: var(--vo3-accent, var(--vo-terracotta));
    border-color: transparent;
    color: var(--vo-cream);
}

.vo-book-form__section-title {
    margin: 4px 0 0;
    font-family: var(--vo-font-serif);
    font-size: 17px;
}

.vo-book-form__reassurance {
    margin: 10px 0 0;
    text-align: center;
    color: var(--vo-muted);
    font-size: 13px;
}

.vo-book-form__rgpd {
    margin: 0;
    color: var(--vo-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

.vo-book-form__rgpd-link {
    display: inline-flex;
    align-items: center;
    /* A 40px touch target on a link whose text is a single short line. */
    min-height: 40px;
    color: var(--vo3-accent, var(--vo-terracotta));
    font-size: 12.5px;
    font-weight: 600;
}

/* ==========================================================================
   Price card
   ========================================================================== */

.vo-book-price {
    display: block;
    padding: 22px;
    border: 1px solid var(--vo-hairline);
    border-radius: var(--vo-radius-md);
    background: var(--vo-cream);
    color: var(--vo-ink);
    box-shadow: var(--vo-shadow-card);
}

.vo-book-price__empty {
    margin: 0;
    color: var(--vo-muted);
}

.vo-book-price__errors {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vo-error);
    font-size: 14px;
}

.vo-book-price__errors li + li {
    margin-top: 8px;
}

.vo-book-price__errors:not(:first-child) {
    margin-top: 10px;
}

.vo-book-price__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vo-book-price__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
    font-size: 14px;
}

.vo-book-price__line + .vo-book-price__line {
    border-top: 1px solid rgba(33, 28, 23, .08);
}

.vo-book-price__total {
    display: flex;
    justify-content: space-between;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(33, 28, 23, .2);
    font-family: var(--vo-font-serif);
    font-size: 20px;
    font-weight: 600;
}

.vo-book-price__meta,
.vo-book-price__note {
    margin: 10px 0 0;
    color: var(--vo-muted);
    font-size: 13px;
}

/* The "why book direct" block under the price card (new.html.twig): reasons to
   book here rather than through an OTA. */
.vo-book-why-direct {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: var(--vo-radius-md);
    background: var(--vo-cream-alt);
}

.vo-book-why-direct__title {
    margin: 0 0 10px;
    font-family: var(--vo-font-serif);
    font-size: 16px;
}

.vo-book-why-direct__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--vo-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Sticky mobile call-to-action (booking/_quote.html.twig): the price card
   already sits above the form's own submit button in the mobile stacking
   order (see the media query below), so this repeats "Réserver" wherever the
   visitor has scrolled once a valid quote exists. Desktop keeps only the
   form's own button. */
.vo-book-stickybar {
    display: none;
}

@media (max-width: 768px) {
    .vo-book-stickybar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 16px -22px -22px;
        padding: 14px 22px;
        background: var(--vo-cream);
        border-top: 1px solid var(--vo-hairline);
    }

    .vo-book-stickybar__total {
        font-family: var(--vo-font-serif);
        font-size: 19px;
        font-weight: 600;
    }

    .vo-book-stickybar .vo-btn {
        min-height: 44px;
    }
}

/* ==========================================================================
   Recap / payment cards (summary.html.twig, payment.html.twig)
   ========================================================================== */

.vo-book-summary {
    max-width: 680px;
}

.vo-book-summary > * + * {
    margin-top: 24px;
}

.vo-book-card {
    padding: 24px;
    border: 1px solid var(--vo-hairline);
    border-radius: var(--vo-radius-md);
    background: var(--vo-cream);
}

.vo-book-card__title {
    margin: 0 0 10px;
    font-family: var(--vo-font-serif);
    font-size: 19px;
}

.vo-book-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.vo-book-card__header .vo-book-card__title {
    margin-bottom: 0;
}

.vo-book-card__edit {
    display: inline-flex;
    align-items: center;
    /* 40px touch target on a link whose text is a single short word. */
    min-height: 40px;
    color: var(--vo-terracotta);
    font-size: 13px;
    font-weight: 600;
}

.vo-book-card__dates {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.vo-book-card__meta {
    margin: 4px 0 16px;
    color: var(--vo-muted);
    font-size: 13.5px;
}

.vo-book-terms {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vo-book-terms__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding-block: 4px;
    font-size: 14.5px;
    line-height: 1.5;
}

.vo-book-terms__checkbox input {
    /* The label wraps the box, so the whole sentence is the hit target; the box
       itself still clears the 24px floor for a control that stands alone. */
    width: 24px;
    height: 24px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* Inline in running prose ("J'ai lu et j'accepte les <a>conditions
   générales de vente</a>."), so its own line-height alone is short of the
   40px touch target (CLAUDE.md). inline-flex with an explicit min-height
   guarantees the box regardless of font-metric rounding. */
.vo-book-terms__checkbox a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* Pulls the extra height back out of the surrounding line's flow: margin
       never shrinks the element's own (hit-tested) border box, only its
       spacing among siblings. */
    margin-block: -10px;
    color: var(--vo-terracotta);
    font-weight: 600;
}

/* ==========================================================================
   Alerts — dates lost, payment interrupted or declined (payment.html.twig,
   fake_checkout.html.twig)
   ========================================================================== */

.vo-book-alert {
    padding: 18px 20px;
    border-radius: var(--vo-radius-md);
    background: var(--vo-cream-alt);
}

.vo-book-alert--error {
    background: color-mix(in srgb, var(--vo-error) 10%, var(--vo-cream));
    border: 1px solid color-mix(in srgb, var(--vo-error) 35%, transparent);
}

.vo-book-alert--notice {
    background: color-mix(in srgb, var(--vo-terracotta) 10%, var(--vo-cream));
    border: 1px solid color-mix(in srgb, var(--vo-terracotta) 35%, transparent);
}

.vo-book-alert__text {
    margin: 0;
    color: var(--vo-ink);
}

.vo-book-alert--error .vo-book-alert__text {
    color: var(--vo-error);
}

.vo-book-alert__link {
    display: inline-flex;
    align-items: center;
    /* 40px touch target on a link whose text is a single short line. */
    min-height: 40px;
    margin-top: 4px;
    color: var(--vo-terracotta);
    font-weight: 600;
}

/* ==========================================================================
   Payment form (payment.html.twig)
   ========================================================================== */

.vo-book-payment-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.vo-book-payment-form__secure {
    margin: 0;
    color: var(--vo-muted);
    font-size: 13px;
}

.vo-book-payment-form__contact,
.vo-book-payment-form__cancellation {
    margin: 8px 0 0;
    color: var(--vo-muted);
    font-size: 13px;
}

/* Same 40px fix as .vo-book-terms__checkbox a above: an inline link in
   running prose ("Conditions d'annulation : voir les <a>conditions générales
   de vente</a>"). */
.vo-book-payment-form__cancellation a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-block: -10px;
    color: var(--vo-terracotta);
    font-weight: 600;
}

/* ==========================================================================
   Fake checkout (fake_checkout.html.twig) — the local Stripe Checkout stand-in
   ========================================================================== */

.vo-book-fake-checkout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vo-book-fake-checkout__decline {
    background: transparent;
    border: 1px solid var(--vo-hairline);
    color: var(--vo-ink);
}

.vo-book-fake-checkout__decline:hover {
    background: var(--vo-cream-alt);
}

.vo-book-fake-checkout__cancel {
    background: transparent;
    color: var(--vo-muted);
}

.vo-book-fake-checkout__cancel:hover {
    color: var(--vo-ink);
}

.vo-book-layout__submit,
.vo-book-payment-form__submit,
.vo-book-fake-checkout .vo-btn {
    justify-content: center;
}

/* ==========================================================================
   Mobile — single column, price card between the form and the submit button
   ========================================================================== */

@media (max-width: 768px) {
    .vo-book-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .vo-book-layout__main {
        order: 1;
    }

    .vo-book-layout__price {
        order: 2;
        position: static;
    }

    .vo-book-layout__submit {
        order: 3;
        /* ≥40px tall, full width (CLAUDE.md). */
        min-height: 48px;
    }

    /* Stacked as a flex column here: without an explicit order it defaults to
       0 and jumps ahead of the calendar (order:1), instead of staying read
       after the submit button. */
    .vo-book-form__reassurance {
        order: 4;
    }

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

    .vo-book-payment-form {
        align-items: stretch;
    }

    .vo-book-payment-form__submit,
    .vo-book-fake-checkout .vo-btn {
        /* ≥40px tall, full width (CLAUDE.md). */
        min-height: 48px;
        width: 100%;
    }
}

/* The promo code field sits alone under the contact grid: one column so the
   input keeps the width of a single field rather than stretching across. */
.vo-book-form__grid--promo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
}

.vo-book-price__line--discount {
    color: var(--vo-terracotta);
}

@media (max-width: 768px) {
    .vo-book-form__grid--promo {
        max-width: none;
    }
}