/* Enhanced Mobile Performance CSS */
/* Optimasi Performa Mobile yang Diperbaiki */

/* Prevent zoom on input focus */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        transform: scale(1);
    }
}

/* Enhanced Touch Targets */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* Performance Optimizations */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* GPU Acceleration for smooth animations */
.progressive-jackpot,
.lw-horizontal-slider,
.popular-games-section,
.slider-container {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimized scrolling */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Reduce motion for better performance */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    /* Reduce expensive operations */
    .jackpot-amount {
        animation-duration: 4s;
    }
    
    .progressive-jackpot::before,
    .progressive-jackpot::after {
        animation-duration: 6s;
    }
    
    /* Optimize image rendering */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        transform: translateZ(0);
    }
    
    /* Better button performance */
    button, .btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        transform: translateZ(0);
    }
    
    /* Improved form controls */
    input, select, textarea {
        min-height: 44px;
        padding: 12px 15px;
        font-size: 16px;
        border-radius: 8px;
        transform: translateZ(0);
    }
    
    /* Better navigation performance */
    .nav-item, .menu-item {
        min-height: 48px;
        padding: 12px 15px;
        touch-action: manipulation;
        transform: translateZ(0);
    }
    
    /* Optimize container spacing */
    .container, .main-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Ultra small screen optimizations */
@media (max-width: 480px) {
    /* Reduce animation complexity */
    .lw-loop-content ul {
        animation-duration: 15s;
        animation-timing-function: linear;
    }
    
    /* Simplify gradients for better performance */
    .progressive-jackpot {
        background-size: 200% 200%;
    }
    
    /* Optimize touch targets */
    .payment-btn,
    .category-item,
    .nav-item {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Prevent horizontal scroll */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Safe area handling for notched devices */
@supports (padding: max(0px)) {
    .header {
        padding-top: max(10px, env(safe-area-inset-top));
    }
    
    .bottom-nav {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* Better focus visibility */
*:focus {
    outline: 2px solid #f4cf3c;
    outline-offset: 2px;
}

/* Optimize loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Better text rendering */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        line-height: 1.2;
    }
}

/* Memory optimization */
@media (max-width: 480px) {
    /* Reduce shadow complexity */
    .box-shadow-heavy {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    /* Simplify border radius */
    .border-radius-complex {
        border-radius: 8px;
    }
}