/* ============================================================================
   checkout-polish.css - the confirm/pay step of /book.php
   ----------------------------------------------------------------------------
   The complaint this sheet answers: "a lot of it has no contrast, everything's
   on the background of the website, which makes it look unprofessional."

   That was literally true. The page wash and every card on the step were two
   barely-different whites, so the cards had almost nothing to sit against - a
   1.02:1 surface relationship. Nothing read as a container, so the step read
   as more marketing page rather than as a checkout.

   The fix is a surface inversion at the money step: when the customer crosses
   from browsing into paying, the ground goes warmer and darker, and the
   functional cards stay white. Same two-surface law the rest of the brand
   follows - it is just that this step never had a second surface.

   Scoped to step 3 only. Steps 1 and 2 are unchanged.
   ========================================================================== */

:root {
    --co-ground:      #F5F0EB;  /* the folio the checkout sits on          */
    --co-card:        #FFFFFF;  /* functional surfaces                     */
    --co-rule:        #E6DCCE;  /* hairlines on the folio                  */
    --co-rule-soft:   #EDE5DB;  /* hairlines on white                      */
    --co-ink:         #2F3830;  /* forest, primary ink + primary action    */
    --co-ink-2:       #4A4237;  /* body                                    */
    --co-ink-3:       #6F6455;  /* secondary - 5.79:1 on white             */
    --co-sage:        #4F6B4F;
    --co-card-hover:  #FCFBF8;  /* summary-row hover on white             */
    --co-rule-hover:  #C9CFC0;  /* card border on hover                   */
    --co-gold:        #E3C069;  /* ONLY on the forest chip. Gold on white
                                   is 2.4:1 and fails AA, so it never
                                   appears as text on a light surface.     */
}

/* ── The folio ─────────────────────────────────────────────────────────────
   One container, one width, one left edge - which is also what fixes the
   "checkout process is not aligned" complaint: every block inside now shares
   a single padding box instead of each floating at its own margin. */
body[data-page="book"] .book-step-panel[data-step="3"] {
    background: var(--co-ground);
    border: 1px solid var(--co-rule);
    border-radius: 24px;
    padding: 44px 40px 36px;
    box-shadow: 0 1px 2px rgba(47, 56, 48, .04);
}

@media (max-width: 640px) {
    body[data-page="book"] .book-step-panel[data-step="3"] {
        padding: 28px 18px 26px;
        border-radius: 18px;
        border-left: 0;
        border-right: 0;
        margin-left: -16px;
        margin-right: -16px;
    }
}

/* ── Section headings inside the folio ─────────────────────────────────────
   "One last look." and "How would you like to pay?" were an <h3> carrying
   .book-step-title, but every design-system rule targets h2.book-step-title,
   so both rendered as unstyled 16px body copy. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--co-ink);
    margin: 0 0 6px;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-section-sub {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--co-ink-3);
    margin: 0 0 16px;
    max-width: 62ch;
}

/* ── Cards on the folio ────────────────────────────────────────────────────
   White now has something to be white against, so these need no heavy border
   and no drop shadow to separate. A hairline is enough. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-card {
    background: var(--co-card);
    border: 1px solid var(--co-rule-soft);
    border-radius: 16px;
    margin-top: 20px;
    overflow: hidden;
}

/* Bring the pre-existing white blocks (order summary, notes, consent rows)
   onto the same language as the new cards. */
body[data-page="book"] .book-step-panel[data-step="3"] .bg-warm-50,
body[data-page="book"] .book-step-panel[data-step="3"] .bg-sage-50 {
    background: var(--co-card) !important;
    border-color: var(--co-rule-soft) !important;
}

/* The order summary keeps its dark header - that band is the anchor of the
   step - but loses the gradient. Flat reads more expensive than a gradient. */
body[data-page="book"] .book-step-panel[data-step="3"] .bg-gradient-to-r.from-sage-600 {
    background: var(--co-ink) !important;
}

