/* ============================================================
   FastData GH — Redesigned Stylesheet v3.0
   Aesthetic: Premium African Fintech — Warm Gold × Deep Charcoal
   Architecture: Mobile-first · CSS Custom Properties · Component-based
   Breakpoints: 480 · 640 · 768 · 1024 · 1280
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
:root {
  --navy:        #1a1a2e;
  --navy-dark:   #0f0f1a;
  --navy-light:  #252540;
  --slate:       #8a8fa8;
  --lemon:       #fbbf24;
  --white:       #ffffff;
  --off-white:   #f4f5f9;
  --border:      #e2e5ef;
  --accent:      #f59e0b;
  --accent2:     #d97706;
  --success:     #10b981;
  --success-bg:  #ecfdf5;
  --success-text:#065f46;
  --warning:     #f59e0b;
  --warning-bg:  #fffbeb;
  --warning-text:#78350f;
  --danger:      #ef4444;
  --danger-bg:   #fef2f2;
  --danger-text: #7f1d1d;
  --info:        #6366f1;
  --info-bg:     #eef2ff;
  --info-text:   #3730a3;
  --grad-brand:  linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --grad-navy:   linear-gradient(135deg, #1a1a2e 0%, #252540 100%);
  --grad-success:linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-warm:   linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-purple: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --font:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'DM Mono', 'Consolas', 'Monaco', monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:9999px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md: 0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.05);
  --shadow-gold: 0 4px 20px rgba(245,158,11,.3);
  --ease:      .2s ease;
  --ease-slow: .35s cubic-bezier(.4,0,.2,1);
  --header-h:  64px;
  --max-w:     1340px;
  --content-px:16px;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font); font-size:15px; line-height:1.65;
  color:#1e2040; background:var(--off-white);
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button,input,select,textarea { font-family:inherit; }

/* ── 3. TYPOGRAPHY ────────────────────────────────────────── */
h1 { font-size:clamp(1.5rem,4vw,2.1rem); font-weight:800; line-height:1.2; letter-spacing:-.03em; }
h2 { font-size:clamp(1.25rem,3vw,1.65rem); font-weight:700; line-height:1.3; letter-spacing:-.02em; }
h3 { font-size:clamp(1rem,2.5vw,1.2rem); font-weight:700; letter-spacing:-.01em; }
h4 { font-size:1rem; font-weight:600; }
.subtitle   { color:var(--slate); font-size:.95rem; }
.text-muted { color:var(--slate); }

/* ── 4. LAYOUT ────────────────────────────────────────────── */
.content {
  flex:1; width:100%; max-width:var(--max-w);
  padding:var(--s5) var(--content-px);
  display:flex; flex-direction:column; align-items:stretch;
}

/* ── 5. HEADER ────────────────────────────────────────────── */
.header {
  width:100%; height:var(--header-h);
  background:var(--navy-dark);
  color:var(--white); display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--s5);
  position:sticky; top:0; z-index:900;
  border-bottom:1px solid rgba(245,158,11,.15);
  box-shadow:0 2px 20px rgba(0,0,0,.35);
}
.title {
  font-size:1.2rem; font-weight:800; letter-spacing:-.02em;
  color:var(--white); display:flex; align-items:center; gap:var(--s2);
}
.title i { color:var(--accent); }
.menu-toggle {
  display:none; background:none; border:none; color:var(--white);
  font-size:1.6rem; cursor:pointer; padding:var(--s2);
  border-radius:var(--r-sm); transition:background var(--ease); line-height:1;
}
.menu-toggle:hover { background:rgba(255,255,255,.1); }
.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-menu > li:first-child { display:none; }
.nav-brand {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5); background:var(--navy-dark);
  width:100%; color:var(--white);
}
.nav-menu li a {
  display:flex; align-items:center; gap:var(--s2);
  padding:8px 13px; border-radius:var(--r-sm);
  color:rgba(255,255,255,.75); font-size:.85rem; font-weight:500;
  transition:all var(--ease); white-space:nowrap;
}
.nav-menu li a:hover { background:rgba(245,158,11,.15); color:var(--accent); }
.nav-icon { font-size:1.1em; flex-shrink:0; }
.nav-contact { background:linear-gradient(135deg,#25d366,#128c7e) !important; border-radius:var(--r-sm) !important; padding:0 !important; margin:0 !important; }
.nav-contact a { color:var(--white) !important; }
body::before {
  content:''; position:fixed; inset:0;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity var(--ease-slow),visibility var(--ease-slow); z-index:850;
}
body.menu-open::before { opacity:1; visibility:visible; }

/* ── 6. FOOTER ────────────────────────────────────────────── */
.footer {
  width:100%; background:var(--navy-dark);
  border-top:1px solid rgba(245,158,11,.1);
  color:rgba(255,255,255,.5);
  text-align:center; padding:var(--s5); font-size:.85rem; margin-top:auto;
}
.footer-text { color:rgba(255,255,255,.5); }

/* ── 7. FIXED BUTTON ─────────────────────────────────────── */
.fixed-button {
  position:fixed; bottom:20px; right:16px;
  background:var(--grad-brand); border-radius:var(--r-md);
  box-shadow:var(--shadow-gold); z-index:800;
  transition:transform var(--ease),box-shadow var(--ease);
}
.fixed-button:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(245,158,11,.45); }
.fixed-button a {
  display:flex; align-items:center; gap:var(--s2);
  padding:11px 18px; color:var(--navy-dark); font-weight:800; font-size:.875rem;
}

/* ── 8. FLASH / ALERTS ───────────────────────────────────── */
.flash-message {
  width:100%; max-width:var(--max-w);
  padding:var(--s3) var(--s5); background:var(--success-bg);
  color:var(--success-text); border-left:4px solid var(--success);
  border-radius:var(--r-sm); font-weight:600; text-align:center; font-size:.9rem;
}
.alert {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5); border-radius:var(--r-md);
  font-weight:500; margin-bottom:var(--s5);
}
.alert i { font-size:1.25rem; flex-shrink:0; }
.alert-success { background:var(--success-bg); color:var(--success-text); border-left:4px solid var(--success); }
.alert-error   { background:var(--danger-bg);  color:var(--danger-text);  border-left:4px solid var(--danger);  }
.error-message { background:var(--danger-bg); color:var(--danger-text); padding:var(--s3) var(--s4); border-radius:var(--r-sm); margin-bottom:var(--s5); font-size:.9rem; border-left:4px solid var(--danger); }

