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

.beds24-booking-flow {
    /* Colors — neo-brutalist pink palette */
    --beds24-color-primary:       #FF1F7A;  /* hot pink — CTAs, highlights */
    --beds24-color-primary-text:  #FFFFFF;  /* white — text on pink */
    --beds24-color-accent:        #FFD84D;  /* golden yellow — tags, accents */
    --beds24-color-surface:       #FFFFFF;  /* white — cards */
    --beds24-color-surface-text:  #15110F;  /* near-black — body text */
    --beds24-color-surface-muted: #5B4A3F;  /* warm brown — secondary text */
    --beds24-color-border:        #15110F;  /* near-black — borders */
    --beds24-color-unavailable:   #9a8a7e;  /* faded brown */
    --beds24-color-error:         #FF1F7A;  /* hot pink */
    --beds24-color-error-bg:      #FFE4EE;  /* soft pink */
    --beds24-color-error-border:  #FF1F7A;  /* hot pink */

    /* Typography — Bricolage Grotesque display, Inter body */
    --beds24-font-family-body:    'Inter', sans-serif;
    --beds24-font-family-heading: 'Bricolage Grotesque', sans-serif;
    --beds24-font-weight-heading: 800;
    --beds24-font-weight-body:    400;

    /* Borders — full pill shapes */
    --beds24-border-radius:       999px;
    --beds24-border-radius-small: 999px;

    /* Shadows — hard neo-brutalist offset */
    --beds24-shadow-card:         6px 6px 0 0 #15110F;
    --beds24-shadow-floating:     0 -4px 0 0 #15110F;
}

.beds24-room-card {
    border: 2.4px solid #15110F;
    border-radius: 18px;
    box-shadow: 6px 6px 0 0 #15110F;
    overflow: hidden;
}

.beds24-room-card:hover {
    box-shadow: 8px 8px 0 0 #15110F;
}

.beds24-room-card--selected {
    border-color: #FF1F7A;
    box-shadow: 0 0 0 2.4px #FF1F7A, 6px 6px 0 0 #15110F;
}

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

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

.beds24-room-card__tag {
    border-radius: 999px;
    background-color: #FFE4EE;
    border: 1px solid #FF1F7A;
    color: #15110F;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.beds24-search-form {
    border: 2.4px solid #15110F;
    border-radius: 18px;
    box-shadow: 6px 6px 0 0 #15110F;
    background-color: #FFFFFF;
}

.beds24-search-form__label {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 700;
}

.beds24-search-form__check-in,
.beds24-search-form__check-out,
.beds24-search-form__adults {
    border-radius: 999px;
    border: 2px solid #15110F;
    background-color: #FBF3EB;
    font-family: 'Inter', sans-serif;
}

.beds24-search-form__check-in:focus,
.beds24-search-form__check-out:focus,
.beds24-search-form__adults:focus {
    border-color: #FF1F7A;
    outline-color: #FF1F7A;
    box-shadow: 0 0 0 2px #FF1F7A;
}

.beds24-search-form__submit {
    border-radius: 999px;
    border: 2.4px solid #15110F;
    box-shadow: 4px 4px 0 0 #15110F;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

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

.beds24-cart {
    border: 2.4px solid #15110F;
    border-radius: 18px;
    box-shadow: 6px 6px 0 0 #15110F;
}

.beds24-cart__confirm-button {
    border-radius: 999px;
    border: 2.4px solid #15110F;
    box-shadow: 3px 3px 0 0 #15110F;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.beds24-room-card__qty-btn {
    border-radius: 999px;
    border: 2px solid #15110F;
}

.beds24-room-card__cart-btn {
    border-radius: 999px;
    border: 2px solid #15110F;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.beds24-room-card__cart-btn--in-cart {
    border-color: #5B4A3F;
}

.beds24-room-card__offer {
    border-top: 2px solid #15110F;
}

/* ==========================================================================
   Confirmation step — Beds24 booking iframe
   Card treatment matching .beds24-search-form / .beds24-cart. The wrapper
   grows with the fixed-height iframe (2200px, set in booking-flow.css) so
   the Beds24-internal Comodo badge is never clipped by this container.
   ========================================================================== */

.beds24-booking-iframe-wrapper {
    background-color: #FFFFFF;
    border: 2.4px solid #15110F;
    border-radius: 18px;
    box-shadow: 6px 6px 0 0 #15110F;
    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;
}

.beds24-booking-iframe-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    background-color: #15110F;
    color: #FFFFFF;
    box-shadow: 4px 4px 0 0 #15110F;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.beds24-booking-iframe-nav__back:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 #15110F;
    text-decoration: none;
}

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

.beds24-booking-iframe-heading {
    margin: 0 0 20px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: #15110F;
}

@media (max-width: 767px) {
    .beds24-booking-iframe-wrapper {
        padding: 16px;
        box-shadow: 4px 4px 0 0 #15110F;
    }

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

    .beds24-cart {
        border-top: 2.4px solid #15110F;
        box-shadow: 0 -4px 0 0 #15110F;
    }
}

@media (min-width: 768px) {
    .beds24-cart {
        border-top: 2.4px solid #15110F;
        box-shadow: 0 -4px 0 0 #15110F;
    }
}

/* ==========================================================================
   Mobile layout integration — flow edge padding + cart above the bottom nav
   The site's mobile header (.site-header) is a fixed bottom bar at <=768px
   (height 64px, z-index 100). The booking cart bar (fixed bottom, z-index
   1000) must sit ABOVE it, never covering it. This override raises the cart
   by the header's measured rendered height (64px in Chromium at 320-768px;
   the header sets no safe-area inset of its own, so none is added). The
   <=768px breakpoint also covers the exact 768px overlap, where the header
   is still fixed but the module's desktop cart bar (>=768px) would otherwise
   sit at bottom: 0 and cover it. Above 768px the header leaves the bottom of
   the viewport and the module's bottom: 0 applies unchanged.
   ========================================================================== */

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

    .beds24-cart {
        bottom: 64px;
    }
}

/* ==========================================================================
   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 278774, room 581672,
   cssfile applied, iframe width 708px via wrapper card): clean checkout
   1269px, with validation errors 1656px, with two rooms selected 1432px.
   1310px = 1269px + 41px — zero dead space below the powered-by footer in
   the normal view. The taller states (errors, extra rooms) scroll INSIDE
   the iframe; verified 2026-08-06 that the Confirm button and Comodo
   badge stay reachable via that internal scroll and nothing clips.
   Tablet/mobile bump: below 768px the checkout stacks; measured at phone
   width (iframe 354px): clean 1337px, errors 1724px, two rooms 1567px.
   1380px = 1337px + 43px. Breakpoint 767px matches Beds24's col-sm
   stacking (768px stays two-column, fits the desktop height).
   ========================================================================== */

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

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