/* =============================================================================
 * Atlas v2.0 Button System
 *
 * Source-of-truth: aff-brand skill v2.0,
 *   references/components/buttons.md (Button, Button-Small, Button-Icon)
 *   references/components/action-button.md (Action Button)
 *
 * Implements the full Atlas button taxonomy as a single stylesheet so the
 * codebase has one place to maintain button styling. Loads AFTER tokens.css
 * (so var(--…) references resolve) and AFTER GlobalStyles.css (so the alias
 * selectors below override the legacy .mud-btn-ui / .mud-btn-ui-secondary
 * definitions there via equal-specificity source-order wins).
 *
 * NAMING ───────────────────────────────────────────────────────────────────
 *   .aff-btn                 base — Button (Large), 56px
 *   .aff-btn--primary        pink (consumer)
 *   .aff-btn--primary-b2b    purple (merchant / B2B)
 *   .aff-btn--secondary      Brand-Grey filled
 *   .aff-btn--destructive    red flat
 *   .aff-btn--tertiary       transparent + 1px black border
 *   .aff-btn--text           transparent, no border, label-only
 *   .aff-btn--small          size modifier → 48px height + Roboto Bold +
 *                            (with --primary) ORANGE not pink
 *   .aff-btn-icon            48×48 circular icon-only base
 *   .aff-btn-icon--primary / --primary-b2b / --secondary / --tertiary
 *   .aff-action-btn          32px pill base (Action Button)
 *   .aff-action-btn--primary / --primary-b2b / --secondary / --destructive
 *
 * BACK-COMPAT ALIASES ─────────────────────────────────────────────────────
 *   .mud-btn-ui           → .aff-btn--primary       (pink Large primary)
 *   .mud-btn-ui-secondary → .aff-btn--tertiary      (transparent + black)
 *
 * The double-class `.mud-button-root.X` form is included on each alias so
 * MudBlazor's <MudButton>-rendered DOM (which adds .mud-button-root) picks
 * up our rules without needing per-call-site `Class` reorganization.
 * `.mud-btn-ui-outline` is NOT aliased — Atlas has no pink-outlined
 * "advance" variant; that one stays as a codebase-specific custom class
 * in GlobalStyles.css.
 *
 * ATLAS HARD RULES ENFORCED ──────────────────────────────────────────────
 *  - Flat: no box-shadow (buttons.md L277).
 *  - Disabled = color swap (#D4D4D5 bg / #6D6D6D text), NOT opacity fade.
 *  - Primary (Large) uses Be Vietnam Pro ExtraBold; all other types use
 *    Roboto Bold (buttons.md L61).
 *  - Small Primary is ORANGE (#FF5709 / Brand/Light-Orange), NOT pink
 *    (buttons.md L40-44 — non-obvious; the most common mistake).
 *  - Focused: 3px outline on Button, 2px on Action Button (buttons.md L262).
 *  - Action Button Secondary Focused: explicit 2px outline ring + icon
 *    weight swap (Light→Solid) to fix Atlas's WCAG 2.4.7 default failure
 *    (action-button.md skill override §5).
 *  - Action Button uses FA LIGHT icons by default, not Solid.
 *
 * TOKEN GAPS FLAGGED ────────────────────────────────────────────────────
 * Two literal hex values appear (Action Button Destructive hover/pressed)
 * because Atlas spec'd them but didn't add tokens:
 *   #E46C6C — Destructive Hover
 *   #D93636 — Destructive Pressed
 * If you ever add `--color-error-hover` / `--color-error-pressed` to
 * tokens.css, swap them in here. Comments mark each site.
 *
 * MUDBLAZOR-VERSION COUPLING ─────────────────────────────────────────────
 * `.mud-button-root.X` selectors below depend on MudBlazor's rendered DOM
 * structure. Re-validate on MudBlazor major-version bumps. Same caveat as
 * the existing GlobalStyles.css patterns.
 * ============================================================================= */

/* === Base — Button (Large) geometry, applied to ALL variants + aliases ======= */
/* Every Atlas Button (Large) variant + every back-compat alias must land in
   this selector group, otherwise the variant inherits MudBlazor's natural
   height / padding instead of Atlas's 56px / 12-24. Previous diagnostic
   (2026-05-18) showed Tertiary at the InfoModal "Got it" button was falling
   through to ~36px height + 13.5px square padding because .mud-btn-ui-secondary
   wasn't listed here — fixed below by adding every non-Primary variant +
   the one-off legacy class names .remove_Payment_Btn (Destructive) and
   .remove_Payment_Cancel_Btn / .mud-btn-cancel (Text). */
