/**
 * LazyLoad.css - Styles for lazy loading images
 * Provides smooth loading animations and placeholder effects
 */

/* ======= Base Lazy Loading Styles ======= */

/* Placeholder state for images before loading */
img[data-src],
img[data-lazy-src] {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Loaded state */
img.lazy-loaded {
    opacity: 1 !important;
}

/* ======= Background Image Lazy Loading ======= */

/* Placeholder for background images */
.set-bg:not(.lazy-loaded):not(.no-lazy) {
    background-color: #1a1a2e;
    background-image: none !important;
    position: relative;
}

/* Loading animation for set-bg elements */
.set-bg.lazy-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

/* Skeleton shimmer animation */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Loaded state for background images */
.set-bg.lazy-loaded {
    background-color: transparent;
}

.set-bg.lazy-loaded::before {
    display: none;
}

/* ======= Loading State ======= */

.lazy-loading {
    position: relative;
    overflow: hidden;
}

/* Loading spinner for images */
img.lazy-loading {
    min-height: 100px;
    background: #1a1a2e url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="none" stroke="%23E53637" stroke-width="2" stroke-linecap="round" stroke-dasharray="90, 150" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/></circle></svg>') center no-repeat;
    background-size: 30px 30px;
}

/* ======= Error State ======= */

.lazy-error {
    background-color: #2d2d44 !important;
    position: relative;
}

.lazy-error::after {
    content: '⚠';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #666;
    z-index: 2;
}

img.lazy-error {
    min-height: 100px;
}

/* ======= Product Item Specific Styles ======= */

.product__item__pic.set-bg:not(.lazy-loaded) {
    background-color: #1a1a2e;
    min-height: 200px;
}

.product__item__pic.set-bg.lazy-loading::before {
    border-radius: 5px;
}

/* ======= Hero Slider Specific Styles ======= */

.hero__items.set-bg:not(.lazy-loaded) {
    background-color: #0b0c2a;
    min-height: 500px;
}

@media (max-width: 991px) {
    .hero__items.set-bg:not(.lazy-loaded) {
        min-height: 400px;
    }
}

@media (max-width: 767px) {
    .hero__items.set-bg:not(.lazy-loaded) {
        min-height: 300px;
    }
}

/* ======= Cart & Checkout Image Styles ======= */

.cart-item-image img[data-src],
.checkout-item-image img[data-src] {
    background-color: #1a1a2e;
    min-height: 80px;
}

/* ======= Fade In Animation ======= */

@keyframes lazyFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lazy-loaded {
    animation: lazyFadeIn 0.4s ease-out;
}

/* ======= Native Lazy Loading Support ======= */

/* For browsers that support loading="lazy" */
img[loading="lazy"] {
    background-color: #1a1a2e;
}

/* ======= Responsive Adjustments ======= */

@media (prefers-reduced-motion: reduce) {

    .set-bg.lazy-loading::before,
    img.lazy-loading {
        animation: none;
    }

    .lazy-loaded {
        animation: none;
    }

    img[data-src],
    img[data-lazy-src] {
        transition: none;
    }
}

/* ======= Low Bandwidth / Data Saver Mode ======= */

@media (prefers-reduced-data: reduce) {

    /* Images will still lazy load but without animations */
    .set-bg.lazy-loading::before {
        display: none;
    }

    img.lazy-loading {
        background-image: none;
    }
}