:root {
  --ebp-primary: #0d6efd;
}

body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

.hero-section {
  background: linear-gradient(135deg, #0d6efd 0%, #0a2a6b 100%);
}

.ussd-phone-mock {
  width: 260px;
  background: #1c1c1e;
  border-radius: 2rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.ussd-screen {
  background: #d7f0d2;
  color: #0a2a0a;
  font-family: 'Courier New', monospace;
  font-size: .85rem;
  white-space: pre-wrap;
  border-radius: .5rem;
  padding: 1rem;
  min-height: 220px;
}

.product-card { transition: transform .15s ease, box-shadow .15s ease; border: 1px solid rgba(0,0,0,.08); }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.08); }

.how-step {
  width: 70px; height: 70px; border-radius: 50%;
  background: #e7f1ff; color: var(--ebp-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto;
}

.pin-box {
  background: #f8f9fa;
  border: 1px dashed #adb5bd;
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-family: monospace;
}

.badge.status-success { background: #198754; color: #fff; }
.badge.status-pending  { background: #ffc107; color: #212529; }
.badge.status-failed   { background: #dc3545; color: #fff; }
.badge.status-cancelled{ background: #6c757d; color: #fff; }
.badge.status-available,
.badge.status-Available { background: #198754; color: #fff; }
.badge.status-sold,
.badge.status-Sold      { background: #6c757d; color: #fff; }
.badge.status-reserved,
.badge.status-Reserved  { background: #ffc107; color: #212529; }

/* ---------------- Dark mode ---------------- */
:root[data-theme="dark"] body {
  background: #111418; color: #e6e6e6;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .navbar.bg-light {
  background-color: #1b1f24 !important; color: #e6e6e6;
}
:root[data-theme="dark"] .table { color: #e6e6e6; }
:root[data-theme="dark"] .pin-box,
:root[data-theme="dark"] .alert-light { background: #23272d; border-color: #3a3f47; color: #e6e6e6; }
:root[data-theme="dark"] .text-muted { color: #9aa4af !important; }