/* ============================================================
   ENTER THE VEIL — LOGIN PAGE
   ============================================================ */

.veil-login-page {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);

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

    overflow: hidden;
    padding: 70px 24px;

    background:
        linear-gradient(
            90deg,
            rgba(3, 1, 7, .82) 0%,
            rgba(3, 1, 7, .62) 38%,
            rgba(3, 1, 7, .35) 70%,
            rgba(3, 1, 7, .52) 100%
        ),
        url("/wp-content/uploads/veil-login-background.png")
        center 42% / cover no-repeat;

    isolation: isolate;
}


/* ============================================================
   LARGE VEIL SIGIL — BEHIND LOGIN PANEL
   ============================================================ */

.veil-login-background-sigil {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(78vw, 920px);
    aspect-ratio: 1 / 1;

    transform: translate(-50%, -50%);

    background:
        url("/wp-content/uploads/the-veil-sigil-moons-curse.png")
        center / contain no-repeat;

    opacity: .82;

    filter:
        drop-shadow(0 0 12px rgba(120, 20, 190, .70))
        drop-shadow(0 0 30px rgba(90, 0, 150, .55))
        drop-shadow(0 0 55px rgba(180, 0, 45, .28));

    pointer-events: none;
    user-select: none;

    z-index: -1;
}


/* Extra darkness directly behind center content */

.veil-login-page::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(5, 1, 10, .08) 0%,
            rgba(5, 1, 10, .15) 32%,
            rgba(3, 1, 7, .36) 75%,
            rgba(3, 1, 7, .60) 100%
        );

    pointer-events: none;
    z-index: -2;
}


/* ============================================================
   LOGIN SHELL
   ============================================================ */

.veil-login-shell {
    position: relative;

    width: 100%;
    max-width: 560px;

    z-index: 10;
}


/* ============================================================
   LOGIN PANEL
   ============================================================ */

.veil-login-panel {
    position: relative;

    width: 100%;

    padding: 42px 46px 36px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 5, 20, .88),
            rgba(5, 2, 10, .94)
        );

    border: 1px solid rgba(130, 45, 190, .68);

    border-radius: 8px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .72),
        0 0 28px rgba(91, 16, 145, .20),
        inset 0 0 35px rgba(95, 15, 140, .06);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    color: #eee9e1;
}


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

.veil-login-kicker {
    margin-bottom: 8px;

    text-align: center;

    font-size: .76rem;
    font-weight: 500;

    letter-spacing: .20em;
    text-transform: uppercase;

    color: #bca7cc;
}


.veil-login-title {
    margin: 0;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: #f5eff8;

    text-shadow:
        0 0 8px rgba(132, 38, 185, .70),
        0 0 22px rgba(96, 18, 145, .38);
}


/* ============================================================
   INTRO
   ============================================================ */

.veil-login-intro {
    max-width: 430px;

    margin: 18px auto 0;

    text-align: center;

    font-size: .96rem;
    line-height: 1.7;

    color: rgba(238, 233, 225, .76);
}


/* ============================================================
   DIVIDER
   ============================================================ */

.veil-login-divider {
    position: relative;

    height: 22px;

    margin: 20px 0 24px;
}


.veil-login-divider::before,
.veil-login-divider::after {
    content: "";

    position: absolute;

    top: 50%;

    width: calc(50% - 18px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(123, 32, 175, .70)
        );
}


.veil-login-divider::before {
    left: 0;
}


.veil-login-divider::after {
    right: 0;

    transform: scaleX(-1);
}


.veil-login-divider span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 9px;
    height: 9px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border: 1px solid #9b36cf;

    background: #240832;

    box-shadow:
        0 0 8px rgba(155, 54, 207, .85);
}


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

.veil-login-form {
    position: relative;

    width: 100%;

    z-index: 5;
}


/* Labels */

.veil-login-form label {
    color: #eee9e1 !important;

    font-size: .9rem !important;
    font-weight: 500 !important;
}


/* Text/password inputs */

