/** * Cross-browser: fixed overlays, sticky layers, iOS safe-area, viewport units. * Modals should be direct children of (not inside transformed/tall wrappers) * so position:fixed centers in the visible viewport. */ :root { --rp-safe-top: env(safe-area-inset-top, 0px); --rp-safe-right: env(safe-area-inset-right, 0px); --rp-safe-bottom: env(safe-area-inset-bottom, 0px); --rp-safe-left: env(safe-area-inset-left, 0px); --rp-bottom-nav-height: 60px; } /* ----- Full-viewport overlays (explicit edges — older WebKit / no `inset`) ----- */ .modal-overlay, .offer-image-lightbox, .location-modal-overlay { position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; /* Use dynamic viewport height so the box matches the *visible* screen (mobile URL bar) */ height: 100vh; min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh; max-height: 100dvh; max-height: -webkit-fill-available; box-sizing: border-box; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Flex-center when overlays are shown (display comes from page CSS / inline) */ .modal-overlay.active { align-items: center; justify-content: center; } .location-modal-overlay { align-items: center; justify-content: center; } /* ----- Rating dialog: flex layer (centered in viewport, not document) ----- */ .rp-dialog-layer { display: none; position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh; max-height: 100dvh; box-sizing: border-box; z-index: 2200; padding: 16px; padding-left: calc(16px + var(--rp-safe-left)); padding-right: calc(16px + var(--rp-safe-right)); padding-top: calc(16px + var(--rp-safe-top)); padding-bottom: calc(16px + var(--rp-safe-bottom)); align-items: center; justify-content: center; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .rp-dialog-layer.active { display: flex; } /* ----- Centered dialogs: stay inside notch / home indicator ----- */ .modal-overlay .modal-card { max-height: min(92vh, calc(100vh - var(--rp-safe-top) - var(--rp-safe-bottom) - 24px)); max-height: min(92dvh, calc(100dvh - var(--rp-safe-top) - var(--rp-safe-bottom) - 24px)); } /* ----- Offer lightbox close — clear status bar / notch ----- */ .offer-image-lightbox .offer-lightbox-close { top: calc(14px + var(--rp-safe-top)); right: calc(14px + var(--rp-safe-right)); } .offer-image-lightbox .offer-lightbox-img { max-height: min(85vh, calc(100vh - var(--rp-safe-top) - var(--rp-safe-bottom) - 48px)); max-height: min(85dvh, calc(100dvh - var(--rp-safe-top) - var(--rp-safe-bottom) - 48px)); } /* ----- Home: location modal box ----- */ .location-modal-box { max-width: calc(100vw - 32px - var(--rp-safe-left) - var(--rp-safe-right)); max-height: calc(100vh - 32px - var(--rp-safe-top) - var(--rp-safe-bottom)); max-height: calc(100dvh - 32px - var(--rp-safe-top) - var(--rp-safe-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ----- Sticky rows: WebKit prefix + compositing (restaurant page) ----- */ .app-header, .categories-nav, .rp-shell-header { position: -webkit-sticky; position: sticky; } /* ----- Bottom nav: layout stability ----- */ .bottom-nav { box-sizing: border-box; width: 100%; left: 0; right: 0; -webkit-transform: translateZ(0); transform: translateZ(0); } /* ----- Restaurant cart bar: sit above bottom nav + home indicator ----- */ .cart-bar { bottom: calc(12px + var(--rp-bottom-nav-height) + var(--rp-safe-bottom)); -webkit-transform: translateX(-50%) translateY(calc(100% + 56px)); transform: translateX(-50%) translateY(calc(100% + 56px)); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cart-bar.active { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } @media (min-width: 768px) { .cart-bar { bottom: calc(16px + var(--rp-bottom-nav-height) + var(--rp-safe-bottom)); } }