/* =========================================================
   MOZAPI — RECUPERAÇÃO DE PALAVRA-PASSE
========================================================= */

:root{

    --bg:#050505;
    --surface:#101010;
    --surface-hover:#151515;

    --border:#242424;

    --text:#ffffff;
    --secondary:#9CA3AF;

    --accent:#64748B;
    --accent-soft:rgba(100,116,139,.15);

    --radius:18px;
    --transition:.3s ease;

}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    min-height:100%;
}


body{

    min-height:100vh;

    background:var(--bg);

    color:var(--text);

    font-family:Arial, Helvetica, sans-serif;

}


/* =========================================================
   LOGO
========================================================= */

.nav-brand{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:20px 0 0;

    margin:0;

    text-decoration:none;

}


.nav-brand img{

    width:88px;

    height:88px;

    border-radius:10px;

    object-fit:contain;

    margin:0;

}


/* =========================================================
   CONTAINER
========================================================= */

.recovery-container{

    width:min(900px,92%);

    margin:0 auto;

    padding:35px 0 50px;

    text-align:center;

}


/* =========================================================
   TÍTULOS
========================================================= */

.recovery-title{

    font-size:clamp(28px,5vw,36px);

    line-height:1.1;

    letter-spacing:-1px;

    color:var(--text);

    margin:0 0 10px;

}


.recovery-description{

    color:var(--secondary);

    font-size:16px;

    line-height:1.7;

    margin:12px auto 28px;

    max-width:650px;

}


.recovery-description strong{

    color:var(--text);

}


/* =========================================================
   PASSOS
========================================================= */

.recovery-step{

    display:none;

}


.recovery-step.active{

    display:block;

}


/* =========================================================
   CARD
========================================================= */

.recovery-card{

    width:100%;

    max-width:560px;

    margin:0 auto 20px;

    padding:32px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    transition:var(--transition);

}


.recovery-card:hover{

    border-color:#3f3f3f;

    transform:translateY(-3px);

}


/* =========================================================
   FORMULÁRIO
========================================================= */

.recovery-form{

    display:flex;

    flex-direction:column;

    gap:0;

}


.form-group{

    display:flex;

    flex-direction:column;

    text-align:left;

    margin-bottom:20px;

}


.form-group:last-child{

    margin-bottom:0;

}


.form-group label{

    color:var(--text);

    font-size:14px;

    font-weight:600;

    margin-bottom:8px;

}


.form-group input{

    width:100%;

    padding:14px 16px;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:14px;

    font-size:15px;

    outline:none;

    transition:var(--transition);

}


.form-group input::placeholder{

    color:var(--secondary);

}


.form-group input:focus{

    border-color:var(--accent);

    box-shadow:0 0 0 3px var(--accent-soft);

}


/* =========================================================
   BOTÃO PRINCIPAL
========================================================= */

.primary-button{

    width:100%;

    padding:15px;

    border:1px solid transparent;

    border-radius:14px;

    background:#ffffff;

    color:#050505;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

}


.primary-button:hover{

    transform:translateY(-2px);

    border-color:#3f3f3f;

}


.primary-button:active{

    transform:scale(.98);

}


.primary-button:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

}


/* =========================================================
   MENSAGENS
========================================================= */

.recovery-message{

    min-height:20px;

    margin-top:16px;

    color:var(--secondary);

    font-size:14px;

    line-height:1.5;

    text-align:center;

}


.recovery-message:empty{

    display:none;

}


/* =========================================================
   TEMPORIZADOR
========================================================= */

.code-timer{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin:0 0 20px;

    color:var(--secondary);

    font-size:13px;

}


.code-timer strong{

    color:var(--accent);

    font-weight:700;

}


/* =========================================================
   BOTÃO SECUNDÁRIO
========================================================= */

.secondary-button{

    width:100%;

    margin-top:12px;

    padding:13px 16px;

    border:1px solid var(--border);

    border-radius:12px;

    background:transparent;

    color:var(--text);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}


.secondary-button:hover:not(:disabled){

    border-color:#3f3f3f;

    transform:translateY(-2px);

}


.secondary-button:active:not(:disabled){

    transform:scale(.98);

}


.secondary-button:disabled{

    opacity:.45;

    cursor:not-allowed;

}


/* =========================================================
   LINK VOLTAR
========================================================= */

.back-login{

    display:inline-block;

    margin-top:8px;

    color:var(--text);

    font-size:14px;

    text-decoration:underline;

    transition:var(--transition);

}


.back-login:hover{

    color:var(--accent);

}


/* =========================================================
   CÓDIGO DE RECUPERAÇÃO
========================================================= */

#code{

    text-align:center;

    letter-spacing:6px;

    font-size:20px;

    font-weight:600;

}


/* =========================================================
   PALAVRA-PASSE
========================================================= */

#newPassword,
#confirmPassword{

    width:100%;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .nav-brand{

        padding-top:15px;

    }


    .nav-brand img{

        width:76px;

        height:76px;

    }


    .recovery-container{

        width:92%;

        padding:25px 0 40px;

    }


    .recovery-title{

        font-size:30px;

    }


    .recovery-description{

        font-size:14px;

    }


    .recovery-card{

        padding:26px 20px;

        border-radius:18px;

    }

}


/* =========================================================
   VOLTAR AO LOGIN
========================================================= */

.back-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:560px;

    margin:4px auto 0;

    padding:13px 18px;

    border:1px solid var(--border);

    border-radius:12px;

    background:transparent;

    color:var(--text);

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}


.back-login:hover{

    border-color:#3f3f3f;

    background:var(--surface);

    transform:translateY(-2px);

}


.back-login:active{

    transform:scale(.98);

}


/* ==========================
   BOTÕES DE MÉTODO
========================== */

.botoes-card{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    width:100%;

    margin-bottom:24px;

    padding:5px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:14px;

}


.botoes{

    flex:1;

    padding:12px 16px;

    border:1px solid transparent;

    border-radius:10px;

    background:transparent;

    color:var(--secondary);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}


.botoes:hover{

    color:var(--text);

    background:var(--surface-hover);

    border-color:var(--border);

}


.botoes:active{

    transform:scale(.98);

}


.botoes.active{

    background:var(--text);

    color:var(--bg);

    border-color:var(--text);

}


@media(max-width:700px){

    .botoes-card{

        margin-bottom:20px;

    }

    .botoes{

        padding:11px 12px;

        font-size:13px;

    }

}