/* ── Disclosures (add-ons, promo) ──────────────────────────────────────────
   The add-on grid measured 1,359px tall - taller than the order summary and
   the payment choice put together, and sitting directly above both. Collapsed,
   it is a single row that still reports its running total. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    transition: background .18s ease;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__summary::-webkit-details-marker { display: none; }
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__summary:hover { background: var(--co-card-hover); }

body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__label {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__title {
    font-size: 14.5px; font-weight: 600; color: var(--co-ink);
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__hint {
    font-size: 12px; color: var(--co-ink-3);
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__meta {
    display: flex; align-items: baseline; gap: 8px; flex-shrink: 0;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__metaLabel {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--co-ink-3);
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__metaValue {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 600; color: var(--co-ink);
}
/* Affordance: a chevron that turns. Without it a <summary> row reads as a
   static heading and nobody finds the extras. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__summary::after {
    content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-left: 2px;
    border-right: 1.5px solid var(--co-ink-3);
    border-bottom: 1.5px solid var(--co-ink-3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure[open] .checkout-disclosure__summary::after {
    transform: rotate(225deg) translateY(-2px);
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure[open] .checkout-disclosure__summary {
    border-bottom: 1px solid var(--co-rule-soft);
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__body { padding: 14px 20px 18px; }
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure--slim .checkout-disclosure__summary { padding: 13px 20px; }

/* ── Payment choice ────────────────────────────────────────────────────────
   The two options were different heights with prices on no shared baseline,
   and the panel behind them carried a sage tint that fought the cards. Now:
   equal height by grid, prices on one baseline, tint gone. */
