/* Booking flow (2026-09-01) — postcode-first step 1, quote + email capture,
   compact step 3, and the paid-traffic landing page (book.html).
   Design-system rules: rc- classes, tokens only, no importance overrides,
   min-width breakpoints only. The handful of legacy hooks touched here (.price-estimate,
   .mobile-sticky-cta, .form-step-nav) are the ones main.js / booking-compat
   still toggle; they are restyled, never renamed. */

/* ---------- coverage line under the postcode ---------- */
.rc-book-coverage {
    min-height: 0;
    margin-top: var(--rc-space-2);
    font-size: var(--rc-text-sm);
    line-height: 1.5;
    color: var(--rc-ink-muted);
}
.rc-book-coverage:empty { display: none; }
.rc-book-coverage--ok { color: var(--rc-forest); font-weight: 600; }
.rc-book-coverage--checking { color: var(--rc-ink-subtle); }
.rc-book-coverage--error { color: var(--rc-ink-strong); }

/* Not-covered panel: an honest answer plus the one thing they can do. */
.rc-book-nocover {
    margin-top: var(--rc-space-3);
    padding: var(--rc-space-4);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-cream);
    color: var(--rc-ink);
}
.rc-book-nocover p { margin: 0 0 var(--rc-space-2); }
.rc-book-nocover__row { display: flex; gap: var(--rc-space-2); flex-wrap: wrap; }
.rc-book-nocover__row input { flex: 1 1 200px; }
.rc-book-nocover__row .rc-btn { flex: 0 0 auto; }
.rc-book-nocover__status { margin-top: var(--rc-space-2); font-size: var(--rc-text-sm); }

/* ---------- "More rooms?" / "Anything else?" disclosures ---------- */
.rc-book-more {
    margin: 0 0 var(--rc-space-4);
    border: 1px solid var(--rc-line-soft);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-surface);
}
.rc-book-more > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--rc-space-3) var(--rc-space-4);
    min-height: var(--rc-tap);
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--rc-ink);
    font-size: var(--rc-text-sm);
}
.rc-book-more > summary::-webkit-details-marker { display: none; }
.rc-book-more > summary::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--rc-ink-muted);
    border-bottom: 2px solid var(--rc-ink-muted);
    transform: rotate(45deg);
}
.rc-book-more[open] > summary::after { transform: rotate(-135deg); }
.rc-book-more__summary { font-weight: 400; color: var(--rc-ink-subtle); }
.rc-book-more__body { padding: 0 var(--rc-space-4) var(--rc-space-4); }
.rc-book-more__body.form-row { margin-bottom: 0; }
.rc-book-more__body .form-group.full-width { margin-bottom: var(--rc-space-4); }

/* ---------- price panel ---------- */
.rc-book-price { align-items: baseline; }
.rc-book-price__unit { font-weight: 400; color: var(--rc-ink-subtle); }
.rc-book-price__meta {
    flex-basis: 100%;
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-muted);
}
.rc-book-price__meta:empty { display: none; }

/* ---------- quote gate ----------
   The figure stays hidden until the visitor gives a first name + email and taps
   "Get my quote"; js/booking-flow.js then adds .rc-quote-unlocked to the form.
   main.js toggles the panel's inline display, so only the two inner views are
   styled here. */
.rc-book-price__open { display: contents; }
.rc-book-price__locked {
    flex-basis: 100%;
    font-size: var(--rc-text-sm);
    line-height: 1.5;
    color: var(--rc-ink);
}
.rc-book-price__locked em { font-style: normal; font-weight: 600; }
.booking-form:not(.rc-quote-unlocked) .rc-book-price__open { display: none; }
.booking-form.rc-quote-unlocked .rc-book-price__locked { display: none; }
.rc-book-price--revealed { animation: rc-quote-reveal 500ms ease-out; }
@keyframes rc-quote-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- first name + email ---------- */
.rc-book-contact {
    margin-top: var(--rc-space-5);
    padding-top: var(--rc-space-5);
    border-top: 1px solid var(--rc-line-soft);
}
.rc-book-contact__title {
    margin: 0 0 var(--rc-space-4);
    font-family: var(--rc-font-display);
    font-weight: 400;
    font-size: var(--rc-text-xl);
    color: var(--rc-ink);
}
.rc-book-contact__note {
    margin: 0;
    font-size: var(--rc-text-xs);
    line-height: 1.5;
    color: var(--rc-ink-subtle);
}

/* ---------- step 3 ---------- */
.rc-book-where {
    display: flex;
    align-items: baseline;
    gap: var(--rc-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--rc-space-4);
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-muted);
}
.rc-book-where strong { color: var(--rc-ink); font-size: var(--rc-text-base); }
.rc-book-where__change {
    background: none;
    border: 0;
    padding: 0;
    min-height: var(--rc-tap);
    color: var(--rc-forest);
    font: inherit;
    font-size: var(--rc-text-sm);
    text-decoration: underline;
    cursor: pointer;
}
.rc-book-hint {
    margin-top: var(--rc-space-2);
    font-size: var(--rc-text-xs);
    color: var(--rc-ink-subtle);
}
.rc-book-hint:empty { display: none; }
.rc-book-hint--ok { color: var(--rc-forest); }
.rc-book-hint--warn { color: var(--rc-ink-strong); font-weight: 600; }
.rc-book-hint--slot { margin: calc(-1 * var(--rc-space-2)) 0 var(--rc-space-4); }
.rc-book-hint--slot a { color: var(--rc-forest); font-weight: 600; }
.rc-book-confirm {
    margin: var(--rc-space-3) 0;
    padding: var(--rc-space-3) var(--rc-space-4);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-cream);
    font-size: var(--rc-text-sm);
    color: var(--rc-ink);
}
.rc-book-confirm a { color: var(--rc-forest); font-weight: 600; }

/* ---------- unsubscribe / resume notices ---------- */
.rc-book-notice {
    margin: 0 auto var(--rc-space-5);
    max-width: 800px;
    padding: var(--rc-space-3) var(--rc-space-4);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-surface);
    font-size: var(--rc-text-sm);
    color: var(--rc-ink);
}

/* ---------- mobile chrome yields while the visitor is inside the form ---------- */
.rc-in-form .mobile-sticky-cta,
.rc-in-form .rc-contact-dock { display: none; }

/* ---------- book.html: the form IS the page ---------- */
.rc-booking--page { padding-block: var(--rc-space-5) var(--rc-space-8); }
.rc-booking--page .section-title { margin-top: var(--rc-space-2); }
.rc-booking--page .section-subtitle { margin-bottom: var(--rc-space-3); }
.rc-book-reassure {
    list-style: none;
    margin: 0 auto var(--rc-space-5);
    padding: 0;
    max-width: 800px;
    display: flex;
    justify-content: center;
    gap: var(--rc-space-2) var(--rc-space-5);
    flex-wrap: wrap;
    font-size: var(--rc-text-sm);
    color: var(--rc-ink-muted);
}
.rc-book-reassure li::before { content: '\2713\00a0'; color: var(--rc-forest); font-weight: 700; }
.rc-footer--slim { padding-block: var(--rc-space-6); }
.rc-footer--slim .rc-footer__grid { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .rc-booking--page { padding-block: var(--rc-space-6) var(--rc-space-9); }
    .rc-footer--slim .rc-footer__grid { grid-template-columns: 1fr 1fr; }
}