/**
 * BCS theme — semantic palette and Tailwind-style utilities.
 * Loads after style.css / style.tailwind.css.
 *
 * Brand shapes: orthogonal corners (--radius-panel / --radius-button = 0) per client comps.
 */

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --color-primary: #0c1b40;
    --color-secondary: #1d429d;
    --color-accent: #53a1f3;
    --color-highlight: #fad20f;
    /* Light blue-gray panel background (.panel-ice, .bg-ice); change here to retone all shells */
    --color-ice: #f3f7fb;

    /* Text on backgrounds */
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;
    --text-on-accent: #0c1b40;
    --text-on-highlight: #0c1b40;
    --text-on-ice: #0c1b40;
    --text-muted-on-ice: #5c6473;

    /* Borders */
    --color-border-muted: rgba(12, 27, 64, 0.12);

    /* Focus / ring */
    --ring-accent: #53a1f3;
    --shadow-theme-soft: 0 1px 2px rgba(12, 27, 64, 0.06),
        0 4px 12px rgba(12, 27, 64, 0.08);
    --shadow-theme-md: 0 4px 6px rgba(12, 27, 64, 0.07),
        0 12px 24px rgba(12, 27, 64, 0.1);

    /* Sharp rectangular surfaces (brand reference: no rounded cards / buttons) */
    --radius-panel: 0;
    --radius-button: 0;
    /** Capsule escape hatch for btn-pill only; default controls stay square */
    --radius-pill-fallback: 9999px;
    --ribbon-thickness: 4px;

    /*
     * Main content column (.bcs-page-content-pad inside layouts.app .container).
     * Symmetric vertical padding (--bcs-page-content-pad-block). Horizontal: --bcs-page-content-pad-inline.
     */
    --bcs-page-content-pad-inline: 0;
    --bcs-page-content-pad-block: 20px;

    /*
     * Page hero strip padding (.bcs-page-hero-strip).
     */
    --bcs-page-hero-strip-pad-y: 1.25rem;
    --bcs-page-hero-strip-pad-y-md: 1.5rem;
    --bcs-page-hero-strip-pad-x: 1.25rem;
    --bcs-page-hero-strip-pad-x-md: 1.5rem;

    /*
     * Top bar — profile chevron: one tint for default / hover / open (no state color shift).
     */
    --topbar-account-chevron: var(--color-secondary);
    --topbar-account-chevron-hover: var(--topbar-account-chevron);
    --topbar-account-chevron-open: var(--topbar-account-chevron);

    /* Buttons (Tailwind-like interaction) */
    --btn-transition:
        color var(--btn-duration) var(--btn-ease),
        background-color var(--btn-duration) var(--btn-ease),
        border-color var(--btn-duration) var(--btn-ease),
        box-shadow var(--btn-duration) var(--btn-ease),
        transform var(--btn-duration) var(--btn-ease);
    --btn-duration: 150ms;
    --btn-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --btn-ring-offset: var(--color-ice);
    --btn-shadow: 0 1px 2px rgba(12, 27, 64, 0.08);
    --btn-shadow-hover: 0 4px 14px rgba(12, 27, 64, 0.15);

    /* Full-page / overlay spinners (.loader uses currentColor → --loader-spinner-stroke) */
    --loader-spinner-stroke: var(--color-secondary);

    /* Alerts — soft surfaces (pair with .bcs-alert--*) */
    --alert-danger-bg: #fee2e2;
    --alert-danger-border: #fecaca;
    --alert-danger-fg: #991b1b;
    --alert-success-bg: #d1fae5;
    --alert-success-border: #a7f3d0;
    --alert-success-fg: #065f46;
    --alert-warning-bg: #fffbeb;
    --alert-warning-border: #fde68a;
    --alert-warning-fg: #92400e;
    --alert-info-bg: #eff6ff;
    --alert-info-border: #bfdbfe;
    --alert-info-fg: #1e3a8a;

    /* Tooltips — lift hosting card/strip above nearby shells (#bcs-checkout-member-shell is ~z-index 30) */
    --z-tooltip-stack: 55;
    --z-tooltip-bubble: 2000;
}

/*
 * Spinner arc — loaders using partials/loader.blade.php (stroke="currentColor") follow
 * --loader-spinner-stroke (secondary). Inline stroke="#38aa9e" in older views still works where rules below apply.
 */
.loader {
    color: var(--loader-spinner-stroke);
}

.loader path[stroke],
.loader svg path {
    stroke: var(--loader-spinner-stroke);
}

/*
 * Main app AJAX overlay: fills the *visible* main column only (not the sidebar, not the
 * scrollable document height). position:absolute on tall .innerWrapper centered the spinner in
 * the middle of the full page scroll; position:fixed + left matching .offsetWrapper padding keeps
 * the frosted area in the viewport. Values mirror style.css (#pageHeader / .offsetWrapper).
 */
.offsetWrapper .innerWrapper > .container > .loader,
.offsetWrapper .innerWrapper > .container .bcs-page-content-pad > .loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 75px;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

@media (min-width: 768px) {
    .offsetWrapper .innerWrapper > .container > .loader,
    .offsetWrapper .innerWrapper > .container .bcs-page-content-pad > .loader {
        left: 270px;
    }

    body.active .offsetWrapper .innerWrapper > .container > .loader,
    body.active .offsetWrapper .innerWrapper > .container .bcs-page-content-pad > .loader {
        left: 75px;
    }
}

.offsetWrapper .innerWrapper > .container > .loader .loaderInside,
.offsetWrapper .innerWrapper > .container .bcs-page-content-pad > .loader .loaderInside {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    flex-shrink: 0;
}

/*
 * jQuery .show() and legacy scripts set display:block inline on .loader, which overrides the flex
 * overlay above and pins the spinner to a corner. Force flex for the main-shell loader only.
 */
.offsetWrapper .innerWrapper > .container > .loader[style*="display: block"],
.offsetWrapper .innerWrapper > .container > .loader[style*="display:block"],
.offsetWrapper .innerWrapper > .container .bcs-page-content-pad > .loader[style*="display: block"],
.offsetWrapper .innerWrapper > .container .bcs-page-content-pad > .loader[style*="display:block"] {
    display: flex !important;
}

/* ---------------------------------------------------------------------------
   Backgrounds (role)
   --------------------------------------------------------------------------- */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-highlight {
    background-color: var(--color-highlight);
}

.bg-ice {
    background-color: var(--color-ice);
}

/* ---------------------------------------------------------------------------
   Text (role)
   --------------------------------------------------------------------------- */
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.hover\:text-primary:hover {
    color: var(--color-primary);
}

.focus\:text-primary:focus {
    color: var(--color-primary);
}

/*
 * Legacy shells (.hDotsList, subscription dstHead tab lists) color anchors with high-specificity teal.
 * Using theme utilities on those anchors requires matching specificity so .text-secondary / hover win.
 */
.hDotsList li a.text-secondary,
.pdTableSection .dstHead .tabActionList li a.text-secondary {
    color: var(--color-secondary);
    text-decoration: none;
}

.hDotsList li a.text-secondary:hover,
.pdTableSection .dstHead .tabActionList li a.text-secondary:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.hDotsList li a.text-secondary:focus,
.hDotsList li a.text-secondary:focus-visible,
.pdTableSection .dstHead .tabActionList li a.text-secondary:focus,
.pdTableSection .dstHead .tabActionList li a.text-secondary:focus-visible {
    text-decoration: none;
}

.hDotsList li a.text-secondary .mdIcn,
.pdTableSection .dstHead .tabActionList li a.text-secondary .mdIcn {
    color: inherit;
}

/* Member pdTableSection — subscription/payments header action links: secondary, primary on hover */
.pdTableSection .dstHead .tabActionList li a,
.pdTableSection .memDetTable .tabActionList li a {
    color: var(--color-secondary);
    text-decoration: none;
}

.pdTableSection .dstHead .tabActionList li a:hover,
.pdTableSection .memDetTable .tabActionList li a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* Destructive / cancel — keep red (legacy #f55858); do not theme as secondary */
.pdTableSection .dstHead .tabActionList li.actionCancel a,
.pdTableSection .memDetTable .tabActionList li.actionCancel a,
.pdTableSection .dstHead .tabActionList li a.error,
.pdTableSection .memDetTable .tabActionList li a.error {
    color: #f55858;
}

.pdTableSection .dstHead .tabActionList li.actionCancel a:hover,
.pdTableSection .memDetTable .tabActionList li.actionCancel a:hover,
.pdTableSection .dstHead .tabActionList li a.error:hover,
.pdTableSection .memDetTable .tabActionList li a.error:hover {
    color: rgba(246, 75, 75, 0.7);
}

.pdTableSection .dstHead .tabActionList li+li:before,
.pdTableSection .memDetTable .tabActionList li+li:before {
    color: var(--color-secondary);
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

.text-accent {
    color: var(--color-accent);
}

.fill-accent {
    fill: var(--color-accent);
}

.text-highlight {
    color: var(--color-highlight);
}

.text-on-primary {
    color: var(--text-on-primary);
}

.text-on-secondary {
    color: var(--text-on-secondary);
}

.text-on-accent {
    color: var(--text-on-accent);
}

.text-on-highlight {
    color: var(--text-on-highlight);
}

.text-on-ice {
    color: var(--text-on-ice);
}

.text-muted-on-ice {
    color: var(--text-muted-on-ice);
}

/* Secondary brand accent (replaces legacy .text-minty-* / .fill-minty-* on migrated pages) */
.text-brand-secondary {
    color: var(--color-secondary);
}

.fill-brand-secondary {
    fill: var(--color-secondary);
}

/* Marketing / terms — card chrome */
.bcs-content-card-surface {
    box-sizing: border-box;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    background: #ffffff;
    box-shadow: var(--shadow-theme-soft);
}

/*
 * Hero empty state — same card chrome as `.bcs-content-card-surface`, with centered layout
 * and responsive padding. Use for any “nothing here yet” strip (not marketing-specific).
 */
.bcs-hero-empty-state.bcs-content-card-surface {
    border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.bcs-hero-empty-state {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-top: 2.5rem;
    text-align: center;
    padding-top: clamp(1.25rem, 3.5vw, 2rem);
    padding-bottom: clamp(1.25rem, 3.5vw, 2rem);
    padding-left: clamp(0.875rem, 3vw, 1.5rem);
    padding-right: clamp(0.875rem, 3vw, 1.5rem);
}

@media (min-width: 768px) {
    .bcs-hero-empty-state {
        margin-top: 3rem;
        padding-top: clamp(1.5rem, 4vw, 2.5rem);
        padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
        padding-left: clamp(1rem, 3vw, 2rem);
        padding-right: clamp(1rem, 3vw, 2rem);
    }
}

@media (min-width: 1024px) {
    .bcs-hero-empty-state {
        padding-top: clamp(1.75rem, 4.5vw, 3rem);
        padding-bottom: clamp(1.75rem, 4.5vw, 3rem);
    }
}

.bcs-hero-empty-state__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .bcs-hero-empty-state__inner {
        gap: 1.5rem;
    }
}

/* Title + body copy — tighter than gap between icon / CTA and this block */
.bcs-hero-empty-state__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    max-width: 42rem;
    width: 100%;
}

@media (min-width: 768px) {
    .bcs-hero-empty-state__copy {
        gap: 0.5rem;
    }
}

.bcs-hero-empty-state__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    line-height: 2rem;
    background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.bcs-hero-empty-state__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .bcs-hero-empty-state__title {
        font-size: 1.5rem;
    }
}

.bcs-hero-empty-state__lead {
    margin: 0;
    max-width: 100%;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--text-muted-on-ice);
}

@media (min-width: 768px) {
    .bcs-hero-empty-state__lead {
        font-size: 1rem;
    }
}

/*
 * style.css uses compound selectors (e.g. .dstWrap .widgetHeading) that override a
 * single utility on the same element. Re-apply tokens when the utility class is present.
 */
.dstWrap .widgetHeading.text-muted-on-ice {
    color: var(--text-muted-on-ice);
}

.dstWrap .widgetNumber.text-primary {
    color: var(--color-primary);
}


.dstheading.text-primary {
    color: var(--color-primary);
}

.pdTableSection .memTable td.officeName {
    color: var(--color-primary);
}

.pdTableSection .memTable tbody a {
    color: var(--color-secondary);
}

.pdTableSection .memTable tbody a:hover {
    color: var(--color-primary);
}

/* Footer legal links — override legacy `.ftLinks li a` teal */
#pageFooter .ftLinks li a.text-primary {
    color: var(--color-primary);
}

#pageFooter .ftLinks li a.text-primary:hover {
    color: var(--color-secondary);
}

/* ---------------------------------------------------------------------------
   Borders (role) — pair with .border from style.tailwind.css
   --------------------------------------------------------------------------- */
.border-primary {
    border-color: var(--color-primary);
}

.border-secondary {
    border-color: var(--color-secondary);
}

.border-accent {
    border-color: var(--color-accent);
}

.border-highlight {
    border-color: var(--color-highlight);
}

.border-ice {
    border-color: var(--color-ice);
}

.border-muted {
    border-color: var(--color-border-muted);
}

/* ---------------------------------------------------------------------------
   Ring / focus (theme-specific; no ring-* in legacy tailwind shim)
   --------------------------------------------------------------------------- */
.ring-accent {
    box-shadow: 0 0 0 2px var(--ring-accent);
}

.ring-primary {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.focus-ring-accent:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring-accent);
}

/* ---------------------------------------------------------------------------
   Legacy list / filter controls (.field-input, .styled-filter — Manage Accounts, etc.)
   Overrides mint-teal focus from style.css; keeps shared components on-theme.
   --------------------------------------------------------------------------- */
.field-input:focus,
.field-input.input-sm:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(83, 161, 243, 0.38);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.field-input::placeholder,
.field-input::-webkit-input-placeholder,
.field-input:-ms-input-placeholder {
    color: var(--text-muted-on-ice);
}

/* ---------------------------------------------------------------------------
 * Small text fields (.field-input.bcs-field-input-sm) — compact padding / type for toolbars,
 * heroes, dense tables; widths stay per-form or use utilities.
 * --------------------------------------------------------------------------- */
.field-input.bcs-field-input-sm {
    padding: 0.4375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    min-height: 2.125rem;
}

.styled-filter .field-input:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(83, 161, 243, 0.38);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.field-select-wrapper select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(83, 161, 243, 0.38);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

/* Member profile — Membership Emails: legacy #fefefe borders vanish on white card */
#member-membership-emails-section .field-select-wrapper select {
    border-color: rgba(12, 27, 64, 0.28);
}

.field-input.success,
.field-select-wrapper.success select {
    border-color: var(--color-secondary) !important;
}

