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

.beds24-booking-flow {
    /* Colors — warm cream / coral / teal beach palette */
    --beds24-color-primary:       #FF5E3A;  /* coral — CTAs, primary actions */
    --beds24-color-primary-text:  #FFFFFF;  /* white — text on coral */
    --beds24-color-accent:        #1B7A7A;  /* teal — secondary accents, tags */
    --beds24-color-surface:       #FFFFFF;  /* white — cards, polaroid frames */
    --beds24-color-surface-text:  #2A1A14;  /* dark — body text */
    --beds24-color-surface-muted: rgba(42, 26, 20, 0.6);  /* dark at 60% — secondary text */
    --beds24-color-border:        rgba(42, 26, 20, 0.1);  /* dark at 10% — light borders */
    --beds24-color-unavailable:   rgba(42, 26, 20, 0.35); /* dark at 35% */
    --beds24-color-error:         #FF5E3A;  /* coral */
    --beds24-color-error-bg:      #FFF4D6;  /* cream */
    --beds24-color-error-border:  #FF5E3A;  /* coral */

    /* Typography — Archivo headings, Nunito body */
    --beds24-font-family-body:    'Nunito', sans-serif;
    --beds24-font-family-heading: 'Archivo', sans-serif;
    --beds24-font-weight-body:    400;
    --beds24-font-weight-heading: 700;

    /* Borders — angular 3px default */
    --beds24-border-radius:       3px;
    --beds24-border-radius-small: 2px;

    /* Shadows — polaroid style */
    --beds24-shadow-card:         2px 5px 20px rgba(0, 0, 0, 0.18);
    --beds24-shadow-floating:     0 -4px 16px rgba(0, 0, 0, 0.12);
}

.beds24-room-card {
    border: 2.5px solid #2A1A14;
    border-radius: 3px;
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.18);
}

.beds24-room-card:hover {
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.22);
}

.beds24-room-card--selected {
    border-color: #FF5E3A;
    box-shadow: 0 0 0 2px #FF5E3A, 2px 5px 20px rgba(0, 0, 0, 0.18);
}

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

.beds24-room-card__type-bar--shared {
    background-color: #EAF3DE;
    color: #3B6D11;
}

.beds24-room-card__type-bar--private {
    background-color: #E6F1FB;
    color: #185FA5;
}

.beds24-room-card__photo img {
    border-radius: 0;
    border: 2px solid #2A1A14;
}

.beds24-room-card__tag {
    border-radius: 2px;
    background-color: rgba(27, 122, 122, 0.1);
    border: 1px solid rgba(27, 122, 122, 0.3);
    color: #1B7A7A;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.625rem;
}

.beds24-search-form {
    border: 2.5px solid #2A1A14;
    border-radius: 3px;
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.18);
    background-color: #FFFFFF;
}

.beds24-search-form__label {
    font-family: 'Archivo', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(42, 26, 20, 0.6);
}

.beds24-search-form__check-in,
.beds24-search-form__check-out,
.beds24-search-form__adults {
    border-radius: 3px;
    border: 2px solid rgba(42, 26, 20, 0.1);
    background-color: #FFF4D6;
    font-family: 'Nunito', sans-serif;
}

.beds24-search-form__check-in:focus,
.beds24-search-form__check-out:focus,
.beds24-search-form__adults:focus {
    border-color: #FF5E3A;
    outline-color: #FF5E3A;
    box-shadow: 0 0 0 2px rgba(255, 94, 58, 0.2);
}

.beds24-search-form__submit {
    border-radius: 3px;
    border: 2.5px solid #2A1A14;
    box-shadow: 3px 3px 0 0 #2A1A14;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.875rem;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.beds24-search-form__submit:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 #2A1A14;
    opacity: 1;
}

.beds24-cart {
    border: 2.5px solid #2A1A14;
    border-radius: 3px;
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.18);
}

.beds24-cart__confirm-button {
    border-radius: 3px;
    border: 2.5px solid #2A1A14;
    box-shadow: 2px 2px 0 0 #2A1A14;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.beds24-room-card__qty-btn {
    border-radius: 3px;
    border: 1.5px solid rgba(42, 26, 20, 0.1);
}

.beds24-room-card__cart-btn {
    border-radius: 3px;
    border: 2px solid #2A1A14;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.beds24-room-card__cart-btn--in-cart {
    border-color: rgba(42, 26, 20, 0.1);
}

.beds24-room-card__offer {
    border-top: 1px solid rgba(42, 26, 20, 0.08);
}

/* ==========================================================================
   Confirmation step — Beds24 booking iframe
   Card treatment matching .beds24-search-form / .beds24-cart: warm cream
   surface, ~2.5px ink border, 3px radius, soft polaroid 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: #FFF4D6;
    border: 2.5px solid #2A1A14;
    border-radius: 3px;
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.18);
    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 — Seaside button language: coral fill (the site's primary
   CTA color per the design system's colored-fill variant), ~2.5px ink
   border, 3px radius, hard offset shadow; hover shifts the offset shadow
   like the booking flow's other buttons and nudges opacity like the
   site's nav CTA. */
