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

.container-login {
    max-width: 600px;
    margin: 40px auto;
}

/* =========================================================
   PASSWORT RESET
========================================================= */

.container-passwortreset {
    max-width: 500px;
}

/* =========================================================
   LOGIN / REGISTER TOGGLE
========================================================= */

.auth-tabs {
    display: flex;
    margin-bottom: 0;
}

.auth-tabs .tab-btn {

    flex: 1;

    padding: 14px 20px;

    border: 1px solid var(--main-color);

    border-bottom: none;

    border-radius:
        var(--border-radius)
        var(--border-radius)
        0
        0;

    background:
        linear-gradient(
            to bottom,
            var(--main-color-light),
            var(--main-color)
        );

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}

.auth-tabs .tab-btn:hover {

    filter: brightness(1.1);
}

.auth-tabs .tab-btn.active {

    background:
        linear-gradient(
            to bottom,
            var(--link-hover),
            color-mix(
                in srgb,
                var(--link-hover) 85%,
                black
            )
        );

    color: #ffffff;

    border-color: var(--link-hover);

    border-bottom: 1px solid var(--link-hover);

    position: relative;

    z-index: 2;
}

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

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* =========================================================
   LOGIN FOOTER
========================================================= */

.form-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.form-footer a {
    color: var(--link-hover);
    text-decoration: none;
}

.form-footer a:hover {
    text-decoration: underline;
}