/* ---------------------------------------------------------------------------
   Custom checkbox — hidden native input; faux controls on the `<label>`
   (::before square, ::after Font Awesome tick) so copy never overlaps the box.
     <label class="bcs-fake-checkbox">
       <input type="checkbox">
       <span class="bcs-fake-checkbox__text">…</span>
     </label>
   --------------------------------------------------------------------------- */
.bcs-fake-checkbox {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5625rem; /* ~9px: 16px box + breathable gap before text */
    padding-left: 0;
    margin-top: 13px;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
    max-width: 100%;
    box-sizing: border-box;
}

.bcs-fake-checkbox input {
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

.bcs-fake-checkbox::before {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    box-sizing: border-box;
    content: "";
    background-color: #ffffff;
    border-radius: var(--radius-panel);
    border: 1px solid #d1d1d1;
}

.bcs-fake-checkbox.error::before,
.bcs-fake-checkbox.bcs-has-error::before {
    border-color: #f55858;
}

.bcs-fake-checkbox::after {
    position: absolute;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--color-secondary);
    left: 4px;
    top: 6px;
    line-height: 1;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: transform 0.1s ease, -webkit-transform 0.1s ease, opacity 0.1s ease;
    pointer-events: none;
}

.bcs-fake-checkbox:has(input:checked)::after {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.bcs-fake-checkbox__text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Checkout summary (.bcs-checkout-summary)
   Add this class on the same element as legacy `.checkoutsummary` (create member, modals).
   Brand secondary panel, square corners, ice dividers, secondary icons — no Fancybox coupling.
   --------------------------------------------------------------------------- */
.bcs-checkout-summary {
    border-radius: 0;
    border-color: var(--color-secondary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--color-secondary) 22%, transparent);
}

.bcs-checkout-summary .summarytitle,
.bcs-checkout-summary ul .title {
    color: var(--color-secondary);
}

.bcs-checkout-summary ul li:not(.final):not(.divider) {
    color: var(--color-primary);
}

.bcs-checkout-summary ul .divider {
    border-top-color: var(--color-secondary);
    background: var(--color-ice);
}

.bcs-checkout-summary ul .final {
    background: var(--color-secondary);
    color: var(--text-on-secondary);
}

.bcs-checkout-summary svg path {
    fill: var(--color-secondary) !important;
}

.bcs-checkout-summary ul .total-annual-subscription-discount {
    border-top-color: color-mix(
        in srgb,
        var(--color-secondary) 18%,
        transparent
    );
}

/*
 * Toggle switch (x-field-switch / .field-switch) — brand palette replaces legacy teal (#006F91).
 */
.field-switch label {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-ice));
}

.field-switch label::after {
    background: var(--color-secondary);
}

.field-switch input:checked + label {
    background: var(--color-secondary);
}

.field-switch input:checked + label::after {
    background: var(--text-on-secondary);
}

.field-switch:has(.field-input:focus-visible) label {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 45%, transparent);
}

.field-switch input:disabled + label {
    cursor: not-allowed;
    opacity: 0.55;
}

/*
 * Multi-select (x-field-multi-select / initMultiSelect) — brand palette; Add uses .btn-secondary.
 */
.field-multi-select__controls {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.field-multi-select__controls .field-select-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.field-multi-select__add {
    flex: 0 0 auto;
}

/* Match .field-select-wrapper select height (43px in style.css); compact width */
.field-multi-select__add-btn.btn-secondary {
    width: auto;
    min-height: 0;
    height: 43px;
    min-width: 0;
    padding: 0 0.875rem;
    font-size: 13px;
    line-height: 1.25rem;
    box-sizing: border-box;
}

.field-multi-select__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
    margin-right: 1.25rem;
}

.field-multi-select__row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
}

.field-multi-select__remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-width: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border-muted);
    border-right: none;
    border-radius: var(--radius-button);
    background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-ice));
    color: var(--color-secondary);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--btn-duration) var(--btn-ease), background-color var(--btn-duration) var(--btn-ease);
}

.field-multi-select__remove:hover {
    opacity: 0.9;
    background: color-mix(in srgb, var(--color-secondary) 24%, var(--color-ice));
}

.field-multi-select__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 45%, transparent);
    z-index: 1;
}

.field-multi-select__chip {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border-muted);
    border-left: none;
    border-radius: var(--radius-button);
    background: #fefefe;
    color: var(--text-on-ice);
    font-size: 1rem;
    line-height: 1.5;
}

.styled-filter .field-input::placeholder,
.styled-filter .field-input::-webkit-input-placeholder,
.styled-filter .field-input:-ms-input-placeholder {
    color: var(--text-muted-on-ice);
}

/* Apply / reset — same minty classes as legacy markup, themed as secondary */
.styled-filter .btn-minty-500.btn-filter,
.styled-filter a.btn-minty-500.btn-filter-icon {
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
    border-radius: var(--radius-button);
    opacity: 1;
}

.styled-filter .btn-minty-500.btn-filter:hover:not(:disabled):not([aria-disabled="true"]),
.styled-filter a.btn-minty-500.btn-filter-icon:hover {
    opacity: 1;
    background-color: #153273;
}

.styled-filter .btn-minty-500.btn-filter:focus-visible,
.styled-filter a.btn-minty-500.btn-filter-icon:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px var(--color-accent);
}

/* Apply + reset: legacy .btn-filter-icon used vertical-align: -1px (reset sat 1px low). */
.styled-filter .btn-filter,
.styled-filter .btn-filter-icon {
    vertical-align: middle;
}

.styled-filter div:has(> .btn-filter):has(> .btn-filter-icon) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

/*
 * Compact filter selects: Tailwind `h-9` loses to legacy `.formInlineRow .mdSelect { height: 43px }`
 * in style.css. Use `.mdSelect.h-9` inside `.formInlineRow` or `.filterForm.styled-filter` (grid filters).
 */
.formInlineRow .mdSelect.h-9,
.filterForm.styled-filter .mdSelect.h-9 {
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0.125rem 1.5rem 0.125rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Apply / reset: match select row height (Tailwind h-9/w-9 are 2.3125rem; mdSelect row is 2.25rem). */
.formInlineRow .btn.h-9,
.filterForm.styled-filter .btn.h-9 {
    height: 2.25rem;
    min-height: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-sizing: border-box;
}

.formInlineRow .btn.h-9.w-9,
.filterForm.styled-filter .btn.h-9.w-9 {
    width: 2.25rem;
    min-width: 2.25rem;
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   Shadows (theme names to avoid clobbering generic .shadow in future)
   --------------------------------------------------------------------------- */
.shadow-theme-soft {
    box-shadow: var(--shadow-theme-soft);
}

.shadow-theme-md {
    box-shadow: var(--shadow-theme-md);
}

/* ---------------------------------------------------------------------------
   Buttons — Tailwind-like: variants + compound sizes (.btn-primary.btn-sm)
   Solid / soft / ghost; ring-2 offset-2 focus; hover = shadow + color only (no Y
   translate — avoids 1px jump in toolbars/forms); active scale.
   --------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-highlight,
.btn-soft,
.btn-ghost {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-button);
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--btn-transition);
    -webkit-tap-highlight-color: transparent;
}

/* Size modifiers (compound with any variant above) */
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-accent.btn-sm,
.btn-highlight.btn-sm,
.btn-soft.btn-sm,
.btn-ghost.btn-sm,
.btn-outline.btn-sm,
.btn-danger.btn-sm,
.btn-success.btn-sm {
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    border-radius: var(--radius-button);
}

.btn-primary.btn-lg,
.btn-secondary.btn-lg,
.btn-accent.btn-lg,
.btn-highlight.btn-lg,
.btn-soft.btn-lg,
.btn-ghost.btn-lg,
.btn-outline.btn-lg {
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    border-radius: var(--radius-button);
}

/* Let height/width utilities (.h-9, .w-9) control size; theme buttons set a larger min-height by default. */
.btn.h-9 {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
}

.btn.h-9.w-9 {
    padding-left: 0;
    padding-right: 0;
    min-width: 2.3125rem;
}
.btn-primary.btn-pill,
.btn-secondary.btn-pill,
.btn-accent.btn-pill {
    border-radius: var(--radius-pill-fallback);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-accent:disabled,
.btn-highlight:disabled,
.btn-soft:disabled,
.btn-ghost:disabled,
.btn-outline:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"],
.btn-accent[aria-disabled="true"],
.btn-highlight[aria-disabled="true"],
.btn-soft[aria-disabled="true"],
.btn-ghost[aria-disabled="true"],
.btn-outline[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Focus: ring + offset — matches Tailwind ring-2 ring-offset-2 */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-accent:focus-visible,
.btn-highlight:focus-visible,
.btn-soft:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--btn-ring-offset),
        0 0 0 4px var(--color-accent);
}

/* Primary — solid navy */
.btn-primary {
    border-color: transparent;
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    box-shadow: var(--btn-shadow);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #08122e;
    box-shadow: var(--btn-shadow-hover);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
    box-shadow: var(--btn-shadow);
}

/* Secondary — solid royal blue */
.btn-secondary {
    border-color: transparent;
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
    box-shadow: var(--btn-shadow);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #153273;
    box-shadow: var(--btn-shadow-hover);
}

.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
    box-shadow: var(--btn-shadow);
}

/* Accent — Sky Blue solid */
.btn-accent {
    border-color: transparent;
    background-color: var(--color-accent);
    color: var(--text-on-accent);
    box-shadow: var(--btn-shadow);
}

.btn-accent:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #3f96f0;
    box-shadow: var(--btn-shadow-hover);
}

.btn-accent:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
    box-shadow: var(--btn-shadow);
}

/* Highlight — Gold solid */
.btn-highlight {
    border-color: rgba(12, 27, 64, 0.12);
    background-color: var(--color-highlight);
    color: var(--text-on-highlight);
    box-shadow: var(--btn-shadow);
}

.btn-highlight:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #f8c800;
    box-shadow: var(--btn-shadow-hover);
}

.btn-highlight:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
    box-shadow: var(--btn-shadow);
}

/* Soft — tinted surface (no color-mix; broad browser support) */
.btn-soft {
    border-color: var(--color-border-muted);
    background-color: #e9ecf4;
    color: var(--color-primary);
    box-shadow: none;
}

.btn-soft:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #dfe4f0;
}

.btn-soft:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
}

/* Ghost — minimal, text-colored */
.btn-ghost {
    border-color: transparent;
    background-color: transparent;
    color: var(--color-primary);
    box-shadow: none;
    font-weight: 500;
}

.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: rgba(12, 27, 64, 0.06);
}

.btn-ghost:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
}

/* Outline — bordered (legacy name kept) */
.btn-outline {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-button);
    border-style: solid;
    border-width: 1px;
    border-color: rgba(12, 27, 64, 0.22);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--btn-transition);
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: rgba(12, 27, 64, 0.06);
    border-color: var(--color-primary);
}

.btn-outline:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
}

.btn-outline:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--btn-ring-offset),
        0 0 0 4px var(--color-accent);
}

.btn-outline.btn-sm {
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-outline.btn-lg {
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}

/* Danger — destructive confirmations (delete modals, etc.) */
.btn-danger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    background-color: var(--alert-danger-fg);
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--btn-transition);
    box-shadow: var(--btn-shadow);
    -webkit-tap-highlight-color: transparent;
}

.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--alert-danger-fg) 88%, #000000);
    box-shadow: var(--btn-shadow-hover);
}

.btn-danger:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
    box-shadow: var(--btn-shadow);
}

.btn-danger:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--btn-ring-offset),
        0 0 0 4px var(--color-accent);
}

.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

.fancyboxpopup .popupfooter .btn-danger {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Success — positive confirmations (restart subscription, etc.) */
.btn-success {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    background-color: var(--alert-success-fg);
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--btn-transition);
    box-shadow: var(--btn-shadow);
    -webkit-tap-highlight-color: transparent;
}

.btn-success:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--alert-success-fg) 88%, #000000);
    box-shadow: var(--btn-shadow-hover);
}

.btn-success:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
    box-shadow: var(--btn-shadow);
}

.btn-success:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--btn-ring-offset),
        0 0 0 4px var(--color-accent);
}

.btn-success:disabled,
.btn-success[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

.fancyboxpopup .popupfooter .btn-success {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* =========================================================================
 * bcs-auth-* — standalone account shells (layouts.home + bcs-theme.css)
 *
 * markup:
 *   .bcs-auth-screen.fontPoppins >
 *     .bcs-auth-frame > [ .bcs-alert toast | .bcs-auth-panel > form … ]
 *   Toasts use .bcs-auth-screen as position root (not the frame), so they align
 *   with the top of the navy viewport like the legacy .popupWrapper shell.
 *
 * Views: login, register, forgot-password, reset-password, update-password,
 *        auth/force-reset/reset-password, verify-email, two-factor-challenge
 * ========================================================================= */

/* Full viewport behind the centered auth column (--color-primary stripe) */
.bcs-auth-screen {
    padding-top: 105px;
    padding-bottom: 105px;
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
}

/*
 * Center stack: fixed width column. No position:relative here — auth toasts
 * (#errrormasgbox_login / #successmasgbox_login) must anchor to .bcs-auth-screen
 * so they sit below the viewport top, not over the ice card / logo.
 */
.bcs-auth-frame {
    width: 495px;
    max-width: calc(100vw - 32px);
    margin-left: auto;
    margin-right: auto;
}

/*
 * Surface: ice card — same role as .panel-ice (theme “box”).
 */
.bcs-auth-panel {
    border-radius: var(--radius-panel);
    background-color: var(--color-ice);
    border: 1px solid var(--color-border-muted);
    box-shadow: var(--shadow-theme-soft);
    padding: 30px 40px;
    box-sizing: border-box;
    position: relative;
}

.bcs-auth-panel img {
    display: block;
    margin: -10px auto -20px;
    max-width: 420px;
}

.bcs-auth-panel .logoWrap {
    margin-top: 38px;
    margin-bottom: 42px;
}

/*
 * flow-root: contain floated .formCol rows without overflow:hidden, which clips
 * focus rings (box-shadow) on full-width inputs at the form edges.
 */
.bcs-auth-panel form {
    display: flow-root;
}

.bcs-auth-panel .loader {
    border-radius: var(--radius-panel);
}

.bcs-auth-panel #errrormasgbox_checkout {
    padding: 14px 20px 13px;
    background: #fff;
    margin: 0;
}

.bcs-auth-panel #errrormasgbox_checkout .memLabelTitle {
    font-size: 13px;
    margin: 0;
}

.bcs-auth-panel #errrormasgbox_checkout .memLabelTitle.add {
    font-size: 13px;
}

.bcs-auth-panel .field-input {
    width: 100%;
    box-sizing: border-box;
    outline: none;
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-muted);
    padding: 10px 20px;
    font-size: 15px;
    line-height: 25px;
    background-color: #ffffff;
    color: var(--text-on-ice);
    box-shadow: none;
}

