/* Otimizações de Performance Mobile */

/* Desabilitar animações pesadas no mobile para melhor performance */
@media (max-width: 768px) {
    /* Remover animações do body */
    body {
        animation: none !important;
    }
    
    /* Remover animação do container */
    .container {
        animation: none !important;
    }
    
    /* Remover animações do header */
    header {
        animation: none !important;
    }
    
    header::before {
        display: none !important;
    }
    
    /* Remover animação do logo */
    .logo {
        animation: none !important;
    }
    
    /* Remover animação do contador */
    .counter-display {
        animation: none !important;
    }
    
    /* Remover animação dos botões */
    .btn-add-cart {
        animation: none !important;
    }
    
    /* Simplificar transições para melhor performance */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Otimizar renderização */
    .option-content {
        will-change: auto;
        transform: translateZ(0);
    }
    
    /* Reduzir sombras complexas */
    .container {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Simplificar gradientes animados */
    body {
        background: #9333EA !important;
    }
    
    header {
        background: linear-gradient(135deg, #B945E5, #9333EA) !important;
    }
    
    /* Otimizar scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Melhorar tap highlights */
    * {
        -webkit-tap-highlight-color: rgba(185, 69, 229, 0.2);
    }
    
    /* Desabilitar efeitos hover no mobile */
    .option-content:hover {
        transform: none !important;
    }
    
    .btn-add-cart:hover {
        transform: none !important;
    }
    
    /* Melhorar performance de imagens */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
    
    /* Reduzir padding no mobile */
    body {
        padding: 10px !important;
    }
    
    header {
        padding: 20px 15px !important;
    }
    
    /* Otimizar tamanho do logo */
    .logo {
        max-width: 200px !important;
        max-height: 200px !important;
    }
}

/* Performance geral */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lazy loading hint */
img {
    content-visibility: auto;
}
