/* ========================================
   ПОЛНОЭКРАННАЯ ЕГИПЕТСКАЯ РАМКА
   ======================================== */

/* Контейнер для полноэкранной рамки */
.fullscreen-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Рамка не блокирует взаимодействие с контентом */
    z-index: 10000; /* Поверх всего контента */
    background-image: url('../images/decor/frame_extracted.png');
    background-size: cover; /* Занимает весь экран без полос */
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1; /* Полностью непрозрачная рамка */
    transition: opacity 0.3s ease;
}

/* Адаптивность рамки для разных экранов */
@media (max-width: 1200px) {
    .fullscreen-frame {
        /* Убираем прозрачность - рамка остается полностью непрозрачной */
    }
}

@media (max-width: 768px) {
    .fullscreen-frame {
        /* Начинаем использовать "умное масштабирование" */
        background-size: 120% auto; /* Увеличиваем ширину, высота автоматическая для полного покрытия */
        background-position: center center;
    }
}

@media (max-width: 480px) {
    .fullscreen-frame {
        /* Увеличиваем горизонтальное масштабирование для лучшего вида верха/низа */
        background-size: 140% auto; /* Боковые части сильнее уходят за экран, высота автоматическая */
        background-position: center center;
    }
}

/* Дополнительные настройки для очень маленьких экранов */
@media (max-width: 375px) {
    .fullscreen-frame {
        /* Еще больше увеличиваем горизонтальное масштабирование */
        background-size: 160% auto; /* Верх и низ рамки выглядят менее сжатыми, высота автоматическая */
        background-position: center center;
    }
}

/* Для экранов меньше 320px (старые телефоны) */
@media (max-width: 320px) {
    .fullscreen-frame {
        /* Максимальное горизонтальное масштабирование для самых маленьких экранов */
        background-size: 180% auto; /* Боковые части полностью за экраном, верх/низ естественные */
        background-position: center center;
    }
}

/* Опциональный класс для скрытия рамки (если понадобится) */
.fullscreen-frame.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Класс для временного скрытия рамки при модальных окнах */
.fullscreen-frame.modal-active {
    opacity: 1; /* Рамка остается полностью непрозрачной даже при модальных окнах */
}

/* Обеспечиваем правильные z-index для всех элементов */

/* Контент поверх рамки, но под навигацией */
.main-content {
    position: relative;
    z-index: 100;
}

/* Навигация поверх рамки */
.egyptian-navbar {
    z-index: 10001 !important;
}

/* Модальные окна поверх рамки */
.modal {
    z-index: 10002 !important;
}

/* Уведомления поверх всего */
.notification {
    z-index: 10003 !important;
}

/* Панель редактирования поверх рамки */
.edit-mode-toggle {
    z-index: 10007 !important;
}

.blocks-panel {
    z-index: 10004 !important;
}

/* Загрузочный экран поверх всего */
.loading-overlay {
    z-index: 10005 !important;
}

/* Дополнительные улучшения для рамки */

/* Рамка статична без анимации */

/* Класс для загруженной рамки */
.fullscreen-frame.loaded {
    opacity: 1; /* Полностью непрозрачная рамка после загрузки */
}

/* Улучшенная адаптивность для планшетов */
@media (min-width: 481px) and (max-width: 1024px) {
    .fullscreen-frame {
        background-size: 110% 100%;
    }
}

/* Специальные настройки для очень широких экранов */
@media (min-width: 1920px) {
    .fullscreen-frame {
        background-size: 110% 100%;
    }
}

/* Настройки для высоких экранов (портретная ориентация) */
@media (orientation: portrait) and (max-width: 768px) {
    .fullscreen-frame {
        /* В портретной ориентации увеличиваем горизонтальное масштабирование еще больше */
        background-size: 130% auto; /* Боковые части уходят за экран, верх/низ выглядят лучше */
        background-position: center center;
    }
}

/* Специальные настройки для портретной ориентации на маленьких экранах */
@media (orientation: portrait) and (max-width: 480px) {
    .fullscreen-frame {
        /* Еще больше увеличиваем для портретной ориентации */
        background-size: 150% auto; /* Сильное горизонтальное масштабирование, высота автоматическая */
        background-position: center center;
    }
}

