/* ============================================================
   FlashData — Main Stylesheet  v2.0
   Architecture: Mobile-first · CSS Custom Properties · Component-based
   Breakpoints: 480 · 640 · 768 · 1024 · 1280
   ============================================================ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
:root {
  --navy:        #2b2d42;
  --navy-dark:   #1a1b2e;
  --navy-light:  #3d4058;
  --slate:       #8d99ae;
  --lemon:       #f8f32b;
  --white:       #ffffff;
  --off-white:   #f8f9fb;
  --border:      #e8eaed;
  --accent:      #667eea;
  --accent2:     #764ba2;
  --success:     #22c55e;
  --success-bg:  #f0fdf4;
  --success-text:#15803d;
  --warning:     #f59e0b;
  --warning-bg:  #fffbeb;
  --warning-text:#92400e;
  --danger:      #ef4444;
  --danger-bg:   #fef2f2;
  --danger-text: #991b1b;
  --info:        #3b82f6;
  --info-bg:     #eff6ff;
  --info-text:   #1d4ed8;
  --grad-brand:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --grad-navy:   linear-gradient(135deg, #2b2d42 0%, #3d4058 100%);
  --grad-success:linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --grad-warm:   linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  --font:        'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:   'Consolas','Monaco','Courier New',monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:9999px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.09);
  --shadow-md: 0 4px 16px rgba(0,0,0,.11);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --ease:      .2s ease;
  --ease-slow: .35s ease;
  --header-h:  60px;
  --max-w:     1320px;
  --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.6;
  color:var(--navy); 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.4rem,4vw,2rem);    font-weight:700; line-height:1.2; }
h2 { font-size:clamp(1.2rem,3vw,1.6rem);  font-weight:700; line-height:1.3; }
h3 { font-size:clamp(1rem,2.5vw,1.3rem);  font-weight:600; }
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);
  color:var(--white); display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--s5);
  position:sticky; top:0; z-index:900;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.title {
  font-size:1.25rem; font-weight:800; letter-spacing:-.3px;
  color:var(--white); display:flex; align-items:center; gap:var(--s2);
}
.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,.12); }
.nav-menu { display:flex; align-items:center; gap:var(--s1); }
.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);
  width:100%; color:var(--white);
}
.nav-menu li a {
  display:flex; align-items:center; gap:var(--s2);
  padding:8px 12px; border-radius:var(--r-sm);
  color:rgba(255,255,255,.88); font-size:.875rem; font-weight:500;
  transition:background var(--ease),color var(--ease); white-space:nowrap;
}
.nav-menu li a:hover { background:rgba(255,255,255,.15); color:var(--white); }
.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,.5); 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); color:rgba(255,255,255,.7);
  text-align:center; padding:var(--s4); font-size:.85rem; margin-top:auto;
}
.footer-text { color:rgba(255,255,255,.7); }

/* ── 7. FIXED BUTTON ─────────────────────────────────────── */
.fixed-button {
  position:fixed; bottom:20px; right:16px;
  background:var(--lemon); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); z-index:800;
  transition:transform var(--ease),box-shadow var(--ease);
}
.fixed-button:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.fixed-button a {
  display:flex; align-items:center; gap:var(--s2);
  padding:10px 16px; color:var(--navy); font-weight:700; 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:500; 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; }

