/* Header Mobile & Tablet Configurations */
/* Configurações específicas para header em telas pequenas e tablets */

/* ========================================
   CONFIGURAÇÕES PARA TABLETS
   ======================================== */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Ajustes para tablets */
    header .logo { 
        position: absolute !important; 
        left: 48% !important; 
        top: -50% !important; 
        transform: translate(-50%,-50%) !important; 
        z-index: 1006; 
    }
    
    header .logo img { 
        height: 120px !important; 
        width: auto !important; 
        display: block !important; 
        opacity: 1 !important; 
        filter: none !important; 
        
    }
    
    .right-section { 
        position: absolute !important; 
        right: 0px !important; 
        top: 50% !important; 
        transform: translateY(-50%) !important; 
        gap: 8px; 
        z-index: 1004; 
        display: inline-flex; 
        align-items: center; 
        height: 36px; 
        padding-right: 8px !important; 
    }
}

/* ========================================
   CONFIGURAÇÕES PARA MOBILE
   ======================================== */
@media (max-width: 767px) {
    /* Logo mais para cima e menor em mobile */
    header .logo { 
        position: absolute !important; 
        left: 50% !important; 
        top: -130% !important; 
        transform: translate(-50%,-50%) !important; 
        z-index: 1006; 
    }
    
    header .logo img { 
        height: 100px !important; 
        width: auto !important; 
        display: block !important; 
        opacity: 1 !important; 
        filter: none !important; 
    }
    
    /* Envelope mais próximo do botão de idiomas */
    .right-section { 
        position: absolute !important; 
        right: 0px !important; 
        top: 25% !important; 
        transform: translateY(-50%) !important; 
        gap: 0px; 
        z-index: 1004; 
        display: inline-flex; 
        align-items: center; 
        height: 36px; 
        padding-right: 8px !important; 
    }
    
    /* Botão envelope com melhor espaçamento */
    .btn-informe-se {
        margin-right: 5px !important;
    }
    
    /* Seletor de idioma otimizado para mobile */
    .language-selector { 
        display: inline-flex !important; 
        position: static !important; 
        align-items: center !important; 
        right: 0px !important;
    }
    
    .language-selector .lang-select {
        background: transparent !important;
        color: #fff !important;
        border: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
    }
}

/* ========================================
   CONFIGURAÇÕES PARA TELAS MUITO PEQUENAS
   ======================================== */
@media (max-width: 480px) {
    /* Logo ainda mais compacto */
    header .logo { 
        top: -90% !important; 
    }
    
    header .logo img { 
        height: 80px !important; 
    }
    
    /* Espaçamento ainda mais próximo */
    .right-section { 
        gap: 10px; 
        padding-right: 5px !important; 
    }
    
    /* Botão hambúrguer mais acessível */
    .mobile-menu-toggle, 
    #mobile-menu-toggle { 
        left: 8px !important; 
        padding: 8px !important; 
        font-size: 26px !important; 
    }
}

/* ========================================
   MELHORIAS GERAIS PARA TODOS OS TAMANHOS
   ======================================== */
@media (max-width: 1024px) {
    /* Garantir que o header não tenha overflow */
    header {
        overflow: hidden !important;
    }
    
    /* Melhor transição para mudanças de tamanho */
    header .logo,
    header .logo img,
    .right-section {
        transition: all 0.3s ease !important;
    }
    
    /* Garantir que elementos não se sobreponham */
    .mobile-menu-toggle {
        z-index: 9999 !important;
    }
    
    /* Melhor contraste para botões */
    .btn-informe-se i {
        color: #fff !important;
        font-size: 20px !important;
    }
}