/* =============================================================================
   Rimal booking page — premium redesign (ADDITIVE stylesheet)
   -----------------------------------------------------------------------------
   Loaded via @stack('head') AFTER the bundled app.css, so these rules win at
   equal specificity. Scope is guarded by .booking-page (added to the <section>)
   so nothing here leaks to the rest of the site.

   What this does:
     - widens + centers the booking container (max 1280px)
     - 2-column layout: left ~68% white/ivory surface, right ~32% sticky summary
     - larger, serif step titles with clay number badges
     - enlarged calendar with clearer selected/hover/unavailable states
     - stronger vertical 3-step indicator inside the summary
     - single premium primary CTA in the summary (clay .button)
       * on steps 1-2 the in-form advance buttons are demoted to ghost/secondary
       * on step 3 (final) the no-op sidebar CTA is hidden and the in-form
         submit is promoted to the single primary (so the form still submits)
     - removes the huge .section-shell bottom padding (kills the empty gap)
     - soft hero→booking transition (ivory panel, rounded top, gentle overlap)
     - responsive: 2-col on desktop/tablet, single column + full-width on mobile

   What this does NOT touch: booking.js logic, prices, availability, capacity,
   validation, reservation flow, routes, homepage quick-booking component.
   ========================================================================== */

.booking-page,
.booking-page *,
.booking-page *::before,
.booking-page *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Container — width, centering, soft panel, reduced vertical gap
   -------------------------------------------------------------------------- */
.booking-shell.section-shell {
    width: min(1280px, 100%);
    max-width: 1280px;
    margin-inline: auto;
    /* top: modest; sides: gutter; bottom: 100-140px (was up to 192px) */
    padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(6.25rem, 9vw, 8.75rem);
    /* soft hero→booking shift: ivory panel, rounded top, gentle lift over hero */
    background: linear-gradient(180deg, var(--warm-white) 0%, var(--ivory) 100%);
    border-radius: 1.75rem 1.75rem 0 0;
    box-shadow: 0 -1.5rem 4rem -2.5rem rgba(21, 22, 18, 0.28);
    position: relative;
    z-index: 3;
    margin-top: -2rem;
    gap: clamp(2.5rem, 4vw, 4rem);
}

/* Desktop: a comfortable main form and a readable 360–400px summary rail. */
@media (min-width: 1100px) {
    .booking-shell.section-shell {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    }
    .booking-summary {
        top: calc(var(--header-height) + 1.75rem);
    }
}