.veil-login-form input[type="text"],
.veil-login-form input[type="email"],
.veil-login-form input[type="password"] {
    width: 100% !important;

    min-height: 50px !important;

    padding: 12px 14px !important;

    color: #f3edf5 !important;

    background:
        rgba(12, 7, 17, .76) !important;

    border:
        1px solid rgba(130, 95, 150, .45) !important;

    border-radius: 5px !important;

    outline: none !important;

    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, .25) !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


.veil-login-form input[type="text"]:focus,
.veil-login-form input[type="email"]:focus,
.veil-login-form input[type="password"]:focus {
    border-color:
        rgba(146, 42, 205, .95) !important;

    box-shadow:
        0 0 0 2px rgba(111, 24, 164, .15),
        0 0 14px rgba(111, 24, 164, .35) !important;
}


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

.veil-login-form input[type="submit"],
.veil-login-form button[type="submit"],
.veil-login-form .mepr-submit {
    width: 100% !important;

    min-height: 50px !important;

    margin-top: 10px !important;

    border: 1px solid rgba(170, 70, 220, .65) !important;

    border-radius: 5px !important;

    background:
        linear-gradient(
            90deg,
            #45105f,
            #6818b8,
            #45105f
        ) !important;

    color: #fff !important;

    font-size: .86rem !important;
    font-weight: 600 !important;

    letter-spacing: .16em !important;
    text-transform: uppercase !important;

    cursor: pointer !important;

    box-shadow:
        0 0 16px rgba(104, 24, 184, .28) !important;

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


.veil-login-form input[type="submit"]:hover,
.veil-login-form button[type="submit"]:hover,
.veil-login-form .mepr-submit:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            90deg,
            #5b147d,
            #7d20cf,
            #5b147d
        ) !important;

    box-shadow:
        0 0 24px rgba(104, 24, 184, .48) !important;
}


/* ============================================================
   MEMBERPRESS LINKS
   ============================================================ */

.veil-login-form a,
.veil-login-footer a {
    color: #b76ce0 !important;

    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}


.veil-login-form a:hover,
.veil-login-footer a:hover {
    color: #d41436 !important;

    text-shadow:
        0 0 8px rgba(212, 20, 54, .55);
}


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

.veil-login-footer {
    margin-top: 26px;

    padding-top: 20px;

    border-top:
        1px solid rgba(115, 50, 145, .28);

    text-align: center;
}


.veil-login-footer p {
    margin: 7px 0;

    color: rgba(238, 233, 225, .72);
}


.veil-login-join {
    font-size: .91rem;
}


.veil-login-return {
    font-size: .82rem;
}


/* ============================================================
   WHISPER
   ============================================================ */

.veil-login-whisper {
    margin-top: 22px;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    font-size: .72rem;

    letter-spacing: .18em;
    text-transform: uppercase;

    color: rgba(198, 172, 210, .54);
}


/* ============================================================
   MEMBERPRESS MESSAGES
   ============================================================ */

.veil-login-form .mepr_error,
.veil-login-form .mepr_updated {
    border-radius: 5px !important;
}


.veil-login-form .mepr_error {
    color: #f7d9df !important;

    background:
        rgba(105, 5, 25, .55) !important;

    border:
        1px solid rgba(212, 20, 54, .55) !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 768px) {

    .veil-login-page {
        min-height: 100vh;

        padding: 45px 18px;

        background-position: center center;
    }

    .veil-login-background-sigil {
        width: 900px;

        opacity: .55;
    }

    .veil-login-panel {
        padding: 36px 28px 30px;
    }

    .veil-login-title {
        letter-spacing: .08em;
    }
}


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

@media (max-width: 480px) {

    .veil-login-page {
        padding:
            32px 14px;
    }

    .veil-login-background-sigil {
        width: 720px;

        opacity: .42;
    }

    .veil-login-panel {
        padding:
            30px 20px 26px;

        border-radius: 6px;
    }

    .veil-login-title {
        font-size: 1.85rem;

        letter-spacing: .06em;
    }

    .veil-login-intro {
        font-size: .88rem;

        line-height: 1.6;
    }
}
.veil-login-background-sigil {
    width: min(78vw, 920px);
    opacity: .82;
}