/* ==========================================================
   UAZIM LOGIN
   DARK MODE
========================================================== */

:root{

    --bg:#0f0f10;
    --card:#16181c;
    --card-hover:#1d2128;

    --primary:#00c896;
    --primary-hover:#00e6aa;

    --text:#ffffff;
    --text-secondary:#a7a7a7;

    --border:rgba(255,255,255,.08);

    --danger:#ff3355;

    --shadow:
        0 15px 40px rgba(0,0,0,.45);

    --radius:20px;
}

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

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

body{

    min-height:100vh;

    background:
        radial-gradient(
            circle at top,
            rgba(0,200,150,.12),
            transparent 40%
        ),
        var(--bg);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    color:var(--text);

    padding-bottom:120px;
}
/* ==========================================================
   HEADER
========================================================== */

.top-header{

    position:sticky;

    top:0;

    z-index:999;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    background:
        rgba(15,15,16,.85);

    backdrop-filter:blur(20px);

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

.back-btn{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    color:#fff;

    background:
        rgba(255,255,255,.08);

    transition:.3s;
}

.back-btn:hover{

    background:
        rgba(255,255,255,.15);

    transform:translateX(-2px);
}

.header-logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:22px;

    font-weight:900;

    color:var(--primary);

    letter-spacing:1px;
}

.header-space{

    width:42px;
}
/* ==========================================================
   CONTAINER
========================================================== */

.login-container{

    min-height:
        calc(100vh - 80px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    width:100%;
    
}

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

.login-card{

    width:100%;

    max-width:500px;

    background:var(--card);

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

    border-radius:28px;

    padding:40px 30px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(20px);

    animation:fadeUp .4s ease;
}
/* ==========================================================
   LOGO
========================================================== */

.login-card h1{

    text-align:center;

    color:var(--primary);

    font-size:38px;

    font-weight:900;

    margin-bottom:35px;

    letter-spacing:2px;
}

/* ==========================================================
   EMAIL EXIBIDO
========================================================== */

.login-card p{

    text-align:center;

    color:var(--text-secondary);

    margin-bottom:20px;

    word-break:break-word;
}

/* ==========================================================
   FORM
========================================================== */

form{

    display:flex;
    flex-direction:column;

    gap:15px;
}

/* ==========================================================
   INPUTS
========================================================== */

input,
select{

    width:100%;

    height:52px;

    border:none;

    outline:none;

    border-radius:14px;

    padding:0 16px;

    background:#20242b;

    color:var(--text);

    font-size:15px;

    transition:.3s;
}

input:focus,
select:focus{

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

    box-shadow:
        0 0 0 4px rgba(0,200,150,.15);
}

/* ==========================================================
   PLACEHOLDER
========================================================== */

input::placeholder{

    color:#808080;
}

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

button{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#000;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

button:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);
}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:var(--primary);

    text-decoration:none;

    transition:.3s;
}

a:hover{

    color:var(--primary-hover);
}

/* ==========================================================
   LINKS AUXILIARES
========================================================== */

.login-card a{

    display:block;

    text-align:center;

    margin-top:8px;

    font-size:14px;
}

/* ==========================================================
   ERRO
========================================================== */

.error{

    background:
        rgba(255,51,85,.15);

    border:
        1px solid rgba(255,51,85,.3);

    color:#ff5f7a;

    padding:12px;

    border-radius:12px;

    margin-bottom:20px;

    text-align:center;
}

/* ==========================================================
   DIVISOR
========================================================== */

.divider{

    position:relative;

    margin:25px 0;

    text-align:center;

    color:var(--text-secondary);

    font-size:13px;
}

.divider::before{

    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:40%;

    height:1px;

    background:var(--border);
}

.divider::after{

    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:40%;

    height:1px;

    background:var(--border);
}

/* ==========================================================
   SOCIAL LOGIN
========================================================== */

.social-login{

    display:flex;
    flex-direction:column;

    gap:12px;
}

.social-login button{

    background:#20242b;

    color:#fff;

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

.social-login button:hover{

    background:#282d35;
}

#contador{

    margin-top:10px;

    font-size:22px;

    font-weight:700;

    color:#ff5f7a;
}

button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none !important;
}
/* ==========================================================
   ANIMAÇÃO
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(20px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

.login-card{

    animation:
        fadeUp .4s ease;
}

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

@media(max-width:480px){

    .login-card{

        padding:30px 20px;
    }

    .login-card h1{

        font-size:32px;
    }

}