/* === Joe Chapin 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-jc-datepicker]:not([disabled]):not(.jc-datepicker-locked) { color: inherit; }`
   rule in jc-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-jc-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 (joe-chapin-checkout.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 the checkout page -------
   The site-wide .nav is `position: fixed` with NO background by default and
   only solidifies (gets a dark green bg) once .scrolled is added by JS on
   scroll. On the new white checkout topbar that means the nav text is
   white-on-white at page load. Force the solid state from the start
   whenever body.booking-page is set. */
body.booking-page .nav {
    background: #0b2820;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

/* 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 joe-chapin-style.css. */