/* =============================================================
   HEAVENLY RETREAT — BOOKING ENGINE
   Hero booking bar · Collapsible calendar · Reservation flow
   Inherits every token from style.css. Loaded after it.
   ============================================================= */

:root {
    --alert: #95382b;
    --alert-bg: #f7edea;
    --alert-ink: #7a2e23;
}

/* =============================================
   PAPER PAGE CHROME
   /reserve has no dark hero under the navbar, so the bar wears
   its solid skin from the first pixel instead of waiting for a
   scroll it may never get.
   ============================================= */
body.page-paper .navbar {
    background: rgba(248, 245, 239, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 12px var(--gutter);
    border-bottom-color: var(--line);
}
body.page-paper .navbar-wordmark { color: var(--text-heading); text-shadow: none; }
body.page-paper .nav-menu a { color: var(--text-body); }
body.page-paper .nav-menu a:hover { color: var(--text-heading); }
body.page-paper .nav-phone { color: var(--text-body); }
body.page-paper .hamburger span { background-color: var(--text-heading); }

/* =============================================
   THE BOOKING BAR  (hero + reservation page)
   `.hb` is the dark, glassy hero treatment.
   `.hb--light` is the paper version used on /reserve.
   ============================================= */
.hb {
    position: relative;
    text-align: left;
}

.hb-bar {
    display: grid;
    grid-template-columns: 1.35fr 0.55fr 1.35fr 1.15fr auto;
    align-items: stretch;
    background: rgba(18, 21, 20, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(233, 220, 195, 0.18);
    border-radius: 4px;
    box-shadow: var(--shadow-lift);
    padding: 8px;
    gap: 4px;
}

.hb--light .hb-bar {
    background: var(--white);
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- Fields --- */
.hb-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.hb-field[disabled] { cursor: default; }

button.hb-field:hover { background: rgba(233, 220, 195, 0.09); }
.hb--light button.hb-field:hover { background: var(--paper); }

button.hb-field.is-active {
    background: rgba(233, 220, 195, 0.14);
    border-color: rgba(216, 198, 164, 0.45);
}
.hb--light button.hb-field.is-active {
    background: var(--paper);
    border-color: var(--gold);
}

.hb-field:focus-visible,
.cal-d:focus-visible,
.cal-nav:focus-visible,
.gp-step button:focus-visible,
.promo:focus-visible,
.payopt button:focus-visible,
.paymethod button:focus-visible,
.steps button:focus-visible,
.picked button:focus-visible,
.vpa button:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

.hb-label {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-soft);
    white-space: nowrap;
}
.hb--light .hb-label { color: var(--gold-deep); }

.hb-value {
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hb--light .hb-value { color: var(--text-heading); }

.hb-value.is-empty {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.62);
}
.hb--light .hb-value.is-empty { color: var(--text-muted); }

/* Nights is a readout, not a control */
.hb-nights {
    cursor: default;
    align-items: center;
    text-align: center;
    border-left: 1px solid rgba(233, 220, 195, 0.16);
    border-right: 1px solid rgba(233, 220, 195, 0.16);
    border-radius: 0;
}
.hb--light .hb-nights {
    border-left-color: var(--line);
    border-right-color: var(--line);
}
.hb-nights .hb-value { color: var(--gold-soft); }
.hb--light .hb-nights .hb-value { color: var(--gold-deep); }

/* Guests field carries the derived suite count */
.hb-sub {
    font-size: 0.74rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--gold-soft);
    white-space: nowrap;
    display: block;
    margin-top: 2px;
}
.hb--light .hb-sub { color: var(--gold-deep); }

/* `.btn` sets display, which outranks the browser's [hidden] rule — so
   the bar's own button needs saying explicitly. It stands down while the
   guests panel is open, since that panel carries the same call to action. */
.hb-go[hidden] { display: none; }

.hb-go {
    align-self: stretch;
    padding-left: 32px;
    padding-right: 32px;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
}

/* =============================================
   GUEST COUNTS
   A numeral and its mark, used wherever a party is
   summarised. The mark inherits colour and scales with
   the text around it.
   ============================================= */
.pax-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    vertical-align: baseline;
}

/* Bottom-aligned, so the adult and the child stand on the same ground
   and the height between them is legible. */
.pax {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    white-space: nowrap;
    line-height: 1;
}

