@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Sarabun:wght@400;500;600&display=swap');

/* ============================================================
   BETA-PB · Tactical theme skin for the referral (rf-) system
   เปลี่ยนเฉพาะ สี / ฟอนต์ / ขอบ / เงา — ไม่แตะ layout / JS
   วางลิงก์ไฟล์นี้ "หลัง" referral.css เสมอ
   ============================================================ */

/* ---------- พื้นหลัง + ฟอนต์รวม ---------- */
body {
  font-family: 'Sarabun', Tahoma, Arial, sans-serif !important;
  color: #eef4fb !important;
  background-color: #080b10 !important;
  background-image:
    radial-gradient(circle at 85% -6%, rgba(56, 189, 248, .16), transparent 36%),
    radial-gradient(circle at 8% 108%, rgba(208, 47, 32, .16), transparent 40%) !important;
  background-attachment: fixed !important;
}

/* ---------- พาเนล / การ์ด ---------- */
.rf-panel,
.rf-gm-panel {
  background: linear-gradient(180deg, #161d27, #0d131b) !important;
  border: 1px solid #344150 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36) !important;
  color: #eef4fb !important;
}
.rf-card {
  background: linear-gradient(180deg, #18202b, #0d131b) !important;
  border: 1px solid #344150 !important;
  border-radius: 10px !important;
  color: #eef4fb !important;
}
.rf-card strong { color: #fff !important; font-family: 'Chakra Petch', sans-serif !important; }

/* ---------- หัวข้อ / ข้อความ ---------- */
.rf-title {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  border-left: 4px solid #d02f20 !important;
  padding-left: 10px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
}
.rf-sub { color: #9aa6b4 !important; }
.rf-muted { color: #7e8a99 !important; }
.rf-inline-link,
.rf-panel a:not(.rf-btn):not(.rf-gm-btn):not(.rf-status-btn) {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}
.rf-check { color: #34d399 !important; }

/* ---------- callout ---------- */
.rf-callout {
  background: #0c1118 !important;
  border: 1px solid #2c3745 !important;
  border-left: 3px solid #38bdf8 !important;
  border-radius: 9px !important;
  color: #cbd5e1 !important;
}
.rf-callout strong { color: #fff !important; }

/* ---------- code chip ---------- */
.rf-code {
  font-family: 'Chakra Petch', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #38bdf8 !important;
  background: #0a0f15 !important;
  border: 1px dashed #38bdf8 !important;
  border-radius: 6px !important;
  padding: 1px 8px !important;
}

/* ---------- metric cards ---------- */
.rf-metric strong,
.rf-gm-metric strong,
.rf-gm-point-side strong {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
}
.rf-metric span,
.rf-gm-metric span,
.rf-gm-point-side span {
  color: #a9b4c2 !important;
  letter-spacing: 1px !important;
}
/* การ์ดเมตริกใบแรก (BC ถอนได้) เน้นทอง */
.rf-hero .rf-grid .rf-metric:first-child,
.rf-gm-point-side {
  background: radial-gradient(circle at 70% 20%, rgba(251, 191, 36, .16), transparent 60%), linear-gradient(180deg, #1c2333, #0d131b) !important;
  border: 1px solid #4a3a12 !important;
}
.rf-hero .rf-grid .rf-metric:first-child strong,
.rf-gm-point-side strong {
  color: #fbbf24 !important;
  text-shadow: 0 0 18px rgba(251, 191, 36, .4) !important;
}

/* ---------- ฟอร์ม ---------- */
.rf-field label { color: #e6edf6 !important; font-weight: 600 !important; }
.rf-input,
.rf-textarea {
  background: #0d1219 !important;
  color: #eef4fb !important;
  border: 1px solid #3a4655 !important;
  border-radius: 7px !important;
}
.rf-input::placeholder,
.rf-textarea::placeholder { color: #7e8a99 !important; }
.rf-input:focus,
.rf-textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18) !important;
  outline: none !important;
}

/* ---------- ปุ่ม ---------- */
.rf-btn {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, #d02f20, #b8281a) !important;
  box-shadow: 0 8px 18px rgba(208, 47, 32, .28) !important;
}
.rf-btn:hover { background: linear-gradient(90deg, #b8281a, #9c2015) !important; }
.rf-btn.green {
  background: linear-gradient(90deg, #16a34a, #15803d) !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .28) !important;
}
.rf-btn.green:hover { background: linear-gradient(90deg, #15803d, #136a33) !important; }
.rf-btn.red {
  background: linear-gradient(90deg, #ef4444, #b8281a) !important;
  box-shadow: 0 8px 18px rgba(180, 35, 24, .22) !important;
}

/* ---------- flash ---------- */
.rf-flash {
  border-radius: 9px !important;
  border: 1px solid #38bdf8 !important;
  background: rgba(14, 116, 144, .28) !important;
  color: #cffafe !important;
}
.rf-flash.error {
  border-color: #ef4444 !important;
  background: rgba(127, 29, 29, .35) !important;
  color: #fecaca !important;
}
.rf-flash.ok,
.rf-flash.success {
  border-color: #22c55e !important;
  background: rgba(20, 83, 45, .34) !important;
  color: #bbf7d0 !important;
}

/* ---------- ตาราง ---------- */
.rf-table {
  background: transparent !important;
  border: 1px solid #2c3745 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.rf-table th {
  background: #0f151d !important;
  color: #fbbf24 !important;
  border-bottom: 1px solid #2c3745 !important;
}
.rf-table td {
  color: #eef4fb !important;
  border-bottom: 1px solid #2c3745 !important;
}
.rf-table tbody tr:hover td { background: #18202b !important; }

/* ---------- status pill ---------- */
.rf-status {
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  background: rgba(56, 189, 248, .14) !important;
  color: #bae6fd !important;
  border: 1px solid rgba(56, 189, 248, .35) !important;
}
.rf-status.approved,
.rf-status.paid,
.rf-status.done {
  background: rgba(34, 197, 94, .16) !important;
  color: #bbf7d0 !important;
  border-color: rgba(34, 197, 94, .42) !important;
}
.rf-status.pending {
  background: rgba(245, 158, 11, .16) !important;
  color: #fde68a !important;
  border-color: rgba(245, 158, 11, .42) !important;
}
.rf-status.rejected,
.rf-status.canceled {
  background: rgba(239, 68, 68, .16) !important;
  color: #fecaca !important;
  border-color: rgba(239, 68, 68, .42) !important;
}

/* status button (earnings reward steps) */
.rf-status-btn {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  cursor: pointer !important;
}
.rf-status-btn.approved {
  background: rgba(34, 197, 94, .16) !important;
  color: #bbf7d0 !important;
  border: 1px solid rgba(34, 197, 94, .42) !important;
}
.rf-status-btn.pending {
  background: rgba(56, 189, 248, .14) !important;
  color: #bae6fd !important;
  border: 1px solid rgba(56, 189, 248, .4) !important;
}

/* ---------- gift manager (rf-gm-*) ---------- */
.rf-gm-section-head h2 { font-family: 'Chakra Petch', sans-serif !important; color: #fff !important; }
.rf-gm-pill {
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: rgba(56, 189, 248, .14) !important;
  color: #bae6fd !important;
  border: 1px solid rgba(56, 189, 248, .4) !important;
}
.rf-gm-pill.cyan { color: #67e8f9 !important; border-color: rgba(56, 189, 248, .5) !important; }
.rf-gm-dot { background: #38bdf8 !important; box-shadow: 0 0 8px rgba(56, 189, 248, .7) !important; }
.rf-gm-control-stack label { color: #cbd5e1 !important; }
.rf-gm-control-stack input,
#dashGiftSearch {
  background: #0d1219 !important;
  color: #eef4fb !important;
  border: 1px solid #3a4655 !important;
  border-radius: 7px !important;
}
.rf-gm-control-stack input:focus,
#dashGiftSearch:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18) !important;
  outline: none !important;
}
.rf-gm-picker h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  color: #fbbf24 !important;
}
.rf-gm-pick-item {
  background: #101720 !important;
  border: 1px solid #334150 !important;
  border-left: 3px solid #38bdf8 !important;
  border-radius: 6px !important;
  color: #fff !important;
  cursor: pointer !important;
}
.rf-gm-pick-item:hover { background: #1a2531 !important; border-left-color: #fbbf24 !important; }
.rf-gm-pick-item strong { color: #fff !important; }
.rf-gm-selected-item-row {
  background: #101720 !important;
  border: 1px solid #334150 !important;
  border-left: 3px solid #34d399 !important;
  border-radius: 6px !important;
}
.rf-gm-selected-name { color: #fff !important; font-weight: 600 !important; }
.rf-gm-selected-name span { color: #fbbf24 !important; }
.rf-gm-metric,
.rf-gm-point-side {
  border-radius: 10px !important;
}
.rf-gm-btn {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
.rf-gm-btn.primary { background: linear-gradient(90deg, #16a34a, #15803d) !important; box-shadow: 0 8px 18px rgba(22, 163, 74, .28) !important; }
.rf-gm-btn.primary:disabled { opacity: .45 !important; cursor: not-allowed !important; }
.rf-gm-btn.danger { background: linear-gradient(90deg, #ef4444, #b8281a) !important; }
.rf-gm-danger-note { color: #fca5a5 !important; }
.rf-gm-empty-note { color: #7e8a99 !important; }

/* ---------- preview image ---------- */
.rf-preview-img {
  border: 1px solid #3a4655 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .36) !important;
}

/* ---------- modal (earnings) ---------- */
.rf-modal-backdrop { background: rgba(4, 6, 10, .72) !important; }
.rf-modal-panel {
  background: linear-gradient(180deg, #161d27, #0d131b) !important;
  border: 1px solid #344150 !important;
  border-radius: 12px !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55) !important;
  color: #eef4fb !important;
}
.rf-modal-close { color: #a9b4c2 !important; }
.rf-modal-close:hover { color: #fff !important; }
.rf-progress-head span { color: #cbd5e1 !important; }
.rf-progress-head strong { color: #fff !important; }
.rf-progress {
  background: #1a232f !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.rf-progress span {
  background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
}

/* ---------- hero login CTA ---------- */
.rf-login-hero-btn { font-family: 'Chakra Petch', sans-serif !important; }

/* ---------- แถบเมนูบน (topbar / nav) ---------- */
.rf-topbar {
  background: linear-gradient(90deg, #080b10, #151c26 55%, #0a0d12) !important;
  border-bottom: 3px solid #d02f20 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45) !important;
}
.rf-brand {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
}
.rf-brand:hover { color: #fbbf24 !important; text-decoration: none !important; }
.rf-nav a {
  color: #e6edf6 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: rgba(56, 189, 248, .08) !important;
  border: 1px solid rgba(56, 189, 248, .18) !important;
}
.rf-nav a:hover {
  background: rgba(208, 47, 32, .25) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.rf-nav a.active {
  background: rgba(208, 47, 32, .3) !important;
  border-color: #d02f20 !important;
  color: #fff !important;
}