/* #region Font Face */
/* DM Sans variable font — same file as Angular (opsz axis gives correct letterforms at display sizes) */
@font-face {
    font-family: "DM Sans";
    src: url("/assets/DMSans-VariableFont_opsz,wght.woff2") format("woff2-variations"),
         url("/assets/DMSans-VariableFont_opsz,wght.woff2") format("woff2") tech("variations");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-display: swap;
}

/* #endregion */

/* #region Design Tokens */
/* ==========================================================================
   Design Tokens (CSS Custom Properties)

   Bridged tokens source their value from the active MudBlazor theme via
   --mud-palette-* so a future theme swap cascades automatically.
   Hardcoded tokens have no MudBlazor palette equivalent.
   ========================================================================== */
:root {
    /* ── Bridged to MudBlazor palette (BlueKcTheme.cs PaletteLight) ── */
    --color-primary:        var(--mud-palette-primary);                    /* Primary = #007CB7 */
    --color-navy:           var(--mud-palette-primary-darken);             /* PrimaryDarken = #002A3A */
    --color-navy-mid:       var(--mud-palette-dark-darken);                /* DarkDarken = #002131 */
    --color-accent-blue:    var(--mud-palette-primary-lighten);            /* PrimaryLighten = #8DC8E8 */
    --color-primary-light:  var(--mud-palette-action-disabled-background); /* ActionDisabledBackground = #DFF0FB */
    --color-icon-blue:      var(--mud-palette-tertiary);                   /* Tertiary = #006193 */
    --color-disabled:       var(--mud-palette-text-disabled);              /* TextDisabled = #ABA7A4 */
    --color-text-dark:      var(--mud-palette-text-primary);               /* TextPrimary = #010101 */
    --color-text-muted:     var(--mud-palette-action-default);             /* ActionDefault = #57616D */
    --color-text-gray:      var(--mud-palette-text-secondary);             /* TextSecondary = #6B7786 */

    /* ── Hardcoded — no MudBlazor palette equivalent ── */
    --color-primary-hover:  #005A89;
    --color-navy-dark:      #042739;
    --color-warning:        #FFDA7D;
    --color-error-ui:       #CA4848;
    --color-info:           #007CB7;
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-bg-light:       #F0EFEE;
    --color-bg-subtle:      #F5FAFD;
    --color-border:         #EAE8E7;
    --color-border-light:   #F5F5F5;
    --color-text-secondary: #5F5955;
    --color-footer-text:    #E6F6FA;
    --color-footer-link:    #E6F6FA;

    /* ── Typography ── */
    --font-primary: 'DM Sans', sans-serif;

    /* ── Layout ── */
    --content-max-width: 1300px;
    --content-padding-x: 24px;

    /* ── Elevation ── */
    --shadow-card:   0px 4px 4px rgba(0, 0, 0, 0.25);
    --shadow-button: 0px 1px 2px rgba(16, 24, 40, 0.05);

    /* ── Border Radius ── */
    --radius-card:    0 15px 0 15px;
    --radius-pill:    9999px;
    --radius-rounded: 15px;
}

/* #endregion */

/* #region Typography Utilities */
/* ==========================================================================
   Typography Utilities
   Use these classes directly in new markup, or rely on the grouped selectors
   below so existing component classes inherit the shared rules automatically.
   ========================================================================== */

/* 40px black — section headings (dashboard, search, resources, contact) */
.text-heading-xl,
.license-status-title,
.business-tools-title,
.member-search-title,
.news-and-resources-title,
.contact-us-title {
    font-weight: 900;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.8px;
}

/* 28px black — card titles */
.text-heading-lg,
.enrollment-card-title,
.resource-card-title {
    font-weight: 900;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.56px;
    margin: 0;
}

/* 18px body — descriptions and contact text */
.text-body-lg,
.ifp-description,
.ifp-status-description,
.license-status-description,
.member-search-description,
.contact-us-col-heading,
.contact-us-contact-line {
    font-size: 18px;
    line-height: 28px;
}

/* #endregion */

/* #region Individual & Family (Quoting & Renewals) */
/* ── Individual & Family Redesign (Quoting & Renewals) ── */
.ifp-section-redesign {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.ifp-title,
.ifp-status-title {
    font-weight: 600;
    font-size: 24px;
    color: var(--color-navy-mid);
    line-height: 32px;
    margin-bottom: 0;
    letter-spacing: -0.24px;
}

.ifp-description {
    color: var(--color-navy-mid);
    margin-bottom: 0;
}

.ifp-plan-list {
    list-style: disc inside;
    margin: 0;
    padding: 0;
    width: 100%;
}

    .ifp-plan-list li {
        margin-bottom: 16px;
        margin-left: 27px;
        display: list-item;
        line-height: 28px;
    }

        .ifp-plan-list li:last-child {
            margin-bottom: 0;
        }

.ifp-plan-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 18px;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    vertical-align: middle;
}

    .ifp-plan-link:disabled {
        color: var(--color-disabled);
        cursor: not-allowed;
        text-decoration: underline;
    }

.ifp-plan-link-disabled .ifp-plan-label {
    text-decoration: none !important;
}
/* Disabled ACA Link (Figma style) */
.ifp-plan-link-disabled {
    color: var(--color-disabled) !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    background: none;
    border: none;
    padding: 0;
    vertical-align: middle;
}

    .ifp-plan-link-disabled .ifp-info-icon {
        margin-left: 8px;
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
    }

.ifp-plan-link-disabled-popup {
    display: none;
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-rounded);
    box-shadow: var(--shadow-card);
    padding: 16px;
    min-width: 270px;
    color: var(--color-navy);
    font-size: 14px;
    letter-spacing: -0.56px;
    line-height: 20px;
    white-space: normal;
}

.ifp-plan-link-disabled:hover .ifp-plan-link-disabled-popup,
.ifp-plan-link-disabled:focus .ifp-plan-link-disabled-popup {
    display: block;
}

.ifp-plan-label {
    line-height: 28px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ifp-chevron {
    margin-left: 8px;
    font-size: 18px;
    color: var(--color-primary);
    font-weight: 600;
    line-height: 28px;
}

.ifp-divider {
    width: 100%;
    height: 1px;
    background: var(--color-border-light);
    margin: 48px 0 0 0;
}

.ifp-status-section {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 48px 0 0 0;
}

.ifp-status-description {
    color: var(--color-navy);
    margin-bottom: 0;
}
/* #endregion */

/* #region Footer */
/* Footer custom classes for moving inline styles */
.footer-no-list-style {
    list-style-type: none;
}

.footer-top-row > div:last-child ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;
}

    .footer-top-row > div:last-child ul li {
        min-width: 48%;
    }

.footer-middle-row-custom {
    display: flex;
    gap: 64px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 56px;
    margin-top: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 200px;
    max-width: 260px;
}

.footer-col-company {
    flex: 2 1 0;
    min-width: 340px;
    max-width: 395px;
}

.footer-col-legal {
    flex: 2 1 0;
    min-width: 340px;
    max-width: 700px;
}

.footer-legal-menu-custom {
    display: flex;
    gap: 56px;
    justify-content: space-between;
}

.footer-legal-menu-list {
    flex: 1 1 0;
    min-width: 180px;
}

.footer-divider {
    margin: 50px 0;
}

    .footer-divider:before {
        content: "";
        width: 100%;
        display: block;
        height: 1px;
        background-color: var(--color-primary);
    }

    .footer-divider img {
        display: block;
        margin: 0 auto;
        width: 80px;
        top: -15px;
        height: 30px;
        padding: 0 20px;
        background-color: var(--color-navy-dark);
    }

.footer-divider-custom {
    margin: 32px 0 16px 0;
}

.footer-disclosures-custom {
    margin-top: 32px;
}

.footer-disclosures-header {
    margin-bottom: 12px;
}
/* Adds extra spacing above specific section headers in the footer */
.footer-section-spacer {
    margin-top: 32px !important;
}

footer.site-footer h6 {
    color: #8DC8E8 !important;
}

footer.site-footer h6,
footer.site-footer h5 {
    font-size: 0.95em;
}

/* #endregion */

/* #region Base Layout */
/* wwwroot/css/app.css or site.css */

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-primary);
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mud-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── MudBlazor Paper Component Override ─────────────────────────── */
/*.mud-paper {
    background-color: #F5F4F3 !important;
}*/

/* ── Layout / Content Wrapper ─────────────────────────────────── */
.content-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
    flex: 1;
}

/* ── Page Header ──────────────────────────────────────────────── */
.page-header {
    padding: 60px 0 40px;
    background: #ffffff;
}

.title {
    font-weight: 900;
    font-size: 46px;
    line-height: 50px;
    letter-spacing: -0.02em;
    color: var(--color-navy);
    margin: 0 0 32px 0;
}

.title-underline {
    width: 62px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 8px;
    margin-bottom: 32px;
}

.subtitle {
    font-size: 18px;
    line-height: 24px;
    color: var(--color-navy-mid);
    margin: 0;
}

/* Blazor's FocusOnNavigate targets h1 on every page load — suppress the browser outline on headings */
.su-page-title:focus,
.su-page-title-section:focus,
.su-page-header:focus,
.su-agency-title:focus,
.su-shell h1:focus,
.su-shell h2:focus,
.su-shell:focus,
.su-content:focus,
/* Standard secure pages — .page-header h1 */
.title:focus,
/* Broker Attestation */
.ba-title:focus {
    outline: none;
}


/* ── Top Nav Shell (replaces old sidebar layout) ── */
/* Pill style ONLY for QR action buttons (matches Figma) */
.round-action-btn.mud-button-root {
    height: 46px !important;
    padding: 0 27px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-pill) !important;
    letter-spacing: -0.02em !important;
}
/* #endregion */

/* #region Buttons */
/* ==========================================================================
   Buttons
   ========================================================================== */
button {
    background: transparent;
    border: none;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn {
    text-decoration: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 none;
    text-align: center;
    background-color: var(--color-primary) !important;
    color: white !important;
    font-weight: 700;
    font-size: 1.1em;
    padding: 12px 20px;
    border-radius: 100px;
    line-height: 28px;
    transition: color 500ms, background-color 500ms, border-color 500ms;
}

    .btn:hover, .btn:focus {
        text-decoration: none;
        background-color: #042739 !important;
        color: white;
    }

    .btn:after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        transition: all 0.15s ease;
    }

.btn-large {
    font-size: 15px !important;
    line-height: 28px !important;
}

.btn--round {
    border-radius: 100px;
}

.hero-hero-content-buttons {
    gap: 1em;
    display: flex;
}

    /* Login button - FULL WIDTH inside hero box, taller padding to match Angular's icon-inflated height */
    .hero-hero-content-buttons .btn {
        display: inline-flex;
        width: 100%;
        text-align: center;
        padding-top: 17px;
        padding-bottom: 17px;
    }

/* Prevent full-width for QR action buttons */
.round-action-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

.hidden-tablet-mobile {
    display: none;
}

@media all and (min-width: 720px) {
    /* Tab rounded corners at desktop */
    .login-page .header-tabs a {
        border-top-right-radius: 0.55em;
        border-top-left-radius: 0.55em;
    }
}

.site-branding {
    /* padding-left: 20px; */
    position: relative;
    display: block; /* Keep as block, not flex */
    align-self: center; /* Override parent's align-items: end for this element only */
}

.site-branding svg {
        max-width: 200px;
        display: block;
    }

/* Restore left padding for the logo on the login page (standard layout uses 0 to align with nav) */
.login-page .site-branding {
    padding-left: 20px;
}

/* Logo sizing for standard and public headers */
.site-branding .site-logo {
    height: auto !important;
    width: 260px !important;
    padding-top: 4px;
    display: block;
    transform-origin: left center;
}

/* #endregion */

/* #region Top Navigation */
.top-nav-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Primary appbar — white background with Blue KC logo (matches Figma) */
.top-appbar,
.top-appbar.mud-appbar {
    background-color: #FFFFFF !important;
    color: var(--color-text-dark) !important;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1100;
    height: 88px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    /* Stretch MudBlazor's inner toolbar to fill the full appbar height */
    .top-appbar .mud-toolbar {
        height: 100%;
    }

    /* Make content-wrapper a flex row inside the AppBar so logo/spacer/profile align correctly */
    .top-appbar .content-wrapper {
        display: flex;
        align-items: center;
        height: 100%;
        flex: 1;
    }

/* ── Top Navigation Bar (New Design) ────────────────────────────────── */
.top-nav-container {
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-primary);
    z-index: 1200;
}