.bcs-auth-panel .field-input:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.bcs-auth-panel .field-input:disabled {
    background-color: var(--color-ice);
    color: var(--text-muted-on-ice);
    opacity: 1;
}

.bcs-auth-panel .formCol {
    float: left;
    width: 100%;
    padding-top: 20px;
}

.bcs-auth-panel .field-label {
    color: var(--color-primary);
}

.bcs-auth-frame .formFooter {
    text-align: center;
    color: #ffff;
    font-size: 15px;
    padding: 20px 0;
}

.bcs-auth-frame .formFooter span {
    display: block;
    color: #fff;
}

/* Primary CTA on auth ice panels (full-width secondary; legacy .btn + theme .btn-secondary) */
.bcs-auth-panel .btn.btn-secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-secondary) !important;
    color: var(--text-on-secondary);
    border: 1px solid transparent;
    text-align: center;
    padding: 16px;
    font-size: 17px;
    line-height: 1;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-button);
    box-shadow: var(--btn-shadow);
    transition: var(--btn-transition);
    min-height: auto;
    transform: none;
}

.bcs-auth-panel .btn.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #153273 !important;
    box-shadow: var(--btn-shadow-hover);
    transform: none;
}

.bcs-auth-panel .btn.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
    background-color: #122a62 !important;
    box-shadow: var(--btn-shadow);
    transform: none;
}

.bcs-auth-panel .btn.btn-secondary:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--btn-ring-offset),
        0 0 0 4px var(--color-accent);
}

.bcs-auth-panel .btn.btn-secondary:disabled,
.bcs-auth-panel .btn.btn-secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bcs-auth-panel .btn.btn-secondary i {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
}

/* Inline links (.nav-link-auth) — accent on viewport primary stripe */
.bcs-auth-screen a.nav-link-auth {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bcs-auth-screen a.nav-link-auth:hover {
    color: #7eb8f6;
}

.bcs-auth-screen a.nav-link-auth:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 0;
}

.bcs-auth-screen button.nav-link-auth {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bcs-auth-screen button.nav-link-auth:hover {
    color: #7eb8f6;
}

.bcs-auth-screen button.nav-link-auth:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 0;
}

.bcs-auth-panel form.bcs-auth-verify-logout {
    display: block;
    text-align: center;
    padding-top: 0.5rem;
}

.bcs-auth-panel .formCol .field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.bcs-auth-panel .bcs-auth-two-factor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
}

.bcs-auth-panel .bcs-auth-two-factor-actions .bcs-auth-two-factor-toggle {
    margin-right: auto;
    text-align: left;
}

.bcs-auth-panel .bcs-auth-two-factor-actions .bcs-auth-two-factor-submit {
    flex: 0 0 auto;
}

/* Compact link row under inputs (Forgot Password? on login): theme spacing + typography */
.bcs-auth-helper-row {
    margin-top: 0.25rem;
    text-align: right;
    line-height: 1.2;
}

.bcs-auth-helper-row .nav-link-auth {
    display: inline-block;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
 * Onboarding wizard (same shell as login: .bcs-auth-screen + wide frame)
 * --------------------------------------------------------------------------- */
.bcs-auth-frame--onboarding {
    width: min(860px, calc(100vw - 32px));
    max-width: min(860px, calc(100vw - 32px));
}

.bcs-onboarding-panel {
    --bcs-onboarding-form-surface: color-mix(in srgb, var(--color-secondary) 5%, var(--color-ice));
    border-radius: var(--radius-panel);
    background-color: var(--color-ice);
    border: 1px solid var(--color-border-muted);
    box-shadow: var(--shadow-theme-soft);
    padding: 0;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.bcs-onboarding-panel:has(.tooltip:hover) {
    z-index: var(--z-tooltip-stack);
}

.bcs-onboarding-panel .tooltip:hover {
    z-index: var(--z-tooltip-bubble);
}

.bcs-onboarding-panel .tooltip .tooltip__panel {
    z-index: calc(var(--z-tooltip-bubble) + 1);
}

.bcs-onboarding-panel .loader {
    border-radius: var(--radius-panel);
}

.bcs-onboarding-header {
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border-muted);
}

.bcs-onboarding-header .logoWrap {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.bcs-onboarding-header .logoWrap img {
    display: block;
    margin: 0 auto;
    max-width: min(320px, 100%);
}

.bcs-onboarding-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.35rem;
    line-height: 1.25;
}

.bcs-onboarding-subtitle {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted-on-ice);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.bcs-onboarding-subtitle .mdIcn {
    opacity: 0.85;
}

.bcs-onboarding-progress {
    height: 4px;
    background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-ice));
    border: none;
    display: block;
}

.bcs-onboarding-progress .progressBar,
.bcs-onboarding-progress__bar {
    height: 4px;
    background-color: var(--color-secondary);
    border-radius: 0 2px 2px 0;
}

.bcs-onboarding-body {
    box-sizing: border-box;
}

.bcs-onboarding-panel .payVerForm .formBody.bcs-onboarding-form-body {
    padding: 1.5rem 1.5rem 1.25rem;
    background-color: var(--bcs-onboarding-form-surface);
}

@media (min-width: 640px) {
    .bcs-onboarding-panel .payVerForm .formBody.bcs-onboarding-form-body {
        padding: 1.75rem 2rem 1.5rem;
    }
}

.bcs-onboarding-panel .payVerForm .formNote .h3 {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.bcs-onboarding-panel .payVerForm .formNote .p {
    margin: 0 0 0 2.75rem;
    color: var(--text-on-ice);
    font-size: 0.9375rem;
    line-height: 1.5;
}

@media (max-width: 639px) {
    .bcs-onboarding-panel .payVerForm .formNote .p {
        margin-left: 0;
    }
}

.bcs-onboarding-panel .formFieldTitle {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
}

.bcs-onboarding-panel .formFieldTitle strong {
    font-weight: 600;
}

.bcs-onboarding-panel input.field-input,
.bcs-onboarding-panel select.field-input,
.bcs-onboarding-panel .field-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    outline: none;
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-muted);
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.4;
    background-color: #ffffff;
    color: var(--text-on-ice);
    box-shadow: none;
}

.bcs-onboarding-panel input.field-input:focus,
.bcs-onboarding-panel select.field-input:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.bcs-onboarding-panel .mdSelectWrapper select.mdSelect {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-muted);
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.4;
    background-color: #ffffff;
    color: var(--text-on-ice);
    min-height: 2.875rem;
}

.bcs-onboarding-panel .mdSelectWrapper select.mdSelect:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.bcs-onboarding-panel .payVerForm .formFooter {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--bcs-onboarding-form-surface);
    border-top: 1px solid var(--color-border-muted);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bcs-onboarding-panel .payVerForm .formFooter:not(.text-center):not(.bcs-onboarding-legal) {
    justify-content: space-between;
}

.bcs-onboarding-panel .payVerForm .formFooter .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 7.5rem;
    padding: 12px 20px;
    font-size: 0.9375rem;
    line-height: 1.2;
    box-sizing: border-box;
    background-color: var(--color-secondary) !important;
    color: var(--text-on-secondary);
    border-radius: var(--radius-button);
    font-weight: 600;
    min-height: auto;
    transform: none;
}

.bcs-onboarding-panel .payVerForm .formFooter .btn.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #153273 !important;
}

.bcs-onboarding-panel .payVerForm .formFooter .btn.btn-secondary:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--btn-ring-offset),
        0 0 0 4px var(--color-accent);
}

.bcs-onboarding-panel .payVerForm .formFooter .btn.btn-secondary i {
    margin-left: 0.35rem;
    font-size: 0.875rem;
}

.bcs-onboarding-panel .payVerForm .formFooter .btn.btn-outline i {
    margin-right: 0.35rem;
}

.bcs-onboarding-panel .payVerForm .formFooter.text-center {
    justify-content: center;
}

.bcs-onboarding-panel .payVerForm .formFooter.text-center .btn.btn-secondary {
    width: 100%;
    max-width: 20rem;
}

.bcs-onboarding-panel .payVerForm .formFooter.d-block .text-center .btn.btn-secondary {
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
}

.bcs-onboarding-legal {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
    color: var(--text-muted-on-ice) !important;
    padding: 1rem 1.5rem 1.25rem !important;
    border-top: none !important;
    background: var(--bcs-onboarding-form-surface) !important;
}

.bcs-onboarding-inline-link {
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.bcs-onboarding-inline-link:hover {
    color: var(--color-primary);
}

.bcs-onboarding-panel .errrormasgbox_checkout.bcs-alert {
    margin: 0 1.5rem 1rem;
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    box-sizing: border-box;
}

.bcs-onboarding-panel .errrormasgbox_checkout .memLabelTitle {
    font-size: 0.875rem;
    font-weight: 600;
}

.bcs-alert {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-panel);
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    width: 100%;
    max-width: 42rem;
}

.bcs-alert .text {
    flex: 1 1 auto;
    min-width: 0;
}

.bcs-alert .errrormasgbox_loginClose {
    flex-shrink: 0;
    line-height: 0;
}

.bcs-alert--danger {
    color: var(--alert-danger-fg);
    background: var(--alert-danger-bg);
    border: 1px solid var(--alert-danger-border);
}

.bcs-alert--success {
    color: var(--alert-success-fg);
    background: var(--alert-success-bg);
    border: 1px solid var(--alert-success-border);
}

.bcs-alert--warning {
    color: var(--alert-warning-fg);
    background: var(--alert-warning-bg);
    border: 1px solid var(--alert-warning-border);
}

.bcs-alert--info {
    color: var(--alert-info-fg);
    background: var(--alert-info-bg);
    border: 1px solid var(--alert-info-border);
}

.bcs-alert .bcs-alert__list {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

/* Global flash strip (layouts.app — partials/alerts) */
#alert-static {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#alert-static:has(*) {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#alert-static:not(:has(*)) {
    display: none;
}

#alert-static .bcs-alert {
    max-width: none;
}

/* App.Alerts dynamic container (#alert-container) */
#alert-container {
    flex-direction: column;
    gap: 0.75rem;
}

#alert-container:not(:empty) {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#alert-container .bcs-alert {
    max-width: none;
}

/*
 * Alerts inside main page column (.bcs-page-content-pad). Base `.bcs-alert { max-width: 42rem }` loads
 * after Tailwind, so `.max-w-none` on markup loses the cascade — override here for any depth.
 */
.bcs-page-content-pad .bcs-alert {
    max-width: none;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Fancybox — legacy HTML dialogs (.fancyboxpopup / .formholder)
   Replaces mint/teal shell from style.css with BCS tokens (navy header, ice/off-white body).
   --------------------------------------------------------------------------- */
.fancybox-bg,
.fancybox-is-open .fancybox-bg {
    background: transparent !important;
    opacity: 0 !important;
    transition: none !important;
}

.fancybox-slide--html .fancybox-content {
    background: #ffffff;
    border-radius: var(--radius-panel);
}

.fancybox-slide--html .fancybox-content:has(.fancyboxpopup.fancyboxpopup--ice-shell) {
    background: var(--color-ice);
}

.fancyboxpopup {
    border-radius: var(--radius-panel);
    font-size: 0.875rem;
    color: var(--text-on-ice);
}

.fancyboxpopup .formholder {
    background-color: #ffffff;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    overflow: hidden;
    box-shadow: var(--shadow-theme-soft);
}

/* Optional second line in x-modal-confirm (.title is filled by JS in some flows); no margin when empty */
.modal-confirm-root .modal-context .title:not(:empty) {
    margin-top: 2.5rem;
}

/* x-modal-form / x-modal-confirm inside fancybox — same shell as .formholder */
.fancyboxpopup .modal-form-root,
.fancyboxpopup .modal-confirm-root {
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    overflow: hidden;
    box-shadow: var(--shadow-theme-soft);
}

/* Stack title + body inside modal alerts (.bcs-alert defaults to row) */
.modal-form-root .modal-success.bcs-alert,
.modal-form-root .modal-error.bcs-alert {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0.5rem;
}

/* Fancybox .formholder modal header stripe — secondary (subscription/member dialogs and legacy modals) */
.fancyboxpopup .formholder .head {
    background-color: var(--color-secondary);
    padding: 1.25rem 1.5rem;
    color: var(--text-on-secondary);
}

/* Explicit secondary — same tokens as default; kept for parity with markup that sets it intentionally */
.fancyboxpopup .formholder .head.bcs-fancybox-head-secondary {
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
}

.fancyboxpopup .formholder .head.bcs-fancybox-head-secondary h2,
.fancyboxpopup .formholder .head.bcs-fancybox-head-secondary p {
    color: var(--text-on-secondary);
}

.fancyboxpopup .formholder .head h2,
.fancyboxpopup h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.fancyboxpopup .formholder .head h2 {
    color: var(--text-on-secondary);
}

.fancyboxpopup h2 {
    color: var(--text-on-primary);
}

.fancyboxpopup .popupbody {
    padding: 1.5rem;
    background: #ffffff;
    font-weight: 400;
    color: var(--text-on-ice);
}

.fancyboxpopup .popupbody label:not(.bcs-fake-checkbox),
.fancyboxpopup .form-check label:not(.bcs-fake-checkbox) {
    color: var(--color-primary);
    font-weight: 600;
}

/* Legend row titles (.formFieldTitle) — legacy style.css greys these; match x-field-label navy */
.fancyboxpopup .popupbody .formFieldTitle,
.fancyboxpopup .anmForm .formBody .formFieldTitle {
    color: var(--color-primary);
}

/* Fancybox .anmForm — fake radio circles (frequency, card on file, etc.): match create-account shell (secondary, not mint) */
.fancyboxpopup .anmForm .mdFakeLabelRadio .mdFakeLabel {
    color: var(--color-primary);
}

.fancyboxpopup .anmForm .mdFakeLabelRadio .mdFakeLabel:after {
    background-color: var(--color-secondary);
}

.fancyboxpopup .anmForm .mdFakeLabelRadio input:checked + .mdFakeLabel:before {
    border-color: var(--color-secondary);
}

/*
 * Fancybox — x-field selects on popup body (.field-select); skip assign-multi (own border tokens).
 */
.fancyboxpopup .field-select-wrapper:not(.fancybox-assign-select) select.field-select:not(:disabled) {
    border-color: rgba(12, 27, 64, 0.28);
    background-color: #ffffff;
}

.fancyboxpopup .popupbody small {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted-on-ice);
    font-weight: 400;
    font-size: 0.8125rem;
}

/* Read-only stacks in Fancybox — mirror section-card stack spacing (.bcs-readonly-stack gap is scoped to section cards). */
.fancyboxpopup-account-location-detail .popupbody .bcs-readonly-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Participating location detail — Fancybox close: white on secondary header / ice shell */
.fancybox-slide--html:has(.fancyboxpopup-account-location-detail) .fancybox-close-small {
    color: #ffffff;
    opacity: 1;
}

