/* Lazy Load Placeholder Styles for OpenCart */

/* Base placeholder styling */
.lazy-placeholder {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: placeholder-shimmer 2s infinite linear;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Shimmer animation */
@keyframes placeholder-shimmer {
    0% {
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    100% {
        background-position: 40px 0px, 40px 10px, 50px -10px, 30px 0px;
    }
}

/* Alternative solid color placeholder */
.lazy-placeholder-solid {
    background-color: #e0e0e0;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.lazy-placeholder-solid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer-slide 2s infinite;
}

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

/* Product placeholder specific styling */
.product-placeholder {
    min-width: 200px;
    min-height: 200px;
    border-radius: 4px;
}

/* Category placeholder styling */
.category-placeholder {
    min-width: 150px;
    min-height: 150px;
    border-radius: 4px;
}

/* Logo placeholder styling */
.logo-placeholder {
    min-width: 180px;
    min-height: 60px;
    border-radius: 2px;
}

/* Small icon placeholder */
.icon-placeholder {
    min-width: 24px;
    min-height: 24px;
    border-radius: 2px;
}

/* Banner placeholder */
.banner-placeholder {
    min-width: 270px;
    min-height: 25px;
    border-radius: 4px;
}

/* Employee/contact photo placeholder */
.employee-placeholder {
    min-width: 100px;
    min-height: 75px;
    border-radius: 5px;
}

/* Thumbnail placeholder for galleries */
.thumbnail-placeholder {
    min-width: 70px;
    min-height: 70px;
    border-radius: 3px;
}

/* No loading text - clean placeholders */

/* Responsive behavior */
@media (max-width: 768px) {
    .product-placeholder {
        min-width: 150px;
        min-height: 150px;
    }

    .category-placeholder {
        min-width: 100px;
        min-height: 100px;
    }

    .banner-placeholder {
        min-height: 200px;
    }
}


/* Special placeholder for transparent.gif lazy loading pattern */
.lazy-transparent {
    background: transparent;
}

.lazy-transparent.lazy-placeholder {
    background: linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
                linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
                linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
    background-size: 15px 15px;
    animation: placeholder-shimmer 1.5s infinite linear;
}

/* Hover effects for interactive elements */
.lazy-placeholder:hover {
    opacity: 0.8;
}

/* Fade-in effect when real image loads */
.lazy-loaded {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}