/* =====================================================================
   POPUPS DE LOGIN / CADASTRO / RECUPERAR SENHA - modelo Brabet
   Abas "Entrar | Cadastre-se" no topo, rótulo acima de cada campo,
   campos escuros sem borda e botão roxo. Só visual: formulários, ids,
   nomes dos campos e JS continuam os mesmos.
   ===================================================================== */
#modalLogin, #modalCadastro, #modalRecuperarSenha{
    --au-bg:#151d2b; --au-field:#0f1726; --au-line:#232f44;
    --au-muted:#6b7a99; --au-accent:#6a4bf0; --au-accent-h:#7b5ef5; --au-red:#f5224f;
    max-width:440px; padding:0; overflow:hidden;
    background:var(--au-bg); color:#fff; border-radius:6px;
    box-shadow:0 10px 40px rgba(0,0,0,.65);
    font-family:'Montserrat',Arial,sans-serif; font-weight:600;
}
#modalCadastro{max-height:94vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#modalLogin .modal-content, #modalCadastro .modal-content, #modalRecuperarSenha .modal-content{padding:0}

/* ---- topo: abas + fechar ---- */
#modalLogin .auth-tabs, #modalCadastro .auth-tabs{
    display:flex; align-items:stretch; justify-content:center; gap:6px;
    padding:0 56px 0 16px; border-bottom:1px solid var(--au-line);
}
#modalLogin .auth-tab, #modalCadastro .auth-tab{
    appearance:none; background:none; border:0; margin:0; cursor:pointer;
    padding:18px 22px 14px; font:inherit; font-size:15px; font-weight:700;
    color:#8d98ad; border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:color .15s,border-color .15s;
}
#modalLogin .auth-tab:hover, #modalCadastro .auth-tab:hover{color:#fff}
#modalLogin .auth-tab.active, #modalCadastro .auth-tab.active{color:#fff;border-bottom-color:var(--au-accent)}

#modalLogin .close-modal, #modalCadastro .close-modal, #modalRecuperarSenha .close-modal{
    top:12px; right:14px; width:34px; height:34px; z-index:2;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#8fb4ff; border-radius:8px; transition:color .15s,background .15s;
}
#modalLogin .close-modal:hover, #modalCadastro .close-modal:hover, #modalRecuperarSenha .close-modal:hover{color:#fff;background:rgba(255,255,255,.06)}

/* título: some nas abas (continua no HTML p/ leitores de tela); aparece só em Recuperar senha */
#modalLogin .modal-content > h2, #modalCadastro .modal-content > h2{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
#modalRecuperarSenha .modal-content > h2{
    text-align:left; color:#fff; font-size:17px; font-weight:700; margin:0;
    padding:20px 56px 16px 22px; border-bottom:1px solid var(--au-line);
}

/* ---- corpo ---- */
#modalLogin form, #modalCadastro form, #modalRecuperarSenha form{padding:20px 22px 0}
#modalLogin #alerta-login, #modalCadastro #alerta-cadastro, #modalRecuperarSenha #alerta-senha{
    width:auto; margin:14px 22px 0; font-size:13px;
}
#modalLogin .form-row, #modalCadastro .form-row, #modalRecuperarSenha .form-row{
    display:block; margin:0 0 16px; gap:0;
}
.auth-label{
    display:block; margin:0 0 8px; color:var(--au-muted);
    font-size:13px; font-weight:600; line-height:1.2;
}
.auth-label b{color:var(--au-red);font-weight:700;margin-left:2px}

