/* Safari iOS Adaptation for Dreamcase */

/*
   Ensure the body and html take up the full viewport height
   and account for safe areas on iPhone with notches
*/

:root {
    --safari-top-purple: #291147;
    --safari-bottom-purple: #12061d;
}

/*
   To color the top and bottom overscroll areas differently in iOS Safari:
   1. Set the bottom color on the HTML element.
   2. Set the top color on the BODY element.
   Safari will use HTML color for bottom bounce and BODY color for top bounce.
*/

/* Specific tweaks for iOS Safari safe areas */
@media screen and (max-width: 1024px) {
    @supports (padding: env(safe-area-inset-top)) {

        /* iOS Background Fix: Use pseudo-element instead of background-attachment: fixed */
        html body::before {
            content: "";
            display: block !important;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            background: url('../../img/backgrounds/case_background_1080p.jpg') no-repeat center center;
            background-size: cover;
            pointer-events: none;
            will-change: auto;
        }

        html {
            background: #2a0e41 !important;
        }

        /*
         * ВАЖНО: НЕ ставим padding-top/padding-bottom на body!
         * Это ломает position:fixed на iOS Safari —
         * все попапы смещаются и уезжают в угол.
         * Safe-area добавляем только на конкретные элементы.
         */
        body {
            background: transparent !important;
        }

        /* Шапка учитывает выемку */
        .mobile-ultra-microheader {
            padding-top: env(safe-area-inset-top);
        }

        /* Футер учитывает Home Bar */
        footer.footer-modern {
            padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
        }

        /*
         * ГЛОБАЛЬНЫЙ ФИКС ПОПАПОВ на iOS Safari.
         *
         * Проблема: position:fixed смещается когда у body есть transform,
         * padding или overflow. iOS Safari позиционирует fixed
         * относительно scrolling container, а не viewport.
         *
         * Решение: явно задаём top/left/right/bottom = 0 + 100dvh.
         */
        .age-verification-modal,
        #shareCasePop,
        .history-modal,
        .login-required-modal,
        .performance-quality-popup,
        .page-preloader,
        .all-screen-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            /* dvh — корректная высота viewport на iOS (без адресной строки) */
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
}

/* Darken the status bar for better readability if necessary */
@media (prefers-color-scheme: dark) {
    :root {
        --safari-top-purple: #2a124a;
        --safari-bottom-purple: #0f041a;
    }
}