/*==================================================
    LOGIN - CESTI WALLET
==================================================*/

.auth-page{
    min-height:100dvh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        radial-gradient(circle at top,var(--greensoft),transparent 45%),
        var(--bg);
}

.auth-card{

    width:100%;
    max-width:420px;

    background:var(--card);

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

    border-radius:32px;

    padding:42px 32px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08),
        var(--shadow);

    animation:rise .45s ease;

}

.auth-logo{

    display:flex;
    justify-content:center;
    margin-bottom:22px;

}

.auth-title{

    font-size:30px;
    font-weight:900;
    text-align:center;
    margin:0;

}

.auth-subtitle{

    margin:8px 0 28px;

    text-align:center;

    color:var(--muted);

    font-size:14px;

    line-height:1.6;

}

.auth-card label{

    font-size:12px;
    font-weight:700;
    margin-bottom:6px;

}

.input-group{

    position:relative;
    margin-bottom:18px;

}

.input-group input{

    height:56px;

    padding-left:50px;

    padding-right:48px;

    border-radius:16px;

    transition:.25s;

}

.input-group input:hover{

    border-color:var(--green);

}

.input-group input:focus{

    transform:translateY(-1px);

}

.input-group i{

    position:absolute;

    left:17px;

    top:50%;

    transform:translateY(-50%);

    color:var(--muted);

    font-size:17px;

}

.password-toggle{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:var(--muted);

    transition:.25s;

}

.password-toggle:hover{

    color:var(--green);

}

.auth-card .btn{

    width:100%;

    height:56px;

    border-radius:16px;

    font-size:15px;

    font-weight:800;

    margin-top:8px;

}

.auth-footer{

    margin-top:24px;

    text-align:center;

    color:var(--muted);

    font-size:13px;

}

.auth-footer a{

    color:var(--green);

    font-weight:800;

    text-decoration:none;

}

.auth-footer a:hover{

    text-decoration:underline;

}

.auth-version{

    margin-top:26px;

    text-align:center;

    color:var(--muted);

    font-size:11px;

}

.notice{

    margin-bottom:20px;

}

/*==========================
      RESPONSIVE
===========================*/

@media(max-width:480px){

.auth-page{

    padding:18px;

}

.auth-card{

    border-radius:26px;

    padding:30px 22px;

}

.logo.big{

    width:80px;
    height:80px;
    border-radius:24px;

}

.logo.big:before{

    width:42px;
    height:42px;
    border-width:7px;

}

.logo.big:after{

    width:12px;
    height:12px;
    top:33px;
    right:14px;

}

.auth-title{

    font-size:24px;

}

.auth-subtitle{

    font-size:13px;

}

.input-group input{

    height:52px;

}

.auth-card .btn{

    height:52px;

}

}

@media(max-width:360px){

.auth-card{

    padding:24px 18px;

}

.auth-title{

    font-size:22px;

}

.logo.big{

    width:72px;
    height:72px;

}

}