/* =========================================================
   COVEX LOGIN PAGE
   Standalone CSS
   ========================================================= */

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

html {
    width: 100%;
    min-height: 100%;
    background: #050505;
}

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

    margin: 0;
    padding: 20px;

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

    background: #050505;
    color: #ffffff;

    font-family: Arial, sans-serif;
}

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

.login-container {
    width: 100%;
    max-width: 420px;

    padding: 30px 25px;

    text-align: center;

    background: #050505;
}

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

.login-logo {
    display: block;

    width: 170px;
    max-width: 80%;

    height: auto;

    margin: 0 auto 18px;
}

/* =========================================================
   TITLE
   ========================================================= */

.login-container h1 {
    margin: 0 0 8px;

    color: #F0B90B;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 700;
}

.login-container > p {
    margin: 0 0 25px;

    color: #b8b8b8;

    font-size: 16px;
    line-height: 1.5;
}

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

#loginForm {
    width: 100%;
}

#loginForm input {
    width: 100%;
    height: 56px;

    margin-bottom: 14px;
    padding: 0 16px;

    background: #111827;

    border: 1px solid #F0B90B;
    border-radius: 12px;

    outline: none;

    color: #ffffff;

    font-size: 16px;

    transition: .25s ease;
}

#loginForm input::placeholder {
    color: #8b929e;
}

#loginForm input:focus {
    border-color: #F0B90B;

    box-shadow:
        0 0 0 2px rgba(240, 185, 11, .10);
}

/* =========================================================
   SIGN IN BUTTON
   ========================================================= */

#loginForm button {
    width: 100%;
    height: 56px;

    margin-top: 4px;

    background: #F0B90B;

    border: 2px solid #F0B90B;
    border-radius: 12px;

    color: #050505;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;
}

#loginForm button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 18px rgba(240, 185, 11, .20);
}

/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.forgot-password {
    width: 100%;

    margin: 20px auto 0;

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

    gap: 10px;

    color: #F0B90B;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: .25s ease;
}

/* =========================================================
   FORGOT PASSWORD GOLD CIRCLE
   ========================================================= */

.forgot-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    background: rgba(240, 185, 11, .08);

    border: 2px solid #F0B90B;

    border-radius: 50%;

    transition: .25s ease;
}

.forgot-icon svg {
    width: 21px;
    height: 21px;

    display: block;

    fill: none;

    stroke: #F0B90B;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.forgot-password:hover {
    color: #ffffff;
}

.forgot-password:hover .forgot-icon {
    background: #F0B90B;

    transform: translateY(-2px);

    box-shadow:
        0 0 16px rgba(240, 185, 11, .25);
}

.forgot-password:hover .forgot-icon svg {
    stroke: #050505;
}

/* =========================================================
   BOTTOM TEXT
   ========================================================= */

.bottom-text {
    margin-top: 24px;

    color: #8f96a3;

    font-size: 15px;
    line-height: 1.6;
}

.bottom-text a {
    color: #F0B90B;

    text-decoration: none;

    font-weight: 700;
}

.bottom-text a:hover {
    text-decoration: underline;
}

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

@media (max-width: 480px) {

    body {
        padding: 16px;
    }

    .login-container {
        max-width: 100%;

        padding: 24px 10px;
    }

    .login-logo {
        width: 150px;

        margin-bottom: 16px;
    }

    .login-container h1 {
        font-size: 29px;
    }

    .login-container > p {
        font-size: 15px;

        margin-bottom: 22px;
    }

    #loginForm input {
        height: 54px;
    }

    #loginForm button {
        height: 54px;
    }

    .forgot-password {
        margin-top: 18px;
    }

    .forgot-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .forgot-icon svg {
        width: 20px;
        height: 20px;
    }
}
/* =========================================================
   COVEX CUSTOM MODAL
   COMPACT / BALANCED SIZE
   ========================================================= */

body.covex-modal-open {
    overflow: hidden;
}


/* =========================================================
   MODAL WRAPPER
   ========================================================= */

.covex-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 16px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.covex-modal.active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.covex-modal-overlay {
    position: absolute;

    inset: 0;

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

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}


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

.covex-modal-card {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 300px;

    padding: 28px 22px 22px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #101010,
            #050505
        );

    border: 1px solid #F0B90B;

    border-radius: 16px;

    box-shadow:
        0 0 0 1px rgba(240, 185, 11, .08),
        0 0 25px rgba(240, 185, 11, .16),
        0 18px 55px rgba(0, 0, 0, .65);

    transform:
        translateY(12px)
        scale(.96);

    transition:
        transform .28s ease;
}


