/* ============================================================ Slide-in SevenRooms booking panel Paired with js/booking-panel.js and includes/booking-panel.php. Structure: #fi-booking fixed, full-viewport, [hidden] while closed .fi-booking__overlay semi-transparent backdrop (click to close) .fi-booking__panel role="dialog", slides in from the right .fi-booking__header sticky header with title + close button .fi-booking__body fills the rest; holds the loader + iframe Everything is namespaced under .fi-booking so it cannot collide with the existing .mobile / .bookmenu menus. ============================================================ */ /* Hidden from layout AND assistive tech while closed. JS toggles [hidden]. */ .fi-booking[hidden] { display: none !important; } /* ---------- Scroll lock on the page behind the panel ---------- */ html.fi-booking-lock, html.fi-booking-lock body { overflow: hidden; } /* JS also pins (position:fixed + top offset) for iOS Safari and restores the scroll position on close. */ body.fi-booking-lock { position: fixed; width: 100%; left: 0; } /* ---------- Container ---------- */ .fi-booking { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; /* above .stick / .mobile / .bookmenu (all z-index:1000) */ } /* ---------- Overlay ---------- */ .fi-booking__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 450ms ease; } .fi-booking.is-open .fi-booking__overlay { opacity: 1; } /* ---------- Panel ---------- */ .fi-booking__panel { position: absolute; top: 0; right: 0; width: 650px; max-width: 100%; height: 100vh; /* fallback */ height: 100dvh; /* modern: excludes the mobile browser toolbar */ display: flex; flex-direction: column; background: #000; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35); transform: translateX(100%); transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; padding-right: env(safe-area-inset-right); } .fi-booking.is-open .fi-booking__panel { transform: translateX(0); } /* ---------- Header (stays visible while the iframe scrolls) ---------- */ .fi-booking__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; padding-top: max(16px, env(safe-area-inset-top)); background: #000; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .fi-booking__title { margin: 0; font-family: 'gillsans', sans-serif; font-size: 18px; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: #fff; } .fi-booking__close { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 2px solid #fff; border-radius: 0; background: none; color: #fff; font-family: 'gillsans', sans-serif; font-size: 26px; line-height: 1; cursor: pointer; transition: background 300ms ease, color 300ms ease; } .fi-booking__close:hover { background: #fff; color: #000; } /* ---------- Body + iframe ---------- */ .fi-booking__body { position: relative; flex: 1 1 auto; min-height: 0; /* let the iframe shrink inside the flex column */ background: #fff; padding-bottom: env(safe-area-inset-bottom); } .fi-booking__iframe { display: block; width: 100%; height: 100%; border: 0; } /* ---------- Loading state ---------- */ .fi-booking__loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; margin: 0; background: #fff; color: #000; font-family: 'gillsans', sans-serif; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: opacity 300ms ease; } .fi-booking__loading::before { content: ""; width: 26px; height: 26px; margin-right: 12px; border: 3px solid rgba(0, 0, 0, 0.2); border-top-color: #000; border-radius: 50%; animation: fi-booking-spin 800ms linear infinite; } .fi-booking.is-loaded .fi-booking__loading { opacity: 0; pointer-events: none; } @keyframes fi-booking-spin { to { transform: rotate(360deg); } } /* ---------- Focus visibility ---------- */ .fi-booking__close:focus-visible, .fi-booking__panel a:focus-visible, .js-booking-panel:focus-visible { outline: 3px solid #ffcc00; outline-offset: 2px; } /* ---------- Mobile: fill the whole screen ---------- */ @media only screen and (max-width: 900px) { .fi-booking__panel { width: 100%; height: 100vh; height: 100dvh; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* The panel covers the viewport, so there is no visible overlay to tap. */ .fi-booking__overlay { display: none; } } /* ---------- Respect reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { .fi-booking__overlay, .fi-booking__panel { transition: none; } .fi-booking__loading::before { animation-duration: 1600ms; } }