.pax-icon {
    flex: none;
    opacity: 0.72;
    display: block;
}
.pax-icon--adult { width: 1.02em; height: 1.02em; }
.pax-icon--child { width: 0.76em; height: 0.76em; margin-bottom: 0.02em; }

.pax-n {
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0;
}

/* Visible to a screen reader, absent from the page. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================
   SLEEPING ARRANGEMENT
   What the suite actually looks like: the bed it comes
   with, and any mattress the party adds to it.
   ============================================= */
.sleeps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sleep {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 4px 10px 4px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-body);
}
.sleep--extra {
    border-color: var(--gold-soft);
    background: var(--cream);
    color: var(--gold-deep);
}

.bed-icon {
    flex: none;
    opacity: 0.8;
    display: block;
}
/* Sized to each mark's own proportions, cropped viewBox and all. */
.bed-icon--bed { width: 1.78em; height: 1.11em; }
.bed-icon--mattress { width: 1.5em; height: 1.16em; }
.sleep--extra .bed-icon { opacity: 0.95; }

/* =============================================
   THE FOLDED BAR
   Once the search has run the questions are answered, so
   the bar becomes a one-line reminder with a way back in.
   ============================================= */
.hb-mini { display: none; }

.hb--mini .hb-bar,
.hb--mini .hb-panel { display: none; }

.hb--mini .hb-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 13px 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-soft);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast);
}
.hb--mini .hb-mini:hover { border-color: var(--gold); }
.hb--mini .hb-mini:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.hb-mini-stay {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 0.92rem;
    color: var(--text-heading);
}
.hb-mini-stay i { font-style: normal; color: var(--text-muted); }
.hb-mini-stay b {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.86rem;
}
.hb-mini-stay .num {
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
}
.hb-mini-suites { color: var(--text-muted); font-size: 0.86rem; }

.hb-mini-edit {
    flex: none;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    border-bottom: 1px solid var(--gold-soft);
    padding-bottom: 2px;
}

@media (max-width: 560px) {
    .hb--mini .hb-mini { padding: 12px 14px; gap: 10px; }
    .hb-mini-stay { font-size: 0.85rem; gap: 8px; }
}

/* =============================================
   COLLAPSIBLE PANELS
   Animated with the 0fr → 1fr grid-row trick so the
   panel measures itself instead of guessing a height.
   ============================================= */
.hb-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition:
        grid-template-rows 460ms var(--ease-lux),
        opacity 260ms var(--ease-lux),
        margin-top 460ms var(--ease-lux);
    pointer-events: none;
}
.hb-panel > .hb-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.hb-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
    pointer-events: auto;
}

.hb-sheet {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}
.hb--light .hb-sheet { box-shadow: var(--shadow-soft); }

/* =============================================
   CALENDAR
   ============================================= */
.cal-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.cal-months > .cal-month + .cal-month { border-left: 1px solid var(--line); }

.cal-month { padding: 18px 18px 8px; }

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 38px;
}

.cal-title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 500;
    color: var(--text-heading);
    text-align: center;
    flex: 1;
    letter-spacing: 0.01em;
}

.cal-nav {
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 2px;
    cursor: pointer;
    display: grid;
    place-content: center;
    color: var(--text-body);
    transition: border-color var(--t-fast), color var(--t-fast);
}
.cal-nav:hover { border-color: var(--gold); color: var(--gold-deep); }
.cal-nav.is-hidden { visibility: hidden; pointer-events: none; }
.cal-nav-spacer { width: 36px; flex: none; }

.cal-wd, .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-wd { margin-bottom: 4px; }
.cal-wd span {
    text-align: center;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 6px;
}

.cal-grid { gap: 2px; }

.cal-d {
    aspect-ratio: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: grid;
    place-content: center;
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 14;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-body);
    border-radius: 2px;
    transition: background 150ms var(--ease-lux), color 150ms var(--ease-lux);
}
.cal-d:hover:not(:disabled):not(.on) { background: var(--cream); }
.cal-d.pad { visibility: hidden; pointer-events: none; }
.cal-d.mid { background: var(--cream); border-radius: 0; }
.cal-d.on { background: var(--pine); color: var(--paper); font-weight: 500; }
.cal-d.on.a { border-radius: 2px 0 0 2px; }
.cal-d.on.b { border-radius: 0 2px 2px 0; }
.cal-d.on.a.b { border-radius: 2px; }
.cal-d:disabled {
    color: rgba(61, 68, 65, 0.28);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.cal-d.today:not(.on)::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

.cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.cal-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.cal-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cal-legend i {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -1px;
}
.cal-legend .lg-today { background: var(--gold); }
.cal-legend .lg-full { background: rgba(61, 68, 65, 0.26); }

/* =============================================
   GUESTS PANEL
   ============================================= */
.gp { padding: 20px 22px 18px; }

.gp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
}

