/* CategoryBar Icons Variant - A/B Test Version
 * Uses 3D icon images instead of emojis
 * Inherits base styles from categorybar.css
 */

/* Icon-specific styling for image-based icons */
.categories-icons .category-icon {
    /* Maintain the same circular container from base style */
    padding: 8px; /* Minimal padding to prevent edge cutoff */
    /* overflow: hidden removed to show gold ring border */
}

.categories-icons .category-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the circle completely */
    display: block;
    margin: 0;
    padding: 0;
    /* Remove any default browser image styles */
    border: none;
    outline: none;
    /* Ensure sharp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Scale up slightly to match emoji size */
    transform: scale(1.1);
    /* Clip images to circle to prevent bleed */
    border-radius: 50%;
}

/* Hover effects for icon images */
.categories-icons .category-item:hover .category-icon img {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* Active state for icon images */
.categories-icons .category-item.active .category-icon img {
    transform: scale(1.15);
}

/* Mobile adjustments for icon images */
@media screen and (max-width: 768px) {
    .categories-icons .category-icon {
        padding: 6px; /* Less padding on mobile for larger icons */
    }

    .categories-icons .category-icon img {
        transform: scale(1.15); /* Slightly larger on mobile */
    }
}

/* Ensure smooth loading with lazy loading */
.categories-icons .category-icon img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.categories-icons .category-icon img[loading="lazy"].loaded,
.categories-icons .category-icon img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* Fallback for browsers that don't support lazy loading */
.no-js .categories-icons .category-icon img {
    opacity: 1;
}