/* =========================
GIFT CARD FORM
========================= */

#giftCardForm select,
#giftCardForm input[type="number"],
#giftCardForm input[type="text"],
#giftCardForm input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

#giftCardForm select{
height: 40px;
padding: 10px;
border-radius: 10px;
background: transparent;
color: white;
}
#giftCardForm select option{
  color: black;
}

.gc-rate-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  margin-bottom: 16px;
  font-size: 14px;
}

.gc-rate-preview strong {
  font-size: 16px;
  color: #10b981;
}

/* =========================
TRADE LIST
========================= */

.gc-trade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  cursor: pointer;
}

.gc-trade-row:last-child { border-bottom: none; }

.gc-trade-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gc-trade-left strong { font-size: 14px; }
.gc-trade-left small { color: #94a3b8; font-size: 12px; }

.gc-trade-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.gc-amount { font-weight: 600; font-size: 14px; }

.gc-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.gc-status-badge.pending { background: rgba(217, 140, 43, 0.15); color: #d98c2b; }
.gc-status-badge.under_review { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.gc-status-badge.approved { background: rgba(31, 157, 108, 0.15); color: #1f9d6c; }
.gc-status-badge.rejected { background: rgba(217, 72, 59, 0.15); color: #d9483b; }
.gc-status-badge.paid { background: rgba(16, 185, 129, 0.18); color: #10b981; }

/* =========================
TRADE DETAIL MODAL
========================= */

.gc-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 13.5px;
}

.gc-detail-row:last-child { border-bottom: none; }

.gc-detail-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.gc-detail-images img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.gc-detail-row{
  color:black;
}

.gc-admin-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(217, 72, 59, 0.08);
  border-left: 3px solid #d9483b;
  font-size: 13px;
}

/* =========================
WITHDRAW METHOD FIELDS
========================= */

.withdraw-method-fields select,
.withdraw-method-fields input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}





/* =========================
GIFT CARD RATES — DASHBOARD CARD GRID
Add this block to your main stylesheet (style.css).
Works in both light mode and .dark-mode (uses CSS vars where your
theme already defines them; falls back to sane defaults otherwise).
========================= */

.gc-rate-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); */
  gap: 12px;
}

.gc-rate-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 400px;
}

.gc-rate-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.gc-rate-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gc-rate-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f1f5f9;
}

.gc-rate-card-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #2563eb;
  background: #eff6ff;
}

