/* =====================================================================
   LOGIN / REGISTER MODALS - LoginStyles.css (rewritten July 2026)

   Styles the auth modals produced by the skin containers
   PopupModelContainer.ascx (.fscAuthLogin) and RegistrationContainer.ascx
   (.fscAuthRegister). Everything is scoped to .fscAuthModal - the stable
   class the containers set - NEVER to myModal_<moduleId> ids (module ids
   differ per environment; the old file carried three dead generations of
   them). Colors come from fantasysportsco.theme.css tokens, so the modals
   follow light/dark mode like the rest of the site.

   Loaded globally by includes/Header.ascx (DnnCssInclude). Cache-busting:
   bump the Client Resource Management version in Host Settings after
   deploying changes to this file.
   ===================================================================== */

/* legacy pass-throughs kept from the old sheet: the /SignIn page can also
   render the login panel inline (non-modal), and the password-reset page
   shares the login form control. Keep those centered and readable without
   restyling unrelated admin forms. */
.dnnLogin { width: 100%; }
.LoginPanel {
    width: auto !important;
    max-width: 450px;
    margin: auto !important;
    padding-right: 0 !important;
    float: none;
}

/* ---------------------------------------------------------------------
   Modal shell: full-screen navy-tinted photo backdrop, centered card
   --------------------------------------------------------------------- */
