/* --- PROTOCOLO UNDERGOTH: LOGIN WALL --- */

/* Textos e Labels em Cinza Salino */
.um .um-form label,
.um .um-form .um-field-area {
    color: #8A8D92 !important;
    font-family: 'Courier Prime', monospace !important;
}

/* Campos de digitação: Fundo transparente, borda cinza, texto branco */
.um .um-form input[type=text], 
.um .um-form input[type=password], 
.um .um-form input[type=email] {
    background-color: transparent !important;
    border: 1px solid #8A8D92 !important;
    color: #ffffff !important;
    border-radius: 0px !important; /* Mantém o visual duro/brutalista */
}

/* Botão Principal (Login) - Vermelho Sangue */
.um input[type=submit].um-button, 
.um input[type=submit].um-button:focus {
    background-color: #7A0A0A !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0px !important;
    font-family: 'Courier Prime', monospace !important;
    text-transform: uppercase;
}

/* Efeito Hover do Botão Principal (Fica mais escuro) */
.um input[type=submit].um-button:hover {
    background-color: #4a0505 !important;
}

/* Botão Secundário (Register) - Cinza Salino e Transparente */
.um .um-button.um-alt, 
.um .um-button.um-alt:focus {
    background-color: transparent !important;
    color: #8A8D92 !important;
    border: 1px solid #8A8D92 !important;
    border-radius: 0px !important;
    font-family: 'Courier Prime', monospace !important;
}

/* Efeito Hover do Botão Secundário */
.um .um-button.um-alt:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Links pequenos (Esqueceu a senha) */
.um .um-form a.um-link-alt {
    color: #8A8D92 !important;
}

/* Efeito Sticky Blur - NbN */
.nbn-header-fixo {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Preto com 50% de transparência */
    backdrop-filter: blur(15px); /* O desfoque do fundo */
    -webkit-backdrop-filter: blur(15px); /* Suporte para Safari/iOS */
    transition: background-color 0.3s ease;
}

/* Barras Divisórias do Menu Principal - Estética Noir */
.menu-com-barras ul > li:not(:last-child) {
    position: relative;
    margin-right: 15px !important; /* Espaço após a palavra */
}

.menu-com-barras ul > li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -15px; /* Posição da barra entre as palavras */
    top: 50%;
    transform: translateY(-50%);
    color: #FFFFFF; /*Branco */
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
    opacity: 0.6; /* Deixa a barra um pouco mais discreta */
    pointer-events: none; /* Garante que a barra não atrapalhe o clique do mouse */
}

/* Correção HFE - Alinhamento Avatar e Sair em blocos separados */
.menu-usuario ul.hfe-nav-menu {
    display: flex !important;
    align-items: center !important; /* Centraliza a linha inteira (a foto e a palavra Sair) */
    margin: 0 !important;
}

/* Força os itens individuais a ficarem alinhados pelo meio perfeito */
.menu-usuario ul.hfe-nav-menu > li,
.menu-usuario ul.hfe-nav-menu > li > a.hfe-menu-item {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

/* Estética do Avatar (Círculo, borda da Camarilla e sem margens loucas) */
.menu-usuario img.avatar, 
.menu-usuario img.um-avatar,
.menu-usuario img.gravatar {
    border-radius: 50% !important; 
    border: 1px solid rgba(122, 10, 10, 0.4) !important;
    margin: 0 !important;
    display: block !important;
    vertical-align: middle !important;
}

/* ========================================= */
/* OVERRIDE: ULTIMATE MEMBER - ESTÉTICA NOIR */
/* ========================================= */

/* Fundo da página e das caixas de perfil */
.um, .um-profile, .um-form {
    background-color: transparent !important;
}

/* Campos de preenchimento (Inputs) */
.um .um-form input[type=text], 
.um .um-form input[type=password], 
.um .um-form input[type=email], 
.um .um-form textarea {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Fundo translúcido escuro */
    border: 1px solid #333 !important; /* Borda cinza chumbo */
    color: #f5f5f5 !important; /* Texto claro */
    border-radius: 2px !important; /* Bordas retas e secas */
    padding: 15px !important;
}

/* Campos de preenchimento quando clicados (Focus) */
.um .um-form input:focus, 
.um .um-form textarea:focus {
    border-color: #7A0A0A !important; /* Acende a borda vermelha */
    box-shadow: none !important;
    outline: none !important;
}

/* Botões de Ação (Entrar, Registrar, Salvar) */
.um .um-button, .um input[type=submit].um-button {
    background-color: #7A0A0A !important; /* Vermelho Sangue */
    color: #fff !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: bold !important;
    transition: all 0.3s ease;
}

.um .um-button:hover, .um input[type=submit].um-button:hover {
    background-color: #500000 !important; /* Vermelho mais escuro no hover */
}

/* Textos e Labels */
.um .um-form label, .um .um-form .um-field-label {
    color: #ccc !important;
    font-family: 'Cinzel', serif !important; /* Trazendo a fonte do projeto */
}

/* Forçar ícone do Menu Hambúrguer em Branco e Vermelho no Hover */
.hfe-nav-menu-icon {
    color: #ffffff !important; /* Branco absoluto */
    font-size: 30px !important; /* Tamanho do ícone no dedo */
}

.hfe-nav-menu-icon:hover {
    color: #7A0A0A !important; /* Vermelho sangue ao tocar */
}

/* Garante que o menu de conta não quebre linha no mobile */
@media (max-width: 767px) {
    .menu-usuario ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        list-style: none !important;
        padding: 0 !important;
    }
    
    .menu-usuario li {
        margin-left: 10px !important;
    }
}