.gp-label {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}
.gp-mark {
    flex: none;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    color: var(--gold-deep);
}
.gp-mark svg { opacity: 1; }
.gp-mark .pax-icon--adult { width: 22px; height: 22px; }
.gp-mark .pax-icon--child { width: 17px; height: 17px; }
.gp-row + .gp-row { border-top: 1px solid var(--line); }

.gp-name {
    font-size: 0.95rem;
    color: var(--text-heading);
    font-weight: 400;
}
.gp-note {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.gp-step {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}
.gp-step button {
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 2px;
    cursor: pointer;
    color: var(--text-body);
    font-size: 1.05rem;
    line-height: 1;
    display: grid;
    place-content: center;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.gp-step button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-deep); }
.gp-step button:disabled { opacity: 0.35; cursor: default; }
.gp-step .gp-count {
    min-width: 46px;
    text-align: center;
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.15rem;
    color: var(--text-heading);
}

.gp-cap { margin-top: 16px; }

/* Suite count, then the party laid out across them. */
.gp-suites { justify-content: space-between; }
.gp-suites > span:last-child { margin-left: auto; }
@media (max-width: 560px) {
    .gp-suites { flex-wrap: wrap; }
    .gp-suites > span:last-child { margin-left: 0; }
}

.gp-suites {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 16px;
    background: var(--cream);
    border-left: 2px solid var(--gold);
    border-radius: 2px;
    font-size: 0.86rem;
    color: var(--text-body);
}
.gp-suites b {
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-deep);
}
.gp-suites > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Separates one suite's party from the next. */
.gp-suites i {
    font-style: normal;
    color: var(--text-muted);
    opacity: 0.6;
}

/* In the bar the marks sit at the value's own weight. */
.hb-value .pax-group { gap: 14px; }
.hb-value .pax-icon { opacity: 0.85; }
.hb--light .hb-value .pax-icon { opacity: 0.7; }

.gp-done {
    width: 100%;
    margin-top: 16px;
    padding: 13px 26px;
}

/* =============================================
   BOOKING BAR — RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .hb-bar {
        grid-template-columns: 1fr auto 1fr;
        gap: 2px;
    }
    .hb-field { padding: 11px 12px; }
    .hb-guests {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(233, 220, 195, 0.16);
        border-radius: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .hb--light .hb-guests { border-top-color: var(--line); }
    .hb-guests .hb-label { flex: none; }
    .hb-go {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 6px;
    }
    .cal-months { grid-template-columns: minmax(0, 1fr); }
    .cal-months > .cal-month + .cal-month {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 460px) {
    .hb-value { font-size: 0.92rem; }
    .hb-label { font-size: 0.56rem; letter-spacing: 0.2em; }
    .cal-month { padding: 14px 12px 6px; }
    .cal-foot { padding: 12px 14px; }
    .cal-legend { display: none; }
}

/* =============================================
   RESERVATION PAGE — SHELL
   ============================================= */
.res-page {
    padding-top: clamp(96px, 12vh, 132px);
    padding-bottom: clamp(60px, 8vw, 100px);
    min-height: 70vh;
}

.res-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.res-stay {
    margin-bottom: clamp(28px, 4vw, 44px);
}

.res-head { margin-bottom: 26px; }
.res-head h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.2rem);
    color: var(--text-heading);
    margin-bottom: 10px;
}
.res-head p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 62ch;
}

/* --- Step rail --- */
.steps {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.steps button {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 0;
    background: none;
    padding: 4px 0;
    color: var(--text-muted);
    cursor: default;
}
.steps button.done {
    color: var(--text-body);
    cursor: pointer;
    border-bottom: 1px solid transparent;
}
.steps button.done:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.steps button.on { color: var(--gold-deep); }
.steps button:disabled { opacity: 0.55; cursor: default; }
.steps i {
    width: 22px; height: 1px;
    background: var(--line);
    display: inline-block;
}

/* --- Two-column layout with sticky rail --- */
.res-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
@media (max-width: 960px) {
    /* minmax(0, 1fr), not 1fr. `1fr` is shorthand for minmax(auto, 1fr), and
       an `auto` minimum means the track cannot shrink below the item's
       min-content — so one un-wrappable child (a nowrap button carrying a
       price) silently widened the whole document and put a horizontal
       scrollbar on the phone. The desktop rule above already got this right;
       the mobile override was where it was lost. */
    .res-cols { grid-template-columns: minmax(0, 1fr); }
}

.rail { position: sticky; top: 92px; }
@media (max-width: 960px) { .rail { position: static; } }

.panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-soft);
    padding: clamp(22px, 3vw, 30px);
}
.panel + .panel { margin-top: 20px; }