/* ── 9. BUTTONS ──────────────────────────────────────────── */
.btn-primary,.btn-secondary,
button.btn-primary,button.btn-secondary,
a.btn-primary,a.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:11px 24px; border-radius:var(--r-md); border:none;
  font-size:.9rem; font-weight:700; cursor:pointer;
  transition:all var(--ease); text-decoration:none; line-height:1; white-space:nowrap;
  letter-spacing:.01em;
}
.btn-primary {
  background:var(--grad-brand); color:var(--navy-dark);
  box-shadow:0 2px 12px rgba(245,158,11,.2);
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn-secondary {
  background:var(--white); color:#1e2040;
  border:1.5px solid var(--border); box-shadow:var(--shadow-xs);
}
.btn-secondary:hover { background:var(--off-white); transform:translateY(-1px); border-color:#c5cadb; }
.btn-small,.btn-sm {
  padding:7px 16px; font-size:.8rem;
  background:var(--grad-brand); color:var(--navy-dark);
  border-radius:var(--r-sm); font-weight:700; display:inline-flex;
  align-items:center; gap:5px; transition:all var(--ease); border:none; cursor:pointer;
}
.btn-small:hover,.btn-sm:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-primary:disabled,.btn-secondary:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* ── 10. FORMS ───────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s5); }
.form-group label { font-weight:700; font-size:.78rem; color:#374151; text-transform:uppercase; letter-spacing:.05em; }
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:12px 15px; border:1.5px solid var(--border);
  border-radius:var(--r-md); font-size:.95rem; background:var(--white); color:#1e2040;
  transition:border-color var(--ease),box-shadow var(--ease); box-shadow:var(--shadow-xs);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,158,11,.15);
}
.form-group small { color:var(--slate); font-size:.8rem; }
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr; gap:var(--s4); }
.form-actions { display:flex; gap:var(--s3); margin-top:var(--s6); flex-wrap:wrap; }
.form-actions .btn-primary { flex:2; margin:0; }
.form-actions .btn-secondary { flex:1; margin:0; }