/* ── 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 22px; border-radius:var(--r-md); border:none;
  font-size:.9rem; font-weight:600; cursor:pointer;
  transition:all var(--ease); text-decoration:none; line-height:1; white-space:nowrap;
}
.btn-primary { background:var(--grad-navy); color:var(--white); }
.btn-primary:hover { filter:brightness(1.12); transform:translateY(-1px); box-shadow:0 4px 14px rgba(43,45,66,.35); }
.btn-secondary { background:var(--off-white); color:var(--navy); border:1.5px solid var(--border); }
.btn-secondary:hover { background:var(--border); transform:translateY(-1px); }
.btn-small,.btn-sm { padding:6px 14px; font-size:.8rem; }
.btn-primary:disabled,.btn-secondary:disabled { opacity:.55; 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:600; font-size:.875rem; color:var(--navy); }
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:11px 14px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); font-size:.95rem; background:var(--white); color:var(--navy);
  transition:border-color var(--ease),box-shadow var(--ease);
}
.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(102,126,234,.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:.78rem; font-weight:700; text-transform:capitalize; white-space:nowrap;
}
.status-badge i { font-size:.95rem; }
.status-successful,.status-completed { background:var(--success-bg); color:var(--success-text); }
.status-pending    { background:var(--warning-bg); color:var(--warning-text); }
.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; }
.transactions-list,.data-table {
  width:100%; border-collapse:collapse; font-size:.9rem;
}
.transactions-list thead tr,.data-table thead tr { background:var(--grad-brand); }
.transactions-list thead th,.data-table thead th {
  padding:13px 15px; text-align:left; color:var(--white);
  font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; 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:#f9fafb; }
.transactions-list td,.data-table td { padding:13px 15px; vertical-align:middle; }
.date-col span { display:block; font-weight:600; color:var(--navy); font-size:.9rem; }
.date-col small { color:var(--slate); font-size:.78rem; }
.amount-col strong { color:var(--navy); font-weight:700; }
.reference-col code,.ref-code {
  background:var(--off-white); border:1px solid var(--border);
  padding:3px 7px; border-radius:4px; font-size:.78rem;
  font-family:var(--font-mono); color:var(--navy-light); word-break:break-all;
}
.order-link { color:var(--accent); font-weight:600; transition:color var(--ease); }
.order-link:hover { color:var(--accent2); text-decoration:underline; }
.recipient-number { display:inline-flex; align-items:center; gap:4px; font-size:.88rem; font-weight:500; }
.recipient-number i { color:var(--accent); font-size:.95rem; }
.btn-action-verify {
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px;
  background:var(--grad-warm); color:var(--white); border-radius:var(--r-sm);
  font-size:.8rem; font-weight:600; transition:all var(--ease); white-space:nowrap;
}
.btn-action-verify:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(255,107,53,.4); 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:600; }
.btn-link-complaint:hover { text-decoration:underline; }
.row-needs-verify   { border-left:3px solid #ff6b35 !important; }
.row-needs-delivery { border-left:3px solid var(--info) !important; background:#fafcff; }

/* ── 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(--s4) var(--s5);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:var(--s4);
  transition:transform var(--ease),box-shadow var(--ease);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-icon {
  width:48px; height:48px; border-radius:50%; 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-brand); }
.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:linear-gradient(135deg,#3b82f6,#2563eb); }
.stat-info h3 { font-size:.72rem; color:var(--slate); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.stat-value   { font-size:1.5rem; font-weight:800; color:var(--navy); line-height:1; }

/* ── 14. PAGE HEADERS ──────────────────────────────────────── */
.transactions-page-header {
  background:var(--grad-brand); color:var(--white);
  padding:var(--s7) var(--s6); border-radius:var(--r-lg);
  margin-bottom:var(--s6); box-shadow:var(--shadow-md);
}
.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,.85); 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);
}
.filter-form { display:flex; flex-direction:column; gap:var(--s3); }
.filter-group { display:flex; flex-direction:column; gap:4px; }
.filter-group input,.filter-group select {
  padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:.9rem; background:var(--white); color:var(--navy); 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; }

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

/* ── 17. DASHBOARD ────────────────────────────────────────── */
.dashboard-header {
  background:var(--grad-brand); color:var(--white);
  padding:var(--s6); border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  margin-bottom:var(--s6); display:flex; flex-direction:column; gap:var(--s4);
}
.dashboard-header h1 { color:var(--white); margin-bottom:4px; }
.user-balance {
  display:inline-flex; align-items:center; gap:var(--s4);
  background:rgba(255,255,255,.18); padding:10px 16px;
  border-radius:var(--r-md); backdrop-filter:blur(8px); flex-wrap:wrap; gap:var(--s3);
}
.balance-amount { font-weight:800; font-size:1.2rem; }
.dashboard-grid { display:grid; grid-template-columns:1fr; gap:var(--s5); }
.dashboard-card { background:var(--white); padding:var(--s5); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.dashboard-card h3 { margin-bottom:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--border); }
.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:var(--navy); font-weight:600; font-size:.85rem;
  gap:var(--s2); transition:all var(--ease); text-align:center;
}
.btn-action:hover { background:var(--accent); color:var(--white); border-color:var(--accent); 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:10px var(--s3); border-bottom:1px solid var(--border); font-size:.88rem; }

