/* ----------------------------------------
    SIGN IN / REGISTER / FORGOT PASSWORD
------------------------------------------ */

body.auth {
    position: absolute;
    inset: 0;
    background: var(--l-gray9);
    padding: var(--l-space24) var(--l-space16) 0;
    box-sizing: border-box;
}

body.auth h2 {
    color: var(--l-gray0);
    width: 100%;
    text-align: center;
    margin: var(--l-space32) 0 0;
}

body.auth .logo {
    width: 100%;
    max-height: 96px;
    display: flex;
}

body.auth .logo img {
    width: 100%;
    min-width: 100px;
    max-width: 140px;
    margin: 0 auto var(--l-space24);
}

body.auth h4 {
    text-align: center;
    margin: 0 auto var(--l-space24);
}

body.auth .sign-in-wrapper {
    padding: var(--l-space24);
    background: var(--l-gray0);
    border-radius: var(--l-rad);
    box-shadow: var(--l-shadow-big);
    max-width: 480px;
    margin: 0 auto;
    z-index: 19;
}

body.auth .sign-in-wrapper > p {
    color: var(--l-gray5);
    margin: 0 auto var(--l-space24);
    text-align: center;
    max-width: 280px;
}

body.auth .sign-in-wrapper .form-group.captcha {
    margin-bottom: 0 !important;
}

/* TODO: Decide to keep this or switch to the (data-rf-btn data-color="link") method */

body.auth [data-rf-register-link] {
    display: block;
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    line-height: 24px;
    color: var(--l-gray5);
    border-bottom: 1px solid transparent;
}

body.auth [data-rf-register-link] span {
    color: var(--l-primary);
    padding: 8px 0 4px;
    transition: var(--l-quarter);
}

body.auth [data-rf-register-link] span:hover {
    border-bottom: 1px solid var(--l-primary);
    transition: var(--l-quarter);
}

body.auth .footer-small {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0 var(--l-space16);
    z-index: 9;
}

body.auth .footer-small span {
    display: none;
}

body.auth .footer-small p {
    margin: var(--l-space32) var(--l-space16) var(--l-space16);
    font-size: 14px;
}

body.auth .footer-small p a {
    color: var(--l-primary);
    border-bottom: 1px solid transparent;
    padding: var(--l-space8) 0 4px;
    transition: var(--l-quarter);
}

body.auth .footer-small p a:hover {
    border-bottom: 1px solid var(--l-primary);
    transition: var(--l-quarter);
}

@media (width >= 768px) {
    body.auth {
        padding: var(--l-space72) 0 0;
    }

    body.auth .logo img {
        margin: 0 auto var(--l-space32);
    }

    body.auth .footer-small span {
        display: inline;
    }

    body.auth .sign-in-wrapper {
        padding: var(--l-space32);
    }
}

/* Custome width of buttons */
[data-rf-btn][type="submit"] {
    width: 100%;
}