/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            #f6f8fc 0%,
            #edf3ff 100%
        );

    color: #172033;

}


/* =====================================================
   LOGIN WRAPPER
===================================================== */

.login-wrapper {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px 20px;

}


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

.login-card {

    width: 100%;

    max-width: 460px;

    background: white;

    border-radius: 20px;

    padding: 40px;

    border:
        1px solid #e5e9f2;

    box-shadow:
        0 20px 50px
        rgba(20, 45, 90, 0.12);

}


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

.logo {

    text-align: center;

    margin-bottom: 25px;

}


.logo img {

    width: 190px;

    max-width: 80%;

    height: auto;

}


/* =====================================================
   HEADING
===================================================== */

.login-card h2 {

    margin: 0;

    text-align: center;

    font-size: 28px;

    font-weight: 700;

    color: #172033;

}


.login-card h2::after {

    content: "Certificate Portal";

    display: block;

    margin-top: 8px;

    font-size: 14px;

    font-weight: 400;

    color: #7a8495;

}


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

form {

    margin-top: 30px;

}


.form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 20px;

}


/* =====================================================
   LABEL
===================================================== */

.form-group label {

    font-size: 14px;

    font-weight: 600;

    color: #344054;

    margin-bottom: 8px;

}


/* =====================================================
   INPUT
===================================================== */

.form-group input {

    width: 100%;

    padding: 13px 14px;

    border:
        1px solid #d7ddea;

    border-radius: 10px;

    background: white;

    color: #172033;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.form-group input::placeholder {

    color: #98a2b3;

}


.form-group input:focus {

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.10);

}


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

.btn {

    width: 100%;

    border: none;

    border-radius: 10px;

    padding: 14px 20px;

    margin-top: 5px;

    font-size: 15px;

    font-weight: 600;

    color: white;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #123f9a
        );

    box-shadow:
        0 8px 18px
        rgba(37, 99, 235, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;

}


.btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px
        rgba(37, 99, 235, 0.25);

}


.btn:active {

    transform: translateY(0);

}


/* =====================================================
   ERROR ALERT
===================================================== */

.alert {

    padding: 13px 16px;

    border-radius: 10px;

    margin-top: 20px;

    font-size: 14px;

    font-weight: 500;

}


.alert-error {

    background: #fff0f0;

    color: #b42318;

    border:
        1px solid #ffcaca;

}


/* =====================================================
   REGISTER TEXT
===================================================== */

.register-text {

    text-align: center;

    margin: 25px 0 0;

    font-size: 14px;

    color: #7a8495;

}


.register-text a {

    color: #2563eb;

    font-weight: 600;

    text-decoration: none;

    margin-left: 4px;

}


.register-text a:hover {

    text-decoration: underline;

}


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

@media (max-width: 600px) {

    .login-wrapper {

        padding: 20px 15px;

    }


    .login-card {

        padding: 30px 22px;

        border-radius: 16px;

    }


    .login-card h2 {

        font-size: 25px;

    }


    .logo img {

        width: 165px;

    }

}