.fancybox-slide--html:has(.fancyboxpopup-account-location-detail) .fancybox-close-small:hover {
    color: #ffffff;
    opacity: 0.88;
}

.fancyboxpopup.fancyboxpopup-account-location-detail .fancybox-button {
    color: #ffffff;
    background: transparent;
}

.fancyboxpopup.fancyboxpopup-account-location-detail .fancybox-button:hover {
    color: #ffffff;
    opacity: 0.88;
}

.fancyboxpopup .popupfooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem 1.5rem;
    background: #ffffff;
    text-align: right;
}

/*
 * Edit Company Identity (settings) — ice shell must appear AFTER generic `.fancyboxpopup .popupbody` /
 * `.popupfooter` rules so equal-specificity overrides win; use chained classes on the popup root.
 */
.fancyboxpopup.fancyboxpopup--ice-shell .formholder {
    background-color: var(--color-ice);
}

.fancyboxpopup.fancyboxpopup--ice-shell .popupbody {
    background: var(--color-ice);
}

.fancyboxpopup.fancyboxpopup--ice-shell .popupfooter {
    background: var(--color-ice);
    border-top: none;
}

/* Delete confirm: `.popupfooter` is a sibling of `form.anmForm`, not inside it — ice footer band */
.fancyboxpopup .formholder > form.anmForm + .popupfooter {
    background-color: var(--color-ice);
    border-top: 1px solid var(--color-border-muted);
}

.fancyboxpopup .bcs-alert {
    max-width: none;
    align-items: flex-start;
}

.fancyboxpopup .popupbody textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 7.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    background: #ffffff;
    color: var(--text-on-ice);
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: inherit;
}

.fancyboxpopup .popupbody textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 35%, transparent);
}

.fancyboxpopup .popupbody textarea::placeholder {
    color: var(--text-muted-on-ice);
    opacity: 1;
}

/* Assign Group / Region / Location modal — visible select border; hide faux chevrons on native multi-select */
.fancyboxpopup .fancybox-assign-select.field-select-wrapper {
    border: none;
    background-color: transparent;
    border-radius: var(--radius-panel);
    box-sizing: border-box;
}

.fancyboxpopup .fancybox-assign-select.field-select-wrapper select,
.fancyboxpopup .fancybox-assign-select.field-select-wrapper select.mdSelect {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    background-color: #ffffff;
    color: var(--text-on-ice);
    font-size: 0.875rem;
    line-height: 1.35;
    box-shadow: none;
    min-height: 2.75rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
}

.fancyboxpopup .fancybox-assign-select.field-select-wrapper select[multiple] {
    height: auto;
    min-height: 8.5rem;
    padding: 0.5rem 0.75rem;
}

.fancyboxpopup .fancybox-assign-select.field-select-wrapper:has(select[multiple])::before,
.fancyboxpopup .fancybox-assign-select.field-select-wrapper:has(select[multiple])::after {
    display: none;
}

.fancyboxpopup .fancybox-assign-select.field-select-wrapper select:focus,
.fancyboxpopup .fancybox-assign-select.field-select-wrapper select.mdSelect:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.fancyboxpopup .popupfooter .btn + .btn {
    margin-left: 0;
}

/*
 * Fancybox .anmForm — style.css applies teal tint on .formBody; use ice / tokens inside dialogs.
 */
.fancyboxpopup .anmForm .formBody {
    background-color: var(--color-ice);
    padding: 1.5rem;
    border-radius: 0;
    margin-bottom: 0;
}

/* Gaps above footer siblings (e.g. .popupfooter2 margin-top) sit on form, not inside .formBody — ice form hides .formholder white */
.fancyboxpopup .formholder > form.anmForm {
    background-color: var(--color-ice);
}

.fancyboxpopup .anmForm .popupfooter {
    background-color: var(--color-ice);
    padding-top: 0.625rem;
}

.fancyboxpopup .anmForm .formBody fieldset {
    color: var(--text-on-ice);
    /* style.css adds margin-bottom: 35px — removes excess gap above footer buttons */
    margin: 0;
}

.fancyboxpopup .anmForm .formInlineRow:last-child {
    margin-bottom: 0;
}

.fancyboxpopup .formholder .head p {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: inherit;
    opacity: 0.92;
}

/*
 * Legacy `.reactiveinactive .popupfooter2` (style.css) pins the footer absolutely.
 * Flow it under content but mirror `.fancyboxpopup .popupfooter` (padding, right-aligned actions, ice band — no rule line).
 */
.fancyboxpopup.reactiveinactive .popupfooter2 {
    position: static;
    right: auto;
    bottom: auto;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem 1.5rem;
    background-color: var(--color-ice);
    text-align: right;
}

.fancyboxpopup.reactiveinactive .popupfooter2 .btn + .btn {
    margin-left: 0;
}

.fancyboxpopup.reactiveinactive .leftcolumn,
.fancyboxpopup.reactiveinactive .rightcolumn {
    margin-bottom: 0;
}

/* Centered toasts on auth screens — containing block is .bcs-auth-screen (full viewport stripe), not the narrow column */
#errrormasgbox_login.bcs-alert--auth-toast,
#successmasgbox_login.bcs-alert--auth-toast {
    position: absolute;
    right: 50%;
    top: 30px;
    z-index: 20;
    max-width: min(480px, calc(100vw - 32px));
    margin: 0;
    box-shadow: var(--shadow-theme-soft);
    transform: translate(50%, 0);
}

/* ---------------------------------------------------------------------------
   Data tables (list views — Manage Accounts, etc.)
   --------------------------------------------------------------------------- */
.bcs-data-table-wrap {
    box-sizing: border-box;
    margin-top: 0.25rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
    background: #ffffff;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bcs-data-table {
    table-layout: fixed;
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-on-ice);
    background: transparent;
}

.bcs-data-table thead {
    background: var(--color-ice);
    color: var(--color-primary);
}

.bcs-data-table thead th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
    text-align: left;
    letter-spacing: 0.03em;
    text-transform: none;
    border: none;
    border-bottom: 1px solid var(--color-border-muted);
    vertical-align: middle;
    color: var(--color-primary);
}

.bcs-data-table thead th.text-center {
    text-align: center;
}

/* Associated Users: one compact row (summary + BCS pager), no legacy card chrome */
.bcs-associated-users-pagination {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem 1rem;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.375rem 0 0.375rem;
    border-top: 1px solid var(--color-border-muted);
    color: var(--text-muted-on-ice);
    font-size: 0.8125rem;
    line-height: 1.25;
    /* Match visual height when pager is hidden (single page) vs Prev/Next row (~2rem controls + padding) */
    min-height: 2.75rem;
}

.bcs-associated-users-pagination__summary {
    min-width: 0;
    font-weight: 400;
}

.bcs-associated-users-pagination__nav {
    flex-shrink: 0;
}

.bcs-section-card--flush-data-table .bcs-associated-users-pagination {
    margin-top: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.wdgTableTab.pagiTable .bcs-associated-users-pagination {
    margin-top: 0.25rem;
    padding-left: 0;
    padding-right: 0;
}

/* Grouped headers (e.g. enrollment trends): primary band title + muted sub-columns */
.bcs-data-table thead .d-flex-half {
    color: var(--text-muted-on-ice);
    font-size: 0.8125rem;
    font-weight: 500;
}

.bcs-data-table tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid var(--color-border-muted);
    background: #ffffff;
    /* Long emails / IDs: fixed layout otherwise lets unbroken strings paint into the next column */
    overflow-wrap: break-word;
    word-break: break-word;
}

.bcs-data-table tbody tr:nth-child(even) td {
    background: var(--color-ice);
}

.bcs-data-table tbody tr:hover td {
    background: rgba(83, 161, 243, 0.07);
}

/* ---------------------------------------------------------------------------
   Hierarchy commission grid (plan create/edit) — BCS card border; keeps
   .formInlineRow / .formCol for validation JS parents. No zebra or row hover.
   --------------------------------------------------------------------------- */
.pricingbox_container.bcs-hierarchy-commission-grid {
    background: #ffffff;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-on-ice);
}

.pricingbox_container.bcs-hierarchy-commission-grid .topheader {
    background: var(--color-ice);
    border-bottom: 1px solid var(--color-border-muted);
}

.pricingbox_container.bcs-hierarchy-commission-grid .topheader .formCol.pricingbox_col {
    margin: 0;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    color: var(--color-primary);
}

.pricingbox_container.bcs-hierarchy-commission-grid .formCol.pricingbox_col2 {
    margin: 0;
    padding: 0.875rem 1rem;
    vertical-align: middle;
    background-color: #ffffff;
}

.pricingbox_container.bcs-hierarchy-commission-grid .formInlineRow.pricingbox_topborder {
    background-color: transparent;
    border-bottom: 1px solid var(--color-border-muted);
}

.pricingbox_container.bcs-hierarchy-commission-grid .head {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-on-ice);
}

/* Restore visible inputs inside grid (legacy .pricingbox_container .mdInput removes chrome) */
.pricingbox_container.bcs-hierarchy-commission-grid .mdInput,
.pricingbox_container.bcs-hierarchy-commission-grid .field-input {
    background: #ffffff;
    border: 1px solid rgba(12, 27, 64, 0.32);
    box-shadow: none;
    border-radius: var(--radius-panel);
    color: var(--text-on-ice);
}

.pricingbox_container.bcs-hierarchy-commission-grid .mdInput:focus,
.pricingbox_container.bcs-hierarchy-commission-grid .field-input:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

.anmForm .pricingbox_container.bcs-hierarchy-commission-grid .formInlineRow .error .field-input {
    color: #f55858 !important;
    border-color: #f55858 !important;
}

.anmForm .pricingbox_container.bcs-hierarchy-commission-grid .formInlineRow .error .field-input::placeholder {
    color: #f55858;
}

.anmForm .pricingbox_container.bcs-hierarchy-commission-grid .formCol.success .field-input {
    border-color: var(--color-secondary) !important;
}

.bcs-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* When a summary row lives in <tfoot>, keep a separator above the footer */
.bcs-data-table:has(tfoot) tbody tr:last-child td {
    border-bottom: 1px solid var(--color-border-muted);
}

.bcs-data-table tfoot td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    background: var(--color-ice);
    border-top: 1px solid var(--color-border-muted);
    border-bottom: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted-on-ice);
}

.bcs-data-table tfoot td .msFigure {
    color: var(--text-on-ice);
}

.bcs-data-table tbody td .mName {
    color: var(--text-muted-on-ice);
}

.bcs-data-table tbody td .msFigure {
    color: var(--text-on-ice);
}

.bcs-data-table tbody a {
    color: var(--color-secondary);
    font-weight: 500;
    text-decoration: none;
}

.bcs-data-table tbody a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Text links only — real .btn anchors keep theme button hover (no underline) */
.bcs-data-table tbody a.btn {
    font-weight: 600;
    text-decoration: none;
}

.bcs-data-table tbody a.btn:hover:not(:disabled):not([aria-disabled="true"]),
.bcs-data-table tbody a.btn:focus,
.bcs-data-table tbody a.btn:focus-visible {
    text-decoration: none;
}

.bcs-data-table tbody a.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-primary);
}

/* Compact outline control inside table cells (e.g. View as) */
.bcs-data-table tbody td a.btn.btn-outline.bcs-btn-compact {
    min-height: 0;
    padding: 0.125rem 0.4375rem;
    font-size: 0.6875rem;
    line-height: 1.2;
}

.bcs-data-table tbody a.bcs-data-table__action--danger {
    color: var(--alert-danger-fg);
    font-weight: 400;
}

.bcs-data-table tbody a.bcs-data-table__action--danger:hover {
    color: color-mix(in srgb, var(--alert-danger-fg) 85%, #000000);
    text-decoration: underline;
}

/* Row actions: View | Edit | Delete — pipe between links, not inside click targets */
.bcs-data-table__action-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.25rem;
    row-gap: 0.125rem;
}

.bcs-data-table__action-links > a:not(:first-child)::before {
    content: '|';
    display: inline-block;
    margin-right: 0.25rem;
    color: var(--text-muted-on-ice);
    font-weight: 400;
    text-decoration: none;
    pointer-events: none;
}

