/* ============================================================
   referral.css  —  Refer & Earn page.
   Bottom two panels use Bootstrap cards/grid; the navy invite
   hero, steps and stat tiles are custom. Scoped to .page-referral.
   ============================================================ */

/* invite hero */
.page-referral .rf-hero { background: var(--navy); border-radius: var(--r-xl); padding: 28px; margin-bottom: 20px; text-align: center; }
.page-referral .rf-heading { font-family: 'poppins', serif; font-size: 24px; color: #fff; margin-bottom: 8px; }
.page-referral .rf-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 20px; line-height: 1.6; }
.page-referral .rf-linkbox { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 12px; max-width: 460px; margin: 0 auto 16px; }
.page-referral .rf-link { flex: 1; font-size: 13px; color: var(--gold-light); font-family: 'DM Mono', monospace; text-align: left; word-break: break-all; }
.page-referral .rf-copy { background: var(--gold); color: var(--navy); border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; flex-shrink: 0; }
.page-referral .rf-copy:hover { background: var(--gold-light); }
.page-referral .rf-share { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.page-referral .rf-share-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 9px 18px; font-size: 13px; color: #fff; cursor: pointer; font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: 7px; }
.page-referral .rf-share-btn:hover { background: rgba(255,255,255,0.14); }

/* how it works steps */
.page-referral .rf-step { display: flex; align-items: center; gap: 12px; }
.page-referral .rf-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-bg); border: 1px solid var(--blue); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex-shrink: 0; }
.page-referral .rf-step-text { font-size: 13px; color: var(--ink2); line-height: 1.5; }

/* stat tiles */
.page-referral .rf-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; height: 100%; text-align: left; }
.page-referral .rf-stat-val { font-family: 'poppins', serif; font-size: 22px; font-weight: 500; color: var(--ink); }
.page-referral .rf-stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.page-referral .rf-referred { font-size: 12px; color: var(--ink2); background: var(--surface2); border-radius: var(--r); padding: 10px 12px; line-height: 1.6; }