/**
 * KKTC Lazy Loading CSS
 * Modern lazy loading with smooth transitions
 */

/* Lazy loading image container */
.kktc-lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f0f0f0;
    width: 100%;
    height: auto;
}

/* Grid context - faster transitions and immediate loading help */
.ajax-tabs-container .kktc-lazy-image,
.kktc-grid-immediate .kktc-lazy-image,
.kktc-products-grid .kktc-lazy-image {
    opacity: 0;
    transition: opacity 0.1s ease-in-out;  /* Faster transition for grid */
}

/* Grid images should show immediately when loaded */
.ajax-tabs-container .kktc-lazy-image.loaded,
.kktc-grid-immediate .kktc-lazy-image.loaded,
.kktc-products-grid .kktc-lazy-image.loaded {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

/* Force grid images to be visible even without loaded class */
.ajax-tabs-container .kktc-lazy-image,
.kktc-grid-immediate .kktc-lazy-image,
.kktc-products-grid .kktc-lazy-image {
    opacity: 0.7 !important;  /* Semi-visible for debug */
}

/* Force show when src is set */
.ajax-tabs-container .kktc-lazy-image[src]:not([src*="svg+xml"]),
.kktc-grid-immediate .kktc-lazy-image[src]:not([src*="svg+xml"]),
.kktc-products-grid .kktc-lazy-image[src]:not([src*="svg+xml"]) {
    opacity: 1 !important;
}

/* Image loaded state */
.kktc-lazy-image.loaded {
    opacity: 1;
}

/* Loading placeholder */
.kktc-lazy-image[data-src] {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Crect width="300" height="300" fill="%23f0f0f0"/%3E%3Ctext x="150" y="150" text-anchor="middle" dy=".3em" fill="%23999" font-family="Arial" font-size="14"%3ELoading...%3C/text%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Card image container optimization */
.kktc-card-image {
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
}

.kktc-card-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Loading shimmer effect */
.kktc-card-image.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Intersection Observer support */
.kktc-lazy-image[data-src]:not(.loaded) {
    filter: blur(5px);
    transform: scale(1.1);
}

.kktc-lazy-image.loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Error state */
.kktc-lazy-image.error {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Crect width="300" height="300" fill="%23f0f0f0"/%3E%3Ctext x="150" y="150" text-anchor="middle" dy=".3em" fill="%23999" font-family="Arial" font-size="12"%3EImage not found%3C/text%3E%3C/svg%3E');
    opacity: 1;
}

/* Responsive lazy loading */
@media (max-width: 768px) {
    .kktc-lazy-image {
        transition: opacity 0.2s ease-in-out;
    }

    .kktc-card-image.loading::before {
        animation-duration: 1s;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .kktc-lazy-image,
    .kktc-card-image img {
        transition: none;
    }

    .kktc-card-image.loading::before {
        animation: none;
    }

    .kktc-lazy-image[data-src]:not(.loaded) {
        filter: none;
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .kktc-lazy-image[data-src] {
        background-color: #000;
        color: #fff;
    }
}