/* Partners index: give email column room; phone stays narrow */
.bcs-data-table--partners col.bcs-data-table__col-partner-name {
    width: 22%;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-email {
    width: 34%;
}

/* Cap email display width (~28 characters); full value on hover via title */
.bcs-data-table td.bcs-data-table__cell-email-truncate,
.bcs-data-table--partners td.bcs-data-table__cell-email-truncate {
    max-width: min(100%, 28ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-phone {
    width: 14%;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-status {
    width: 12%;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-actions {
    width: 18%;
}

/* Partners index: extra air between View | Edit | Delete */
.bcs-data-table--partners .bcs-data-table__action-links {
    column-gap: 0.4rem;
    row-gap: 0.125rem;
}
.bcs-data-table--partners .bcs-data-table__action-links > a:not(:first-child)::before {
    margin-right: 0.35rem;
}

.bcs-data-table--partners col.bcs-data-table__col-partner-name--wide {
    width: 28%;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-email--wide {
    width: 40%;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-phone--wide {
    width: 16%;
}
.bcs-data-table--partners col.bcs-data-table__col-partner-status--wide {
    width: 16%;
}

/* Member row still uses legacy minty utility on icons */
.bcs-data-table .text-minty-250 {
    color: var(--color-secondary) !important;
}

.panel-ice {
    background-color: var(--color-ice);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
}

/*
 * Hero strip — title (optional filters/tools): ice-tint band above list / .panel-ice; no top ribbon, no shadow.
 */
.bcs-page-hero-strip {
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: var(--bcs-page-content-pad-block);
    padding: var(--bcs-page-hero-strip-pad-y) var(--bcs-page-hero-strip-pad-x);
    background-color: var(--color-ice);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: none;
    position: relative;
    z-index: 0;
}

.bcs-page-hero-strip:has(.tooltip:hover) {
    z-index: var(--z-tooltip-stack);
}

@media (min-width: 768px) {
    .bcs-page-hero-strip {
        padding: var(--bcs-page-hero-strip-pad-y-md) var(--bcs-page-hero-strip-pad-x-md);
    }
}

.bcs-page-hero-strip .bcs-page-header {
    margin-bottom: 0;
}

.bcs-page-hero-strip .bcs-manage-accounts-filters {
    margin-top: 1.25rem;
}

/**
 * .bcs-filter-flow — for hero strips that still use legacy formInlineRow + formCol + mdSelect
 * (e.g. Marketing). Resets flex:1 / margins on .formCol and caps dropdown width.
 * Locations uses CSS Grid + field-select-wrapper; Fee Schedules use the same dropdown partial,
 * IDs partner_id / group_id / region_id / location_id, and jquery.hierarchy-filters.js.
 */
.bcs-page-hero-strip .bcs-manage-accounts-filters.bcs-filter-flow {
    margin-top: 1rem;
}

.bcs-filter-flow .formInlineRow {
    margin-bottom: 0;
}

.bcs-filter-flow .formInlineRow .formCol {
    flex: 0 1 auto;
    margin-right: 0;
}

.bcs-filter-flow .formInlineRow .formCol:not(:last-child) {
    flex-shrink: 0;
}

.bcs-filter-flow .formInlineRow .formCol:last-child {
    flex: 0 0 auto;
    flex-shrink: 0;
}

.bcs-filter-flow .formInlineRow .mdSelectWrapper {
    width: auto;
    max-width: 100%;
}

.bcs-filter-flow .formInlineRow .formCol:not(:last-child) .mdSelectWrapper {
    min-width: 10.5rem;
    max-width: 14rem;
}

.bcs-filter-flow .formInlineRow .mdSelect {
    max-width: 100%;
}

/*
 * Apply/reset column: .styled-filter sets display:inline-flex on div:has(.btn-filter),
 * which can introduce odd vertical gaps; keep a normal flex row for .bcs-filter-flow strips.
 */
.bcs-filter-flow .formInlineRow > .formCol:last-child {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    align-self: center;
    margin-inline-start: 0.125rem;
    padding-block: 0;
}

/*
 * Hero strip — optional heading row: primary block + toolbar/actions.
 * Pin the toolbar to the inline end with .bcs-ms-auto (all breakpoints) or .bcs-ms-auto-md (md+ only).
 */
.bcs-page-hero-strip .bcs-page-hero-strip__top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

@media (min-width: 768px) {
    .bcs-page-hero-strip .bcs-page-hero-strip__top {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
        min-width: 0;
    }
}

/*
 * Optional: md+ heading + toolbar vertically centered on cross axis (single-line title, no lead).
 * Add .bcs-page-hero-strip--hero-row-y-center on the strip; reuse on any compact hero row.
 */
@media (min-width: 768px) {
    .bcs-page-hero-strip.bcs-page-hero-strip--hero-row-y-center .bcs-page-hero-strip__top > .bcs-page-header,
    .bcs-page-hero-strip.bcs-page-hero-strip--hero-row-y-center .bcs-page-hero-strip__top > .bcs-page-hero-strip__toolbar {
        align-self: center;
    }
}

.bcs-page-hero-strip.bcs-page-hero-strip--hero-row-y-center .bcs-page-header__title {
    margin-bottom: 0;
}

/* Title block grows into free space so wide toolbars don’t collide with viewport edge. */
.bcs-page-hero-strip .bcs-page-hero-strip__top > .bcs-page-header {
    flex: 1 1 auto;
    min-width: 0;
}

/* Push flex/grid items to the inline end (right in LTR). */
.bcs-ms-auto {
    margin-inline-start: auto;
}

@media (min-width: 768px) {
    .bcs-ms-auto-md {
        margin-inline-start: auto;
    }
}

.bcs-page-hero-strip .bcs-page-hero-strip__toolbar {
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
    /* Allow horizontal scroll on very narrow viewports instead of stacking or squashing */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .bcs-page-hero-strip .bcs-page-hero-strip__toolbar {
        overflow-x: visible;
        /* Stay inside hero row; inner forms can flex-wrap instead of pushing past the viewport */
        max-width: 100%;
    }
}

/* Single toolbar form spans available width while keeping controls end-aligned (justify-content on toolbar). */
.bcs-page-hero-strip .bcs-page-hero-strip__toolbar:has(> form:only-child) > form {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.bcs-page-hero-strip .bcs-page-hero-strip__toolbar form .field-input {
    min-width: 0;
    box-sizing: border-box;
}

#dashboard-account-search-form .field-input.bcs-field-input-sm {
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 8.5rem;
    width: 10.75rem;
    max-width: 15rem;
}

@media (min-width: 768px) {
    #dashboard-account-search-form .field-input.bcs-field-input-sm {
        width: 12rem;
        min-width: 9.5rem;
        max-width: 16rem;
    }
}

#dashboard-account-search-form button[type="submit"].btn-secondary {
    box-sizing: border-box;
    min-height: 2.125rem;
    padding-block: 0.4375rem;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    gap: 0.375rem;
}

.bcs-page-hero-strip .bcs-page-hero-strip__toolbar-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.bcs-page-hero-strip .bcs-page-hero-strip__toolbar-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.bcs-page-hero-strip .bcs-page-hero-strip__filters {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-muted);
}

/* Partner show — payout / brands summary (below hero) */
.bcs-partner-summary {
    box-sizing: border-box;
    margin-bottom: var(--bcs-page-content-pad-block);
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
}

.bcs-partner-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 1.25rem 1.25rem;
    align-items: start;
}

/*
 * Hierarchy hero (partner / group / region / location): brands + metrics columns.
 * Metrics live in .bcs-partner-summary__metrics so Lifetime (row 2+) never shares column 1 with brands.
 */
.bcs-partner-summary__grid--split-metrics {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    align-items: start;
}

.bcs-partner-summary__metrics {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    gap: 1.25rem; /* aligns with Tailwind gap-5 */
    /* Fill the metrics column: wrap when narrow, stretch tracks with 1fr when wide */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    align-items: start;
}

@media (min-width: 992px) {
    .bcs-partner-summary__grid--split-metrics {
        /* Brands only as wide as content; metrics use the remainder (no 1.4fr theft). */
        grid-template-columns: minmax(12rem, auto) minmax(0, 1fr);
        align-items: start;
    }

    /* Coupon / misc layouts — not split-metrics (those use two-track layout above). */
    .bcs-partner-summary__grid:not(.bcs-partner-summary__grid--split-metrics) {
        grid-template-columns: minmax(12rem, 1.4fr) repeat(4, minmax(0, 1fr));
    }
}

.bcs-partner-summary__item {
    min-width: 0;
}

.bcs-partner-summary__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted-on-ice);
}

.bcs-partner-summary__label .tooltip {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.bcs-partner-summary__value {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary);
    word-break: break-word;
}

.bcs-partner-summary__value--muted {
    font-weight: 500;
    color: var(--text-muted-on-ice);
}

.bcs-partner-summary__brands .bcs-partner-summary__value + .bcs-partner-summary__value {
    margin-top: 0.35rem;
}

/* Center metrics columns (not membership brands) */
.bcs-partner-summary__item:not(.bcs-partner-summary__brands) {
    text-align: center;
}

.bcs-partner-summary__item:not(.bcs-partner-summary__brands) .bcs-partner-summary__label {
    justify-content: center;
}

.bcs-partner-summary__item:not(.bcs-partner-summary__brands) .bcs-partner-summary__status-row {
    width: 100%;
    justify-content: center;
}

.bcs-partner-summary__status-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bcs-partner-summary__amount {
    font-variant-numeric: tabular-nums;
}

/* Partner show — summary sits inside hero (below title / lead / toolbar) */
.bcs-page-hero-strip--partner-show .bcs-page-header {
    margin-bottom: 0;
}

.bcs-page-hero-strip--partner-show .bcs-page-header__inner > .bcs-page-header__lead {
    margin-top: 0;
    margin-bottom: 1.3125rem;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--text-on-ice);
}

/* Full-width rule inside padded hero (matches bcs-checkout-member-panel header / body split) */
.bcs-page-hero-strip__divider--full-bleed {
    display: block;
    width: auto;
    height: 0;
    margin: 0 calc(-1 * var(--bcs-page-hero-strip-pad-x));
    border: 0;
    border-top: 1px solid var(--color-border-muted);
}

@media (min-width: 768px) {
    .bcs-page-hero-strip__divider--full-bleed {
        margin-left: calc(-1 * var(--bcs-page-hero-strip-pad-x-md));
        margin-right: calc(-1 * var(--bcs-page-hero-strip-pad-x-md));
    }
}

.bcs-partner-summary--in-hero {
    margin-top: 0;
    margin-bottom: 0;
    padding: 1.25rem 0 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* White panel + in-card page header (Stripe detail sections on partner show, etc.) */
.bcs-section-card {
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
    /* visible so default (above) tooltips are not clipped; see :has() stacking below */
    overflow: visible;
    position: relative;
    z-index: 0;
}

/* Lift the whole card while a tooltip is hovered (clears sibling shells — see --z-tooltip-stack) */
.bcs-section-card:has(.tooltip:hover) {
    z-index: var(--z-tooltip-stack);
}

.bcs-page-header.bcs-page-header--section-card {
    margin: 0;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border-muted);
}

.bcs-page-header--section-card .bcs-page-header__inner {
    max-width: none;
}

.bcs-page-header--section-card .bcs-page-header__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary);
}

.bcs-page-header--section-card .bcs-page-header__icon {
    font-size: 1rem;
}

.bcs-page-header--section-card .bcs-page-header__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
}

.bcs-page-header--section-card .bcs-page-header__source-id {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted-on-ice);
}

.bcs-page-header--section-card .bcs-page-header__source-id-value {
    font-size: inherit;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-primary);
}

.bcs-page-header--section-card .bcs-page-header__source-id-none {
    color: var(--text-muted-on-ice);
    font-weight: 600;
}

.bcs-section-card__body {
    box-sizing: border-box;
    padding: 1.25rem 1.25rem 1.5rem;
    background: #ffffff;
}

/* Section card + BCS data table: table flush to header and card edges (no inner box) */
.bcs-section-card--flush-data-table .bcs-section-card__body {
    padding: 0;
}

.bcs-section-card--flush-data-table .bcs-data-table-wrap {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.bcs-readonly-row {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem;
}

.bcs-readonly-row__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted-on-ice);
    margin: 0;
    line-height: 1.25;
}

.bcs-readonly-row__value {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bcs-section-card__body .bcs-readonly-row__value {
    margin: 0;
}

.bcs-section-card__body a.bcs-readonly-link:hover {
    color: var(--color-primary);
}

.bcs-section-card__body a.bcs-readonly-link:focus-visible {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}

/* Space between field groups (label+value stacks), not within */
.bcs-section-card__body .bcs-readonly-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bcs-section-card__body .bcs-readonly-grid {
    gap: 1.25rem 2rem;
}

@media (min-width: 768px) {
    .bcs-section-card__body .bcs-readonly-grid {
        gap: 1.5rem 2rem;
    }
}

/* Current balance section card — amounts use primary (overrides legacy .identityTab.currentBalanceTab .lbtAmount) */
.bcs-section-card.currentBalanceTab .bcs-readonly-row__value.lbtAmount {
    color: var(--color-primary);
}

/* Debit negative balances — center label inside chip (legacy .badge-boxy uses min-width + inline-block) */
.bcs-section-card.currentBalanceTab .bcs-readonly-row--debit-negative-status .bcs-readonly-row__value--status-chip {
    display: inline-flex;
    align-items: center;
}

.bcs-section-card.currentBalanceTab .bcs-readonly-row--debit-negative-status .bcs-readonly-row__value--status-chip .badge.badge-boxy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.3125rem 0.75rem;
    line-height: 1.25;
}

.bcs-report-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--color-ice) 55%, #fff);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
}

.bcs-report-type-switch__item {
    box-sizing: border-box;
    display: block;
    text-align: center;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-muted);
    background: #fff;
    color: var(--color-secondary);
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.bcs-report-type-switch__item:hover:not(.is-active) {
    border-color: color-mix(in srgb, var(--color-secondary) 35%, var(--color-border-muted));
    color: var(--color-primary);
}

.bcs-report-type-switch__item.is-active {
    cursor: default;
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--text-on-secondary);
}

.bcs-report-type-switch__item.is-active:hover {
    color: var(--text-on-secondary);
}

.anm-create-account-shell .anmForm .formBody {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
}

/* Plan create: extra space below Marketplace before Hierarchy Commission (legacy fieldset margin: 0 0 35px is tight) */
.panel-ice.anm-create-account-shell .anmForm .formBody fieldset.bcs-plan-section-above-hierarchy {
    margin-bottom: 2.5rem;
}

.anm-create-account-shell .anmForm .formFooter {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-muted);
}

/* Form section header actions (Associate Group, Update Subscriptions, …) */
.anm-create-account-shell .form-header__after a {
    color: var(--color-secondary);
}

.anm-create-account-shell .form-header__after a:hover {
    color: var(--color-primary);
}

/* Toolbar actions use .btn; keep CTA colors (link crumb styles above are more specific on bare <a>) */
.anm-create-account-shell .form-header__after a.btn.btn-secondary {
    color: var(--text-on-secondary);
}

.anm-create-account-shell .form-header__after a.btn.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--text-on-secondary);
}

.anm-create-account-shell .form-header__after a.btn.btn-soft {
    color: var(--color-primary);
}

.anm-create-account-shell .form-header__after a.btn.btn-soft:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-primary);
}

/* Create New Account — legacy #006786 → theme secondary; header & body links → primary */
.bcs-create-account-page .bcs-page-header a {
    color: var(--color-primary);
}

.bcs-create-account-page .bcs-page-header a:hover {
    color: var(--color-secondary);
}

/* Header footnote info tooltip: bubble uses light-on-secondary; beat generic header link colors above. */
.bcs-create-account-page .bcs-page-header .tooltip .tooltip__panel a {
    color: rgba(255, 255, 255, 0.98);
}

.bcs-create-account-page .bcs-page-header .tooltip .tooltip__panel a:hover {
    color: #ffffff;
}

/* Long footnote tooltip — cap width when slot wraps long copy */
.bcs-create-account-page .bcs-page-header__footnote .tooltip .tooltip__panel {
    max-width: min(22.5rem, 92vw);
}

.anm-create-account-shell #create_new_member .mdSelectWrapper.success {
    border-color: var(--color-secondary) !important;
}

.anm-create-account-shell #create_new_member .mdInput.success,
.anm-create-account-shell #create_new_member .inputnodesign.success {
    border-color: var(--color-secondary) !important;
}

.anm-create-account-shell #formValidation .mdSelectWrapper.success {
    border-color: var(--color-secondary) !important;
}

.anm-create-account-shell #formValidation .mdInput.success,
.anm-create-account-shell #formValidation .inputnodesign.success {
    border-color: var(--color-secondary) !important;
}

/* Annual / Monthly — fake radio circle uses secondary (legacy #49d2c3) */
.anm-create-account-shell .anmForm .mdFakeLabelRadio .mdFakeLabel:after {
    background-color: var(--color-secondary);
}

.anm-create-account-shell .anmForm .mdFakeLabelRadio input:checked + .mdFakeLabel:before {
    border-color: var(--color-secondary);
}

/* Clerri Connect / Payments: keep fee rows on a flex axis (Bootstrap .d-block on .formCol was overriding display:flex) */
.anm-create-account-shell.panel-ice .formCol.membersy-commission {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
}

