/**
 * Performance Optimizations for PageSpeed
 * Critical performance improvements to boost mobile scores
 */

/* ========================================
   CRITICAL RENDERING OPTIMIZATIONS
   ======================================== */

/* Prevent layout shifts with proper aspect ratios - avoid list view conflicts */
.esim-card {
    aspect-ratio: 1 / 1.2;
    min-height: 200px;
}

/* Only apply to grid view plan cards to avoid list view conflicts */
.esim-plans-grid:not([data-view="list"]) .esim-plan-card {
    min-height: 200px;
}

.esim-card img,
.esim-plan-card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Optimize font loading to prevent FOIT/FOUT */
.esim-card-title,
.esim-plan-title,
h1, h2, h3 {
    font-display: swap;
}

/* Critical above-the-fold styles */
.esim-hero,
.esim-destinations-header {
    contain: layout style paint;
    will-change: transform;
}

/* Optimize images for faster loading */
.esim-card img,
.esim-flag img,
.country-flag {
    loading: lazy;
    decoding: async;
}

/* ========================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce repaints on mobile */
@media (max-width: 768px) {
    .esim-modal-content {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Optimize scrolling performance */
    .esim-modal-body {
        will-change: scroll-position;
        contain: strict;
    }
    
    /* Reduce animation complexity on mobile */
    .esim-card:hover,
    .network-list li:hover {
        transform: none;
    }
    
    /* Simplify gradients on mobile for better performance */
    .esim-modal-content,
    .country-coverage,
    .esim-info-section {
        background: #ffffff !important;
    }
}

/* ========================================
   REDUCE UNUSED CSS
   ======================================== */

/* Remove complex box-shadows on mobile */
@media (max-width: 768px) {
    .esim-modal-content,
    .country-coverage,
    .esim-info-section,
    .network-list li {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Optimize animations for 60fps */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* Remove will-change after animations complete */
.esim-modal-content.animation-complete {
    will-change: auto;
}

/* ========================================
   CRITICAL CSS INLINING CANDIDATES
   ======================================== */

/* These styles should be inlined for critical path */
.esim-loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* ========================================
   REDUCE SPECIFICITY FOR BETTER PERFORMANCE
   ======================================== */

/* Simplified selectors */
[class*="esim-btn"] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

[class*="esim-btn"]:hover {
    opacity: 0.9;
}

[class*="esim-modal"] {
    box-sizing: border-box;
}

/* ========================================
   OPTIMIZE FOR CUMULATIVE LAYOUT SHIFT
   ======================================== */

/* Reserve space for dynamic content */
.esim-coverage-content:empty,
.esim-info-content:empty {
    min-height: 200px;
    background: #f8f9fa;
}

/* Prevent layout shift from loading states */
.esim-loading {
    min-height: 100px;
    display: flex !important;
}

/* ========================================
   PERFORMANCE HINTS
   ======================================== */

/* GPU acceleration for smooth animations */
.esim-modal,
.esim-modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize repaints */
.esim-modal-body {
    contain: layout style paint;
}

/* ========================================
   BANDWIDTH OPTIMIZATIONS
   ======================================== */

/* Reduce gradient complexity */
@media (max-width: 480px) {
    [style*="background: linear-gradient"],
    [style*="background: radial-gradient"] {
        background: #ffffff !important;
    }
    
    /* Simplify borders */
    .country-coverage::before,
    .esim-info-section::before,
    .esim-modal-header::before {
        display: none !important;
    }
}

/* ========================================
   CRITICAL RESOURCE HINTS
   ======================================== */

/* These should be added to functions.php */
/*
<link rel="preload" href="/wp-content/themes/blocksy-child/assets/css/modal-styles.css" as="style">
<link rel="preload" href="/wp-content/themes/blocksy-child/assets/js/destination-quick-add.js" as="script">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="//ajax.googleapis.com">
*/