/* Optimized Elegant Silver Gradient Background for Non-Panel Pages */
/* Performance optimizations: GPU acceleration, reduced animations, efficient rendering */

/* Main body background with elegant silver gradient - OPTIMIZED */
body {
    /* Static gradient - no animation for better performance */
      background: linear-gradient(135deg, #161616 0%, #24272b 25%, #101010 50%, #24272b 75%, #161616 100%);
    background-attachment: fixed;
    /* Removed animation for performance - static gradient is still elegant */
    position: relative;
    /* Force GPU acceleration */
    transform: translateZ(0);
    will-change: auto; /* Let browser decide, don't force will-change on body */
}

/* Optional: Subtle movement only on hover or user interaction */
/* This provides elegance without constant CPU/GPU usage */
body.interactive-gradient {
    background-size: 200% 200%;
    transition: background-position 1s ease;
}

body.interactive-gradient:hover {
    background-position: 100% 50%;
}

/* REMOVED: Heavy shimmer overlay animation */
/* Replaced with static subtle overlay for elegance without performance cost */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Static radial gradient - no animation */
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 40%),
        radial-gradient(circle at 70% 70%, 
        rgba(192, 192, 192, 0.15) 0%, 
        transparent 40%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
    /* GPU acceleration */
    transform: translateZ(0);
}

/* OPTIMIZED: Simplified pattern overlay - reduced opacity calculations */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Simplified pattern with fewer calculations */
    background-image: 
        repeating-linear-gradient(45deg, 
            transparent, 
            transparent 40px, 
            rgba(255, 255, 255, 0.03) 40px, 
            rgba(255, 255, 255, 0.03) 80px);
    pointer-events: none;
    z-index: -1;
    opacity: 0.2;
    /* GPU acceleration */
    transform: translateZ(0);
}

/* Ensure sections maintain their styling */
main#main {
    position: relative;
    z-index: 1;
}

/* Hero section - PRESERVE background images */
.hero-section {
    position: relative;
}

/* Hero section WITHOUT background image */
    .hero-section:not([style*="background-image"]) {
        background: transparent !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

/* Page hero WITH background image */
.page-hero[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

/* Ensure overlay works well with background images */
.page-hero[style*="background-image"] .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Ensure content stays above overlay */
.page-hero .container,
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Hero section with page-hero-large class */
.page-hero-large {
    min-height: 500px;
}

/* OPTIMIZED: Removed expensive backdrop-filter, using opacity instead */
.features-section,
.categories-section,
.blog-section {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* Alternate sections for visual interest */
.categories-section,
.blog-section {
    background: linear-gradient(135deg, 
        rgba(240, 242, 245, 0.92) 0%, 
        rgba(255, 255, 255, 0.88) 50%, 
        rgba(240, 242, 245, 0.92) 100%) !important;
}

/* CTA section */
.cta-section {
    background: linear-gradient(135deg, 
        rgba(189, 195, 199, 0.95) 0%, 
        rgba(236, 240, 241, 0.95) 50%, 
        rgba(189, 195, 199, 0.95) 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* OPTIMIZED: Card enhancements - removed backdrop-filter for performance */
.card,
.feature-card,
.category-preview-card,
.blog-card {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* GPU acceleration for transforms on hover */
    transform: translateZ(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.feature-card:hover,
.category-preview-card:hover,
.blog-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12),
                0 2px 6px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.5);
    color:black;
    /* Use transform for hover effect instead of layout changes */
    transform: translateY(-2px) translateZ(0);
}

/* Footer */
footer {
    background: linear-gradient(135deg, 
        #2c3e50 0%, 
        #34495e 50%, 
        #2c3e50 100%) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* OPTIMIZED: Breadcrumb - removed backdrop-filter */
.breadcrumb {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Navbar enhancement */
.navbar.sticky-top {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* OPTIMIZED: Mobile search bar - removed backdrop-filter */
.d-lg-none.bg-light {
    background: rgba(248, 249, 250, 0.98) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* OPTIMIZED: Simplified text shadows for better performance */
.hero-content h1,
.section-title,
.cta-title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* OPTIMIZED: Glass morphism - removed backdrop-filter for performance */
.hero-card,
.cta-card {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* OPTIMIZED: Button hover effects using transform instead of heavy box-shadow changes */
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform: translateZ(0);
}

.btn:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    /* Use transform for performance */
    transform: translateY(-1px) translateZ(0);
}

/* Reduced motion preference - respect user preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    body,
    body::before,
    body::after {
        animation: none !important;
    }
}

/* Print styles */
@media print {
    body,
    body::before,
    body::after {
        background: white !important;
        animation: none !important;
    }
}

/* Performance optimization for mobile devices */
@media (max-width: 768px) {
    /* Simplify gradient on mobile for better performance */
  
    
    /* Remove pseudo-elements on mobile if needed */
    body::before,
    body::after {
        display: none;
    }
    
    /* Simplify shadows on mobile */
    .card,
    .feature-card,
    .category-preview-card,
    .blog-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* Optional: Add animation only for high-performance devices */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* Only animate on desktop with user consent for motion */
    .gradient-animated {
        background-size: 200% 200%;
        animation: subtleGradientShift 20s ease infinite;
    }
    
    @keyframes subtleGradientShift {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
}