/* ============================================================
   FlashBill — affiliate.css
   Phase 5 — inline styles extracted from affiliate templates
   ============================================================ */

/* Stat grid */
.aff-stat__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.aff-stat__card { margin: 0; text-align: center; padding: 20px; }
.aff-stat__value { font-size: 28px; font-weight: 800; color: var(--color-text); }
.aff-stat__value--gold { color: var(--gold); }
.aff-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; font-weight: 600; }

/* Two col layout */
.aff__layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }

/* Tier card */
.aff__tier-card { padding: 20px; margin-bottom: 16px; }
.aff__tier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.aff-tiers__name { color: var(--gold); text-transform: capitalize; margin-left: 6px; }
.aff-tier-rate { font-size: var(--text-sm); color: var(--color-text-muted); margin-left: 8px; }
.aff-tier-next { font-size: var(--text-sm); color: var(--color-text-muted); }
.aff-tier-max { font-size: var(--text-sm); color: var(--gold); font-weight: 600; }
.aff-progress-bar { background: var(--color-border); border-radius: 99px; height: 8px; overflow: hidden; }
.aff-progress-fill { background: var(--gold); height: 8px; border-radius: 99px; transition: width 0.3s; width: var(--progress, 0%); }
.aff-progress-label { font-size: 12px; color: var(--color-text-light); margin-top: 6px; }

/* Links card */
.aff__links-card { padding: 20px; margin-bottom: 16px; }
.aff__links-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.aff__link-group { margin-bottom: 14px; }
.aff__link-label { font-size: 12px; color: var(--color-text-muted); display: block; margin-bottom: 6px; }
.aff__link-row { display: flex; gap: 8px; }
.aff-link-input { flex: 1; font-family: monospace; font-size: var(--text-sm); }

/* Conversions card */
.aff__conv-card { padding: 0; overflow: hidden; }
.aff-conv-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.aff__conv-title { font-size: 14px; font-weight: 700; }
.aff-conv-empty { padding: 32px; text-align: center; color: var(--color-text-muted); font-size: 14px; }

