/* Mobile Image Loader Styles */

/* Контейнер изображения в состоянии загрузки */
.img-loading {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    min-height: 170px; /* Дефолтная минимальная высота */
}

/* Скрываем изображение во время загрузки */
.img-loading img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Спиннер загрузки */
.img-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #00A2E2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 1;
}

/* Анимация вращения */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Показываем изображение после загрузки */
.img-loaded img {
    opacity: 1;
}

/* Состояние ошибки */
.img-error {
    background: rgba(255, 255, 255, 0.9);
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-error::before {
    display: none;
}

.img-error::after {
    content: 'Ошибка загрузки';
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* Адаптация для разных контейнеров */
.product-card .pc-img.img-loading {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-item .product-img.img-loading {
    height: 100px;
}

.pd-main_picture.img-loading {
    min-height: 300px;
}

/* Для owl-carousel */
.owl-carousel .owl-item:first-child .img-loading {
    min-height: 200px;
}

/* Предотвращение прыжков layout */
.img-loading.calculated-height {
    transition: height 0.2s ease-out;
}

/* Применяем стили только на мобильных устройствах */
@media (min-width: 769px) {
    .img-loading::before {
        display: none;
    }
    
    .img-loading img {
        opacity: 1;
    }
    
    .img-loading {
        background: transparent;
        min-height: auto;
    }
}