/* Стили для индикации загрузки каталога и фильтров */

/* ==========================================================
   ВАЖНО: Оверлей и спиннер больше НЕ используются!
   Вместо них используется прогресс-бар вверху (NProgress)
   Стили оставлены для обратной совместимости
   ========================================================== */

/* Оверлей загрузки фильтров - НЕ используется */
.filters-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 8px;
}

.dark .filters-loading-overlay {
    background-color: rgba(22, 22, 21, 0.9);
}

/* Спиннер загрузки - НЕ используется */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e3e3e0;
    border-top: 3px solid #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.dark .spinner {
    border: 3px solid #3e3e3a;
    border-top: 3px solid #4488ff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner p {
    margin: 0;
    font-size: 14px;
    color: #706f6c;
    font-weight: 500;
}

.dark .loading-spinner p {
    color: #a1a09a;
}

/* Стили для заблокированных чекбоксов */
.checkbox-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.checkbox-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.checkbox-disabled p {
    color: #999;
}

.dark .checkbox-disabled p {
    color: #666;
}

/* Анимация для товаров во время загрузки - простое затемнение */
.loading-fade {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Старый стиль с shimmer оставлен для обратной совместимости */
.loading-opacity {
    opacity: 0.7;
    position: relative;
    pointer-events: none;
}

.loading-opacity::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
}

.dark .loading-opacity::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Блокировка фильтров во время загрузки */
.filters-loading {
    position: relative;
}

/* Lazy loading для изображений товаров с lazysizes */
/*.product_item .pict img {*/
/*    opacity: 0;*/
/*    transform: scale(0.95);*/
/*    filter: blur(5px);*/
/*    transition: opacity 0.4s ease-in, transform 0.4s ease-in, filter 0.4s ease-in;*/
/*}*/

/* Класс применяется когда изображение начинает загружаться */
.product_item .pict img.lazyloading {
    opacity: 0.3;
    transform: scale(0.95);
    filter: blur(3px);
}

/* Класс применяется когда изображение полностью загружено */
.product_item .pict img.lazyloaded {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* !*Фоновый цвет для изображений во время загрузки *!*/
/*.product_item .pict {*/
/*    position: relative;*/
/*    background: linear-gradient(90deg, #ffffff 25%, rgba(239, 239, 239, 0.93) 50%, #b6b2b2 75%);*/
/*    background-size: 200% 100%;*/
/*}*/
.product_item .pict{
    background: linear-gradient(90deg, #E6EFF7, #f4f4f4, #E6EFF7);
    background-size: 200% 200%;
    animation: gradient-shift 2s ease infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Анимация фона только когда изображение НЕ загружено */
.product_item .pict.loading {
    animation: loading-shimmer 1.5s infinite;
}

.dark .product_item .pict {
    background: linear-gradient(90deg, #2a2a2a 25%, #1f1f1f 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* Индикатор загрузки (спиннер) - виден только при загрузке */
/*.product_item .pict.loading::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    margin: -20px 0 0 -20px;*/
/*    border: 3px solid rgba(0, 102, 204, 0.2);*/
/*    border-top-color: #0066cc;*/
/*    border-radius: 50%;*/
/*    animation: spinner-rotate 0.8s linear infinite;*/
/*    z-index: 1;*/
/*}*/

.dark .product_item .pict.loading::before {
    border: 3px solid rgba(68, 136, 255, 0.2);
    border-top-color: #4488ff;
}

/* Дополнительная анимация пульсации для спиннера */
.product_item .pict.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(0, 102, 204, 0.1);
    border-radius: 50%;
    animation: spinner-pulse 1.5s ease-in-out infinite;
    z-index: 1;
}

.dark .product_item .pict.loading::after {
    border: 3px solid rgba(68, 136, 255, 0.1);
}

/* Убираем фон когда изображение загружено */
.product_item .pict.loaded {
    background: #fff;
    animation: none;
}

.dark .product_item .pict.loaded {
    background: transparent;
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinner-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.1;
    }
}

/* Остановка анимации когда изображение загружено */
.product_item .pict:has(img.lazyloaded) {
    animation: none;
    background: #fff;
}

.dark .product_item .pict:has(img.lazyloaded) {
    background: transparent;
}

/* Дополнительные стили для кнопок во время загрузки */
button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Пульсирующая анимация для активных фильтров во время обновления */
.filters-loading .chosen button {
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .filters-loading-overlay {
        border-radius: 0;
    }

    .loading-spinner {
        gap: 8px;
    }

    .spinner {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }

    .loading-spinner p {
        font-size: 12px;
    }
}