/* ============================================
   MOBILE PERFORMANCE OPTIMIZATION
   Updated: Android Compatibility Fix
   ============================================ */

/* GPU Acceleration - Android WebView Fix */
* {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.animated {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ============================================
   ANDROID-SPECIFIC FIXES
   ============================================ */

/* Fix 1: Android Chrome ignores width:100vw with scrollbar gap */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Fix 2: Android flex/grid overflow bug */
.container,
[class*="container"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix 3: Android tap highlight (removes blue flash on tap) */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Fix 4: Android font rendering (Cairo font fallback) */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix 5: Android border-radius + overflow clip bug */
.product-card,
[class*="card"],
[class*="rounded"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ============================================
   MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Speed up animations on mobile */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }

    /* Disable AOS on mobile for performance */
    .aos-animate {
        animation: none !important;
    }

    /* Lighter shadows on mobile */
    .shadow {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Fix grid columns on small Android screens */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Fix horizontal scroll caused by wide elements */
    section,
    .section,
    [class*="section"] {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Fix hero section on Android */
    .hero-master,
    [class*="hero"] {
        width: 100%;
        min-height: auto;
    }

    /* Bigger tap targets for Android (min 48x48dp) */
    a, button, input, select, textarea, [role="button"] {
        min-height: 44px;
    }

    /* Fix sticky header z-index on Android Chrome */
    header,
    nav,
    .navbar,
    [class*="header"] {
        position: sticky;
        top: 0;
        z-index: 999;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Fix bottom padding for mobile nav bars */
    main,
    .main-content {
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }
}

/* ============================================
   SMALL ANDROID (max-width: 390px)
   ============================================ */
@media (max-width: 390px) {

    /* Force single column on very small screens */
    .grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* Reduce font sizes slightly */
    html {
        font-size: 14px;
    }

    /* Shrink padding on small screens */
    .container,
    [class*="container"] {
        padding-left: 12px;
        padding-right: 12px;
    }
}