/* ── 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-lg);
  box-shadow:var(--shadow-md); width:100%; max-width:420px;
}
.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(--accent); font-weight:600; }
.auth-links a:hover { 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(--s3); }
.network-btn {
  display:flex; flex-direction:column; align-items:center;
  padding:14px 18px; background:var(--white); border:2px solid var(--border);
  border-radius:var(--r-lg); color:var(--navy); font-weight:600; font-size:.875rem;
  min-width:100px; transition:all var(--ease); gap:var(--s2);
}
.network-btn img { width:44px; height:44px; object-fit:contain; }
.network-btn i   { font-size:2rem; }
.network-btn:hover,.network-btn.active { border-color:var(--navy); background:#f0f0ff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.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);
}
.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(--off-white); border-bottom:1px solid var(--border); }
.product-network  { font-weight:700; font-size:1.1rem; }
.product-category { background:var(--navy); color:var(--white); padding:3px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:600; }
.product-name { padding:var(--s4) var(--s5); font-size:1rem; font-weight:600; border-bottom:1px solid var(--border); }
.fixed-product,.flexible-plan { padding:var(--s5); }
.product-price { font-size:1.4rem; font-weight:800; margin-bottom:var(--s3); }
.data-value { display:inline-block; background:var(--lemon); color:var(--navy); padding:3px 10px; border-radius:4px; font-weight:700; font-size:.85rem; margin-bottom:var(--s3); }
.btn-buy-now {
  width:100%; padding:13px; background:var(--grad-navy); color:var(--white); border:none;
  border-radius:var(--r-md); font-size:1rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:var(--s2); transition:all var(--ease);
}
.btn-buy-now:hover { filter:brightness(1.15); transform:translateY(-1px); }
.btn-buy-now:disabled { background:var(--slate); cursor:not-allowed; transform:none; }
.price-summary { background:var(--off-white); padding:var(--s4); border-radius:var(--r-sm); margin:var(--s4) 0; }
.price-row { display:flex; justify-content:space-between; margin-bottom:var(--s2); font-size:.9rem; }
.price-row.total { font-weight:700; font-size:1rem; border-top:1px solid var(--border); padding-top:var(--s2); margin-top:var(--s2); }
.purchase-form .form-group { margin-bottom:var(--s4); }
.purchase-form input,.purchase-form select { width:100%; padding:10px 12px; 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); }
.order-summary h3,.payment-options h3 { margin-bottom:var(--s5); padding-bottom:var(--s3); border-bottom:1px solid var(--border); }
.summary-item { display:flex; justify-content:space-between; padding:var(--s3) 0; border-bottom:1px solid #f5f5f5; font-size:.9rem; }
.summary-item.total { border-bottom:none; font-weight:700; font-size:1rem; }
.summary-item .value { font-weight:600; }
.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(--navy); background:#f0f0ff; transform:translateY(-2px); }
.payment-option-btn i     { font-size:1.4rem; display:block; margin-bottom:var(--s2); }
.payment-option-btn span  { display:block; font-weight:600; margin-bottom:3px; }
.payment-option-btn small { display:block; color:var(--slate); font-size:.8rem; }
.payment-option-btn.wallet { background:#f0fff4; border-color:#bbf7d0; }
.payment-method.disabled .payment-option-btn { opacity:.55; 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-lg); box-shadow:var(--shadow-md);
  text-align:center; width:100%;
}
.payment-info { text-align:left; background:var(--off-white); padding:var(--s5); border-radius:var(--r-md); margin:var(--s6) 0; }
.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:700; color:var(--success); font-size:1.1rem; }
.info-row .reference{ font-family:var(--font-mono); font-size:.78rem; background:var(--white); padding:2px 7px; border-radius:3px; color:var(--slate); }
.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; }
.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:700; font-family:var(--font-mono); }
.detail-row .amount    { color:var(--success); font-weight:700; }
.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(--accent); font-weight:600; }

/* ── 22. HOME PAGE ────────────────────────────────────────── */
.title-section { text-align:center; margin-bottom:var(--s7); width:100%; }
.title-main    { font-size:clamp(1.6rem,5vw,2.4rem); font-weight:800; padding-bottom:var(--s2); }
.title-des     { color:var(--slate); font-size:clamp(.9rem,2vw,1.1rem); margin-top:var(--s2); }
.user-welcome {
  background:var(--grad-brand); color:var(--white); padding:10px 18px;
  border-radius:var(--r-md); display:inline-flex; align-items:center; gap:var(--s3); font-size:.9rem; margin-top:var(--s4);
}
.user-welcome .balance { font-weight:800; font-size:1rem; }
.quick-purchase,.featured-section {
  background:var(--white); padding:var(--s6); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); margin-bottom:var(--s6); width:100%; max-width:var(--max-w);
}
.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:linear-gradient(135deg,#f5f7fa,#e8ecf4);
  border-radius:var(--r-lg); color:var(--navy); font-weight:600; font-size:.85rem;
  gap:var(--s2); text-align:center; transition:all var(--ease); box-shadow:var(--shadow-xs);
}
.quick-item:hover { background:var(--grad-brand); color:var(--white); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.quick-item img { width:52px; height:52px; object-fit:contain; }
.quick-item i   { font-size:2.2rem; }
.quick-item small { font-size:.78rem; opacity:.8; }
.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-sm); transform:translateY(-2px); }
.card-links img { width:120px; height:auto; }
.card-links a   { font-weight:700; font-size:1rem; }