/* Tablet: the summary moves below the form instead of being squeezed. */
@media (min-width: 769px) and (max-width: 1099px) {
    .booking-shell.section-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .booking-summary {
        position: static;
    }
}
.booking-shell__main,
.booking-journey {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Left surface — clean white/ivory card, larger typography
   -------------------------------------------------------------------------- */
.booking-form {
    background: var(--warm-white);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: clamp(1.75rem, 3.25vw, 3rem);
    box-shadow: 0 1.5rem 3.5rem -2.5rem rgba(21, 22, 18, 0.22);
    font-size: 1rem;
    line-height: 1.6;
}

/* Step titles: serif heading + clay number badge */
.booking-step legend {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.9vw, 1.45rem);
    line-height: 1.15;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
}
.booking-step legend > span:first-child {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: var(--clay);
    color: var(--warm-white);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.booking-step legend > span:not(:first-child) {
    font: inherit;
    color: inherit;
}
.booking-step > p {
    color: var(--taupe);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   3. Date fields — two equal visible fields
   -------------------------------------------------------------------------- */
.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: end;
}
.form-grid > * {
    min-width: 0;
}
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--taupe);
    font-weight: 600;
}
.form-grid label.wide {
    grid-column: 1 / -1;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    min-height: 3.85rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--charcoal);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 0 1rem;
}
.form-grid textarea {
    min-height: 8rem;
    padding: 0.85rem 1rem;
    line-height: 1.5;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    outline: none;
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(138, 73, 55, 0.14);
}
.date-field input {
    cursor: pointer;
}
.consent-field {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--charcoal);
    font-size: 0.9rem;
}
.consent-field input {
    width: auto;
    min-height: 0;
    margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   4. Calendar — significantly enlarged, clearer states
   -------------------------------------------------------------------------- */
.calendar {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--white);
    margin-top: 1.5rem;
}
.calendar__head {
    margin-bottom: 1rem;
}
.calendar__month {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--charcoal);
}
.calendar__nav {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--warm-white);
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.calendar__nav:hover {
    background: var(--clay);
    color: var(--warm-white);
    border-color: var(--clay);
}
.calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.calendar__weekdays span {
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--taupe);
    padding: 0.25rem 0;
}
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
}
.calendar__day {
    aspect-ratio: 1;
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    border-radius: 0.6rem;
    border: 1px solid transparent;
    background: var(--warm-white);
    color: var(--charcoal);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.calendar__day:not(:disabled):hover {
    background: var(--sand);
    border-color: var(--limestone);
}
.calendar__day:not(:disabled):focus-visible {
    outline: none;
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(138, 73, 55, 0.18);
}
.calendar__day.is-start,
.calendar__day.is-end {
    background: var(--clay);
    color: var(--warm-white);
    font-weight: 600;
}
.calendar__day.is-between {
    background: var(--sand);
    color: var(--charcoal);
}
.calendar__day:disabled {
    color: var(--taupe);
    opacity: 0.55;
    text-decoration: line-through;
    cursor: not-allowed;
    background: transparent;
}

/* --------------------------------------------------------------------------
   5. Journey indicator — compact, quiet and clearly active
   -------------------------------------------------------------------------- */
.booking-journey > .eyebrow {
    margin: 0 0 1rem;
    color: var(--clay);
}
.booking-progress {
    display: grid;
    gap: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}
.booking-progress li {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.35rem 0;
    border: 0;
    color: var(--taupe);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.25;
    text-transform: uppercase;
}
.booking-progress li:not(:last-child)::after {
    position: absolute;
    inset-block: 2.35rem -0.35rem;
    inset-inline-start: 0.97rem;
    width: 1px;
    background: rgba(150, 139, 122, 0.28);
    content: '';
}
.booking-progress li > span:first-child {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(150, 139, 122, 0.28);
    border-radius: 50%;
    background: var(--sand);
    color: var(--taupe);
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}
.booking-progress li > span:last-child {
    min-width: 0;
    font-size: inherit;
}
.booking-progress li.is-active {
    color: var(--charcoal);
}
.booking-progress li.is-active > span:first-child {
    border-color: var(--clay);
    background: var(--clay);
    color: var(--warm-white);
}

/* --------------------------------------------------------------------------
   6. Booking summary — one calm, scan-friendly information card
   -------------------------------------------------------------------------- */
.booking-summary__panel {
    min-width: 0;
    margin-top: 0;
    padding: clamp(2rem, 2.7vw, 2.25rem);
    border: 1px solid rgba(150, 139, 122, 0.3);
    border-radius: 1.625rem;
    background: var(--warm-white);
    box-shadow: 0 1.25rem 2.75rem -2.4rem rgba(21, 22, 18, 0.28);
}
.booking-summary__panel h2 {
    margin: 0 0 1.5rem;
    color: var(--charcoal);
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    line-height: 1.15;
}
.booking-summary__dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 1.25rem 0;
    border-block: 1px solid var(--line);
}
.booking-summary__date {
    min-width: 0;
}
.booking-summary__date + .booking-summary__date {
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--line);
}
.booking-summary__date--departure {
    grid-column: 1 / -1;
    padding-inline-start: 0 !important;
    border-inline-start: 0 !important;
}
.booking-summary__dates dt {
    margin: 0 0 0.4rem;
    color: var(--taupe);
    font-size: 0.61rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    line-height: 1.25;
    text-transform: uppercase;
}
.booking-summary__dates dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--charcoal);
    font-family: var(--font-serif);
    font-size: clamp(0.86rem, 1vw, 1rem);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1.3;
}
.booking-summary__date--nights dd {
    color: var(--clay);
    font-size: 1.25rem;
}
.booking-summary__suites {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.booking-summary__suite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto);
    align-items: start;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(150, 139, 122, 0.18);
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--ivory) 75%, var(--warm-white));
}
.booking-summary__suite-details,
.booking-summary__suite-pricing {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}
.booking-summary__suite-details strong,
.booking-summary__suite-pricing strong {
    color: var(--charcoal);
    font-size: 0.91rem;
    font-weight: 650;
    line-height: 1.35;
}
.booking-summary__suite-details small,
.booking-summary__suite-pricing small {
    color: #6f6d65;
    font-size: 0.76rem;
    line-height: 1.4;
}
.booking-summary__suite-pricing {
    justify-items: end;
    text-align: end;
}
.booking-summary__suite-pricing strong {
    font-family: var(--font-serif);
    font-size: 1rem;
}
.booking-summary__breakfast {
    margin: 0 0 0.45rem;
    color: var(--olive);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.45;
}
.booking-summary__notice {
    margin: 0 0 1.5rem;
    color: #6f6d65;
    font-size: 0.875rem;
    line-height: 1.6;
}
.booking-summary__total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    min-width: 0;
    margin: 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line);
}
.booking-summary__total span {
    color: var(--charcoal);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.booking-summary__total strong {
    min-width: 0;
    color: var(--clay);
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 2.5vw, 2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1.05;
    text-align: end;
    white-space: nowrap;
}
.booking-summary__cta {
    width: 100%;
    min-height: 3.5rem;
    max-height: 3.625rem;
    justify-content: space-between;
    margin-top: 1.4rem;
    padding-inline: 1.5rem 1rem;
    color: var(--warm-white);
    white-space: nowrap;
}
.booking-summary__note {
    margin: 0.85rem 0 0;
    color: #7a786f;
    font-size: 0.75rem;
    line-height: 1.55;
    text-align: start;
}
.booking-summary__enquiry {
    margin: 0.85rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(138, 73, 55, 0.14);
    border-radius: 0.875rem;
    background: rgba(138, 73, 55, 0.055);
    color: #6f625a;
    font-size: 0.78rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   7. CTA strategy — ONE premium primary in the summary; in-form demoted
   -------------------------------------------------------------------------- */
/* In-form advance/submit buttons become ghost/secondary (no competing primary) */
.booking-step__actions {
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.booking-step__actions .button {
    background: transparent;
    color: var(--clay);
    border: 1px solid var(--clay);
}
.booking-step__actions .button:hover {
    background: var(--clay);
    color: var(--warm-white);
}
.booking-step__actions .text-button {
    color: var(--taupe);
}

/* Keep the summary CTA visible: booking.js advances on steps 1–2 and submits on 3. */
.booking-page:has(.booking-step[data-booking-step="3"].is-active)
    .booking-step[data-booking-step="3"]
    .booking-step__actions
    .button[data-submit-standard] {
    background: var(--clay);
    color: var(--warm-white);
    border-color: var(--clay);
}
.booking-page:has(.booking-step[data-booking-step="3"].is-active)
    .booking-step[data-booking-step="3"]
    .booking-step__actions
    .button[data-submit-standard]:hover {
    background: #763b2c;
    border-color: #763b2c;
}

/* Submit loading state */
.button[aria-busy="true"] {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Mobile — single column, full-width controls, no sticky sidebar
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .booking-shell.section-shell {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 0;
        padding: clamp(2rem, 6vw, 2.5rem) 1.25rem clamp(7rem, 16vw, 9rem);
        border-radius: 1.25rem 1.25rem 0 0;
    }
    .booking-form {
        padding: 1.5rem;
        border-radius: 1rem;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .booking-step legend {
        font-size: 1.3rem;
        gap: 0.7rem;
    }
    .booking-step legend > span:first-child {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 0.75rem;
    }
    /* The form controls remain full-width and the summary follows below. */
    .booking-step__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        margin-top: 1.75rem;
    }
    .booking-step__actions .button {
        width: 100%;
        min-height: 3.4rem;
        background: var(--clay);
        color: var(--warm-white);
        border-color: var(--clay);
        white-space: nowrap;
    }
    .booking-step__actions .button:hover {
        background: #763b2c;
        border-color: #763b2c;
    }
    .booking-step__actions .text-button {
        align-self: flex-start;
        order: -1;
        color: var(--taupe);
    }
    .calendar__day {
        font-size: 0.95rem;
    }
    .booking-page .booking-summary {
        position: static;
        display: block;
        min-width: 0;
    }
    .booking-summary__panel {
        padding: 1.5rem;
        border-radius: 1.35rem;
    }
    .booking-summary__dates {
        gap: 0.6rem;
    }
    .booking-summary__date + .booking-summary__date {
        padding-inline-start: 0.6rem;
    }
    .booking-summary__suite {
        grid-template-columns: minmax(0, 1fr) minmax(7.5rem, auto);
        gap: 0.75rem;
        padding: 0.9rem;
    }
    .booking-summary__total strong {
        font-size: 1.75rem;
    }
    .booking-summary__cta {
        min-height: 3.4rem;
        max-height: 3.5rem;
        padding-inline: 1.25rem 0.9rem;
        font-size: 0.67rem;
    }
    .booking-page + .booking-mobilebar {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .booking-summary__dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-summary__date--nights {
        grid-column: 1 / -1;
        padding: 0.85rem 0 0 !important;
        border-inline-start: 0 !important;
        border-top: 1px solid var(--line);
    }
    .booking-summary__suite {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .booking-summary__suite-pricing {
        max-width: 8rem;
    }
    .booking-summary__total {
        gap: 0.65rem;
    }
    .booking-summary__total strong {
        font-size: 1.55rem;
    }
    .booking-summary__cta {
        font-size: 0.63rem;
        letter-spacing: 0.1em;
    }
}