/* Лёгкая версия (Lite Mode) - экономия трафика */

/* Плейсхолдер для изображений, которые не загружены */
.lite-mode .lazy-load-image:not([src]) {
    display: block;
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    position: relative;
}

.lite-mode .lazy-load-image:not([src])::after {
    content: "Лёгкая версия включена";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9ca3af;
    font-size: 0.875rem;
    text-align: center;
}

/* Показываем кнопку загрузки фото в лёгком режиме */
.lite-mode .lite-load-btn {
    display: block !important;
}

/* Скрываем кнопку если фото уже загружено */
.lite-mode .lazy-load-image[src] ~ .lite-load-btn {
    display: none !important;
}

/* Индикатор активного режима на кнопке */
.lite-mode #toggleLiteMode {
    background-color: #1f2937 !important;
}

.lite-mode #toggleLiteMode:hover {
    background-color: #111827 !important;
}

.lite-mode #toggleLiteMode svg {
    color: #fbbf24 !important;
}

.lite-mode #toggleLiteMode span {
    color: #ffffff !important;
}

/* Анимация появления модального окна */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out;
}