/* Login-only additions, loaded after the shared CoreUI and portal styles. */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

body.login-page {
    color-scheme: light;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #4D4D4F;
    /* The shared theme sets the body background with !important. */
    background-color: #FAFAFA !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900' preserveAspectRatio='none' fill='none' stroke='%23BA0E31' stroke-width='1.2'%3E%3Cpath stroke-opacity='0.100' d='M-50 560 C 300 430, 620 760, 960 600 S 1450 420, 1700 520'/%3E%3Cpath stroke-opacity='0.092' d='M-50 574 C 300 444, 620 774, 960 614 S 1450 434, 1700 534'/%3E%3Cpath stroke-opacity='0.084' d='M-50 588 C 300 458, 620 788, 960 628 S 1450 448, 1700 548'/%3E%3Cpath stroke-opacity='0.076' d='M-50 602 C 300 472, 620 802, 960 642 S 1450 462, 1700 562'/%3E%3Cpath stroke-opacity='0.068' d='M-50 616 C 300 486, 620 816, 960 656 S 1450 476, 1700 576'/%3E%3Cpath stroke-opacity='0.060' d='M-50 630 C 300 500, 620 830, 960 670 S 1450 490, 1700 590'/%3E%3Cpath stroke-opacity='0.052' d='M-50 644 C 300 514, 620 844, 960 684 S 1450 504, 1700 604'/%3E%3Cpath stroke-opacity='0.044' d='M-50 658 C 300 528, 620 858, 960 698 S 1450 518, 1700 618'/%3E%3Cpath stroke-opacity='0.036' d='M-50 672 C 300 542, 620 872, 960 712 S 1450 532, 1700 632'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 60% 55% at 88% 8%, rgba(186, 14, 49, .08), transparent 70%),
        radial-gradient(ellipse 45% 40% at 5% 95%, rgba(186, 14, 49, .05), transparent 70%) !important;
    background-size: 100% 100%, auto, auto !important;
    background-attachment: fixed !important;
}

.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(186, 14, 49, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(186, 14, 49, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .15) 30%, #000 75%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .15) 30%, #000 75%);
}

.login-page > .wrapper {
    position: relative;
    flex: 1;
    min-height: 0 !important;
    padding: 0;
}

.login-page .wrapper > .body,
.login-page .wrapper > .body > .px-4 {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
}

.login-main {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.login-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    max-width: 100%;
    min-width: 0;
}

.login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 32px 28px 24px;
    background: #fff;
    border: 1px solid #ECECED;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(77, 77, 79, .12);
}

.login-logo {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
}

.login-kicker {
    margin: 0 0 6px;
    color: #BA0E31;
    text-align: center;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.login-title {
    margin: 0 0 24px;
    color: #4D4D4F;
    text-align: center;
    font: 700 1.6rem/1.2 'League Spartan', sans-serif;
}

.login-field {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #DCDCDE;
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}

.login-field:focus-within {
    border-color: #BA0E31;
    box-shadow: 0 0 0 3px rgba(186, 14, 49, .12);
}

.login-field svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 4px 0 14px;
    stroke: #8A8C8E;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-field input {
    flex: 1;
    min-width: 0;
    padding: 13px 12px 13px 8px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: transparent;
    color: #4D4D4F;
    font: inherit;
    font-size: 1rem;
}

.login-field input::placeholder {
    color: #8A8C8E;
    opacity: 1;
}

.login-captcha {
    display: flex;
    justify-content: center;
    min-height: 78px;
    margin: 6px 0 14px;
}

.login-forgot {
    align-self: flex-end;
    margin: -4px 0 18px;
    color: #BA0E31;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.login-submit {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 8px;
    background: #BA0E31;
    color: #fff;
    font: 600 1rem/1.2 'League Spartan', sans-serif;
    cursor: pointer;
    transition: background .15s;
}

.login-submit:hover {
    background: #790003;
}

.login-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.login-option {
    display: block;
    width: 100%;
    padding: 14px;
    border: 1px solid #BA0E31;
    border-radius: 8px;
    background: #BA0E31;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font: 600 1rem/1.2 'League Spartan', sans-serif;
    transition: background .15s, color .15s, border-color .15s;
}

.login-option:hover {
    background: #790003;
    border-color: #790003;
    color: #fff;
}

.login-option--ghost {
    background: #fff;
    color: #BA0E31;
}

.login-option--ghost:hover {
    background: #FBEAEE;
    border-color: #BA0E31;
    color: #790003;
}

.login-help {
    margin: 18px 0 0;
    color: #8A8C8E;
    text-align: center;
    font-size: .85rem;
}

.login-help + .login-help {
    margin-top: 10px;
}

.login-help a {
    color: #BA0E31;
    font-weight: 600;
    text-decoration: none;
}

.login-forgot:hover,
.login-help a:hover {
    color: #790003;
    text-decoration: underline;
}

.login-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    color: #8A8C8E;
    font-size: .85rem;
    text-decoration: none;
}

.login-back:hover {
    color: #BA0E31;
}

.login-back svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-page a:focus-visible,
.login-submit:focus-visible {
    outline: 3px solid rgba(186, 14, 49, .5);
    outline-offset: 3px;
}

.login-alert {
    margin: 18px 0 0;
    overflow-wrap: anywhere;
}

.login-page .footer {
    justify-content: center;
    gap: 4px 16px;
    min-height: 0;
    padding: 16px 24px;
    border: 0;
    background: transparent !important;
    color: #8A8C8E;
    text-align: center;
    font-size: .75rem;
}

.login-page .footer .ms-auto {
    margin-left: 0 !important;
}

.login-label {
    margin: 0 0 6px;
    color: #4D4D4F;
    font-size: .85rem;
    font-weight: 600;
}

.login-text {
    margin: 0 0 18px;
    color: #8A8C8E;
    text-align: center;
    font-size: .9rem;
}

.login-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 22px;
    text-align: center;
}

.login-links a {
    color: #BA0E31;
    font-weight: 600;
    text-decoration: none;
}

.login-links a:hover {
    color: #790003;
    text-decoration: underline;
}

.login-secondary {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #DCDCDE;
    border-radius: 8px;
    background: #fff;
    color: #4D4D4F;
    text-align: center;
    text-decoration: none;
    font: 600 .95rem/1.2 'League Spartan', sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.login-secondary:hover {
    background: #FBEAEE;
    border-color: #BA0E31;
    color: #790003;
}

.login-submit + .login-secondary,
.login-secondary + .login-secondary {
    margin-top: 10px;
}

@media (max-width: 399px) {
    .login-card {
        padding: 28px 20px 24px;
    }

    .login-captcha {
        min-height: 144px;
    }
}