/* =============================================
   RESERVATION — FORM CONTROLS
   ============================================= */
.res-page label {
    display: block;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.res-page input,
.res-page select,
.res-page textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-heading);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 13px 14px;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t-fast);
}
.res-page input:focus,
.res-page select:focus,
.res-page textarea:focus { outline: 0; border-color: var(--gold); }
.res-page textarea { resize: vertical; }
.res-page input[type="file"] { padding: 11px 12px; font-size: 0.88rem; }

.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .grid-two { grid-template-columns: minmax(0, 1fr); } }

.hint {
    font-size: 0.79rem;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.55;
}

/* Small quiet button, e.g. "Remove" */
.btn-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    padding: 12px 6px;
    font-size: 0.7rem;
}
.btn-quiet:hover { color: var(--alert); background: transparent; }

.btn-block { width: 100%; }

/* FULL-WIDTH BUTTONS ON A PHONE
   .btn is nowrap by design — a two-line "Book Now" would look broken. But a
   .btn-block is already the width of its container, and the labels here carry
   an amount inside them ("Pay ₹23,625 by direct transfer"). At 42px of side
   padding and 0.24em of letter-spacing that comes to 390px of unbreakable
   text, which is wider than the phone it has to fit on.

   So on narrow screens these — and only these — may use two lines, with the
   padding and tracking pulled in to make that rarely necessary. */
@media (max-width: 560px) {
    .btn-block {
        white-space: normal;
        padding-left: 18px;
        padding-right: 18px;
        letter-spacing: 0.14em;
        line-height: 1.4;
        text-align: center;
        text-wrap: balance;
    }
}
.btn-sm { padding: 13px 26px; font-size: 0.72rem; letter-spacing: 0.18em; }
.btn:disabled { opacity: 0.42; cursor: default; pointer-events: none; }

/* =============================================
   PROMO CARDS
   ============================================= */
.promos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 24px 0 6px;
}

/* An offer the guest can have for one tap should not read like a
   caption. It carries its own weight, and draws the eye once when the
   results land — then stops, because a thing that never stops moving
   becomes furniture. */
.promo {
    position: relative;
    border: 1.5px solid var(--gold);
    background: linear-gradient(135deg, var(--cream) 0%, #f6efe2 100%);
    border-radius: 3px;
    padding: 18px 20px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(163, 129, 79, 0.14);
    transition: box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.promo:hover {
    box-shadow: 0 10px 30px rgba(163, 129, 79, 0.26);
    transform: translateY(-2px);
}

/* A slow gold sweep across the card, three times, then done. */
.promo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent,
        rgba(255, 255, 255, 0.62),
        transparent);
    transform: skewX(-18deg);
    animation: promoSweep 3.4s var(--ease-lux) 3;
    pointer-events: none;
}
@keyframes promoSweep {
    0%   { left: -60%; }
    38%  { left: 130%; }
    100% { left: 130%; }
}

/* And a breath of the border, so it is caught even out of the corner
   of the eye. */
.promo:not(.on) {
    animation: promoBreathe 2.6s var(--ease-lux) 3;
}
@keyframes promoBreathe {
    0%, 100% { box-shadow: 0 2px 14px rgba(163, 129, 79, 0.14); }
    50%      { box-shadow: 0 4px 22px rgba(163, 129, 79, 0.42); }
}

.promo.on {
    background: var(--pine);
    border-color: var(--pine);
    box-shadow: var(--shadow-soft);
    animation: none;
}
.promo.on::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .promo, .promo::after { animation: none; }
}

.promo .code {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.promo.on .code { color: var(--gold-soft); }

.promo .lab {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-heading);
    margin-top: 4px;
    line-height: 1.15;
}
.promo.on .lab { color: var(--paper); }