.fscAuthModal {
    background-image: linear-gradient(rgba(7, 12, 22, .78), rgba(7, 12, 22, .78)), url(/Portals/0/images/bg_sign_in.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* native form controls (inputs, checkbox, captcha) follow the theme */
[data-fsc-theme="dark"] .fscAuthModal { color-scheme: dark; }

.fscAuthModal .ModelContainer {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    margin: 10px !important;
}

.fscAuthModal .modal-content {
    width: min(430px, calc(100vw - 24px));
    margin: auto;
    background: var(--fsc-panel, #fff);
    border: 1px solid var(--fsc-line, #E4E8EE);
    border-radius: var(--fsc-radius-lg, 16px);
    box-shadow: var(--fsc-shadow-lg, 0 18px 40px rgba(22, 32, 46, .14));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ---------------------------------------------------------------------
   Header: centered title + subtitle, quiet close button
   --------------------------------------------------------------------- */
.fscAuthModal .modal-header.dnnRegHeader {
    display: block !important;
    border-bottom-width: 0 !important;
    padding: 26px 28px 0;
}

.fscAuthModal .modal-title,
.fscAuthModal .ContainerTitle {
    font-family: var(--fsc-font-display, 'Hellix', sans-serif) !important;
    font-weight: 800 !important;
    font-size: var(--fsc-fs-xl, 22px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: var(--fsc-text, #16202E) !important;
}

/* The subtitle only makes sense when the modal actually holds the auth
   form. PopupModelContainer may be assigned to other popup modules (the
   old sheet's per-module-id show/hide implies it was), so gate on the
   form's presence rather than trusting the container class alone. */
.fscAuthModal .fscAuthSub {
    display: none;
    margin: 6px 0 0;
    font-family: var(--fsc-font-body, 'Heebo', sans-serif);
    font-size: var(--fsc-fs-base, 14px);
    line-height: 1.45;
    text-align: center;
    color: var(--fsc-text-soft, #5A6678);
}
.fscAuthLogin:has(.dnnLoginService) .fscAuthSub,
.fscAuthRegister:has(.dnnRegistrationForm) .fscAuthSub { display: block; }

.fscAuthModal .modal-header > .close {
    opacity: 1;
    color: var(--fsc-text-faint, #8A94A6);
    text-shadow: none;
    float: right;
    margin: -10px -12px 0 0;
    font-size: 18px;
}
.fscAuthModal .modal-header > .close:hover { color: var(--fsc-text, #16202E); }

.fscAuthModal .modal-body { padding: 18px 28px 24px; }

/* ---------------------------------------------------------------------
   Social sign-in block: normalized buttons + "or" divider after them.
   Provider colors/sprites come from the providers' own stylesheets -
   only the geometry is normalized here.
   --------------------------------------------------------------------- */
.fscAuthModal .dnnSocialRegistration,
.fscAuthModal .LoginPanel,
.fscAuthModal div.dnnRegistrationForm .dnnForm,
.fscAuthModal div.dnnRegistrationForm {
    float: none !important;
    display: block;
    width: 100% !important;
    min-width: inherit !important;
}
.fscAuthModal .loginContent .dnnSocialRegistration { display: none !important; }
.fscAuthModal .SocialLogins .dnnSocialRegistration { display: block !important; }
.fscAuthModal .SocialLogins ul,
.fscAuthModal .SocialLogins li { margin: 0 !important; padding: 0 !important; }

.fscAuthModal #socialControls,
.fscAuthModal #mainContainer {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden;
}

.fscAuthModal ul.buttonList {
    list-style: none;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.fscAuthModal ul.buttonList > li { width: 100% !important; float: none !important; }

/* Facebook auth is retired. The login module's stylesheet already hides
   it (Admin/Authentication/module.css .facebook rule) but the register
   module's does not - hide it everywhere from here. Deliberately NOT
   scoped to .fscAuthModal so the standalone /SignIn and /Registrations
   page renderings are covered too. */
ul.buttonList li.facebook { display: none !important; }

/* "or continue with email" divider between the social buttons and the form */
.fscAuthModal ul.buttonList:after {
    content: "Or sign in with email";
    display: block !important;
    clear: both;
    padding: 16px 10px 14px !important;
    font-family: var(--fsc-font-body, 'Heebo', sans-serif);
    font-size: var(--fsc-fs-sm, 12.5px) !important;
    line-height: 1.4 !important;
    text-align: center;
    color: var(--fsc-text-faint, #8A94A6);
}
.fscAuthRegister ul.buttonList:after { content: "Or continue with email"; }

/* Generic provider buttons get the navy treatment. Google is EXCLUDED:
   DNN's Authentication/module.css renders it as Google's official branded
   button PNG (rest/focus/pressed art) with transparent text - overriding
   its background here half-breaks that (navy at rest, Google art popping
   through on hover). */
.fscAuthModal ul.buttonList li:not(.googleplus) a {
    clear: both;
    display: block !important;
    float: none !important;
    overflow: inherit !important;
    position: relative;
    margin: 0 0 8px !important;
    padding: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: var(--fsc-nav, #1E3A8A);
    border: none !important;
    border-radius: var(--fsc-radius-sm, 8px) !important;
    box-shadow: var(--fsc-shadow-sm, 0 2px 6px rgba(22, 32, 46, .06)) !important;
    text-shadow: none !important;
}
.fscAuthModal ul.buttonList li:not(.googleplus) a:hover { filter: brightness(1.08); }

/* provider sprite/text spans (geometry matches the old sheet so the
   provider background sprites still line up) */
.fscAuthModal ul.buttonList li:not(.googleplus) a span {
    color: #fff !important;
    line-height: 40px;
    padding: 0 0 0 45px !important;
    text-align: left !important;
}

/* Google: keep the official button art from module.css, just normalize
   the box (module.css hardcodes the li to 84px - the source of the big
   dead gap above the email divider). */
.fscAuthModal ul.buttonList li.googleplus { height: auto !important; }
.fscAuthModal ul.buttonList li.googleplus a {
    clear: both;
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.fscAuthModal ul.buttonList li.googleplus a span { color: transparent !important; }

/* ---------------------------------------------------------------------
   Form fields (login provider control + DnnFormEditor-generated register
   rows). Single-column, labels above inputs.
   --------------------------------------------------------------------- */
.fscAuthModal .dnnFormItem {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 0 12px !important;
}

/* default.css right-aligns + indents labels (.dnnLabel width 32%,
   text-align right, .dnnLabel > span right). Cover the wrapper div AND
   the label/span rendered inside it (the login control nests
   <div class="dnnLabel"><label class="dnnFormLabel">). */
.fscAuthModal .dnnLabel,
.fscAuthModal .dnnLabel > label,
.fscAuthModal .dnnLabel > span,
.fscAuthModal label.dnnFormLabel,
.fscAuthModal span.dnnFormLabel {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left !important;
}

.fscAuthModal .dnnFormLabel,
.fscAuthModal .dnnLabel span,
.fscAuthModal .dnnBoxLabel {
    font-family: var(--fsc-font-body, 'Heebo', sans-serif) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--fsc-fs-sm, 12.5px) !important;
    line-height: 1.5 !important;
    color: var(--fsc-text-soft, #5A6678) !important;
}

.fscAuthModal .dnnForm input[type="text"],
.fscAuthModal .dnnForm input[type="password"],
.fscAuthModal .dnnForm input[type="email"] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 9px 12px;
    background: var(--fsc-panel-2, #F8FAFC) !important;
    border: 1px solid var(--fsc-line-strong, #CBD2DC) !important;
    border-radius: var(--fsc-radius-sm, 8px) !important;
    box-shadow: none !important;
    font-family: var(--fsc-font-body, 'Heebo', sans-serif);
    font-size: var(--fsc-fs-base, 14px);
    color: var(--fsc-text, #16202E);
}
.fscAuthModal .dnnForm input[type="text"]:focus,
.fscAuthModal .dnnForm input[type="password"]:focus,
.fscAuthModal .dnnForm input[type="email"]:focus {
    outline: none;
    border-color: var(--fsc-blue, #2563EB) !important;
    box-shadow: 0 0 0 3px var(--fsc-blue-soft, #DBEAFE) !important;
}

/* register password-strength wrapper must not constrain the input */
.fscAuthModal .password-strength-container {
    background: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
}
.fscAuthModal .password-strength-container input.password-strength { width: 100% !important; }
.fscAuthModal .min-length-text {
    clear: both;
    font-size: var(--fsc-fs-xs, 11px);
    color: var(--fsc-text-faint, #8A94A6);
}

/* required stars / help icons: the form is short - keep it quiet */
.fscAuthModal span.dnnFormRequired:after { display: none !important; }
.fscAuthModal a.dnnFormHelp { display: none !important; }

/* validation messages on the danger token */
.fscAuthModal .dnnFormMessage.dnnFormError {
    background: var(--fsc-danger-soft, #FBE3E4) !important;
    border: 1px solid var(--fsc-danger, #D7434A) !important;
    border-radius: var(--fsc-radius-sm, 8px);
    color: var(--fsc-text, #16202E) !important;
}

/* register: hide the boilerplate help blurb + stray <br>s (the container
   subtitle says it better) */
.fscAuthRegister .dnnFormInfo,
.fscAuthRegister .dnnRegistrationForm br,
.fscAuthModal .regLoginRow1 { display: none !important; }

/* ---------------------------------------------------------------------
   Login extras: remember me, forgot password, in-form register link
   --------------------------------------------------------------------- */
/* the container's RegisterLink replaces the login form's own register li */
.fscAuthLogin li[id$="_liRegister"] { display: none !important; }
/* Cancel buttons are meaningless inside a dismissible modal. Hide every
   secondary action in the login modal, then re-allow the ones that live
   in .dnnLoginActions (Reset Password) - same approach as the old sheet;
   an id-suffix match on _cmdCancel proved unreliable across the module's
   control tree. */
.fscAuthLogin a.dnnSecondaryAction { display: none !important; }
.fscAuthLogin .dnnLoginActions a.dnnSecondaryAction { display: inline-block !important; }
.fscAuthRegister a.dnnSecondaryAction { display: none !important; }

.fscAuthModal .dnnLoginRememberMe { display: inline-flex; align-items: center; gap: 6px; }
.fscAuthModal .dnnLoginRememberMe input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--fsc-blue, #2563EB);
}
.fscAuthModal .dnnLoginRememberMe label {
    font-size: var(--fsc-fs-sm, 12.5px) !important;
    color: var(--fsc-text-soft, #5A6678) !important;
    font-weight: 400 !important;
}

.fscAuthModal .dnnLoginActions { display: block; }
.fscAuthModal .dnnLoginActions ul.dnnActions { margin: 0; padding: 0; text-align: center; }
.fscAuthModal .dnnLoginActions li { display: inline-block; float: none !important; list-style: none; }
.fscAuthModal .dnnLoginActions a.dnnSecondaryAction {
    display: inline-block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 8px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    font-family: var(--fsc-font-body, 'Heebo', sans-serif);
    font-size: var(--fsc-fs-sm, 12.5px);
    color: var(--fsc-blue, #2563EB) !important;
}
.fscAuthModal .dnnLoginActions a.dnnSecondaryAction:hover { text-decoration: underline; }

/* label-only spacer rows the login control emits (the plain no-id
   &nbsp; label before the action links, and the button/remember-me
   AssociatedControl labels) */
.fscAuthLogin label.dnnFormLabel:not([id]),
.fscAuthLogin label[id$="_lblLogin"],
.fscAuthLogin label[id$="_lblLoginRememberMe"] { display: none !important; }

/* ---------------------------------------------------------------------
   Primary actions: Sign In / Register buttons on the brand red
   --------------------------------------------------------------------- */
.fscAuthModal a.dnnPrimaryAction {
    display: block !important;
    float: none !important;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 0 !important;
    padding: 10px 16px !important;
    background: var(--fsc-red, #E5252C) !important;
    border: none !important;
    border-radius: var(--fsc-radius-sm, 8px) !important;
    box-shadow: var(--fsc-shadow-sm, 0 2px 6px rgba(22, 32, 46, .06)) !important;
    font-family: var(--fsc-font-body, 'Heebo', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: var(--fsc-fs-base, 14px);
    line-height: 20px !important;
    text-align: center;
    text-transform: none !important;
    text-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
}
.fscAuthModal a.dnnPrimaryAction:hover { background: var(--fsc-red-deep, #C11B22) !important; }

.fscAuthModal a.dnnDisabledAction:link,
.fscAuthModal a.dnnDisabledAction:visited,
.fscAuthModal a.dnnDisabledAction:active,
.fscAuthModal a.dnnDisabledAction:hover {
    text-decoration: none;
    opacity: .5;
    cursor: default;
}

.fscAuthModal ul.dnnActions { display: block; margin: 0; padding: 0; }
.fscAuthModal ul.dnnActions li { display: block; float: none !important; text-align: center !important; list-style: none; }

/* ---------------------------------------------------------------------
   Footer cross-links (container markup)
   --------------------------------------------------------------------- */
.fscAuthModal .RegisterLink,
.fscAuthModal .RegLoginLink {
    display: none !important;   /* shown below only alongside a real auth form */
    clear: both;
    position: relative;
    padding: 16px 0 0;
    text-align: center;
    font-family: var(--fsc-font-body, 'Heebo', sans-serif);
    font-size: var(--fsc-fs-base, 14px);
    font-weight: 400;
    color: var(--fsc-text-soft, #5A6678);
}
.fscAuthModal .RegisterLink a,
.fscAuthModal .RegLoginLink a {
    display: inline;
    font-size: var(--fsc-fs-base, 14px);
    font-weight: 600;
    color: var(--fsc-blue, #2563EB);
}
.fscAuthModal .RegisterLink a:hover,
.fscAuthModal .RegLoginLink a:hover { text-decoration: underline; }
.fscAuthLogin:has(.dnnLoginService) .RegisterLink,
.fscAuthRegister:has(.dnnRegistrationForm) .RegLoginLink { display: block !important; }

/* ---------------------------------------------------------------------
   Captcha (only renders when enabled in site settings)
   --------------------------------------------------------------------- */
.fscAuthModal div.dnnCaptcha {
    width: 100% !important;
    margin: 0;
    padding: 0;
    text-align: center;
}
.fscAuthModal span.dnnFormMessage.dnnFormError.dnnCaptcha {
    position: static;
    display: block;
    margin-top: 6px;
}

/* ---------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------- */
@media screen and (max-width: 680px) {
    .fscAuthModal .ModelContainer {
        position: unset !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
    .fscAuthModal .modal-content {
        width: auto;
        margin: 12px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .fscAuthModal .modal-header.dnnRegHeader { padding: 20px 18px 0; }
    .fscAuthModal .modal-body { padding: 14px 18px 20px; }
}