/* Opt out of Chrome Android force-dark (esp. OnePlus / OxygenOS) so the
 * branded light theme is respected. Add color-scheme dark here too if you
 * ship an actual dark variant. */
:root { color-scheme: light; }

body {
    background-color: #000;
    overflow-x: hidden;
}

#loginForm {
    background-color: #fff;
    width: 300px;
    margin: 120px auto;
    padding: 20px;
    border-radius: 5px;
}

#submit-btn {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 10px;
    background-color: #333;
    color: #fff;
}

ul {
    padding-left: 15px;
}

    ul li {
        color: red;
    }

.field-validation-error {
    display: block;
    color: red;
    margin: 12px;
}

.logo {
    margin-bottom: 40px;
}

/* ────────────────────────────────────────────────────────────────────────
 * GLOBAL MOBILE LOGIN OVERRIDES — applies to every tenant.
 *
 * Tenants put their richer two-panel / hero-image layouts in
 * /custom/Content/login.css. Those layouts work for desktop but burn most of
 * the viewport on phones (huge hero image, awkward floating buttons, fields
 * cramped at the bottom). These rules collapse the hero, stack the layout
 * vertically and give the form room to breathe on narrow screens.
 *
 * !important is used throughout because the per-tenant /custom/Content/login.css
 * loads AFTER this file and would otherwise win the cascade. Tenants can still
 * override by adding their OWN @media block in /custom/ with higher specificity
 * if they want a different mobile design.
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    body {
        background-color: #f8fafc !important;
        overflow-x: hidden !important;
    }

    /* Wrapper: stack panels vertically, no min-height tricks. */
    #login-wrapper {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    /* Any hero / branded panel: cap height so the form gets the rest.
     * Covers known class names from existing tenant themes (.left-panel)
     * plus generic patterns (.hero, .login-banner, .branding). */
    #login-wrapper > .left-panel,
    #login-wrapper > .hero,
    #login-wrapper > .login-banner,
    #login-wrapper > .branding,
    #login-wrapper > [class*="hero"],
    #login-wrapper > [class*="banner"] {
        width: 100% !important;
        height: 22vh !important;
        max-height: 180px !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* The container that holds the actual <form>. Take the rest of the space. */
    #core-login-container,
    #login-wrapper > .right-panel,
    #login-wrapper > .login-container,
    #login-wrapper > [class*="form-panel"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        padding: 24px 20px 32px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* The form section + form itself. Take full width within the container. */
    #loginForm,
    #login-form,
    .login-form {
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Title (h1 in the form). */
    #loginForm h1,
    #login-form h1,
    .login-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin: 8px 0 18px !important;
        text-align: left !important;
    }

    /* Inputs — 16px font prevents iOS Safari auto-zoom on focus. */
    .form-control {
        width: 100% !important;
        padding: 13px 14px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        margin-bottom: 4px !important;
        box-sizing: border-box !important;
    }

    /* The big primary button — keep full-width but tighter. */
    #submit-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        margin-top: 18px !important;
        margin-bottom: 12px !important;
        border-radius: 999px !important;
    }

    /* "Back to home" / block-button style buttons that some themes float in
     * the top-right of the form panel — pull them back into normal flow. */
    .block-button,
    .back-to-home,
    .form-back-btn {
        position: static !important;
        display: inline-block !important;
        margin: 0 0 16px 0 !important;
        align-self: flex-start !important;
    }

    /* Brand logo overlays (typically absolute-positioned over the hero) —
     * keep visible but scale down. */
    .logo-container {
        top: 12px !important;
        left: 12px !important;
        transform: scale(0.85) !important;
        transform-origin: top left !important;
    }

    /* Footer disclaimer: pull out of absolute positioning into flow. */
    .disclaimer {
        position: static !important;
        padding: 14px 20px !important;
        font-size: 11px !important;
        margin-top: auto !important;
    }
    .disclaimer-links {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    /* Modal tweaks (terms/privacy popups) for narrow screens. */
    .modal-content {
        max-width: 100% !important;
        max-height: 92vh !important;
        margin: 0 12px !important;
    }
}

/* Very narrow phones (e.g. iPhone SE width 320px) — tighten padding more. */
@media (max-width: 380px) {
    #core-login-container,
    #login-wrapper > .right-panel,
    #login-wrapper > .login-container {
        padding: 20px 16px 28px !important;
    }
    #loginForm h1,
    #login-form h1,
    .login-title {
        font-size: 22px !important;
    }
}