/* === Vacation rental checkout — modern professional skin =========================
   Replaces the design's heavy parallax hero with a slim Airbnb/Stripe-style
   top bar. Re-uses the design tokens for the rest (white cards, orange accent,
   sticky summary card on the right) but tightens typography and elevates the
   visual hierarchy so the page reads as a transaction, not marketing.
============================================================================ */

/* ------- Base page (kept from design) ------- */

.booking-page {
    background-color: #f7f7f8;
    color: #111827;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'tnum';
    -webkit-font-smoothing: antialiased;
}

/* ------- Slim modern topbar (replaces .booking-hero) ------- */

.checkout-topbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: clamp(80px, 10vw, 120px) 0 28px;
}
.checkout-topbar .container {
    display: grid;
    gap: 16px;
}
.checkout-topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    width: max-content;
    padding: 4px 0;
    transition: color .15s;
}
.checkout-topbar__back:hover { color: #111827; }
.checkout-topbar__back svg { flex-shrink: 0; }
.checkout-topbar__title h1 {
    margin: 0;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111827;
    line-height: 1.15;
}
.checkout-topbar__sub {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: .95rem;
}

/* ------- Layout ------- */

.booking-main {
    padding: 32px 0 80px;
    max-width: 1200px;
}

.booking-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 992px) {
    .booking-layout {
        grid-template-columns: 1fr;
    }
    .booking-sidebar {
        order: -1;
    }
}

/* ------- Section headings ------- */

.section-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
    margin: 28px 0 12px;
}
.section-title:first-child { margin-top: 0; }

/* ------- Form cards ------- */

.checkout-card {
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.form-row > .form-group { margin-bottom: 0; }

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.form-group label {
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 14px;
    border: 1px solid #d6d6dc;
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    color: #111827;
    background: #fafafb;
    outline: 0;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #d9a24a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(217, 162, 74, .14);
}
.form-group input[readonly] {
    background: #f3f4f6;
    color: #4b5563;
    cursor: default;
}

.form-note {
    font-size: .82rem;
    color: #9ca3af;
    margin: 8px 0 0;
}

.phone-input {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
}
.phone-input select { width: 100%; }

/* ------- Payment card ------- */

.payment-card .card-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}
.payment-card .card-icons img {
    height: 28px;
    width: auto;
    filter: saturate(.85);
}
#stripe-card-area { margin: 14px 0 4px; }
#stripe-card-area label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
}
#stripe-card-element {
    padding: 14px;
    border: 1px solid #d6d6dc;
    border-radius: 10px;
    background: #fafafb;
}
#stripe-card-errors {
    margin-top: 8px;
    color: #c33;
    font-size: .85rem;
    min-height: 1em;
}
.payment-card-empty {
    background: #faf3e6;
    border-left: 4px solid #d9a24a;
    color: #7a5818;
    padding: 14px 18px;
    border-radius: 10px;
}

/* Non-instant (request-only) explainer card */
.request-only-card {
    background: #faf3e6;
    border-left: 4px solid #d9a24a;
    color: #1a1a1a;
}
.request-only-card p {
    margin: 0 0 10px;
    font-size: .95rem;
    line-height: 1.55;
    color: #4b5563;
}
.request-only-card p:last-child { margin: 0; }
.request-only-card p strong { color: #1a1a1a; }
.payment-method-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
}
.payment-method-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .92rem;
    color: #4b5563;
    font-weight: 500;
}

/* === Phase 4 payment-method selector — radio cards ====================
   Each <label class="payment-method"> is a clickable card. The native
   radio input is visually hidden (still keyboard-accessible). Active
   state is keyed off `.is-selected` (toggled by the page JS). */
.payment-methods {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.payment-method {
    display: block;
    background: #fff;
    border: 1.5px solid #ececef;
    border-radius: 14px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.payment-method:hover { border-color: #d1d5db; }
.payment-method.is-selected {
    border-color: #d9a24a;
    background: #fff;
    box-shadow: 0 4px 14px rgba(217, 162, 74, .12);
}
.payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px; height: 1px;
}

.payment-method__head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.payment-method__radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid #d6d6dc;
    border-radius: 50%;
    background: #fff;
    position: relative;
    transition: border-color .15s;
}
.payment-method.is-selected .payment-method__radio {
    border-color: #d9a24a;
}
.payment-method.is-selected .payment-method__radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #d9a24a;
    border-radius: 50%;
}
.payment-method__title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}
.payment-method__icons {
    display: flex;
    gap: 8px;
    align-items: center;
}
.payment-method__icons img {
    height: 24px;
    width: auto;
    filter: saturate(.9);
}