/* Для очень маленьких экранов в портретной ориентации */
@media (orientation: portrait) and (max-width: 375px) {
    .fullscreen-frame {
        /* Максимальное горизонтальное масштабирование для портретной ориентации */
        background-size: 170% 100%; /* Боковые части далеко за экраном */
        background-position: center center;
    }
}

/* Для самых маленьких экранов в портретной ориентации */
@media (orientation: portrait) and (max-width: 320px) {
    .fullscreen-frame {
        /* Экстремальное горизонтальное масштабирование */
        background-size: 200% 100%; /* Верх и низ рамки выглядят максимально естественно */
        background-position: center center;
    }
}

/* Настройки для широких экранов (альбомная ориентация) */
@media (orientation: landscape) and (max-height: 600px) {
    .fullscreen-frame {
        background-size: 110% 100%;
        background-position: center center;
    }
}

/* Специальные настройки для альбомной ориентации на маленьких экранах */
@media (orientation: landscape) and (max-width: 768px) and (max-height: 500px) {
    .fullscreen-frame {
        /* В альбомной ориентации используем умеренное горизонтальное масштабирование */
        background-size: 110% 100%; /* Слегка увеличиваем ширину */
        background-position: center center;
    }
}

/* Для очень маленьких экранов в альбомной ориентации */
@media (orientation: landscape) and (max-width: 480px) and (max-height: 400px) {
    .fullscreen-frame {
        /* Увеличиваем горизонтальное масштабирование для маленьких альбомных экранов */
        background-size: 125% 100%; /* Боковые части слегка уходят за экран */
        background-position: center center;
    }
}

/* Для экстремально маленьких экранов в альбомной ориентации */
@media (orientation: landscape) and (max-width: 375px) and (max-height: 350px) {
    .fullscreen-frame {
        /* Сильное горизонтальное масштабирование для очень маленьких альбомных экранов */
        background-size: 140% 100%; /* Верх и низ выглядят менее сжатыми */
        background-position: center center;
    }
}