.top-nav-bar {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0;
    width: 100%;
    background-color: var(--color-primary);
}

.top-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
    color: white;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Remove left padding from the first nav item (Home) so it aligns with the logo and page content */
.top-nav-bar .content-wrapper > .top-nav-item:first-child {
    padding-left: 0;
}

/* Fix the active underline for the Home item — no left padding so anchor left and only subtract right padding */
.top-nav-bar .content-wrapper > .top-nav-item:first-child.top-nav-item-active::after,
.top-nav-bar .content-wrapper > .top-nav-item:first-child .top-nav-item-underline {
    left: 0;
    transform: none;
    width: calc(100% - 20px);
}

    .top-nav-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        text-decoration: none;
    }

.top-nav-dropdown-arrow {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
    font-size: 16px;
}

.top-nav-item:hover .top-nav-dropdown-arrow {
    transform: rotate(180deg);
}

.top-nav-item-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    height: 8px;
    background-color: var(--color-accent-blue);
    border-radius: 4px 4px 0 0;
    display: none;
}

/* Hover underline is driven purely by CSS (no Blazor Server round-trip) */
.top-nav-item:hover .top-nav-item-underline {
    display: block;
}

.top-nav-item-active {
    position: relative;
}

    .top-nav-item-active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        height: 8px;
        background-color: var(--color-accent-blue);
        border-radius: 4px 4px 0 0;
    }

    /* On hover the .top-nav-item-underline element provides the indicator, so hide
       the active ::after to avoid a doubled underline. */
    .top-nav-item-active:hover::after {
        display: none;
    }

/* Dropdown Menu */
.top-nav-dropdown {
    position: fixed;
    top: 148px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgb(240, 239, 238);
    box-shadow: var(--shadow-card);
    display: none;
    z-index: 1000;
}

/* Open the dropdown on hover of its nav item (the panel is a descendant of the
   item, so hovering the panel keeps the item hovered too). Pure CSS = instant,
   no Blazor Server round-trip and no flicker. */
.top-nav-item:hover > .top-nav-dropdown {
    display: flex;
}

/* Transparent bridge across the seam between the nav row and the panel so a
   straight downward mouse move never crosses an unhovered dead-zone. */
.top-nav-item:hover > .top-nav-dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.top-nav-dropdown-empty {
    width: 290px;
    flex-shrink: 0;
}

.top-nav-dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 36px 0 12px;
    width: 400px;
    flex-shrink: 0;
}

.top-nav-dropdown-section-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-nav-dropdown-section-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 18px;
    color: var(--color-navy);
    margin: 0;
}

.top-nav-dropdown-section-underline {
    width: 30px;
    height: 7px;
    background-color: var(--color-primary);
    margin-left: 6px;
    border-radius: 8px;
}

.top-nav-dropdown-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-nav-dropdown-link {
    font-size: 18px;
    line-height: 18px;
    color: var(--color-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

    .top-nav-dropdown-link:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }

/* Button variant of a dropdown link (used to trigger an action such as the
   BlueDirect SSO launch) so it matches the anchor links exactly. The compound
   selector raises specificity above the global `button { text-align: center }`
   rule, and align-self keeps the button flush-left at its content width instead
   of stretching to fill (and centering within) the flex column. */
.top-nav-dropdown-link.top-nav-dropdown-link-button {
    align-self: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-weight: inherit;
    line-height: 18px;
    text-align: left;
    cursor: pointer;
}

/* Promotional Card */
.top-nav-dropdown-promo {
    display: flex;
    flex-direction: column;
    background-color: var(--color-border);
    padding: 36px 150px 36px 80px;
    width: 487px;
    flex-shrink: 0;
    position: relative;
}

.top-nav-dropdown-promo-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 203px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

    .top-nav-dropdown-promo-card:hover {
        opacity: 0.8;
    }

.top-nav-dropdown-promo-image {
    width: 186px;
    height: 121px;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.top-nav-dropdown-promo-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-nav-dropdown-promo-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-navy);
    margin: 0;
    padding: 4px 0;
}

.top-nav-dropdown-promo-text {
    font-size: 16px;
    line-height: 18px;
    color: var(--color-navy);
    margin: 0;
}

.top-nav-dropdown-close {
    position: absolute;
    top: 12px;
    right: 183px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-navy);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .top-nav-dropdown-close:hover {
        color: var(--color-primary);
    }

/* Adjust main content to sit below nav bar */
.top-nav-content,
.top-nav-content.mud-main-content {
    flex: 1;
    padding-top: 148px;
    display: flex;
    flex-direction: column;
}

/* #endregion */

/* #region Superuser Layout */
/* ── Superuser Layout ── */
.su-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.su-shell > * {
    flex-shrink: 0;
}

.su-header {
    background-color: #ffffff;
    height: 84px;
    min-height: 84px;
    width: 100%;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 #e0e0e0;
    box-sizing: border-box;
    overflow: visible;
}

.su-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    overflow: visible;
}

.su-header-logo {
    width: auto;
    height: auto;
    display: block;
    text-decoration: none;
    flex-shrink: 0;
    overflow: visible;
}

.su-header-logo svg {
    display: block;
    width: 163px;
    height: 54px;
}

.su-header-logo img {
    display: block;
    height: auto;
    width: 260px;
    margin-left: -30px;
    padding-top: 4px;
    transform: scale(1.8);
    transform-origin: left center;
}

.su-logout-link {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #007CB7;
    text-decoration: underline;
    letter-spacing: -0.32px;
    cursor: pointer;
}

.su-logout-link:hover {
    color: #005f8c;
}

.su-nav-bar {
    height: 18px;
    min-height: 18px;
    background-color: #007CB7;
    width: 100%;
    flex-shrink: 0;
    display: block;
    position: relative;
    z-index: 99;
}

.su-page-header {
    background: #ffffff;
    padding: 0;
}

.su-page-title-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 60px 0;
}

.su-page-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 46px;
    line-height: 50px;
    letter-spacing: -1.38px;
    color: #002A3A;
    margin: 0;
}

.su-title-underline {
    width: 62px;
    height: 10px;
    background-color: #007CB7;
    border-radius: 8px;
}

.su-tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #ABA7A4;
}

.su-tab {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #002A3A;
    padding: 20px 16px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 6px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.su-tab:hover {
    color: #002A3A;
    border-bottom-color: rgba(0, 124, 183, 0.3);
}

.su-tab-active {
    color: #002A3A;
    font-weight: 800;
    border-bottom-color: #007CB7;
}

.su-content {
    flex: 1;
    background: #ffffff;
    padding: 60px 0 80px;
}

.su-search-card {
    background: #ffffff;
    border: 1px solid #EAE8E7;
    border-radius: 0 15px 0 15px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    width: 704px;
    padding: 0 40px;
}

.su-search-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0;
    width: 100%;
}

.su-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.su-search-form-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #002A3A;
    margin: 0;
    display: block;
}

.su-search-form-or {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #002A3A;
    margin: 0;
}

.su-search-form-input,
.su-search-form-input input {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    width: 100%;
}

/* MudBlazor outlined input dark border override for search form */
.su-search-form .mud-input-outlined fieldset {
    border-color: #002A3A;
}
.su-search-form .mud-input-outlined:hover:not(.mud-disabled) fieldset {
    border-color: #002A3A;
}
.su-search-form .mud-input-outlined.mud-input-focused fieldset {
    border-color: #007CB7;
}

.su-search-btn {
    display: inline-flex;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    background-color: #007CB7;
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 100px;
    height: 46px;
    padding: 0 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.su-search-btn:hover {
    background-color: #005a8a;
    text-decoration: none;
    color: #ffffff;
}

.su-search-form .su-search-btn {
    align-self: flex-start;
}

/* ── Superuser Results ── */
.su-results {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
}

.su-result-card {
    background: #ffffff;
    border: 1px solid #EAE8E7;
    border-radius: 0 15px 0 15px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    width: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.su-result-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.su-result-card-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.56px;
    color: #002A3A;
}

.su-result-name-bold {
    font-weight: 900;
}

.su-result-name-id {
    font-weight: 400;
}

.su-result-card-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #002A3A;
}

.su-result-meta-label {
    font-weight: 600;
}

.su-result-meta-value {
    font-weight: 400;
}

.su-return-btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 31px;
    background-color: #DFF0FB;
    color: #002A3A;
    border: none;
    border-radius: 100px;
    height: 46px;
    padding: 0 27px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.su-return-btn:hover {
    background-color: #c5e3f5;
    text-decoration: none;
}

/* ── Profile su-* content wrapper (stretches su grids to full width inside ProfileLayout) ── */
.profile-su-content {
    width: 1300px;
    max-width: 100%;
}

/* ── Agency Registered Users Page ── */

.su-agency-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 40px;
}

.su-agency-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.8px;
    color: #002A3A;
    margin: 0;
}

.su-agency-search {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0 0 20px;
}

.su-agency-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 20px;
}

.su-agency-filter-label {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-navy);
}

.su-agency-clear-filters-link {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-primary);
    text-decoration: underline;
}

.su-agency-search-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #002A3A;
}

.su-search-input-wrapper {
    position: relative;
    width: 100%;
}

.su-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    color: #ABA7A4;
}

.su-search-native-input {
    width: 100%;
    height: 48px;
    border: 1px solid #57616D;
    border-radius: 4px;
    padding: 0 12px 0 40px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: -0.24px;
    color: #002A3A;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
}

.su-search-native-input::placeholder {
    color: #ABA7A4;
}

.su-search-native-input:focus {
    border-color: #007CB7;
}

/* ── User Table ── */

.su-user-table {
    width: 100%;
    border-bottom: 10px solid #EAE8E7;
    border-radius: 0;
}

.su-user-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px;
    border-bottom: 5px solid #007CB7;
    border-radius: 15px 15px 0 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.4px;
    color: #002A3A;
}

.su-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.su-sortable:hover {
    color: #007CB7;
}

.su-sort-icon {
    margin-left: 6px;
    font-size: 16px;
    color: #007CB7;
}

.su-user-table-divider {
    height: 32px;
    display: flex;
    align-items: center;
}

.su-user-table-divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #EAE8E7;
}

.su-sa-divider {
    display: flex;
    align-items: center;
}

.su-sa-divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #EAE8E7;
}

.su-user-table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    min-height: 79px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #002A3A;
}

/* Column widths matching Figma proportions */
.su-col-name {
    width: 169px;
    flex-shrink: 0;
}

.su-col-username {
    width: 272px;
    flex-shrink: 0;
}

.su-col-email {
    width: 272px;
    flex-shrink: 0;
}

.su-col-role {
    width: 102px;
    flex-shrink: 0;
    text-align: center;
}

.su-col-status {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.su-col-actions {
    width: 148px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
}

.su-status-switch {
    margin: 0;
}

.su-status-switch .mud-switch {
    margin: 0;
}

.su-status-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #002A3A;
}

.su-action-link {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #007CB7;
    text-decoration: underline;
    cursor: pointer;
    line-height: 28px;
}

.su-action-link:hover {
    color: #005a8a;
}

.su-agency-footer {
    display: flex;
    justify-content: center;
    padding: 60px 0 0;
}

/* ── Add New Agent Form ── */

.su-add-header {
    padding: 40px 0 0;
}

.su-add-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.8px;
    color: #002A3A;
    margin: 0 0 4px;
}

.su-add-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 46px;
    color: #002A3A;
    margin: 0;
}

.su-add-section {
    padding: 40px 0;
}

.su-add-section-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -1.12px;
    color: #004B87;
    margin: 0 0 24px;
}

.su-add-divider {
    height: 2px;
    background-color: #EAE8E7;
    width: 100%;
    margin: 16px 0;
}

.su-add-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.su-add-row-single {
    max-width: calc(50% - 10px);
}

.su-add-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.su-add-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #3D3935;
}

.su-add-input {
    height: 60px;
    border: 1px solid #5F5955;
    border-radius: 16px;
    padding: 0 30px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #3D3935;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.su-add-input:focus {
    border-color: #007CB7;
}

.su-add-input[readonly] {
    background: #f5f4f3;
    color: #ABA7A4;
    cursor: default;
}