.beds24-booking-iframe-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2.5px solid #2A1A14;
    border-radius: 3px;
    background-color: #FF5E3A;
    color: #FFFFFF;
    box-shadow: 3px 3px 0 0 #2A1A14;
    font-family: 'Archivo', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.beds24-booking-iframe-nav__back:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 #2A1A14;
    opacity: 0.88;
    text-decoration: none;
}

.beds24-booking-iframe-nav__back:focus-visible {
    outline: 2px solid #2A1A14;
    outline-offset: 2px;
}

/* Step heading — Archivo 900 uppercase, ink, sized for an in-flow step
   heading inside the 760px card. */
.beds24-booking-iframe-heading {
    margin: 0 0 16px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 28px;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #2A1A14;
}

/* Coral accent word within the heading — mirrors the site's accent
   headline word treatment (rooms.astro "Ready to / Book?"). */
.beds24-booking-iframe-heading__accent {
    color: #FF5E3A;
}

@media (max-width: 767px) {
    .beds24-cart {
        border-top: 2.5px solid #2A1A14;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }

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

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

@media (min-width: 768px) {
    .beds24-cart {
        border-top: 2.5px solid #2A1A14;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }
}

/* ==========================================================================
   Layout integration — site mobile sticky CTA vs cart mobile bar
   The site's mobile sticky CTA (.sticky-cta) and the cart bar (fixed
   bottom, z-index 1000, <=767px) both anchor to the viewport bottom.
   The cart bar renders ON TOP of the sticky CTA, covering its "Book a
   Bed" CTA. Hide the sticky CTA while the cart is visible — the cart's
   confirm bar replaces it functionally. JS toggles the [hidden]
   attribute on the cart. Same breakpoint as the site's other mobile
   bottom-bar rules (<=768px).
   NOTE: .sticky-cta is currently parked site-wide — its only rule in
   Layout.astro is `display: none` — so this rule is an inert safety
   net guarding a future re-enable, not a live behavior.
   ========================================================================== */

@media (max-width: 768px) {
    body:has(.beds24-cart:not([hidden])) .sticky-cta {
        display: none;
    }
}

/* ==========================================================================
   Layout integration — cart above the site's mobile bottom nav
   The site's .site-nav is a fixed bottom bar at <=768px (height 55px,
   box-sizing: border-box, z-index 200). The booking cart bar (fixed bottom,
   z-index 1000) must sit ABOVE it, never covering it. This override raises
   the cart by the nav's rendered height (55px in Chromium at 320-768px; the
   nav sets no safe-area inset of its own, so none is added). The <=768px
   breakpoint also covers the exact 768px overlap, where the nav is still
   fixed but the module's desktop cart bar (>=768px) would otherwise sit at
   bottom: 0 and cover it. Above 768px the nav leaves the bottom of the
   viewport and the module's bottom: 0 applies unchanged. Body padding: the
   Layout's 71px clears the 55px nav when the cart is closed; when the cart
   opens, booking-flow.js's syncBottomPadding replaces it with barHeight + 16
   (= 72px), which would let the footer's last line sit behind the cart bar.
   Re-assert the full nav + bar + buffer clearance while the cart is visible.
   ========================================================================== */

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

    .beds24-cart {
        bottom: 55px;
    }

    body:has(.beds24-cart:not([hidden])) {
        padding-bottom: calc(55px + 56px + 16px) !important;
    }
}

/* ==========================================================================
   Iframe height — per-site override of the shared 2200px default.
   DECISION 2026-08-06 (revised twice): 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 276605, room 578037, available
   dates 2026-09-02→09-03, cssfile applied, WRAPPER CARD LIVE — the
   previous 810/1550 values were measured at the full 1264px content
   column with no wrapper, which the OG session proved is the double-
   scroll trap). Beds24 sets its own html/body height to fit the
   checkout content (powered-by footer bottom == body height), so the
   true clean height is that body height, not documentElement.scrollHeight
   (which clamps to the iframe height on mobile via a min-height fill):
   DESKTOP at the wrapper's content width 708px: clean 1266px — 1306px
   = 1266px + 40px, zero dead space below the powered-by footer, no
   internal scrollbar. MOBILE: the fixed <=767px breakpoint height must
   serve the whole phone range and the checkout keeps growing as the
   iframe narrows (it stacks one column): measured 1314px at 394px
   (430px viewport), 1347px at 354px (390px), 1347px at 324px (360px),
   1447px at 284px (320px viewport). 1487px = 1447px + 40px — no
   internal scrollbar at any realistic phone width (dead space at the
   widest 394px iframe is 173px, deliberate: the no-scrollbar
   requirement wins over zero dead space across the mobile range). 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: 1306px;
}

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