/* ── 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:var(--navy); 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:700; }

/* ── 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); }
.price-display { font-size:1.2rem; font-weight:700; color:var(--success); padding:var(--s3) var(--s4); background:var(--success-bg); border-radius:var(--r-sm); text-align:center; }
.summary-divider { height:2px; 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:700; cursor:pointer; transition:all var(--ease); margin-top:var(--s3);
}
.btn-guest-checkout:hover { filter:brightness(1.1); transform:translateY(-1px); }
.guest-option { background:var(--off-white); padding:var(--s5); border-radius:var(--r-lg); margin-top:var(--s5); text-align:center; }
.guest-option p { margin-bottom:var(--s4); font-size:.9rem; }
.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-navy);   color:var(--white); }
.btn-guest-option:hover,.btn-login-option:hover { filter:brightness(1.12); 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);
}
.complaint-stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-content .stat-label  { font-size:.72rem; color:var(--slate); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.stat-content .stat-number { font-size:1.8rem; font-weight:800; }
.stat-icon.total    { background:var(--grad-navy); }
.stat-icon.pending  { background:linear-gradient(135deg,#ff9800,#f57c00); }
.stat-icon.in-review{ background:linear-gradient(135deg,#2196F3,#1976D2); }
.stat-icon.resolved { background:var(--grad-success); }
.stat-icon.rejected { background:linear-gradient(135deg,#f44336,#d32f2f); }
.complaints-section { background:var(--white); border-radius:var(--r-lg); padding:var(--s6); margin-bottom:var(--s6); box-shadow:var(--shadow-sm); }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:2px solid var(--off-white); }
.btn-toggle-form { background:none; border:none; font-size:1.4rem; color:var(--navy); 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:2px 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(--navy); box-shadow:0 0 0 3px rgba(43,45,66,.1); 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:2px 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:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:var(--s2); font-size:.9rem; transition:all var(--ease); white-space:nowrap;
}
.btn-filter       { background:linear-gradient(135deg,#ff9800,#f57c00); color:var(--white); }
.btn-filter:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,152,0,.3); }
.btn-filter-clear,.btn-clear { background:var(--border); color:var(--navy); }
.btn-filter-clear:hover,.btn-clear:hover { background:#d0d0d0; }
.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(--grad-navy); color:var(--white); }
.complaints-table thead th { padding:14px 16px; text-align:left; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
.complaints-table tbody tr { border-bottom:1px solid var(--border); transition:background var(--ease); }
.complaints-table tbody tr:hover { background:#f9fafb; }
.complaints-table tbody td { padding:14px 16px; }
.complaint-title strong { color:var(--navy); font-weight:600; 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:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.badge-status           { padding:6px 12px; font-size:.78rem; }
.badge-status.status-pending   { background:var(--warning-bg); color:var(--warning-text); border-left:3px solid var(--warning); }
.badge-status.status-in_review { background:var(--info-bg);    color:var(--info-text);    border-left:3px solid var(--info); }
.badge-status.status-resolved  { background:var(--success-bg); color:var(--success-text); border-left:3px solid var(--success); }
.badge-status.status-rejected  { background:var(--danger-bg);  color:var(--danger-text);  border-left:3px solid var(--danger); }
.badge-category  { background:var(--off-white); color:var(--navy); border:1px solid var(--border); }
.badge-priority.priority-low    { background:#dcfce7; color:#166534; }
.badge-priority.priority-medium { background:#fef3c7; color:#92400e; }
.badge-priority.priority-high   { background:#fee2e2; color:#991b1b; }
.btn-view-detail { color:var(--navy); font-weight:600; display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:var(--r-sm); transition:all var(--ease); background:var(--off-white); font-size:.85rem; }
.btn-view-detail:hover { background:var(--navy); color:var(--white); }
.modal          { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; overflow-y:auto; }
.modal-content  { background:var(--white); margin:5% auto; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:90%; max-width:680px; overflow:hidden; }
.modal-lg       { max-width:700px; }
.modal-header   { background:var(--grad-navy); color:var(--white); padding:var(--s5) var(--s6); display:flex; justify-content:space-between; align-items:center; }
.modal-header h2 { color:var(--white); margin:0; font-size:1.2rem; }
.modal-close    { background:none; border:none; color:var(--white); font-size:1.6rem; cursor:pointer; transition:transform var(--ease-slow); line-height:1; }
.modal-close:hover { transform:rotate(90deg); }
.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); }
.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-lg); box-shadow:var(--shadow-sm); margin-bottom:var(--s5); }
.funds-card h1 { text-align:center; margin-bottom:var(--s6); }
.current-balance { background:var(--grad-brand); color:var(--white); padding:var(--s5); border-radius:var(--r-lg); margin-bottom:var(--s6); text-align:center; }
.current-balance h3 { font-size:.85rem; opacity:.85; margin-bottom:var(--s2); font-weight:500; }
.balance-display { font-size:2rem; font-weight:800; }
.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:2px solid var(--border); background:var(--white); border-radius:var(--r-sm); font-weight:600; font-size:.85rem; cursor:pointer; transition:all var(--ease); }
.quick-btn:hover { border-color:var(--accent); background:#f0f4ff; }
.funds-info { background:var(--off-white); padding:var(--s5); border-radius:var(--r-md); margin-top:var(--s5); }
.funds-info h4 { margin-bottom:var(--s3); }
.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-lg); box-shadow:var(--shadow-sm); }
.funds-transactions h3 { margin-bottom:var(--s5); }

/* ── 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); }
.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; }
.pt-stat-label { font-size:.7rem; color:var(--slate); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.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; }
.pt-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.pt-table thead tr { background:var(--grad-brand); }
.pt-table thead th { padding:13px 14px; text-align:left; color:var(--white); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.pt-table td { padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.pt-row:hover td { background:#f9fafb; }
.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 #ff6b35 !important; background:#fffaf7; }
.pt-row--delivery-failed { border-left:3px solid var(--info) !important; background:#f8fbff; }
.pt-date span { display:block; font-weight:600; font-size:.9rem; }
.pt-date small { color:var(--slate); font-size:.75rem; }
.type-badge { display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; white-space:nowrap; }
.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:500; }
.detail-network   { display:inline-block; background:var(--info-bg); color:var(--info-text); padding:1px 6px; border-radius:10px; font-size:.75rem; 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:700; }
.status-delivery-fail { background:var(--info-bg); color:var(--info-text); }
.btn-verify { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:var(--grad-warm); color:var(--white); border:none; border-radius:var(--r-md); cursor:pointer; font-size:.82rem; font-weight:700; transition:all var(--ease); white-space:nowrap; }
.btn-verify:hover   { transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,107,53,.4); }
.btn-verify:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.action-done  { color:var(--success); font-size:.85rem; font-weight:600; }
.btn-link-small { color:var(--accent); font-size:.82rem; font-weight:600; }
.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:500; }
.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:60px var(--s5); color:var(--slate); }
.pt-empty i  { font-size:4rem; display:block; margin-bottom:var(--s4); color:#ddd; }
.pt-empty h3 { margin-bottom:var(--s3); }

/* ── 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-lg); box-shadow:var(--shadow-md); padding:var(--s8) var(--s7); text-align:center; }
.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; }
.badge-pending  { background:var(--warning-bg); color:var(--warning-text); padding:3px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; }
.badge-complete { background:var(--success-bg); color:var(--success-text); padding:3px 10px; border-radius:var(--r-pill); font-size:.75rem; 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); }
.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); }
.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
   — position:fixed so it works on ALL screen sizes,
     off-screen by default, slides in when .active is added
   ═══════════════════════════════════════════════════════════ */