.su-add-input-error {
    border-color: #d32f2f !important;
}

.su-add-error {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #d32f2f;
    margin-top: 2px;
}

.su-add-roles {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 0;
}

.su-add-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #010101;
    cursor: pointer;
}

.su-add-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid #232629;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.su-add-checkbox:checked {
    background: #007CB7;
    border-color: #007CB7;
}

.su-add-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 2px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.su-add-actions {
    padding: 40px 0 80px;
}

/* ── Delete Account Dialog ── */

.su-delete-dialog .mud-dialog {
    background: #ffffff;
    border: 1px solid #EAE8E7;
    border-radius: 15px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    padding: 0;
    max-width: 720px;
    width: 100%;
}

.su-delete-dialog .mud-dialog-title {
    padding: 36px 36px 0;
}

.su-delete-dialog .mud-dialog-content {
    padding: 0 36px;
}

.su-delete-dialog .mud-dialog-actions {
    padding: 36px 36px 36px;
    gap: 16px;
    justify-content: flex-start;
}

.su-delete-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: normal;
    color: #002A3A;
}

.su-delete-confirm {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #CA4848;
    margin: 0 0 28px;
}

.su-delete-info p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #002A3A;
    margin: 0;
}

.su-delete-label {
    font-weight: 600;
}

.su-delete-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #007CB7;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    height: 45px;
    padding: 0 25px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    white-space: nowrap;
}

.su-delete-confirm-btn:hover {
    background: #006a9f;
}

.su-delete-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #007CB7;
    border: 1px solid #007CB7;
    border-radius: 100px;
    height: 45px;
    padding: 0 25px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    white-space: nowrap;
}

.su-delete-cancel-btn:hover {
    background: #f5fafd;
}

/* ── Refresh Account Dialog ── */

.su-refresh-dialog .mud-dialog {
    background: #ffffff;
    border: 1px solid #EAE8E7;
    border-radius: 15px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    padding: 0;
    max-width: 720px;
    width: 100%;
}

.su-refresh-dialog .mud-dialog-title {
    padding: 36px 36px 0;
}

.su-refresh-dialog .mud-dialog-content {
    padding: 0 36px;
}

.su-refresh-dialog .mud-dialog-actions {
    padding: 36px 36px 36px;
    gap: 16px;
    justify-content: flex-start;
}

.su-refresh-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: normal;
    color: #002A3A;
}

.su-refresh-confirm {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #CA4848;
    margin: 0 0 28px;
}

.su-refresh-info {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #002A3A;
    margin: 0;
}

.su-refresh-bold {
    font-weight: 600;
}

.su-refresh-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #007CB7;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    height: 45px;
    padding: 0 25px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    white-space: nowrap;
}

.su-refresh-confirm-btn:hover {
    background: #006a9f;
}

.su-refresh-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #007CB7;
    border: 1px solid #007CB7;
    border-radius: 100px;
    height: 45px;
    padding: 0 25px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    white-space: nowrap;
}

.su-refresh-cancel-btn:hover {
    background: #f5fafd;
}

/* ── Select Agents Page ── */

.su-sa-header {
    padding: 0 0 40px;
}

.su-sa-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.8px;
    color: #002A3A;
    margin: 0 0 4px;
}

.su-sa-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 46px;
    letter-spacing: -0.48px;
    color: #002A3A;
    margin: 0;
}

.su-sa-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 20px;
    max-width: 468px;
}

.su-sa-search-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #002A3A;
}

.su-sa-select-all {
    padding: 0 0 20px;
}

.su-sa-col-select {
    width: 102px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.su-sa-col-id {
    width: 272px;
    display: flex;
    align-items: center;
}

.su-sa-col-name {
    width: 272px;
    display: flex;
    align-items: center;
}

.su-sa-row-gap {
    gap: 80px;
    justify-content: flex-start;
    min-height: 79px;
}

.su-sa-header-row {
    gap: 80px;
    justify-content: flex-start;
}


/* ── Pager ── */

.su-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 60px;
}

.su-pager-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.su-pager-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #5F5955;
    white-space: nowrap;
}

.su-pager-select {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #002A3A;
    border: 1px solid #EAE8E7;
    border-radius: 4px;
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    background: #ffffff;
    appearance: auto;
}

.su-pager-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.su-pager-arrow {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #5F5955;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
}

.su-pager-arrow:hover:not(:disabled) {
    background: #EAE8E7;
}

.su-pager-arrow:disabled {
    color: #ABA7A4;
    cursor: default;
}

.su-pager-right {
    display: flex;
    align-items: center;
}

.su-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #5F5955;
    background: #ffffff;
    border: 1px solid #ABA7A4;
    border-radius: 100px;
    height: 46px;
    padding: 0 27px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: background-color 0.2s ease;
}

.su-download-btn:hover {
    background: #f5f4f3;
}

.content {
    flex-grow: 1;
}

/* #endregion */

/* #region MudBlazor Framework Overrides */
.mud-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

footer, .footer-component {
    margin-top: auto;
}

/*MudBlazor Styles*/

.loading-spinner {
    display: block;
    margin: 20px auto;
    color: var(--blue) !important;
}

.grid-searchbar {
    outline: none;
}

    .grid-searchbar input:focus {
        outline: none;
        border-color: var(--color-primary) !important;
    }

.mud-button-root .mud-button .mud-button-filled .mud-button-filled-secondary .mud-button-filled-size-medium .mud-ripple .mb-4 {
    background-color: aliceblue;
}


.mud-chip.mud-chip-filled {
    background-color: #004B87;
    color: white;
}

.mud-chip.mud-chip-outlined {
    background-color: transparent;
    border-color: #004B87;
    color: #004B87;
}

.custom-grid .mud-icon-button .mud-icon-root,
.custom-grid .mud-table-cell .column-header .column-options .sort-direction-icon,
.custom-grid .mud-table-cell .column-header .column-options .mud-menu-icon-button-activator,
.custom-grid .mud-table-cell .filter-header-cell .mud-ripple .mud-ripple-icon {
    background-color: white !important;
    /* Changes icon color to white */
}

.custom-grid .mud-table-pagination .mud-table-pagination-actions .mud-button-root .mud-icon-button .mud-ripple .mud-ripple-icon .mud-flip-x-rtl {
    background-color: white !important;
    /* Changes icon color to white */
}

.custom-grid .mud-data-grid-column-sort-icon {
    visibility: hidden;
}

    .custom-grid .mud-data-grid-column-header:hover .mud-data-grid-column-sort-icon,
    .custom-grid .mud-data-grid-column-sort-icon.mud-data-grid-column-sort-icon-active {
        visibility: visible;
    }

.custom-grid .mud-table-head th {
    border-bottom: 3px solid #007cb7;
    margin: 4px 0 8px 0;
}

.custom-grid .mud-table-head th {
    font-weight: 700;
}

/* Hide the default MudDataGrid filter row */
/*.custom-grid .mud-table-row:has(input) {
    display: none !important;
}*/
/* Column headers: X-Small Heading Bold 17px/700/25px/-0.17px — .grid-headers kept for backward compat */
.grid-headers,
.mud-data-grid .mud-table-head .mud-table-cell {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 25px !important;
    letter-spacing: -0.17px !important;
    color: var(--color-navy) !important;
}

.name-link {
    font-size: 16px;
    line-height: 28px;
    color: var(--color-primary) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .name-link:hover {
        color: var(--color-primary-hover) !important;
        text-decoration: underline;
    }

/* ── MudDataGrid Typography Overrides (Figma-exact) ──────────── */
/* Body cells: Body 16px/400/28px */
.mud-data-grid .mud-table-body .mud-table-cell {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    color: var(--color-navy) !important;
}

    /* Links inside body cells: 16px/600/#007CB7 */
    .mud-data-grid .mud-table-body .mud-table-cell a.mud-link {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 28px !important;
    }

/* ── MudBreadcrumbs Typography Override ─────────────────────── */
.mud-breadcrumbs .mud-typography {
    font-size: 14px !important;
}

.mud-breadcrumbs a.mud-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

    .mud-breadcrumbs a.mud-link:hover {
        text-decoration: underline !important;
    }

.filter-search-row {
    vertical-align: middle;
}

.select-all-switch .mud-switch-base.mud-checked {
    color: var(--color-primary) !important;
}

.select-all-switch .mud-switch-label-small {
    color: var(--color-primary) !important;
}

.filter-checkbox .mud-checkbox-true {
    color: var(--color-info);
}

.filter-checkbox .mud-checkbox-false {
    color: var(--mud-palette-text-primary);
}

/* Top-align the checkbox with multi-line labels (e.g. long plan names) so wrapped
   text reads cleanly instead of centering against the box. */
.filter-checkbox.mud-input-control {
    align-items: flex-start;
}

.filter-checkbox .mud-checkbox > .mud-typography {
    align-self: center;
    word-break: break-word;
}


.filter-button-row {
    padding-top: 16px;
    padding-left: 5px;
    padding-right: 5px;
}


.clear-button {
    background-color: transparent;
    color: var(--color-primary);
    padding: 8px 16px;
    margin-left: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: none;
}

    .clear-button:hover {
        background-color: #E3F1F8;
        color: var(--color-primary-hover);
    }

.apply-button {
    background-color: var(--color-primary) !important;
    color: white !important;
    padding: 8px 40px;
    margin-right: 0 !important;
    border-radius: 4px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .apply-button:hover {
        background-color: var(--color-primary-hover) !important;
        box-shadow: 0 0 0 3px rgba(24, 115, 226, 0.35);
    }


.filterButton {
    background-color: white !important;
    /* Changes icon color to white */
    opacity: 1 !important;
    /* Ensures visibility */
}

.mud-input .input.mud-input-root {
    width: 50%;
}

h3.quick-links {
    background: url('https://bluekcmemberportal.azureedge.net/icons/svg/icn-external.svg') no-repeat left;
    padding: 0 0 0 25px;
    margin: 0 0 20px 0;
}

h3.news {
    background: url('https://bluekcmemberportal.azureedge.net/icons/svg/icn-news.svg') no-repeat left;
    padding: 0 0 0 25px;
    margin: 0 0 20px 0;
}

h3.find-care {
    background: url('https://bluekcmemberportal.azureedge.net/images/agent/icn-find-care.png') no-repeat left;
    padding: 0 0 0 38px;
    margin: 0 0 30px 0;
}

.find-care-card-header-bg {
    background: url('https://bluekcmemberportal.azureedge.net/images/agent-find-care.jpg') no-repeat left;
    background-size: cover;
    background-position: center;
    color: white;
    min-height: 120px;
    display: flex;
    align-items: flex-end;
}

.link-account h3 {
    background: url('https://bluekcmemberportal.azureedge.net/icons/icn-link-account.png') no-repeat left;
    padding: 0 0 0 45px;
    margin: 0 0 0 0;
}

.no-underline {
    text-decoration: none !important;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f5f5f5;
}

.drawer-content {
    padding: 24px;
    overflow-y: auto;
    height: calc(100vh - 80px);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    margin-bottom: 8px;
}

.info-label {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 2px;
}

.info-value {
    font-size: 1rem;
    color: #222;
    margin-bottom: 8px;
}

.divider {
    border-bottom: 1px solid #ccc;
    margin: 18px 0 18px 0;
}

.bold-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 2px;
    color: #222;
}

.agency-section {
    margin-top: 18px;
}

/* ── Responsive: collapse top nav on small screens ── */
@media (max-width: 960px) {
    .top-nav-bar {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .top-nav-link,
    .top-nav-link.mud-typography {
        font-size: 0.875rem;
        padding: 10px 14px;
    }
}

/* --- Figma Footer Styles: 1:1 with Design --- */
.site-footer {
    background: var(--color-navy-mid);
    color: var(--color-footer-text);
    font-size: 16px;
    line-height: 1.5;
    margin-top: 0;
    padding: 0;
}

.agent-container {
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

@media all and (min-width: 576px) {
    .agent-container {
        max-width: 600px;
    }
}

@media all and (min-width: 720px) {
    .agent-container {
        max-width: 750px;
    }

    .gridgap-med {
        grid-gap: 1.5em;
    }

    .btn-large {
        font-size: 18px !important;
    }

    footer.site-footer h6, footer.site-footer h5 {
        margin: 0 0 10px;
    }
}

@media all and (min-width: 800px) {
    .agent-container {
        max-width: 800px;
    }
}

@media all and (min-width: 992px) {
    .agent-container {
        max-width: 900px;
    }

    .btn {
        font-size: 17px;
        line-height: 25px;
    }
}

@media all and (min-width: 1200px) {
    .agent-container {
        max-width: 1100px;
    }
}

@media all and (min-width: 1400px) {
    .agent-container {
        max-width: var(--content-max-width);
    }
}

footer.site-footer {
    padding: 70px 0;
}

.footer-row {
    padding: 0;
    border: none;
}

.footer-top-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 0;
}

    .footer-top-row ul {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 20px;
    }

footer-top-row ul li {
    min-width: 48%;
}

.footer-content h5, .footer-content h6 {
    font-weight: 700;
    font-size: 18px;
    margin: 28px 0 18px 0;
    letter-spacing: -0.36px;
    line-height: 1.3;
}

.footer-content h5 {
    color: #FFFFFF !important;
}

.footer-content h6 {
    color: #8DC8E8 !important;
}

.footer-content p, .footer-content ul, .footer-content li {
    color: #FFFFFF;
    margin: 0;
}

.footer-content strong {
    font-weight: 700;
}

.footer-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
}

    .footer-content ul ul {
        margin: 0;
    }

.footer-content li {
    margin-bottom: 8px;
}

.footer-middle-row {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding-bottom: 0;
    align-items: flex-start;
}

.footer-menu {
    display: flex;
    flex-direction: row;
    gap: 64px;
    width: 60%;
    align-items: flex-start;
}

    .footer-menu > div {
        min-width: 180px;
    }

    .footer-menu h6 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 8px 0;
    }

    .footer-menu ul {
        margin-bottom: 16px;
    }

