/**
 * Performance-optimized CSS for variant selector
 * Includes optimizations for lazy loading, smooth animations, and reduced reflows
 */

/* Variant selector performance optimizations */
.variant-selector {
    contain: layout style paint;
    will-change: auto;
}

.variant-list {
    /* Enable hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    
    /* Optimize scrollbar hiding */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.variant-list::-webkit-scrollbar {
    display: none;
}

/* Variant item optimizations */
.variant-item {
    /* Reduce layout thrashing */
    contain: layout style paint;
    
    /* Optimize transforms */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Smooth transitions with GPU acceleration */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.variant-item:hover {
    transform: translateZ(0) scale(1.05);
}

.variant-item.selected {
    transform: translateZ(0) scale(1.1);
}

.variant-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

.variant-item.error {
    opacity: 0.4;
}

/* Image container optimizations */
.variant-image-container {
    /* Prevent layout shifts during image loading */
    position: relative;
    overflow: hidden;
    
    /* Optimize rendering */
    contain: layout style paint;
    
    /* Smooth border transitions */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.variant-image-container img {
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Prevent layout shifts */
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* Smooth scaling */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Lazy loading placeholder styles */
.variant-image-container img[data-src] {
    /* Placeholder background pattern */
    background-image: 
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%), 
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%), 
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #f9fafb;
    
    /* Smooth fade-in when loaded */
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.variant-image-container img[src] {
    opacity: 1;
}

/* Loading overlay optimizations */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    
    /* Smooth fade transitions */
    opacity: 1;
    transition: opacity 0.2s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Error overlay optimizations */
.error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(239, 68, 68, 0.1);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    cursor: pointer;
    
    /* Smooth transitions */
    opacity: 1;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.error-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.error-overlay:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Spinner animation optimization */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    
    /* Optimize animation performance */
    will-change: transform;
}

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

/* Load more button optimizations */
.variant-load-more {
    /* Smooth fade transitions */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.variant-load-more.hidden {
    opacity: 0;
    pointer-events: none;
}

.variant-load-more button {
    /* Optimize button interactions */
    transition: color 0.2s ease, transform 0.1s ease;
    will-change: color, transform;
}

.variant-load-more button:hover {
    transform: translateY(-1px);
}

.variant-load-more button:active {
    transform: translateY(0);
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    .variant-item {
        /* Reduce transform complexity on mobile */
        will-change: auto;
    }
    
    .variant-item:hover {
        /* Disable hover effects on touch devices */
        transform: none;
    }
    
    .variant-list {
        /* Optimize touch scrolling */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .variant-item,
    .variant-image-container,
    .variant-image-container img,
    .loading-overlay,
    .error-overlay,
    .variant-load-more,
    .variant-load-more button {
        transition: none;
        animation: none;
        will-change: auto;
    }
    
    .spinner {
        animation: none;
        border-top-color: #3498db;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .variant-item.selected .variant-image-container {
        border-width: 3px;
        border-color: #000;
    }
    
    .error-overlay {
        background: rgba(255, 0, 0, 0.3);
        border: 2px solid #ff0000;
    }
    
    .loading-overlay {
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid #000;
    }
}

/* Print styles */
@media print {
    .variant-selector {
        display: none;
    }
}

/* Performance monitoring styles (development only) */
.variant-performance-stats {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    z-index: 9999;
    display: none;
}

.variant-performance-stats.visible {
    display: block;
}

/* Intersection observer optimization */
.variant-item[data-observed] {
    /* Mark items being observed for debugging */
    position: relative;
}

.variant-item[data-observed]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px dashed rgba(0, 255, 0, 0.3);
    pointer-events: none;
    display: none;
}

/* Debug mode styles */
.debug-mode .variant-item[data-observed]::before {
    display: block;
}

/* Cache status indicators */
.variant-item[data-cache-status="cached"]::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 255, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.variant-item[data-cache-status="loading"]::after {
    content: '⟳';
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 165, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: spin 1s linear infinite;
}

.variant-item[data-cache-status="error"]::after {
    content: '✗';
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Hide cache indicators by default */
.variant-item::after {
    display: none;
}

/* Show cache indicators in debug mode */
.debug-mode .variant-item::after {
    display: flex;
}