/**
 * RVBT Booking — pending-booking alert banner (site-wide).
 *
 * Warm-cream light design (RVBT design language): soft blurred cream bar with
 * a gold accent edge pinned to the top of the park website. Hidden while the
 * booking modal is open (it owns the whole viewport then).
 *
 * Theme-coexistence contract (deliberate):
 *   SIZING is ours — every box-model/layout property on interactive elements
 *   (CTA, close) is locked with !important so park-theme button styles can
 *   never inflate or reflow the bar.
 *   COLORS are soft defaults — background/color/border-color are declared
 *   WITHOUT !important so a theme that recolors buttons/links may tint the
 *   CTA and close icon to match the site's palette.
 */

.rvbt-pb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999990;
    transform: translateY(-110%);
    transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1);
    background: rgba(255, 252, 246, 0.98);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    color: #231A12;
    border-bottom: 1px solid #EADFCC;
    box-shadow: 0 6px 18px rgba(90, 72, 40, 0.10);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Gold accent edge along the very top — the bar's signature. */
.rvbt-pb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C9A962 0%, #B0925E 55%, #C9A962 100%);
}
.rvbt-pb.is-in { transform: translateY(0); }

/* The booking modal owns the viewport while open — keep the banner out. */
body.rvbt-ms-open .rvbt-pb,
html.rvbt-ms-open .rvbt-pb { display: none; }

.rvbt-pb__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 48px 10px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    min-height: 46px;
    box-sizing: border-box;
}

/* ── Countdown pill ─────────────────────────────────────────────────── */
.rvbt-pb__timer {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    color: #4A3208;
    background: #F5EBD7;
    border: 1px solid #DFC89A;
    border-radius: 999px;
    /* sizing locked like the CTA — theme line-heights were inflating the
       pill to ~45px; hold it to the button's exact 30px */
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    min-width: 56px;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rvbt-pb__timer::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C9A962;
}
.rvbt-pb__timer.is-low {
    background: #FDF0ED;
    color: #A4543F;
    border-color: #EBC6BC;
    animation: rvbt-pb-pulse 1.1s ease-in-out infinite;
}
.rvbt-pb__timer.is-low::before { background: #C75050; }
@keyframes rvbt-pb-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ── Message ────────────────────────────────────────────────────────── */
.rvbt-pb__txt {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    min-width: 0;
    color: #231A12;
}
.rvbt-pb__meta {
    color: #55483A;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── CTA — sizing locked, colors themeable ──────────────────────────── */
.rvbt-pb .rvbt-pb__cta {
    /* colors: soft defaults the theme may override */
    background: #B0925E;
    color: #FFFDF7;
    border-color: #B0925E;
    /* sizing & layout: ours, always */
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(122, 92, 31, 0.18);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.rvbt-pb .rvbt-pb__cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(122, 92, 31, 0.24);
    text-decoration: none !important;
}
.rvbt-pb .rvbt-pb__cta:focus-visible {
    outline: 2px solid #C9A962;
    outline-offset: 2px;
}
.rvbt-pb__cta svg { flex: 0 0 auto; display: block; }

/* ── Close — sizing locked, colors themeable ────────────────────────── */
.rvbt-pb .rvbt-pb__close {
    /* colors: soft defaults the theme may override */
    background: transparent;
    color: #8A7F6F;
    border-color: transparent;
    /* sizing & layout: ours, always */
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.rvbt-pb .rvbt-pb__close:hover {
    background: #F1E8DA;
    color: #3A3128;
}
.rvbt-pb .rvbt-pb__close:focus-visible {
    outline: 2px solid #C9A962;
    outline-offset: 2px;
}
.rvbt-pb__close svg { display: block; }

/* ── Confirmed / "all set" flash ────────────────────────────────────── */
.rvbt-pb--ok {
    background: rgba(243, 248, 241, 0.96);
    border-bottom-color: #CBE0C3;
}
.rvbt-pb--ok::before { background: linear-gradient(90deg, #6DA661 0%, #46A546 55%, #6DA661 100%); }
.rvbt-pb--ok .rvbt-pb__txt { color: #2C6C11; }
.rvbt-pb__ok {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #46A546;
    color: #fff;
    border-radius: 50%;
}
.rvbt-pb__ok svg { display: block; }

/* ── Hold-expired end state ─────────────────────────────────────────── */
.rvbt-pb--expired {
    background: rgba(251, 246, 239, 0.96);
    border-bottom-color: #E4D6C2;
}
.rvbt-pb--expired::before { background: linear-gradient(90deg, #B9A88E 0%, #9C8A70 55%, #B9A88E 100%); }
.rvbt-pb--expired .rvbt-pb__txt { color: #52432F; }

@media (max-width: 640px) {
    .rvbt-pb__inner { flex-wrap: wrap; gap: 8px; padding: 8px 44px 8px 12px; }
    .rvbt-pb__txt { font-size: 12.5px; flex-basis: calc(100% - 76px); }
    .rvbt-pb__meta { white-space: normal; }
    .rvbt-pb .rvbt-pb__cta { font-size: 11px !important; padding: 7px 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rvbt-pb { transition: none; }
    .rvbt-pb__timer.is-low { animation: none; }
    .rvbt-pb .rvbt-pb__cta:hover { transform: none; }
}