/* Earnings card */
.aff__earnings-card { padding: 20px; }
.aff__earnings-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.aff-earnings-total { text-align: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.aff-earnings-total__value { font-size: 28px; font-weight: 800; color: var(--gold); }
.aff-earnings-total__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.aff__earnings-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.aff__earnings-row--last { display: flex; justify-content: space-between; }
.aff-earnings-label { color: var(--color-text-muted); font-size: var(--text-sm); }
.aff__earnings-value { font-weight: 600; }
.aff__earnings-note { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 12px; }
.aff__earnings-note p { font-size: 12px; color: var(--color-text-light); margin: 0; }

/* -- AFFILIATE PUBLIC PAGE -- */
/* Rendered inside public_base.html (landing stack) — .aff-public__wrap provides
   the page container and --text-sm fallbacks cover the missing app tokens. */
.aff-public__wrap { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }
.aff-hero__card { padding: 32px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #1a1a2e, #16213e); }
.aff-hero__emoji { font-size: 40px; margin-bottom: 12px; }
.aff-hero__title { font-size: 24px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.aff-hero__sub { color: var(--color-text-muted); font-size: 15px; max-width: 500px; margin: 0 auto 24px; }
.aff-hero__btn-ml { margin-left: 8px; }
.aff-tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.aff__tier-card--base { padding: 24px; text-align: center; margin: 0; }
.aff__tier-card--featured { padding: 24px; text-align: center; margin: 0; border: 2px solid var(--gold); }
.aff-tiers__emoji { font-size: 32px; margin-bottom: 8px; }
.aff-tiers__name--gold { font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.aff-tiers__pct { font-size: 32px; font-weight: 800; margin-bottom: 4px; }
.aff-tiers__desc { font-size: var(--text-sm, 0.813rem); color: var(--color-text-muted); }
.aff-how__card { padding: 24px; margin-bottom: 20px; }
.aff-how__title { font-size: 15px; font-weight: 700; margin-bottom: 20px; }
.aff-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.aff-how__emoji { font-size: 28px; margin-bottom: 8px; }
.aff-how__step-title { font-weight: 600; color: var(--gold); margin-bottom: 4px; }
.aff-how__step-desc { font-size: var(--text-sm, 0.813rem); color: var(--color-text-muted); }
.aff-details__card { padding: 24px; }
.aff-details__title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.aff-details__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aff-details__item { display: flex; gap: 8px; align-items: center; }
.aff-details-check { color: var(--gold); }
.aff-details-label { color: var(--color-text-muted); }

/* ── AFFILIATE APPLY PAGE ── */
.aff-apply__layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.aff-apply__card { padding: 24px; }
.aff-apply__title { font-size: 15px; font-weight: 700; margin-bottom: 20px; }
.aff-apply__field { margin-bottom: 16px; }
.aff-apply__field--lg { margin-bottom: 24px; }
.aff-apply-label { font-size: 13px; color: var(--color-text-muted); display: block; margin-bottom: 6px; }
.aff-apply__optional { color: var(--color-text-light); }
.aff-apply__required { color: var(--status-overdue-border); }
.aff-apply__input { width: 100%; }
.aff-apply__hint { font-size: 12px; color: var(--color-text-light); margin-top: 4px; }
.aff-apply__submit { width: 100%; }
.aff-next__card { padding: 24px; margin-bottom: 16px; }
.aff-next__title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.aff-next__list { color: var(--color-text-muted); font-size: var(--text-sm); padding-left: 20px; margin: 0; }
.aff-next__list li { margin-bottom: 10px; }
.aff-tiers__card { padding: 24px; }
.aff-tiers__title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.a.aff-apply__card { padding: 24px; }
.aff-apply__title { font-size: 15px; font-weight: 700; margin-bottrder-bottom: 1px solid var(--color-border); }
.aff-tier-row__name { font-size: var(--text-sm); }
.aff-tier-row__range { font-size: var(--text-sm); color: var(--color-text-muted); }
.aff-tier-row__pct { font-weight: 700; color: var(--gold); }

/* ── AFFILIATE ADMIN LIST ── */
.aff-admin__card { padding: 0; overflow: hidden; }
.aff-admin-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.aff-admin__title { font-size: 15px; font-weight: 700; }
.aff-admin-count { font-size: var(--text-sm); color: var(--color-text-muted); }
.aff-admin-code { color: var(--gold); font-size: var(--text-sm); }
.aff-admin-tier { text-transform: capitalize; color: var(--color-text-muted); font-size: var(--text-sm); }
.aff-admin-balance { color: var(--gold); font-weight: 600; }
.aff-admin-date { color: var(--color-text-muted); font-size: var(--text-sm); }
.aff-admin__actions { display: flex; gap: 6px; }
.aff-admin__empty { padding: 48px 24px; text-align: center; }
.aff-admin__empty__icon { font-size: 40px; margin-bottom: 12px; }
.aff-admin__empty__title { font-size: 16px; margin-bottom: 8px; }
.aff-admin__empty__hint { color: var(--color-text-muted); font-size: 14px; }

.aff-join__wrap { max-width: 520px; margin: 0 auto; }
.aff-join__card { padding: 40px; text-align: center; }
.aff-join__icon { font-size: 48px; margin-bottom: 16px; }
.aff-join__title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.aff-join__sub { color: var(--color-text-muted); margin-bottom: 24px; }
.aff-join-inviter { color: var(--sidebar); }
.aff-join__features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; text-align: left; }
.aff-join__feature { padding: 16px; margin: 0; }
.aff-join__feature__icon { font-size: 24px; margin-bottom: 6px; }
.aff-join__feature__title { font-weight: 600; font-size: 14px; }
.aff-join__feature__desc { font-size: 12px; color: var(--color-text-muted); }
.aff-join__cta-btn { width: 100%; margin-bottom: 10px; font-size: 16px; }
.aff-join-login { font-size: 13px; color: var(--color-text-muted); text-decoration: none; }
.aff-join-login__highlight { color: var(--gold); }