/*
 * Chill Zone booking page — site-specific token overrides.
 * Loaded after booking-flow.css; same-specificity rules win by source order.
 * Tokens mapped from chill-zone/src/styles/global.css.
 */

.beds24-booking-flow {
    /* Colors — sage green / cream / orange palette */
    --beds24-color-primary:       #d9824f;  /* accent orange — CTAs */
    --beds24-color-primary-text:  #FFFFFF;  /* white — text on orange */
    --beds24-color-accent:        #7a9b7e;  /* sage — secondary accents */
    --beds24-color-surface:       #FFFFFF;  /* white — cards */
    --beds24-color-surface-text:  #14180f;  /* ink — body text */
    --beds24-color-surface-muted: #2c3329;  /* ink-soft — secondary text */
    --beds24-color-border:        #dce3da;  /* line — hairline borders */
    --beds24-color-unavailable:   #b9c3b6;  /* line-dark */
    --beds24-color-error:         #c2703f;  /* accent-deep */
    --beds24-color-error-bg:      #f7f4ec;  /* cream */
    --beds24-color-error-border:  #dce3da;  /* line */

    /* Typography — single Lexend typeface */
    --beds24-font-family-body:    'Lexend Variable', 'Lexend', sans-serif;
    --beds24-font-family-heading: 'Lexend Variable', 'Lexend', sans-serif;
    --beds24-font-weight-body:    300;
    --beds24-font-weight-heading: 700;

    /* Borders — pill buttons, rounded cards */
    --beds24-border-radius:       40px;
    --beds24-border-radius-small: 18px;

    /* Shadows — soft, green-tinted, never hard black */
    --beds24-shadow-card:         0 30px 50px -28px rgba(58, 74, 60, .5);
    --beds24-shadow-floating:     0 -8px 24px -16px rgba(58, 74, 60, .4);
}

.beds24-room-card {
    border-radius: 18px;
    border: 1px solid #dce3da;
    box-shadow: 0 30px 50px -28px rgba(58, 74, 60, .5);
}

.beds24-room-card:hover {
    box-shadow: 0 30px 50px -24px rgba(58, 74, 60, .6);
}

.beds24-room-card--selected {
    border-color: #d9824f;
    box-shadow: 0 0 0 2px #d9824f, 0 30px 50px -28px rgba(58, 74, 60, .5);
}

.beds24-room-card__type-bar {
    border-radius: 0;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 600;
}

.beds24-room-card__photo img {
    border-radius: 14px;
}

.beds24-room-card__tag {
    border-radius: 30px;
    background-color: #e6ede4;
    border: 1px solid #dce3da;
    color: #14180f;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    font-weight: 500;
}

.beds24-search-form {
    border-radius: 18px;
    border: 1px solid #dce3da;
    box-shadow: 0 4px 12px -2px rgba(58, 74, 60, .12);
    background-color: #FFFFFF;
}

.beds24-search-form__label {
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #566f59;
}

.beds24-search-form__check-in,
.beds24-search-form__check-out,
.beds24-search-form__adults {
    border-radius: 40px;
    border: 1px solid #dce3da;
    background-color: #f7f4ec;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
}

.beds24-search-form__check-in:focus,
.beds24-search-form__check-out:focus,
.beds24-search-form__adults:focus {
    border-color: #d9824f;
    outline-color: #d9824f;
    box-shadow: 0 0 0 2px rgba(217, 130, 79, .3);
}

.beds24-search-form__submit {
    border-radius: 40px;
    border: none;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    box-shadow: 0 8px 18px -6px rgba(217, 130, 79, .7);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.beds24-search-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(217, 130, 79, .8);
    opacity: 1;
}

.beds24-cart {
    border-radius: 18px;
    border: 1px solid #dce3da;
    box-shadow: 0 4px 12px -2px rgba(58, 74, 60, .12);
}

.beds24-cart__confirm-button {
    border-radius: 40px;
    border: none;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px -4px rgba(217, 130, 79, .5);
}

