/* ===== CORREÇÕES ESPECÍFICAS PARA MOBILE ===== */

/* Remover highlights azuis ao tocar em dispositivos móveis */
@media (max-width: 1023px) {
    /* Aplicar a todos os elementos */
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Permitir seleção de texto em campos de input e textarea */
    input, textarea, [contenteditable="true"] {
        -webkit-user-select: text !important;
        -khtml-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
    }
    
    /* Remover outlines padrão em botões e links */
    button, a, input, select, textarea {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        border: none !important;
    }
    
    /* Estilo para estado ativo em botões */
    button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Estilo para estado ativo em links */
    a:active {
        opacity: 0.8 !important;
        transition: opacity 0.1s ease !important;
    }
    
    /* Melhorar feedback visual para elementos clicáveis */
    .clickable, button, a {
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .clickable:active, button:active, a:active {
        transform: scale(0.95) !important;
        opacity: 0.9 !important;
    }
}

/* Estilos específicos para mobile pequeno */
@media (max-width: 767px) {
    /* Garantir área de toque adequada */
    button, a, input, select, textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remover bordas pretas do menu hambúrguer */
    #hamburger-btn {
        border: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        background: transparent !important;
    }
    
    /* Remover bordas pretas do menu mobile */
    .menu {
        border: none !important;
        outline: none !important;
    }
    
    .menu ul li a {
        border: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Melhorar feedback visual para botões */
    .add-to-cart-btn:active {
        transform: scale(0.95) !important;
        background-color: var(--secondary-color) !important;
        transition: all 0.1s ease !important;
    }
    
    /* Melhorar feedback visual para botões da página principal */
    .all-products-container button:active {
        transform: translateY(0) !important;
        background-color: #003d5a !important;
        transition: all 0.1s ease !important;
    }
    
    /* Melhorar feedback visual para botões da página individual */
    button:active {
        transform: scale(0.98) !important;
        transition: all 0.1s ease !important;
    }
    
    /* Melhorar feedback visual para botões da loja */
    .reset-filters-btn:active,
    .clear-saved-state-btn:active {
        transform: scale(0.98) !important;
        transition: all 0.1s ease !important;
    }
}

/* Estilos específicos para tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Aplicar estilos similares para tablet */
    button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    a:active {
        opacity: 0.8 !important;
        transition: opacity 0.1s ease !important;
    }
    
    /* Remover highlights em tablet */
    #hamburger-btn {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
}

/* ===== CORREÇÕES ESPECÍFICAS PARA NAVEGAÇÃO ===== */

/* Remover bordas pretas do header em mobile */
@media (max-width: 767px) {
    header {
        border: none !important;
        outline: none !important;
    }
    
    .header-container {
        border: none !important;
        outline: none !important;
    }
    
    /* Garantir que o menu hambúrguer não tenha bordas */
    #hamburger-btn {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Garantir que o menu mobile não tenha bordas */
    .menu {
        background: var(--primary-color) !important;
        border: none !important;
        outline: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    .menu ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    
    .menu ul li:last-child {
        border-bottom: none !important;
    }
}

/* ===== CORREÇÕES PARA ELEMENTOS INTERATIVOS ===== */

/* Remover highlights de todos os botões em mobile */
@media (max-width: 1023px) {
    .add-to-cart-btn,
    .all-products-container button,
    .reset-filters-btn,
    .clear-saved-state-btn,
    button[type="button"],
    button[type="submit"],
    button[type="reset"] {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        outline: none !important;
        border: none !important;
    }
}

/* ===== MELHORIAS DE ACESSIBILIDADE ===== */

/* Manter foco visível apenas quando necessário */
@media (max-width: 1023px) {
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid var(--primary-color) !important;
        outline-offset: 2px !important;
    }
}

/* ===== CORREÇÕES PARA NAVEGADORES ESPECÍFICOS ===== */

/* Safari iOS */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 1023px) {
        * {
            -webkit-tap-highlight-color: transparent !important;
        }
    }
}

/* Chrome Android */
@supports (-webkit-appearance: none) {
    @media (max-width: 1023px) {
        * {
            -webkit-tap-highlight-color: transparent !important;
        }
    }
}