.aff-btn,
.aff-btn--primary-b2b,
.aff-btn--secondary,
.aff-btn--destructive,
.aff-btn--tertiary,
.aff-btn--text,
.mud-btn-ui,
.mud-button-root.mud-btn-ui,
.mud-btn-ui-secondary,
.mud-button-root.mud-btn-ui-secondary,
.remove_Payment_Btn,
.mud-button-root.remove_Payment_Btn,
.remove_Payment_Cancel_Btn,
.mud-button-root.remove_Payment_Cancel_Btn,
.mud-btn-cancel,
.mud-button-root.mud-btn-cancel,
.mud-label-ui,
.mud-button-root.mud-label-ui,
/* Pink-fill aliases (Atlas Primary). Each carries the corresponding
   .mud-button-root.X double-class form so MudBlazor-rendered DOM picks
   up the rule. */
.btn-primary,
.mud-button-root.btn-primary,
.search-button,
.mud-button-root.search-button,
.btn-action,
.mud-button-root.btn-action,
.account-details-payment-Btn,
.mud-button-root.account-details-payment-Btn,
.signin-btn-shop-now,
.mud-button-root.signin-btn-shop-now,
/* Outlined-black aliases (Atlas Tertiary). */
.linkaccounts-btn,
.mud-button-root.linkaccounts-btn,
.transparent-button_WhiteText,
.mud-button-root.transparent-button_WhiteText,
.link_account_no,
.mud-button-root.link_account_no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8, 8px);
  height: 56px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-8, 8px) !important;
  font-family: var(--font-body, Roboto, system-ui, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.2px;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

/* Universal Disabled — color swap, not opacity. Per Atlas buttons.md L52-60.
   Extended to cover the legacy one-off Destructive + Text class names so
   their disabled treatment is also Atlas-aligned (rather than leaking
   MudBlazor's --mud-palette-action-disabled which is a translucent grey). */
.aff-btn:disabled,
.aff-btn--disabled,
.mud-btn-ui:disabled,
.mud-button-root.mud-btn-ui:disabled,
.mud-btn-ui-secondary:disabled,
.mud-button-root.mud-btn-ui-secondary:disabled,
.remove_Payment_Btn:disabled,
.mud-button-root.remove_Payment_Btn:disabled,
.remove_Payment_Cancel_Btn:disabled,
.mud-button-root.remove_Payment_Cancel_Btn:disabled,
.mud-btn-cancel:disabled,
.mud-button-root.mud-btn-cancel:disabled,
.mud-label-ui:disabled,
.mud-button-root.mud-label-ui:disabled,
.btn-primary:disabled,
.mud-button-root.btn-primary:disabled,
.search-button:disabled,
.mud-button-root.search-button:disabled,
.btn-action:disabled,
.mud-button-root.btn-action:disabled,
.account-details-payment-Btn:disabled,
.mud-button-root.account-details-payment-Btn:disabled,
.signin-btn-shop-now:disabled,
.mud-button-root.signin-btn-shop-now:disabled,
.linkaccounts-btn:disabled,
.mud-button-root.linkaccounts-btn:disabled,
.transparent-button_WhiteText:disabled,
.mud-button-root.transparent-button_WhiteText:disabled,
.link_account_no:disabled,
.mud-button-root.link_account_no:disabled,
.mud-btn-backgrnd:disabled,
.mud-button-root.mud-btn-backgrnd:disabled {
  background: var(--color-grey-20, #d4d4d5) !important;
  color: var(--color-grey-50, #6d6d6d) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* MudBlazor sets the inner .mud-button-label to a translucent
   rgba(0,0,0,0.26) on native-disabled buttons, which beats the root-level
   color above. Force the Atlas canonical disabled text (#6D6D6D) on the
   label so .mud-btn-backgrnd disabled buttons match the grey/grey spec
   (buttons.md L54) instead of fading the label out. */
.mud-button-root.mud-btn-backgrnd:disabled .mud-button-label,
.mud-button-root.mud-btn-backgrnd:disabled .mud-button-icon-start,
.mud-button-root.mud-btn-backgrnd:disabled .mud-icon-root {
  color: var(--color-grey-50, #6d6d6d) !important;
}

/* Suppress MudBlazor's ripple overlay on Atlas-styled buttons. MudBlazor
   injects a <span class="mud-ripple"> child into every MudButton and
   animates a translucent circle on click — Atlas spec is flat, no ripple.
   Hiding the inner span via CSS is cleaner than touching ~40 MudButton
   call sites with DisableRipple="true". */
.mud-btn-ui .mud-ripple,
.mud-btn-ui-secondary .mud-ripple,
.remove_Payment_Btn .mud-ripple,
.remove_Payment_Cancel_Btn .mud-ripple,
.mud-label-ui .mud-ripple,
.btn-primary .mud-ripple,
.search-button .mud-ripple,
.btn-action .mud-ripple,
.account-details-payment-Btn .mud-ripple,
.signin-btn-shop-now .mud-ripple,
.linkaccounts-btn .mud-ripple,
.transparent-button_WhiteText .mud-ripple,
.link_account_no .mud-ripple,
.aff-btn-icon-close .mud-ripple,
.mud-btn-cancel .mud-ripple {
  display: none !important;
}

/* === Primary (Large) — Atlas Brand/Pink + Be Vietnam Pro ExtraBold =========== */
/* Default → hover swaps to Light-Orange-40 with black text + Roboto Bold;
   pressed/focused use Brand/Light-Orange #FF5709 with the same font swap.
   The font-family swap is intentional Atlas behaviour (buttons.md L52,
   "Primary Default uses Be Vietnam Pro ExtraBold; pressed/hovered shift
   to Roboto Bold as the chassis settles into a less hierarchical state"). */
.aff-btn--primary,
.mud-btn-ui,
.mud-button-root.mud-btn-ui,
.btn-primary,
.mud-button-root.btn-primary,
.search-button,
.mud-button-root.search-button,
.btn-action,
.mud-button-root.btn-action,
.account-details-payment-Btn,
.mud-button-root.account-details-payment-Btn,
.signin-btn-shop-now,
.mud-button-root.signin-btn-shop-now {
  background: var(--color-brand-pink, #f91d71) !important;
  color: var(--color-white, #ffffff) !important;
  font-family: var(
    --font-heading,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  ) !important;
  font-weight: var(--font-weight-extrabold, 800) !important;
}
.aff-btn--primary:hover:not(:disabled),
.mud-btn-ui:hover:not(:disabled),
.mud-button-root.mud-btn-ui:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.mud-button-root.btn-primary:hover:not(:disabled),
.search-button:hover:not(:disabled),
.mud-button-root.search-button:hover:not(:disabled),
.btn-action:hover:not(:disabled),
.mud-button-root.btn-action:hover:not(:disabled),
.account-details-payment-Btn:hover:not(:disabled),
.mud-button-root.account-details-payment-Btn:hover:not(:disabled),
.signin-btn-shop-now:hover:not(:disabled),
.mud-button-root.signin-btn-shop-now:hover:not(:disabled) {
  background: var(--color-light-orange-40, #ffa94d) !important;
  color: var(--color-black, #000000) !important;
  font-family: var(--font-body, Roboto, system-ui, sans-serif) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}
.aff-btn--primary:active:not(:disabled),
.mud-btn-ui:active:not(:disabled),
.mud-button-root.mud-btn-ui:active:not(:disabled),
.btn-primary:active:not(:disabled),
.mud-button-root.btn-primary:active:not(:disabled),
.search-button:active:not(:disabled),
.mud-button-root.search-button:active:not(:disabled),
.btn-action:active:not(:disabled),
.mud-button-root.btn-action:active:not(:disabled),
.account-details-payment-Btn:active:not(:disabled),
.mud-button-root.account-details-payment-Btn:active:not(:disabled),
.signin-btn-shop-now:active:not(:disabled),
.mud-button-root.signin-btn-shop-now:active:not(:disabled) {
  background: var(--color-brand-light-orange, #ff5709) !important;
  color: var(--color-black, #000000) !important;
  font-family: var(--font-body, Roboto, system-ui, sans-serif) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}
.aff-btn--primary:focus-visible,
.mud-btn-ui:focus-visible,
.mud-button-root.mud-btn-ui:focus-visible,
.btn-primary:focus-visible,
.mud-button-root.btn-primary:focus-visible,
.search-button:focus-visible,
.mud-button-root.search-button:focus-visible,
.btn-action:focus-visible,
.mud-button-root.btn-action:focus-visible,
.account-details-payment-Btn:focus-visible,
.mud-button-root.account-details-payment-Btn:focus-visible,
.signin-btn-shop-now:focus-visible,
.mud-button-root.signin-btn-shop-now:focus-visible {
  background: var(--color-brand-light-orange, #ff5709) !important;
  color: var(--color-black, #000000) !important;
  outline: 3px solid var(--color-orange-60, #cc4607);
  outline-offset: 0;
  font-family: var(--font-body, Roboto, system-ui, sans-serif) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}

/* Back-compat: legacy .mud-btn-ui call sites rely on margin-bottom: 20px from
   the old GlobalStyles rule for form-row spacing. Preserve ONLY on the alias
   selector — new .aff-btn--primary call sites get clean Atlas geometry with
   no opinionated margin. */
.mud-btn-ui,
.mud-button-root.mud-btn-ui {
  margin-bottom: 20px;
}

/* === Primary-B2B (Large) — purple + Roboto Bold ============================= */
.aff-btn--primary-b2b {
  background: var(--color-brand-purple, #a230c1);
  color: var(--color-white, #ffffff);
}
.aff-btn--primary-b2b:hover:not(:disabled) {
  background: var(--color-purple-40, #c378d7);
}
.aff-btn--primary-b2b:active:not(:disabled) {
  background: var(--color-brand-purple, #a230c1);
}
.aff-btn--primary-b2b:focus-visible {
  background: var(--color-brand-purple, #a230c1);
  outline: 3px solid var(--color-purple-60, #82269a);
  outline-offset: 0;
}

/* === Secondary (Large) — Brand-Grey filled + Roboto Bold ==================== */
.aff-btn--secondary {
  background: var(--color-brand-grey, #312d33);
  color: var(--color-white, #ffffff);
}
.aff-btn--secondary:hover:not(:disabled) {
  background: var(--color-grey-80, #282828);
}
.aff-btn--secondary:active:not(:disabled) {
  background: var(--color-black, #000000);
}
.aff-btn--secondary:focus-visible {
  background: var(--color-grey-60, #434343);
  outline: 3px solid var(--color-black, #000000);
  outline-offset: 0;
}

/* === Destructive (Large) — red, flat across hover/pressed/focused =========== */
/* Atlas buttons.md L57: Destructive holds the same #E22721 across all states
   except Disabled; the visual feedback is iconographic / contextual, not
   chromatic. Preserved verbatim.
   .remove_Payment_Btn (the one canonical Destructive call site in the
   codebase, on RemovePaymentMethodDrawer.razor) is aliased here so it
   picks up the full :hover / :active / :focus-visible state stack — its
   one-off rule in app.css only set the default state, leaving pressed/
   focused to leak MudBlazor's grey overlay. */
.aff-btn--destructive,
.remove_Payment_Btn,
.mud-button-root.remove_Payment_Btn {
  background: var(--color-error, #e22721) !important;
  color: var(--color-white, #ffffff) !important;
}
.aff-btn--destructive:hover:not(:disabled),
.aff-btn--destructive:active:not(:disabled),
.remove_Payment_Btn:hover:not(:disabled),
.mud-button-root.remove_Payment_Btn:hover:not(:disabled),
.remove_Payment_Btn:active:not(:disabled),
.mud-button-root.remove_Payment_Btn:active:not(:disabled) {
  background: var(--color-error, #e22721) !important;
  color: var(--color-white, #ffffff) !important;
}
.aff-btn--destructive:focus-visible,
.remove_Payment_Btn:focus-visible,
.mud-button-root.remove_Payment_Btn:focus-visible {
  background: var(--color-error, #e22721) !important;
  color: var(--color-white, #ffffff) !important;
  outline: 3px solid var(--color-black, #000000);
  outline-offset: 0;
}

/* === Tertiary (Large) — transparent + 1px black border ====================== */
/* Legacy alias: .mud-btn-ui-secondary points HERE. The previous treatment
   in GlobalStyles.css used a gray border (#A2A0A3) which the 2026-05-18
   Atlas-alignment audit flagged as off-spec. This alias brings legacy call
   sites in line with Atlas Tertiary (1px BLACK border + Roboto Bold). */
.aff-btn--tertiary,
.mud-btn-ui-secondary,
.mud-button-root.mud-btn-ui-secondary,
.linkaccounts-btn,
.mud-button-root.linkaccounts-btn,
.transparent-button_WhiteText,
.mud-button-root.transparent-button_WhiteText,
.link_account_no,
.mud-button-root.link_account_no {
  background: transparent !important;
  color: var(--color-black, #000000) !important;
  border: 1px solid var(--color-black, #000000) !important;
  font-family: var(--font-body, Roboto, system-ui, sans-serif) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}
.aff-btn--tertiary:hover:not(:disabled),
.mud-btn-ui-secondary:hover:not(:disabled),
.mud-button-root.mud-btn-ui-secondary:hover:not(:disabled),
.linkaccounts-btn:hover:not(:disabled),
.mud-button-root.linkaccounts-btn:hover:not(:disabled),
.transparent-button_WhiteText:hover:not(:disabled),
.mud-button-root.transparent-button_WhiteText:hover:not(:disabled),
.link_account_no:hover:not(:disabled),
.mud-button-root.link_account_no:hover:not(:disabled) {
  background: var(--color-grey-10, #f7f7f7) !important;
  color: var(--color-black, #000000) !important;
}
.aff-btn--tertiary:active:not(:disabled),
.mud-btn-ui-secondary:active:not(:disabled),
.mud-button-root.mud-btn-ui-secondary:active:not(:disabled),
.linkaccounts-btn:active:not(:disabled),
.mud-button-root.linkaccounts-btn:active:not(:disabled),
.transparent-button_WhiteText:active:not(:disabled),
.mud-button-root.transparent-button_WhiteText:active:not(:disabled),
.link_account_no:active:not(:disabled),
.mud-button-root.link_account_no:active:not(:disabled) {
  background: var(--color-grey-20, #d4d4d5) !important;
  color: var(--color-grey-70, #353535) !important;
}
.aff-btn--tertiary:focus-visible,
.mud-btn-ui-secondary:focus-visible,
.mud-button-root.mud-btn-ui-secondary:focus-visible,
.linkaccounts-btn:focus-visible,
.mud-button-root.linkaccounts-btn:focus-visible,
.transparent-button_WhiteText:focus-visible,
.mud-button-root.transparent-button_WhiteText:focus-visible,
.link_account_no:focus-visible,
.mud-button-root.link_account_no:focus-visible {
  background: var(--color-grey-10, #f7f7f7) !important;
  color: var(--color-black, #000000) !important;
  outline: 3px solid var(--color-black, #000000);
  outline-offset: 0;
}
/* Tertiary Disabled: transparent + grey-40 text, no fill swap. */
.aff-btn--tertiary:disabled,
.mud-btn-ui-secondary:disabled,
.mud-button-root.mud-btn-ui-secondary:disabled,
.linkaccounts-btn:disabled,
.mud-button-root.linkaccounts-btn:disabled,
.transparent-button_WhiteText:disabled,
.mud-button-root.transparent-button_WhiteText:disabled,
.link_account_no:disabled,
.mud-button-root.link_account_no:disabled {
  background: transparent !important;
  color: var(--color-grey-40, #8c8c8c) !important;
  border-color: transparent !important;
}

/* Back-compat margin (same rationale as .mud-btn-ui above). */
.mud-btn-ui-secondary,
.mud-button-root.mud-btn-ui-secondary {
  margin-bottom: 20px;
}

/* === Text (Large) — transparent, no border ================================== */
/* Atlas buttons.md L207: Text variant uses tighter horizontal padding (8 vs
   24) to read as a "label-only" CTA rather than a chassis button.
   Two legacy class names alias here:
     .remove_Payment_Cancel_Btn — used on the Cancel button inside
        RemovePaymentMethodDrawer; previously had no :hover / :active /
        :focus-visible rules, so MudBlazor's grey overlay leaked through.
     .mud-btn-cancel — referenced on multiple Cancel buttons in
        PersonalInfo sections; previously had NO CSS at all and relied
        solely on inline Style= attributes. Now picks up the full Atlas
        Text state stack. */
.aff-btn--text,
.remove_Payment_Cancel_Btn,
.mud-button-root.remove_Payment_Cancel_Btn,
.mud-btn-cancel,
.mud-button-root.mud-btn-cancel,
.mud-label-ui,
.mud-button-root.mud-label-ui {
  background: transparent !important;
  color: var(--color-black, #000000) !important;
  border: none !important;
  padding: 12px 8px;
}
.aff-btn--text:hover:not(:disabled),
.remove_Payment_Cancel_Btn:hover:not(:disabled),
.mud-button-root.remove_Payment_Cancel_Btn:hover:not(:disabled),
.mud-btn-cancel:hover:not(:disabled),
.mud-button-root.mud-btn-cancel:hover:not(:disabled),
.mud-label-ui:hover:not(:disabled),
.mud-button-root.mud-label-ui:hover:not(:disabled) {
  background: var(--color-grey-10, #f7f7f7) !important;
}
.aff-btn--text:active:not(:disabled),
.remove_Payment_Cancel_Btn:active:not(:disabled),
.mud-button-root.remove_Payment_Cancel_Btn:active:not(:disabled),
.mud-btn-cancel:active:not(:disabled),
.mud-button-root.mud-btn-cancel:active:not(:disabled),
.mud-label-ui:active:not(:disabled),
.mud-button-root.mud-label-ui:active:not(:disabled) {
  background: var(--color-grey-20, #d4d4d5) !important;
}
.aff-btn--text:focus-visible,
.remove_Payment_Cancel_Btn:focus-visible,
.mud-button-root.remove_Payment_Cancel_Btn:focus-visible,
.mud-btn-cancel:focus-visible,
.mud-button-root.mud-btn-cancel:focus-visible,
.mud-label-ui:focus-visible,
.mud-button-root.mud-label-ui:focus-visible {
  background: transparent !important;
  outline: 3px solid var(--color-black, #000000);
  outline-offset: 0;
}
.aff-btn--text:disabled,
.remove_Payment_Cancel_Btn:disabled,
.mud-button-root.remove_Payment_Cancel_Btn:disabled,
.mud-btn-cancel:disabled,
.mud-button-root.mud-btn-cancel:disabled,
.mud-label-ui:disabled,
.mud-button-root.mud-label-ui:disabled {
  background: transparent !important;
  color: var(--color-grey-40, #8c8c8c) !important;
}

/* === Size modifier — Button-Small (48px) ==================================== */
/* Per Atlas buttons.md L42: Small variants drop Be Vietnam Pro entirely and
   use Roboto Bold across the board. Padding tightens to 12/16. */
.aff-btn--small {
  height: 48px;
  padding: 12px 16px;
  font-family: var(--font-body, Roboto, system-ui, sans-serif) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}

/* Small Primary — ORANGE not pink (the most non-obvious Atlas rule). */
.aff-btn--small.aff-btn--primary {
  background: var(--color-brand-light-orange, #ff5709);
  color: var(--color-black, #000000);
}
.aff-btn--small.aff-btn--primary:hover:not(:disabled) {
  background: var(--color-light-orange-40, #ffa94d);
  color: var(--color-black, #000000);
}
.aff-btn--small.aff-btn--primary:active:not(:disabled) {
  background: var(--color-light-orange-60, #d97000);
  color: var(--color-black, #000000);
}
.aff-btn--small.aff-btn--primary:focus-visible {
  background: var(--color-brand-light-orange, #ff5709);
  color: var(--color-black, #000000);
  outline: 3px solid var(--color-light-orange-60, #d97000);
  outline-offset: 0;
}

/* Small Primary-B2B */
.aff-btn--small.aff-btn--primary-b2b {
  background: var(--color-brand-purple, #a230c1);
  color: var(--color-white, #ffffff);
}
.aff-btn--small.aff-btn--primary-b2b:hover:not(:disabled) {
  background: var(--color-purple-40, #c378d7);
}
.aff-btn--small.aff-btn--primary-b2b:active:not(:disabled) {
  background: var(--color-purple-60, #82269a);
}

/* Small Secondary / Destructive / Tertiary / Text — inherit the color
   stories from their Large counterparts. The .aff-btn--small modifier
   handles the 48px height + tighter padding + Roboto Bold font. */

/* === Button-Icon — 48×48 circular icon-only ================================= */
.aff-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: none;
  border-radius: var(--radius-full, 1000px);
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}
.aff-btn-icon i {
  font-family: var(--font-icon, "Font Awesome 6 Pro");
  font-size: 24px;
  line-height: 24px;
}
/* Compact variant — 32x32 button with the Atlas product-UI 16px glyph
   (icons.md: 16px is the default for product UI; 24px is for section-leading
   / standalone CTAs). For card-row edit affordances, not primary CTAs. */
.aff-btn-icon--sm {
  width: 32px;
  height: 32px;
  padding: 8px;
}
.aff-btn-icon--sm i,
.aff-btn-icon--sm .mud-icon-root {
  font-size: 16px;
  line-height: 16px;
}
.aff-btn-icon:disabled {
  background: var(--color-grey-20, #d4d4d5) !important;
  color: var(--color-grey-50, #6d6d6d) !important;
  cursor: not-allowed;
}

.aff-btn-icon--primary {
  background: var(--color-brand-pink, #f91d71);
  color: var(--color-white, #ffffff);
}
.aff-btn-icon--primary:hover:not(:disabled) {
  background: var(--color-light-orange-40, #ffa94d);
  color: var(--color-black, #000000);
}
.aff-btn-icon--primary:active:not(:disabled) {
  background: var(--color-brand-light-orange, #ff5709);
  color: var(--color-black, #000000);
}
.aff-btn-icon--primary:focus-visible {
  outline: 3px solid var(--color-orange-60, #cc4607);
  outline-offset: 0;
}

.aff-btn-icon--primary-b2b {
  background: var(--color-brand-purple, #a230c1);
  color: var(--color-white, #ffffff);
}
.aff-btn-icon--primary-b2b:hover:not(:disabled) {
  background: var(--color-purple-40, #c378d7);
}
.aff-btn-icon--primary-b2b:active:not(:disabled) {
  background: var(--color-brand-purple, #a230c1);
}

.aff-btn-icon--secondary {
  background: var(--color-brand-grey, #312d33);
  color: var(--color-white, #ffffff);
}
.aff-btn-icon--secondary:hover:not(:disabled) {
  background: var(--color-grey-80, #282828);
}
.aff-btn-icon--secondary:active:not(:disabled) {
  background: var(--color-black, #000000);
}

.aff-btn-icon--tertiary {
  background: transparent;
  color: var(--color-black, #000000);
  border: 1px solid var(--color-black, #000000);
}
.aff-btn-icon--tertiary:hover:not(:disabled) {
  background: var(--color-grey-10, #f7f7f7);
}
.aff-btn-icon--tertiary:active:not(:disabled) {
  background: var(--color-grey-20, #d4d4d5);
}

/* === Action Button — 32px pill, FA Light icons ============================== */
/* Atlas action-button.md spec. Lower-emphasis inline action; max 2-3 per
   row; never as a form submit (use Button-Small for that).
   - Default icon weight: FA Light (--font-weight 300).
   - Disabled bg #F7F7F7 (lighter than Button's #D4D4D5 disabled).
   - Focus: 2px stroke (Button uses 3px). */
.aff-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 4px);
  height: 32px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-full, 1000px);
  font-family: var(--font-body, Roboto, system-ui, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}
.aff-action-btn i {
  font-family: var(--font-icon, "Font Awesome 6 Pro");
  font-weight: 300; /* FA Light per Atlas */
  font-size: 16px;
  line-height: 16px;
}
.aff-action-btn:disabled {
  background: var(--color-grey-10, #f7f7f7) !important;
  color: var(--color-grey-50, #6d6d6d) !important;
  cursor: not-allowed;
}

/* Action Button Primary — Orange */
.aff-action-btn--primary {
  background: var(--color-brand-light-orange, #ff5709);
  color: var(--color-black, #000000);
}
.aff-action-btn--primary:hover:not(:disabled) {
  background: var(--color-light-orange-40, #ffa94d);
}
.aff-action-btn--primary:active:not(:disabled) {
  background: var(--color-light-orange-60, #d97000);
}
.aff-action-btn--primary:focus-visible {
  outline: 2px solid var(--color-light-orange-60, #d97000);
  outline-offset: 0;
}

/* Action Button Primary-B2B — Purple */
.aff-action-btn--primary-b2b {
  background: var(--color-brand-purple, #a230c1);
  color: var(--color-white, #ffffff);
}
.aff-action-btn--primary-b2b:hover:not(:disabled) {
  background: var(--color-purple-40, #c378d7);
}
.aff-action-btn--primary-b2b:active:not(:disabled) {
  background: var(--color-purple-60, #82269a);
}
.aff-action-btn--primary-b2b:focus-visible {
  outline: 2px solid var(--color-purple-20, #e8cbef);
  outline-offset: 0;
}

/* Action Button Secondary — transparent + 1px Brand-Grey border.
   Per skill override (action-button.md §5): Atlas's default Focused state
   (drop stroke + swap icon Light→Solid) fails WCAG 2.4.7. We add an
   explicit 2px outline ring AND swap the icon weight, so screen-readers
   and sighted users both get a clear focus signal. */
.aff-action-btn--secondary {
  background: transparent;
  color: var(--color-brand-grey, #312d33);
  border: 1px solid var(--color-brand-grey, #312d33);
}
.aff-action-btn--secondary:hover:not(:disabled) {
  border-color: var(--color-grey-50, #6d6d6d);
  color: var(--color-grey-50, #6d6d6d);
}
.aff-action-btn--secondary:active:not(:disabled) {
  border-color: var(--color-grey-70, #353535);
  color: var(--color-grey-70, #353535);
}
.aff-action-btn--secondary:focus-visible {
  outline: 2px solid var(--color-brand-grey, #312d33);
  outline-offset: 0;
  border-color: var(--color-brand-grey, #312d33);
  color: var(--color-brand-grey, #312d33);
}
.aff-action-btn--secondary:focus-visible i {
  font-weight: 900; /* FA Solid — Atlas state-signaling swap */
}
.aff-action-btn--secondary:disabled {
  background: transparent !important;
  color: var(--color-grey-40, #8c8c8c) !important;
  border-color: var(--color-grey-40, #8c8c8c) !important;
}

/* Action Button Destructive — red. NOTE: Atlas spec'd hover/pressed
   colors (#E46C6C / #D93636) but never added tokens — flagged in the
   header. Swap to --color-error-hover / -pressed when (if) tokens land. */
.aff-action-btn--destructive {
  background: var(--color-error, #e22721);
  color: var(--color-white, #ffffff);
}
.aff-action-btn--destructive:hover:not(:disabled) {
  /* TOKEN GAP — Atlas spec'd #E46C6C; no token yet. */
  background: #e46c6c;
}
.aff-action-btn--destructive:active:not(:disabled) {
  /* TOKEN GAP — Atlas spec'd #D93636; no token yet. */
  background: #d93636;
}
.aff-action-btn--destructive:focus-visible {
  outline: 2px solid var(--color-black, #000000);
  outline-offset: 0;
}

/* === Close chip — 32×32 dismiss icon-button =================================
   Atlas doesn't ship an icon-button at this size — its Button-Icon is 48×48
   and its Action Button is a 32px pill oriented for label+icon. The six
   "X" close chips scattered across OverlayAlert / Popup / SuccessPopupAlert
   / DeniedPopupAlert / SuccessPaymentPopUp / PopupAlert all need a small
   round dismiss treatment with the same hover/focus discipline as the rest
   of the Atlas family. Defining this as an Atlas-aligned extension here so
   the inline `background-color: #F5F5F5; width: 32px;` patterns scattered
   across those files can all collapse to `Class="aff-btn-icon-close"`.
   Colors use Atlas Grey-10 surface + Brand-Grey glyph (matches Modal close
   icon spec: FA Light 24px Brand-Grey). */
.aff-btn-icon-close,
.mud-button-root.aff-btn-icon-close,
.mud-icon-button.aff-btn-icon-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--color-grey-10, #f7f7f7) !important;
  color: var(--color-brand-grey, #312d33) !important;
  border: none !important;
  border-radius: var(--radius-full, 1000px) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}
.aff-btn-icon-close:hover:not(:disabled),
.mud-button-root.aff-btn-icon-close:hover:not(:disabled),
.mud-icon-button.aff-btn-icon-close:hover:not(:disabled) {
  background: var(--color-grey-20, #d4d4d5) !important;
  color: var(--color-black, #000000) !important;
}
.aff-btn-icon-close:active:not(:disabled),
.mud-button-root.aff-btn-icon-close:active:not(:disabled),
.mud-icon-button.aff-btn-icon-close:active:not(:disabled) {
  background: var(--color-grey-20, #d4d4d5) !important;
  color: var(--color-black, #000000) !important;
}
.aff-btn-icon-close:focus-visible,
.mud-button-root.aff-btn-icon-close:focus-visible,
.mud-icon-button.aff-btn-icon-close:focus-visible {
  outline: 2px solid var(--color-black, #000000);
  outline-offset: 0;
}
.aff-btn-icon-close i,
.aff-btn-icon-close .mud-icon-root {
  font-family: var(--font-icon, "Font Awesome 6 Pro");
  font-size: 14px !important;
  line-height: 14px;
}

/* === Text CTA with arrow ===================================================
 * Atlas Text variant for in-flow "advance" CTAs that read as a labelled link
 * with a trailing arrow — e.g. "Account Details →" beneath the dashboard
 * Make-a-Payment button, "Cancel Lease →" at the bottom of Account Details,
 * "Chat Now →" inside Personal Info sections, "Start a payment plan →" inside
 * PaymentPlan rows.
 *
 * Previously `.text-cta-arrow` was a label-only class with no CSS — every
 * call site duplicated the same inline style="..." string. This rule
 * consolidates the inline styling into the canonical Atlas Text state stack
 * (matrix from references/components/buttons.md L52-L62):
 *     default  — transparent + black text
 *     hover    — Grey-10 bg
 *     pressed  — Grey-20 bg
 *     focused  — 2px black focus-visible ring (Atlas cross-component focus)
 *     disabled — Grey-40 text, no pointer events
 *
 * Typography per Atlas: Roboto Bold 16px / #000 (NOT Be Vietnam Pro — that's
 * reserved for Primary buttons and headings). Atlas docs call out this font
 * inconsistency between Primary and the other 5 variants explicitly.
 *
 * Element-agnostic: works on <button type="button"> (preferred for in-app
 * actions) and on <a> tags (legacy carryovers). Native <button> reset rolled
 * in so neither element needs inline overrides.
 *
 * Padding is tighter than Atlas Large Text (which uses 12px/8px on a 56-px
 * chassis) because these CTAs sit inline below cards and don't need full
 * button mass — 8px vertical / 12px horizontal gives a ~38px hit target with
 * the hover wash extending past the glyph for clear feedback. */
.text-cta-arrow {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 8px 12px;
  margin: 0;
  color: var(--color-black, #000);
  font-family: var(--font-body, Roboto, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-8, 8px);
  transition:
    background-color 120ms ease,
    color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.text-cta-arrow:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-grey-10, #f7f7f7);
}
.text-cta-arrow:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-grey-20, #d4d4d5);
}
.text-cta-arrow:focus-visible {
  outline: 2px solid var(--color-black, #000);
  outline-offset: 2px;
}
.text-cta-arrow:disabled,
.text-cta-arrow[aria-disabled="true"] {
  color: var(--color-grey-40, #8c8c8c);
  cursor: default;
  pointer-events: none;
}
/* Trailing arrow icon — slightly smaller than the label so the arrow reads
   as a directional marker rather than a peer glyph.
   margin-left (not flex `gap`) carries the label→arrow spacing so older mobile
   WebViews that don't honor flexbox `gap` still render the gap; produces the
   same 6px on web. */
.text-cta-arrow > i,
.text-cta-arrow .fa-arrow-right {
  margin-left: 6px;
  font-size: 13px;
  line-height: 1;
}