/* ============================================
   MOBILE-ONLY PERFORMANCE OPTIMIZATIONS
   Desktop is NOT affected
   ============================================ */

@media (max-width: 768px) {

    /* Mobile: Reduce animations for better performance */
    .fade-in-up,
    .car-body {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Mobile: Smaller touch targets optimized */
    .carousel-control-prev,
    .carousel-control-next {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px;
        min-height: 56px;
    }

    /* Mobile: Reduce WhatsApp button size to save screen space */
    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        bottom: 20px !important;
        left: 20px !important;
    }

    /* Mobile: Hide on scroll to save space */
    .whatsapp-float.scrolled {
        opacity: 0.7;
        transform: scale(0.85);
    }

    /* Mobile: Optimize brand ticker - show fewer logos */
    .trust-ticker-track {
        animation-duration: 25s !important;
        /* Slower for mobile */
    }

    /* Mobile: Reduce shadow complexity for better rendering */
    .car-card,
    .car-details-section,
    .filters-section {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    /* Mobile: Simplify gradients for faster paint */
    .btn-primary,
    .whatsapp-order-btn {
        background: var(--primary-color) !important;
    }

    /* Mobile: Disable expensive transforms on scroll */
    .car-card:hover {
        transform: none !important;
    }

    /* Mobile: Reduce image quality slightly for faster decode */
    img {
        image-rendering: auto;
    }

    /* Mobile: Optimize font rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
        /* Faster on mobile */
    }
}

/* Mobile: Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}