/* 
 * CSS EMERGENCIAL para corrigir o menu de idiomas em telas pequenas
 * SOBREPÕE TODOS OS CSS CONFLITANTES COM MÁXIMA PRIORIDADE
 */

/* Base - Dropdown sempre inicia fechado */
#lang-dropdown,
.lang-dropdown,
#language-selector #lang-dropdown,
.language-selector #lang-dropdown,
#language-selector .lang-dropdown,
.language-selector .lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background-color: white;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10000;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 2px;
    transform: none;
    clip: auto;
    clip-path: none;
}

/* FORÇA o seletor de idiomas a ter posição relativa */
#language-selector,
.language-selector {
    position: relative !important;
    z-index: 9999 !important;
    display: inline-block !important;
}

/* FORÇA o botão a funcionar */
#lang-select-btn,
.lang-select {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
}

/* Links dentro do dropdown */
#lang-dropdown a,
.lang-dropdown a,
#language-selector #lang-dropdown a,
.language-selector #lang-dropdown a,
#language-selector .lang-dropdown a,
.language-selector .lang-dropdown a {
    color: #333 !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    display: block !important;
    transition: background-color 0.3s ease !important;
    background-color: transparent !important;
}

/* Hover nos links */
#lang-dropdown a:hover,
.lang-dropdown a:hover,
#language-selector #lang-dropdown a:hover,
.language-selector #lang-dropdown a:hover,
#language-selector .lang-dropdown a:hover,
.language-selector .lang-dropdown a:hover {
    background-color: #f5f5f5 !important;
}

/* Link ativo */
#lang-dropdown a.active,
.lang-dropdown a.active,
#language-selector #lang-dropdown a.active,
.language-selector #lang-dropdown a.active,
#language-selector .lang-dropdown a.active,
.language-selector .lang-dropdown a.active {
    background-color: #e9ecef !important;
    font-weight: 600 !important;
}

/* ESPECÍFICO PARA TELAS PEQUENAS - FORÇA MÁXIMA */
@media (max-width: 991px) {
    /* ANULA TODOS OS POSITION FIXED dos outros CSS */
    #lang-dropdown,
    .lang-dropdown,
    #language-selector #lang-dropdown,
    .language-selector #lang-dropdown,
    #language-selector .lang-dropdown,
    .language-selector .lang-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
    }
    
    /* FORÇA o container a ser relativo */
    #language-selector,
    .language-selector {
        position: relative !important;
        order: 4 !important;
        display: inline-block !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
    }
}

/* TELAS MUITO PEQUENAS */
@media (max-width: 480px) {
    #lang-dropdown,
    .lang-dropdown,
    #language-selector #lang-dropdown,
    .language-selector #lang-dropdown,
    #language-selector .lang-dropdown,
    .language-selector .lang-dropdown {
        right: -10px !important;
        min-width: 100px !important;
    }
    
    #lang-dropdown a,
    .lang-dropdown a,
    #language-selector #lang-dropdown a,
    .language-selector #lang-dropdown a,
    #language-selector .lang-dropdown a,
    .language-selector .lang-dropdown a {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}