/* ==========================================
   LOGIN - MTGPT
========================================== */

body{
    margin:0;
    font-family:Inter,sans-serif;
    min-height:100vh;
}

.login-page{

    width:100%;
    min-height:100vh;

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

    padding:40px;

    background:
        linear-gradient(rgba(8,8,8,.72), rgba(8,8,8,.78)),
        url("../../Assets/images/optimized/login-bg.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.login-card{

    width:460px;

    background:rgba(20,20,20,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:40px;

    box-shadow:0 25px 80px rgba(0,0,0,.65);
}

.login-logo{

    width:180px;

    display:block;

    margin:0 auto 20px;
}

h1{

    color:#fff;

    text-align:center;

    font-size:42px;

    margin:0 0 12px;
}

.subtitle{

    color:#bdbdbd;

    text-align:center;

    line-height:1.6;

    margin:0 0 30px;
}

form{

    display:flex;

    flex-direction:column;
}

label{

    color:#fff;

    font-weight:600;

    margin-bottom:10px;
}

input{

    height:56px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:#181818;

    color:#fff;

    padding:0 18px;

    font-size:16px;

    margin-bottom:24px;

    transition:.25s;
}

input::placeholder{

    color:#8d8d8d;
}

input:focus{

    outline:none;

    border-color:#d4af37;

    box-shadow:0 0 0 3px rgba(212,175,55,.15);
}

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.remember{

    display:flex;

    align-items:center;

    gap:8px;

    color:#bdbdbd;

    font-size:14px;
}

.login-options a{

    color:#d4af37;

    text-decoration:none;

    font-size:14px;

    transition:.25s;
}

.login-options a:hover{

    color:#f3cd59;
}

button{

    height:58px;

    border:none;

    border-radius:14px;

    background:#d4af37;

    color:#111;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(212,175,55,.35);
}

.register{

    margin-top:30px;

    text-align:center;

    color:#bdbdbd;
}

.register a{

    color:#d4af37;

    text-decoration:none;

    font-weight:600;
}