.beds24-room-card__qty-btn {
    border-radius: 40px;
    border: 1px solid #dce3da;
}

.beds24-room-card__cart-btn {
    border-radius: 40px;
    border: none;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(217, 130, 79, .5);
}

.beds24-room-card__cart-btn--in-cart {
    border: 1px solid #dce3da;
    box-shadow: none;
}

.beds24-room-card__offer {
    border-top: 1px solid #dce3da;
}

/* ==========================================================================
   Confirmation step — Beds24 booking iframe
   Card treatment matching .beds24-search-form / .beds24-cart: cream paper
   surface, 1px line border, --r-card radius, soft green-tinted shadow,
   centered 760px column. The wrapper grows with the fixed-height iframe so
   the Beds24-internal Comodo badge is never clipped by this container.
   ========================================================================== */

.beds24-booking-iframe-wrapper {
    background-color: #f7f4ec;        /* --cream — card surface */
    border: 1px solid #dce3da;        /* --line — hairline border */
    border-radius: 18px;              /* --r-card */
    box-shadow: 0 30px 50px -28px rgba(58, 74, 60, .5);  /* --shadow-card */
    padding: 24px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Defense-in-depth: the wrapper is revealed only by JS (Confirm Booking).
   Matches the cart/results [hidden] pattern so a stray display rule can
   never leak the confirmation card before a booking is confirmed. */
.beds24-booking-iframe-wrapper[hidden] {
    display: none !important;
}

.beds24-booking-iframe-nav {
    padding-bottom: 16px;
}

/* Back button — CZ button language (btn-dark variant, DESIGN_SYSTEM §2):
   transparent pill, 1.5px line-dark border, ink text; hover flips border
   and text to sage, lifts -2px per the site-wide button personality rule.
   Non-CTA, so ink/sage only — no orange. */
.beds24-booking-iframe-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #b9c3b6;      /* --line-dark */
    border-radius: 40px;              /* --r-button */
    background: transparent;
    color: #14180f;                   /* --ink */
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease,
        color 120ms ease;
}

.beds24-booking-iframe-nav__back:hover {
    transform: translateY(-2px);
    border-color: #7a9b7e;            /* --sage */
    color: #566f59;                   /* --sage-deep */
    text-decoration: none;
}

.beds24-booking-iframe-nav__back:focus-visible {
    outline: 2px solid #7a9b7e;       /* --sage — non-CTA focus */
    outline-offset: 2px;
}

/* Step heading — Lexend 700, ink, sized for an in-flow step heading
   inside the 760px card. */
.beds24-booking-iframe-heading {
    margin: 0 0 16px;
    font-family: 'Lexend Variable', 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #14180f;                   /* --ink */
}

/* Sage accent word within the heading — mirrors the site's em-accent
   pattern (index.astro intro: em rendered sage-deep, not italic). */
.beds24-booking-iframe-heading__accent {
    font-style: normal;
    color: #566f59;                   /* --sage-deep */
}

@media (max-width: 767px) {
    .beds24-cart {
        border-top: 1px solid #dce3da;
        box-shadow: 0 -8px 24px -16px rgba(58, 74, 60, .4);
    }

    .beds24-booking-iframe-wrapper {
        padding: 16px;
    }

    .beds24-booking-iframe-heading {
        font-size: 24px;
    }
}

@media (min-width: 768px) {
    .beds24-cart {
        border-top: 1px solid #dce3da;
        box-shadow: 0 -8px 24px -16px rgba(58, 74, 60, .4);
    }
}

