/* ReferralPro - Main Stylesheet */
:root {
  --primary: #4361ee;
  --success: #2ec4b6;
  --warning: #ff9f1c;
  --danger: #e63946;
  --dark: #1d2d44;
}

body { background: #f0f2f5; font-family: 'Segoe UI', sans-serif; }

/* Hero */
.hero-section {
  background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
  color: white;
  padding: 80px 0 60px;
}
.hero-section h1 { font-size: 2.8rem; font-weight: 800; }

/* Cards */
.stat-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform .2s;
}
.stat-card:hover { transform: translateY(-4px); }
.stat-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: white;
}
.bg-gradient-blue   { background: linear-gradient(135deg,#4361ee,#3a86ff); }
.bg-gradient-green  { background: linear-gradient(135deg,#2ec4b6,#06d6a0); }
.bg-gradient-orange { background: linear-gradient(135deg,#ff9f1c,#ff6b35); }
.bg-gradient-purple { background: linear-gradient(135deg,#7b2d8b,#a663cc); }

.card { border: none; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }

/* Referral code box */
.referral-code-box {
  background: linear-gradient(135deg,#4361ee,#3a0ca3);
  border-radius: 16px; color: white; padding: 28px;
}
.referral-code {
  font-size: 2rem; font-weight: 800; letter-spacing: 4px;
  background: rgba(255,255,255,.2); border-radius: 10px;
  padding: 10px 20px; display: inline-block; margin: 10px 0;
}

/* Product card */
.product-card { transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.13) !important; }
.commission-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--warning); color: #fff;
  font-size: .75rem; font-weight: 700; border-radius: 20px; padding: 4px 10px;
}

/* Tables */
.table thead th { background: #f8f9ff; border: none; color: #555; font-weight: 600; }
.table td { vertical-align: middle; }

/* Steps */
.step-number {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; margin: 0 auto 12px;
}

/* Badges */
.badge-pending  { background: #fff3cd; color: #856404; }
.badge-approved { background: #d1e7dd; color: #0f5132; }
.badge-paid     { background: #cff4fc; color: #055160; }
.badge-cancelled{ background: #f8d7da; color: #842029; }
.badge-rejected { background: #f8d7da; color: #842029; }
.badge-processed{ background: #cff4fc; color: #055160; }

/* Sidebar */
.sidebar { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.sidebar .nav-link { color: #555; border-radius: 8px; padding: 10px 14px; margin-bottom: 4px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: #f0f2ff; color: var(--primary); }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }
.fade-in { animation: fadeIn .4s ease forwards; }

/* Copy button */
.btn-copy { cursor: pointer; }

@media (max-width: 768px) {
  .hero-section h1 { font-size: 1.9rem; }
  .referral-code { font-size: 1.4rem; letter-spacing: 2px; }
}