/* Обеспечиваем корректную работу на устройствах с высокой плотностью пикселей */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fullscreen-frame {
        /* Улучшаем качество изображения на Retina дисплеях */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Дополнительные настройки для конкретных размеров экранов */

/* iPhone SE и подобные (320x568) - портретная ориентация */
@media only screen and (max-width: 320px) and (max-height: 568px) {
    .fullscreen-frame {
        /* Экстремальное горизонтальное масштабирование для iPhone SE */
        background-size: 200% auto; /* Боковые части далеко за экраном, высота автоматическая */
        background-position: center center;
    }
}

/* iPhone 6/7/8 и подобные (375x667) - портретная ориентация */
@media only screen and (max-width: 375px) and (max-height: 667px) {
    .fullscreen-frame {
        /* Сильное горизонтальное масштабирование для iPhone 6/7/8 */
        background-size: 170% 100%; /* Верх и низ выглядят естественно */
        background-position: center center;
    }
}

/* iPhone 6/7/8 Plus и подобные (414x736) - портретная ориентация */
@media only screen and (max-width: 414px) and (max-height: 736px) {
    .fullscreen-frame {
        /* Умеренное горизонтальное масштабирование для iPhone Plus */
        background-size: 150% 100%; /* Баланс между естественностью и покрытием */
        background-position: center center;
    }
}

/* iPhone в альбомной ориентации */
@media only screen and (max-height: 414px) and (orientation: landscape) {
    .fullscreen-frame {
        /* Для альбомной ориентации iPhone используем меньшее масштабирование */
        background-size: 120% 100%; /* Умеренное увеличение ширины */
        background-position: center center;
    }
}

/* Обеспечиваем правильное позиционирование на всех мобильных устройствах */
@media (max-width: 768px) {
    .fullscreen-frame {
        /* Убеждаемся, что рамка покрывает весь экран */
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-size: auto 100% !important;
        /* Предотвращаем горизонтальную прокрутку от увеличенной ширины фона */
        overflow: hidden;
    }

    /* Скрываем возможную горизонтальную прокрутку на body */
    body {
        overflow-x: clip;
        background: transparent;
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fullscreen-frame {
        background-image: url('../images/decor/frame_extracted.png');
        /* Можно добавить версию в высоком разрешении, если есть */
        /* background-image: url('../images/decor/frame_extracted@2x.png'); */
    }
}

/* Принудительное позиционирование для всех браузеров */
.fullscreen-frame {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    pointer-events: none !important;
}

/* Обеспечиваем, что рамка не влияет на прокрутку */
body {
    overflow-x: clip; /* Предотвращаем горизонтальную прокрутку */
}

/* Дополнительная защита от конфликтов с другими элементами */
.fullscreen-frame * {
    pointer-events: none !important;
}

/* Плавные переходы для всех состояний рамки */
.fullscreen-frame {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Состояние скрытой рамки */
.fullscreen-frame.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.98);
}

/* Состояние рамки при модальных окнах */
.fullscreen-frame.modal-active {
    opacity: 1 !important; /* Рамка остается полностью непрозрачной */
    transition: opacity 0.2s ease;
}

/* НОВАЯ СИСТЕМА АДАПТИВНОСТИ КНОПКИ ВХОДА */

/* Обёртка для поиска и кнопки входа — всегда рядом, без перекрытия */
.search-login-wrapper {
    position: absolute !important;
    top: 118px !important;
    right: 20px !important;
    left: auto !important;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1001;
}

/* Базовые стили для интерактивной зоны входа */
.frame-login-zone {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;

    /* Высота как у поиска для идеального центрирования */
    width: auto;
    height: 47px !important;
    padding: 0 32px;

    /* Стили оформления - БЕЗ обводки и фона */
    background: transparent; /* убран фон */
    border: none !important; /* убрана обводка */
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto;

    /* Центрирование содержимого */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Плавные переходы */
    transition: all 0.3s ease;

    /* Сброс отступов */
    margin: 0 !important;

    /* Убрана тень */
    box-shadow: none !important;

    /* Убираем обводку при фокусе и нажатии */
    outline: none !important;

    /* Стили для текста */
    text-decoration: none !important;
    color: inherit;
}

.frame-login-zone:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.frame-login-zone:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.frame-login-zone:hover {
    background-color: transparent; /* убран фон при hover */
    border: none !important; /* убрана обводка при hover */
    box-shadow: none !important; /* убрано свечение при hover */
    text-decoration: none !important; /* убрано подчеркивание при hover */
    outline: none !important; /* убрана обводка при hover */
}

/* Базовые стили для текста кнопки входа */
.frame-login-text {
    position: relative;
    color: var(--gold-color);

    /* Центрирование текста */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Базовый размер шрифта - увеличен в 1.5 раза (16px * 1.5 = 24px) */
    font-size: 24px;
    font-weight: 600;
    opacity: 0.9;

    /* Оформление */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    font-family: 'Cinzel', serif;
    text-align: center !important;
    letter-spacing: 1.5px;
    white-space: nowrap;

    /* Сброс стилей */
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;

    /* Плавные переходы */
    transition: all 0.3s ease;
}

/* АДАПТАЦИЯ КНОПКИ ВХОДА ДЛЯ РАЗНЫХ РАЗМЕРОВ ЭКРАНА */
/* Адаптация позиции под высоту верхней панели */

/* Большие экраны (>768px) - хедер 80px */
@media (min-width: 769px) {
    .search-login-wrapper {
        top: 118px !important;
        right: 20px !important;
    }
    .frame-login-zone {
        /* Позиция управляется обёрткой */
    }
}

/* Средние экраны (481px-768px) - хедер 70px */
@media (max-width: 768px) and (min-width: 481px) {
    .search-login-wrapper {
        top: 95px !important;
        right: 15px !important;
        gap: 10px;
    }
    .frame-login-zone {
        height: auto;
        padding: 0 24px;
        border: none !important;
        align-items: center;
        display: flex;
        justify-content: center;
    }
    .frame-login-text {
        font-size: 21px; /* 14px * 1.5 */
    }
}

/* Маленькие экраны (≤480px) - хедер 60px */
@media (max-width: 480px) {
    .search-login-wrapper {
        top: 82px !important;
        right: 10px !important;
        gap: 8px;
    }
    .frame-login-zone {
        height: auto;
        padding: 0 20px;
        border: none !important;
        align-items: center;
        display: flex;
        justify-content: center;
    }
    .frame-login-text {
        font-size: 18px; /* 12px * 1.5 */
        letter-spacing: 0.75px;
    }
}

/* Очень маленькие экраны (≤375px) */
@media (max-width: 375px) {
    .search-login-wrapper {
        top: 70px !important;
        right: 8px !important;
        gap: 6px;
    }
}



/* Hover эффекты */
.frame-login-zone:hover .frame-login-text {
    opacity: 1;
}