/* ==========================================================================
   Layout integration — site mobile bottom nav vs cart bar
   CZ's BottomNav (.botnav, fixed bottom, z-index 70) stays visible at
   <=900px. The booking cart bar (fixed bottom, z-index 1000) must sit ABOVE
   it, never covering it. The nav's measured rendered height is 78px in
   Chromium, but its tallest visual element is the raised orange Book tab:
   the tab box sits 69px above the viewport bottom and its icon circle
   (margin-top: -22px) pokes above the nav's top border to 85px (measured
   84.9px at 320/390/768/900px once Lexend loads; up to ~91px with the
   fallback font before load). The previous 78px offset let the cart's
   bottom border touch that raised circle. 92px clears it at every width in
   the 320-900px range. The plain `bottom: 92px` declaration before
   the env() calc is the fallback for browsers without env() support (they
   would otherwise drop the whole declaration and leave the cart at the
   module's bottom: 0, covering the nav). env(safe-area-inset-bottom) then
   mirrors the More sheet's positioning so the cart stays clear of the nav on
   notched devices, where the nav grows by the safe-area inset. The offset
   covers the whole range where the nav is visible — both the <=767px mobile
   bar and the >=768px desktop sticky bar (which would otherwise cover the
   nav in the 768-900px overlap). Above 900px the nav is display: none and
   the module's bottom: 0 applies unchanged. No :has() hide rule: the nav
   stays visible per the operator decision. booking-flow.js's
   syncBottomPadding adds body padding = barHeight + 16; the site footer's
   own 96px bottom padding (<=900px) clears the nav, so nothing is covered
   or double-padded.
   ========================================================================== */

@media (max-width: 900px) {
    .beds24-booking-flow {
        padding-inline: 18px;
    }

    .beds24-cart {
        bottom: 92px;
        bottom: calc(92px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   Iframe height — per-site override of the shared 2200px default.
   DECISION 2026-08-06 (revised): the first step after Confirm Booking is
   the CHECKOUT form (guest details), not the rooms list. buildBookingUrl
   preselects the room (sr1-<room>=1&naa1-1-<room>=1), so Beds24 renders
   #bookingpage.bp2book immediately and never shows the rooms list. The
   rooms list is not reachable: Beds24's back links (.book_bookingback,
   .book_bookingbackright) are hidden in beds24-custom.css and our own
   "Back to rooms" button closes the iframe entirely. Heights are sized
   to the CLEAN checkout step + ~40px, not the error state: the operator
   reported ~400px of dead space below the powered-by footer in the
   normal (error-free) view after sizing to the tallest error state.
   Re-measured live 2026-08-06 (propid 271142, room 567218, clean
   checkout 2026-08-24 → 08-26; measured with the powered-by footer
   bottom as the content height, NOT documentElement.scrollHeight —
   Beds24 clamps html/body to its own content height, and the property
   photo row is hidden by beds24-custom.css so the measurement matches
   production, not the unstyled/unhidden state). Earlier values
   (942px/1468px) were taken at the full 1264px/374px content column
   with NO wrapper card; the wrapper narrows the iframe below Beds24's
   768px col-sm breakpoint (710px desktop), stacking the checkout one
   column and making the content much taller — the old desktop value
   caused an inner scrollbar (the double-scroll bug) and the old mobile
   value was a few px short at 390px. Clean heights by iframe width:
   710px (desktop wrapper) 1091px; 396px (430px phone) 1167px; 356px
   (390px) 1167px; 326px (360px) 1190px; 286px (320px) 1219px. 1131px
   = 1091px + 40px — zero dead space below the powered-by footer at
   desktop. The ≤767px value must cover the TALLEST phone content,
   which is at the NARROWEST width (320px → 1219px; the form stacks
   and grows as the column narrows): 1259px = 1219px + 40px, no
   internal scrollbar at 320/360/390/430 (dead space 92-40px across
   the phone range is deliberate: the no-scrollbar requirement wins
   over zero dead space on mobile). The error state (+~400px) and
   extra-room states scroll INSIDE the iframe; verified 2026-08-06
   that the Confirm button and Comodo badge stay reachable via that
   internal scroll and nothing clips. Breakpoint 767px matches
   Beds24's col-sm stacking (768px+ stays two-column, fits the
   desktop height).
   ========================================================================== */

.beds24-booking-iframe {
    height: 1131px;
}

@media (max-width: 767px) {
    .beds24-booking-iframe {
        height: 1259px;
    }
}