/**
 * Image Optimization CSS
 * Tối ưu hóa hiển thị hình ảnh sản phẩm
 */

/* =================================
   RESPONSIVE IMAGE CONTAINERS
   ================================= */

.product-image-wrapper {
    position: relative;
    overflow: hidden;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    border-radius: inherit;
    opacity: 1 !important;
}

/* Hover effects - DISABLED for click functionality */
/* .product-image-wrapper:hover img {
    transform: scale(1.05);
} */

/* =================================
   LAZY LOADING STATES
   ================================= */

.lazy-image {
    opacity: 1 !important;
    transition: none !important;
}

.lazy-image.loaded {
    opacity: 1 !important;
}

.lazy-image.loading {
    opacity: 1 !important;
    position: relative;
}

.lazy-image.loading::after {
    display: none !important;
}

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

/* =================================
   ERROR HANDLING
   ================================= */

.error-image {
    opacity: 0.6;
    filter: grayscale(100%);
    position: relative;
}

.error-image::before {
    content: '📷';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: #6c757d;
    z-index: 2;
}

/* =================================
   PLACEHOLDER STYLES
   ================================= */

.image-placeholder {
    display: none !important;
}

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

/* =================================
   RESPONSIVE BREAKPOINTS
   ================================= */

/* Mobile (≤480px) */
@media (max-width: 480px) {
    .product-image-wrapper {
        border-radius: 6px;
    }
    
    .lazy-image.loading::after {
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
    }
    
    .error-image::before {
        font-size: 1.5rem;
    }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .product-image-wrapper {
        border-radius: 7px;
    }
}

/* Desktop (≥769px) */
@media (min-width: 769px) {
    .product-image-wrapper {
        border-radius: 8px;
    }
    
    .product-image-wrapper:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
}

/* =================================
   FEATURED PRODUCTS SPECIFIC
   ================================= */

#featured-products-container .product-image-wrapper {
    /* background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); */
    background: #ffffff;
    border: 1px solid #e9ecef;
}

#featured-products-container .product-image-wrapper:hover {
    border-color: #007bff;
    box-shadow: 0 4px 20px rgba(0,123,255,0.15);
}

/* ---------- Fix: ensure featured product images are not visually covered ---------- */
/* Force the actual <img> to sit above placeholders/overlays and remove accidental dimming */
#featured-products-container .product-image-wrapper img {
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    filter: none !important;
}

/* Make placeholders/spinners sit behind the real image in featured cards */
#featured-products-container .product-image-wrapper .image-placeholder,
#featured-products-container .product-image-wrapper .lazy-image.loading::after,
#featured-products-container .product-image-wrapper .error-image::before {
    z-index: 1;
    pointer-events: none; /* avoid blocking clicks */
}


/* Featured product image sizes */
@media (max-width: 480px) {
    #featured-products-container .product-image-wrapper {
        height: 186px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #featured-products-container .product-image-wrapper {
        height: 200px;
    }
}

@media (min-width: 769px) {
    #featured-products-container .product-image-wrapper {
        height: 220px;
    }
}

/* =================================
   PRODUCT LIST SPECIFIC
   ================================= */

#products-container .product-image-wrapper {
    background: #ffffff;
    border: 1px solid #f0f0f0;
}

#products-container .product-image-wrapper:hover {
    border-color: #dee2e6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Product list image sizes */
@media (max-width: 480px) {
    #products-container .product-image-wrapper {
        height: 186px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #products-container .product-image-wrapper {
        height: 200px;
    }
}

@media (min-width: 769px) {
    #products-container .product-image-wrapper {
        height: 180px;
    }
}

/* =================================
   WEBP/AVIF SUPPORT
   ================================= */

/* Hide fallback images when modern formats are supported */
.webp .fallback-jpg,
.avif .fallback-jpg {
    display: none;
}

.no-webp .webp-image,
.no-avif .avif-image {
    display: none;
}

/* =================================
   CRITICAL IMAGES
   ================================= */

.critical-image {
    opacity: 1 !important;
}

.critical-image.lazy-image {
    opacity: 1 !important;
}

/* =================================
   HIGH DPI DISPLAYS
   ================================= */



/* =================================
   PERFORMANCE OPTIMIZATIONS
   ================================= */

.product-image-wrapper,
.product-image-wrapper img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .product-image-wrapper img,
    .lazy-image,
    .lazy-image.loading::after {
        transition: none !important;
        animation: none !important;
    }
    
    .product-image-wrapper:hover img {
        transform: none !important;
    }
}

/* =================================
   PRINT STYLES
   ================================= */

@media print {
    .lazy-image.loading::after,
    .image-placeholder {
        display: none !important;
    }
    
    .product-image-wrapper {
        background: white !important;
        box-shadow: none !important;
    }
}

/* =================================
   ACCESSIBILITY
   ================================= */

.product-image-wrapper:focus-within {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Screen reader only text for loading states */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =================================
   DARK MODE SUPPORT
   ================================= */

@media (prefers-color-scheme: dark) {
    .product-image-wrapper {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        border-color: #4a5568;
    }
    
    .image-placeholder {
        background: linear-gradient(90deg, #4a5568 25%, #2d3748 50%, #4a5568 75%);
        background-size: 200% 100%;
        color: #a0aec0;
    }
    
    .error-image::before {
        color: #a0aec0;
    }
}

/* =================================
   CONTAINER SPECIFIC OPTIMIZATIONS
   ================================= */

/* Ensure images don't exceed container bounds */
.product-card .product-image-wrapper,
.modern-card .product-image-wrapper {
    max-width: 100%;
    max-height: 100%;
}

/* Grid layout optimizations */
.row .product-image-wrapper {
    margin-bottom: 0;
}

/* Flexbox optimizations */
.d-flex .product-image-wrapper {
    flex-shrink: 0;
}

/* =================================
   LOADING PERFORMANCE
   ================================= */

/* Preload critical images */
.preload-image {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 1;
}

/* Intersection observer root margin optimization */
.lazy-root {
    overflow: hidden;
}

/* =================================
   BROWSER SPECIFIC FIXES
   ================================= */

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .product-image-wrapper img {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}



/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .product-image-wrapper img {
        -ms-interpolation-mode: bicubic;
    }
}