/* =========================================================================
   Anabolic Store — FluentAffiliate portal restyle (/referrals only).
   Conforms the plugin's Element-Plus/Vue dashboard + server-rendered auth forms
   to the site system. Enqueued ONLY on /referrals; every rule is scoped under the
   body class `.ana-referrals` so nothing bleeds site-wide AND so it outranks the
   plugin's own selectors without shotgun !important. Tokens mirror theme.css.
   Wrapper selectors scoped: .fla_portal (dashboard), #fa-customer-portal (mount),
   .fa_auth_warp (login/register), .fa-no-access (pending/inactive).
   ========================================================================= */

/* ---- token aliases (kept local so this file reads like the rest of the system) ---- */
.ana-referrals{
  --r-bg:#0c0c0b; --r-surface:#131312; --r-surface-2:#1b1b1a; --r-surface-3:#232322;
  --r-line:#2c2c2a; --r-ink:#f3f2ec; --r-muted:#8f8e86; --r-faint:#6a6962;
  --r-accent:#ffb000; --r-accent-2:#e85d2a; --r-accent-ink:#2c2c2c;
  --r-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r-sans:'Space Grotesk',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --r-glass-fill:rgba(255,255,255,0.06); --r-glass-border:rgba(255,255,255,0.13);
}

/* ---- page backdrop: dark + radial-ambient (matches the shop app-root) ---- */
body.ana-referrals{
  background-color:var(--r-bg);
  background-image:
    radial-gradient(60% 50% at 22% 12%, rgba(255,176,0,0.10), transparent 70%),
    radial-gradient(52% 50% at 80% 16%, rgba(52,207,194,0.08), transparent 70%),
    radial-gradient(85% 55% at 50% 108%, rgba(243,242,236,0.05), transparent 70%);
  background-attachment:fixed;background-repeat:no-repeat;
}

/* =========================================================================
   1. VARIABLE REMAP
   --fa-* are defined by the plugin on .fla_portal — redefine at higher specificity.
   --el-* (Element Plus) defined on :root / components — set on the body class too so
   body-appended poppers (select/pagination dropdowns) inherit the dark theme.
   ========================================================================= */
.ana-referrals .fla_portal,
.ana-referrals .fa_auth_warp,
.ana-referrals .fa-no-access{
  --fa-box-bg:#1b1b1a;
  --fa-primary-border:#2c2c2a;
  --fa-primary-color:#f3f2ec;   /* primary text/headings (button bg overridden below) */
  --fa-color-off:#8f8e86;
  --fa-heading-bg:#131312;      /* table header */
  --fa-active-bg:#232322;       /* hover / active nav */
  --fla-primary-text:#f3f2ec;
}
.ana-referrals,
.ana-referrals .fla_portal{
  --el-color-primary:#ffb000;
  --el-color-primary-light-3:#ff7d4d;
  --el-color-primary-light-5:#e85d2a;
  --el-color-primary-light-7:#3a2419;
  --el-color-primary-light-8:#2a1a12;
  --el-color-primary-light-9:#21140f;
  --el-color-primary-dark-2:#e85d2a;
  --el-bg-color:#1b1b1a;
  --el-bg-color-page:#0c0c0b;
  --el-bg-color-overlay:#1b1b1a;
  --el-text-color-primary:#f3f2ec;
  --el-text-color-regular:#f3f2ec;
  --el-text-color-secondary:#8f8e86;
  --el-text-color-placeholder:#6a6962;
  --el-text-color-disabled:#6a6962;
  --el-border-color:#2c2c2a;
  --el-border-color-light:#2c2c2a;
  --el-border-color-lighter:#2c2c2a;
  --el-border-color-extra-light:#2c2c2a;
  --el-border-color-dark:#2c2c2a;
  --el-fill-color:#232322;
  --el-fill-color-light:#232322;
  --el-fill-color-lighter:#1b1b1a;
  --el-fill-color-blank:#131312;
  --el-disabled-bg-color:#1b1b1a;
  --el-input-bg-color:#131312;
  --el-input-text-color:#f3f2ec;
  --el-input-border-color:#2c2c2a;
  --el-table-bg-color:#1b1b1a;
  --el-table-tr-bg-color:#1b1b1a;
  --el-table-header-bg-color:#131312;
  --el-table-text-color:#f3f2ec;
  --el-table-header-text-color:#8f8e86;
  --el-table-border-color:#2c2c2a;
  --el-table-row-hover-bg-color:#232322;
}