.promo .bl { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.promo.on .bl { color: var(--text-on-dark); }

/* The tag is the call to action, so it looks like one. */
.promo .tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold);
    border-radius: 999px;
    padding: 6px 14px;
    margin-top: 12px;
}
.promo.on .tag { background: transparent; padding: 6px 0; }
.promo.on .tag { color: var(--gold-soft); }

.codebox {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 18px;
}
.codebox > div { flex: 1; min-width: 190px; }

/* =============================================
   SUITE CARDS (availability results)
   ============================================= */
/* The results reuse the home page's .suite-card wholesale — carousel,
   title row, description, amenities — so a guest arriving from there
   sees the same object, now with live prices attached. Only the
   availability strip and the rate rows below it are new. */
/* A results page is a list to compare, so the photographs run as a
   filmstrip across the top of the card: two frames in view with the
   next one peeking in, rather than one tall hero. It shows more of the
   suite than a single frame and costs less height than the home page's
   16:11 crop. Arrows drive it, and it is a scroll-snap track so a
   swipe moves exactly one frame. */
.suite-avail {
    margin-bottom: 24px;
    border: 1px solid var(--line);
}
.suite-avail.gone { opacity: 0.58; }
/* The lift on hover fights a page the guest is reading down; results
   sit still. */
.suite-avail:hover { transform: none; box-shadow: var(--shadow-soft); }

.suite-avail-media { position: relative; background: var(--cream); }

/* Stands in for the carousel on a suite whose photographs aren't ready.
   The ratio is taken from the real thing rather than picked: a frame is
   46% of the track at 4/3, inside 8px of padding, which comes out at
   about 2.8:1 across the track. Matching it keeps this card the same
   height as the ones above and below. */
