/* Фикс фонового изображения для мобильных устройств */

/* Основной фикс для мобильных */
@media (max-width: 768px) {
    /* Сбрасываем стили body */
    body {
        background: none !important;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        position: relative;
    }
    
    /* Создаем фиксированный фон через псевдоэлемент */
    body::before {
        content: '';
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: -1;
        
        /* Фоновое изображение */
        background-color: #1a1a1a;
        background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                          url('/assets/images/main_bg.webp');
        background-repeat: no-repeat;
        background-position: center center !important;
        background-size: cover !important;
        
        /* Важные фиксы для мобильных */
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        
        /* Предотвращаем изменение размера */
        min-height: 100vh;
        min-height: -webkit-fill-available;
        
        /* Оптимизация производительности */
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
    
    /* Фикс для html */
    html {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Весь контент должен быть выше фона */
    body > * {
        position: relative;
        z-index: 1;
    }
}

/* Специальный фикс для iOS */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Viewport фикс для iOS */
        body::before {
            height: 100vh !important;
            /* Используем CSS переменную для динамической высоты viewport */
            height: calc(var(--vh, 1vh) * 100) !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
        }
        
        /* Предотвращаем bounce эффект в iOS */
        html {
            position: fixed;
            height: 100%;
            overflow: hidden;
        }
        
        body {
            position: fixed;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* Фикс для Android Chrome */
@media (max-width: 768px) {
    /* Chrome mobile имеет проблемы с fixed positioning */
    @supports (display: grid) {
        body::before {
            /* Используем 100% вместо vh для Android */
            height: 100% !important;
            position: fixed !important;
        }
    }
}

/* Альтернативный подход для проблемных устройств */
@media (max-width: 768px) {
    /* Если fixed не работает, используем absolute с фиксированными размерами */
    body.fallback-bg {
        min-height: 100vh;
        background: #1a1a1a url('/assets/images/main_bg.webp') center center / cover no-repeat fixed !important;
    }
    
    body.fallback-bg::before {
        display: none;
    }
}

/* Дополнительные фиксы для маленьких экранов */
@media (max-width: 480px) {
    body::before {
        /* Убеждаемся что фон покрывает весь экран */
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Фикс для ландшафтной ориентации */
@media (max-width: 768px) and (orientation: landscape) {
    body::before {
        background-size: cover !important;
        background-position: center center !important;
        height: 100vh !important;
        width: 100vw !important;
    }
}

/* Debug класс для проверки */
body.debug-bg::before {
    border: 5px solid red;
    opacity: 0.8;
}