/* Performance Optimizations for Mobile & All Browsers */

/* Hardware Acceleration */
.product-card,
.btn,
.card,
.navbar-collapse,
.modal,
.dropdown-menu {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Optimize Images for Different Screen Densities */
.product-image img,
.hero-banner img,
.category-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimize-quality;
}

/* Retina Display Optimization */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
    }
    
    .product-image img {
        image-rendering: auto;
    }
}

/* CSS Containment for Better Performance */
.product-card {
    contain: layout style paint;
}

.hero-banner {
    contain: layout paint;
}

.navbar {
    contain: layout style;
}

/* Reduce Layout Thrashing */
.container,
.row,
.col {
    position: relative;
}

/* Optimize Animations for 60fps */
@keyframes optimizedFadeIn {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes optimizedSlideIn {
    from { transform: translate3d(-100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.fade-in-optimized {
    animation: optimizedFadeIn 0.3s ease-out;
}

.slide-in-optimized {
    animation: optimizedSlideIn 0.3s ease-out;
}

/* Lazy Loading Enhancements */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.lazy-load.loaded {
    opacity: 1;
    background: none;
    animation: none;
}

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

/* Optimize Critical CSS */
.above-the-fold {
    contain: strict;
    content-visibility: visible;
}

.below-the-fold {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* Memory Usage Optimization */
.large-content {
    contain: size layout style paint;
}

/* Reduce Paint Complexity */
.complex-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.simple-gradient {
    background: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);
}

/* Critical Resource Hints */
.preload-font {
    font-display: swap;
}

/* Optimize for iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS bounce scroll */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /* Fix for iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* iOS specific button optimization */
    .btn {
        -webkit-appearance: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
    
    /* iOS scroll momentum */
    .scrollable {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* Chrome Mobile Optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .chrome-optimized {
        transform: translateZ(0);
        -webkit-font-smoothing: antialiased;
    }
}

/* Android Specific Optimizations */
@media screen and (max-width: 768px) {
    /* Android Chrome input fix */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.5);
    }
    
    /* Android touch feedback */
    .android-touch {
        -webkit-tap-highlight-color: rgba(184, 134, 11, 0.3);
    }
}

/* Reduce JavaScript Blocking */
.js-enhanced {
    transition: none;
}

.js-enhanced.js-loaded {
    transition: all 0.3s ease;
}

/* Optimize Critical Rendering Path */
.critical-css {
    display: block;
    visibility: visible;
    opacity: 1;
}

.non-critical {
    contain: layout style;
}

/* Battery and Performance Saving */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* CPU Intensive Operations */
.gpu-accelerated {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Network Efficient Loading */
.efficient-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Minimize Reflows and Repaints */
.layout-stable {
    contain: layout;
    height: min-content;
}

.paint-stable {
    contain: paint;
}

/* Optimize for Low-End Devices */
@media (max-width: 480px) and (max-device-width: 480px) {
    .low-end-optimization {
        will-change: auto;
        transform: none;
        transition: none;
    }
    
    .simplified-shadow {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .reduced-animation {
        animation-duration: 0.2s;
    }
}

/* Service Worker Cache Optimization */
.cache-efficient {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><rect width="1" height="1" fill="%23f8f9fa"/></svg>');
}

/* Memory-Efficient Fonts */
.system-font {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Reduce Bundle Size */
.minimal-deps {
    /* Use native CSS instead of heavy JS libraries where possible */
    scroll-behavior: smooth;
    accent-color: #B8860B;
}

/* Optimize for Connection Speed */
@media (prefers-reduced-data: reduce) {
    .data-saver {
        background-image: none;
        box-shadow: none;
        animation: none;
        transition: none;
    }
    
    .data-saver img {
        filter: none;
        transform: none;
    }
}

/* 4G and 3G Optimizations */
@media (max-width: 768px) {
    .connection-aware {
        /* Reduce complex effects on slower connections */
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Critical Performance Metrics */
.web-vitals-optimized {
    /* First Contentful Paint optimization */
    font-display: swap;
    
    /* Largest Contentful Paint optimization */
    content-visibility: auto;
    
    /* Cumulative Layout Shift prevention */
    aspect-ratio: 16/9;
    
    /* First Input Delay optimization */
    pointer-events: auto;
}

/* Progressive Enhancement */
.no-js .progressive-enhancement {
    display: none;
}

.js .progressive-enhancement {
    display: block;
}

/* Accessibility Performance */
@media (prefers-reduced-motion: no-preference) {
    .accessible-animation {
        animation: optimizedFadeIn 0.3s ease-out;
    }
}

/* Resource Loading Priorities */
.high-priority {
    contain: none;
    content-visibility: visible;
}

.low-priority {
    contain: strict;
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}