.footer-legal {
    width: 40%;
    padding-left: 0;
    align-items: flex-start;
}

.footer-legal-menu ul {
    display: flex;
    flex-wrap: wrap;
}

    .footer-legal-menu ul li {
        min-width: 48%;
        margin: 3px 0;
    }

.footer-legal-menu ul {
    columns: 2;
    column-gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal-menu li {
    margin-bottom: 8px;
    break-inside: avoid;
}

.footer-legal-menu a {
    color: var(--color-footer-link);
    font-size: 1rem;
}

    .footer-legal-menu a:hover {
        color: #fff;
    }

.footer-disclosures {
    padding: 0;
    border: none;
}

    .footer-disclosures h6 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .footer-disclosures p {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .footer-disclosures ul {
        list-style: disc inside;
        color: var(--color-footer-link);
        margin: 0 0 0 16px;
        padding: 0;
    }

    .footer-disclosures li {
        margin-bottom: 0;
    }

.footer-copyright {
    padding: 50px 0;
}

    .footer-copyright ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .footer-copyright ul li:last-child {
            text-align: right;
        }

.logo {
    display: flex;
    align-items: center;
}

    .logo img {
        height: 48px;
        width: auto;
    }

.navigation--social {
    margin: 24px 0 0 0;
}

.social-nav {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .social-nav li {
        display: flex;
        align-items: center;
    }

    .social-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #338CA6;
        transition: background 0.2s;
    }

        .social-nav a:hover {
            background: #1e5e6e;
        }

    .social-nav svg {
        width: 20px;
        height: 20px;
        fill: #fff;
    }

.footer-download-app {
    margin: 24px 0 0 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .footer-download-app h5 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 16px 0 0;
    }

.footer-download-app-link {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: #232327;
    transition: box-shadow 0.2s;
}

    .footer-download-app-link:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    }

    .footer-download-app-link img, .footer-download-app-link svg {
        display: block;
        height: 40px;
        width: auto;
    }
/* --- Footer & Utility Classes Ported from login.css for Global Use --- */
.vh {
    position: absolute;
    margin: -1px;
    padding: 0;
    border: 0 none;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.hidden {
    display: none;
}

.u-remove-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-list-inline li {
    display: inline-block;
    vertical-align: middle;
}

.u-text-white {
    color: white;
}

.u-bg-darkest-blue {
    background-color: var(--color-navy-dark);
}

.u-relative {
    position: relative;
}

.u-absolute100 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.u-block {
    display: block;
}

.u-flex {
    display: flex;
}

.u-bpad {
    padding-bottom: 10px;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gridgap-med {
    grid-gap: 0.5em;
}

.footer-content a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

    .footer-content a:hover, .footer-content a:focus {
        border-color: var(--color-primary-light);
        color: var(--color-primary-light);
    }

.footer-disclosures ul {
    margin-top: 20px;
    list-style: inherit !important;
}

.footer-disclosures a {
    color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

    .footer-disclosures a:hover, .footer-disclosures a:focus {
        color: white;
        border-color: transparent;
        text-decoration: none;
    }

footer.site-footer p,
footer.site-footer a,
footer.site-footer ul,
footer.site-footer .footer-disclosures p {
    color: white;
    font-size: 14.5px;
    line-height: 1.7em;
}

footer.site-footer ul, footer.site-footer ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

    footer.site-footer ul > li, footer.site-footer ol > li {
        margin: 0;
    }

a {
    text-decoration: underline;
    transition: all 0.15s ease;
}

    a:hover, a:focus {
        text-decoration: underline;
    }
/* Only set box-sizing globally if not already set */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Footer Figma Parity Fixes --- */
.footer-questions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

    .footer-questions-list li {
        min-width: 220px;
        margin-bottom: 0.75em;
        font-weight: 600;
    }

.footer-content h5 {
    font-weight: 700;
    margin-bottom: 0.5em;
}

.footer-divider-cross {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
}

.footer-divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-primary);
}

.footer-divider-logo {
    display: block;
    margin: 0 24px;
    width: 40px;
    height: 40px;
    background-color: var(--color-navy-dark);
    border-radius: 50%;
}

/* ==========================================================================
   Header - Fixed position with scroll behavior (moved from login.css)
   ========================================================================== */

.header-wrapper {
    background-color: white;
    width: 100%;
}

.site-header {
    transition: all 0.15s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    background-color: white;
}

    .site-header a {
        text-decoration: none;
    }

        .site-header a:hover, .site-header a:focus {
            text-decoration: none;
        }

.minify-header {
    background-color: white;
    top: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 6px -1px, rgba(0, 0, 0, 0.03) 0px 2px 4px -1px;
}

.minify-header .header-grid {
    height: 90px;
}

    .minify-header .header-tabs {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .minify-header .site-branding svg {
        max-width: 200px;
    }

.site-branding {
    /* padding-left: 20px; */
    position: relative;
    display: block;
    align-self: center;
}

    .site-branding svg {
        max-width: 200px;
        display: block;
    }

.header-grid {
    display: grid;
    height: 115px;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
    align-items: end;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 720px) and (max-width: 90rem) {
    .header-grid {
        grid-template-columns: 1fr 4fr;
    }
}

/* Match Angular's header-nav structure: nav fills full cell height so tabs anchor to bottom */
.header-grid nav {
    height: 100%;
    position: relative;
    z-index: 5;
}

/* Match Angular: tab link font reduced to 0.85em */

.header-tabs {
    text-align: right;
    margin-left: 5%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 0;
}

    .header-tabs ul {
        display: flex;
        flex-direction: row;
    }

    .header-tabs li {
        margin: 0 0.2em;
    }

    .header-tabs a {
        font-size: 0.85em;
        color: #3D3935;
        font-weight: 600;
        background-color: var(--color-primary-light);
        padding: 17px 21px;
        line-height: 100%;
        display: block;
        position: relative;
        border-top-right-radius: 0.55em;
        border-top-left-radius: 0.55em;
    }

        .header-tabs a:hover {
            background-color: var(--color-primary);
            color: white;
            transform: translateY(0px);
        }

.header-wrapper .header-tabs li a.active {
    background-color: var(--color-primary);
    color: white;
}

.site-header-mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    overflow: hidden;
    z-index: 500;
    background: var(--color-navy-dark);
    padding: 14px 0;
}

    .site-header-mobile .site-branding a {
        display: block;
        width: 160px;
        position: relative;
        top: 3px;
    }

    .site-header-mobile .site-logo {
        width: 100%;
        height: auto;
    }

.mobile-header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.mobile-menu-toggle {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px !important;
    font-weight: 600;
}

@media (max-width: 959px) {
    .site-header.hidden-tablet-mobile {
        display: none !important;
    }

    .site-header-mobile {
        display: flex;
    }
}

@media (min-width: 60rem) {
    .hidden-tablet-mobile {
        display: block;
    }

    .site-header-mobile {
        display: none;
    }

    .gridgap-med {
        grid-gap: 2.5em;
    }

    footer.site-footer {
        padding: 120px 0 60px;
    }
}

@media (min-width: 75rem) {
    .site-branding svg {
        max-width: 260px;
    }

    .minify-header .site-branding svg {
        max-width: 260px;
    }

    .header-tabs {
        padding: 6px 20px 0 18px;
    }
}
/* Logo sizing for top appbar matches Angular version */
.top-appbar .site-logo {
    height: auto !important;
    width: 260px !important;
    margin-left: -30px;
    display: block;
    transform: scale(1.8);
    transform-origin: left center;
}

@media (min-width: 75rem) {
    .top-appbar .site-logo {
        transform: scale(1.8);
    }
}

.top-appbar .mud-link {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

/* ==========================================================================
   MudBlazor Framework Overrides
   All rules here use !important to override MudBlazor's injected styles.
   Keep these consolidated here — do not scatter elsewhere.
   ========================================================================== */
.mud-button-root {
    letter-spacing: -0.02em !important;
}

.mud-typography-subtitle1 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-navy) !important;
    letter-spacing: 0.22px !important;
}

.mud-typography-body2 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--color-navy) !important;
}

.mud-popover .mud-list-item.mud-selected {
    font-weight: 700 !important;
    background: var(--color-primary-light) !important;
}

.mud-button-root.mud-button-filled {
    color: white !important;
}

.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled:focus {
    background-color: var(--color-navy-dark) !important;
    color: #fff !important;
}

/* #endregion */

/* #region Dashboard */
.dashboard-banner {
    background: var(--color-warning);
    display: flex;
    align-items: center;
    padding: 32px 0px;
    width: 100%;
}

.dashboard-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
}

.dashboard-banner__text {
    font-size: 24px;
    color: var(--color-navy);
    letter-spacing: -0.48px;
    line-height: 24px;
}

.dashboard-banner__text--bold {
    font-weight: 700;
}

.dashboard-banner-white {
    background: #ffffff !important;
    padding: 42px 0 !important;
}
/* Dashboard Welcome Frame Styles (Figma-driven) */
.dashboard-welcome-frame__happy {
    color: var(--color-primary);
    font-weight: 700;
}
/* End Dashboard Welcome Frame Styles */

/* License Status and Business Tools Layout */
.license-business-container {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-rounded);
    padding: 20px;
    margin-left: 150px;
    margin-top: 20px;
}

.license-status-section {
    flex: 1;
    min-width: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Key Resources section (right panel) */
.business-tools-section {
    flex: 0 0 438px;
    min-width: 0;
    background: var(--color-bg-light);
    border-left: 1px solid var(--color-border);
    border-radius: 0 15px 0 0;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.license-status-title {
    color: var(--color-navy);
    margin: 0;
}

.license-status-description {
    color: var(--color-text-secondary);
    margin: 0;
}

/* Select Agent dropdown (multi-agent variant) */
.agent-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 256px;
}

.agent-select-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text-dark);
}

.agent-mud-select .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-text-muted) !important;
    border-radius: 3px !important;
}

.agent-mud-select .mud-select-input {
    font-size: 14px;
    color: var(--color-text-gray);
}

.agent-mud-select .mud-input-control {
    margin: 0;
}

.agent-mud-select .mud-input {
    height: 40px;
    min-height: 40px;
}

/* License items - single 2-column grid so columns align across rows */
.license-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    column-gap: 60px;
    margin-bottom: 0;
}

.license-status-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.license-item-label-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.license-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-navy);
    white-space: nowrap;
}

.license-value {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-navy);
    white-space: nowrap;
}

.license-status-footer,
.license-error-message {
    font-size: 14px;
    line-height: 24px;
    margin: 16px 0 0 0;
}