.anm-create-account-shell.panel-ice .membersy-commission .mainlabel,
.anm-create-account-shell.panel-ice .membersy-commission .formFieldTitle.mainlabel {
    min-width: min(12rem, 100%);
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-on-ice);
    margin-bottom: 0;
}

.anm-create-account-shell.panel-ice .membersy-commission .txt {
    color: var(--text-muted-on-ice);
    font-size: 0.875rem;
}

.anm-create-account-shell.panel-ice .membersy-commission .mdFakeLabelRadio {
    margin-bottom: 0;
}

.anm-create-account-shell.panel-ice .bcs-fee-fieldset .formInlineRow:last-child {
    margin-bottom: 0;
}

/* Footer: match outline + primary + secondary size */
.anm-create-account-shell .anmForm .formFooter .btn.btn-outline,
.anm-create-account-shell .anmForm .formFooter .btn.btn-primary,
.anm-create-account-shell .anmForm .formFooter .btn.btn-secondary {
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0.5rem 2rem;
    line-height: 1.25rem;
}

/* Footer & shell: undo legacy .btn:hover opacity for themed variants */
.anm-create-account-shell .btn.btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
.anm-create-account-shell .btn.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.anm-create-account-shell .btn.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
    opacity: 1;
}

.anm-create-account-shell .slidboxcoupon .btn.btn-secondary {
    margin-left: 10px;
}

/* Coupon partial: input + buttons row uses gap; undo shell margin-left; match .field-input height */
.bcs-coupon-section .slidboxcoupon .btn.btn-secondary {
    margin-left: 0 !important;
    min-height: 0;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 23px;
}

/* Add Coupon toggle: colors via .text-secondary / .hover:text-primary / .focus:text-primary; only margin isn’t a theme utility */
.opencoupn.bcs-add-coupon-toggle {
    margin: 0;
}

/* Validation success borders inside shell remain theme secondary (accent focus rings removed — use legacy focus in style.css) */
.anm-create-account-shell .anmForm .inputOuterBorder.success {
    border-color: var(--color-secondary);
}

/* Parent .success (legacy teal #49d2c3 from style.css → secondary) */
.anm-create-account-shell .success .mdInput,
.anm-create-account-shell .success .mdSelect {
    border-color: var(--color-secondary) !important;
}

/* Active/focus state — match .field-input ring (overrides bare outline:0 from style.css) */
.anm-create-account-shell .mdInput:focus,
.anm-create-account-shell .mdSelect:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

/* DOB wrapper and Stripe card wrapper: ring when focused */
.anm-create-account-shell .inputOuterBorder:focus-within,
.anm-create-account-shell .inputOuterBorder.stripe-focused {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent);
}

/* ---------------------------------------------------------------------------
   Marketing-style blocks — ribbon card + stat strip (sharp edges)
   --------------------------------------------------------------------------- */
.bcs-card-ribbon {
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
    border-top-width: var(--ribbon-thickness);
    border-top-style: solid;
    padding: 1.25rem 1.25rem 1.5rem;
}

.bcs-card-ribbon__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.bcs-card-ribbon__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted-on-ice);
}

.bcs-card-ribbon--primary {
    border-top-color: var(--color-primary);
}

.bcs-card-ribbon--accent {
    border-top-color: var(--color-accent);
}

.bcs-card-ribbon--highlight {
    border-top-color: var(--color-highlight);
}

.bcs-card-ribbon--secondary {
    border-top-color: var(--color-secondary);
}
.bcs-brand-feature {
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
}

.bcs-brand-feature .bcs-card-ribbon {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--color-border-muted);
    border-right: 1px solid var(--color-border-muted);
    border-top: var(--ribbon-thickness) solid;
    border-bottom: 1px solid var(--color-border-muted);
    box-shadow: none;
}

.bcs-brand-feature .bcs-card-ribbon.bcs-card-ribbon--primary {
    border-top-color: var(--color-primary);
}

.bcs-brand-feature .bcs-card-ribbon.bcs-card-ribbon--accent {
    border-top-color: var(--color-accent);
}

.bcs-brand-feature .bcs-card-ribbon.bcs-card-ribbon--highlight {
    border-top-color: var(--color-highlight);
}

.bcs-brand-feature .bcs-card-ribbon.bcs-card-ribbon--secondary {
    border-top-color: var(--color-secondary);
}
    box-sizing: border-box;
    background: var(--color-primary);
    color: var(--text-on-primary);
    padding: 1rem 1.25rem 1.25rem;
}

.bcs-stat-strip__value {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-highlight);
}

.bcs-stat-strip__label {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.95;
}

/* ---------------------------------------------------------------------------
   Page header — replaces legacy .bannerSec + .txtWrap on themed flows (no side border)
   --------------------------------------------------------------------------- */
.bcs-page-content-pad {
    box-sizing: border-box;
    padding-block: var(--bcs-page-content-pad-block);
    padding-inline: var(--bcs-page-content-pad-inline);
}

.bcs-page-header {
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 2.25rem;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}


.bcs-page-header__inner {
    box-sizing: border-box;
    padding: 0;
}

.bcs-page-header__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.bcs-page-header__heading-row .bcs-page-header__title {
    margin-bottom: 0;
}

.bcs-page-header__status-badge {
    flex-shrink: 0;
}

.bcs-page-header__title {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    /* flex-wrap: default nowrap — add Tailwind class .flex-wrap on the title where a multi-line hero title is intentional */
    gap: 0.5rem;
}

.bcs-page-header__icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-secondary);
}

.bcs-page-header__lead {
    margin: -2px 0 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted-on-ice);
    font-weight: 400;
}

.bcs-page-header__footnote {
    margin: -2px 0 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted-on-ice);
}

.bcs-page-header__footnote:last-child,
.bcs-page-header__lead:last-child {
    margin-bottom: 0;
}

/* Parent org (e.g. partner above group title on ice hero strips) */
.bcs-page-header__context-parent {
    margin: 0 0 0.625rem;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.35;
    color: var(--text-muted-on-ice);
    text-transform: uppercase;
}

.bcs-page-header__context-parent-text {
    color: inherit;
}

.bcs-page-header .bcs-page-header__context-parent-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

.bcs-page-header .bcs-page-header__context-parent-link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 0.125em;
}

.bcs-page-header .bcs-page-header__context-parent-link:focus-visible {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}

/* Hierarchy chain (e.g. partner › group above region title) */
.bcs-page-header__context-chain {
    box-sizing: border-box;
    margin: 0 0 0.625rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.35;
    color: var(--text-muted-on-ice);
    text-transform: uppercase;
}

.bcs-page-header__context-chain-text {
    color: inherit;
}

.bcs-page-header__context-chain-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    font-size: 0.8125rem;
    line-height: 1;
    color: inherit;
}

.bcs-page-header .bcs-page-header__context-chain-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

.bcs-page-header .bcs-page-header__context-chain-link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 0.125em;
}

.bcs-page-header .bcs-page-header__context-chain-link:focus-visible {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}

.bcs-page-header a {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
}

.bcs-page-header a:hover {
    color: var(--color-primary);
}

.bcs-page-header a:focus-visible {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}

/*
 * Header default link styling uses --color-secondary; solid .btn-secondary uses the same for
 * its background, so without this override the label matches the fill and disappears.
 */
.bcs-page-header a.btn {
    text-decoration: none;
    font-weight: 600;
}

.bcs-page-header a.btn-primary {
    color: var(--text-on-primary);
}

.bcs-page-header a.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--text-on-primary);
}

.bcs-page-header a.btn-secondary {
    color: var(--text-on-secondary);
}

.bcs-page-header a.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--text-on-secondary);
}

.bcs-page-header a.btn-accent {
    color: var(--text-on-accent);
}

.bcs-page-header a.btn-accent:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--text-on-accent);
}

.bcs-page-header a.btn-outline {
    color: var(--color-primary);
}

.bcs-page-header a.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-primary);
}

.bcs-page-header a.btn-ghost {
    color: var(--color-primary);
}

.bcs-page-header a.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-primary);
}

/* Tooltip bubble + icon — brand secondary (overrides legacy teal #006F91 in style.css) */
.tooltip {
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
}

.tooltip span {
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
    z-index: var(--z-tooltip-bubble);
}

/* x-tooltip uses a div.panel so nested <span>s are not styled as a second bubble */
.tooltip .tooltip__panel {
    width: auto;
    transition: opacity ease 0.3s;
    position: absolute;
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
    bottom: 100%;
    left: 50%;
    font-weight: normal;
    font-size: 11px !important;
    padding: 8px 15px 6px;
    border-radius: 3px;
    transform: translateX(-50%);
    margin: 0 0 9px;
    opacity: 0;
    visibility: hidden;
    display: block;
    z-index: var(--z-tooltip-bubble);
    box-sizing: border-box;
    /* Inherited word-break from tables/layout parents must not apply (per-character line stacking). */
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
}

.tooltip span::after {
    border-color: var(--color-secondary) transparent transparent transparent;
}

.tooltip .tooltip__panel::after {
    width: 0;
    height: 0;
    top: 100%;
    left: 50%;
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: var(--color-secondary) transparent transparent transparent;
    transform: translateX(-50%);
}

.tooltip:hover .tooltip__panel {
    opacity: 1;
    visibility: visible;
}

/* Legacy span bubble (e.g. legends); x-tooltip uses .tooltip__panel. */
.tooltip:hover > span {
    opacity: 1;
    visibility: visible;
}

.tooltip.tooltip-bottom span::after {
    border-color: transparent transparent var(--color-secondary) transparent;
}

.tooltip.tooltipLight {
    background-color: var(--color-secondary);
}

.tooltip.tooltipLight:hover {
    background-color: var(--color-secondary);
}

.tooltip.content {
    color: var(--color-secondary);
}

.tooltip.tooltip-minimal {
    color: var(--color-secondary);
}

.tooltip.tooltip-minimal .tooltip__panel {
    text-transform: initial;
    padding: 6px 13px 4px;
}

.tooltip.ttlpV2 {
    color: var(--color-secondary);
}

.tooltip a:hover {
    color: var(--color-accent);
}

/* Flyout to the right of trigger — avoids clip from overflow:hidden (e.g. .bcs-data-table-wrap) */
/* Direct child only: legacy markup uses .tooltip > span; x-tooltip uses .tooltip > .tooltip__panel */
.tooltip.tooltip-flyout-right > span,
.tooltip.tooltip-flyout-right > .tooltip__panel {
    bottom: auto;
    top: 50%;
    left: 100%;
    right: auto;
    transform: translateY(-50%);
    margin: 0 0 0 10px;
    z-index: var(--z-tooltip-bubble);
    white-space: normal;
    text-align: left;
    max-width: min(280px, 70vw);
    /*
     * .bcs-data-table tbody td sets word-break/overflow-wrap for cell content; those inherit into
     * this absolutely positioned bubble and can force one-character “lines” for tooltips (e.g. email on manage-accounts).
     */
    word-break: normal;
    overflow-wrap: break-word;
    text-transform: none;
    min-width: min(12rem, 85vw);
    box-sizing: border-box;
}

.tooltip.tooltip-flyout-right > span::after,
.tooltip.tooltip-flyout-right > .tooltip__panel::after {
    top: 50%;
    left: 0;
    bottom: auto;
    margin: 0;
    transform: translate(-100%, -50%);
    border-width: 5px 6px 5px 0;
    border-color: transparent var(--color-secondary) transparent transparent;
}

