/* ============================================================
   Mac Data Hub — Base Styles  v2  (Glass-Liquid Morphism)
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Brand */
  --green:        #006B3F;
  --green-dark:   #00522f;
  --green-light:  #e6f4ee;
  --green-mid:    #c2dece;
  --gold:         #FCD20F;
  --gold-dark:    #e0b800;
  --red:          #CE1126;

  /* Networks */
  --mtn-bg:       #fffbeb; --mtn-color: #78350f; --mtn-dot: #f59e0b;
  --tel-bg:       #fef2f2; --tel-color: #991b1b; --tel-dot: #ef4444;
  --at-bg:        #eff6ff; --at-color:  #1e3a8a; --at-dot:  #3b82f6;

  /* Neutrals */
  --text:        #0f172a;
  --text-2:      #1e293b;
  --text-muted:  #64748b;
  --text-faint:  #94a3b8;
  --border:      rgba(148,163,184,.25);
  --border-mid:  rgba(148,163,184,.4);
  --bg:          #f0f4f8;
  --bg-2:        #e8edf3;
  --white:       #ffffff;

  /* Glass */
  --glass-bg:      rgba(255,255,255,.38);
  --glass-bg-mid:  rgba(255,255,255,.22);
  --glass-border:  rgba(255,255,255,.60);
  --glass-border-inner: rgba(255,255,255,.85);
  --glass-blur:    blur(28px) saturate(1.9) brightness(1.04);
  --glass-shadow:  0 8px 32px rgba(0,0,0,.08), 0 1.5px 6px rgba(0,0,0,.04),
                   inset 0 1px 0 rgba(255,255,255,.7);

  /* Shape */
  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs:  7px;

  /* Shadow */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.16);

  /* Motion */
  --transition: 0.18s ease;
  --spring:     cubic-bezier(.34,1.56,.64,1);

  /* Typography */
  --font:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Page background mesh */
  --page-bg: linear-gradient(135deg,
    #c8eadb 0%,
    #dde8f5 35%,
    #d5dff7 65%,
    #cce0ee 100%);
}

/* ── Dark mode tokens ────────────────────────────────────── */
[data-theme="dark"] {
  --text:        #f1f5f9;
  --text-2:      #e2e8f0;
  --text-muted:  #94a3b8;
  --text-faint:  #64748b;
  --border:      rgba(148,163,184,.12);
  --border-mid:  rgba(148,163,184,.22);
  --bg:          #0b1120;
  --bg-2:        #111827;
  --white:       #161f30;

  --glass-bg:          rgba(10,20,42,.45);
  --glass-bg-mid:      rgba(10,20,42,.28);
  --glass-border:      rgba(255,255,255,.12);
  --glass-border-inner:rgba(255,255,255,.18);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.4), 0 1.5px 6px rgba(0,0,0,.25),
                  inset 0 1px 0 rgba(255,255,255,.08);

  --green-light: rgba(0,107,63,.2);
  --green-mid:   rgba(0,107,63,.32);

  --mtn-bg:    rgba(245,158,11,.14); --mtn-color: #fcd34d;
  --tel-bg:    rgba(239,68,68,.14);  --tel-color: #fca5a5;
  --at-bg:     rgba(59,130,246,.14); --at-color:  #93c5fd;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.7);

  --page-bg: linear-gradient(135deg, #071a10 0%, #080e1e 45%, #0a0e24 100%);

  /* WhatsApp bar */
  --wa-bar-bg:     rgba(22,101,52,.2);
  --wa-bar-border: rgba(22,101,52,.38);
  --wa-bar-text:   #86efac;

  /* Flash / feedback */
  --flash-error-bg:       rgba(220,38,38,.15);
  --flash-error-text:     #fca5a5;
  --flash-error-border:   rgba(220,38,38,.35);
  --flash-success-bg:     rgba(22,163,74,.15);
  --flash-success-text:   #86efac;
  --flash-success-border: rgba(22,163,74,.35);
  --flash-info-bg:        rgba(37,99,235,.15);
  --flash-info-text:      #93c5fd;
  --flash-info-border:    rgba(37,99,235,.35);

  /* Status pills */
  --status-success-bg:   rgba(22,163,74,.2);  --status-success-text: #86efac;
  --status-warn-bg:      rgba(202,138,4,.2);   --status-warn-text:    #fde68a;
  --status-error-bg:     rgba(220,38,38,.2);   --status-error-text:   #fca5a5;

  /* Notification icon colours */
  --notif-orange-bg:  rgba(234,88,12,.2);  --notif-orange-text: #fdba74;
  --notif-blue-bg:    rgba(37,99,235,.2);  --notif-blue-text:   #93c5fd;
  --notif-red-bg:     rgba(220,38,38,.2);  --notif-red-text:    #fca5a5;

  /* Tips */
  --notif-warn-bg:    rgba(202,138,4,.15); --notif-warn-border: rgba(202,138,4,.35);
  --notif-warn-text:  #fde68a;             --notif-warn-icon:   #fbbf24;
  --info-border:      rgba(37,99,235,.35);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--text);
  background: var(--page-bg); background-attachment: fixed;
  line-height: 1.6; font-size: 15px;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a   { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* ── Type scale ──────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--font); color: var(--text); line-height: 1.25; font-weight: 800; }