#modalLogin .input-icon, #modalCadastro .input-icon, #modalRecuperarSenha .input-icon{margin:0}
#modalLogin .input-icon i, #modalCadastro .input-icon i, #modalRecuperarSenha .input-icon i{
    left:14px; color:#59677c; font-size:14px; transition:color .15s;
}
#modalLogin .input-icon:focus-within i, #modalCadastro .input-icon:focus-within i, #modalRecuperarSenha .input-icon:focus-within i{color:#8b7bff}
#modalLogin .input-icon input, #modalCadastro .input-icon input, #modalRecuperarSenha .input-icon input{
    height:46px; padding:0 14px 0 40px; background:var(--au-field);
    border:1px solid transparent; border-radius:8px; color:#fff;
    font-family:inherit; font-size:14px; font-weight:600;
    transition:border-color .15s,background .15s;
}
#modalLogin .input-icon input:focus, #modalCadastro .input-icon input:focus, #modalRecuperarSenha .input-icon input:focus{
    border-color:var(--au-accent); background:#0c1322;
}
#modalLogin .input-icon input::placeholder, #modalCadastro .input-icon input::placeholder, #modalRecuperarSenha .input-icon input::placeholder{
    font-family:inherit; color:#4b5870; font-weight:500; font-size:14px;
}
#modalLogin input:-webkit-autofill, #modalCadastro input:-webkit-autofill, #modalRecuperarSenha input:-webkit-autofill{
    -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px #0f1726 inset; caret-color:#fff;
}

/* ---- botões ---- */
#modalLogin .submit-button, #modalCadastro .submit-button, #modalRecuperarSenha .submit-button,
#modalCadastro input.submit-button.abrir-conta, #modalRecuperarSenha input.submit-button.recuperar{
    width:100%; height:46px; padding:0; margin-top:6px !important;
    background:var(--au-accent); color:#fff; border:0; border-radius:8px;
    font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
    transition:background .15s,transform .1s;
}
#modalLogin .submit-button:hover, #modalCadastro .submit-button:hover, #modalRecuperarSenha .submit-button:hover{background:var(--au-accent-h)}
#modalLogin .submit-button:active, #modalCadastro .submit-button:active, #modalRecuperarSenha .submit-button:active{transform:translateY(1px)}
#modalLogin .submit-button:disabled, #modalCadastro .submit-button:disabled, #modalRecuperarSenha .submit-button:disabled{opacity:.6;cursor:default}

/* ---- links auxiliares ---- */
#modalLogin .recover-password{margin:-4px 0 14px;justify-content:flex-end}
#modalLogin .recover-password a, #modalLogin .create-account a, #modalRecuperarSenha .log-in a{
    color:#8b7bff; font-size:13px; font-weight:700; text-decoration:underline;
}
#modalLogin .recover-password a:hover, #modalLogin .create-account a:hover, #modalRecuperarSenha .log-in a:hover{color:#fff}
#modalLogin .create-account, #modalRecuperarSenha .log-in{
    justify-content:flex-start; margin:0; padding:18px 22px 24px;
    color:#8d98ad; font-size:13px; font-weight:600; gap:6px; cursor:default;
}
#modalLogin .create-account a, #modalRecuperarSenha .log-in a{cursor:pointer}
#modalRecuperarSenha .form-row:last-of-type{margin-bottom:6px}

/* ---- termos do cadastro ---- */
#modalCadastro .termos{
    margin:16px 0 0; padding:0 0 24px; text-align:left;
    color:#8d98ad; font-size:11.5px; font-weight:500; line-height:1.55;
}
#modalCadastro .termos p{margin:0 0 4px;color:#c3cbd9;font-weight:700}
#modalCadastro .termos a{color:#8b7bff;font-weight:700;text-decoration:underline}
#modalCadastro .termos a:hover{color:#fff}

/* ---- celular: tela cheia (igual ao popup de depósito/saque e à Brabet) ----
   O popup cobre a tela toda; o topo e a barra de baixo do site somem enquanto ele está aberto. */