.suite-photos-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2.8;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.suite-photos-soon span {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Height comes from the frames, not from a fixed ratio on the frame. */
.suite-avail .carousel-container {
    aspect-ratio: auto;
    height: auto;
    background: var(--white);
}
.suite-avail .carousel {
    height: auto;
    gap: 8px;
    padding: 8px;
    scroll-padding-left: 8px;
}
.suite-avail .carousel-slide {
    flex: 0 0 46%;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
}

/* Arrows stay put — a hover-only control is invisible on a touch
   screen, and this track is meant to be driven. */
.suite-avail .carousel-nav {
    opacity: 1;
    width: 40px;
    height: 40px;
    background: rgba(248, 245, 239, 0.92);
    box-shadow: 0 2px 10px rgba(18, 21, 20, 0.14);
}
.suite-avail .carousel-nav.prev { left: 14px; }
.suite-avail .carousel-nav.next { right: 14px; }
.suite-avail .carousel-counter { bottom: 16px; right: 16px; }

.suite-avail .suite-info { padding: clamp(20px, 2.6vw, 30px); }
.suite-avail .suite-title { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.suite-avail .suite-title-row { margin-bottom: 12px; padding-bottom: 12px; }
.suite-avail .suite-description {
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 18px;
}
.suite-avail .amenities-list {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px 16px;
    margin-bottom: 20px;
}
.suite-avail .amenity { font-size: 0.82rem; }
.suite-avail .suite-offer-note { margin: -4px 0 14px; }

/* One frame and a peek once there is no room for two. */
@media (max-width: 700px) {
    .suite-avail .carousel-slide { flex: 0 0 84%; }
    /* A frame goes near full-width here, so the stand-in follows it. */
    .suite-photos-soon { aspect-ratio: 1.55; }
    .suite-avail .carousel-nav { width: 36px; height: 36px; }
    .suite-avail .carousel-nav.prev { left: 10px; }
    .suite-avail .carousel-nav.next { right: 10px; }
    .suite-avail .amenities-list { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

/* --- Availability strip: what is left, for these nights --- */
.suite-avail-top {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: baseline;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.suite-left-label {
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.suite-left {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-deep);
    white-space: nowrap;
    flex: none;
}
.suite-left.low { color: var(--alert); }

/* --- Rate rows --- */
.plan {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}
.plan:first-of-type { margin-top: 18px; }

.plan .pn { font-size: 0.98rem; color: var(--text-heading); font-weight: 400; }
.plan .pb {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 3px;
    max-width: 44ch;
}
.plan .pb.save { color: var(--gold-deep); }
.plan .pb-sleeps { margin-top: 9px; max-width: none; }

/* A suite that cannot hold this party has no rate to show. */
.plan-none {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.plan .act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.plan .price { text-align: right; white-space: nowrap; }

/* The suite counter on a result card. Same control as the party picker's
   steppers — .gp-step carries the look; this only sets the size it needs
   sitting beside a price rather than inside a sheet. */
.plan-step { flex: none; }
.plan-step .gp-count { min-width: 2.1ch; }
@media (max-width: 560px) {
    .plan .act { justify-content: space-between; }
    .plan-step { margin-left: auto; }
}

/* Matches .suite-price-now on the home page: Fraunces, semibold, gold —
   so the rate a guest is actually paying reads the same everywhere. */
.plan .amt {
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--gold-deep);
    line-height: 1.15;
    letter-spacing: 0;
}
/* And this matches .suite-price-was. */
.plan .was {
    font-family: var(--font-amount);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    margin-right: 6px;
}
.plan .per { font-size: 0.74rem; color: var(--text-muted); margin-top: 5px; }

/* =============================================
   SUMMARY RAIL
   ============================================= */
.rail .panel { padding: 24px; }

/* Flashes once when the last suite of the party is chosen and the
   summary scrolls into view. */
.rail .panel.is-fresh { animation: railFresh 1100ms var(--ease-lux); }
@keyframes railFresh {
    0%   { box-shadow: var(--shadow-soft); border-color: var(--line); }
    22%  { box-shadow: var(--shadow-lift); border-color: var(--gold); }
    100% { box-shadow: var(--shadow-soft); border-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
    .rail .panel.is-fresh { animation: none; }
}

.rail-eyebrow {
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* A date range and a party on one line; the marks keep their own
   spacing rather than inheriting the eyebrow's wide tracking. */
.res-summary-line {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.res-summary-line .pax-group { letter-spacing: 0; gap: 11px; }
.res-summary-line .pax { gap: 4px; }
.res-dot { opacity: 0.5; }

/* Held-back Continue: say what is missing, not just that it is. */
.rail-short {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 13px 15px;
    background: var(--cream);
    border-left: 2px solid var(--gold);
    border-radius: 0 2px 2px 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-body);
}
.rail-short b { color: var(--gold-deep); font-weight: 600; }

.picked {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}
.picked .rm { color: var(--text-heading); }
.picked .sm { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.picked .pax-line { margin-top: 5px; color: var(--text-body); font-size: 0.82rem; }
.picked .pax-line .pax-icon { opacity: 0.6; }
.picked .sleeps-line { margin-top: 6px; }
.picked .sleeps-line .sleep { font-size: 0.72rem; padding: 3px 8px 3px 6px; }

/* What the suite's price is made of. */
.picked--full { display: block; }
.picked-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.items {
    list-style: none;
    margin: 11px 0 2px;
    padding: 10px 0 0;
    border-top: 1px dashed var(--line);
}
.items li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 3px 0;
    color: var(--text-muted);
}
.items .i-l { min-width: 0; }
.items .i-l i {
    font-style: normal;
    opacity: 0.75;
}
.items .i-a {
    white-space: nowrap;
    font-family: var(--font-amount);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-body);
}
.items li.is-save .i-a,
.items li.is-save .i-l { color: var(--gold-deep); }
.picked .amt {
    white-space: nowrap;
    font-family: var(--font-amount);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-heading);
}
.picked button {
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 2px;
}
.picked button:hover { color: var(--alert); }

.srow {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    font-size: 0.9rem;
}
.srow .k { color: var(--text-muted); }
.srow .v {
    color: var(--text-heading);
    white-space: nowrap;
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
}
.srow.save .v { color: var(--gold-deep); }
.srow.total {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 15px;
    align-items: baseline;
}
.srow.total .k { color: var(--text-heading); }
.srow.total .v { font-size: 1.5rem; font-weight: 500; }
.srow.due {
    background: var(--cream);
    margin: 16px -24px -24px;
    padding: 17px 24px;
    align-items: baseline;
}
.srow.due .v { font-size: 1.42rem; color: var(--gold-deep); font-weight: 500; }

/* =============================================
   NOTICES
   ============================================= */
.notice {
    border-left: 2px solid var(--gold);
    background: var(--cream);
    padding: 16px 20px;
    font-size: 0.9rem;
    color: var(--text-body);
    margin: 20px 0;
    line-height: 1.65;
    border-radius: 0 2px 2px 0;
}
.notice b { font-weight: 500; color: var(--text-heading); }
.notice.warn {
    border-left-color: var(--alert);
    background: var(--alert-bg);
    color: var(--alert-ink);
}
.notice.warn b { color: var(--alert-ink); }

/* Ways out of a code that doesn't apply, offered where it failed. */
.bad-code-out {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 13px;
}
.bad-code-out .btn { padding: 10px 18px; font-size: 0.68rem; }

.err {
    display: none;
    border-left: 2px solid var(--alert);
    background: var(--alert-bg);
    color: var(--alert-ink);
    padding: 15px 20px;
    font-size: 0.9rem;
    margin: 20px 0;
    border-radius: 0 2px 2px 0;
}

/* Occupancy nudge on the results page */
.suites-nudge {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 20px;
    margin-top: 22px;
    background: var(--cream);
    border-left: 2px solid var(--gold);
    border-radius: 0 2px 2px 0;
    font-size: 0.9rem;
    color: var(--text-body);
}
.suites-nudge.ok { border-left-color: var(--pine); }
.suites-nudge > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.nudge-layout {
    margin-left: auto;
    color: var(--text-muted);
}
@media (max-width: 560px) { .nudge-layout { margin-left: 0; } }
.suites-nudge i {
    font-style: normal;
    color: var(--text-muted);
    opacity: 0.6;
}
.suites-nudge b {
    font-family: var(--font-amount);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--gold-deep);
    font-weight: 600;
}
.suites-nudge.ok b { color: var(--pine); }

/* =============================================
   PAYMENT
   ============================================= */
.payopt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 22px;
}
@media (max-width: 560px) { .payopt { grid-template-columns: minmax(0, 1fr); } }

.payopt button {
    text-align: left;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 2px;
    padding: 17px 19px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.payopt button:hover { border-color: var(--gold); }
.payopt button.on { border-color: var(--gold-deep); background: var(--cream); }

.payopt .oh {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.payopt .ol {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.payopt button.on .ol { color: var(--gold-deep); }
.payopt .oa {
    font-family: var(--font-amount);
    font-variation-settings: 'opsz' 20;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--text-heading);
}
.payopt .ob { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }

/* Method chooser — direct transfer is the default */
.paymethod {
    display: grid;
    gap: 12px;
    margin: 6px 0 20px;
}
.paymethod button {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 2px;
    padding: 17px 19px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.paymethod button:hover { border-color: var(--gold); }
.paymethod button.on { border-color: var(--gold-deep); background: var(--cream); }

.paymethod .dot {
    flex: none;
    width: 17px; height: 17px;
    margin-top: 3px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    position: relative;
    transition: border-color var(--t-fast);
}
.paymethod button.on .dot { border-color: var(--gold-deep); }
.paymethod button.on .dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--gold-deep);
}

.paymethod .mt {
    font-size: 0.96rem;
    color: var(--text-heading);
    font-weight: 400;
}
.paymethod button.on .mt { color: var(--text-heading); }
.paymethod .mb { font-size: 0.79rem; color: var(--text-muted); margin-top: 3px; line-height: 1.55; }
.paymethod .flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    border: 1px solid var(--gold-soft);
    border-radius: 2px;
    padding: 2px 7px;
    vertical-align: 2px;
}

.vpa {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 15px 17px;
    margin-top: 12px;
    font-size: 1rem;
    color: var(--text-heading);
    word-break: break-all;
}
.vpa button {
    border: 0;
    background: none;
    color: var(--gold-deep);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    flex: none;
}
.vpa button:hover { color: var(--gold); }

/* =============================================
   GOOD TO KNOW
   ============================================= */
.gtk {
    border-top: 1px solid var(--line);
    margin-top: 34px;
    padding-top: 26px;
}
.gtk h3 { font-size: 1.4rem; margin-bottom: 20px; }
/* Four short facts, scanned rather than read. */
.gtk .rowset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 28px;
}

.gtk .it { display: flex; gap: 14px; align-items: flex-start; }
.gtk svg {
    flex: none;
    width: 20px; height: 20px;
    stroke: var(--gold-deep);
    fill: none;
    stroke-width: 1.3;
    margin-top: 3px;
}
.gtk .it b {
    display: block;
    font-weight: 500;
    color: var(--text-heading);
    font-size: 0.9rem;
    line-height: 1.35;
}
.gtk .it p {
    font-size: 0.81rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* =============================================
   CONFIRMATION / SPINNER
   ============================================= */
.done-mark {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    color: var(--gold-deep);
    font-family: var(--font-display);
    font-size: 1.9rem;
}
.done-block { text-align: center; padding: 22px 0; }
.done-block h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.done-block p {
    color: var(--text-muted);
    max-width: 54ch;
    margin: 14px auto 0;
    font-size: 1rem;
}

.spin {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    border-top-color: var(--gold);
    animation: hrspin 0.8s linear infinite;
    margin: 60px auto;
}
@keyframes hrspin { to { transform: rotate(360deg); } }

/* =============================================
   CONFETTI CANVAS
   ============================================= */
/* The width/height pair matters as much as the inset. A <canvas> is a
   replaced element, so `width: auto` resolves to its *intrinsic* size -
   the width/height attributes, which cheer() sets to viewport x dpr -
   and the over-constrained left/right pair is settled by dropping
   `right`. On any retina screen the canvas therefore laid itself out at
   twice the viewport, anchored top-left: the left burst fell below the
   bottom edge, the middle one sat on the right edge, and the right one
   was off-screen entirely. Which is exactly what it looked like - a
   shower from the bottom and the right, with nothing on the left. */
#confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2500;
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hb-panel { transition: none; }
    .spin { animation: none; }
}

/* ------------------------------------------------------------
   TICK BOXES

   Only the quotation panel uses these so far. Two things on this
   page have to be undone first:

   `.res-page label` is built for field captions — uppercase and
   letter-spaced — which turns a sentence of consent into
   something nobody reads. And `.res-page input` sets
   appearance:none to style text fields, which also erases the
   tick from a checkbox and leaves an empty square.

   Both selectors carry one class and one element, so these
   carry two classes to win, rather than reaching for !important.

   Sized for a thumb: the whole row is the target, not the box.
   ------------------------------------------------------------ */
.res-page .qcheck {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 0;
    /* undo the field-caption treatment */
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.55;
    color: var(--text-body);
}
.res-page .qcheck input[type="checkbox"] {
    /* undo the text-field treatment */
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: 18px;
    height: 18px;
    min-width: 0;
    padding: 0;
    margin: 1px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    accent-color: var(--gold, #b99562);
    cursor: pointer;
}
.res-page .qcheck span { user-select: none; }
.res-page .qcheck:hover span { color: var(--text-heading); }

/* The floating WhatsApp button sits over the bottom-right corner, so a
   full-width control directly beneath it loses its last few characters. */
.res-page #quotepanel .btn {
    padding-right: 56px;
    padding-left: 56px;
    position: relative;
    overflow: hidden;
}

/* ---- asking for attention, but only once the guest has hesitated ----

   Sitting quietly under the payment options, this button was being read
   straight past. Animating it on arrival would be worse: it would compete
   with the pay button at the moment we most want that one pressed.

   So it waits. Twelve seconds on the checkout step without acting is a
   guest who is thinking about it, and that is exactly when an emailed
   quotation stops being clutter and starts being the useful thing on the
   page. Three breaths, the house's own btnAttractBreathe — a warm shadow,
   no colour change — then it settles and never nags again.               */
.res-page #quotepanel .btn {
    animation: quoteNudge 2.6s var(--ease-lux) 12s 3;
}

/* The house breathe is a shadow alone, which is right on a gold button
   against a photograph. On a pale outline button on a white panel it was
   too quiet to do the job, so this carries the same warm shadow and adds
   a two-pixel lift — movement the eye catches in peripheral vision, with
   no change to the button's colour. */
@keyframes quoteNudge {
    0%, 100% {
        box-shadow: 0 2px 14px rgba(163, 129, 79, 0.14);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 8px 26px rgba(163, 129, 79, 0.42);
        transform: translateY(-2px);
    }
}

/* The sweep is defined for .btn-solid, whose white shine would be
   invisible here. Same movement, gold, so it reads on pale paper. */
.res-page #quotepanel .btn::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent,
                rgba(185, 149, 98, 0.30), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: btnAttractSweep 3.4s var(--ease-lux) 12s 3;
}

/* Once it is hovered or focused the guest has clearly found it. */
.res-page #quotepanel .btn:hover,
.res-page #quotepanel .btn:focus-visible { animation: none; }
.res-page #quotepanel .btn:hover::after,
.res-page #quotepanel .btn:focus-visible::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .res-page #quotepanel .btn,
    .res-page #quotepanel .btn::after { animation: none; }
    .res-page #quotepanel .btn::after { display: none; }
}