.gc-rate-card-brand {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-rate-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gc-rate-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  padding: 4px 8px;
  background: var(--surface-muted, #f8fafc);
  border-radius: 8px;
}

.gc-rate-card-currency {
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}

.gc-rate-card-value {
  color: #10b981;
  font-weight: 700;
}

/* Dark mode overrides */
body.dark-mode .gc-rate-card {
  background: var(--card-bg-dark, #1e293b);
  border-color: var(--border-color-dark, #334155);
}

body.dark-mode .gc-rate-card-brand {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-mode .gc-rate-card-row {
  background: var(--surface-muted-dark, #0f172a);
}

body.dark-mode .gc-rate-card-currency {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-mode .gc-rate-card-icon-fallback {
  background: #1e3a8a;
  color: #93c5fd;
}

/* =========================================================
GIFT CARD TRADING — ACCORDION BROWSE + REVIEW/TERMS (gc2-*)
Dark theme matching the rest of the dashboard (body #0f172a,
sidebar #0b1220, glass cards, blue #3b82f6 / green #10b981 accents).
========================================================= */

.gc2-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 22px;
  color: #fff;
}

.gc2-step { width: 100%; }

/* ---------- Filter bar ---------- */

.gc2-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.gc2-filter-label {
  color: #94a3b8;
  font-size: 14.5px;
}

.gc2-filter-pill {
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.gc2-filter-pill.active {
  background: #10b981;
  color: #ffffff;
}

.gc2-filter-info {
  border: none;
  background: transparent;
  color: #94a3b8;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gc2-filter-info:hover { background: rgba(255, 255, 255, 0.08); }

.gc2-empty { color: #94a3b8; font-size: 14px; padding: 20px 4px; }

/* ---------- Accordion (brand rows) ---------- */

.gc2-accordion { display: flex; flex-direction: column; gap: 12px; }

.gc2-brand {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
}

.gc2-brand-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.gc2-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
}
.gc2-brand-icon img { width: 100%; height: 100%; object-fit: cover; }

.gc2-brand-icon.small { width: 26px; height: 26px; font-size: 12px; }

.gc2-brand-name {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.gc2-chev {
  color: #10b981;
  transition: transform .2s ease;
  font-size: 14px;
}

.gc2-brand.open > .gc2-brand-head .gc2-chev { transform: rotate(180deg); }

.gc2-brand-body {
  display: none;
  padding: 0 18px 18px;
}

.gc2-brand.open > .gc2-brand-body { display: block; }

.gc2-autofill-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.14);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  margin-bottom: 12px;
}
.gc2-autofill-pill i { color: #10b981; }

.gc2-subcats { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Subcategory rows ---------- */

.gc2-subcat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
}

.gc2-subcat-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  cursor: pointer;
  text-align: left;
}

.gc2-subcat-name {
  flex: 1;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
}

.gc2-subcat-star {
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  font-size: 15px;
  padding: 2px;
}
.gc2-subcat-star.is-fav { color: #f59e0b; }

.gc2-subcat-body { display: none; padding: 16px; }
.gc2-subcat.open .gc2-subcat-body { display: block; }
.gc2-subcat.open .gc2-subcat-head .gc2-chev { transform: rotate(180deg); }

.gc2-qty-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.gc2-qty-input:focus { outline: 2px solid #3b82f655; }

.gc2-amount-preview {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-weight: 700;
  font-size: 16px;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.gc2-rate-pill {
  display: inline-block;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

.gc2-comments {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: #fff;
  resize: vertical;
  min-height: 70px;
  margin-bottom: 14px;
  font-family: inherit;
}
.gc2-comments::placeholder { color: #64748b; }

.gc2-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.gc2-upload-slot {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  color: #64748b;
  overflow: hidden;
}

.gc2-upload-slot img { width: 100%; height: 100%; object-fit: cover; }

.gc2-upload-slot .gc2-remove-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gc2-upload-info { color: #475569; font-size: 15px; margin-left: 2px; }

.gc2-subcat-limits { font-size: 12px; color: #94a3b8; margin: -6px 0 14px; }

.gc2-proceed-wrap { display: flex; justify-content: flex-end; }

.gc2-proceed-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}
.gc2-proceed-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Step 2 — review, receipt & terms ---------- */

.gc2-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0 18px;
}

.gc2-review-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.gc2-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 14px;
}
.gc2-review-row strong { color: #fff; font-size: 16px; }

.gc2-review-brand { margin-bottom: 14px; }

.gc2-review-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
}
.gc2-review-icon img { width: 100%; height: 100%; object-fit: cover; }

.gc2-review-warning {
  color: #cbd5e1;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Receipt / transaction summary ---------- */

.gc2-receipt {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.gc2-receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.gc2-receipt-header span:first-child {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gc2-receipt-header span:first-child i { color: #10b981; }

.gc2-receipt-id {
  font-size: 11.5px;
  color: #94a3b8;
  font-family: monospace;
}

.gc2-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: #94a3b8;
  padding: 7px 0;
}
.gc2-receipt-row strong {
  color: #fff;
  font-weight: 600;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

.gc2-receipt-row.total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 6px;
  padding-top: 12px;
}
.gc2-receipt-row.total strong { color: #10b981; font-size: 16px; }

.gc2-receipt-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.gc2-receipt-images img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gc2-terms-link {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  color: #f87171;
  text-decoration: underline;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 14px 0;
}

.gc2-terms-check {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14.5px;
  color: #fff;
  cursor: pointer;
  margin-bottom: 20px;
}

.gc2-terms-check input[type="checkbox"] { display: none; }

.gc2-check-visual {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: background .15s ease;
}

.gc2-terms-check input[type="checkbox"]:checked + .gc2-check-visual {
  background: #10b981;
}

.gc2-submit-btn {
  width: 100%;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.gc2-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.gc2-submit-status { font-size: 13px; color: #94a3b8; text-align: center; margin: -6px 0 14px; }

/* ---------- Trade terms modal (kept light, matches other app modals) ---------- */

.gc2-terms-modal-content { max-width: 480px; text-align: left; }
.gc2-terms-body { max-height: 50vh; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #333; }
.gc2-terms-body ul { padding-left: 18px; margin: 10px 0; }
.gc2-terms-body li { margin-bottom: 10px; }

@media (max-width: 480px) {
  .gc2-wrap { padding: 16px; border-radius: 16px; }
}

/* =========================================================
STICKY NAVBAR + LIVE RATES TICKER
========================================================= */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: flex-start;
  z-index: 40;
  scrollbar-width: thin;
}

.nav-live-rates {
  overflow: hidden;
  margin: 0 0 20px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  padding: 9px 0;
}

.nav-live-rates-track {
  display: flex;
  gap: 20px;
  white-space: nowrap;
  width: max-content;
  animation: gc2-marquee 24s linear infinite;
  padding: 0 14px;
}

.nav-live-rates:hover .nav-live-rates-track { animation-play-state: paused; }

@keyframes gc2-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.nav-live-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 600;
}
.nav-live-rate-pill strong { color: #10b981; }
.nav-live-rate-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

@media (max-width: 768px) {
  .sidebar { height: auto; max-height: 100vh; }
  .nav-live-rates { margin: 0 0 10px; }
}

/* ---------- Header profile avatar (beside notification center) ---------- */

.header-profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.header-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-profile-avatar:hover { opacity: 0.9; }

/* =========================================================
PROFESSIONAL LIGHT MODE
Dark is the app's unconditional default (index.css). Adding
"light-mode" to <body> (see main.js themeToggle) switches the
whole app — sidebar, cards, forms, gift card flow, tickers —
to this light palette. Selectors are prefixed with
"body.light-mode" so they reliably out-specificity the base
dark rules regardless of source order.
========================================================= */

body.light-mode {
  background: #f5f7fb;
  color: #0f172a;
}

/* ---- Sidebar / navbar ---- */

body.light-mode .sidebar {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
}

body.light-mode .nav-item { color: #334155; }
body.light-mode .nav-item:hover { background: #eef2ff; }
body.light-mode .nav-item.active { background: #3b82f6; color: #ffffff; }

body.light-mode .bottom-nav {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}
body.light-mode .bottom-nav .nav-item { color: #64748b; }

/* ---- Headers ---- */

body.light-mode header p { color: #64748b; }

/* ---- Glass surfaces -> flat light cards ---- */

body.light-mode .card,
body.light-mode .wallet-overview-card,
body.light-mode .settings-menu-item,
body.light-mode .account-number-card,
body.light-mode .login-box,
body.light-mode .notification-dropdown {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
}

body.light-mode .settings-menu-item:hover { background: #f8fafc; }
body.light-mode .login-screen { background: #eef1f6; }

/* ---- Form fields ---- */

body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .wallet-filter-select {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: #94a3b8; }

/* ---- Balance & transactions ---- */

body.light-mode .wallet-balance-amount,
body.light-mode .transaction-info h4,
body.light-mode .wallet-tx-info strong,
body.light-mode #accountNumber {
  color: #0f172a;
}

body.light-mode .wallet-tx-row { border-bottom-color: #eef0f3; }
body.light-mode .wallet-tx-row:hover { background: #f8fafc; }

/* ---- Notifications ---- */

body.light-mode .notification-header { border-bottom-color: #e5e7eb; }
body.light-mode .notification-item { background: #f8fafc; border-color: #e5e7eb; }
body.light-mode .notification-item:hover { background: #eef2ff; }

/* ---- Header profile avatar ---- */

body.light-mode .header-profile-avatar { border-color: #e5e7eb; }

/* ---- Live rates ticker (sidebar / dashboard / rates page) ---- */

body.light-mode .nav-live-rates {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.2);
}
body.light-mode .nav-live-rate-pill { color: #334155; }
body.light-mode .nav-live-rate-pill strong { color: #059669; }

/* ---- Gift card trading (gc2-*) ---- */

body.light-mode .gc2-wrap {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

body.light-mode .gc2-filter-label { color: #64748b; }
body.light-mode .gc2-filter-pill { background: #f1f5f9; color: #334155; }
body.light-mode .gc2-filter-pill.active { background: #10b981; color: #fff; }
body.light-mode .gc2-filter-info:hover { background: #f1f5f9; }
body.light-mode .gc2-empty { color: #64748b; }

body.light-mode .gc2-brand {
  background: #f8fafc;
  border-color: #e5e7eb;
}
body.light-mode .gc2-brand-name { color: #0f172a; }

body.light-mode .gc2-autofill-pill { background: rgba(16, 185, 129, 0.12); color: #0f172a; }

body.light-mode .gc2-subcat { background: #ffffff; border-color: #e5e7eb; }
body.light-mode .gc2-subcat-head { background: #f8fafc; }
body.light-mode .gc2-subcat-name { color: #0f172a; }
body.light-mode .gc2-subcat-star { color: #cbd5e1; }
body.light-mode .gc2-subcat-star.is-fav { color: #f59e0b; }

body.light-mode .gc2-qty-input,
body.light-mode .gc2-comments {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}
body.light-mode .gc2-comments::placeholder { color: #94a3b8; }
body.light-mode .gc2-subcat-limits { color: #64748b; }

body.light-mode .gc2-upload-slot {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #94a3b8;
}
body.light-mode .gc2-upload-info { color: #cbd5e1; }

body.light-mode .gc2-proceed-btn { background: #3b82f6; color: #fff; }

body.light-mode .gc2-back { color: #0f172a; }

body.light-mode .gc2-review-card,
body.light-mode .gc2-receipt {
  background: #f8fafc;
  border-color: #e5e7eb;
}
body.light-mode .gc2-review-row { color: #64748b; }
body.light-mode .gc2-review-row strong { color: #0f172a; }
body.light-mode .gc2-review-warning { color: #334155; }

body.light-mode .gc2-receipt-header { border-bottom-color: #e2e8f0; }
body.light-mode .gc2-receipt-header span:first-child { color: #0f172a; }
body.light-mode .gc2-receipt-row { color: #64748b; }
body.light-mode .gc2-receipt-row strong { color: #0f172a; }
body.light-mode .gc2-receipt-row.total { border-top-color: #e2e8f0; }
body.light-mode .gc2-receipt-images img { border-color: #e2e8f0; }

body.light-mode .gc2-terms-check {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #0f172a;
}
body.light-mode .gc2-check-visual { background: #cbd5e1; }

body.light-mode .gc2-submit-status { color: #64748b; }

/* =========================================================
RECEIPT MODAL FIX
Previously relied on inherited body text color, which is fine in
dark mode but breaks in light mode: the box itself never got a
light-mode background, so light-mode's dark inherited text became
invisible against the box's fixed dark background. Colors below are
explicit in both themes so this can't silently break again.
========================================================= */

.receipt-item span { color: #94a3b8; font-size: 13.5px; }
.receipt-item strong { color: #ffffff; font-weight: 600; text-align: right; }

body.light-mode .receipt-box {
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}
body.light-mode .receipt-item { border-bottom-color: #e5e7eb; }
body.light-mode .receipt-item span { color: #64748b; }
body.light-mode .receipt-item strong { color: #0f172a; }
body.light-mode .receipt-box p { color: #64748b !important; }

@media (max-width: 768px) {
  body.light-mode .sidebar { border-right: none; border-bottom: 1px solid #e5e7eb; }
}

/* =========================================================
RATE BOARD — dashboard widget + full Live Rates page
Replaces the old fixed-width .gc-rate-card grid with a proper
searchable exchange-rate table: sortable-looking header, zebra
rows, brand logos, currency chips, and a live-updating badge.
========================================================= */

.rate-board-card { display: flex; flex-direction: column; gap: 14px; }

.rate-board-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rate-board-card-header h3 { margin: 0; }

.rate-board-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.rate-board-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: rate-board-pulse 1.8s ease-out infinite;
}

@keyframes rate-board-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---- Stat strip (Live Rates page only) ---- */

.rate-board-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.rate-board-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rate-board-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.rate-board-stat-value i { color: #10b981; font-size: 20px; }

.rate-board-stat-label {
  font-size: 12.5px;
  color: #94a3b8;
  font-weight: 500;
}

/* ---- Toolbar (search + live badge) ---- */

.rate-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rate-board-search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 11px 16px;
  color: #94a3b8;
}
.rate-board-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  height: auto;
  padding: 0;
}
.rate-board-search input::placeholder { color: #64748b; }

/* ---- Table ---- */

.rate-board-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(520px, 62vh);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.rate-board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rate-board-table thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  font-weight: 600;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 0;
}

.rate-board-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}
.rate-board-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.rate-board-table tbody tr:hover { background: rgba(59, 130, 246, 0.08); }

.rate-board-table td { padding: 12px 16px; vertical-align: middle; }

.rate-board-brand-cell { display: flex; align-items: center; gap: 10px; }

.rate-board-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #1e293b;
}
.rate-board-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #93c5fd;
  background: #1e3a8a;
}

.rate-board-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.rate-board-brand-name { font-weight: 600; color: #fff; }
.rate-board-brand-country { font-size: 11.5px; color: #94a3b8; }

.rate-board-currency-chip {
  display: inline-block;
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  border-radius: 6px;
  padding: 4px 8px;
}

.rate-board-value-cell {
  text-align: right;
  font-weight: 700;
  color: #10b981;
  white-space: nowrap;
}
.rate-board-unit { font-weight: 500; color: #64748b; font-size: 11.5px; margin-left: 2px; }

.rate-board-table thead th.rate-board-value-cell { text-align: right; }

.rate-board-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13.5px;
  padding: 26px 10px;
}
.rate-board-empty i { margin-right: 6px; }

.rate-board-viewall-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #3b82f6;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 2px 0;
}
.rate-board-viewall-btn:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .rate-board-stats { grid-template-columns: 1fr; }

  /* Keep the SAME table layout as desktop (Brand | Currency | Rate
     columns) rather than converting rows into stacked blocks — the
     stacked version was the "resting on each other" bug (cramped rows
     with no real separation). The wrapper below already scrolls
     horizontally, so a table that's too wide for the screen just pans
     sideways instead of being squeezed apart. */
  .rate-board-table {
    font-size: 12.5px;
  }
  .rate-board-table th,
  .rate-board-table td {
    padding: 10px 10px;
    white-space: nowrap;
  }
  .rate-board-brand-cell {
    gap: 8px;
  }
  .rate-board-icon {
    width: 24px;
    height: 24px;
  }
}

/* ---- Light mode ---- */

body.light-mode .rate-board-live-badge { background: rgba(16, 185, 129, 0.1); color: #059669; }
body.light-mode .rate-board-stat { background: #ffffff; border-color: #e5e7eb; }
body.light-mode .rate-board-stat-value { color: #0f172a; }
body.light-mode .rate-board-stat-label { color: #64748b; }
body.light-mode .rate-board-search {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}
body.light-mode .rate-board-search input { color: #0f172a; }
body.light-mode .rate-board-search input::placeholder { color: #94a3b8; }
body.light-mode .rate-board-table-wrap { border-color: #e5e7eb; }
body.light-mode .rate-board-table thead th { background: #f8fafc; color: #64748b; }
body.light-mode .rate-board-table tbody tr { border-top-color: #eef0f3; }
body.light-mode .rate-board-table tbody tr:nth-child(even) { background: #fafbfc; }
body.light-mode .rate-board-table tbody tr:hover { background: #eef2ff; }
body.light-mode .rate-board-brand-name { color: #0f172a; }
body.light-mode .rate-board-brand-country { color: #64748b; }
body.light-mode .rate-board-icon-fallback { background: #dbeafe; color: #2563eb; }
body.light-mode .rate-board-currency-chip { background: #dbeafe; color: #1d4ed8; }
body.light-mode .rate-board-unit { color: #94a3b8; }
body.light-mode .rate-board-empty { color: #64748b; }

/* Full Transactions page list — same "shouldn't just keep stacking the
   page taller" fix as the rate board: cap height, scroll internally.
   The shorter dashboard preview list intentionally keeps growing with
   its (already-small) content, so this only targets the full list. */
#transactionsList {
  max-height: min(600px, 68vh);
  overflow-y: auto;
}

/* =========================================================
DEPOSIT (PAYMENT) METHODS + DEPOSIT PROOF MODAL
Both live inside .topup-box, which is ALWAYS a white card
regardless of light/dark mode (index.css: .topup-box{background:
#fff}, no dark variant). Everything below is written as dark text
on that white card by default — not gated behind body.light-mode,
since the container itself never goes dark. This also fixes the
pre-existing "Top Up Wallet" title, which had no color set at all
and was silently inheriting the page's white text on this same
white box.
========================================================= */

.topup-box, .dp-box {
  color: #0f172a;
}

.topup-header h2 {
  color: #0f172a;
}

.deposit-methods-info { margin-bottom: 4px; }

.deposit-methods-title {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 12px;
  display: flex;
  gap: 8px;
}
.deposit-methods-title i { color: #3b82f6; margin-top: 2px; flex-shrink: 0; }

.deposit-method-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  color: #0f172a;
}
.deposit-method-card strong { display: block; margin-bottom: 8px; color: #059669; }

.deposit-method-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
  padding: 3px 0;
}
.deposit-method-row span:last-child { color: #0f172a; font-weight: 600; }
.deposit-method-row .mono { font-family: monospace; letter-spacing: 0.03em; }

.deposit-method-note {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 8px 0 0;
  font-style: italic;
}

.dp-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ecfdf5;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #64748b;
}
.dp-amount-row strong { color: #059669; font-size: 20px; }

.dp-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.dp-timer i { color: #3b82f6; }
.dp-timer strong { color: #0f172a; font-variant-numeric: tabular-nums; }
.dp-timer.dp-timer-expired { background: #fef2f2; color: #b91c1c; }
.dp-timer.dp-timer-expired i, .dp-timer.dp-timer-expired strong { color: #ef4444; }

.dp-instructions {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 16px;
}

.dp-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.dp-upload-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  cursor: pointer;
  color: #64748b;
  font-size: 13px;
  text-align: center;
  overflow: hidden;
  position: relative;
  padding: 14px;
}
.dp-upload-slot i { font-size: 22px; color: #3b82f6; }
.dp-upload-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#dpRemoveProofBtn {
  background: #fef2f2;
  color: #dc2626;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.dp-status { font-size: 12.5px; color: #64748b; text-align: center; margin: 0 0 14px; }

.dp-submit-btn {
  width: 100%;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 14px;
  height: 52px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.dp-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Defensive: any canvas (e.g. the Analytics chart) should never overflow
   its card on narrow screens. */
canvas { max-width: 100%; height: auto; }

/* =========================================================
DASHBOARD — MOBILE RESPONSIVENESS (Cardtonic-style pattern:
prominent balance card, icon-grid quick actions, clean stacked
sections, no horizontal overflow anywhere)
========================================================= */

@media (max-width: 768px) {
  /* The balance card already stacks (index.css), but the balance
     NUMBER itself was fixed at 34px with white-space:nowrap and no
     mobile scaling — a real balance like ₦1,250,000.00 could clip
     or force horizontal scroll on a narrow phone. */
  .wallet-balance-amount {
    font-size: 28px;
  }

  /* Live Rates + Recent Notifications were sharing an auto-fit grid
     that could squeeze both heavy cards down to ~150px wide on a
     phone instead of properly stacking full-width. */
  .cards {
    grid-template-columns: 1fr;
  }

  .wallet-tx-header-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .wallet-filter-select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .wallet-balance-amount {
    font-size: 24px;
  }
  .wallet-currency-badge {
    font-size: 18px;
  }
  .wallet-overview-card {
    padding: 20px;
  }
  .qa-label {
    font-size: 11.5px;
  }
}

/* =========================================================
REMOVE REDUNDANT TOP NAV ON MOBILE
The sidebar was converting into a second, horizontal nav bar at
the top of the screen at <=768px, WHILE the bottom-nav tabs were
also visible — two navigation bars on screen at once, showing
overlapping items. The bottom-nav is now the single source of
mobile navigation (extended below to cover Live Rates and
Analytics, which it was previously missing).
========================================================= */

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* ---- Bottom nav: proper icon styling + active-tab feedback ----
   Previously the icons had no color/size rules at all (just
   inherited default black-ish text) and .active carried no visual
   style, so tapping a tab gave no feedback about which page you
   were on. */

.bottom-nav > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.bottom-nav > div.active {
  color: #3b82f6;
}

.bottom-nav > div:active {
  transform: scale(0.92);
}

@media (max-width: 360px) {
  .bottom-nav > div {
    font-size: 16px;
  }
}

body.light-mode .bottom-nav > div {
  color: #94a3b8;
}
body.light-mode .bottom-nav > div.active {
  color: #3b82f6;
}

/* =========================================================
GLOBAL HEADER BAR — theme toggle, notifications, profile
Previously these only existed inside the Dashboard's own header,
so every other page had no way to change theme, check
notifications, or reach Settings without going back to Dashboard
first. Now a single instance lives outside the page sections and
stays fixed in the same spot on every page — same alignment
Dashboard always had, just consistent everywhere now.
========================================================= */

.global-header-bar {
  position: fixed;
  top: 26px;
  right: 36px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 14px;
}

#themeToggle {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}
#themeToggle:hover { background: rgba(255, 255, 255, 0.14); }

body.light-mode #themeToggle {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}
body.light-mode #themeToggle:hover { background: #e2e8f0; }

@media (max-width: 768px) {
  .global-header-bar {
    top: 16px;
    right: 16px;
    gap: 10px;
  }
  #themeToggle,
  .header-profile-avatar {
    width: 42px;
    height: 42px;
  }
  .notification-icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
}

/* =========================================================
FIX: notification dropdown overlapping on mobile
The old mobile rule (width:100vw; right:-20px) assumed the bell
sat inside a full-width in-page header. Now that it lives in the
compact fixed .global-header-bar in the top-right corner, that
math pushes the dropdown off-screen / over the theme toggle and
avatar buttons next to it. Anchoring to the viewport directly
(position:fixed, inset from screen edges) fixes it regardless of
where the bell itself sits.
========================================================= */

@media (max-width: 768px) {
  .notification-dropdown {
    position: fixed;
    top: 74px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 70vh;
    border-radius: 20px;
  }
}

/* =========================================================
TRANSACTIONS PAGE — date-grouped list + stats strip
Uses the same .rate-board-stat / .rate-board-search components as
Live Rates for visual consistency across the app.
========================================================= */

.wallet-tx-date-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding: 16px 4px 8px;
}
.wallet-tx-date-header:first-child {
  padding-top: 4px;
}

#txPageStats {
  margin-bottom: 16px;
}

body.light-mode .wallet-tx-date-header {
  color: #94a3b8;
}

/* =========================================================
Hide the "Live Gift Card Rates" preview card on the Dashboard for
mobile — it's redundant there since Live Rates already has its own
full page (reachable from the bottom nav), and duplicating a whole
rate table on a small dashboard screen was crowding it out. Recent
Notifications takes the full width in its place.
========================================================= */

@media (max-width: 768px) {
  #dashboardRatesCard {
    display: none;
  }
  #dashboardNotificationsCard {
    display: none;
  }
  #dashboard .cards {
    display: none;
  }
}