h1 { font-size: clamp(1.5rem,4vw,1.85rem); font-weight: 900; letter-spacing: -.03em; }
h2 { font-size: clamp(1.15rem,3vw,1.35rem); font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
p  { color: var(--text-2); line-height: 1.65; }

.site-footer p, .reseller-cta p, .apply-hero p,
.storefront-hero p, .wallet-balance-card p { color: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Glass card mixin ────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
}
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.04) 45%,
    transparent 100%);
  pointer-events: none; z-index: 0;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(32px) saturate(2) brightness(1.06);
  -webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.06);
  border-bottom: 1px solid rgba(255,255,255,.5);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 24px rgba(0,0,0,.06), inset 0 -1px 0 rgba(255,255,255,.6);
  transition: background var(--transition), border-color var(--transition);
}
[data-theme="dark"] .site-header {
  background: rgba(8,14,32,.52);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 24px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.05);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; height: 62px;
}
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none !important; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; font-weight: 900; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,107,63,.4);
}
.logo-mark-sm { width: 28px; height: 28px; border-radius: 8px; font-size: .8rem; }
.logo-text { font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: -.01em; }
.site-logo-img    { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; display: block; }
.site-logo-img-sm { width: 28px; height: 28px; border-radius: 8px; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-link  { color: var(--text-muted); font-weight: 500; font-size: .9rem; transition: color var(--transition); }
.nav-link:hover { color: var(--green); text-decoration: none; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  padding: .35rem; background: none; border: none;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

.header-actions { display: flex; align-items: center; gap: .5rem; }

body:has(.dash-layout) .site-header  { display: none; }
body:has(.dash-layout) .main-content { min-height: 100vh; }

/* ── Flash messages ───────────────────────────────────────── */
.flash-container { padding: .5rem 1.5rem 0; }
.flash {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-radius: var(--radius-sm);
  font-size: .875rem; margin-bottom: .4rem;
  backdrop-filter: blur(8px);
}
.flash-error   { background: var(--flash-error-bg,   rgba(254,242,242,.9)); color: var(--flash-error-text,   #991b1b); border: 1px solid var(--flash-error-border,   #fecaca); }
.flash-success { background: var(--flash-success-bg, rgba(240,253,244,.9)); color: var(--flash-success-text, #166534); border: 1px solid var(--flash-success-border, #bbf7d0); }
.flash-info    { background: var(--flash-info-bg,    rgba(239,246,255,.9)); color: var(--flash-info-text,    #1e40af); border: 1px solid var(--flash-info-border,    #bfdbfe); }
.flash-close   { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .5; padding: 0 .25rem; }
.flash-close:hover { opacity: 1; }

/* ── Page layout ─────────────────────────────────────────── */
.main-content { min-height: calc(100vh - 62px - 180px); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: rgba(10,15,30,.92);
  backdrop-filter: blur(20px);
  color: #94a3b8; margin-top: 5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
[data-theme="dark"] .site-footer { background: rgba(4,7,16,.95); }
.footer-inner {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2rem; padding: 3rem 0 2rem; text-align: center;
}
.footer-brand    { display: flex; align-items: center; gap: .75rem; justify-content: center; }
.footer-name     { font-weight: 700; color: #f1f5f9; font-size: .95rem; }
.footer-tagline  { font-size: .8rem; color: #94a3b8; margin-top: .15rem; }
.footer-cols     { display: flex; gap: 3.5rem; flex-wrap: wrap; justify-content: center; }
.footer-col      { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.footer-col-title { font-weight: 700; color: #e2e8f0; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.footer-col a       { color: #94a3b8; font-size: .875rem; transition: color var(--transition); }
.footer-col a:hover { color: #f1f5f9; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 1.1rem 0; font-size: .775rem; color: #64748b; }
.footer-bottom .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem; text-align: center; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .6rem 1.25rem;
  border-radius: var(--radius-sm); border: none;
  font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap; text-decoration: none !important;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: background var(--transition);
  border-radius: inherit;
}
.btn:hover::after  { background: rgba(255,255,255,.1); }
.btn:active        { transform: scale(.97); }
.btn:disabled      { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; box-shadow: 0 2px 12px rgba(0,107,63,.35);
}
.btn-primary:hover { box-shadow: 0 4px 20px rgba(0,107,63,.5); }

.btn-gold   { background: linear-gradient(135deg,var(--gold),var(--gold-dark)); color: #1a1200; }
.btn-ghost  {
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: var(--text-2);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.8);
}
[data-theme="dark"] .btn-ghost {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.13); }
.btn-danger { background: rgba(254,242,242,.9); color: #dc2626; border: 1.5px solid #fecaca; }
.btn-danger:hover { background: #fee2e2; }

.btn-block { width: 100%; }
.btn-lg    { padding: .8rem 1.75rem; font-size: .95rem; border-radius: var(--radius); }
.btn-sm    { padding: .35rem .85rem; font-size: .78rem; border-radius: var(--radius-xs); }
.btn-xs    { padding: .22rem .6rem;  font-size: .72rem; border-radius: var(--radius-xs); }

/* ── Forms ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.field label {
  font-size: .78rem; font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; justify-content: space-between; letter-spacing: .01em;
}
.label-required { color: var(--text-muted); font-weight: 400; font-size: .73rem; }
.label-forgot   { font-weight: 600; font-size: .73rem; color: var(--green); }

.field input, .field select, .field textarea {
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  width: 100%;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04), 0 1px 0 rgba(255,255,255,.6);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3.5px rgba(0,107,63,.14), inset 0 1px 3px rgba(0,0,0,.04);
  background: rgba(255,255,255,.55);
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
  color: var(--text);
}
[data-theme="dark"] .field select option { background: #1a2236; color: #e8eaf0; }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus {
  background: rgba(255,255,255,.10);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field textarea { resize: vertical; line-height: 1.55; }
.field-hint { font-size: .73rem; color: var(--text-muted); }

.input-with-icon { position: relative; }
.input-icon {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; color: var(--text-muted); pointer-events: none;
  border-right: 1px solid var(--border);
}
.input-with-icon input { padding-left: 3rem; }
.input-icon-text { font-size: .78rem; font-weight: 700; }

.input-prefix-wrap { display: flex; }
.input-prefix {
  padding: .65rem .9rem; background: var(--bg-2); border: 1.5px solid var(--border);
  border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: .8rem; color: var(--text-muted); white-space: nowrap;
  display: flex; align-items: center;
}
.input-prefix-wrap input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── Password reveal ─────────────────────────────────────── */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; padding-right: 2.6rem; }
.pw-reveal {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: .25rem; cursor: pointer;
  color: var(--text-muted); display: flex; align-items: center;
  transition: color var(--transition);
}
.pw-reveal:hover { color: var(--text); }
.input-with-icon.pw-wrap input { padding-right: 2.6rem; }

.input-copy-wrap { display: flex; gap: .5rem; align-items: stretch; }
.input-copy-wrap input { flex: 1; background: var(--bg-2); color: var(--text-muted); cursor: default; border-radius: var(--radius-sm); }

.form-section       { margin-bottom: 1.5rem; }
.form-section-title {
  font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.form-actions { margin-top: 1.5rem; display: flex; gap: .75rem; justify-content: flex-end; }
.form-row     { display: flex; gap: .75rem; }
.form-row .field { flex: 1; }

.form-error {
  background: var(--flash-error-bg, rgba(254,242,242,.9));
  color: var(--flash-error-text, #991b1b);
  border: 1px solid var(--flash-error-border, #fecaca);
  padding: .65rem .9rem; border-radius: var(--radius-sm);
  font-size: .85rem; margin-bottom: .85rem;
}
.form-success {
  background: var(--flash-success-bg, rgba(240,253,244,.9));
  color: var(--flash-success-text, #166534);
  border: 1px solid var(--flash-success-border, #bbf7d0);
  padding: .65rem .9rem; border-radius: var(--radius-sm);
  font-size: .85rem; margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem;
}
.secure-note {
  display: flex; align-items: center; gap: .4rem; justify-content: center;
  font-size: .775rem; color: var(--text-muted); margin-top: .9rem;
}

/* ── Bundle grid + tabs ──────────────────────────────────── */
.bundles-section { padding: 3.5rem 0; }
.section-header  { margin-bottom: 2rem; }
.section-header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .25rem; letter-spacing: -.02em; }
.section-header p  { color: var(--text-muted); font-size: .9rem; }

.tab-bar { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.tab {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem 1.1rem; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(20px) saturate(1.6);
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.7);
}
.tab:hover  { border-color: var(--green); color: var(--green); }
.tab.active { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 2px 10px rgba(0,107,63,.3); }
.tab-dot        { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mtn-dot        { background: var(--mtn-dot); }
.telecel-dot    { background: var(--tel-dot); }
.airteltigo-dot { background: var(--at-dot); }

.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1.1rem; }
.bundle-card {
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.75);
  transition: box-shadow var(--transition), transform var(--transition);
}
.bundle-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8); transform: translateY(-4px); }
.bc-header { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; font-size: .7rem; font-weight: 700; }
.bc-mtn        { background: var(--mtn-bg); color: var(--mtn-color); }
.bc-telecel    { background: var(--tel-bg); color: var(--tel-color); }
.bc-airteltigo { background: var(--at-bg);  color: var(--at-color); }
.bc-network    { letter-spacing: .04em; }
.bc-validity   { font-weight: 500; opacity: .75; }
.bc-body       { padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.bc-volume     { font-weight: 800; font-size: .95rem; color: var(--text); }
.bc-price      { font-size: 1.45rem; font-weight: 900; color: var(--green); line-height: 1; }

.empty-bundles { text-align: center; padding: 3rem 1rem; border: 2px dashed var(--border); border-radius: var(--radius); }
.empty-icon       { color: var(--text-faint); margin-bottom: 1rem; }
.empty-bundles h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.empty-bundles p  { color: var(--text-muted); font-size: .875rem; }

/* Network badges */
.net-badge      { display: inline-block; padding: .2rem .65rem; border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.net-mtn        { background: var(--mtn-bg); color: var(--mtn-color); }
.net-telecel    { background: var(--tel-bg); color: var(--tel-color); }
.net-airteltigo { background: var(--at-bg);  color: var(--at-color); }

/* ── Theme toggle ────────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-bg); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); position: relative;
}
.theme-toggle:hover { background: var(--bg-2); color: var(--text); }
.icon-moon, .icon-sun { position: absolute; transition: opacity .2s, transform .2s; }
.icon-sun  { opacity: 0; transform: rotate(60deg) scale(.7); }
.icon-moon { opacity: 1; }
[data-theme="dark"] .icon-moon { opacity: 0; transform: rotate(-60deg) scale(.7); }
[data-theme="dark"] .icon-sun  { opacity: 1; transform: none; }

/* ── Status pills ────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .7rem; border-radius: 99px;
  font-size: .7rem; font-weight: 700; text-transform: capitalize; white-space: nowrap;
  backdrop-filter: blur(6px);
}
.status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status-dispatched { background: var(--status-success-bg, #dcfce7); color: var(--status-success-text, #166534); }
.status-paid       { background: var(--status-success-bg, #dcfce7); color: var(--status-success-text, #166534); }
.status-pending    { background: var(--status-warn-bg,    #fef9c3); color: var(--status-warn-text,    #854d0e); }
.status-failed     { background: var(--status-error-bg,   #fef2f2); color: var(--status-error-text,   #991b1b); }

/* ── Utilities ───────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Announcement Banner ─────────────────────────────────── */
.announcement-banner { width: 100%; padding: .6rem 0; font-size: .85rem; font-weight: 500; line-height: 1.4; backdrop-filter: blur(8px); }
.announcement-inner  { display: flex; align-items: center; gap: .6rem; }
.announcement-inner svg  { flex-shrink: 0; }
.announcement-inner span { flex: 1; min-width: 0; }
.announcement-close { background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .65; padding: .15rem .3rem; color: inherit; flex-shrink: 0; }
.announcement-close:hover { opacity: 1; }
.announcement-info    { background: rgba(239,246,255,.9);  color: #1e40af; border-bottom: 1px solid #bfdbfe; }
.announcement-warning { background: rgba(255,251,235,.9);  color: #92400e; border-bottom: 1px solid #fde68a; }
.announcement-error   { background: rgba(254,242,242,.9);  color: #991b1b; border-bottom: 1px solid #fecaca; }
.announcement-success { background: rgba(240,253,244,.9);  color: #166534; border-bottom: 1px solid #bbf7d0; }
[data-theme="dark"] .announcement-info    { background: rgba(59,130,246,.15);  color: #93c5fd; border-bottom-color: rgba(59,130,246,.25); }
[data-theme="dark"] .announcement-warning { background: rgba(245,158,11,.12);  color: #fcd34d; border-bottom-color: rgba(245,158,11,.25); }
[data-theme="dark"] .announcement-error   { background: rgba(239,68,68,.12);   color: #fca5a5; border-bottom-color: rgba(239,68,68,.25); }
[data-theme="dark"] .announcement-success { background: rgba(34,197,94,.1);    color: #86efac; border-bottom-color: rgba(34,197,94,.2); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .form-row { flex-direction: column; gap: 0; }
  .nav-links {
    display: none; flex-direction: column; position: fixed;
    top: 62px; left: 0; right: 0;
    background: rgba(255,255,255,.42);
    backdrop-filter: blur(32px) saturate(1.8);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.55);
    gap: .75rem; z-index: 199;
    box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 -1px 0 rgba(255,255,255,.6);
  }
  [data-theme="dark"] .nav-links {
    background: rgba(8,14,32,.7);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }
  .nav-links.open { display: flex; }
  .nav-toggle     { display: flex; }
  .bundle-grid    { grid-template-columns: repeat(auto-fill, minmax(145px,1fr)); gap: .75rem; }
  .footer-inner   { flex-direction: column; gap: 1.5rem; padding: 2rem 0 1.5rem; align-items: center; text-align: center; }
  .footer-cols    { flex-direction: column; gap: 1.25rem; align-items: center; }
  .footer-col     { align-items: center; }
  .footer-bottom .container { flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
}
@media (max-width: 420px) {
  .tab-bar { gap: .35rem; }
  .tab     { padding: .38rem .75rem; font-size: .77rem; }
  .footer-cols { gap: 1rem; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Track Order section ─────────────────────────────────── */
.track-section { padding: 1.5rem 0; }
.track-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem 1.75rem; border-radius: var(--radius);
}
.track-card-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(0,107,63,.12); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0,107,63,.2);
}
[data-theme="dark"] .track-card-icon { background: rgba(0,107,63,.18); border-color: rgba(0,107,63,.3); }
.track-card-body { flex: 1; min-width: 0; }
.track-card-title { font-size: 1.05rem; font-weight: 800; margin-bottom: .2rem; }
.track-card-sub   { font-size: .85rem; color: var(--text-muted); margin-bottom: .9rem; }
.track-input-row  { display: flex; gap: .6rem; }
.track-input-row input {
  flex: 1; padding: .65rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); font-size: .95rem; color: var(--text);
  background: rgba(255,255,255,.35); backdrop-filter: blur(8px);
  transition: border-color var(--transition);
}
.track-input-row input:focus { outline: none; border-color: var(--green); }
[data-theme="dark"] .track-input-row input {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: var(--text);
}

/* Track modal contents */
.track-modal-card {
  max-height: 85vh; display: flex; flex-direction: column;
  max-width: 480px;
}
.track-modal-card .order-modal-header,
.track-modal-card .order-modal-sub,
.track-modal-card form { flex-shrink: 0; }
#track-results { overflow-y: auto; flex: 1; margin-top: .75rem; }
.track-results { padding-bottom: .5rem; }

.track-order-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.track-order-item:last-child { border-bottom: none; }
.track-order-net {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.track-order-net.net-mtn        { background: #fef3c7; color: #92400e; }
.track-order-net.net-telecel    { background: #dbeafe; color: #1e40af; }
.track-order-net.net-airteltigo { background: #fce7f3; color: #9d174d; }
[data-theme="dark"] .track-order-net.net-mtn        { background: rgba(251,191,36,.15); color: #fbbf24; }
[data-theme="dark"] .track-order-net.net-telecel    { background: rgba(59,130,246,.15); color: #93c5fd; }
[data-theme="dark"] .track-order-net.net-airteltigo { background: rgba(244,114,182,.15); color: #f9a8d4; }
.track-order-info  { flex: 1; min-width: 0; }
.track-order-label { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-order-meta  { font-size: .775rem; color: var(--text-muted); margin-top: .1rem; }
.track-order-right { flex-shrink: 0; text-align: right; }
.track-order-amount { font-weight: 800; font-size: .92rem; }
.track-order-date   { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

.track-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--text-muted);
}
.track-empty svg { display: block; margin: 0 auto .75rem; opacity: .35; }

@media (max-width: 520px) {
  .track-card          { flex-direction: column; gap: .85rem; padding: 1.1rem; }
  .track-input-row     { flex-direction: column; }
  .track-input-row input { width: 100%; }
  .track-input-row .btn  { width: 100%; justify-content: center; }
  .track-modal-card    { max-height: 92vh; }
}

/* ── PWA ─────────────────────────────────────────────────── */
@media (display-mode: standalone) { .pwa-hide { display: none !important; } }

/* ── Help FAB ────────────────────────────────────────────── */
.help-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 400;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,107,63,.45), 0 1px 4px rgba(0,0,0,.18),
              inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .18s var(--spring), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.help-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,107,63,.55), 0 2px 8px rgba(0,0,0,.22),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.help-fab:active { transform: scale(.96); }

/* ── Help Chooser ────────────────────────────────────────── */
.help-chooser-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 2rem 1.75rem 2rem;
  width: min(92vw, 520px);
  position: relative; z-index: 1;
  animation: modal-in .22s var(--spring) both;
}
.help-chooser-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .35rem;
}
.help-chooser-title {
  font-size: 1.2rem; font-weight: 800; color: var(--text); margin: 0;
}
.help-chooser-sub {
  font-size: .875rem; color: var(--text-muted); margin: 0 0 1.4rem;
}
.help-options-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
}
.help-options-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.help-option-btn {
  background: var(--glass-bg-mid);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 1.2rem .9rem 1rem;
  cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  transition: background .16s, transform .16s, box-shadow .16s;
  color: var(--text);
}
.help-option-btn:hover {
  background: var(--glass-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.help-option-btn:active { transform: translateY(0); }
.help-option-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.help-option-icon-track {
  background: var(--green-light); color: var(--green);
}
.help-option-icon-verify {
  background: rgba(59,130,246,.12); color: #1d4ed8;
}
[data-theme="dark"] .help-option-icon-verify { background: rgba(59,130,246,.15); color: #93c5fd; }
.help-option-icon-support {
  background: rgba(37,211,102,.12);
}
[data-theme="dark"] .help-option-icon-support { background: rgba(37,211,102,.15); }
.help-option-label {
  font-size: .92rem; font-weight: 700; color: var(--text);
}
.help-option-desc {
  font-size: .76rem; color: var(--text-muted); line-height: 1.35;
}

/* ── Verify Modal ────────────────────────────────────────── */
.verify-modal-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 2rem 1.75rem 2rem;
  width: min(92vw, 440px);
  position: relative; z-index: 1;
  animation: modal-in .22s var(--spring) both;
}
.verify-hint {
  font-size: .775rem; color: var(--text-muted); margin: .9rem 0 0;
  line-height: 1.45; text-align: center;
}
.verify-success-box {
  background: rgba(0,107,63,.1); border: 1.5px solid rgba(0,107,63,.25);
  border-radius: var(--radius-sm); padding: 1.1rem 1rem; margin-bottom: 1rem;
  text-align: center;
}
[data-theme="dark"] .verify-success-box {
  background: rgba(0,107,63,.2); border-color: rgba(0,107,63,.4);
}
.verify-success-icon {
  font-size: 2rem; color: var(--green); font-weight: 900; line-height: 1;
  margin-bottom: .4rem;
}
.verify-success-box p {
  font-size: .9rem; color: var(--text); margin: 0 0 .75rem; line-height: 1.45;
}
.verify-order-pill {
  display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: center; justify-content: center;
  font-size: .8rem; color: var(--text-muted);
}
.verify-tag {
  display: inline-block; padding: .15rem .55rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.verify-tag-done { background: var(--green-light); color: var(--green); }
.verify-tag-new  { background: rgba(252,210,15,.2); color: #92600c; }
[data-theme="dark"] .verify-tag-new { background: rgba(252,210,15,.15); color: var(--gold); }

@media (max-width: 520px) {
  .help-options-grid,
  .help-options-grid-3 { grid-template-columns: 1fr; }
  .help-fab { bottom: 1.1rem; right: 1.1rem; }
}