.covex-modal.active
.covex-modal-card {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.covex-modal-close {
    position: absolute;

    top: 8px;
    right: 9px;

    width: 30px;
    height: 30px;

    display: flex;

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

    padding: 0;

    background: transparent;

    border: none;

    color: #8f96a3;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.covex-modal-close:hover {
    color: #F0B90B;

    transform: rotate(90deg);
}


/* =========================================================
   MODAL ICON
   ========================================================= */

.covex-modal-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 15px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(240, 185, 11, .08);

    border: 2px solid #F0B90B;

    box-shadow:
        0 0 18px rgba(240, 185, 11, .14);
}


.covex-modal-icon svg {
    width: 29px;
    height: 29px;

    fill: none;

    stroke: #F0B90B;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

.covex-modal-icon.success {
    border-color: #F0B90B;

    background:
        rgba(240, 185, 11, .08);
}


/* =========================================================
   ERROR ICON
   ========================================================= */

.covex-modal-icon.error {
    border-color: #F0B90B;

    background:
        rgba(240, 185, 11, .05);
}


/* =========================================================
   MODAL TITLE
   ========================================================= */

.covex-modal-card h2 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   MODAL MESSAGE
   ========================================================= */

.covex-modal-card p {
    margin: 0 auto 19px;

    max-width: 255px;

    color: #aeb4bf;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   OK BUTTON
   ========================================================= */

.covex-modal-button {
    width: 100%;

    height: 43px;

    border: 1px solid #F0B90B;

    border-radius: 9px;

    background: #F0B90B;

    color: #050505;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.covex-modal-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 18px
        rgba(240, 185, 11, .22);

    background: #f5c32b;
}


.covex-modal-button:active {
    transform: translateY(0);

    box-shadow: none;
}


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

@media (max-width: 480px) {

    .covex-modal {
        padding: 14px;
    }

    .covex-modal-card {
        max-width: 290px;

        padding: 26px 20px 21px;

        border-radius: 15px;
    }

    .covex-modal-icon {
        width: 56px;
        height: 56px;

        margin-bottom: 14px;
    }

    .covex-modal-icon svg {
        width: 28px;
        height: 28px;
    }

    .covex-modal-card h2 {
        font-size: 19px;
    }

    .covex-modal-card p {
        font-size: 13.5px;

        margin-bottom: 18px;
    }

    .covex-modal-button {
        height: 42px;

        font-size: 14px;
    }

    .covex-modal-close {
        width: 28px;
        height: 28px;

        font-size: 23px;
    }
}
/* =========================================================
   REMEMBER PASSWORD
   ========================================================= */

.remember-password {
    width: 100%;

    margin: 2px 0 16px;

    display: flex;
    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    text-align: left;
}


/* Hide native checkbox */

.remember-password input {
    position: absolute;

    opacity: 0;

    width: 0;
    height: 0;
}


/* Custom checkbox */

.remember-checkbox {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: flex;

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

    border: 2px solid #F0B90B;

    border-radius: 5px;

    background: transparent;

    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* Check mark */

.remember-checkbox::after {
    content: "";

    width: 6px;
    height: 11px;

    border-right: 3px solid #050505;
    border-bottom: 3px solid #050505;

    transform:
        rotate(45deg)
        scale(0);

    transition:
        transform .18s ease;
}


/* Checked */

.remember-password input:checked
+ .remember-checkbox {

    background: #F0B90B;

    box-shadow:
        0 0 10px rgba(240, 185, 11, .18);
}


.remember-password input:checked
+ .remember-checkbox::after {

    transform:
        rotate(45deg)
        scale(1);
}


/* Text */

.remember-text {
    color: #c5c8cf;

    font-size: 15px;

    font-weight: 500;

    line-height: 1;
}


/* Hover */

.remember-password:hover .remember-checkbox {
    box-shadow:
        0 0 12px rgba(240, 185, 11, .20);
}


.remember-password:hover .remember-text {
    color: #ffffff;
}


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

@media (max-width: 480px) {

    .remember-password {
        margin-bottom: 15px;
    }

    .remember-checkbox {
        width: 25px;
        height: 25px;

        flex-basis: 25px;
    }

    .remember-text {
        font-size: 14px;
    }

}