/* ===================================
   Image Shimmer Loading
   =================================== */

/*
 * NOTE: @keyframes shimmer is defined ONLY in shimmer.css
 * All shimmer animations use background-size: 1000px 100%
 * to match the keyframes (-1000px to 1000px)
 */

/* Product image shimmer moved to products.css to avoid load order conflicts */

.product-image img {
    opacity: 0;
    /* Transition handled in products.css - combined with transform */
}

/* Exclude logo and header images from shimmer - must load immediately */
.logo img,
.header img,
header img,
.navbar img,
.footer-brand img {
    opacity: 1 !important;
    animation: none !important;
}

.product-image img.loaded {
    opacity: 1;
    animation: none;
}

/* Category images with shimmer */
.category-icon {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

.category-icon img {
    /* Removed opacity shimmer - images load normally */
}


.category-icon img.loaded {
    opacity: 1;
}

/* Stop shimmer when image is loaded */
.product-image.image-loaded,
.category-icon.image-loaded {
    background: transparent;
    animation: none;
}

/* Partner/brand images */
.partner-logo,
.brand-image {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

.partner-logo img,
.brand-image img {
    /* Removed opacity shimmer - images load normally */
}

.partner-logo img.loaded,
.brand-image img.loaded {
    opacity: 1;
}

.partner-logo.image-loaded,
.brand-image.image-loaded {
    background: transparent;
    animation: none;
}

/* Shimmer for any image with data-shimmer attribute */
[data-shimmer="true"] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

[data-shimmer="true"] img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

[data-shimmer="true"] img.loaded {
    opacity: 1;
}

[data-shimmer="true"].image-loaded {
    background: transparent;
    animation: none;
}

/* Skeleton shimmer for cards during initial load */
.shimmer-card {
    background: #fff;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
}

/* .shimmer class removed - defined in shimmer.css */

.shimmer-image {
    width: 100%;
    height: 200px;
    margin-bottom: var(--spacing-md);
}

.shimmer-title {
    height: 24px;
    margin-bottom: var(--spacing-sm);
    width: 70%;
}

.shimmer-text {
    height: 16px;
    margin-bottom: var(--spacing-xs);
    width: 100%;
}

.shimmer-text.short {
    width: 60%;
}