.tooltip.tooltip-flyout-right > span.bcs-tooltip-nowrap {
    white-space: nowrap;
    max-width: none;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

/*
 * Flyout top-right — bubble above trigger (`bottom: 100%`), extending mostly to the right.
 * Caret tip stays on trigger horizontal center: bubble `left = 50% − arrowHalf − shift`, caret `left = shift`.
 * Extra `shift` nudges the box left without moving the notch off-center (reads less “heavy” on the right).
 */
.tooltip.tooltip-flyout-top-right > span,
.tooltip.tooltip-flyout-top-right > .tooltip__panel {
    --tooltip-ftr-box-nudge: 12px;
    bottom: 100%;
    top: auto;
    left: calc(50% - 5px - var(--tooltip-ftr-box-nudge));
    right: auto;
    transform: none;
    margin: 0 0 10px;
    z-index: var(--z-tooltip-bubble);
    white-space: normal;
    text-align: left;
    max-width: min(280px, 70vw);
    word-break: normal;
    overflow-wrap: break-word;
    text-transform: none;
    min-width: min(12rem, 85vw);
    box-sizing: border-box;
}

.tooltip.tooltip-flyout-top-right > span::after,
.tooltip.tooltip-flyout-top-right > .tooltip__panel::after {
    width: 0;
    height: 0;
    content: "";
    position: absolute;
    top: 100%;
    left: var(--tooltip-ftr-box-nudge);
    right: auto;
    bottom: auto;
    margin: 0;
    transform: none;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: var(--color-secondary) transparent transparent transparent;
}

.tooltip.tooltip-flyout-top-right > span.bcs-tooltip-nowrap {
    white-space: nowrap;
    max-width: none;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

/*
 * Flyout top-left — bubble above trigger, extending mostly to the left (mirror of .tooltip-flyout-top-right).
 * Caret tip on trigger horizontal center; --tooltip-ftl-box-nudge shifts the box right without moving the notch.
 */
.tooltip.tooltip-flyout-top-left > span,
.tooltip.tooltip-flyout-top-left > .tooltip__panel {
    --tooltip-ftl-box-nudge: 12px;
    bottom: 100%;
    top: auto;
    left: auto;
    right: calc(50% - 5px - var(--tooltip-ftl-box-nudge));
    transform: none;
    margin: 0 0 10px;
    z-index: var(--z-tooltip-bubble);
    white-space: normal;
    text-align: left;
    max-width: min(280px, 70vw);
    word-break: normal;
    overflow-wrap: break-word;
    text-transform: none;
    min-width: min(12rem, 85vw);
    box-sizing: border-box;
}

.tooltip.tooltip-flyout-top-left > span::after,
.tooltip.tooltip-flyout-top-left > .tooltip__panel::after {
    width: 0;
    height: 0;
    content: "";
    position: absolute;
    top: 100%;
    left: auto;
    right: var(--tooltip-ftl-box-nudge);
    bottom: auto;
    margin: 0;
    transform: none;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: var(--color-secondary) transparent transparent transparent;
}

.tooltip.tooltip-flyout-top-left > span.bcs-tooltip-nowrap {
    white-space: nowrap;
    max-width: none;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

/* Flyout to the left of trigger — mirrors .tooltip-flyout-right */
.tooltip.tooltip-flyout-left > span,
.tooltip.tooltip-flyout-left > .tooltip__panel {
    bottom: auto;
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%);
    margin: 0 10px 0 0;
    z-index: var(--z-tooltip-bubble);
    white-space: normal;
    text-align: left;
    max-width: min(280px, 70vw);
    word-break: normal;
    overflow-wrap: break-word;
    text-transform: none;
    min-width: min(12rem, 85vw);
    box-sizing: border-box;
}

.tooltip.tooltip-flyout-left > span::after,
.tooltip.tooltip-flyout-left > .tooltip__panel::after {
    top: 50%;
    right: 0;
    left: auto;
    bottom: auto;
    margin: 0;
    transform: translate(100%, -50%);
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--color-secondary);
}

.tooltip.tooltip-flyout-left > span.bcs-tooltip-nowrap {
    white-space: nowrap;
    max-width: none;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

/*
 * Only while hovered: legacy `style.css` `.tooltip span` targets descendant spans as a second bubble.
 * Applying visibility:visible unconditionally broke collapsed panels (nested spans could paint on the page).
 */
.tooltip:hover .tooltip__panel span {
    position: static;
    width: auto !important;
    min-width: 0;
    max-width: none;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    color: inherit !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    display: inline !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

.tooltip:hover .tooltip__panel span::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* x-tooltip position=bottom: panel opens below; center under trigger so tail aligns with icon */
.tooltip.tooltip-bottom > .tooltip__panel {
    bottom: auto;
    top: 100%;
    margin: 9px 0 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: var(--z-tooltip-bubble);
}

.tooltip.tooltip-bottom > .tooltip__panel::after {
    top: auto;
    bottom: 100%;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent var(--color-secondary) transparent;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.bcs-page-header .tooltip span a,
.bcs-page-header .tooltip .tooltip__panel a {
    color: rgba(255, 255, 255, 0.98);
}

.bcs-page-header .tooltip span a:hover,
.bcs-page-header .tooltip .tooltip__panel a:hover {
    color: #ffffff;
}

.badge.badge-boxy {
    border-radius: var(--radius-panel);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.2;
    border: 1px solid transparent;
    box-sizing: border-box;
}

/* Dense inline chips — stacks with .badge-boxy + semantic color; overrides legacy min-width/padding from style.css */
.badge.badge-boxy.badge-xs {
    font-size: 0.6875rem;
    line-height: 1.15;
    font-weight: 600;
    padding: 0.125rem 0.4375rem;
    min-width: 0;
}

/* Compact capsule beside headings — full pill radius (beats legacy boxed .badge-boxy corners). */
.badge.badge-boxy.badge-count-capsule {
    border-radius: 9999px !important;
    min-width: 1.375rem;
    min-height: 1.375rem;
    padding: 0.25rem 0.5625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.badge.badge-primary {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    border-color: transparent;
}

/* Royal blue chip (matches --color-secondary) */
.badge.badge-secondary {
    background-color: var(--color-secondary);
    color: var(--text-on-secondary);
    border-color: transparent;
}

.badge.badge-accent {
    background-color: var(--color-accent);
    color: var(--text-on-primary);
    border-color: transparent;
}

.badge.badge-highlight {
    background-color: var(--color-highlight);
    color: var(--text-on-highlight);
    border-color: transparent;
}

/* Ice surface chip (foreground text stronger than neutral badge) */
.badge.badge-ice {
    background-color: var(--color-ice);
    color: var(--text-on-ice);
    border-color: var(--color-border-muted);
}

.badge.badge-danger {
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-fg);
    border-color: var(--alert-danger-border);
}

.badge.badge-orange {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-fg);
    border-color: var(--alert-warning-border);
}

/* Feature off / informational status (e.g. transfers & payouts disabled — distinct from gray neutral) */
.badge.badge-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-fg);
    border-color: var(--alert-info-border);
}

/* Success / positive outcome — payment cleared, subscription ACTIVE Current chip */
.badge.badge-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-fg);
    border-color: var(--alert-success-border);
}

.badge.badge-subscription,
.badge.badge-violet {
    background-color: #ede9fe;
    color: #5b21b6;
    border-color: #c4b5fd;
}

.badge.badge-teal {
    background-color: #ccfbf1;
    color: #115e59;
    border-color: #5eead4;
}

.badge.badge-rose {
    background-color: #ffe4e6;
    color: #9f1239;
    border-color: #fda4af;
}

.badge.badge-indigo {
    background-color: #e0e7ff;
    color: #3730a3;
    border-color: #a5b4fc;
}

.badge.badge-gold {
    background-color: #fef9c3;
    color: #713f12;
    border-color: #fde047;
}

.badge.badge-slate {
    background-color: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

/* Neutral / ice muted */
.badge.badge-gray,
.badge.badge-neutral {
    background-color: var(--color-ice);
    color: var(--text-muted-on-ice);
    border-color: var(--color-border-muted);
}

/* ---------------------------------------------------------------------------
   Checkout session profile (members.show-checkout-session)
   --------------------------------------------------------------------------- */

/* Member summary shell — one section card (header + detail body) */
#bcs-checkout-member-shell {
    margin-bottom: 1.5rem;
    /* Below hovered .bcs-section-card tooltips (--z-tooltip-stack). Select2 dropdowns inside
       this shell use z-index ~1100 so they still open above sibling panels. */
    position: relative;
    z-index: 30;
}

#bcs-checkout-member-shell > .bcs-section-card {
    margin-bottom: 0;
}

/* Partner-show hero strip parity: ice shell (section-card defaults to white) */
#bcs-checkout-member-summary-card.bcs-checkout-member-panel.bcs-section-card {
    background-color: var(--color-ice);
    box-shadow: none;
}

.bcs-checkout-member-panel .bcs-checkout-member-panel__body.bcs-section-card__body {
    padding: 0;
    background-color: var(--color-ice);
}

.bcs-checkout-member-panel .bcs-checkout-member-panel__chrome.bcs-page-header--section-card {
    padding: 0;
    margin: 0;
    background-color: var(--color-ice);
}

.bcs-checkout-member-panel .bcs-checkout-member-panel__chrome .bcs-checkout-member-panel__header {
    border-bottom: none;
}

.bcs-checkout-member-panel .bcs-checkout-member-panel__header a.fancybox {
    text-decoration: none;
}

.bcs-checkout-member-panel .bcs-checkout-member-panel__header a.fancybox:hover,
.bcs-checkout-member-panel .bcs-checkout-member-panel__header a.fancybox:focus {
    text-decoration: none;
}

/*
 * Verification Select2 (statusTooltip) — dropdown must clear following panels and match open container.
 * Base .statusTooltip .mdSelectWrapper2 uses z-index: 1050 which is beat by later section cards in the page.
 */
#bcs-checkout-member-shell .statusTooltip .mdSelectWrapper2 {
    z-index: 1090;
}

#bcs-checkout-member-shell .select2-container--open.select2-container--default,
#bcs-checkout-member-shell .select2-dropdown.statusDropdown {
    z-index: 1100 !important;
}

/* Verification mini-select: open border + label use theme secondary. Chevron mimics legacy PNG (small gray) but rotates when open. */
#bcs-checkout-member-shell .mdSelectWrapper2 .select2.select2-container.select2-container--open .select2-selection {
    border-color: var(--color-secondary) !important;
}

#bcs-checkout-member-shell .select2-container--open.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-secondary) !important;
}

/* Less dead space before chevron than default 23px / 20px arrow strip */
#bcs-checkout-member-shell .mdSelectWrapper2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 16px !important;
}

#bcs-checkout-member-shell .mdSelectWrapper2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: none no-repeat center !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: 14px !important;
    min-width: 14px;
    right: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tiny down-chevron (~legacy bitmap); toggles direction + matches secondary when open */
#bcs-checkout-member-shell .mdSelectWrapper2 .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 3.5px 0 3.5px;
    border-color: #58595b transparent transparent;
    transform-origin: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

#bcs-checkout-member-shell .mdSelectWrapper2 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: rotate(180deg);
    border-color: var(--color-secondary) transparent transparent;
}

#bcs-checkout-member-shell .mdSelectWrapper2 .select2-container--default:not(.select2-container--open) .select2-selection--single .select2-selection__arrow::after {
    transform: none;
    border-color: #58595b transparent transparent;
}

/* Subscription summary table — give plan name column room; pinch money columns */
#bcs-checkout-session-subscription .bcs-checkout-session-sub-sum-table {
    table-layout: fixed;
}

#bcs-checkout-session-subscription .bcs-checkout-session-sub-sum__col--subscription {
    width: 42%;
}

#bcs-checkout-session-subscription .bcs-checkout-session-sub-sum__col--frequency {
    width: 12%;
}

#bcs-checkout-session-subscription .bcs-checkout-session-sub-sum__col--billing {
    width: 12%;
}

#bcs-checkout-session-subscription .bcs-checkout-session-sub-sum__col--money {
    width: 13%;
    max-width: 7.25rem;
    text-align: left;
}

@media (max-width: 767px) {
    #bcs-checkout-session-subscription .bcs-checkout-session-sub-sum__col--money {
        max-width: 6.25rem;
    }
}

#bcs-checkout-session-subscription .bcs-checkout-session-sub-sum__col--action {
    width: 8%;
    max-width: 4.75rem;
}

/* Expandable pricing drawer under flush subscription table */
.bcs-checkout-session-pricing-panel {
    border-top: 1px solid var(--color-border-muted, rgba(12, 27, 64, 0.12));
    box-sizing: border-box;
}

/* Member show — Subscription Details: actions row below title (full width); align with heading */
#member-subscription-details-section .member-subscription-header-actions .tabActionList {
    justify-content: flex-start;
}

/* Member show — Payments: slightly tighter header strip than default section-card (1rem / 1.25rem) */
#member-payments-section > header.bcs-page-header--section-card {
    padding: 0.875rem 1.125rem;
}

#member-payments-section .bcs-page-header__inner {
    row-gap: 0.625rem;
    column-gap: 1rem;
}

#member-payments-section .bcs-page-header__inner > .flex.flex-col {
    gap: 0.375rem;
}

/*
 * Member show — Payments header: compact default card/bank preview (narrow strip beside title).
 * Keeps icon + default badge aligned without leaning on global partial styles.
 */
#member-payments-section .member-payments-default-method {
    font-size: 0.6875rem;
    line-height: 1.25;
}

#member-payments-section .member-payments-default-method > .flex {
    gap: 0.375rem;
}

#member-payments-section .member-payments-default-method svg {
    height: 28px !important;
    width: 28px !important;
    flex-shrink: 0;
}

#member-payments-section .member-payments-default-method .fa-university {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
}

#member-payments-section .member-payments-default-method .mt-n1 {
    margin-top: 0 !important;
}

/* Member profile — Payments: Method column (card/bank rows need space vs fixed table layout) */
#member-payments-table th:nth-child(3),
#member-payments-table td:nth-child(3) {
    min-width: 13rem;
    width: 26%;
}

/* Member profile — Activity History: tight Date column (m-d-Y only); Description keeps remainder */
#member-activity-history-table th:nth-child(1),
#member-activity-history-table td:nth-child(1) {
    width: 5.75rem;
    max-width: 6rem;
    min-width: 0;
    white-space: nowrap;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

#member-activity-history-table th:nth-child(2),
#member-activity-history-table td:nth-child(2) {
    width: auto;
    min-width: 0;
}

/* Member profile — Notes: same column intent as Activity History (date + long text) */
#member-notes-table th:nth-child(1),
#member-notes-table td:nth-child(1) {
    width: 7.25rem;
    max-width: 8rem;
    white-space: nowrap;
    box-sizing: border-box;
}

#member-notes-table th:nth-child(2),
#member-notes-table td:nth-child(2) {
    width: auto;
    min-width: 0;
}

/* Empty state: single colspan cell is :nth-child(1), so undo date-column constraints + add breathing room */
#member-notes-section #member-notes-table tbody td.member-notes-table__empty {
    width: auto;
    max-width: none;
    white-space: normal;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Add Note modal: stack field vertically (legacy .formCol is row-flex; label sat beside textarea) */
.fancyboxpopup-member-add-note.fancyboxpopup .formInlineRow {
    align-items: stretch;
}

.fancyboxpopup-member-add-note.fancyboxpopup .formInlineRow .formCol {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
}

.bcs-coupon-messages:not(:empty) {
    margin-top: 0.625rem;
}

/* Add Dependents modal — narrower width (default reactiveinactivesmall is 1010px) */
.fancyboxpopup-member-add-dependents.fancyboxpopup.reactiveinactive.reactiveinactivesmall {
    width: min(100%, 900px);
    max-width: 900px;
}

.fancyboxpopup-member-add-dependents .bcs-coupon-panel .coupon-code-field.field-input {
    border-color: rgba(12, 27, 64, 0.28);
}

.fancyboxpopup-member-add-dependents .bcs-dependent-card-section {
    position: relative;
    z-index: 0;
    clear: both;
}

/* Add Dependents — dynamically injected dependent rows use field-label + field-input */
.fancyboxpopup-member-add-dependents #members .field-input:not(:disabled),
.fancyboxpopup-member-add-dependents .max-w-420 > .field-input:not(:disabled) {
    border-color: rgba(12, 27, 64, 0.28);
}

.fancyboxpopup-member-add-dependents #members .formCol.error .field-input:not(:disabled),
.fancyboxpopup-member-add-dependents .mb-4.error .field-input:not(:disabled) {
    border-color: #f55858;
}

.fancyboxpopup-member-add-dependents #members .formCol.success .field-input:not(:disabled),
.fancyboxpopup-member-add-dependents .mb-4.success .field-input:not(:disabled) {
    border-color: #49d2c3;
}

.fancyboxpopup-member-add-dependents .inputOuterBorder.containInputJquery.bcs-dependent-dob-wrap {
    margin-left: 0 !important;
    padding: 8px 12px !important;
    border-color: rgba(12, 27, 64, 0.28);
}

.fancyboxpopup-member-add-dependents .bcs-dependent-pay-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-start;
}

.fancyboxpopup-member-add-dependents .bcs-dependent-pay-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    max-width: 100%;
}

.fancyboxpopup-member-add-dependents .bcs-dependent-pay-radio__text .mdFakeLabel:before,
.fancyboxpopup-member-add-dependents .bcs-dependent-pay-radio__text .mdFakeLabel:after {
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

.fancyboxpopup-member-add-dependents .bcs-dependent-pay-radio__input {
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    accent-color: var(--color-secondary);
}

.fancyboxpopup-member-add-dependents .bcs-dependent-pay-radio__text {
    min-width: 0;
    line-height: 1.4;
}


/* Member profile — Commission Distributions: empty state padding */
#member-commission-distributions-section #member-commission-distributions-table tbody td.member-commission-distributions-table__empty {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

#member-commission-distributions-table .commission-distribution-amount--credit {
    color: var(--alert-success-fg);
}

#member-commission-distributions-table .commission-distribution-amount--debit {
    color: var(--alert-danger-fg);
}