.license-status-footer {
    color: var(--color-text-muted);
}

.license-error-message {
    color: var(--color-error-ui);
}

    .license-error-message a {
        color: var(--color-icon-blue);
        text-decoration: underline;
    }

/* Key Resources list items */
.business-tools-title {
    color: var(--color-navy);
    margin: 0 0 12px 0;
}

.business-tools-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.business-tools-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    text-decoration: none;
}

.business-tools-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.business-tools-label {
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    line-height: 26px;
    letter-spacing: -0.4px;
    color: var(--color-navy-mid);
    flex: 1;
}

.business-tools-icon {
    width: 32px;
    height: 40px;
    display: block;
}

.business-tools-icon-compensation-plan {
    width: 40px;
    height: 40px;
    display: block;
}

/* Arrow icon — shared by business tools, nav dropdowns, card buttons */
.arrow-icon,
.business-tools-arrow,
.enrollment-btn-arrow,
.resource-btn-arrow {
    width: 19px;
    height: 12px;
    display: block;
    flex-shrink: 0;
}

.resource-btn-arrow {
    margin-left: 8px;
}

.business-tools-divider {
    border: none;
    border-top: 1px solid var(--color-disabled);
    margin-top: 36px;
    margin-bottom: 36px;
}



/* Shadow box styles with top border */
.shadow-box {
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-rounded);
    border-top: 3px solid var(--color-border);
}

.license-banner-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-top: 0;
    overflow: hidden;
}

/* ── Member Search ────────────────────────────────────────────── */

/* #endregion */

/* #region Member Search */
.member-search-section {
    width: 100%;
    background: linear-gradient(to right, #005887, var(--color-primary));
    padding: 56px 0;
    margin-top: 80px;
}

.member-search-content {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.member-search-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.member-search-title {
    color: #ffffff;
    margin: 0;
}

.member-search-description {
    color: #ffffff;
    margin: 0;
}

.member-search-form {
    display: flex;
    align-items: flex-end;
    gap: 32px;
}

.member-search-inputs {
    display: flex;
    gap: 20px;
    flex: 1;
}

.member-search-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.member-search-label {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin-bottom: 4px;
}

.member-search-input {
    height: 48px;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--color-navy);
    outline: none;
    width: 100%;
}

.member-search-input:focus {
    border-color: var(--color-primary-light);
    outline: none;
}

.member-search-btn {
    height: 46px;
    background: var(--color-primary-light);
    color: var(--color-navy);
    font-weight: 700;
    font-size: 18px;
    line-height: 31px;
    border: none;
    border-radius: 100px;
    padding: 0 27px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-button);
    transition: background-color 0.15s ease;
}

.member-search-btn:hover {
    background: #b3ddf5;
}

.member-search-results {
    color: #ffffff;
    margin: 0;
}

.member-search-results a {
    color: #ffffff;
    text-decoration: underline;
}

.results-container {
    margin-top: 20px;
    min-height: 300px;
}

.no-results-message {
    margin-top: 24px;
    padding: 40px;
    text-align: left;
    color: #333;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    min-height: 200px;
}

.no-results-text p {
    margin: 4px 0;
}

.no-results-message a {
    color: #0066cc;
    text-decoration: underline;
}

/* ── Brand Divider ────────────────────────────────────────────── */
.brand-divider-wrapper {
    display: none;
}

.brand-divider-line {
    flex: 1;
    height: 1px;
    background: var(--color-primary);
}

.brand-divider-mark {
    width: 37px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* #endregion */

/* #region News & Resources */
/* ── News & Resources ─────────────────────────────────── */
.news-and-resources-section {
    width: 100%;
    padding: 0 0 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.news-and-resources-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 80px;
}

.news-and-resources-title {
    color: var(--color-navy);
    text-align: center;
    margin: 0;
}

.news-and-resources-underline {
    width: 60px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 8px;
}

.news-and-resources-cards {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: var(--content-max-width);
    padding: 0 40px;
    box-sizing: border-box;
}

.enrollment-card,
.resource-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.enrollment-card-icon-wrap,
.resource-card-icon-wrap {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.enrollment-icon,
.resource-icon {
    height: 50px;
    width: auto;
    max-width: 50px;
    display: block;
    flex-shrink: 0;
}

.enrollment-card-title,
.resource-card-title {
    color: var(--color-black);
}

.enrollment-card-desc,
.resource-card-desc {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-navy);
    margin: 0;
    flex: 1;
}

.enrollment-card-btn-wrap,
.resource-card-btn-wrap {
    display: flex;
}

.enrollment-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    border: none;
    border-radius: 100px;
    padding: 8px 25px;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

    .enrollment-card-btn:hover {
        background: var(--color-primary-hover);
    }


/* ── Resource Cards — shared styles merged with .enrollment-card above ── */

/* #endregion */

/* #region Applications & Forms */
/* ── Applications & Forms ─-──────-───-─-────-───────── */
.forms-layout {
    display: flex;
    align-items: flex-start;
    margin-top: 64px;
}

.forms-two-column {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.individual-selector,
.employer-selector {
    width: 399px;
    border: 1px solid #EAE8E7;
    border-radius: 15px;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.selector-row {
    height: 100px;
    display: flex;
    align-items: center;
    padding: 20px 30px;
    cursor: pointer;
}

.selector-row:not(:last-child) {
    border-bottom: 1px solid #EAE8E7;
}

.selector-row.selected {
    background-color: #E8F4FB;
}

.selector-left {
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 339px;
}

.selector-left img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.selector-text {
    width: 264px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selector-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px; 
    color: #002A3A;
}

.selector-arrow-img {
    width: 19px !important;
    height: 12px !important;
    display: block;
    object-fit: contain;
}

.forms-right-panel {
    flex: 1;
    height: 420px;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.forms-right-panel .resource-section-heading {
    margin: 0;
}

.forms-right-panel .year-selector {
    margin-top: 2px;
}

.forms-right-content {
    margin-top: 24px;
    flex: 1;
    overflow-y: auto;
}

/* #endregion */

/* #region Resources (Brochures, Education Center) */
/* ── Brochures & Product Guides ─────────────────────── */
/* ── Education Center ───────────────────────────────── */
.resource-content {
    padding-bottom: 60px;
}

.resources-tabs-outer {
    border-bottom: 1px solid #ABA7A4;
}

.resources-tabs {
    background: transparent;
}

.resources-tabs .mud-tab {
    padding: 20px 16px;
    font-weight: 500;
    text-transform: none;
    color: #002A3A;
    position: relative;
}

.resources-tabs .mud-tab.mud-tab-active {
    color: #002A3A !important;
    font-weight: 800;
}

.resources-tabs .mud-tab.mud-tab-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px; 
    height: 6px; 
    background-color: #007CB7;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 24px;
}

.section-header .resource-section-heading {
    margin: 0;
    white-space: nowrap;
}

.year-selector {
    display: flex;
    gap: 16px;
}

.brochures-layout {
    margin-top: 32px;
}

.brochure-section h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #002A3A;
}

.brochure-section ul {
    margin-bottom: 24px;
    padding-left: 16px;
}

.brochure-section li {
    line-height: 1.6;
    margin-bottom: 8px;
}

.resource-section-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.04em;
    color: #002A3A;
    margin: 32px 0 24px;
}

.resource-category {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #5F5955;
    margin: 24px 0 12px;
}

.resource-links-group {
    margin-bottom: 32px;
}

.resource-list {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 12px;
    margin: 0;
}

.resource-list li {
    margin-bottom: 8px;
}

.resource-list li a {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #007CB7;
    text-decoration: underline;
    display: inline;
}

.resource-divider {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 60px 0;
}

.resource-divider-line {
    flex: 1;
    height: 2px;
    background-color: #007CB7;
}

.rx-links-group {
    margin-top: 16px;
}

.rx-list {
    list-style: disc;
    list-style-position: outside;
    padding-left: 20px;
    margin: 0 0 16px 12px;
}

.rx-list li {
    display: list-item;
    align-items: baseline;
    gap: 8px;
}

.rx-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #002A3A;
    margin-right: 6px;
}

.rx-links a {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #007CB7;
    text-decoration: underline;
}

.rx-separator {
    margin: 0 6px;
    color: #5F5955;
}

/* #endregion */

/* #region Frequently Asked Questions */
/* ── Frequently Asked Questions ───────────────────────────────── */

.faq-section {
    padding-bottom: 60px;
}

.faq-accordion .mud-expand-panel-icon {
    display: none !important;
}

.faq-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

.faq-question {
    font-size: 24px;
    color: #002A3A;
    line-height: 1.5;
    max-width: calc(100% - 52px);
}

.faq-toggle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-toggle--collapsed {
    background-color: #007CB7;
}

.faq-toggle--expanded {
    background-color: #002A3A;
}

.faq-toggle svg {
    color: #FFFFFF;
    width: 14px;
    height: 14px;
}

.faq-panel {
    position: relative;
}

.faq-panel::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ABA7A4;
}

.faq-answer {
    font-size: 18px;
    color: #002A3A;
    line-height: 1.6;
    padding: 16px 0 24px 0;
}

.faq-answer a,
.faq-answer a:visited,
.faq-answer a:active {
    color: #007CB7 !important;
    text-decoration: underline;
}

.faq-answer ul {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
}

.faq-answer li {
    padding-left: 0;
    margin-left: 0;
    line-height: 1.6;
}

/* ── Contact Us ───────────────────────────────────────────────── */
/* #endregion */

/* #region Contact Us */
.contact-us-section {
    width: 100%;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    padding: 0 0 100px 0;
}

.contact-us-card {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 40px;
    background: var(--color-primary-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-us-title {
    color: var(--color-navy);
    margin: 0;
}

.contact-us-columns {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.contact-us-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

    .contact-us-col:nth-child(1) {
        width: 288px;
    }

    .contact-us-col:nth-child(3) {
        width: 314px;
    }

    .contact-us-col:nth-child(5) {
        width: 366px;
    }

.contact-us-col-heading {
    color: #004b87;
    margin: 0;
}

.contact-us-contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-us-contact-line {
    color: var(--color-navy);
    margin: 0;
}

    .contact-us-contact-line strong {
        font-weight: 600;
    }

.contact-us-link {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-navy);
    text-decoration: underline;
}

    .contact-us-link:hover {
        color: var(--color-primary);
    }

.contact-us-divider {
    width: 1px;
    background: var(--color-accent-blue);
    align-self: stretch;
    flex-shrink: 0;
}

/* #endregion */

/* #region Group Business */
/* ══════════════════════════════════════════════════════════════
   Shared Page Tab Toggle (Group Business pages)
   ══════════════════════════════════════════════════════════════ */
.page-tab-toggle {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.page-tab {
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -0.32px;
    text-align: center;
    border: none;
    cursor: pointer;
    padding: 4px 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    background: transparent;
}

.page-tab-active {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.page-tab-inactive {
    background: var(--color-primary-light) !important;
    color: var(--color-navy) !important;
}

    .page-tab-inactive:hover {
        background: #c8e4f5 !important;
    }

.page-tab-divider {
    height: 2px;
    background: var(--color-disabled);
    width: 100%;
    margin-top: 0;
    margin-bottom: 24px;
}

/* ── Agent Selector (top-right header) ───────────────────────── */
.agent-selector {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.agent-label {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-text-gray);
    white-space: nowrap;
    text-align: left;
}

/* ── Search / Filter Row ─────────────────────────────────────── */
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.filter-by-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-navy);
    white-space: nowrap;
}

.clear-filters-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
    padding: 0 4px;
    background: transparent;
    border: none;
}

    .clear-filters-link:hover {
        color: var(--color-primary-hover);
        text-decoration: underline;
    }

/* #endregion */

/* #region Member & Group Detail Pages */
/* ── Detail Section Cards (GroupInfo Summary / MemberDetails) ── */
.detail-section {
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
}

    .detail-section:last-child {
        border-bottom: none;
    }

.detail-section-header {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #004B87;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-section-header .mud-icon-root {
        color: #004B87 !important;
    }

.detail-grid {
    display: grid;
    gap: 16px;
}

.detail-label,
.detail-value {
    font-size: 16px;
    color: var(--color-navy);
}

.detail-label {
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 2px;
}

.detail-value {
    line-height: 28px;
}

/* ── Download Button Row ─────────────────────────────────────── */
.download-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
}