/* =========================================================================
   2. BASE TYPE + PORTAL SHELL
   ========================================================================= */
.ana-referrals .fla_portal,
.ana-referrals .fa_auth_warp,
.ana-referrals .fa-no-access,
.ana-referrals #fa-customer-portal{
  font-family:var(--r-sans);color:var(--r-ink);
}
.ana-referrals .fla_portal h1,.ana-referrals .fla_portal h2,.ana-referrals .fla_portal h3,
.ana-referrals .fla_portal h4,.ana-referrals .fa_auth_warp h3,.ana-referrals .fa-no-access h3{color:var(--r-ink);}

/* modern layout shell + classic header — frosted surface */
.ana-referrals .fla_portal .fla_layout.fla_modern_layout{
  background:linear-gradient(155deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  border:1px solid var(--r-line);border-radius:14px;
}
.ana-referrals .fla_portal .fla_layout .fla_sidebar,
.ana-referrals .fla_portal .fla_layout.fla_modern_layout .fla_route_body{
  border-color:var(--r-line);background:transparent;
}
.ana-referrals .fla_portal .fla_sidebar .fla_sidebar_header{border-color:var(--r-line);}
.ana-referrals .fla_portal .fla_sidebar_header .fla_header_name{color:var(--r-ink);}
.ana-referrals .fla_portal .fla_sidebar_header .fla_header_email{color:var(--r-muted);}

/* nav links (sidebar + classic header).
   app.css loads AFTER this file and colours these with deep, hardcoded-hex selectors
   (e.g. #565865 / #525866) at equal-or-higher specificity, so these few text-colour
   declarations carry a surgical !important to win — everything else wins on specificity. */
.ana-referrals .fla_portal .fla_sidebar_nav li.nav_item a.item_menu_link,
.ana-referrals .fla_portal .fla_header .fla_header_nav li a{color:var(--r-muted) !important;font-family:var(--r-sans);}
.ana-referrals .fla_portal .fla_sidebar_nav li.nav_item a.item_menu_link:hover,
.ana-referrals .fla_portal .fla_header .fla_header_nav li a:hover{background:var(--r-surface-3);color:var(--r-ink) !important;}
.ana-referrals .fla_portal .fla_sidebar_nav li.nav_item a.item_menu_link.router-link-exact-active,
.ana-referrals .fla_portal .fla_header .fla_header_nav li a.router-link-exact-active{background:var(--r-surface-3);color:var(--r-ink) !important;}
.ana-referrals .fla_portal .fla_sidebar_nav li.nav_item a.item_menu_link.router-link-exact-active:before{background-color:var(--r-accent) !important;}
.ana-referrals .fla_portal .fla_header{color:var(--r-muted) !important;}

/* =========================================================================
   3. STAT TILES / CARDS — frosted glass
   ========================================================================= */
.ana-referrals .fla_portal .fa_card_wrap{
  background:linear-gradient(155deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));
  border:1px solid var(--r-line);border-radius:14px;
}
.ana-referrals .fla_portal .fa_card_wrap .fa_card_icon{background-color:rgba(255,176,0,0.14);color:var(--r-accent);}
.ana-referrals .fla_portal .fa_card_wrap .fa_card_title{color:var(--r-muted);font-family:var(--r-mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.ana-referrals .fla_portal .fa_card_wrap .fa_card_value{color:var(--r-ink);font-family:var(--r-mono);font-weight:700;}

/* section headings + boxed sections */
.ana-referrals .fla_portal .fa_section_title,
.ana-referrals .fla_portal .fa_section_title h2{color:var(--r-ink);}
.ana-referrals .fla_portal .fa_section_header a{color:var(--r-accent);}
.ana-referrals .fla_portal .fa_section_content p{color:var(--r-muted);}
.ana-referrals .fla_portal .fa_boxed_section{
  background:var(--r-surface-2);border:1px solid var(--r-line);border-radius:14px;
}
.ana-referrals .fla_portal .fa_links_additional h4,
.ana-referrals .fla_portal .fa_section_sub_generated h4,
.ana-referrals .fla_portal .fa_rich_site_header h3,
.ana-referrals .fla_portal .fa_rich_site_titles h4,
.ana-referrals .fla_portal .fa_creative_section .fa_section_title{color:var(--r-ink);}
.ana-referrals .fla_portal .fa_rich_site_item{border-color:var(--r-line);}

/* portal notices → dark translucent with accent edge */
.ana-referrals .fla_portal .fa_portal_notice div{background:rgba(109,177,255,0.10);color:var(--r-ink);border:1px solid rgba(109,177,255,0.30);}
.ana-referrals .fla_portal .fa_portal_notice div.warning{background:rgba(232,179,74,0.12);border-color:rgba(232,179,74,0.34);}
.ana-referrals .fla_portal .fa_portal_notice div.error{background:rgba(255,90,77,0.12);border-color:rgba(255,90,77,0.40);}

/* =========================================================================
   4. INPUTS / SELECTS / TEXTAREA (Element Plus)
   ========================================================================= */
.ana-referrals .fla_portal .el-input__wrapper,
.ana-referrals .el-select__wrapper,
.ana-referrals .fla_portal .el-textarea__inner{
  background-color:#131312 !important;box-shadow:0 0 0 1px var(--r-line) inset !important;border-radius:10px;
}
.ana-referrals .fla_portal .el-input__wrapper.is-focus,
.ana-referrals .el-select__wrapper.is-focused{box-shadow:0 0 0 1px var(--r-accent) inset !important;}
.ana-referrals .fla_portal .el-input__inner,
.ana-referrals .el-select__placeholder,
.ana-referrals .fla_portal .el-textarea__inner{color:var(--r-ink) !important;}
.ana-referrals .fla_portal .el-input__inner::placeholder,
.ana-referrals .fla_portal .el-textarea__inner::placeholder{color:var(--r-faint);}
.ana-referrals .fla_portal .fa_form .el-form-item__label{color:var(--r-ink);}
/* monospace for the referral-link / copier fields */
.ana-referrals .fla_portal .fa_text_copier .el-input__inner{font-family:var(--r-mono);}
.ana-referrals .fla_portal .fa_text_copier .el-input-group__append{background:var(--r-surface-3) !important;color:var(--r-ink);border:1px solid var(--r-line);}
.ana-referrals .fla_portal .fa_text_copier .fa_copy_icon{color:var(--r-muted);}
.ana-referrals .fla_portal .fa_creative_section .el-textarea__inner{background-color:#131312 !important;font-family:var(--r-mono);}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.ana-referrals .fla_portal .el-button.fa_primary_button,
.ana-referrals .el-button--primary{
  background-color:var(--r-accent) !important;border-color:var(--r-accent) !important;color:var(--r-accent-ink) !important;border-radius:11px;
}
.ana-referrals .fla_portal .el-button.fa_primary_button:hover,
.ana-referrals .el-button--primary:hover{background-color:var(--r-accent-2) !important;border-color:var(--r-accent-2) !important;opacity:1;}
.ana-referrals .fla_portal .el-button{border-radius:11px;}
.ana-referrals .fla_portal .el-button:not(.fa_primary_button):not(.el-button--primary){
  background:var(--r-surface-3);border-color:var(--r-line);color:var(--r-ink);
}
.ana-referrals .fla_portal .el-button:not(.fa_primary_button):not(.el-button--primary):hover{border-color:var(--r-faint);color:var(--r-ink);}
.ana-referrals .fla_portal .fa_social_share .fa_social_share_btn{background:var(--r-surface-2);border-color:var(--r-line);color:var(--r-ink);}
.ana-referrals .fla_portal .fa_social_share .fa_social_share_btn:hover{background:var(--r-surface-3);border-color:var(--r-accent);}
.ana-referrals .fla_portal .fa_social_share .fa_social_share_label{color:var(--r-muted);}

/* checkbox */
.ana-referrals .fla_portal .el-checkbox.fa_checkbox.is-checked .el-checkbox__inner,
.ana-referrals .fla_portal .el-checkbox__input.is-checked .el-checkbox__inner{background-color:var(--r-accent);border-color:var(--r-accent);}
.ana-referrals .fla_portal .el-checkbox__label,.ana-referrals .fla_portal .el-checkbox{color:var(--r-ink);}

/* =========================================================================
   6. TABLES (referrals / payouts) — dark, hairline rows, mono figures
   ========================================================================= */
.ana-referrals .fla_portal .el-table,
.ana-referrals .fla_portal .el-table__inner-wrapper,
.ana-referrals .fla_portal .el-table tr,
.ana-referrals .fla_portal .el-table__body-wrapper{background-color:transparent;}
.ana-referrals .fla_portal .el-table.fa_table .el-table__header thead tr th{
  background-color:var(--r-surface) !important;color:var(--r-muted) !important;
  font-family:var(--r-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--r-line);
}
.ana-referrals .fla_portal .el-table.fa_table .el-table__body tbody tr td{
  background-color:var(--r-surface-2) !important;color:var(--r-ink) !important;
  border-bottom:1px solid var(--r-line);font-family:var(--r-mono);
}
.ana-referrals .fla_portal .el-table.fa_table tbody tr:hover>td{background-color:var(--r-surface-3) !important;}
.ana-referrals .fla_portal .el-table .sub_cell{color:var(--r-muted);}
.ana-referrals .fla_portal .el-table__empty-text{color:var(--r-muted);}
.ana-referrals .fla_portal .el-table--border .el-table__cell,
.ana-referrals .fla_portal .el-table td.el-table__cell,
.ana-referrals .fla_portal .el-table th.el-table__cell{border-color:var(--r-line) !important;}
/* el-table draws its outer border / lines via pseudo elements */
.ana-referrals .fla_portal .el-table::before,
.ana-referrals .fla_portal .el-table--border::after,
.ana-referrals .fla_portal .el-table__border-left-patch{background-color:var(--r-line) !important;}
.ana-referrals .fla_portal .el-table a{color:var(--r-accent);font-family:var(--r-mono);}

/* status badges → dark translucent pills, keep semantic hue, mono */
.ana-referrals .fla_portal .fla_status_badge{
  background:var(--r-surface-3);color:var(--r-muted);border:1px solid var(--r-line);
  border-radius:999px;font-family:var(--r-mono);font-weight:600;
}
.ana-referrals .fla_portal .fla_status_badge.active,
.ana-referrals .fla_portal .fla_status_badge.paid,
.ana-referrals .fla_portal .fla_status_badge.success{background:rgba(87,192,107,0.14);color:#6fd083;border-color:rgba(87,192,107,0.34);}
.ana-referrals .fla_portal .fla_status_badge.pending,
.ana-referrals .fla_portal .fla_status_badge.warning,
.ana-referrals .fla_portal .fla_status_badge.processing{background:rgba(232,179,74,0.14);color:#e8b34a;border-color:rgba(232,179,74,0.34);}
.ana-referrals .fla_portal .fla_status_badge.cancelled,
.ana-referrals .fla_portal .fla_status_badge.danger,
.ana-referrals .fla_portal .fla_status_badge.expired,
.ana-referrals .fla_portal .fla_status_badge.failed,
.ana-referrals .fla_portal .fla_status_badge.rejected{background:rgba(255,90,77,0.14);color:#ff8175;border-color:rgba(255,90,77,0.40);}

/* pagination */
.ana-referrals .fla_portal .fa_pagination_wrap .fa_pagination_text,
.ana-referrals .el-pagination{color:var(--r-muted);}
.ana-referrals .el-pagination.is-background button,
.ana-referrals .el-pagination.is-background .el-pager li{background-color:var(--r-surface-3) !important;color:var(--r-ink) !important;}
.ana-referrals .el-pagination.is-background .el-pager li.is-active{background-color:var(--r-accent) !important;color:var(--r-accent-ink) !important;}

/* =========================================================================
   7. COUPON / QR / DIALOG
   ========================================================================= */
.ana-referrals .fla_portal .fa_coupon_codes .fa_coupon_code{border-color:var(--r-line);background:var(--r-surface-2);border-radius:11px;}
.ana-referrals .fla_portal .fa_coupon_code .fa_coupon_code_value{color:var(--r-ink);font-family:var(--r-mono);font-weight:700;}
.ana-referrals .fla_portal .fa_coupon_code .fa_coupon_code_description{color:var(--r-muted);}
.ana-referrals .fla_portal .fa_qr_code_widget{background:var(--r-surface-2);border-color:var(--r-line);}
.ana-referrals .fla_portal .fa_qr_code_widget .fa_qr_code_info p{color:var(--r-muted);}
/* keep the QR image area light so the code stays scannable */
.ana-referrals .fla_portal .fa_qr_code_widget .fa_qr_code_preview{background:#fff;border-color:var(--r-line);}
.ana-referrals .el-dialog.fa_common_dialog{background:var(--r-surface-2);border:1px solid var(--r-line);border-radius:14px;}
.ana-referrals .el-dialog.fa_common_dialog .el-dialog__header{border-color:var(--r-line);}
.ana-referrals .el-dialog__title,.ana-referrals .el-dialog__body{color:var(--r-ink);}
/* body-appended select dropdown poppers (still descendants of body.ana-referrals) */
.ana-referrals .el-popper.is-light,
.ana-referrals .el-select-dropdown{background:var(--r-surface-2) !important;border-color:var(--r-line) !important;color:var(--r-ink);}
.ana-referrals .el-select-dropdown__item{color:var(--r-ink);}
.ana-referrals .el-select-dropdown__item.is-hovered,
.ana-referrals .el-select-dropdown__item:hover{background:var(--r-surface-3);}
.ana-referrals .el-popper__arrow::before{background:var(--r-surface-2) !important;border-color:var(--r-line) !important;}

/* pending / inactive notice */
.ana-referrals .fa-no-access{
  background:linear-gradient(155deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)) !important;
  border:1px solid var(--r-line) !important;border-radius:14px;color:var(--r-ink);max-width:600px;margin:0 auto;
}
.ana-referrals .fa-no-access p{color:var(--r-muted);}

/* =========================================================================
   8. AUTH FORMS (logged-out: login + registration) — frosted card
   ========================================================================= */
.ana-referrals .fa_auth_warp{
  background:linear-gradient(155deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
  -webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);
  border:1px solid var(--r-glass-border);border-radius:16px;
  box-shadow:0 16px 50px -18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.16);
  padding:28px 26px;margin:8px auto 40px;
}
.ana-referrals .fa_auth_form_header h3{font-size:24px;font-weight:800;letter-spacing:-0.01em;color:var(--r-ink);margin:0 0 6px;}
.ana-referrals .fa_auth_form_header p{color:var(--r-muted);font-size:14px;margin:0;}
.ana-referrals .fa_about h3{color:var(--r-ink);font-family:var(--r-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--r-line);padding-bottom:8px;margin:8px 0 4px;}

/* fields — register (FormBuilder) + login (native) share the look */
.ana-referrals .fa_form-group{margin-bottom:14px;}
.ana-referrals .fa_form_label label,
.ana-referrals .fa_native_login .fcom_form-group > label,
.ana-referrals .fa_native_login .login-username label,
.ana-referrals .fa_native_login .login-password label{
  display:block;font-family:var(--r-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#f3f2ec;margin-bottom:7px;   /* contrast fix: was near-invisible faint grey */
}
.ana-referrals .fa_form_input input,
.ana-referrals .fa_form_input textarea,
.ana-referrals .fa_form_input select,
.ana-referrals .fa_native_login input.input,
.ana-referrals .fa_native_login input[type=text],
.ana-referrals .fa_native_login input[type=email],
.ana-referrals .fa_native_login input[type=password]{
  width:100%;background:#131312;border:1px solid var(--r-line);border-radius:10px;color:var(--r-ink);
  font:600 14px var(--r-sans);padding:12px 13px;outline:none;box-sizing:border-box;
}
.ana-referrals .fa_form_input input:focus,
.ana-referrals .fa_form_input textarea:focus,
.ana-referrals .fa_form_input select:focus,
.ana-referrals .fa_native_login input:focus{border-color:var(--r-accent);}
/* placeholders: clearly legible mid-grey (was near-invisible) */
.ana-referrals .fa_form_input input::placeholder,
.ana-referrals .fa_form_input textarea::placeholder,
.ana-referrals .fa_native_login input::placeholder{color:#9b9a92;opacity:1;}
.ana-referrals .fa_form_input textarea{min-height:96px;resize:vertical;}
/* crypto network selector — match the dark field look + custom caret */
.ana-referrals .fa_form_input select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9a92' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;margin-bottom:10px;
}
.ana-referrals .fa_form_input select option{background:#131312;color:var(--r-ink);}
.ana-referrals .fa_native_login .login-remember label{display:inline-flex;align-items:center;gap:8px;color:var(--r-ink);
  font-family:var(--r-sans);font-size:13px;text-transform:none;letter-spacing:0;}
.ana-referrals .fa_native_login .login-remember input{width:auto;accent-color:var(--r-accent);}
/* help / description text → readable muted */
.ana-referrals .fa_help_text,.ana-referrals .fa_form .fcom_help_text p{color:#b9b8b0;}

/* ---- T&C inline checkbox (Fix 2): checkbox + label on one centred row ---- */
.ana-referrals .fa_inline_checkbox{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
.ana-referrals .fa_inline_checkbox input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;cursor:pointer;
  background:#131312;border:1px solid var(--r-line);border-radius:5px;position:relative;transition:background .15s,border-color .15s;
}
.ana-referrals .fa_inline_checkbox input[type=checkbox]:hover{border-color:var(--r-faint);}
.ana-referrals .fa_inline_checkbox input[type=checkbox]:checked{background:var(--r-accent);border-color:var(--r-accent);}
.ana-referrals .fa_inline_checkbox input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #2c2c2c;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.ana-referrals .fa_inline_checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px;}
.ana-referrals .fa_inline_checkbox label{margin:0;color:#f3f2ec;font-family:var(--r-sans);font-size:14px;line-height:1.4;cursor:pointer;
  text-transform:none;letter-spacing:0;}
.ana-referrals .fa_inline_checkbox label a{color:var(--r-accent);text-decoration:underline;}
.ana-referrals .fa_inline_checkbox label a:hover{color:var(--r-accent-2);}

/* ---- Browser autofill override (Fix 3): keep fields dark, text cream ---- */
.ana-referrals input:-webkit-autofill,
.ana-referrals input:-webkit-autofill:hover,
.ana-referrals input:-webkit-autofill:focus,
.ana-referrals input:-webkit-autofill:active,
.ana-referrals textarea:-webkit-autofill,
.ana-referrals select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #131312 inset !important;
  box-shadow:0 0 0 1000px #131312 inset !important;
  -webkit-text-fill-color:#f3f2ec !important;
  caret-color:#f3f2ec;
  transition:background-color 9999s ease-in-out 0s; /* defer the browser's white repaint */
}

/* ---- "Affiliate Registration" heading clears the sticky site header on load ---- */
.ana-referrals .fa_auth_form_header h3,
.ana-referrals .fa_auth_warp,
.ana-referrals #fa-customer-portal{scroll-margin-top:96px;}

/* buttons (auth) */
.ana-referrals .fa_btn,
.ana-referrals .fa_native_login .button-primary,
.ana-referrals .fa_native_login input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:11px;padding:13px 20px;font:800 14px var(--r-sans);border:1.5px solid transparent;cursor:pointer;text-decoration:none;
}
.ana-referrals .fa_btn_primary,
.ana-referrals .fa_btn_submit,
.ana-referrals .fa_native_login .button-primary,
.ana-referrals .fa_native_login input[type=submit]{background:var(--r-accent) !important;border-color:var(--r-accent) !important;color:var(--r-accent-ink) !important;}
.ana-referrals .fa_btn_primary:hover,
.ana-referrals .fa_btn_submit:hover,
.ana-referrals .fa_native_login .button-primary:hover{background:var(--r-accent-2) !important;border-color:var(--r-accent-2) !important;}
.ana-referrals .fa_btn_submit{width:100%;margin-top:6px;}
.ana-referrals .fa_btn_secondary{background:var(--r-surface-3) !important;border-color:var(--r-line) !important;color:var(--r-ink) !important;}
.ana-referrals .fa_btn_secondary:hover{border-color:var(--r-faint) !important;}
.ana-referrals .fa_auth_footer{margin-top:20px;padding-top:18px;border-top:1px solid var(--r-line);}
.ana-referrals .fa_auth_footer p{color:var(--r-muted);font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;}
.ana-referrals .fa_native_login .login-submit{margin-bottom:0;}

/* =========================================================================
   9. RESPONSIVE — match site breakpoints; let tables scroll on narrow screens
   ========================================================================= */
.ana-referrals .fla_portal .el-table__body-wrapper{overflow-x:auto;}
@media (max-width:782px){
  .ana-referrals .fa_auth_warp{padding:22px 18px;}
  .ana-referrals .fla_portal .fa_cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px){
  .ana-referrals .fla_portal .fa_cards{grid-template-columns:1fr;}
  .ana-referrals .fla_portal .fa_pagination_wrap{gap:12px;}
}