/*
 * OG booking page — site-specific token overrides.
 * Loaded after booking-flow.css; same-specificity rules win by source order.
 * Tokens mapped from og/src/styles/global.css and docs/og-design-system.md.
 */

.beds24-booking-flow {
    /* Colors — editorial pamphlet palette */
    --beds24-color-primary:       #C98B2A;  /* amber — buttons, CTAs */
    --beds24-color-primary-text:  #261A0E;  /* ink — text on amber buttons */
    --beds24-color-accent:        #9B3A2B;  /* oxblood — accent elements */
    --beds24-color-surface:       #FDF8E8;  /* paper — card/form backgrounds */
    --beds24-color-surface-text:  #261A0E;  /* ink — body text */
    --beds24-color-surface-muted: #7A6140;  /* muted — labels, descriptions */
    --beds24-color-border:        #D6BF8A;  /* line — hairline dividers */
    --beds24-color-unavailable:   #b8a88a;  /* faded ink */
    --beds24-color-error:         #9B3A2B;  /* oxblood */
    --beds24-color-error-bg:      #FDF8E8;  /* paper */
    --beds24-color-error-border:  #D6BF8A;  /* line */

    /* Typography — three-family system */
    --beds24-font-family-body:    var(--font-geist), system-ui, sans-serif;
    --beds24-font-family-heading: var(--font-fraunces), Georgia, serif;
    --beds24-font-weight-heading: 500;

    /* Borders — zero radius, hard edges */
    --beds24-border-radius:       0;
    --beds24-border-radius-small: 0;

    /* Shadows — hard offset, no blur */
    --beds24-shadow-card:         none;
    --beds24-shadow-floating:     0 -2px 0 0 #261A0E;
}

/* Room card — border-based, ledger-panel style */
.beds24-room-card {
    border: 2px solid #261A0E;
    box-shadow: 4px 4px 0 0 #261A0E;
    border-radius: 0;
}

.beds24-room-card:hover {
    box-shadow: 6px 6px 0 0 #261A0E;
}

.beds24-room-card--selected {
    border-color: #C98B2A;
    box-shadow: 4px 4px 0 0 #C98B2A;
}