/* ── Member / Group page header layout ──────────────────────── */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.page-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-gray);
    margin-bottom: 24px;
}

.page-meta-separator {
    color: var(--color-text-muted);
}

/* ── Eligibility Accordion ───────────────────────────────────── */
.elig-accordion-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 8px;
    overflow: hidden;
}

.elig-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: background 0.15s;
}

    .elig-accordion-header:hover {
        background: var(--color-bg-subtle);
    }

.elig-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.elig-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.elig-icon-medical {
    background: #E3F2FD;
    color: #1565C0;
}

.elig-icon-dental {
    background: #EDE7F6;
    color: #4527A0;
}

.elig-icon-vision {
    background: #E8F5E9;
    color: #2E7D32;
}

.elig-icon-life {
    background: #FFF3E0;
    color: #E65100;
}

.elig-plan-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-navy);
}

.elig-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 9999px);
    white-space: nowrap;
}

.elig-status-active {
    background: #E8F5E9;
    color: #2E7D32;
}

.elig-status-inactive {
    background: #F5F5F5;
    color: #757575;
}

.elig-accordion-content {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--color-border);
    background: #FAFAFA;
}

.elig-check-section {
    margin-bottom: 16px;
}

.elig-documents {
    padding-top: 8px;
}

/* ── Plan Usage (horizontal progress bars) ───────────────────── */
.usage-section-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-navy);
    margin-bottom: 16px;
}

/* Section-level toggle buttons (In-Network / Out-of-Network, etc.) */
.section-toggle-row {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.section-toggle-btn {
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 20px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

    .section-toggle-btn:first-child {
        border-radius: 4px 0 0 4px;
    }

    .section-toggle-btn:last-child {
        border-radius: 0 4px 4px 0;
    }

.section-toggle-active {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.section-toggle-inactive {
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
}

    .section-toggle-inactive:hover {
        background: var(--color-primary-light) !important;
    }

.usage-member-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
    margin-bottom: 12px;
    background: var(--color-white);
}

.usage-bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.usage-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 4px;
}

.usage-bar-amounts {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-muted);
}

.search-label {
    color: #002A3A;
    font-size: 14px;
    font-family: DM Sans;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word
}

.filter-label {
    color: #002A3A;
    font-size: 14px;
    font-family: DM Sans;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word;
    margin-bottom: 4px;
}

.clear-filters-label {
    color: #002A3A;
    font-size: 14px;
    font-family: DM Sans;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word;
    margin-bottom: 10px;
}

.clear-filters-link {
    color: #007CB7;
    font-size: 14px;
    font-family: DM Sans;
    font-weight: 600;
    text-decoration: underline;
    line-height: 24px;
    word-wrap: break-word;
}

/* ── Contact Us ───────────────────────────────────────────────── */

.contact-section-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.04em;
    color: #002131;
    margin: 40px 0 12px;
}

.contact-section-subtext {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #3D3935;
    margin: 0 0 20px; 
}

.contact-form {
    margin-bottom: 56px;
}

.contact-me-by-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; 
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.04em; 
    color: #3D3935;
}

.mud-radio .mud-typography {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #3D3935;
}

.mud-radio-group {
    gap: 10px;
}

.contact-confirmation {
    border: 2px solid #49C5B1;
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0 32px;
}

.contact-confirmation-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-confirmation-content {
    display: flex;
    flex-direction: column;
}

.contact-confirmation-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; 
    font-size: 32px;
    line-height: 28px;
    color: #3D3935;
    margin: 0 0 20px;
}

.contact-confirmation-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; 
    font-size: 20px;
    line-height: 28px;
    color: #3D3935;
}

.contact-divider-blue {
    border-color: #8DC8E8;
}

.contact-headsetmic-icon,
.contact-email-icon,
.contact-business-icon {
    width: 80px;
    height: 80px;
}

.contact-email-icon-large{
    width: 100px;
    height: 100px;
}

.contact-submit-btn {
    border-radius: 50px;
}

.contact-submit-btn.mt-4 {
    margin-bottom: 36px;
}

.contact-info-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    text-align: center;
    margin-bottom: 4px;
}

.contact-info-value {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; 
    font-size: 16px;
    line-height: 24px;
    color: #007CB7;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-info-address {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; 
    font-size: 16px;
    line-height: 24px;
    color: #002A3A;
    text-align: center;
}

.contact-info-address span {
    font-weight: 400; 
}

.contact-info-card {
    background: #ffffff;
    border: 1px solid #ABA7A4;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.contact-info-card img {
    display: block;
    margin: 0 auto 12px auto;
}

.contact-info-card .mud-typography {
    margin-bottom: 4px;
}

.contact-info-card a,
.contact-info-card .mud-link {
    color: #007CB7;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* #endregion */

/* #region IFP Member Search (Superuser) */
/* -- IFP Member Search (Superuser) -- */

.su-ifp-search-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.su-ifp-search-form {
    display: flex;
    gap: 36px;
    align-items: flex-end;
}

.su-ifp-search-field {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.su-ifp-search-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #002A3A;
}

.su-ifp-search-input-wrapper {
    position: relative;
    width: 100%;
}

.su-ifp-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.su-ifp-search-input {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border: 1px solid #57616D;
    border-radius: 4px;
    padding: 0 18px 0 48px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #002A3A;
    outline: none;
}

.su-ifp-search-input::placeholder {
    color: #ABA7A4;
}

.su-ifp-search-input:focus {
    border-color: #007CB7;
}

.su-ifp-search-input-error {
    border-color: #d32f2f !important;
}

.su-ifp-search-error {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #d32f2f;
    margin-top: 2px;
}

/* -- IFP Member Search Results Table -- */

.su-ifp-results {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.su-ifp-table-wrapper {
    width: 100%;
    max-width: 1300px;
}

.su-ifp-table {
    width: 100%;
    border-collapse: collapse;
}

.su-ifp-table-header {
    border-bottom: 4px solid #007CB7;
    border-radius: 15px 15px 0 0;
}

.su-ifp-th {
    padding: 8px 40px;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.4px;
    color: #002A3A;
}

.su-ifp-table-row {
    height: 60px;
}

.su-ifp-td {
    padding: 16px 40px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #002A3A;
}

.su-ifp-member-link {
    color: #007CB7;
    text-decoration: none;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

.su-ifp-member-link:hover {
    text-decoration: underline;
}

.su-ifp-divider-row {
    height: 0;
}

.su-ifp-divider {
    height: 2px;
    background: #EAE8E7;
    margin: 0;
}

/* -- IFP Pagination -- */

.su-ifp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.su-ifp-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #002A3A;
    cursor: pointer;
    padding: 0;
}

.su-ifp-page-btn:hover:not(:disabled) {
    color: #007CB7;
}

.su-ifp-page-btn:disabled {
    color: #ABA7A4;
    cursor: default;
}

.su-ifp-page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #007CB7;
    border-radius: 8px;
    font-family: 'SF Pro Text', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.24px;
    color: #ffffff;
}

/* -- IFP No Results -- */

.su-ifp-no-results {
    padding: 60px 0 0 0;
    max-width: calc(100% - 136px); /* Subtract search button width (46px) + gap (36px) + some buffer */
}

.su-ifp-no-results-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 28px;
    color: #002A3A;
    margin: 0 0 16px;
}

.su-ifp-no-results-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #002A3A;
    margin: 0;
}

/* #endregion */

/* #region DirectPay */
/* ── DirectPay Member Details Dialog (Figma: IFP Subscriber Search Result - Superuser, node 99:1569) ── */
/* Strip the MudDialog white paper so the dp-card is the sole visible container */
.mud-dialog:has(.dp-card) {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mud-dialog:has(.dp-card) .mud-dialog-content {
    padding: 0 !important;
    overflow: visible !important;
}

.dp-card {
    font-family: 'DM Sans', sans-serif;
    background-color: #EAE8E7;
    border-radius: 15px;
    padding: 28px 40px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    font-size: 16px;
    color: #000000;
}

.dp-close-btn {
    position: absolute !important;
    top: 12px;
    right: 12px;
}

.dp-section {
    display: flex;
    flex-direction: column;
}

.dp-section-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #004B87;
    margin: 0 0 16px 0;
    padding: 0;
    white-space: nowrap;
}

.dp-section-body {
    display: flex;
    gap: 100px;
}

.dp-col {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.dp-label-col {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}

.dp-label-col-narrow {
    min-width: 126px;
}

.dp-label-col-wide {
    min-width: 146px;
}

.dp-value-col {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.dp-row-p {
    line-height: 28px;
    margin: 0;
    padding: 0;
}

.dp-link {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #007CB7;
    text-decoration: none;
}

.dp-link:hover {
    text-decoration: underline;
}

.dp-divider {
    border: none;
    border-top: 2px solid #007CB7;
    margin: 0;
}

/* #endregion */

/* #region Profile Dropdown */
/* ── Profile Dropdown Menu (Figma Design) ── */
.profile-dropdown-menu {
    background: #f5f4f3 !important;
    padding: 20px !important;
    border-radius: 15px !important;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25) !important;
    min-width: 275px !important;
}

.profile-menu-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    min-height: 35px;
    background: transparent !important;
    border: none;
    cursor: pointer;
    width: 100%;
    text-decoration: none;
    color: #002a3a;
    transition: opacity 0.2s ease;
}

.profile-menu-item:hover {
    opacity: 0.7;
    background: transparent !important;
}

.profile-menu-item-icon {
    width: 15px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-menu-item-icon svg {
    width: 100%;
    height: 100%;
}

.profile-menu-item-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #002a3a;
    flex: 1;
}

/* ── Profile Button Section (Figma Design) ── */
.profile-button-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.profile-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.profile-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.22px;
    color: #002a3a;
    text-align: right;
    margin: 0;
}

.profile-agency {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.22px;
    color: #002a3a;
    text-align: right;
    margin: 0;
}

.profile-icon-circle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Override MudBlazor menu styles */
.mud-popover.profile-dropdown-popover .mud-popover-paper,
.mud-popover.profile-dropdown-popover .mud-paper,
.mud-popover.profile-dropdown-popover {
    background: #f5f4f3 !important;
    background-color: #f5f4f3 !important;
    padding: 20px !important;
    border-radius: 15px !important;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25) !important;
}

.mud-popover.profile-dropdown-popover .mud-list {
    padding: 0 !important;
}

.mud-popover.profile-dropdown-popover .mud-list-item {
    padding: 0 !important;
    min-height: auto !important;
}

.su-ifp-link {
    color: #007CB7;
    text-decoration: underline;
}

.su-ifp-link:hover {
    text-decoration: underline;
}

/* #endregion */

/* #region Profile Link Agencies */
.link-agencies-description {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #002A3A;
    font-size: 18px;
    font-family: DM Sans;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.link-agencies-instructions {
    color: #5F5955;
}

.link-agencies-username-label {
    margin-bottom: -10px;
}

.link-agencies-row {
    display: flex;
    justify-content: flex-start; /* left aligned */
    gap: 10px; /* spacing between items */
}

.link-agencies-username-field {
    width: 250px;
}

.link-agencies-header-spacer {
    width: 50px;
    height: 50px;
}

.link-agencies-separator {
    border-bottom: 3px solid #007CB7;
    margin: 4px 0 8px 0;
}

/* #endregion */

/* #region Broker Attestation */
/* ── Broker Attestation ── */
.ba-page {
    background: #ffffff;
    padding: 60px 0 80px;
}

.ba-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 0 48px;
    border-bottom: 1px solid #EAE8E7;
    margin-bottom: 40px;
}

.ba-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 46px;
    line-height: 50px;
    letter-spacing: -1.38px;
    color: #002A3A;
    margin: 0;
}

.ba-title-underline {
    width: 62px;
    height: 10px;
    background-color: #007CB7;
    border-radius: 8px;
}

.ba-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 960px;
}

.ba-intro {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #002A3A;
    margin: 0;
}

.ba-loading {
    padding: 24px 0;
}

.ba-loading-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: #5F5955;
}

.ba-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0 0;
}

.ba-checkbox-row {
    padding: 4px 0;
}

.ba-checkbox-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #002A3A;
}

.ba-checkbox-text strong {
    font-weight: 700;
    color: #002131;
}

.ba-link {
    color: #007CB7;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ba-link:hover {
    color: #005a89;
}