/* ── 11. STATUS BADGES ───────────────────────────────────── */
.status-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:700; text-transform:uppercase; white-space:nowrap; letter-spacing:.05em;
}
.status-badge i { font-size:.95rem; }
.status-successful,.status-completed { background:#d1fae5; color:#065f46; }
.status-pending    { background:#fef3c7; color:#78350f; }
.status-failed     { background:var(--danger-bg);  color:var(--danger-text);  }
.status-refunded   { background:var(--info-bg);    color:var(--info-text);    }
.status-processing { background:var(--info-bg);    color:var(--info-text);    }
.status-cancelled  { background:var(--danger-bg);  color:var(--danger-text);  }

/* ── 12. TABLE BASE ─────────────────────────────────────── */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); }
.transactions-list,.data-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.transactions-list thead tr,.data-table thead tr { background:var(--navy-dark); }
.transactions-list thead th,.data-table thead th {
  padding:14px 16px; text-align:left; color:rgba(255,255,255,.85);
  font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
}
.transactions-list tbody tr,.data-table tbody tr { border-bottom:1px solid var(--border); transition:background var(--ease); }
.transactions-list tbody tr:hover,.data-table tbody tr:hover { background:#fafbff; }
.transactions-list td,.data-table td { padding:13px 16px; vertical-align:middle; }
.date-col span { display:block; font-weight:700; color:#1e2040; font-size:.9rem; }
.date-col small { color:var(--slate); font-size:.75rem; }
.amount-col strong { color:#1e2040; font-weight:700; }
.reference-col code,.ref-code {
  background:var(--off-white); border:1px solid var(--border);
  padding:3px 8px; border-radius:5px; font-size:.75rem;
  font-family:var(--font-mono); color:#374151; word-break:break-all;
}
.order-link { color:var(--accent2); font-weight:600; transition:color var(--ease); }
.order-link:hover { color:var(--accent); text-decoration:underline; }
.recipient-number { display:inline-flex; align-items:center; gap:4px; font-size:.88rem; font-weight:600; }
.recipient-number i { color:var(--accent); font-size:.95rem; }
.btn-action-verify {
  display:inline-flex; align-items:center; gap:5px; padding:6px 13px;
  background:var(--grad-warm); color:var(--white); border-radius:var(--r-sm);
  font-size:.8rem; font-weight:700; transition:all var(--ease); white-space:nowrap;
}
.btn-action-verify:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(239,68,68,.3); color:var(--white); }
.badge-delivering { display:block; font-size:.78rem; color:var(--info); margin-bottom:3px; }
.btn-link-complaint { font-size:.78rem; color:var(--danger); font-weight:700; }
.btn-link-complaint:hover { text-decoration:underline; }
.row-needs-verify   { border-left:3px solid var(--accent) !important; }
.row-needs-delivery { border-left:3px solid var(--info) !important; background:#fafbff; }

/* ── 13. STAT CARDS ────────────────────────────────────────── */
.transactions-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); margin-bottom:var(--s6); }
.stat-card {
  background:var(--white); border-radius:var(--r-lg); padding:var(--s5);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:var(--s4);
  transition:transform var(--ease),box-shadow var(--ease); border:1px solid var(--border);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-icon {
  width:50px; height:50px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; font-size:1.4rem; color:var(--white); flex-shrink:0;
}
.stat-icon.total-icon     { background:var(--grad-navy); }
.stat-icon.successful-icon{ background:var(--grad-success); }
.stat-icon.pending-icon   { background:linear-gradient(135deg,#f59e0b,#d97706); }
.stat-icon.failed-icon    { background:linear-gradient(135deg,#ef4444,#dc2626); }
.stat-icon.amount-icon    { background:var(--grad-purple); }
.stat-info h3 { font-size:.68rem; color:var(--slate); font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.stat-value   { font-size:1.55rem; font-weight:800; color:#1e2040; line-height:1; }

/* ── 14. PAGE HEADERS ──────────────────────────────────────── */
.transactions-page-header {
  background:var(--navy-dark); color:var(--white);
  padding:var(--s7) var(--s6); border-radius:var(--r-lg);
  margin-bottom:var(--s6); box-shadow:var(--shadow-md);
  border:1px solid rgba(245,158,11,.15);
  position:relative; overflow:hidden;
}
.transactions-page-header::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
  pointer-events:none;
}
.transactions-page-header h1 { color:var(--white); margin-bottom:var(--s2); font-size:clamp(1.4rem,4vw,2rem); }
.transactions-page-header .subtitle { color:rgba(255,255,255,.6); margin:0; }

/* ── 15. FILTER BAR ────────────────────────────────────────── */
.transactions-filters {
  background:var(--white); padding:var(--s5); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); margin-bottom:var(--s6); border:1px solid var(--border);
}
.filter-form { display:flex; flex-direction:column; gap:var(--s3); }
.filter-group { display:flex; flex-direction:column; gap:4px; }
.filter-group label { font-size:.72rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.06em; }
.filter-group input,.filter-group select {
  padding:10px 13px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:.9rem; background:var(--white); color:#1e2040; transition:border-color var(--ease);
}
.filter-group input:focus,.filter-group select:focus { outline:none; border-color:var(--accent); }
.transactions-container { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; border:1px solid var(--border); }

/* ── 16. EMPTY STATE ──────────────────────────────────────── */
.empty-state { text-align:center; padding:64px var(--s5); color:var(--slate); }
.empty-state i  { font-size:4rem; color:#d1d5e0; display:block; margin-bottom:var(--s5); }
.empty-state h3 { color:#1e2040; margin-bottom:var(--s3); }
.empty-state p  { margin-bottom:var(--s5); font-size:.95rem; }

/* ── 17. DASHBOARD ────────────────────────────────────────── */
.dashboard-header {
  background:var(--navy-dark); color:var(--white);
  padding:var(--s7) var(--s6); border-radius:var(--r-xl); box-shadow:var(--shadow-md);
  margin-bottom:var(--s6); display:flex; flex-direction:column; gap:var(--s4);
  border:1px solid rgba(245,158,11,.15);
  position:relative; overflow:hidden;
}
.dashboard-header::after {
  content:''; position:absolute; bottom:-60px; right:-30px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
  pointer-events:none;
}
.dashboard-header h1 { color:var(--white); margin-bottom:4px; }
.user-balance {
  display:inline-flex; align-items:center; gap:var(--s4);
  background:rgba(245,158,11,.12); padding:10px 18px;
  border-radius:var(--r-md); border:1px solid rgba(245,158,11,.22);
  flex-wrap:wrap; gap:var(--s3);
}
.balance-amount { font-weight:800; font-size:1.25rem; color:var(--accent); }
.dashboard-grid { display:grid; grid-template-columns:1fr; gap:var(--s5); }
.dashboard-card {
  background:var(--white); padding:var(--s6); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
}
.dashboard-card h3 { margin-bottom:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--border); font-size:1rem; color:#374151; }
.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.btn-action {
  display:flex; flex-direction:column; align-items:center;
  padding:var(--s4) var(--s3); background:var(--off-white); border:1.5px solid var(--border);
  border-radius:var(--r-md); color:#374151; font-weight:600; font-size:.82rem;
  gap:var(--s2); transition:all var(--ease); text-align:center;
}
.btn-action:hover { background:var(--navy-dark); color:var(--accent); border-color:var(--navy-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-action i { font-size:1.5rem; }
.transactions-table { width:100%; border-collapse:collapse; }
.transactions-table td { padding:11px var(--s3); border-bottom:1px solid var(--border); font-size:.875rem; }
.transactions-table tr:last-child td { border-bottom:none; }

/* ── 18. AUTH ─────────────────────────────────────────────── */
.auth-container {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:70vh; padding:var(--s5) var(--content-px); gap:var(--s5); width:100%;
}
.auth-container h1 { text-align:center; }
.auth-box {
  background:var(--white); padding:var(--s7) var(--s6); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); width:100%; max-width:420px; border:1px solid var(--border);
}
.auth-box h2 { text-align:center; margin-bottom:var(--s6); }
.auth-links  { text-align:center; margin-top:var(--s5); font-size:.9rem; }
.auth-links a { color:var(--accent2); font-weight:700; }
.auth-links a:hover { color:var(--accent); text-decoration:underline; }

/* ── 19. PRODUCTS ─────────────────────────────────────────── */
.products-header { text-align:center; margin-bottom:var(--s7); }
.network-selector { margin-bottom:var(--s7); }
.network-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s4); }
.network-btn {
  display:flex; flex-direction:column; align-items:center;
  padding:16px 22px; background:var(--white); border:2px solid var(--border);
  border-radius:var(--r-lg); color:#374151; font-weight:700; font-size:.875rem;
  min-width:110px; transition:all var(--ease); gap:var(--s2); box-shadow:var(--shadow-xs);
}
.network-btn img { width:46px; height:46px; object-fit:contain; }
.network-btn i   { font-size:2rem; }
.network-btn:hover,.network-btn.active {
  border-color:var(--accent); background:#fffbeb;
  transform:translateY(-3px); box-shadow:var(--shadow-gold); color:#1e2040;
}
.products-grid-direct { display:grid; grid-template-columns:1fr; gap:var(--s5); }
.product-card-direct {
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform var(--ease),box-shadow var(--ease); border:1px solid var(--border);
}
.product-card-direct:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.product-header { display:flex; justify-content:space-between; align-items:center; padding:var(--s4) var(--s5); background:var(--navy-dark); border-bottom:1px solid rgba(245,158,11,.1); }
.product-network  { font-weight:800; font-size:1.05rem; color:var(--white); }
.product-category { background:var(--grad-brand); color:var(--navy-dark); padding:3px 12px; border-radius:var(--r-pill); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.product-name { padding:var(--s4) var(--s5); font-size:1rem; font-weight:700; border-bottom:1px solid var(--border); color:#1e2040; }
.fixed-product,.flexible-plan { padding:var(--s5); }
.product-price { font-size:1.5rem; font-weight:800; margin-bottom:var(--s3); color:#1e2040; }
.data-value { display:inline-block; background:var(--accent); color:var(--navy-dark); padding:3px 12px; border-radius:5px; font-weight:800; font-size:.85rem; margin-bottom:var(--s3); }
.btn-buy-now {
  width:100%; padding:13px; background:var(--grad-brand); color:var(--navy-dark); border:none;
  border-radius:var(--r-md); font-size:1rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:var(--s2); transition:all var(--ease);
}
.btn-buy-now:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:var(--shadow-gold); }
.btn-buy-now:disabled { background:var(--border); color:var(--slate); cursor:not-allowed; transform:none; box-shadow:none; }
.price-summary { background:var(--off-white); padding:var(--s4); border-radius:var(--r-sm); margin:var(--s4) 0; border:1px solid var(--border); }
.price-row { display:flex; justify-content:space-between; margin-bottom:var(--s2); font-size:.9rem; }
.price-row.total { font-weight:800; font-size:1rem; border-top:1px solid var(--border); padding-top:var(--s2); margin-top:var(--s2); color:#1e2040; }
.purchase-form .form-group { margin-bottom:var(--s4); }
.purchase-form input,.purchase-form select { width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:.9rem; }

/* ── 20. CHECKOUT ──────────────────────────────────────────── */
.checkout-direct { display:grid; grid-template-columns:1fr; gap:var(--s5); max-width:860px; margin:0 auto; }
.order-summary,.payment-options { background:var(--white); padding:var(--s6); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.order-summary h3,.payment-options h3 { margin-bottom:var(--s5); padding-bottom:var(--s3); border-bottom:1px solid var(--border); font-size:1rem; color:#374151; }
.summary-item { display:flex; justify-content:space-between; padding:var(--s3) 0; border-bottom:1px solid #f0f1f8; font-size:.9rem; }
.summary-item.total { border-bottom:none; font-weight:800; font-size:1.05rem; color:#1e2040; }
.summary-item .value { font-weight:700; }
.payment-option-btn { display:block; padding:var(--s5); background:var(--off-white); border:2px solid var(--border); border-radius:var(--r-md); margin-bottom:var(--s4); transition:all var(--ease); }
.payment-option-btn:hover { border-color:var(--accent); background:#fffbeb; transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.payment-option-btn i     { font-size:1.4rem; display:block; margin-bottom:var(--s2); color:var(--accent); }
.payment-option-btn span  { display:block; font-weight:700; margin-bottom:3px; color:#1e2040; }
.payment-option-btn small { display:block; color:var(--slate); font-size:.8rem; }
.payment-option-btn.wallet { background:#ecfdf5; border-color:#a7f3d0; }
.payment-method.disabled .payment-option-btn { opacity:.5; cursor:not-allowed; }
.payment-method.disabled .payment-option-btn:hover { transform:none; }
.insufficient { color:var(--danger) !important; }
.back-to-products { margin-top:var(--s5); text-align:center; }

/* ── 21. PAYMENT & SUCCESS ─────────────────────────────────── */
.payment-container,.success-container {
  max-width:520px; margin:var(--s7) auto; background:var(--white);
  padding:var(--s7) var(--s6); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); text-align:center; width:100%; border:1px solid var(--border);
}
.payment-info { text-align:left; background:var(--off-white); padding:var(--s5); border-radius:var(--r-md); margin:var(--s6) 0; border:1px solid var(--border); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; flex-wrap:wrap; gap:var(--s2); }
.info-row:last-child { border-bottom:none; }
.info-row .amount   { font-weight:800; color:var(--success); font-size:1.1rem; }
.info-row .reference { font-family:var(--font-mono); font-size:.78rem; background:var(--white); padding:3px 8px; border-radius:5px; color:var(--slate); border:1px solid var(--border); }
.btn-paystack { width:100%; padding:15px; font-size:1rem; margin-bottom:var(--s4); }
.alternative-payment { text-align:center; margin-bottom:var(--s5); }
.success-icon { font-size:3.5rem; color:var(--success); margin-bottom:var(--s4); }
.success-details { background:var(--off-white); padding:var(--s5); border-radius:var(--r-md); margin:var(--s5) 0; text-align:left; border:1px solid var(--border); }
.detail-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; flex-wrap:wrap; gap:var(--s2); }
.detail-row:last-child { border-bottom:none; }
.detail-row .highlight { font-weight:800; font-family:var(--font-mono); }
.detail-row .amount    { color:var(--success); font-weight:800; }
.actions { display:flex; gap:var(--s3); margin:var(--s5) 0; flex-wrap:wrap; }
.actions .btn-primary,.actions .btn-secondary { flex:1; min-width:120px; }
.support-info { color:var(--slate); font-size:.875rem; margin-top:var(--s5); }
.support-info a { color:var(--accent2); font-weight:700; }

/* ── 22. HOME PAGE ────────────────────────────────────────── */
.title-section { text-align:center; margin-bottom:var(--s7); width:100%; }
.title-main    { font-size:clamp(1.7rem,5vw,2.6rem); font-weight:800; padding-bottom:var(--s2); color:#1e2040; letter-spacing:-.04em; }
.title-des     { color:var(--slate); font-size:clamp(.9rem,2vw,1.1rem); margin-top:var(--s2); }
.user-welcome {
  background:var(--navy-dark); color:var(--white); padding:12px 20px;
  border-radius:var(--r-md); display:inline-flex; align-items:center; gap:var(--s3);
  font-size:.9rem; margin-top:var(--s4); border:1px solid rgba(245,158,11,.2);
}
.user-welcome .balance { font-weight:800; font-size:1rem; color:var(--accent); }
.quick-purchase,.featured-section {
  background:var(--white); padding:var(--s6); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); margin-bottom:var(--s6); width:100%; max-width:var(--max-w); border:1px solid var(--border);
}
.quick-purchase h2,.featured-section h2 { text-align:center; margin-bottom:var(--s6); }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.quick-item {
  display:flex; flex-direction:column; align-items:center;
  padding:var(--s5); background:var(--off-white);
  border-radius:var(--r-lg); color:#374151; font-weight:700; font-size:.875rem;
  gap:var(--s2); text-align:center; transition:all var(--ease);
  box-shadow:var(--shadow-xs); border:1.5px solid var(--border);
}
.quick-item:hover { background:var(--navy-dark); color:var(--accent); border-color:var(--navy-dark); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.quick-item:hover small { color:rgba(245,158,11,.7); }
.quick-item img { width:54px; height:54px; object-fit:contain; }
.quick-item i   { font-size:2.4rem; }
.quick-item small { font-size:.78rem; color:var(--slate); transition:color var(--ease); }
.cards-holder { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.card-links {
  display:flex; flex-direction:column; align-items:center; background:var(--white);
  padding:var(--s5); border-radius:var(--r-lg); gap:var(--s3);
  box-shadow:var(--shadow-xs); border:1.5px solid var(--border); transition:all var(--ease);
}
.card-links:hover { border-color:var(--accent); box-shadow:var(--shadow-gold); transform:translateY(-2px); }
.card-links img { width:120px; height:auto; }
.card-links a   { font-weight:700; font-size:1rem; color:#1e2040; }

/* ── 23. INFO BOX ────────────────────────────────────────── */
.info-box { background:var(--info-bg); border-left:4px solid var(--info); padding:var(--s4) var(--s5); border-radius:var(--r-sm); margin-top:var(--s5); }
.info-box h4 { color:#1e2040; margin-bottom:var(--s2); display:flex; align-items:center; gap:var(--s2); }
.info-box ul { padding:0; }
.info-box li { padding:4px 0; font-size:.9rem; }
.info-box li::before { content:"✓ "; color:var(--success); font-weight:800; }

/* ── 24. GUEST CHECKOUT ──────────────────────────────────── */
.guest-checkout-container { display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s6); }
.checkout-form-section,.checkout-summary-section { background:var(--white); padding:var(--s6); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.price-display { font-size:1.25rem; font-weight:800; color:var(--success); padding:var(--s3) var(--s4); background:var(--success-bg); border-radius:var(--r-sm); text-align:center; border:1px solid #a7f3d0; }
.summary-divider { height:1px; background:var(--border); margin:var(--s3) 0; }
.btn-guest-checkout { display:block; width:100%; padding:13px; background:var(--grad-success); color:var(--white); border:none; border-radius:var(--r-md); text-align:center; font-weight:800; cursor:pointer; transition:all var(--ease); margin-top:var(--s3); }
.btn-guest-checkout:hover { filter:brightness(1.08); transform:translateY(-1px); }
.guest-option { background:var(--off-white); padding:var(--s5); border-radius:var(--r-lg); margin-top:var(--s5); text-align:center; border:1px solid var(--border); }
.guest-option p { margin-bottom:var(--s4); font-size:.9rem; color:var(--slate); }
.btn-guest-option,.btn-login-option { display:inline-flex; align-items:center; padding:11px 20px; margin:var(--s2); border-radius:var(--r-md); font-weight:700; transition:all var(--ease); font-size:.9rem; gap:var(--s2); }
.btn-guest-option { background:var(--grad-success); color:var(--white); }
.btn-login-option { background:var(--grad-brand); color:var(--navy-dark); }
.btn-guest-option:hover,.btn-login-option:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* ── 25. COMPLAINTS ──────────────────────────────────────── */
.complaints-header { margin-bottom:var(--s7); border-bottom:2px solid var(--border); padding-bottom:var(--s5); }
.complaints-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-bottom:var(--s7); }
.complaint-stat-card {
  background:var(--white); border-radius:var(--r-lg); padding:var(--s5);
  display:flex; align-items:center; gap:var(--s4); box-shadow:var(--shadow-sm);
  border-left:4px solid var(--border); transition:all var(--ease); border:1px solid var(--border);
}
.complaint-stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-content .stat-label  { font-size:.68rem; color:var(--slate); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.stat-content .stat-number { font-size:1.8rem; font-weight:800; color:#1e2040; }
.stat-icon.total    { background:var(--grad-navy); }
.stat-icon.pending  { background:linear-gradient(135deg,#f59e0b,#d97706); }
.stat-icon.in-review{ background:var(--grad-purple); }
.stat-icon.resolved { background:var(--grad-success); }
.stat-icon.rejected { background:linear-gradient(135deg,#ef4444,#dc2626); }
.complaints-section { background:var(--white); border-radius:var(--r-lg); padding:var(--s6); margin-bottom:var(--s6); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:1px solid var(--border); }
.btn-toggle-form { background:none; border:none; font-size:1.4rem; color:#374151; cursor:pointer; transition:transform var(--ease-slow); padding:5px 10px; }
.btn-toggle-form.active { transform:rotate(180deg); }
.complaint-form { display:flex; flex-direction:column; gap:var(--s5); }
.complaint-form .form-group input,
.complaint-form .form-group select,
.complaint-form .form-group textarea { padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--r-md); }
.complaint-form .form-group input:focus,
.complaint-form .form-group select:focus,
.complaint-form .form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,158,11,.15); outline:none; }
.complaints-controls { margin-bottom:var(--s5); }
.search-box { display:flex; gap:var(--s3); flex-wrap:wrap; }
.search-box form { display:flex; gap:var(--s3); flex-wrap:wrap; flex:1; }
.search-box input[type="text"],.search-box select { padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:.9rem; flex:1; min-width:150px; }
.btn-filter,.btn-filter-clear,.btn-clear {
  padding:10px 18px; border-radius:var(--r-md); border:none; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.9rem; transition:all var(--ease); white-space:nowrap;
}
.btn-filter       { background:var(--grad-brand); color:var(--navy-dark); }
.btn-filter:hover { transform:translateY(-1px); box-shadow:var(--shadow-gold); }
.btn-filter-clear,.btn-clear { background:var(--border); color:#374151; }
.btn-filter-clear:hover,.btn-clear:hover { background:#d0d5e0; }
.complaints-table-container { overflow-x:auto; border-radius:var(--r-md); }
.complaints-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.complaints-table thead { background:var(--navy-dark); color:var(--white); }
.complaints-table thead th { padding:14px 16px; text-align:left; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.85); }
.complaints-table tbody tr { border-bottom:1px solid var(--border); transition:background var(--ease); }
.complaints-table tbody tr:hover { background:#fafbff; }
.complaints-table tbody td { padding:14px 16px; }
.complaint-title strong { color:#1e2040; font-weight:700; display:block; margin-bottom:3px; }
.complaint-desc-preview { font-size:.8rem; color:var(--slate); font-style:italic; }
.badge { display:inline-block; padding:4px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.badge-status           { padding:5px 12px; font-size:.72rem; }
.badge-status.status-pending   { background:var(--warning-bg); color:var(--warning-text); }
.badge-status.status-in_review { background:var(--info-bg);    color:var(--info-text);    }
.badge-status.status-resolved  { background:var(--success-bg); color:var(--success-text); }
.badge-status.status-rejected  { background:var(--danger-bg);  color:var(--danger-text);  }
.badge-category  { background:var(--off-white); color:#374151; border:1px solid var(--border); }
.badge-priority.priority-low    { background:#d1fae5; color:#065f46; }
.badge-priority.priority-medium { background:#fef3c7; color:#78350f; }
.badge-priority.priority-high   { background:#fee2e2; color:#7f1d1d; }
.btn-view-detail { color:#374151; font-weight:700; display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:var(--r-sm); transition:all var(--ease); background:var(--off-white); font-size:.82rem; border:1px solid var(--border); }
.btn-view-detail:hover { background:var(--navy-dark); color:var(--accent); border-color:var(--navy-dark); }
.modal          { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; overflow-y:auto; backdrop-filter:blur(4px); }
.modal-content  { background:var(--white); margin:5% auto; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); width:90%; max-width:680px; overflow:hidden; }
.modal-lg       { max-width:700px; }
.modal-header   { background:var(--navy-dark); color:var(--white); padding:var(--s5) var(--s6); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(245,158,11,.12); }
.modal-header h2 { color:var(--white); margin:0; font-size:1.15rem; }
.modal-close    { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.6rem; cursor:pointer; transition:all var(--ease-slow); line-height:1; }
.modal-close:hover { transform:rotate(90deg); color:var(--white); }
.modal-body     { padding:var(--s6); max-height:70vh; overflow-y:auto; }
.detail-section { margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--border); }
.detail-section h4 { margin-bottom:var(--s3); color:#1e2040; }
.detail-section p  { color:var(--slate); line-height:1.7; }

/* ── 26. ADD FUNDS ───────────────────────────────────────── */
.add-funds-container { max-width:640px; margin:0 auto; padding:var(--s4) 0; width:100%; }
.funds-card { background:var(--white); padding:var(--s7) var(--s6); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); margin-bottom:var(--s5); border:1px solid var(--border); }
.funds-card h1 { text-align:center; margin-bottom:var(--s6); }
.current-balance { background:var(--navy-dark); color:var(--white); padding:var(--s5); border-radius:var(--r-lg); margin-bottom:var(--s6); text-align:center; border:1px solid rgba(245,158,11,.2); }
.current-balance h3 { font-size:.75rem; opacity:.65; margin-bottom:var(--s2); font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.balance-display { font-size:2.2rem; font-weight:800; color:var(--accent); }
.amount-input-wrapper { display:flex; flex-direction:column; gap:4px; }
.quick-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin:var(--s4) 0; }
.quick-btn { padding:10px; border:1.5px solid var(--border); background:var(--white); border-radius:var(--r-sm); font-weight:700; font-size:.85rem; cursor:pointer; transition:all var(--ease); color:#374151; }
.quick-btn:hover { border-color:var(--accent); background:#fffbeb; color:var(--accent2); }
.funds-info { background:var(--off-white); padding:var(--s5); border-radius:var(--r-md); margin-top:var(--s5); border:1px solid var(--border); }
.funds-info h4 { margin-bottom:var(--s3); color:#1e2040; }
.funds-info ul { padding-left:var(--s5); display:flex; flex-direction:column; gap:var(--s2); }
.funds-info li { color:var(--slate); font-size:.875rem; }
.funds-actions { display:flex; gap:var(--s3); margin-top:var(--s5); flex-wrap:wrap; }
.funds-actions a { flex:1; text-align:center; min-width:130px; }
.funds-transactions { background:var(--white); padding:var(--s5); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.funds-transactions h3 { margin-bottom:var(--s5); color:#374151; }

/* ── 27. PENDING TRANSACTIONS PAGE ─────────────────────────── */
.pt-header  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--s6); flex-wrap:wrap; gap:var(--s3); }
.pt-header h1 { margin-bottom:4px; }
.pt-stats   { display:flex; gap:var(--s3); margin-bottom:var(--s5); flex-wrap:wrap; }
.pt-stat-card { display:flex; align-items:center; gap:var(--s3); background:var(--white); border-radius:var(--r-lg); padding:14px var(--s5); flex:1; min-width:120px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.pt-stat-card i { font-size:1.6rem; }
.pt-stat-card.total   i { color:var(--slate); }
.pt-stat-card.success i { color:var(--success); }
.pt-stat-card.pending i { color:var(--warning); }
.pt-stat-card.failed  i { color:var(--danger); }
.pt-stat-num   { font-size:1.4rem; font-weight:800; line-height:1; color:#1e2040; }
.pt-stat-label { font-size:.66rem; color:var(--slate); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; font-weight:700; }
.pt-alert-banner { background:var(--warning-bg); border:1px solid var(--warning); border-radius:var(--r-md); padding:12px var(--s5); margin-bottom:var(--s5); display:flex; align-items:center; gap:var(--s3); font-size:.9rem; }
.pt-alert-banner i { font-size:1.2rem; color:var(--warning-text); flex-shrink:0; }
.pt-table-wrap { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; border:1px solid var(--border); }
.pt-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.pt-table thead tr { background:var(--navy-dark); }
.pt-table thead th { padding:13px 14px; text-align:left; color:rgba(255,255,255,.85); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
.pt-table td { padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.pt-row:hover td { background:#fafbff; }
.pt-row--pending    { border-left:3px solid var(--warning); }
.pt-row--successful { border-left:3px solid var(--success); }
.pt-row--failed     { border-left:3px solid var(--danger); }
.pt-row--needs-verify    { border-left:3px solid var(--accent) !important; background:#fffdf0; }
.pt-row--delivery-failed { border-left:3px solid var(--info) !important; background:#f8faff; }
.pt-date span { display:block; font-weight:700; font-size:.9rem; color:#1e2040; }
.pt-date small { color:var(--slate); font-size:.75rem; }
.type-badge { display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:.7rem; font-weight:700; white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; }
.type-wallet { background:var(--info-bg);    color:var(--info-text); }
.type-order  { background:var(--success-bg); color:var(--success-text); }
.pt-detail { max-width:180px; }
.detail-product   { font-weight:600; color:#1e2040; }
.detail-network   { display:inline-block; background:var(--info-bg); color:var(--info-text); padding:1px 7px; border-radius:10px; font-size:.72rem; margin-left:3px; }
.detail-recipient { font-size:.8rem; color:var(--slate); display:inline-flex; align-items:center; gap:3px; margin-top:2px; }
.detail-recipient i { color:var(--accent); }
.pt-amount strong { font-weight:800; }
.status-delivery-fail { background:var(--info-bg); color:var(--info-text); }
.btn-verify { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; background:var(--grad-brand); color:var(--navy-dark); border:none; border-radius:var(--r-md); cursor:pointer; font-size:.82rem; font-weight:800; transition:all var(--ease); white-space:nowrap; }
.btn-verify:hover   { transform:translateY(-1px); box-shadow:var(--shadow-gold); }
.btn-verify:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.action-done  { color:var(--success); font-size:.85rem; font-weight:700; }
.btn-link-small { color:var(--accent2); font-size:.82rem; font-weight:700; }
.btn-link-small:hover { text-decoration:underline; }
.action-delivery-fail { display:flex; flex-direction:column; gap:4px; }
.delivery-note  { font-size:.78rem; color:var(--info-text); display:flex; align-items:center; gap:3px; }
.btn-complaint  { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; background:var(--white); border:1.5px solid var(--danger); color:var(--danger); border-radius:var(--r-sm); font-size:.78rem; font-weight:700; transition:all var(--ease); }
.btn-complaint:hover { background:var(--danger); color:var(--white); }
.pt-result-cell   { padding:0 14px 12px; }
.pt-result-msg    { padding:10px 14px; border-radius:var(--r-sm); font-size:.875rem; font-weight:600; }
.pt-result-msg.ok  { background:var(--success-bg); color:var(--success-text); }
.pt-result-msg.err { background:var(--danger-bg);  color:var(--danger-text); }
.pt-empty { text-align:center; padding:64px var(--s5); color:var(--slate); }
.pt-empty i  { font-size:4rem; display:block; margin-bottom:var(--s5); color:#d1d5e0; }
.pt-empty h3 { margin-bottom:var(--s3); color:#1e2040; }

/* ── 28. MISC ─────────────────────────────────────────────── */
.verify-container { max-width:560px; margin:var(--s7) auto; padding:0 var(--content-px); width:100%; }
.result-card { background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:var(--s8) var(--s7); text-align:center; border:1px solid var(--border); }
.result-icon { font-size:4rem; margin-bottom:var(--s4); }
.result-icon.success { color:var(--success); }
.result-icon.fail    { color:var(--danger); }
.detail-grid { background:var(--off-white); border-radius:var(--r-md); padding:var(--s5); margin:var(--s5) 0; text-align:left; border:1px solid var(--border); }
.badge-pending  { background:var(--warning-bg); color:var(--warning-text); padding:3px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; }
.badge-complete { background:var(--success-bg); color:var(--success-text); padding:3px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; }
.btn-row { display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-top:var(--s6); }
.notice-box { background:var(--warning-bg); border:1px solid var(--warning); border-radius:var(--r-md); padding:14px var(--s5); font-size:.875rem; }
.order-details-container { max-width:860px; margin:0 auto; width:100%; }
.order-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s6); flex-wrap:wrap; gap:var(--s3); }
.order-grid { display:grid; grid-template-columns:1fr; gap:var(--s5); }
.order-card { background:var(--white); padding:var(--s6); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.order-card h3 { margin-bottom:var(--s5); padding-bottom:var(--s3); border-bottom:1px solid var(--border); }
.products-grid { display:grid; grid-template-columns:1fr; gap:var(--s4); }
.product-card  { background:var(--white); padding:var(--s5); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform var(--ease); border:1px solid var(--border); }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ════════════════════════════════════════════════════════════ */

@media (min-width: 480px) {
  :root { --content-px:20px; }
  .quick-grid { grid-template-columns:repeat(3,1fr); }
  .cards-holder { grid-template-columns:repeat(2,1fr); }
  .quick-amounts { grid-template-columns:repeat(4,1fr); }
  .complaints-stats-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 640px) {
  :root { --content-px:24px; }
  .form-row { grid-template-columns:repeat(2,1fr); }
  .filter-form { flex-direction:row; flex-wrap:wrap; }
  .filter-form .filter-group { flex:1; min-width:160px; }
  .add-funds-container { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); max-width:900px; }
  .funds-card { grid-column:1; }
  .funds-transactions { grid-column:2; height:fit-content; }
  .guest-checkout-container { grid-template-columns:2fr 1fr; }
  .dashboard-header { flex-direction:row; align-items:center; }
  .order-grid { grid-template-columns:1fr 1fr; }
}

@media (min-width: 768px) {
  :root { --content-px:28px; }
  .transactions-stats { grid-template-columns:repeat(3,1fr); }
  .complaints-stats-grid { grid-template-columns:repeat(3,1fr); }
  .quick-grid { grid-template-columns:repeat(4,1fr); }
  .cards-holder { grid-template-columns:repeat(4,1fr); }
  .checkout-direct { grid-template-columns:1fr 1fr; }
  .products-grid-direct { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 1024px) {
  :root { --content-px:32px; }
  .transactions-stats { grid-template-columns:repeat(5,1fr); }
  .complaints-stats-grid { grid-template-columns:repeat(5,1fr); }
  .products-grid-direct { grid-template-columns:repeat(3,1fr); }
  .dashboard-grid { grid-template-columns:1fr 2fr; }
}

@media (min-width: 1280px) {
  .products-grid-direct { grid-template-columns:repeat(4,1fr); }
}

/* ── DESKTOP NAV (hide on mobile) ────────────────────────── */
.desktop-nav { display:flex; }
@media (max-width: 767px) {
  .desktop-nav { display:none !important; }
  .menu-toggle  { display:flex; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE SIDEBAR DRAWER
   ═══════════════════════════════════════════════════════════ */

.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(5,5,15,.65); backdrop-filter:blur(4px);
  z-index:1000; transition:opacity var(--ease-slow);
}
.sidebar-overlay.active { display:block; animation:fadeIn .25s ease forwards; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.sidebar {
  position:fixed; top:0; left:0;
  width:min(78vw,300px); height:100vh;
  background:var(--navy-dark);
  display:flex; flex-direction:column;
  z-index:1001;
  transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  border-right:1px solid rgba(245,158,11,.08);
}
.sidebar.active { transform:translateX(0); }

.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px 16px; background:rgba(0,0,0,.25);
  border-bottom:1px solid rgba(245,158,11,.1); flex-shrink:0;
}
.sidebar-logo { display:flex; align-items:center; gap:11px; }
.sidebar-logo-icon {
  width:38px; height:38px; border-radius:10px; background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--navy-dark); flex-shrink:0;
}
.sidebar-logo-name    { font-size:1.05rem; font-weight:800; color:var(--white); letter-spacing:-.02em; line-height:1.1; }
.sidebar-logo-tagline { font-size:.66rem; color:rgba(255,255,255,.35); margin-top:1px; text-transform:uppercase; letter-spacing:.08em; }
.sidebar-close {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.07); border:none;
  color:rgba(255,255,255,.6); font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--ease); flex-shrink:0;
}
.sidebar-close:hover { background:rgba(245,158,11,.15); color:var(--accent); }

.sidebar-user {
  display:flex; align-items:center; gap:11px;
  padding:14px 16px; background:rgba(245,158,11,.05);
  border-bottom:1px solid rgba(245,158,11,.07); flex-shrink:0;
}
.sidebar-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--navy-dark); flex-shrink:0;
}
.sidebar-user-name  { font-size:.88rem; font-weight:700; color:var(--white); }
.sidebar-user-email { font-size:.7rem; color:rgba(255,255,255,.38); margin-top:1px; word-break:break-all; }

.sidebar-nav {
  flex:1; overflow-y:auto; padding:8px 10px 8px;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.07) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

.sidebar-section-label {
  font-size:.65rem; font-weight:700; letter-spacing:.1em;
  color:rgba(255,255,255,.25); text-transform:uppercase;
  padding:12px 8px 5px; margin-top:4px;
}
.sidebar-section-label:first-child { margin-top:0; }

.sidebar-link {
  display:flex; align-items:center; gap:11px;
  padding:10px 10px; border-radius:10px;
  color:rgba(255,255,255,.65); font-size:.875rem; font-weight:500;
  text-decoration:none; transition:all var(--ease); position:relative;
}
.sidebar-link:hover { background:rgba(245,158,11,.1); color:var(--accent); }
.sidebar-link:hover .sidebar-icon { transform:scale(1.08); }

.sidebar-link.active { background:rgba(245,158,11,.12); color:var(--accent); }
.sidebar-link.active::before {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:60%; background:var(--accent);
  border-radius:0 2px 2px 0;
}

.sidebar-icon {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; transition:transform var(--ease);
}
.sidebar-icon.home        { background:rgba(99,179,237,.14);  color:#63b3ed; }
.sidebar-icon.products    { background:rgba(245,158,11,.14);  color:var(--accent); }
.sidebar-icon.dashboard   { background:rgba(99,102,241,.16);  color:#818cf8; }
.sidebar-icon.transactions{ background:rgba(245,158,11,.14);  color:var(--accent); }
.sidebar-icon.orders      { background:rgba(16,185,129,.14);  color:#34d399; }
.sidebar-icon.pending     { background:rgba(245,158,11,.16);  color:#fbbf24; }
.sidebar-icon.wallet      { background:rgba(16,185,129,.16);  color:#34d399; }
.sidebar-icon.complaints  { background:rgba(239,68,68,.14);   color:#f87171; }
.sidebar-icon.admin       { background:rgba(245,158,11,.16);  color:var(--accent); }
.sidebar-icon.login       { background:rgba(99,102,241,.16);  color:#818cf8; }
.sidebar-icon.register    { background:rgba(99,179,237,.14);  color:#63b3ed; }
.sidebar-icon.whatsapp    { background:rgba(37,211,102,.16);  color:#25d366; }

.sidebar-whatsapp { background:rgba(37,211,102,.05); }
.sidebar-whatsapp:hover { background:rgba(37,211,102,.12) !important; color:#25d366 !important; }
.sidebar-external { margin-left:auto; font-size:.8rem; opacity:.4; }

.sidebar-footer { padding:12px 10px; border-top:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.sidebar-logout {
  display:flex; align-items:center; gap:11px;
  width:100%; padding:11px 10px; border-radius:10px;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.16);
  color:#f87171; font-size:.875rem; font-weight:700;
  text-decoration:none; transition:all var(--ease);
}
.sidebar-logout:hover { background:rgba(239,68,68,.2); color:#fff; border-color:rgba(239,68,68,.4); }
.sidebar-logout i { font-size:1.1rem; }

/* ── MOBILE PAGE TWEAKS ─────────────────────────────────────── */
@media (max-width: 767px) {

  .transactions-list thead { display:none; }
  .transactions-list tbody,
  .transactions-list tbody tr { display:block; }
  .transactions-list tbody { display:flex; flex-direction:column; gap:var(--s3); padding:var(--s3); }
  .transactions-list tbody tr {
    border:1.5px solid var(--border); border-radius:var(--r-lg); padding:var(--s4);
    border-left:4px solid var(--accent); box-shadow:var(--shadow-xs); background:var(--white);
  }
  .transactions-list td {
    display:grid; grid-template-columns:110px 1fr; gap:var(--s2);
    padding:7px 0; border:none; font-size:.875rem; align-items:start;
  }
  .transactions-list td::before { content:attr(data-label); font-weight:700; font-size:.68rem; color:var(--accent2); text-transform:uppercase; letter-spacing:.05em; padding-top:2px; }
  .date-col::before      { content:"Date"; }
  .product-col::before   { content:"Product"; }
  .network-col::before   { content:"Network"; }
  .recipient-col::before { content:"Recipient"; }
  .amount-col::before    { content:"Amount"; }
  .status-col::before    { content:"Status"; }
  .reference-col::before { content:"Reference"; }
  .action-col::before    { content:"Action"; }
  .order-col::before     { content:"Order"; }

  .pt-table thead { display:none; }
  .pt-table tbody,
  .pt-table tbody tr { display:block; }
  .pt-table tbody { display:flex; flex-direction:column; gap:var(--s3); padding:var(--s3); }
  .pt-table tbody tr { border:1.5px solid var(--border); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--shadow-xs); background:var(--white); }
  .pt-row--pending     { border-left:4px solid var(--warning)  !important; }
  .pt-row--successful  { border-left:4px solid var(--success)  !important; }
  .pt-row--needs-verify { border-left:4px solid var(--accent) !important; }
  .pt-row--delivery-failed { border-left:4px solid var(--info) !important; }
  .pt-table td { display:grid; grid-template-columns:100px 1fr; gap:var(--s2); padding:6px 0; border:none; align-items:start; }
  .pt-table td::before { content:attr(data-label); font-weight:700; font-size:.68rem; color:var(--accent2); text-transform:uppercase; letter-spacing:.05em; padding-top:2px; flex-shrink:0; }
  .pt-date::before   { content:"Date"; }
  .pt-ref::before    { content:"Ref"; }
  .pt-detail::before { content:"Details"; }
  .pt-amount::before { content:"Amount"; }
  .pt-status::before { content:"Status"; }
  .pt-action::before { content:"Action"; }
  .pt-result-row td { display:block !important; }
  .pt-result-row td::before { display:none; }

  .complaints-table thead { display:none; }
  .complaints-table tbody tr { display:block; border:1.5px solid var(--border); border-radius:var(--r-lg); padding:var(--s4); margin-bottom:var(--s3); box-shadow:var(--shadow-xs); }
  .complaints-table tbody td { display:block; padding:6px 0; border:none; }
  .complaints-table tbody td::before { display:block; font-size:.68rem; font-weight:700; color:var(--accent2); text-transform:uppercase; margin-bottom:3px; }

  .transactions-page-header { padding:var(--s5); }
  .quick-amounts { grid-template-columns:repeat(2,1fr); }
  .checkout-direct { grid-template-columns:1fr; }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .transactions-stats { grid-template-columns:repeat(2,1fr); }
  .pt-stats { gap:var(--s2); }
  .pt-stat-card { min-width:calc(50% - var(--s2)); flex:none; padding:var(--s3) var(--s4); }
  .pt-stat-num  { font-size:1.2rem; }
  .btn-verify span { display:none; }
  .btn-verify   { padding:8px 10px; }
  .payment-container,.success-container { margin:var(--s5) 0; padding:var(--s5); }
  .auth-container { min-height:60vh; }
  .auth-box { padding:var(--s5); max-width:100%; }
  .funds-actions { flex-direction:column; }
  .actions { flex-direction:column; }
  .btn-row { flex-direction:column; align-items:stretch; }
  .filter-form { flex-direction:column; }
  .search-box form { flex-direction:column; }
  .modal-content { margin:10% auto; width:94%; }
  .modal-body { padding:var(--s5); }
  .stat-card  { padding:var(--s3) var(--s4); }
  .stat-value { font-size:1.2rem; }
  .fixed-button { bottom:16px; right:12px; }
  .fixed-button a { padding:9px 13px; font-size:.82rem; }
  .add-funds-container { display:block; }
}

@media (max-width: 400px) {
  :root { --content-px:12px; }
  .title { font-size:1.05rem; }
  .stat-icon { width:42px; height:42px; font-size:1.1rem; }
  .transactions-list td,
  .pt-table td { grid-template-columns:80px 1fr; }
}