/* =====================================================
   LOGIN PAGE
===================================================== */


/* =========================
   Login Body
========================= */

.login-body {

    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 119, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(0, 76, 255, 0.15),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #020611,
            #071323,
            #020611
        );

}


/* =========================
   Login Page
========================= */

.login-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

}


/* =========================
   Login Box
========================= */

.login-box {

    width: 100%;

    max-width: 430px;

    padding: 40px 35px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(255,255,255,0.09);

    border-radius: 25px;

    backdrop-filter: blur(20px);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.45);

}


/* =========================
   Login Icon
========================= */

.login-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        rgba(0, 120, 255, 0.12);

    border: 1px solid
        rgba(0, 145, 255, 0.35);

    color: #2998ff;

    font-size: 29px;

}


/* =========================
   Login Header
========================= */

.login-header {

    text-align: center;

    margin-bottom: 30px;

}

.login-header span {

    color: #4ca8ff;

    font-size: 10px;

    letter-spacing: 3px;

}

.login-header h1 {

    margin: 10px 0 12px;

    font-size: 29px;

}

.login-header h1 strong {

    color: #168cff;

}

.login-header p {

    color: #8290a3;

    font-size: 12px;

    line-height: 2;

}


/* =========================
   Input Group
========================= */

.login-input-group {

    margin-bottom: 19px;

}

.login-input-group label {

    display: block;

    margin-bottom: 8px;

    color: #d5dfeb;

    font-size: 12px;

}


/* =========================
   Input Box
========================= */

.login-input-box {

    height: 55px;

    display: flex;

    align-items: center;

    background:
        rgba(0,0,0,0.22);

    border: 1px solid
        rgba(255,255,255,0.08);

    border-radius: 14px;

    transition: 0.25s;

}

.login-input-box:focus-within {

    border-color:
        rgba(20, 140, 255, 0.65);

    box-shadow:
        0 0 0 4px
        rgba(0, 125, 255, 0.07);

}

.login-input-box > i {

    margin: 0 15px;

    color: #62758b;

    font-size: 14px;

}

.login-input-box input {

    width: 100%;

    height: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

}

.login-input-box input::placeholder {

    color: #536174;

}


/* =========================
   Password Toggle
========================= */

.password-toggle {

    width: 45px;

    height: 100%;

    border: none;

    background: transparent;

    color: #607087;

    cursor: pointer;

}

.password-toggle:hover {

    color: #2698ff;

}


/* =========================
   Login Message
========================= */

.login-message {

    min-height: 20px;

    margin-bottom: 7px;

    text-align: center;

    color: #ff7070;

    font-size: 11px;

}


/* =========================
   Login Button
========================= */

.login-submit-btn {

    width: 100%;

    height: 55px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #087fff,
            #0053cc
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    transition: 0.25s;

}

.login-submit-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(0,110,255,0.3);

}

/* =========================
   Back Home
========================= */

.back-home {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 23px;

    color: #63748a;

    font-size: 10px;

    text-decoration: none;

    transition: 0.2s;

}

.back-home:hover {

    color: #319aff;

}


/* =========================
   Mobile
========================= */

@media (max-width: 500px) {

    .login-page {

        padding: 15px;

    }

    .login-box {

        padding: 32px 22px 25px;

        border-radius: 21px;

    }

    .login-header h1 {

        font-size: 25px;

    }

}

/* =========================
   Register Link
========================= */

.register-link {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 18px;

    font-size: 10px;

}

.register-link span {

    color: #64748b;

}

.register-link a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #319aff;

    text-decoration: none;

    font-weight: 500;

    transition: 0.2s;

}

.register-link a:hover {

    color: #75bdff;

    transform: translateX(-2px);

}

.register-link a i {

    font-size: 8px;

}