/* Overlay backdrop */
.sidebar-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(10,10,20,.55);
  backdrop-filter:blur(3px);
  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 panel */
.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;
}
.sidebar.active { transform:translateX(0); }

/* ── Sidebar header ── */
.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px 16px;
  background:linear-gradient(135deg, #1e2040 0%, #2b2d42 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  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(--white); flex-shrink:0;
}
.sidebar-logo-name    { font-size:1.05rem; font-weight:800; color:var(--white); letter-spacing:-.2px; line-height:1.1; }
.sidebar-logo-tagline { font-size:.7rem; color:rgba(255,255,255,.45); margin-top:1px; }
.sidebar-close {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.08); border:none;
  color:rgba(255,255,255,.7); 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(255,255,255,.16); color:var(--white); }

/* ── User info strip ── */
.sidebar-user {
  display:flex; align-items:center; gap:11px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
  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(--white); flex-shrink:0;
}
.sidebar-user-name  { font-size:.88rem; font-weight:700; color:var(--white); }
.sidebar-user-email { font-size:.72rem; color:rgba(255,255,255,.45); margin-top:1px; word-break:break-all; }

/* ── Nav links ── */
.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,.1) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:2px; }

.sidebar-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.9px;
  color:rgba(255,255,255,.3); text-transform:uppercase;
  padding:10px 8px 4px; margin-top:4px;
}
.sidebar-section-label:first-child { margin-top:0; }

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