/* Forçar o preenchimento do ícone SVG do HFE para Branco */
.hfe-nav-menu__toggle svg,
.hfe-nav-menu__toggle svg path,
.hfe-nav-menu-icon svg path {
    fill: #ffffff !important; 
    transition: fill 0.3s ease;
}

/* Fica Vermelho Sangue quando o dedo/mouse encosta */
.hfe-nav-menu__toggle:hover svg,
.hfe-nav-menu__toggle:hover svg path,
.hfe-nav-menu-icon:hover svg path {
    fill: #7A0A0A !important;
}

/* Remove o fundo cinza bizarro que às vezes aparece ao clicar */
.hfe-nav-menu__toggle {
    background: transparent !important;
    border: none !important;
}

/* Estética do Menu Mobile Aberto (Fumê Denso) */
nav.hfe-dropdown,
.hfe-nav-menu__layout-horizontal .hfe-dropdown {
    background-color: rgba(0, 0, 0, 0.85) !important; /* Mais escuro que o Header */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: 2px solid #7A0A0A !important; /* Linha vermelha separando o Header do Menu */
    padding-top: 10px !important;
}

/* Os links dentro do Menu Mobile */
.hfe-dropdown li a {
    color: #f5f5f5 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* Linha divisória super fina e escura */
    padding: 15px 20px !important;
}