.beds24-room-card__type-bar {
    border-radius: 0;
    font-family: var(--beds24-font-family-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
}

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

.beds24-room-card__tag {
    border-radius: 0;
    font-family: var(--beds24-font-family-body);
    letter-spacing: 0.04em;
    background-color: #FDF8E8;
    border-color: #D6BF8A;
}

.beds24-search-form {
    border: 2px solid #261A0E;
    box-shadow: 4px 4px 0 0 #261A0E;
    border-radius: 0;
    background-color: #FDF8E8;
}

.beds24-search-form__label {
    font-family: var(--beds24-font-family-body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
}

.beds24-search-form__check-in,
.beds24-search-form__check-out,
.beds24-search-form__adults {
    border-radius: 0;
    border: 1px solid #D6BF8A;
    background-color: #FAF2D9;
}

.beds24-search-form__check-in:focus,
.beds24-search-form__check-out:focus,
.beds24-search-form__adults:focus {
    border-color: #C98B2A;
    outline-color: #C98B2A;
}

.beds24-search-form__submit {
    border-radius: 0;
    border: 2px solid #261A0E;
    box-shadow: 4px 4px 0 0 #261A0E;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

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

.beds24-cart {
    border: 2px solid #261A0E;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 #261A0E;
}

.beds24-cart__confirm-button {
    border-radius: 0;
    border: 2px solid #261A0E;
    box-shadow: 3px 3px 0 0 #261A0E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

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

.beds24-room-card__cart-btn {
    border-radius: 0;
    border: 2px solid #261A0E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

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

.beds24-room-card__offer {
    border-radius: 0;
    border-top: 1px solid #D6BF8A;
}

/* ==========================================================================
   Confirmation step — Beds24 booking iframe
   Card treatment matching .beds24-search-form / .beds24-cart: paper surface,
   2px ink border, hard offset shadow, zero radius, 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: #FDF8E8;
    border: 2px solid #261A0E;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 #261A0E;
    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 — OG button language: zero radius, 2px ink border, hard offset
   shadow; flips dark (ink fill, cream text) on hover per the .btn-fill /
   .btn-outline hover behavior in the design system. */
.beds24-booking-iframe-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid #261A0E;
    border-radius: 0;
    background: transparent;
    color: #261A0E;
    box-shadow: 4px 4px 0 0 #261A0E;
    font-family: var(--beds24-font-family-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms var(--ease), box-shadow 120ms var(--ease),
        background-color 120ms ease, color 120ms ease;
}

.beds24-booking-iframe-nav__back:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 #C98B2A;
    background-color: #261A0E;
    color: #FAF2D9;
    text-decoration: none;
}

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

/* Step heading — Fraunces with the h2 SOFT axis, ink, sized for an in-flow
   step heading inside the 760px card. */
.beds24-booking-iframe-heading {
    margin: 0 0 16px;
    font-family: var(--beds24-font-family-heading);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-variation-settings: "SOFT" 40;
    color: #261A0E;
}

/* Italic em accent within the heading — mirrors global.css .section-h em:
   Fraunces italic, oxblood, SOFT 80 opsz 72 (the site's italic-accent axis
   treatment). */
.beds24-booking-iframe-heading em {
    font-style: italic;
    color: #9B3A2B;
    font-variation-settings: "SOFT" 80, "opsz" 72;
}

@media (max-width: 767px) {
    .beds24-cart {
        border-top: 2px solid #261A0E;
        box-shadow: 0 -2px 0 0 #261A0E;
        /* Layout integration: global.css gives every <section> a large
           padding-block; the mobile cart bar sets no padding of its own, so
           reset it here or the fixed bar grows ~112px of empty paper. */
        padding: 0;
    }

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

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

@media (min-width: 768px) {
    .beds24-cart {
        border-top: 2px solid #261A0E;
        box-shadow: 0 -2px 0 0 #261A0E;
    }
}

/* ==========================================================================
   Layout integration — site mobile sticky bar vs cart mobile bar
   The site's .sticky-book (fixed bottom, z-index 200, <=768px) and the cart
   bar (fixed bottom, z-index 1000, <=767px) both anchor to the viewport
   bottom. The operator decision: the sticky bar stays VISIBLE — the cart
   bar is raised above it instead of hiding it. The sticky-book's measured
   rendered height is 74px (48px logo + 24px vertical padding + 2px border)
   in Chromium at 320-768px; the sticky bar sets no safe-area inset of its
   own, so none is added. The <=768px breakpoint also covers the exact 768px
   overlap, where the sticky bar is still fixed but the module's desktop cart
   bar (>=768px) would otherwise sit at bottom: 0 and cover it. Above 768px
   the sticky bar is display: none and the module's bottom: 0 applies
   unchanged. Body padding: the Layout's 80px clears the 74px sticky bar
   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. 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: 74px;
    }

    body:has(.beds24-cart:not([hidden])) {
        padding-bottom: calc(74px + 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, and later reported a double scroll (internal
   iframe scrollbar + page scroll) after the wrapper card narrowed the
   iframe to ~708px. Re-measured live 2026-08-06 (propid 173317, room
   378327, production cssfile + property-summary hide rules applied):
   DESKTOP at wrapper width 708px: clean 1814px / errors 2366px — 1854px
   = 1814px + 40px, zero dead space below the powered-by footer, no
   internal scrollbar. MOBILE at 374px (the task's prescribed phone
   width): clean 1862px — but 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 1888px at 339px (390px
   viewport), 1914px at 309px (360px viewport), 1939px at 269px (320px
   viewport). 1979px = 1939px + 40px — no internal scrollbar at any
   realistic phone width (dead space at the widest 374px iframe is
   117px, deliberate: the no-scrollbar requirement wins over zero dead
   space across the mobile range). The error state (+~550px) scrolls
   INSIDE the iframe only when validation fails; 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: 1854px;
}

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