/* ---------------------------------------------------------------------------
   Surface tiles (.bcs-surface-tile*) — compact readonly cells inside card bodies
   --------------------------------------------------------------------------- */
.bcs-surface-tile {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 1rem 1.125rem;
    background: var(--color-ice);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-panel);
}

.bcs-surface-tile--plain {
    background: #ffffff;
}

.bcs-surface-tile--secondary-soft {
    background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-ice));
    border-color: color-mix(in srgb, var(--color-secondary) 28%, transparent);
}

.bcs-surface-tile--info-soft {
    background: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--color-primary);
}

.bcs-surface-tile--success-soft {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

.bcs-surface-tile__eyebrow {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.0625em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--text-muted-on-ice);
}

.bcs-surface-tile__primary {
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bcs-surface-tile__meta {
    color: var(--text-muted-on-ice);
    font-weight: 500;
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Simple pagination (Prev | Next) — pagination::pagination-bcs
   (rendered only when $paginator->hasPages())
   --------------------------------------------------------------------------- */
.bcs-pagination {
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-muted-on-ice);
}

.bcs-pagination__ctrl {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.125rem;
    border-radius: var(--radius-button);
    text-decoration: none;
    white-space: nowrap;
}

.bcs-pagination__ctrl--link {
    color: var(--color-secondary);
    cursor: pointer;
    transition: color var(--btn-duration) var(--btn-ease);
}

.bcs-pagination__ctrl--link:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bcs-pagination__ctrl--link:focus-visible {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}

.bcs-pagination__ctrl--disabled {
    color: var(--text-muted-on-ice);
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: none;
}

.bcs-pagination__sep {
    color: var(--color-border-muted);
    font-weight: 500;
    user-select: none;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   App shell — sidebar + main gutter (overrides legacy #002920 in style.css)
   --------------------------------------------------------------------------- */
.offsetWrapper {
    background-color: var(--color-primary);
}

#pageHeader {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
}

/* Sidebar nav — hover and focus use accent text and ring */
#pageHeader .navbarList > li > a:hover {
    color: var(--color-accent);
    background-color: transparent;
}

#pageHeader .navbarList > li > a:hover .mdIcn {
    color: var(--color-accent);
}

#pageHeader .navbarList > li > a:focus-visible {
    color: var(--color-accent);
    background-color: transparent;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#pageHeader .navbarList > li > a:focus-visible .mdIcn {
    color: var(--color-accent);
}

/* Mouse click keeps :focus without :focus-visible — mirror hover (avoid legacy lavender #A0B1F3) */
#pageHeader .navbarList > li:not(.active) > a:focus:not(:focus-visible),
#pageHeader .navbarList > li:not(.active) > a:focus:not(:focus-visible):hover {
    color: var(--color-accent);
    background-color: transparent;
    outline: none;
}

#pageHeader .navbarList > li:not(.active) > a:focus:not(:focus-visible) .mdIcn,
#pageHeader .navbarList > li:not(.active) > a:focus:not(:focus-visible):hover .mdIcn {
    color: var(--color-accent);
}

#pageHeader .navbarList > li.active > a:focus:not(:focus-visible) {
    color: var(--text-on-primary);
    background-color: color-mix(in srgb, var(--color-ice) 26%, var(--color-primary));
    box-shadow: inset var(--ribbon-thickness) 0 0 0 var(--color-accent);
    outline: none;
}

#pageHeader .navbarList > li.active > a:focus:not(:focus-visible) .mdIcn {
    color: var(--text-on-primary);
}

/*
 * Active row: ice lifted into primary (soft band on navy) + accent edge via inset shadow.
 * Use ice for the wash (cool neutral); reserve --color-highlight for alerts/CTAs, not selection.
 */
#pageHeader .navbarList > li.active > a {
    color: var(--text-on-primary);
    background-color: color-mix(in srgb, var(--color-ice) 26%, var(--color-primary));
    box-shadow: inset var(--ribbon-thickness) 0 0 0 var(--color-accent);
}

#pageHeader .navbarList > li.active > a .mdIcn {
    color: var(--text-on-primary);
}

#pageHeader .navbarList > li.active > a:hover {
    color: var(--text-on-primary);
    background-color: color-mix(in srgb, var(--color-ice) 34%, var(--color-primary));
    box-shadow: inset var(--ribbon-thickness) 0 0 0 var(--color-accent);
}

#pageHeader .navbarList > li.active > a:hover .mdIcn {
    color: var(--text-on-primary);
}

#pageHeader .navbarList > li.active > a:focus {
    outline: none;
}

#pageHeader .navbarList > li.active > a:focus-visible {
    color: var(--text-on-primary);
    background-color: color-mix(in srgb, var(--color-ice) 26%, var(--color-primary));
    box-shadow: inset var(--ribbon-thickness) 0 0 0 var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#pageHeader .navbarList > li.active > a:focus-visible .mdIcn {
    color: var(--text-on-primary);
}

/* Log out — accent chip; label and icon use text-on-accent */
#pageHeader .logOutLink a.nav-link-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.3125rem;
    padding-inline: 0.75rem;
    color: var(--text-on-accent);
    background-color: var(--color-accent);
    border-radius: var(--radius-button);
    opacity: 1;
}

#pageHeader .logOutLink a.nav-link-logout:hover {
    color: var(--text-on-accent);
    background-color: color-mix(in srgb, var(--color-accent) 86%, var(--color-primary));
    opacity: 1;
}

#pageHeader .logOutLink a.nav-link-logout:focus {
    outline: none;
}

#pageHeader .logOutLink a.nav-link-logout:focus-visible {
    color: var(--text-on-accent);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    opacity: 1;
}

#pageHeader .logOutLink a.nav-link-logout i,
#pageHeader .logOutLink a.nav-link-logout span {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   App shell — top bar (.topBar: breadcrumb strip + right nav)
   Background: light secondary tint on ice; breadcrumbs use tokens below.
   --------------------------------------------------------------------------- */
.topBar {
    background-color: color-mix(in srgb, var(--color-secondary) 14%, var(--color-ice));
    border-radius: var(--radius-panel);
}

.innerWrapper.innerWrapper-v2 .topBar {
    background-color: color-mix(in srgb, var(--color-secondary) 14%, var(--color-ice));
    border-radius: var(--radius-panel);
}

.topBar .tbActDots {
    margin-right: calc(0.375rem - 1px);
    padding-right: 0.125rem;
}

.topBar .tbBreadcrumb {
    font-size: 13px;
    line-height: 20px;
    font-family: inherit;
}

/* One type/color for labels + links; active segment matches siblings */
.topBar .tbBreadcrumb .breadcrumbItem {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-primary);
}

.topBar .tbBreadcrumb a.breadcrumbItem,
.topBar .tbBreadcrumb span.breadcrumbItem {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.2rem;
    margin: 0;
    vertical-align: middle;
    border-radius: var(--radius-panel);
}

.topBar .tbBreadcrumb a.breadcrumbItem {
    text-decoration: none;
    transition: color 0.15s ease;
}

.topBar .tbBreadcrumb a.breadcrumbItem:hover {
    color: var(--color-secondary);
    background-color: transparent;
}

.topBar .tbBreadcrumb a.breadcrumbItem:hover .mdIcn {
    color: var(--color-secondary) !important;
}

.topBar .tbBreadcrumb a.breadcrumbItem:hover i.fa-home::before {
    color: var(--color-secondary) !important;
}

/* Home icon: modest horizontal squeeze; zero vertical pad keeps bar height at one line (~20px) */
.topBar .tbBreadcrumb > a.breadcrumbItem:first-child {
    padding: 0 0.15rem 0 0.3rem;
    border: none;
}

.topBar .tbBreadcrumb .breadcrumbItem + .breadcrumbItem:before {
    display: inline-block;
    padding-right: 6px;
    padding-left: 2px;
    content: "/";
    color: color-mix(in srgb, var(--color-secondary) 45%, transparent);
}

.topBar .tbBreadcrumb a.breadcrumbItem .mdIcn {
    color: var(--color-primary) !important;
    margin-right: 0 !important;
}

/* Home icon: modestly smaller than nav type */
.topBar .tbBreadcrumb a.breadcrumbItem i.fa-home {
    font-size: 0.875rem !important;
    line-height: 1;
}

.topBar .navbarNav > li:first-child > .topBar-accountTrigger.navLink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(42vw, 18rem);
    padding: 0.3rem 0.42rem;
    margin: -0.1rem 0;
    border-radius: 0;
    color: var(--color-primary);
    font-weight: 500;
    transition:
        color 0.15s ease,
        background-color 0.18s ease;
}

.topBar .navbarNav li.dropDown:not(.active) > .topBar-accountTrigger.navLink:hover {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.topBar .navbarNav li.dropDown.active > .topBar-accountTrigger.navLink {
    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.topBar .topBar-accountLabel {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile chevron: no `.mdIcn` in markup — avoids `.topBar .mdIcn:not(.topBar-accountChevron)` edge cases */
.topBar .navbarNav .navLink i.topBar-accountChevron {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    width: 1em;
    text-align: center;
    vertical-align: middle;
    color: var(--topbar-account-chevron) !important;
    margin: 0 !important;
    opacity: 0.92;
    transform: rotate(0deg);
    transform-origin: center;
    transition:
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.18s ease,
        opacity 0.18s ease;
}

.topBar .navbarNav .navLink i.topBar-accountChevron::before {
    color: var(--topbar-account-chevron) !important;
}

.topBar .navbarNav li.dropDown.active .navLink i.topBar-accountChevron {
    transform: rotate(180deg);
    color: var(--topbar-account-chevron-open) !important;
    opacity: 1;
}

.topBar .navbarNav li.dropDown.active .navLink i.topBar-accountChevron::before {
    color: var(--topbar-account-chevron-open) !important;
}

.topBar .navbarNav li.dropDown:not(.active) .topBar-accountTrigger.navLink:hover i.topBar-accountChevron {
    color: var(--topbar-account-chevron-hover) !important;
    opacity: 1;
}

.topBar .navbarNav li.dropDown:not(.active) .topBar-accountTrigger.navLink:hover i.topBar-accountChevron::before {
    color: var(--topbar-account-chevron-hover) !important;
}

.topBar .topBar-accountTrigger.navLink:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Top bar — profile/account dropdown (replacing legacy teal / lavender icons) */
.topBar li.dropDown .dropdownMenu {
    color: var(--text-on-ice);
    border-color: var(--color-border-muted);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-theme-soft);
}

.topBar .dropdownMenu .dropDownItem {
    color: var(--color-primary);
}

.topBar .dropdownMenu .dropDownItem:hover {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-ice));
}

.topBar .dropdownMenu a.dropDownItem:hover,
.topBar .dropdownMenu button.logout.dropDownItem:hover {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-ice));
}

.topBar .dropdownMenu .dropDownItem .mdIcn {
    margin-right: 12px !important;
    color: var(--color-secondary) !important;
}

.topBar .dropdownMenu .dropDownItem:hover .mdIcn {
    color: var(--color-secondary) !important;
}

.topBar .dropdownMenu .dropDownItem .mdIcn.text-lavender {
    color: var(--color-secondary) !important;
}

.topBar .dropdownMenu .dropDownItem:hover .mdIcn.text-lavender {
    color: var(--color-secondary) !important;
}

.topBar .dropdownMenu .dropDownItem .fas.mdIcn::before {
    color: inherit !important;
}

/* ---------------------------------------------------------------------------
   File upload zone (x-file-upload-zone) — dashed ice drop target + Browse
   --------------------------------------------------------------------------- */
.bcs-file-upload-zone {
    box-sizing: border-box;
    max-width: 100%;
    margin-bottom: 1rem;
}

.bcs-file-upload-zone__drop {
    position: relative;
    box-sizing: border-box;
    border-radius: var(--radius-panel);
    border: 1px dashed color-mix(in srgb, var(--color-secondary) 42%, var(--color-border-muted));
    background-color: color-mix(in srgb, var(--color-ice) 92%, #ffffff);
    transition: border-color 0.15s ease;
}

.bcs-file-upload-zone__drop:hover {
    border-color: color-mix(in srgb, var(--color-secondary) 65%, var(--color-border-muted));
}

.bcs-file-upload-zone__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.75rem 0.875rem;
    gap: 0.3rem;
    min-height: 10rem;
}

.bcs-file-upload-zone__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    width: 100%;
}

.bcs-file-upload-zone__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Author `display:flex` would otherwise beat the UA [hidden] rule */
.bcs-file-upload-zone__placeholder[hidden] {
    display: none !important;
}

.bcs-file-upload-zone__placeholder-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--text-muted-on-ice) 9%, var(--color-ice));
    color: color-mix(in srgb, var(--text-muted-on-ice) 72%, var(--color-ice));
    border: 1px solid var(--color-border-muted);
}

.bcs-file-upload-zone__placeholder-icon {
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.85;
}

.bcs-file-upload-zone__server-doc-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bcs-file-upload-zone__server-doc-mark[hidden] {
    display: none !important;
}

.bcs-file-upload-zone__server-filename {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    line-height: 1.35;
}

.bcs-file-upload-zone__server-filename[hidden] {
    display: none !important;
}

.bcs-file-upload-zone__filename {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 0.25rem;
    min-height: 1.125rem;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--text-muted-on-ice);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcs-file-upload-zone__filename[hidden] {
    display: none !important;
}

/* Chosen non-image: check where the placeholder was — icon uses .text-green-600; no tile bg/border */
.bcs-file-upload-zone__file-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bcs-file-upload-zone__file-state[hidden] {
    display: none !important;
}

.bcs-file-upload-zone__file-state-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: none;
    border: none;
    box-shadow: none;
}

.bcs-file-upload-zone__file-state-icon {
    font-size: 2.75rem;
    line-height: 1;
}

.bcs-file-upload-zone__preview {
    display: block;
    position: relative;
    z-index: 1;
    max-width: min(200px, 100%);
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-muted);
    background: #ffffff;
}

.bcs-file-upload-zone__preview[hidden] {
    display: none !important;
}

.bcs-file-upload-zone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.bcs-file-upload-zone__input:focus {
    outline: none;
    box-shadow: none;
}

.bcs-file-upload-zone__hint[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Checkout Complete modal (#create-success): header/body use theme utilities in Blade.
   These rules only beat legacy #create-success .holdersuccess / .leftbox (muted text + divider).
   --------------------------------------------------------------------------- */
#create-success .bcs-checkout-complete-modal .holdersuccess {
    color: var(--text-on-ice);
}

#create-success .bcs-checkout-complete-modal .holdersuccess .leftbox {
    border-right-color: var(--color-border-muted);
}

/* Gap between Checkout Complete header strip and ice body (min 15px) */
#create-success .bcs-checkout-complete-modal > .bg-ice {
    padding-top: 1rem;
}