/* ==========================================
   SELETOR DE IDIOMAS MODULAR
   Estilos modulares para o seletor de idiomas
   Permite personalização por página mantendo um único arquivo CSS

   Como usar:
   <div class="lang-selector lang-fixed lang-top-right lang-theme-dark lang-md">
       <button class="lang-btn active" data-lang="pt">PT</button>
       <span class="lang-separator">|</span>
       <button class="lang-btn" data-lang="en">EN</button>
       <span class="lang-separator">|</span>
       <button class="lang-btn" data-lang="es">ES</button>
   </div>
*/

/* ===== ESTILOS BASE ===== */
.lang-selector {
    /* Reset e base */
    all: initial;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    
    /* Aparência */
    background-color: rgba(18, 2, 43, 0.9) !important;
    border-radius: 20px !important;
    padding: 5px 10px !important;
    height: 30px !important;
    z-index: 10000 !important;
    
    /* Transições */
    transition: all 0.3s ease !important;
}

/* ===== POSICIONAMENTO ===== */
/* Fixo (padrão) */
.lang-fixed { position: fixed !important; }

/* Absoluto (dentro de um container posicionado) */
.lang-absolute { position: absolute !important; }

/* Relativo (dentro do fluxo normal) */
.lang-relative { 
    position: relative !important;
    display: inline-flex !important;
    margin: 10px auto !important;
}

/* Posições */
.lang-top-right { top: 40px !important; right: 25px !important; }
.lang-top-left { top: 40px !important; left: 25px !important; }
.lang-bottom-right { bottom: 40px !important; right: 25px !important; }
.lang-bottom-left { bottom: 40px !important; left: 25px !important; }
.lang-center { 
    top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important; 
}

/* ===== TAMANHOS ===== */
.lang-sm { 
    padding: 4px 8px !important;
    height: 28px !important;
    font-size: 13px !important;
}

.lang-md { 
    padding: 5px 10px !important;
    height: 30px !important;
    font-size: 14px !important;
}

.lang-lg { 
    padding: 8px 15px !important;
    height: 36px !important;
    font-size: 15px !important;
}

/* ===== TEMAS ===== */
/* Tema Escuro (padrão) */
.lang-theme-dark {
    background-color: rgba(18, 2, 43, 0.9) !important;
    color: #b794f4 !important;
}

/* Tema Roxo */
.lang-theme-purple {
    background-color: rgba(147, 51, 234, 0.9) !important;
    color: white !important;
}

/* Tema Claro */
.lang-theme-light {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #12022b !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* ===== ELEMENTOS ===== */
.lang-btn {
    /* Reset */
    all: initial;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important;
    
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Aparência */
    background: none !important;
    border: none !important;
    color: inherit !important;
    cursor: pointer !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 15px !important;
    transition: all 0.2s ease !important;
    min-width: 30px;
    text-align: center;
}

.lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.lang-btn.active {
    background-color: #9333EA !important;
    color: white !important;
    font-weight: 600 !important;
}

.lang-separator {
    color: inherit !important;
    opacity: 0.5 !important;
    margin: 0 2px !important;
    font-size: inherit !important;
    user-select: none;
}

/* ===== RESPONSIVIDADE ===== */
/* Desktop */
@media (min-width: 1025px) {
    .lang-selector {
        top: 50px !important;
    }
    
    /* Ajustes específicos para telas grandes */
    .lang-top-right { top: 50px !important; right: 30px !important; }
    .lang-top-left { top: 50px !important; left: 30px !important; }
}

/* Tablets */
@media (max-width: 1024px) and (min-width: 769px) {
    .lang-top-right { top: 35px !important; right: 20px !important; }
    .lang-top-left { top: 35px !important; left: 20px !important; }
}

/* Mobile */
@media (max-width: 768px) {
    .lang-top-right { 
        top: 25px !important; 
        right: 15px !important; 
        left: auto !important;
    }
    
    .lang-top-left { 
        top: 25px !important; 
        left: 15px !important;
        right: auto !important;
    }
    
    .lang-bottom-right { 
        bottom: 25px !important; 
        right: 15px !important;
        left: auto !important;
    }
    
    .lang-bottom-left { 
        bottom: 25px !important; 
        left: 15px !important;
        right: auto !important;
    }
    
    .lang-sm { 
        padding: 3px 6px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
    
    .lang-md { 
        padding: 4px 8px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
    
    .lang-btn {
        min-width: 28px;
        padding: 2px 6px !important;
        font-size: 13px !important;
    }
}

/* Dispositivos muito pequenos */
@media (max-width: 480px) {
    .lang-selector {
        padding: 5px 8px !important;
        border-radius: 16px !important;
    }
    
    .lang-btn {
        font-size: 12px !important;
        padding: 2px 5px !important;
        min-width: 26px !important;
    }
    
    .lang-separator {
        margin: 0 1px !important;
        font-size: 12px !important;
    }
}

/* Garantir que o seletor fique visível mesmo com o menu aberto */
.mobile-menu-overlay {
    z-index: 999 !important; /* Um pouco menor que o do seletor */
}

/* Garantir que o botão do menu não cubra o seletor */
.mobile-menu-toggle {
    z-index: 998 !important;
}

/* Classe para esconder o seletor em determinadas telas */
.hide-on-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    .show-on-mobile {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .show-on-mobile {
        display: none !important;
    }
    
    .hide-on-mobile {
        display: flex !important;
    }
}

/* Garantir que o cabeçalho não cubra o seletor */
.header {
    z-index: 997 !important;
}