/* The body (card form, redirect note, etc.) collapses to zero when the
   method isn't selected. Smooth transition via max-height. */
.payment-method__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, margin .15s ease, padding .15s ease;
}
.payment-method.is-selected .payment-method__body {
    max-height: 480px;
    margin-top: 16px;
}

/* Stripe Elements styling already lives on #stripe-card-element; just
   ensure the label underneath the radio head looks consistent. */
.payment-method__body #stripe-card-area label {
    margin-bottom: 8px;
}

/* ------- Terms checkbox (custom-styled) ------- */

.complete-booking {
    margin-top: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.terms-checkbox {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #fafafb;
    border-radius: 10px;
    border: 1px solid #f0f0f3;
}
.terms-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #d6d6dc;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: border-color .15s, background .15s;
}
.terms-checkbox input[type="checkbox"]:checked {
    background: #d9a24a;
    border-color: #d9a24a;
}
.terms-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.terms-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid #d9a24a;
    outline-offset: 2px;
}
.terms-checkbox label {
    font-size: .92rem;
    color: #374151;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}
.terms-checkbox label a {
    color: #d9a24a;
    font-weight: 600;
    text-decoration: none;
}
.terms-checkbox label a:hover { text-decoration: underline; }

/* ------- Confirm button ------- */

.btn-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 24px;
    background: #d9a24a;
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(217, 162, 74, .25);
    transition: background .15s, transform .15s, box-shadow .15s;
}
/* Request-to-book button has only the label (no amount badge). With
   `justify-content: space-between` and one child, the label sticks left.
   Center it instead so "Send Booking Request" reads balanced. */
.btn-confirm:not(:has(.btn-confirm__amount)) {
    justify-content: center;
}
.btn-confirm:hover:not(:disabled) {
    background: #f06d12;
    box-shadow: 0 6px 16px rgba(217, 162, 74, .25);
    transform: translateY(-1px);
}
.btn-confirm:disabled { background: #c5c8cf; cursor: not-allowed; box-shadow: none; }
.btn-confirm__label { font-weight: 600; }
.btn-confirm__amount {
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.checkout-inline-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: .9rem;
}
.checkout-inline-error[hidden] { display: none; }

/* ------- Right-column sticky summary card ------- */

.booking-sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
}

.summary-card {
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

.property-preview {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f3;
}
.property-preview img {
    width: 88px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
}
.property-info h3 {
    margin: 0 0 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    font-weight: 700;
    font-family: inherit;
}
.property-info p {
    margin: 0;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.policy-note {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f3;
}
.policy-note p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #6b7280;
}

.summary-section {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f3;
}
.summary-section:last-of-type { border-bottom: 0; }
.summary-section__title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    margin: 0 0 10px;
    font-weight: 700;
}

/* ------- Editable dates: NO overflow:hidden so the picker isn't clipped ------- */