@media (max-width:768px){
    #modalLogin, #modalCadastro, #modalRecuperarSenha{
        position:fixed; top:0; left:0; right:0; bottom:0;
        width:100%; max-width:none; height:100vh; height:100dvh; max-height:none;
        transform:none; border-radius:0; box-shadow:none;
        z-index:10050; overflow-y:auto; overflow-x:hidden;
        -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
        padding-bottom:env(safe-area-inset-bottom,0px);
    }
    #modalLogin .auth-tabs, #modalCadastro .auth-tabs{padding:calc(6px + env(safe-area-inset-top,0px)) 56px 0 16px;gap:2px}
    #modalLogin .auth-tab, #modalCadastro .auth-tab{padding:16px 22px 13px;font-size:14px}
    #modalLogin .close-modal, #modalCadastro .close-modal, #modalRecuperarSenha .close-modal{
        top:calc(8px + env(safe-area-inset-top,0px)); right:12px; font-size:24px; color:#8aa4d8;
    }
    #modalRecuperarSenha .modal-content > h2{padding-top:calc(20px + env(safe-area-inset-top,0px))}
    #modalLogin form, #modalCadastro form, #modalRecuperarSenha form{padding:22px 20px 0}
    #modalLogin #alerta-login, #modalCadastro #alerta-cadastro, #modalRecuperarSenha #alerta-senha{margin:14px 20px 0}
    .auth-label{font-size:12.5px;margin-bottom:8px}
    #modalLogin .form-row, #modalCadastro .form-row, #modalRecuperarSenha .form-row{margin-bottom:18px}
    #modalLogin .input-icon input, #modalCadastro .input-icon input, #modalRecuperarSenha .input-icon input{
        height:48px; border-radius:6px; font-size:16px;      /* 16px evita o zoom automático do iPhone */
    }
    #modalLogin .submit-button, #modalCadastro .submit-button, #modalRecuperarSenha .submit-button,
    #modalCadastro input.submit-button.abrir-conta, #modalRecuperarSenha input.submit-button.recuperar{
        height:48px; border-radius:6px; font-size:15px;
    }
    #modalLogin .create-account, #modalRecuperarSenha .log-in{padding:18px 20px 28px}
    #modalCadastro .termos{padding-bottom:28px}

    /* some o topo e a barra inferior do site enquanto o popup está aberto */
    body:has(#modalLogin.show) header.top-bar, body:has(#modalCadastro.show) header.top-bar, body:has(#modalRecuperarSenha.show) header.top-bar,
    body:has(#modalLogin.show) .bnav, body:has(#modalCadastro.show) .bnav, body:has(#modalRecuperarSenha.show) .bnav{visibility:hidden}
    body:has(#modalLogin.show), body:has(#modalCadastro.show), body:has(#modalRecuperarSenha.show){overflow:hidden}
}
@media (max-width:380px){
    #modalLogin .auth-tab, #modalCadastro .auth-tab{padding:15px 16px 12px}
    #modalLogin form, #modalCadastro form, #modalRecuperarSenha form{padding:20px 16px 0}
}

/* ---- animação ao abrir (igual à Brabet) ----
   Só toca quando o popup é aberto a partir da página (botões do topo, etc.): o js/auth-modal.js
   liga a classe html.auth-anim nesse caso. Ao trocar Entrar <-> Cadastre-se (popup já aberto) não anima. */
@keyframes auth-up-d{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes auth-up-m{from{transform:translateY(100%)}to{transform:translateY(0)}}
html.auth-anim #modalLogin.show, html.auth-anim #modalCadastro.show, html.auth-anim #modalRecuperarSenha.show{animation:auth-up-d .22s ease-out both}
@media (max-width:768px){
    html.auth-anim #modalLogin.show, html.auth-anim #modalCadastro.show, html.auth-anim #modalRecuperarSenha.show{animation:auth-up-m .3s cubic-bezier(.22,.9,.3,1) both}
}
@media (prefers-reduced-motion:reduce){
    html.auth-anim #modalLogin.show, html.auth-anim #modalCadastro.show, html.auth-anim #modalRecuperarSenha.show{animation:none}
}