/* Active link — highlight the current page */
.sidebar-link.active {
  background:rgba(102,126,234,.2);
  color:var(--white);
}
.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;
}

/* Icon bubbles */
.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,.18);  color:#63b3ed; }
.sidebar-icon.products    { background:rgba(154,230,180,.18); color:#9ae6b4; }
.sidebar-icon.dashboard   { background:rgba(102,126,234,.22); color:#a3b5f8; }
.sidebar-icon.transactions{ background:rgba(246,173,85,.18);  color:#f6ad55; }
.sidebar-icon.pending     { background:rgba(245,158,11,.18);  color:#fbbf24; }
.sidebar-icon.wallet      { background:rgba(154,230,180,.2);  color:#68d391; }
.sidebar-icon.complaints  { background:rgba(252,129,129,.18); color:#fc8181; }
.sidebar-icon.admin       { background:rgba(214,158,46,.18);  color:#d69e2e; }
.sidebar-icon.login       { background:rgba(102,126,234,.18); color:#a3b5f8; }
.sidebar-icon.register    { background:rgba(99,179,237,.18);  color:#63b3ed; }
.sidebar-icon.whatsapp    { background:rgba(37,211,102,.22);  color:#25d366; }

/* WhatsApp link */
.sidebar-whatsapp { background:rgba(37,211,102,.07); }
.sidebar-whatsapp:hover { background:rgba(37,211,102,.15) !important; }
.sidebar-external { margin-left:auto; font-size:.8rem; opacity:.45; }

/* ── Footer (Logout) ── */
.sidebar-footer {
  padding:12px 10px;
  border-top:1px solid rgba(255,255,255,.07);
  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,.1); border:1px solid rgba(239,68,68,.2);
  color:#fc8181; font-size:.875rem; font-weight:600;
  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) {

  /* Tables → Cards */
  .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:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; 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 #ff6b35 !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:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; 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:.72rem; font-weight:700; color:var(--accent); text-transform:uppercase; margin-bottom:3px; }

  /* Page tweaks */
  .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.1rem; }
  .stat-icon { width:40px; height:40px; font-size:1.1rem; }
  .transactions-list td,
  .pt-table td { grid-template-columns:80px 1fr; }
}