.summary-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #d6d6dc;
    border-radius: 12px;
    background: #fff;
    /* IMPORTANT: leave overflow visible — Easepick mounts an absolutely-
       positioned popup inside this container and overflow:hidden clipped it. */
}
.summary-dates .date-box {
    padding: 12px 14px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #6b7280;
    position: relative;
    cursor: pointer;
}
.summary-dates .date-box:first-child {
    border-right: 1px solid #ececef;
    border-radius: 12px 0 0 12px;
}
.summary-dates .date-box:last-child {
    border-radius: 0 12px 12px 0;
}
.summary-dates .date-box:hover { background: #fafafb; }
/* Both halves use the same dark text. !important is required to beat the
   higher-specificity `input[data-vr-datepicker]:not([disabled]):not(.vr-datepicker-locked) { color: inherit; }`
   rule in vr-datepicker.css — without it, the check-in input inherits the
   grey caption color from .date-box and the two halves render in different shades. */
.summary-dates .date-box input,
.summary-dates input[data-vr-datepicker] {
    border: 0;
    background: transparent;
    width: 100%;
    margin-top: 4px;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 500;
    color: #111827 !important;
    padding: 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    outline: 0;
    user-select: none;
}
.summary-dates input::placeholder { color: #9ca3af; font-weight: 500; }
.summary-dates input::selection      { background: transparent; }
.summary-dates input::-moz-selection { background: transparent; }
/* Highlight the active half (the one whose picker is open) with the brand
   accent instead of the browser's default sky-blue band. */
.summary-dates .date-box:focus-within {
    background: #fff7f0;
    box-shadow: inset 0 0 0 1.5px #d9a24a;
}

/* Easepick popup must be allowed to escape the dates wrapper. */
.summary-dates,
.summary-card {
    overflow: visible;
}

/* Clear-dates button — sits flush right under the dates wrapper so guests
   immediately see how to reset and pick a new range. */
.summary-card .clear-dates-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #d6d6dc;
    border-radius: 999px;
    color: #4b5563;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.summary-card .clear-dates-btn::before { content: "✕"; font-size: .75rem; line-height: 1; }
.summary-card .clear-dates-btn:hover { border-color: #d9a24a; color: #d9a24a; }
.summary-card .clear-dates-btn[hidden] { display: none; }

/* Always-visible stay-limits hint below the dates */
.stay-limits-hint {
    margin: 8px 0 0;
    padding: 0;
    font-size: .8rem;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: .01em;
}

/* ------- Editable guests trigger / popover ------- */

.summary-card .guests-selector {
    position: relative;
    padding: 12px 14px;
    border: 1px solid #d6d6dc;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: background .15s;
}
.summary-card .guests-selector:hover { background: #fafafb; }
.summary-card .guests-trigger {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.summary-card .guests-trigger-label {
    font-size: .68rem;
    letter-spacing: .06em;
    color: #6b7280;
    font-weight: 700;
}
.summary-card .guests-trigger-value {
    margin-top: 4px;
    font-size: .98rem;
    color: #111827;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.summary-card .guests-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    z-index: 20;
}
.summary-card .guests-popover[hidden] { display: none; }

.summary-card .guests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f3;
}
.summary-card .guests-row:last-of-type { border-bottom: 0; }
.summary-card .guests-row__label strong {
    display: block;
    font-size: .98rem;
    color: #111827;
    font-weight: 600;
}
.summary-card .guests-row__label small {
    color: #6b7280;
    font-size: .82rem;
    font-weight: 400;
}

.summary-card .stepper { display: inline-flex; align-items: center; gap: 8px; }
.summary-card .stepper-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid #d6d6dc;
    background: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, color .15s;
}
.summary-card .stepper-btn:hover:not(:disabled) { border-color: #111827; }
.summary-card .stepper-btn:disabled { border-color: #ececef; color: #d1d5db; cursor: not-allowed; }
.summary-card .stepper-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.summary-card .guests-popover-close {
    margin-top: 10px;
    width: 100%;
    padding: 6px;
    background: transparent;
    border: 0;
    color: #d9a24a;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ------- Optional addon checkboxes ------- */

.summary-addon {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1.5px solid #ececef;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.summary-addon:hover { background: #fafafb; border-color: #d6d6dc; }
.summary-addon input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #d6d6dc;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
}
.summary-addon input[type="checkbox"]:checked {
    background: #d9a24a;
    border-color: #d9a24a;
}
.summary-addon input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.summary-addon__label {
    font-size: .94rem;
    color: #111827;
    font-weight: 500;
}
.summary-addon__rate {
    color: #6b7280;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
}
.summary-addon:has(input:checked) {
    background: #fff7f0;
    border-color: #d9a24a;
}

/* ------- Coupon ------- */

.summary-coupon summary {
    cursor: pointer;
    font-size: .9rem;
    color: #d9a24a;
    font-weight: 600;
    user-select: none;
    list-style: none;
    padding: 4px 0;
}
.summary-coupon summary::-webkit-details-marker { display: none; }
.summary-coupon summary::before {
    content: "+";
    display: inline-block;
    width: 1rem;
    color: #d9a24a;
    font-weight: 700;
}
.summary-coupon[open] summary::before { content: "−"; }

.summary-coupon__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 8px;
}
.summary-coupon__row[hidden] { display: none; }
.summary-coupon__row input {
    padding: 11px 14px;
    border: 1px solid #d6d6dc;
    border-radius: 10px;
    font: inherit;
    background: #fafafb;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .04em;
}
.summary-coupon__row input:focus {
    outline: 0;
    border-color: #d9a24a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(217, 162, 74, .15);
}
.summary-coupon__row button {
    padding: 11px 18px;
    background: #111827;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s;
}
.summary-coupon__row button:hover { background: #000; }
.summary-coupon__row button:disabled { background: #9ca3af; cursor: not-allowed; }

.summary-coupon__msg {
    margin-top: 8px;
    font-size: .85rem;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.4;
}
.summary-coupon__msg[hidden] { display: none; }
.summary-coupon__msg.is-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.summary-coupon__msg.is-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.summary-coupon__applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    margin-top: 8px;
    font-size: .9rem;
    color: #047857;
}
.summary-coupon__applied[hidden] { display: none; }
.summary-coupon__applied button {
    background: transparent;
    border: 0;
    color: #047857;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: .85rem;
    font-family: inherit;
}

/* ------- Price breakdown ------- */

.price-breakdown {
    padding: 14px 0 6px;
}
.price-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: .92rem;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
.price-row span:last-child { font-weight: 500; color: #111827; }
.price-row--discount { color: #047857 !important; font-weight: 600; }
.price-row--discount span:last-child { color: #047857; }

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1.5px solid #111827;
}
.total-label {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
}
.total-amount {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.installments-card {
    margin-top: 14px;
    padding: 12px 14px;
    background: #faf3e6;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    font-size: .88rem;
    color: #7a5818;
}
.installments-card ul { margin: 6px 0 0 18px; padding: 0; }

/* ------- Error path ------- */

.checkout-error-card {
    background: #fff;
    border: 1px solid #ececef;
    border-left: 4px solid #c33;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    color: #111827;
}
.checkout-error-card ul { margin: 10px 0 14px 1.25rem; padding: 0; }
.checkout-error-card a { color: #d9a24a; font-weight: 600; }

/* ------- Mobile tweaks ------- */

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .checkout-topbar { padding-top: 80px; padding-bottom: 20px; }
    .summary-card { padding: 18px; }
}

/* The booking-page body class no longer needs a parallax bg behind the
   layout — the topbar is contained. Remove the negative-margin pull from
   the previous iteration. */
body.booking-page main.booking-main { margin-top: 0; }

/* === Phase 5: Post-checkout status pages =================================
   Shared centred status-card layout used by payment-success / payment-failed /
   booking-confirmed / booking-request-received. The booking-page body class
   carries the same Inter/Montserrat fonts, dark-green nav and page bg so
   the post-checkout flow feels continuous with checkout itself. */

.status-page {
    /* Same nav-clearance reasoning as .confirmation-page above — booking-page
       nav is 96px and the status card was getting clipped behind it. */
    min-height: calc(100vh - var(--nav-h, 96px));
    padding: clamp(112px, 12vw, 144px) 16px clamp(40px, 8vw, 80px);
    display: flex;
    align-items: center;
}

.status-card {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
    text-align: center;
}

.status-icon {
    margin: 0 auto 24px;
    width: 80px; height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.status-icon svg { width: 40px; height: 40px; }
.status-icon--success { background: #ecfdf5; color: #047857; }
.status-icon--error   { background: #fef2f2; color: #dc2626; }
.status-icon--pending { background: #faf3e6; color: #d9a24a; }

.status-card h1 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.2;
}

.status-page__lead {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 480px;
}

.status-summary {
    background: #fafafb;
    border: 1px solid #ececef;
    border-radius: 12px;
    padding: 20px;
    margin: 0 0 24px;
    text-align: left;
}
.status-summary__property {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ececef;
}
.status-summary__property h3 {
    margin: 0;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
.status-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: .92rem;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}
.status-summary__row strong { color: #111827; font-weight: 600; }
.status-summary__row--total {
    border-top: 1px solid #ececef;
    padding-top: 12px;
    margin-top: 6px;
    font-size: 1rem;
}
.status-summary__row--total strong {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
}
.status-summary__id {
    margin-top: 12px;
    color: #9ca3af;
    font-size: .8rem;
    text-align: center;
}

.status-page__hint {
    color: #6b7280;
    font-size: .92rem;
    line-height: 1.5;
    margin: 0 auto 28px;
    max-width: 480px;
}

.status-page .btn-confirm {
    width: auto;
    min-width: 220px;
    display: inline-flex;
    margin: 0 auto;
}

.status-page__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.status-page__actions a.btn-secondary {
    padding: 16px 24px;
    background: #fff;
    color: #111827;
    border: 1.5px solid #d6d6dc;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.status-page__actions a.btn-secondary:hover {
    border-color: #111827;
    color: #000;
}

/* Detail rows used on the contact thank-you page (and any future status page
   that wants to show a couple of "key: value" lines between the hero copy
   and the action buttons). Two-line stacked rows on mobile; key on left /
   value on right at >480px. */
.status-page__details {
    margin: 18px auto 22px;
    max-width: 420px;
    background: #fafafb;
    border: 1px solid #ececef;
    border-radius: 12px;
    padding: 14px 18px;
    text-align: left;
}
.status-page__detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.status-page__detail-row + .status-page__detail-row {
    border-top: 1px solid #ececef;
}
.status-page__detail-label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}
.status-page__detail-value {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}

.status-page__support {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #ececef;
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
}
.status-page__support a {
    color: #d9a24a;
    text-decoration: none;
    font-weight: 600;
}
.status-page__support a:hover {
    text-decoration: underline;
}

/* === Contact thank-you extras ===========================================
   Adds the bits the contact thank-you page needs on top of the existing
   confirmation chrome (hero / cards / sidebar / kv-list / next-steps),
   so it can match the booking-confirmed polish without forking a copy. */

/* Quoted echo of the guest's message — soft warm panel with an orange-accent
   left rule, monospace-ish reading rhythm. */
.enquiry-quote {
    background: #faf3e6;
    border-left: 4px solid #d9a24a;
    color: #1f2937;
    font-size: 14.5px;
    line-height: 1.6;
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    margin: 4px 0 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.confirmation-meta--center {
    text-align: center;
}

/* "View property →" link inside the property-summary card. Pill-button style
   so it reads as an action, not body text. */
.property-summary__cta {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid #d6d6dc;
    border-radius: 999px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.property-summary__cta:hover {
    border-color: #d9a24a;
    color: #d9a24a;
    background: #faf3e6;
}

/* Reply-time meter on the sidebar: visual reassurance that we actually
   respond fast, instead of a static "2-4 hr" sentence. The bar is a
   gradient that animates in on load. */
.response-meter {
    margin: 18px 0 16px;
    padding: 14px 14px 12px;
    background: #fafafb;
    border: 1px solid #ececef;
    border-radius: 10px;
}
.response-meter__bar {
    height: 8px;
    background: #ececef;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.response-meter__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #d9a24a, #e6c07a);
    border-radius: 999px;
    animation: responseMeterGrow 1.1s cubic-bezier(.22,.9,.27,1) both;
    transform-origin: left;
}
@keyframes responseMeterGrow {
    from { width: 0 !important; }
    to   { /* width is set inline */ }
}
.response-meter__caption {
    margin-top: 8px;
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.4;
}
.response-meter__caption strong {
    color: #111827;
    font-size: 13px;
}

/* Tentative-dates pill on the contact thank-you sidebar — a two-column grid
   with a center arrow, mirroring the trip-grid pattern from booking-confirmed
   but tighter for narrow sidebars. Each cell stacks Label / Value / Year. */
.enquiry-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    background: linear-gradient(135deg, #faf3e6 0%, #fff 80%);
    border: 1px solid #e8c896;
    border-radius: 12px;
    padding: 14px 12px;
    margin: 4px 0 12px;
}
.enquiry-dates__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    min-width: 0;
}
.enquiry-dates__cell--full { grid-column: 1 / -1; }
.enquiry-dates__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #d9a24a;
}
.enquiry-dates__value {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
    white-space: nowrap;
}
.enquiry-dates__year {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}
.enquiry-dates__sep {
    color: #d9a24a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.enquiry-dates__nights {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    margin: 0 0 14px;
}

/* Stacked spec list (label-on-top, value-below). Used in the contact
   thank-you sidebar where a horizontal kv-list cramped the values. */
.spec-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border-top: 1px solid #ececef;
}
.spec-list__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid #ececef;
}
.spec-list__row:last-child { border-bottom: 0; }
.spec-list__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b7280;
}
.spec-list__value {
    font-size: 14.5px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}
.spec-list__value--mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: .02em;
    color: #d9a24a;
}
.spec-list__sub {
    font-weight: 500;
    color: #6b7280;
    font-size: 13px;
}

/* === Premium booking-confirmed layout =================================
   Used by booking-confirmed.blade.php — a 2-column transactional page
   (trip details + receipt) instead of the small status-card we use for
   payment-success / failed / request-received. */

.confirmation-page {
    /* Top padding has to clear the fixed `.nav` that sits at z-index:100.
       On `body.booking-page` the nav grows to 96px (booking-flow.css:1544),
       so anything below ~96px would let the hero icon + "You're booked" heading
       slip behind the header. Use a clamp that floors at 112px (96 + 16px breathing
       room) and scales up on wider viewports. Older value of clamp(28px,5vw,56px)
       caused the visible overlap. */
    padding: clamp(112px, 12vw, 144px) 16px clamp(48px, 8vw, 96px);
}
.confirmation-page .container { max-width: 1100px; }

.confirmation-hero {
    text-align: center;
    margin-bottom: clamp(24px, 4vw, 40px);
    padding: 0 16px;
}
.confirmation-hero .status-icon {
    margin-bottom: 18px;
    width: 72px; height: 72px;
}
.confirmation-hero .status-icon svg { width: 34px; height: 34px; }
.confirmation-hero h1 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.15;
}
.confirmation-hero__lead {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 600px;
    margin: 0 auto 16px;
}
.confirmation-hero__id {
    display: inline-block;
    padding: 5px 14px;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 999px;
    font-size: .82rem;
    color: #6b7280;
    letter-spacing: .04em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.confirmation-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 992px) {
    .confirmation-layout { grid-template-columns: 1fr; }
}

.confirmation-main { display: grid; gap: 16px; }

.confirmation-card {
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 16px;
    padding: clamp(20px, 3vw, 28px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.confirmation-card__title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 18px;
    letter-spacing: -.01em;
}

/* Property summary — image + name */
.property-summary {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f0f0f3;
}
.property-summary img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}
.property-summary__info h3 {
    margin: 0 0 4px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}
.property-summary__info p {
    margin: 0;
    color: #6b7280;
    font-size: .92rem;
}

/* Trip-detail 4-cell grid */
.trip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
@media (min-width: 600px) {
    .trip-grid { grid-template-columns: repeat(4, 1fr); }
}
.trip-grid__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trip-grid__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #9ca3af;
}
.trip-grid__cell strong {
    font-size: .98rem;
    color: #111827;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.trip-grid__cell small {
    font-size: .8rem;
    color: #6b7280;
}

/* Key-value list (guest info) */
.kv-list { margin: 0; padding: 0; }
.kv-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-row dt {
    color: #6b7280;
    font-size: .9rem;
    font-weight: 500;
    margin: 0;
}
.kv-row dd {
    color: #111827;
    font-size: .95rem;
    font-weight: 500;
    margin: 0;
    word-break: break-word;
}
@media (max-width: 600px) {
    .kv-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Numbered "what's next" list */
.next-steps {
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;
}
.next-steps li {
    counter-increment: step;
    position: relative;
    padding: 14px 0 14px 56px;
    border-bottom: 1px solid #f3f4f6;
}
.next-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.next-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #faf3e6;
    color: #d9a24a;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}
.next-steps li strong {
    display: block;
    color: #111827;
    margin: 0 0 4px;
    font-size: .98rem;
}
.next-steps li p {
    margin: 0;
    color: #4b5563;
    font-size: .92rem;
    line-height: 1.55;
}

.cancel-pill {
    display: inline-block;
    padding: 4px 12px;
    background: #faf3e6;
    color: #7a5818;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: .02em;
}
.confirmation-policy {
    color: #4b5563;
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
}

/* Help tiles */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.help-tile {
    display: block;
    padding: 14px 16px;
    background: #fafafb;
    border: 1px solid #ececef;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
    /* Long unbroken strings (email addresses, phone numbers, FAQ headlines)
       used to push past the 180px-min column width and visibly leak out the
       right side of the tile. Force them to wrap inside the tile. */
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.help-tile:hover { border-color: #d9a24a; background: #fff; }
.help-tile__label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 4px;
}
.help-tile strong {
    color: #111827;
    font-weight: 600;
    font-size: .92rem;
}

/* Receipt sidebar */
.confirmation-sidebar {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
}
@media (max-width: 992px) {
    .confirmation-sidebar { position: static; }
}

.receipt-card .receipt-row,
.receipt-card .receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.receipt-card .receipt-row {
    padding: 6px 0;
    font-size: .92rem;
    color: #4b5563;
}
.receipt-card .receipt-row span:last-child { color: #111827; font-weight: 500; }
.receipt-row--discount,
.receipt-row--discount span { color: #047857 !important; font-weight: 600; }

.receipt-total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px solid #111827;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}
.receipt-total span:last-child {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
}

.receipt-installments {
    margin-top: 16px;
    padding: 14px;
    background: #faf3e6;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    font-size: .88rem;
    color: #7a5818;
}
.receipt-installments strong { display: block; margin-bottom: 6px; }
.receipt-installments ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}
.receipt-installments li {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

.receipt-payment-method {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f0f0f3;
    color: #6b7280;
    font-size: .85rem;
    text-align: center;
}

.confirmation-cta { width: 100%; }

.confirmation-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    color: #111827;
    border: 1.5px solid #d6d6dc;
    border-radius: 12px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.confirmation-print:hover {
    border-color: #d9a24a;
    color: #d9a24a;
    background: #fff7f0;
}
.confirmation-print svg { flex-shrink: 0; }

/* === Print styles ===========================================================
   Strip away the screen chrome (nav, footer, back-button trap script effects,
   help tiles, hover backgrounds) and print just the booking summary + receipt
   so guests get a clean PDF or paper copy. */
@media print {
    /* Hide the site chrome that doesn't belong on a receipt. */
    header.nav,
    .checkout-topbar,
    footer.footer,
    .nav__toggle,
    .nav__cta,
    .confirmation-card--help,
    .next-steps,
    .confirmation-print,
    .confirmation-cta,
    .phpdebugbar,
    #phpdebugbar,
    button {
        display: none !important;
    }

    /* Page bg → white; remove decorative shadows for crisp print. */
    body, body.booking-page { background: #fff !important; color: #111 !important; }
    .booking-main, .confirmation-page { padding: 0 !important; }
    .confirmation-card,
    .summary-card,
    .receipt-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Stack sidebar below main on print so the receipt isn't cut off. */
    .confirmation-layout { display: block !important; grid-template-columns: 1fr !important; }
    .confirmation-sidebar { position: static !important; margin-top: 16px; }

    /* Hero is fine but trim the icon chrome. */
    .confirmation-hero .status-icon { display: none !important; }
    .confirmation-hero { padding: 0 !important; margin-bottom: 16px !important; }
    .confirmation-hero h1 { font-size: 1.6rem !important; }

    /* Force black text on print so the orange/grey palette doesn't disappear
       on a black-and-white printer. */
    .confirmation-hero__id,
    .trip-grid__cell strong,
    .receipt-total span,
    .total-amount {
        color: #000 !important;
    }

    a, a:visited { color: #000 !important; text-decoration: underline; }
}

/* ------- Nav fixes for booking/payment pages -------
   Booking/status pages use the same shared header markup as the public site.
   Keep their fixed header in the same light scrolled state visible on property
   pages instead of the older checkout-only dark bar. */
body.booking-page .nav {
    background: rgba(248,246,242,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ink);
    padding-block: 1.05rem;
    box-shadow: 0 1px 0 var(--line);
}

/* Standardised: logo is 56px site-wide and the nav is 80px with breathing
   room above and below. Booking-page used to grow the nav to 96px and shrink
   the logo to 72px — that drift caused visible "logo size differs across
   pages" between home, contact, and checkout. Both now match the global
   defaults in theme defaults. */

/* === Client theme bridge ====================================================
   Keep this sheet structural. The active client theme maps the base tokens
   (--body-font, --heading-font, --green, --gold, --cream, --text-*) so checkout,
   confirmation, and payment result pages follow the current frontend design. */
body.booking-page {
    --checkout-bg: var(--cream, #f7f7f8);
    --checkout-surface: var(--white, #fff);
    --checkout-surface-soft: var(--green-pale, #fafafb);
    --checkout-border: var(--cream-dk, #ececef);
    --checkout-text: var(--text-dark, #111827);
    --checkout-muted: var(--text-muted, #6b7280);
    --checkout-accent: var(--gold, var(--green, #d9a24a));
    --checkout-accent-strong: var(--gold-light, var(--gold, #d9a24a));
    --checkout-success: var(--green, #047857);
    background: var(--checkout-bg);
    color: var(--checkout-text);
    font-family: var(--body-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.checkout-topbar,
.status-card,
.checkout-card,
.payment-method,
.payment-method-fallback,
.summary-card,
.confirmation-card,
.confirmation-hero__id,
.confirmation-print,
.status-page__actions a.btn-secondary {
    background: var(--checkout-surface);
    border-color: var(--checkout-border);
    color: var(--checkout-text);
}

.checkout-topbar {
    padding: clamp(32px, 6vw, 64px) 0 28px;
}

.checkout-topbar__title h1,
.section-title,
.status-card h1,
.status-summary__property h3,
.status-summary__row--total strong,
.confirmation-hero h1,
.confirmation-card__title,
.property-summary__info h3,
.receipt-total span,
.total-amount {
    color: var(--checkout-text);
    font-family: var(--heading-font, var(--font-third, inherit));
}

.checkout-topbar__back,
.checkout-topbar__sub,
.form-group label,
.request-only-card p,
.payment-method-radio,
.status-page__lead,
.status-page__hint,
.status-summary__row,
.confirmation-hero__lead,
.confirmation-hero__id,
.property-summary__info p,
.receipt-payment-method {
    color: var(--checkout-muted);
}

.checkout-topbar__back:hover,
.checkout-error-card a,
.enquiry-dates__label,
.enquiry-dates__sep,
.confirmation-print:hover,
.status-page__actions a.btn-secondary:hover {
    color: var(--checkout-accent);
}

body.checkout-page-body #mainNav {
    background: #0b2820 !important;
    border-bottom: 1px solid rgba(217, 162, 74, .22);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

body.checkout-page-body .checkout-topbar {
    padding-top: calc(var(--nav-h, 80px) + 44px);
}

@media (max-width: 767px) {
    body.checkout-page-body .checkout-topbar {
        padding-top: calc(var(--nav-h, 80px) + 28px);
    }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.payment-method:hover,
.payment-method.is-selected,
.confirmation-print:hover,
.status-page__actions a.btn-secondary:hover {
    border-color: var(--checkout-accent);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-accent) 18%, transparent);
}

.status-summary,
.form-group input,
.form-group select,
.form-group textarea,
.form-group input[readonly] {
    background: var(--checkout-surface-soft);
}

.status-icon--success {
    background: color-mix(in srgb, var(--checkout-success) 12%, #fff);
    color: var(--checkout-success);
}

.status-icon--pending,
.payment-card-empty,
.request-only-card,
.enquiry-dates {
    background: color-mix(in srgb, var(--checkout-accent) 10%, #fff);
    border-color: color-mix(in srgb, var(--checkout-accent) 42%, #fff);
}

body.booking-page .nav {
    background: rgba(248,246,242,.94);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line);
}

/* Codex mobile hardening: checkout layout and mobile nav toggle */
@media (max-width: 767px) {
    body.booking-page,
    body.checkout-page-body {
        overflow-x: clip;
    }

    body.booking-page .nav__burger,
    body.checkout-page-body .nav__burger {
        display: flex !important;
        color: var(--ink) !important;
        border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important;
    }

    body.booking-page .nav__toggle,
    body.checkout-page-body .nav__toggle {
        color: var(--ink) !important;
        border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important;
    }

    body.booking-page .nav__burger span,
    body.booking-page .nav__burger i,
    body.checkout-page-body .nav__burger span,
    body.checkout-page-body .nav__burger i,
    body.booking-page .nav__toggle span,
    body.booking-page .nav__toggle i,
    body.checkout-page-body .nav__toggle span,
    body.checkout-page-body .nav__toggle i {
        color: var(--ink) !important;
        background-color: var(--ink) !important;
    }

    body.checkout-page-body .booking-main,
    body.checkout-page-body .checkout-topbar .container,
    body.checkout-page-body .booking-layout,
    body.checkout-page-body .checkout-sections,
    body.checkout-page-body .booking-sidebar,
    body.checkout-page-body .summary-card,
    body.checkout-page-body .checkout-card,
    body.checkout-page-body .complete-booking {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.checkout-page-body .booking-layout,
    body.checkout-page-body .checkout-sections,
    body.checkout-page-body .booking-sidebar,
    body.checkout-page-body .summary-card,
    body.checkout-page-body .checkout-card,
    body.checkout-page-body .summary-section,
    body.checkout-page-body .form-group,
    body.checkout-page-body .phone-input > *,
    body.checkout-page-body .price-row,
    body.checkout-page-body .price-row span,
    body.checkout-page-body .total-row,
    body.checkout-page-body .total-row > * {
        min-width: 0;
    }

    body.checkout-page-body .booking-main {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.checkout-page-body .form-row,
    body.checkout-page-body .phone-input,
    body.checkout-page-body .summary-dates,
    body.checkout-page-body .payment-method__head {
        grid-template-columns: 1fr;
    }

    body.checkout-page-body .payment-method__head,
    body.checkout-page-body .payment-method__icons {
        flex-wrap: wrap;
    }

    body.checkout-page-body .form-group input,
    body.checkout-page-body .form-group select,
    body.checkout-page-body .form-group textarea,
    body.checkout-page-body .summary-coupon__row input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.checkout-page-body .price-row,
    body.checkout-page-body .total-row {
        gap: 12px;
    }

    body.checkout-page-body .price-row span:first-child,
    body.checkout-page-body .total-label {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.checkout-page-body .price-row span:last-child,
    body.checkout-page-body .total-amount {
        flex: 0 0 auto;
        text-align: right;
    }
}