.ba-signature-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 40px 0 0;
    max-width: 630px;
}

.ba-signature-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #002A3A;
}

.ba-signature-input {
    height: 60px;
    border: 1px solid #5F5955;
    border-radius: 16px;
    padding: 0 24px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #3D3935;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.ba-signature-input:focus {
    border-color: #007CB7;
}

/* #region Claim Detail Dialog (Figma: My Business / Member Info / Claims & EOBs) */
.claim-detail-dialog.mud-dialog,
.claim-detail-dialog .mud-dialog {
    width: 464px;
    max-width: 464px;
    max-height: 90vh;
    border-radius: 15px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.claim-detail-dialog .mud-dialog-content,
.claim-detail-dialog.mud-dialog .mud-dialog-content {
    padding: 0;
    overflow-y: auto;
    max-height: 90vh;
}

.claim-detail-dialog .mud-dialog-title,
.claim-detail-dialog.mud-dialog .mud-dialog-title {
    display: none;
}

.cd-root {
    font-family: 'DM Sans', sans-serif;
    background: #ffffff;
    border-radius: 15px;
}

/* Header */
.cd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 9px 12px 9px 33px;
    background: #007CBD;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.cd-header-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #ffffff;
    white-space: nowrap;
}

.cd-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.cd-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Body */
.cd-body {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 36px 32px;
}

/* Tabs */
.cd-tabs-wrap {
    display: flex;
    flex-direction: column;
}

.cd-tabs {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.cd-tab {
    height: 45px;
    padding: 4px 28px;
    border: 1px solid #007CB7;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #ffffff;
    color: #007CB7;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -0.32px;
    cursor: pointer;
    white-space: nowrap;
}

.cd-tab--active {
    background: #007CB7;
    border-color: #007CB7;
    color: #ffffff;
    padding: 4px 40px;
}

.cd-tab-rule {
    height: 1px;
    background: #007CB7;
}

/* Info block */
.cd-info,
.cd-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: start;
    column-gap: 16px;
    row-gap: 0;
}

.cd-info .cd-lbl,
.cd-rows .cd-lbl {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    white-space: nowrap;
}

.cd-info .cd-val,
.cd-rows .cd-val {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: right;
}

.cd-info .cd-lbl {
    color: #000000;
}

.cd-info .cd-val {
    color: #000000;
}

.cd-rows .cd-lbl {
    color: #002A3A;
}

.cd-rows .cd-val {
    color: #002A3A;
}

/* Cost / responsibility sections */
.cd-section {
    display: flex;
    flex-direction: column;
}

.cd-section-title {
    margin: 0 0 16px 0;
    font-weight: 900;
    font-size: 16px;
    line-height: 24px;
    color: #007CB7;
}

.cd-divider {
    height: 1px;
    background: #C9D6DF;
    margin: 16px 0 10px 0;
}

.cd-amount-owed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

/* Action buttons */
.cd-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cd-btn {
    height: 45px;
    padding: 0 25px;
    border: none;
    border-radius: 100px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    cursor: pointer;
    white-space: nowrap;
}

.cd-btn--primary {
    background: #007CB7;
    color: #ffffff;
}

.cd-btn--primary:hover {
    background: #006193;
}

.cd-btn--light {
    background: #DFF0FB;
    color: #002131;
}

.cd-btn--light:hover {
    background: #cfe7f8;
}

.cd-empty {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #002A3A;
}
/* #endregion */

.ba-signature-input::placeholder {
    color: #ABA7A4;
}

.ba-actions {
    padding: 32px 0 0;
}

.ba-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #007CB7;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    border: none;
    border-radius: 100px;
    height: 46px;
    padding: 0 30px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: background-color 0.2s ease;
}

.ba-submit-btn:hover:not(:disabled) {
    background: #005a89;
}

.ba-submit-btn:disabled {
    background: #ABA7A4;
    cursor: not-allowed;
    color: #ffffff;
}

.ba-error-alert {
    margin-top: 24px;
    max-width: 960px;
}

/* #endregion */

/* #region Login Page */
/* ==========================================================================
   Login Page Styles (scoped to .login-page)
   ========================================================================== */

.login-page {
    box-sizing: border-box;
    color: #3D3935;
    font-family: "DM Sans", serif;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* MudBlazor palette overrides for login page */
    --mud-palette-error: rgb(123, 8, 0);
    --mud-palette-error-text: rgb(255, 255, 255);
    --mud-palette-error-darken: rgb(98, 6, 0);
    --mud-palette-error-lighten: rgb(148, 10, 0);
    --mud-palette-error-contrast-text: rgb(255, 255, 255);

    /* Override MudBlazor h1 typography variables — prevents MudBlazor's
       h1{font-size:var(--mud-typography-h1-size)} from overriding our sizes.
       These values are the base (mobile) values; media queries below override
       them for the login-screen card specifically. */
    --mud-typography-h1-size: 35px;
    --mud-typography-h1-weight: 700;
    --mud-typography-h1-family: "DM Sans", sans-serif;
    --mud-typography-h1-lineheight: 1.2;
    --mud-typography-h1-letterspacing: 0;
    --mud-typography-h1-text-transform: none;
}

/* MudBlazor Alert overrides for login page - ensure white text on error alerts */
.login-page .mud-alert-filled-error {
    background-color: rgb(123, 8, 0) !important;
    color: rgb(255, 255, 255) !important;
}

.login-page .mud-alert-filled-error .mud-alert-message {
    color: rgb(255, 255, 255) !important;
}

.login-page .mud-alert-filled-error .mud-icon-root {
    color: rgb(255, 255, 255) !important;
}

.login-page *,
.login-page *::before,
.login-page *::after {
    box-sizing: inherit;
}

/* Main content area - fills remaining space */
.login-page .login-page-content {
    flex: 1;
}

/* ==========================================================================
   Login Page - Utility Classes
   ========================================================================== */

.login-page .vh {
    position: absolute;
    margin: -1px;
    padding: 0;
    border: 0 none;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.login-page .hidden {
    display: none;
}

.login-page .hidden-mobile {
    display: none;
}

.login-page .hidden-desktop {
    display: block;
}

.login-page .u-remove-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-page .u-remove-list > li {
    margin: 0 0.2em;
}

.login-page .u-list-inline li {
    display: inline-block;
    vertical-align: middle;
}

/* Text Colors */
.login-page .u-text-white {
    color: white;
}

.login-page .u-text-blue {
    color: #007CB7;
}

/* Background Colors */
.login-page .u-bg-white {
    background-color: white;
}

.login-page .u-bg-darkest-blue,
.login-page .u-bg-navy {
    background-color: #042739;
}

.login-page .u-bg-img {
    background-size: cover;
    background-position: center;
}

.login-page .u-blue-gradient {
    background: linear-gradient(145.49deg, #002131 1.6%, #015887 98.47%);
}

/* Layout Utilities */
.login-page .u-corners-all {
    border-radius: 10px;
    overflow: hidden;
}

.login-page .u-flex {
    display: flex;
}

.login-page .u-flex--mobile {
    display: flex;
}

.login-page .u-bpad {
    padding-bottom: 10px;
}

/* ==========================================================================
   Login Page - Grid System
   ========================================================================== */

.login-page .grid-mobile {
    display: grid;
}

.login-page .grid-v-center {
    align-items: center;
}

.login-page .gridgap {
    grid-gap: 1em;
}

/* ==========================================================================
   Login Page - Container
   ========================================================================== */

.login-page .agent-container {
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ==========================================================================
   Login Page - Typography
   ========================================================================== */

.login-page h1, .login-page .h1,
.login-page h2, .login-page .h2,
.login-page h3, .login-page .h3,
.login-page h4, .login-page .h4,
.login-page h5, .login-page .h5,
.login-page h6, .login-page .h6 {
    margin: 0;
    font-family: "Open Sans" !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: #fff !important;
}

.login-page h1, .login-page .h1 {
    font-size: 35px !important;
    line-height: 40px !important;
}

/* Suppress browser focus outline on h1 — Blazor's FocusOnNavigate targets it on every navigation */
.login-page h1:focus {
    outline: none;
}

/* Hero heading — uses div+role="heading" to bypass MudBlazor's global h1 tag rule */
.login-page .hero-heading {
    font-family: "Open Sans";
    font-weight: 600;
    color: #fff;
    font-size: 24px;
    line-height: 27px;
    margin: 0;
}

@media (min-width: 720px) {
    .login-page .hero-heading {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -0.03em;
    }
}

@media (min-width: 75rem) {
    .login-page .hero-heading {
        font-size: 46px;
        line-height: 54px;
        letter-spacing: -0.06em;
    }
}

.login-page h5, .login-page .h5 {
    font-size: 24px;
}

.login-page h6, .login-page .h6 {
    font-weight: 700;
}

.login-page p {
    margin: 0;
}

/* ==========================================================================
   Login Page - Site Main
   ========================================================================== */

.login-page .site-main {
    position: relative;
    width: 100%;
}

/* ==========================================================================
   Login Page - Home Hero Section
   ========================================================================== */

.login-page .home-hero {
    background: linear-gradient(145.49deg, #002131 1.6%, #015887 98.47%);
    padding-bottom: 0px;
    width: 100%;
}

/* Push hero section below the fixed header */
.login-page .home-hero.login-screen {
    margin-top: 115px;
}

.login-page .home-hero-wrapper {
    padding-top: 50px;
    padding-bottom: 180px;
    align-items: flex-start;
    max-width: 1800px;
    margin: 0 auto;
}

.login-page .home-hero-wrapper.login-screen {
    padding-top: 50px;
    padding-bottom: 0;
}

.login-page .home-hero-bg {
    display: none;
}

.login-page .home-hero-main {
    width: 100%;
}

.login-page .home-hero-main.login-screen {
    padding-bottom: 40px;
    max-width: 460px;
    /* Mobile: override MudBlazor h1 variable for the login box */
    --mud-typography-h1-size: 24px;
    --mud-typography-h1-lineheight: 27px;
    --mud-typography-h1-letterspacing: 0;
}

.login-page .home-hero-main.login-screen h1 {
    font-size: 24px !important;
    line-height: 27px !important;
}

.login-page .home-hero-main.login-screen .hero-hero-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: center;
    text-align: left;
    padding: 50px 20px 35px 20px;
}

.login-page .hero-hero-content {
    padding: 30px 40px;
    text-align: center;
}

.login-page .hero-hero-content p {
    font-size: 1em;
}

/* Need Help Block */
.login-page .need-help-block {
    padding: 30px 0 10px;
    margin: 0 20px;
    border-top: 1px solid #007CB7;
}

.login-page .need-help-block a {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
    cursor: pointer;
}

/* ==========================================================================
   Login Page - Need Help Popup
   ========================================================================== */

.login-page #need-help-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.31);
    width: 100%;
    height: 100vh;
}

.login-page #need-help-popup .popup {
    background: linear-gradient(149.41deg, #002A3A -9.96%, #005683 93.7%);
    border-radius: 15px;
    max-width: 820px;
    width: calc(100% - 40px);
    padding: 70px 20px 40px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-page #need-help-popup .popup .popup-control {
    position: absolute;
    top: 12px;
    right: 8px;
    cursor: pointer;
}

.login-page #need-help-popup .popup .popup-inner .popup-heading h4 {
    font-weight: 900;
    color: #ffffff;
    border-bottom: 1px solid #007CB7;
    padding-bottom: 22px;
    margin-bottom: 22px;
    font-size: 24px;
    line-height: 27px;
    letter-spacing: -0.24px;
}

.login-page #need-help-popup .popup .popup-inner .popup-content {
    font-size: 16px;
    line-height: 25px;
    color: #ffffff;
}

.login-page #need-help-popup .popup .popup-inner .popup-content a {
    color: #91bedc;
    font-size: 16px;
}

.login-page #need-help-popup .popup .popup-inner .popup-content ul li::marker {
    color: #91bedc;
}

/* ==========================================================================
   Login Page - Footer
   ========================================================================== */

.login-page footer.site-footer {
    padding: 70px 0;
}

.login-page footer.site-footer ul, .login-page footer.site-footer ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-page footer.site-footer ul > li, .login-page footer.site-footer ol > li {
    margin: 0;
}

.login-page footer.site-footer .social-nav {
    margin-top: 30px;
}