/* overflow must stay visible here: the savings chip sits above the card's top
   edge, and .checkout-card clips by default. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay {
    padding: 22px 20px 20px;
    overflow: visible;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__disclosure {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--co-ink-3);
}

body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    height: 100%;
    padding: 18px 16px 16px;
    background: var(--co-card);
    border: 1px solid var(--co-rule-soft);
    border-radius: 14px;
    cursor: pointer;
    /* .select-card sets overflow:hidden, which sliced the top half off the
       savings chip that deliberately overhangs the card edge. */
    overflow: visible;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__option:hover {
    border-color: var(--co-rule-hover);
    transform: none;          /* .select-card lifts 4px; a radio must not */
    box-shadow: none;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__option.selected {
    border: 2px solid var(--co-sage);
    background: rgba(79, 107, 79, .045);
    box-shadow: none;
    padding: 17px 15px 15px;  /* hold size while the border grows 1px -> 2px */
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__name {
    font-size: 14.5px; font-weight: 600; color: var(--co-ink); margin-top: 2px;
}
/* Price sits on a shared baseline: pushed to the bottom of whichever card is
   taller, so the two figures always line up. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 31px; font-weight: 600; line-height: 1.05;
    color: var(--co-ink); margin-top: auto; padding-top: 6px;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__note {
    font-size: 11.5px; line-height: 1.45; color: var(--co-ink-3);
}
/* The one gold moment on the page, and it is on forest - never on white. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay__chip {
    position: absolute; top: -10px; left: 14px;
    background: var(--co-ink); color: var(--co-gold);
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay input[type="radio"] {
    position: absolute; top: 14px; right: 14px; accent-color: var(--co-sage);
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   One filled action on the step. Back was the same height and sat beside
   Confirm & Pay, giving a reverse action equal claim on the eye. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-actions {
    margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-submit {
    width: 100%; max-width: 460px; min-height: 58px; font-size: 16px; border-radius: 14px;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-assurance {
    font-size: 11.5px; line-height: 1.6; color: var(--co-ink-3);
    text-align: center; max-width: 64ch; margin: 2px 0 0;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-back {
    background: none; border: 0; padding: 6px 10px; cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--co-ink-3);
    text-decoration: underline; text-underline-offset: 3px;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-back:hover { color: var(--co-ink); }

/* Promo Apply: was a filled dark button, i.e. a second primary sitting a few
   hundred pixels above the real one. */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-btn-quiet {
    flex-shrink: 0; padding: 0 22px; min-height: 46px; border-radius: 10px;
    background: var(--co-card); border: 1px solid var(--co-ink);
    color: var(--co-ink); font-size: 12.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-btn-quiet:hover {
    background: var(--co-ink); color: #FBF9F4;
}

/* ── Fields ────────────────────────────────────────────────────────────────
   The contact inputs are transparent with a 1px bottom rule, set via inline
   style attributes. On the warm folio a transparent field is invisible as a
   field, so they are enclosed here. !important is required only because the
   values it overrides are inline on the elements themselves. */
body[data-page="book"] .book-step-panel[data-step="3"] .book-field-input {
    background: var(--co-card) !important;
    border: 1px solid var(--co-rule-soft) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-page="book"] .book-step-panel[data-step="3"] .book-field-input:focus {
    border-color: var(--co-sage) !important;
    box-shadow: 0 0 0 3px rgba(79, 107, 79, .14) !important;
    outline: none;
}
body[data-page="book"] .book-step-panel[data-step="3"] textarea,
body[data-page="book"] .book-step-panel[data-step="3"] select:not(.checkout-btn-quiet),
body[data-page="book"] .book-step-panel[data-step="3"] input[type="text"]:not(.book-field-input) {
    background: var(--co-card);
}

/* ── Rhythm ────────────────────────────────────────────────────────────────
   Everything used a uniform mt-6, which is why a consent checkbox carried the
   same weight as the payment decision. Major blocks get air; related rows sit
   tight. */
body[data-page="book"] .book-step-panel[data-step="3"] > hr { display: none; }
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-pay { margin-top: 26px; }
body[data-page="book"] .book-step-panel[data-step="3"] #prbWrap { margin-top: 26px; }

/* Consent rows: quiet, uniform, and clearly gatekeepers rather than content. */
body[data-page="book"] .book-step-panel[data-step="3"] label[for="photo_consent"],
body[data-page="book"] .book-step-panel[data-step="3"] label[for="cancellation_policy_consent"],
body[data-page="book"] .book-step-panel[data-step="3"] label[for="create_account"] {
    border-radius: 12px !important;
    border-color: var(--co-rule-soft) !important;
    padding: 13px 15px !important;
}

/* ── Muted text that missed AA ─────────────────────────────────────────────
   Measured on the folio: "(optional)" and the express-checkout divider labels
   sat at 4.27:1, the "Help us improve" hint at 4.49:1 - all under the 4.5:1
   floor for text below 18.66px. These are the same neutral the rest of the
   step already uses for secondary copy (5.79:1 on white). */
body[data-page="book"] .book-step-panel[data-step="3"] .text-gray-400,
body[data-page="book"] .book-step-panel[data-step="3"] .text-warm-500,
body[data-page="book"] .book-step-panel[data-step="3"] .text-gray-500 {
    color: var(--co-ink-3) !important;
}

/* Phone: the promo row is input + Apply side by side. Without a shrink floor on
   the input the pair overflows a 390px viewport by 4px (iPhone 13 probe). */
body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__body.flex > input { min-width: 0; }
@media (max-width: 420px) {
    body[data-page="book"] .book-step-panel[data-step="3"] .checkout-disclosure__body.flex { flex-wrap: wrap; }
    body[data-page="book"] .book-step-panel[data-step="3"] .checkout-btn-quiet { width: 100%; }
}

/* Phone: the fixed price bar and the chat bubble sat on top of the last consent
   row and the Back link. Give the page room beneath the bar and lift the bubble
   above it (iPhone probe 2026-09-11). Book page only. */
@media (max-width: 640px) {
    body[data-page="book"] main { padding-bottom: 112px; }
    body[data-page="book"] #wc-chat-bubble { bottom: 104px !important; }
}