/* ========================================================================== PWA Safe Area Insets -------------------------------------------------------------------------- Fix for iOS (notch / Dynamic Island) where sticky headers and fullscreen modals bleed under the system status bar (battery, signal, time), blocking access to header buttons and modal close ("X") buttons. Shared token: every safe-area fix flows through --cl-safe-top (an alias of env(safe-area-inset-top)). This (a) centralises the inset in one place, (b) lets automated tests simulate a notched device by overriding the token (:root{--cl-safe-top:44px}) under headless Chromium where env() resolves to 0, and (c) keeps every rule below a no-op on non-notched devices and on desktop (token = 0 → calc()/max() collapse to the original value), so the visual baseline is untouched. Two layers: 1. Standalone PWA only → site chrome (header / nav / drawer / floating nav). The browser chrome already protects these in a normal tab. 2. Mobile (all contexts) → modals. Fullscreen fixed modals with viewport-fit=cover render UNDER the iOS status bar even inside a Safari tab, so the modal layer is NOT gated to standalone. ========================================================================== */ :root { --cl-safe-top: env(safe-area-inset-top, 0px); --cl-safe-bottom: env(safe-area-inset-bottom, 0px); --cl-safe-left: env(safe-area-inset-left, 0px); --cl-safe-right: env(safe-area-inset-right, 0px); } @supports (padding: env(safe-area-inset-top)) { /* ---- Layer 1 — Standalone PWA: respect system status bar ----------- */ @media (display-mode: standalone), (display-mode: fullscreen) { /* Sticky main header: push content down so logo/buttons clear the notch/Dynamic Island. */ .cl-home-header, .cl-navbar, header.cl-navbar, header.main-header { padding-top: var(--cl-safe-top) !important; } /* Side insets for landscape notch (iPhone rotated). max() preserves the existing horizontal padding when no inset is needed. */ .cl-home-header__inner { padding-left: max(var(--cl-space-7, 28px), var(--cl-safe-left)); padding-right: max(var(--cl-space-7, 28px), var(--cl-safe-right)); } @media (max-width: 768px) { .cl-home-header__inner { padding-left: max(var(--cl-space-4, 16px), var(--cl-safe-left)); padding-right: max(var(--cl-space-4, 16px), var(--cl-safe-right)); } } /* Drawer / off-canvas menus that overlay full screen */ .cl-drawer, .cl-drawer__panel, .mobile-drawer, .header-drawer { padding-top: var(--cl-safe-top); } /* Bottom safe area for floating action buttons */ .floating-nav { margin-bottom: var(--cl-safe-bottom); } } /* ---- Layer 2 — Modals (standalone AND normal mobile browser) ------- */ /* Mobile-scoped so desktop is untouched (env()=0 there regardless). Each modal uses the correct lever for HOW its close button is positioned: - Fullscreen modals (content pinned to top:0) → pad the HEADER top, so the header row (title + inline close button) drops below the bar. - Centered / sheet overlays → pad the OVERLAY CONTAINER top, so the whole modal (and any absolutely-positioned close button inside it) shifts down together. Modals that already bake the inset into their HEADER PADDING (tickets modal, history drawer, game-iframe modal header, wallet hub — see their own CSS, all now using the shared token) are deliberately NOT repeated here to avoid double-padding. The game-iframe modal is a special case: its close/favorite buttons are absolutely positioned (top:8px) so header padding cannot move them — they get an explicit top offset below. The responsible-gaming modal is a 90vh bottom sheet whose top already sits ~10vh below the bar, so it needs no adjustment. */ @media (max-width: 768px) { /* --- Fullscreen modals → header top padding --- */ .lottery-modal .modal-header, .review-screen .modal-header, .checkout-screen .modal-header { padding-top: calc(0.75rem + var(--cl-safe-top)); } .slot-machine-header { padding-top: calc(0.8rem + var(--cl-safe-top)); } .sportsbook-modal__header { padding-top: calc(10px + var(--cl-safe-top)); } /* --- Keno fullscreen modal --- */ /* Top: la barra de pestañas (Info/Jugar/Mis Tickets) está en top:0 y queda bajo la barra de estado del iPhone. La empujamos hacia abajo. Bottom: el contenido scrollable se extendía hasta el borde inferior y tapaba el home indicator; reducimos su alto por el inset superior añadido y le damos padding inferior para que los botones (Comprar Ticket / Volver / Abrir Transmisión) queden por encima de los controles del móvil. Todo es no-op cuando los insets valen 0. */ .keno-tabs { padding-top: var(--cl-safe-top); } .keno-tab-content { height: calc(100vh - 70px - var(--cl-safe-top)); height: calc(100dvh - 70px - var(--cl-safe-top)); /* Task #218 */ padding-bottom: var(--cl-safe-bottom); } /* --- Game-iframe modal: absolutely-positioned controls --- */ /* The close/favorite buttons are pinned to the modal top (top:8px) so header padding can't move them — push their top below the bar. Specificity mirrors cl-components.css; this file loads later so the safe-top offset wins (no-op when the inset is 0). */ #gameIframeModal.cl-modal-skin .game-modal-close-btn { top: calc(var(--cl-space-2, 8px) + var(--cl-safe-top)); } #gameIframeModal.cl-modal-skin .game-modal-favorite-btn { top: calc(var(--cl-space-2, 8px) + var(--cl-safe-top)); } /* --- Centered / overlay modals → overlay container top padding --- */ .lottery-info-modal { padding-top: calc(1rem + var(--cl-safe-top)); } .crypto-deposit-overlay, .deposit-select-overlay { padding-top: calc(1rem + var(--cl-safe-top)); } /* Enviar cripto (Task #217): mismos overlays centrados que el depósito; si el modal crece más que el viewport, su borde superior (y el botón X) deben quedar bajo la barra de estado. */ .crypto-send-overlay, .crypto-send-confirm-overlay { padding-top: calc(1rem + var(--cl-safe-top)); } .auth-modal, .bonus-modal, .contact-modal, .staking-modal-overlay, .swap-modal-overlay { padding-top: var(--cl-safe-top); } .sportsbook-soon { padding-top: calc(20px + var(--cl-safe-top)); } .welcome-modal { padding-top: var(--cl-safe-top); } } }