/* ==========================================================================
   PWA Safe Area Insets
   --------------------------------------------------------------------------
   Fix for installed PWA on iOS (notch / Dynamic Island) where the sticky
   header bleeds under the system status bar (battery, signal, time),
   blocking access to header buttons (menu, language, login). Also pushes
   fullscreen modal close buttons below the status bar so they remain
   tappable.

   Strategy: gated under @media (display-mode: standalone) so the layout
   stays untouched in normal browser tabs. Falls back to 0px on devices
   without a notch.
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {

    /* ---- 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: env(safe-area-inset-top, 0px) !important;
        }

        /* Side insets for landscape notch (iPhone rotated). Use max() so the
           existing horizontal padding is preserved when no inset is needed
           (portrait mode → env() = 0px → falls back to original padding). */
        .cl-home-header__inner {
            padding-left: max(var(--cl-space-7, 28px), env(safe-area-inset-left, 0px));
            padding-right: max(var(--cl-space-7, 28px), env(safe-area-inset-right, 0px));
        }
        @media (max-width: 768px) {
            .cl-home-header__inner {
                padding-left: max(var(--cl-space-4, 16px), env(safe-area-inset-left, 0px));
                padding-right: max(var(--cl-space-4, 16px), env(safe-area-inset-right, 0px));
            }
        }

        /* Drawer / off-canvas menus that overlay full screen */
        .cl-drawer,
        .cl-drawer__panel,
        .mobile-drawer,
        .header-drawer {
            padding-top: env(safe-area-inset-top, 0px);
        }

        /* Fullscreen modal close buttons: lift below status bar so the
           "X" stays tappable on notched devices. Targets every actual
           close-button class found in the codebase (audit: css/styles.css,
           css/responsible-gaming-modal.css, index.html). */
        .youtube-close-btn,
        .tickets-modal-close,
        .history-modal-close,
        .staking-modal-close,
        .swap-modal-close,
        .balotin-modal-close,
        .category-modal-close,
        .deposit-modal-close,
        .metaverse-modal-close,
        .streaming-close-btn,
        .withdraw-close-btn,
        .rg-modal__close,
        .game-modal-close-btn,
        .space-modal .modal-close,
        .modal-content > .close-modal-btn,
        .modal-header .close-modal-btn {
            top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        }

        /* Fullscreen game iframes / overlay containers: pad top so the
           game UI is not hidden under the status bar. */
        .slot-game-modal,
        .game-fullscreen {
            padding-top: env(safe-area-inset-top, 0px);
        }

        /* Wallet hub panel: pad top so the X close button (which sits
           inside the header row) clears the status bar. The close button
           itself is inline-flex (not absolutely positioned), so panel
           padding is the correct lever here. */
        .cl-wallet-hub__panel {
            padding-top: calc(var(--cl-space-5, 20px) + env(safe-area-inset-top, 0px));
        }

        /* Bottom safe area for floating action buttons */
        .floating-nav {
            margin-bottom: env(safe-area-inset-bottom, 0px);
        }
    }
}