.login-page .footer-menu ul li {
    margin: 8px 0;
}

.login-page .footer-legal {
    padding-top: 20px;
}

.login-page .footer-middle-row .footer-menu h6 {
    margin-top: 30px;
}

.login-page .footer-middle-row .footer-menu h6:first-child {
    margin-top: 0;
}

.login-page .footer-disclosures ul li {
    margin-right: 10px;
    margin-left: 20px !important;
}

.login-page .footer-copyright {
    padding: 50px 0;
}

.login-page .footer-copyright ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.login-page .footer-copyright ul li:last-child {
    text-align: right;
}

.login-page .footer-download-app {
    padding: 20px 0;
    flex-wrap: wrap;
    display: flex;
}

.login-page .footer-download-app h5 {
    font-size: 17px !important;
    margin: 0 0 10px !important;
}

.login-page .footer-download-app a:hover svg, .login-page .footer-download-app a:focus svg {
    border-color: white;
}

.login-page .footer-download-app a svg {
    display: block;
    max-width: 160px;
    height: auto;
    border: 1px solid #8DC8E8;
    border-radius: 0.55em;
    overflow: hidden;
    transition: all 0.15s ease;
}

.login-page .social-nav svg {
    max-width: 30px;
    max-height: 30px;
}

.login-page .social-nav a svg {
    transform: scale(1);
    transition: all 0.15s ease;
}

.login-page .social-nav a svg:hover, .login-page .social-nav a svg:focus {
    transform: scale(1.15);
}

/* ==========================================================================
   Login Page - Responsive Styles
   ========================================================================== */

@media all and (min-width: 576px) {
    .login-page .agent-container {
        max-width: 600px;
    }
}

@media all and (min-width: 720px) {
    .login-page .agent-container {
        max-width: 750px;
    }

    .login-page .u-corners-all {
        border-radius: 20px;
    }

    .login-page .hidden-mobile {
        display: block;
    }

    .login-page .hidden-desktop {
        display: none;
    }

    .login-page h1, .login-page .h1 {
        font-size: 50px !important;
        line-height: 60px !important;
    }

    .login-page {
        font-size: 17px;
        line-height: 30px;
    }

    .login-page footer.site-footer h6 {
        margin: 0 0 10px;
        color: #8DC8E8 !important;
    }

    .login-page footer.site-footer h5 {
        margin: 0 0 10px;
    }

    .login-page .footer-legal {
        padding-top: 0;
    }

    .login-page .footer-legal-menu ul {
        display: flex;
        flex-wrap: wrap;
    }

    .login-page .footer-legal-menu ul li {
        min-width: 48%;
        margin: 3px 0;
    }

    .login-page .footer-copyright {
        padding: 50px 0;
    }

    .login-page .footer-download-app {
        padding: 30px 0 0;
    }

    .login-page .footer-download-app h5 {
        margin: 0 0 10px !important;
    }

    .login-page .home-hero-bg {
        display: block;
    }

    /* Set container height from image aspect ratio (3699x2416) so background-size:cover
       shows the full image without cropping. */
    .login-page .home-hero.login-screen > .u-relative {
        aspect-ratio: 3699 / 2416;
    }

    .login-page .home-hero-main {
        width: 75%;
    }

    .login-page .home-hero-main.login-screen {
        width: auto;
        max-width: 530px;
        padding-bottom: 0;
        --mud-typography-h1-size: 36px;
        --mud-typography-h1-lineheight: 42px;
        --mud-typography-h1-letterspacing: 0;
    }

    .login-page .home-hero-main.login-screen h1 {
        font-size: 36px !important;
        line-height: 42px !important;
    }

    .login-page .home-hero-main.login-screen .hero-hero-content {
        padding: 60px 50px 35px 50px;
    }

    .login-page .hero-hero-content {
        text-align: left;
        padding: 30px;
    }

    .login-page .home-hero-wrapper {
        background: transparent;
        min-height: 70vh;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        padding-top: 200px;
    }

    .login-page #need-help-popup .popup {
        padding: 95px 70px;
        top: 50%;
    }

    .login-page #need-help-popup .popup .popup-control {
        top: 20px;
        right: 20px;
    }

    .login-page #need-help-popup .popup .popup-inner .popup-heading h4 {
        font-size: 32px;
        line-height: 37px;
        letter-spacing: -0.64px;
    }

    .login-page #need-help-popup .popup .popup-inner .popup-content {
        font-size: 18px;
        line-height: 28px;
    }
}

@media all and (min-width: 800px) {
    .login-page .agent-container {
        max-width: 800px;
    }
}

@media (min-width: 60rem) {
    .login-page .home-hero-wrapper.login-screen {
        padding-bottom: 180px;
        padding-top: 200px;
    }

    .login-page .home-hero-main {
        width: 65%;
    }

    .login-page .home-hero-main.login-screen {
        max-width: 530px;
        width: 100%;
    }

    .login-page .home-hero-main.login-screen .hero-hero-content {
        padding: 60px 75px 35px 50px;
        gap: 25px;
    }

    .login-page .need-help-block {
        padding: 22px 0 60px;
        margin: 0 50px;
    }
}

@media (min-width: 75rem) {
    .login-page .home-hero-main.login-screen {
        --mud-typography-h1-size: 46px;
        --mud-typography-h1-lineheight: 54px;
        --mud-typography-h1-letterspacing: -0.04em;
    }

    .login-page .home-hero-main.login-screen h1 {
        font-size: 46px !important;
        line-height: 54px !important;
        letter-spacing: -0.06em;
    }
}

@media (min-width: 90rem) {
    .login-page .home-hero-main {
        width: 50%;
    }

    .login-page .hero-hero-content {
        padding: 50px;
    }

    .login-page .hero-hero-content p {
        font-size: 1.2em;
    }
}

@media all and (min-width: 1200px) {
    .login-page .agent-container {
        max-width: 1100px;
    }
}

@media all and (min-width: 1400px) {
    .login-page .agent-container {
        max-width: 1300px;
    }
}

@media (max-width: 959px) {
    .login-page .footer-copyright ul {
        flex-direction: column;
        gap: 10px;
    }

    .login-page .footer-copyright ul li:last-child {
        text-align: left;
    }
}

@media (max-width: 720px) {
    .login-page .home-hero {
        background: linear-gradient(145.49deg, #002131 1.6%, #015887 98.47%);
        padding-bottom: 30px;
    }

    .login-page .home-hero-wrapper {
        padding: 0;
    }

    .login-page .home-hero-main {
        overflow: hidden;
        padding-bottom: 30px;
    }

    .login-page .home-hero-main.login-screen {
        max-width: 100%;
        width: 100%;
    }

    .login-page .home-hero-main h1:after {
        margin-left: auto;
        margin-right: auto;
    }

    .login-page .footer-menu {
        display: block;
    }

    .login-page .footer-menu > div:first-child {
        margin-bottom: 20px;
    }
}

@media (max-width: 500px) {
    .login-page .footer-menu {
        display: block;
    }

    .login-page .footer-menu > div:first-child {
        margin-bottom: 20px;
    }
}

/* #endregion */

/* #region Help Dialog */
/* ==========================================================================
   Help Dialog
   ========================================================================== */

.help-dialog-container.mud-dialog {
    background: linear-gradient(149.41deg, #002A3A -9.96%, #005683 93.7%) !important;
    border-radius: 15px !important;
    max-width: 920px !important;
    width: calc(100% - 40px) !important;
    padding: 0 !important;
}

.help-dialog-container .mud-dialog-surface {
    background: linear-gradient(149.41deg, #002A3A -9.96%, #005683 93.7%) !important;
    border-radius: 15px !important;
    max-width: 820px !important;
    padding: 0 !important;
}

.help-dialog-container .mud-dialog-title {
    padding: 70px 0 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    position: relative !important;
}

/* Heading inner — margin insets the border-bottom from dialog edges */
.help-dialog-container .help-dialog-title-inner {
    margin: 0 70px;
    padding-bottom: 22px;
    border-bottom: 1px solid #007CB7;
}

.help-dialog-container .help-dialog-heading {
    font-family: "Open Sans", sans-serif;
    font-weight: 900;
    color: #ffffff;
    font-size: 32px;
    line-height: 37px;
    letter-spacing: -0.64px;
}

/* Close button absolutely positioned like Angular (top:12px; right:8px) */
.help-dialog-container .help-dialog-close {
    position: absolute;
    top: 12px;
    right: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.help-dialog-container .help-dialog-close:hover {
    opacity: 0.8;
}

.help-dialog-container .help-dialog-close:focus-visible {
    outline: 2px solid #91bedc;
    outline-offset: 2px;
    border-radius: 50%;
}

.help-dialog-container .mud-dialog-content {
    font-family: "Open Sans", sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #ffffff !important;
    padding: 22px 70px 70px 70px !important;
}

.help-dialog-container .mud-dialog-content ul {
    margin: 0 !important;
    padding: 0 0 0 20px !important;
    list-style-type: disc !important;
}

.help-dialog-container .mud-dialog-content ul li {
    margin-bottom: 5px !important;
    padding-left: 0 !important;
    color: #ffffff !important;
    list-style-type: disc !important;
}

.help-dialog-container .mud-dialog-content ul li::marker {
    color: #91bedc !important;
}

.help-dialog-container .mud-dialog-content a {
    color: #91bedc !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
}

.help-dialog-container .mud-dialog-content a:hover,
.help-dialog-container .mud-dialog-content a:focus {
    opacity: 0.85;
}

@media (max-width: 720px) {
    .help-dialog-container .mud-dialog-surface {
        max-width: calc(100% - 40px) !important;
    }

    .help-dialog-container .help-dialog-title-inner {
        margin: 0 30px;
        padding-bottom: 18px;
    }

    .help-dialog-container .help-dialog-heading {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .help-dialog-container .mud-dialog-content {
        padding: 15px 30px 40px 30px !important;
        font-size: 14px !important;
        line-height: 22px !important;
    }
}
/* #endregion */

/* #region Inactivity sign-out banner ─────────────────────────────────── */
/*
   Rendered on the public landing pages after an idle sign-out. Positioned as a
   fixed overlay (toast-style) so it floats above the hero without entering the
   normal document flow — otherwise it would push the hero down and throw off the
   header-scroll.js offset/height calculations.
*/
.idle-signout-banner.mud-alert {
    position: fixed;
    top: 128px; /* clear the fixed public header (115px) with a small gap */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300; /* above the public header (900) and any nav layers */
    width: min(680px, calc(100% - 32px));
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-rounded);
}

.idle-signout-banner-offset.mud-alert {
    top: 206px;
}

/*
   Match Angular notice-section look while keeping it fixed so header-scroll.js
   behavior is not affected by layout reflow.
*/
.login-page .login-maintenance-banner.notice-section {
    position: fixed;
    top: var(--login-banner-top, 115px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1290;
    width: 100%;
    background-color: #EEB808;
    font-size: 14px;
    line-height: 19px;
    color: #002a3a;
    padding: 15px 0;
    box-shadow: var(--shadow-card);
}

.login-page .login-maintenance-banner.notice-section a {
    color: #002a3a;
}

.login-page .login-site-down-banner.notice-section {
    background-color: #b42318;
    color: #ffffff;
}

.login-page .login-site-down-banner.notice-section a,
.login-page .login-site-down-banner.notice-section .notice-text {
    color: #ffffff;
}

.login-page .login-site-down-banner.notice-section path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.login-page .login-maintenance-banner.notice-section svg {
    width: 20px;
}

.login-page .login-maintenance-banner.notice-section .notice-text {
    display: flex;
    align-items: center;
    gap: 14px;
}

@media (max-width: 600px) {
    .idle-signout-banner.mud-alert {
        top: 96px;
    }

    .idle-signout-banner-offset.mud-alert {
        top: 162px;
    }

    .login-page .login-maintenance-banner.notice-section {
        top: var(--login-banner-top, 72px);
    }
}

@media all and (min-width: 720px) {
    .login-page .login-maintenance-banner.notice-section {
        font-size: 18px;
        line-height: 32px;
        padding: 22px 0;
    }

    .login-page .login-maintenance-banner.notice-section svg {
        width: 28px;
    }
}

.login-page .btn.login-disabled,
.login-page .btn.login-disabled:hover,
.login-page .btn.login-disabled:focus {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
/* #endregion */