/* Efeito ao tocar nos links do Menu Mobile */
.hfe-dropdown li a:hover,
.hfe-dropdown li a:active {
    color: #7A0A0A !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Derretendo o fundo branco dos links no Mobile */
.hfe-dropdown, 
.hfe-dropdown ul, 
.hfe-dropdown li, 
.hfe-dropdown a {
    background-color: transparent !important;
    background: transparent !important;
}

/* Aplicando o vidro fumê denso SÓ na caixa mestre */
nav.hfe-dropdown {
    background-color: rgba(0, 0, 0, 0.9) !important; /* Quase breu total */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: 2px solid #7A0A0A !important;
}

/* Garantindo que o texto fique branco e legível */
.hfe-dropdown a {
    color: #f5f5f5 !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ========================================= */
/* BOTÕES DO MENU DE USUÁRIO (ENTRAR/SAIR)   */
/* ========================================= */

.menu-usuario .botao-pacto a {
    border: 1px solid #7A0A0A !important; /* Borda fina vermelho sangue */
    padding: 8px 18px !important; /* Espaço interno para dar formato de botão */
    border-radius: 2px !important; /* Cantos quase retos, brutalista */
    text-transform: uppercase !important; /* Força letras maiúsculas */
    font-size: 13px !important;
    letter-spacing: 1px !important;
    background-color: transparent !important;
    color: #f5f5f5 !important;
    transition: all 0.3s ease !important; /* Animação suave */
    height: auto !important;
    margin-left: 10px !important; /* Descola um botão do outro */
}

/* Efeito Hover (Quando o mouse passa) */
.menu-usuario .botao-pacto a:hover {
    background-color: #7A0A0A !important; /* Preenche de vermelho */
    color: #ffffff !important; /* Letra fica super branca */
    box-shadow: 0 0 12px rgba(122, 10, 10, 0.4) !important; /* Leve brilho de neon decadente */
}

/* Ajuste no Mobile para os botões não ficarem esmagados */
@media (max-width: 767px) {
    .menu-usuario .botao-pacto a {
        padding: 6px 12px !important;
        font-size: 11px !important;
        margin-left: 5px !important;
    }
}

/* Customização Profunda Ultimate Member - Estética NbN */

/* Fundo do formulário e textos */
.um-form, .um-account-main, .um-profile {
    background-color: transparent !important;
}

/* Labels e Títulos (Fonte de RPG) */
.um .um-form label, .um .um-field-label {
    color: #ccc !important;
    font-family: 'Cinzel', serif !important; /* Ou a fonte que você estiver usando */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Campos de entrada (Inputs) */
.um .um-form input[type=text], 
.um .um-form input[type=password], 
.um .um-form input[type=email], 
.um .um-form textarea {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 0px !important; /* Brutalismo: nada de bordas redondas */
    padding: 12px !important;
}

/* Foco no Input (A chama vermelha) */
.um .um-form input:focus {
    border-color: #7A0A0A !important;
    box-shadow: 0 0 8px rgba(122, 10, 10, 0.3) !important;
}

/* Botão Principal de Ação */
.um .um-button, .um input[type=submit].um-button {
    background-color: #7A0A0A !important;
    color: #fff !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    transition: 0.3s;
}

.um .um-button:hover {
    background-color: #500000 !important;
    box-shadow: 0 0 15px rgba(122, 10, 10, 0.5) !important;
}

/* Esconder bordas e decorações desnecessárias */
.um-field-area {
    border: none !important;
}

/* Forçar TODOS os itens da conta (Entrar, Registrar, Sair) na mesma linha */
.menu-usuario ul,
.menu-usuario .elementor-nav-menu,
.menu-usuario ul.hfe-nav-menu {
    display: flex !important;
    flex-direction: row !important; /* A regra de ouro: Linha horizontal */
    align-items: center !important;
    justify-content: flex-end !important; /* Empurra tudo pra ponta direita */
    flex-wrap: nowrap !important; /* Proíbe terminantemente a quebra de linha */
    width: auto !important;
}

/* Evitar que os blocos individuais tentem pular de linha */
.menu-usuario ul li,
.menu-usuario ul.hfe-nav-menu > li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* ======================================================== */
/* SISTEMA DE CARDS NPC - NICTHEROY BY NIGHT (VERSÃO FINAL) */
/* ======================================================== */

/* ---------------------------------------------------
   1. O CONTÊINER PRINCIPAL (ESTADO FRIO)
--------------------------------------------------- */
.card-npc {
    position: relative;
    overflow: hidden !important;
    cursor: pointer;
    filter: grayscale(100%) contrast(110%);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* O Grão Cinematográfico (Ruído SVG) e Camada de Escuridão */
.card-npc::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    /* Gera a textura de filme analógico via código */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    background-color: transparent;
    z-index: 10;
    transition: all 0.5s ease;
    opacity: 0.6; /* Muito ruído no estado frio */
}

/* ---------------------------------------------------
   2. INTERAÇÃO LEVE (HOVER - O SALTO VALORANT)
--------------------------------------------------- */
.card-npc:hover {
    transform: translateY(-10px); /* Pula levemente pra cima */
    filter: grayscale(30%) contrast(120%); /* Revela um pouco da cor */
    box-shadow: 0 20px 30px rgba(122, 10, 10, 0.25) !important;
}

.card-npc:hover::after {
    opacity: 0.15; /* Dissipa a névoa para focar no personagem */
}

.card-npc:hover .etiqueta-npc {
    border-bottom: 3px solid #7A0A0A !important;
    background-color: rgba(0, 0, 0, 1) !important;
}

/* ---------------------------------------------------
   3. A ETIQUETA DO NOME (FIXADA NO RODAPÉ)
--------------------------------------------------- */
.card-npc .etiqueta-npc {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 30 !important; /* Garante que o nome fique acima do texto longo */
    transition: all 0.3s ease !important;
    border-bottom: 3px solid transparent;
}

/* ---------------------------------------------------
   4. A LORE (ESMAGADA E INVISÍVEL NO ESTADO FRIO)
--------------------------------------------------- */
.lore-npc {
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Matando as margens padrão do WordPress que estragam o layout */
.lore-npc p, 
.lore-npc div, 
.lore-npc .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    transition: margin 0.5s ease !important;
}

/* ---------------------------------------------------
   5. A MÁGICA: O CLIQUE (FOCUS - A EXPANSÃO FLUIDA)
--------------------------------------------------- */
.card-npc:focus {
    transform: scale(1.3) !important; /* Cresce 30% pra frente da tela */
    z-index: 9999 !important; /* Fica acima de todas as outras colunas */
    /* Esse box-shadow cria o blackout no site inteiro ao redor do card */
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.85), 
                0 30px 50px rgba(122, 10, 10, 0.4) !important;
    outline: none !important;
    cursor: default;
}

/* Aplica o Fumê de 65% pra dar leitura ao texto sem sumir com a foto */
.card-npc:focus::after {
    opacity: 1 !important; 
    background-color: rgba(0, 0, 0, 0.65) !important; 
}

/* Acende a etiqueta de nome */
.card-npc:focus .etiqueta-npc {
    border-bottom: 2px solid #7A0A0A !important;
    background-color: transparent !important;
}

/* Desdobra o texto e aciona o freio anti-atropelamento */
.card-npc:focus .lore-npc {
    max-height: 800px !important; 
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 20 !important;
    color: #ffffff !important; /* Texto brutalmente branco */
    padding-top: 20px !important;
    padding-bottom: 90px !important; /* O ESPAÇO QUE IMPEDE BATER NO NOME */
}

/* Devolve as margens dos parágrafos e aplica um sombreado pra leitura */
.card-npc:focus .lore-npc p {
    margin-bottom: 15px !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
}

/* ---------------------------------------------------
   6. CONTROLE DE DANOS (RESPONSIVO MOBILE)
--------------------------------------------------- */
@media (max-width: 767px) {
    .card-npc:focus {
        transform: scale(1.05) !important; /* Não deixa explodir a tela do celular */
    }
    .card-npc:focus .lore-npc {
        padding-bottom: 70px !important; 
    }
}