/* AFF design system — single source of truth for button corner radius.
   All CTAs (filled, outlined, swipe) read from --radius-button so the value
   can't drift across screens. Update here only. */
:root {
    /* Legacy alias preserved for back-compat with existing call sites that
       reference --radius-button. New code should use --radius-8 directly
       (defined in tokens.css per the Atlas v2.0 design system). Falling
       back to 8px keeps the cascade resolving correctly if tokens.css
       fails to load for any reason. */
    --radius-button: var(--radius-8, 8px);
}

.btn-primary,
.search-button,
.mud-btn-ui,
.btn-action,
.update-now-btn,
.account-details-payment-Btn,
.signin-btn-shop-now {
    background-color: #F91D71;
    color: #FFFFFF !important;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 700;
    text-transform: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.btn-primary:hover,
.search-button:hover,
.mud-btn-ui:hover,
.btn-action:hover,
.update-now-btn:hover,
.account-details-payment-Btn:hover,
.signin-btn-shop-now:hover {
    background-color: #F91D71;
}

.btn-primary-search,
.mud-button-root.search-button,
.search-button {
    padding: 12px;
    font-size: 16px;
    border-radius: var(--radius-button) !important;
}

/* All AFF CTAs use --radius-button (8px). Do not hardcode different radii
   on individual button rules — update the token in :root instead.

   Specificity note: MudBlazor's .mud-button rule sets border-radius via
   var(--mud-default-borderradius). To beat that without ambiguity we
   double-class (.mud-button-root.X) AND use !important on radius. This
   matches the existing .mud-btn-ui-secondary pattern below. */
.btn-primary-block,
.mud-button-root.mud-btn-ui,
.mud-btn-ui {
    padding: 15px;
    font-size: 16px;
    border-radius: var(--radius-button) !important;
    margin-bottom: 20px;
}

.btn-primary-action,
.mud-button-root.btn-action,
.btn-action {
    height: 56px;
    min-width: 104px;
    padding: 12px 24px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 800;
    border-radius: var(--radius-button) !important;
}

.btn-primary-update-now,
.mud-button-root.update-now-btn,
.update-now-btn {
    width: calc(100% - 32px);
    margin: 0 16px 20px 16px;
    padding: 10px;
    border-radius: var(--radius-button) !important;
}

.btn-primary-shop-now,
.mud-button-root.signin-btn-shop-now,
.signin-btn-shop-now {
    width: 100%;
    height: 56px;
    padding: 12px 16px;
    margin-top: 24px;
    border-radius: var(--radius-button) !important;
}

.btn-primary-account-payment,
.mud-button-root.account-details-payment-Btn,
.account-details-payment-Btn {
    width: 100%;
    border-radius: var(--radius-button) !important;
    /* Sticky + bottom + z-index removed — Account Details now uses
       .account-details-payment-container (position: fixed) for the sticky
       behavior. */
}

.btn-outline-white,
.transparent-button_WhiteText {
    background: transparent !important;
    color: white !important;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    border-radius: var(--radius-button);
    border: 2px solid white !important;
    padding: 10px 32px;
    box-shadow: none;
    min-width: 200px;
}

.btn-landing-shop-now,
.landing-Shop-Now {
    display: block;
    width: 100%;
    height: 56px !important;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.2px;
    text-transform: capitalize !important;
}

/* Legacy class names — kept for back-compat, but radius now matches the
   AFF design system (8px) via --radius-button. The "pill" suffix is a
   misnomer; do not introduce new usages. */
.btn-primary-pill-large {
    border-radius: var(--radius-button);
    height: 56px;
    font-size: 20px;
    font-weight: 700;
}

.btn-primary-pill-medium {
    border-radius: var(--radius-button);
    font-weight: 700;
    padding: 6px 20px;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.fw-extrabold {
    font-weight: 800;
}

.text-12 {
    font-size: 12px;
    line-height: 28px;
}

.text-14 {
    font-size: 14px;
    line-height: 20px;
}

.text-16 {
    font-size: 16px;
    line-height: 24px;
}

.text-18 {
    font-size: 18px;
    line-height: 26px;
}

.text-20 {
    font-size: 20px;
    line-height: 28px;
}

.text-24 {
    font-size: 24px;
    line-height: 32px;
}
/* Retired 2026-05-20: .mud-btn-ui-outline.
   Was a transparent + 1.5px-border + colored-text "advance" variant used
   on non-primary dashboard cards. It had two problems:
     1. Off-spec — Atlas has only 6 button types (Primary / Primary-B2B /
        Secondary / Destructive / Tertiary / Text); none is "outlined pink".
        atlas-buttons.css explicitly left it un-aliased for this reason.
     2. Latent bug — the rule resolved to var(--color-brand-light-orange,
        #F91D71): the variable was orange but the fallback hinted at the
        original pink intent, so it rendered orange (off-spec on both axes).
   Non-primary dashboard CTAs now use .mud-btn-ui-secondary (Atlas Secondary,
   filled dark grey + white) which is the canonical "supporting action
   alongside a Primary" type per references/components/buttons.md.

   Visual hierarchy across button classes:
     .mud-btn-ui          → filled pink     (Atlas Primary)
     .mud-btn-ui-secondary→ filled dark grey (Atlas Secondary)
     .mud-btn-cancel etc. → text-only       (Atlas Text)                  */
/* Neutral secondary button — geometry kept compatible with .mud-btn-ui so
   the two variants are interchangeable in the same layout. Class+class
   specificity (.mud-button-root.X) is repeated to beat MudBlazor's
   default .mud-button rules. The actual Atlas Secondary state-stack
   (dark-grey fill, white text, full hover/pressed/focused/disabled
   matrix) lives in atlas-buttons.css; this rule provides only the
   layout primitives that the rest of the codebase relied on previously. */
.mud-button-root.mud-btn-ui-secondary,
.mud-btn-ui-secondary {
  background-color: transparent !important;
  color: #312D33 !important;
  border: 1.5px solid #A2A0A3 !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 13.5px !important;
  font-size: 16px !important;
  border-radius: var(--radius-button) !important;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.mud-button-root.mud-btn-ui-secondary:hover,
.mud-btn-ui-secondary:hover {
  background-color: rgba(49, 45, 51, 0.05) !important;
}

/* Match the existing filled .mud-btn-ui label-case override (some MudBlazor
   themes uppercase button labels by default). */
.mud-button-root.mud-btn-ui-secondary .mud-button-label,
.mud-button-root.mud-btn-ui .mud-button-label {
  text-transform: none !important;
}

/* Urgency badge next to the account name on the dashboard cards.
   Three states:
     .urgency-soon     — due within 7 days  (warm pill)
     .urgency-far      — due in 8+ days     (muted gray text only, no pill)
     .urgency-past-due — overdue            (red pill) */
.account-urgency-badge {
  display: inline-flex;
  align-items: center;
  font-family: "Be Vietnam Pro", "Nunito Sans", Arial, sans-serif;
  /* Reduced from 11px → 10px to give the merchant title room to fit on
     one line alongside the chip on narrow viewports. Weight stays 700 so
     the chip still reads as a strong signal. */
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2px;
  margin-left: 8px;
  vertical-align: middle;
}
/* "Due in X days" variants — both urgency-soon (≤7 days, including today)
   and urgency-far (8+ days) now render as the same neutral gray chip.
   Matches the past-due chip's shape, padding, weight, and uppercase
   treatment so the dashboard reads as one consistent chip system
   (red = past-due signal, gray = due-soon information, no chip = current
   / good standing). If/when "Due today" needs more emphasis than
   "Due in 14 days", split the styling on urgency-soon vs urgency-far. */
.account-urgency-badge.urgency-soon,
.account-urgency-badge.urgency-far {
  background: var(--color-grey-10, #F7F5F2);
  color: var(--color-grey-60, #79777A);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.account-urgency-badge.urgency-past-due {
  /* Atlas error tokens — same red system as .payment-plans-container alert
     banner so chip and banner share one error red on the same card.
     (Previously Tailwind #FEE2E2 / #B91C1C, which didn't match the banner.) */
  background: var(--color-error-bg, #ffeae9);
  color: var(--color-error, #e22721);
  /* Horizontal padding tightened from 10px → 8px to match .urgency-soon
     and free up width on narrow viewports. */
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
/* "PAID OFF" terminal-state chip — used by ClosedAccount.razor.
   Dark Brand-Grey background + white text so it reads as a positive,
   resolved state rather than an alert (urgency-past-due) or a soft
   information chip (urgency-soon/far). Same pill geometry, weight,
   uppercase, and padding as the other variants so the chip system
   stays visually consistent across Open and Closed cards. */
.account-urgency-badge.urgency-paid-off {
  background: var(--color-brand-grey, #312D33);
  color: var(--color-white, #FFFFFF);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Account meta line — "{product type} · {account #}" under the product name on
   the payment-plan screens. On narrow viewports the line used to wrap and break
   the account number across two lines ("… · 1-" / "1145948-1"); web (wide) showed
   it on one. Keep it on ONE line at every width, with NO truncation — the whole
   label and the whole account number stay readable; on mobile the type size drops
   1px (13px -> 12px) to buy back the width the wrap was taking. */
.account-meta-single-line {
  white-space: nowrap;
}
/* Same breakpoint the payment-plan pages use for .product-name-truncated.
   !important because every call site sets font-size in an inline style
   attribute (13px / "small"), which otherwise wins over this rule. */
@media (max-width: 680px) {
  .account-meta-single-line {
    font-size: 12px !important;
  }
}

/* Account status pill — used in the Account Details header (step 1 of redesign).
   Three states keyed off paymentStatus:
     .status-current    — soft green (active / current account)
     .status-past-due   — red (overdue)
     .status-neutral    — muted gray (Locked / Paid Off / closed) */
.account-status-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: "Be Vietnam Pro", "Nunito Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.account-status-pill.status-current {
  background: #E6F4EA;
  color: #0D8728;
}
.account-status-pill.status-past-due {
  background: #FEE2E2;
  color: #B91C1C;
}
.account-status-pill.status-neutral {
  background: var(--color-grey-10, #F7F5F2);
  color: var(--color-grey-60, #79777A);
}

/* ============================================================================
   Atlas input-field alignment (references/components/inputs.md) — applies to ALL
   outlined MudTextField / MudSelect app-wide. Single global source; previously
   each input used MudBlazor defaults (4px radius, #BDBDBD border, 2px primary
   focus, rgba(0,0,0,.26) disabled, 24px adornment icons). Error state is left to
   MudBlazor's red (.mud-input-error) — guarded with :not() so we don't clobber it.
   ============================================================================ */
/* Box: Radius-8 + resting/default stroke 1px #8C8C8C */
.mud-input.mud-input-outlined:not(.mud-input-error) .mud-input-outlined-border {
  border-radius: var(--radius-8, 8px) !important;
  border-width: 1px !important;
  border-color: var(--color-grey-40, #8C8C8C) !important;
}
/* Focus: 1px #000 (overrides MudBlazor's 2px primary-color focus) */
.mud-input.mud-input-outlined:not(.mud-input-error).mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:not(.mud-input-error):focus-within .mud-input-outlined-border {
  border-width: 1px !important;
  border-color: #000000 !important;
}
/* Disabled: 0.5px #8C8C8C stroke + #F7F7F7 fill */
.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
  border-width: 0.5px !important;
  border-color: var(--color-grey-40, #8C8C8C) !important;
  background-color: var(--color-grey-10, #F7F7F7) !important;
}
/* In-field adornment icons (prefix/suffix: lock / eye / phone + dropdown chevron)
   → 16px (Atlas: FA Light 16px), down from MudBlazor's 24px. */
.mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root,
.mud-input.mud-input-outlined .mud-input-adornment i {
  font-size: 16px !important;
}

/* Unified field label (Atlas: Roboto Regular 14/22, #000; disabled #8C8C8C).
   New class — .form-label is Bootstrap's and Typo.subtitle2 is shared elsewhere,
   so neither can be redefined globally without blast radius. */
.aff-field-label {
  font-family: Roboto, 'Nunito Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000000;
}
.aff-field-label--disabled {
  color: var(--color-grey-40, #8C8C8C);
}

/* ============================================================================
   Atlas Helper — Information variant (references/components/alerts-and-notifications.md §4).
   The in-sheet educational callout. Replaces the bespoke .info-box (12px radius /
   1px #d1d1d1 / margins). New class — .info-box is shared (PaymentPlan /
   PaymentPlanPostSuccess define their own), so we don't redefine it.
   Helper chassis: white + 1px Grey-20 border + 8px radius + 16px padding, NO shadow
   (Helper uses a border, not elevation). Literal Atlas hexes (not tokens) so the
   spec values are guaranteed. Icon stays FA Light 24px in the markup (Helper spec).
   ============================================================================ */
.aff-helper {
  width: 100%;
  /* Preserves the prior .info-box outer spacing (16px above / 24px below) so the
     callout's position in the sheet is unchanged — only the chassis is realigned. */
  margin: 16px 0 24px;
  padding: 16px;
  border-radius: var(--radius-8, 8px);
  background: #FFFFFF;
  border: 1px solid #D4D4D5;
  box-shadow: none;
}
/* Title — Roboto SemiBold 16/24 #000000 */
.aff-helper-title {
  font-family: Roboto, 'Nunito Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000000;
}
/* Body — Roboto Regular 14/22 #434343 (Type-Secondary; Helper body is quieter) */
.aff-helper-body {
  font-family: Roboto, 'Nunito Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #434343;
}