/* ===========================
   GOOGLE FONTS — Modern app typography
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ===========================
   CSS VARIABLES
   =========================== */
:root {
  --primary: #06216b;
  --primary2: #0b2f94;
  --dark: #07111f;
  --soft: #f5f7fb;

  /* App palette */
  --app-bg: #eef0f7;
  --app-header-from: #101c45;
  --app-header-to: #1f3070;
  --app-accent: #4a6cf7;
  --app-accent2: #6a3de8;
  --app-card: #ffffff;
  --app-text: #0e1526;
  --app-text-soft: #5b6481;
  --app-muted: #9099b5;
  --app-border: rgba(0,0,0,0.06);
  --app-success: #10b981;
  --app-warning: #f59e0b;
  --app-danger: #ef4444;
  --app-nav-h: 68px;
  --app-radius: 20px;
  --app-radius-sm: 14px;
  --app-shadow: 0 4px 24px rgba(10,20,60,0.08);
  --app-shadow-lg: 0 12px 40px rgba(10,20,60,0.14);
}

*, *::before, *::after { box-sizing: border-box; }

/* ========== LANDING PAGE ========== */
body:not(.app-body) {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff; color: #172033;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
body:not(.app-body) h1,
body:not(.app-body) h2,
body:not(.app-body) h3,
body:not(.app-body) h4,
body:not(.app-body) h5,
body:not(.app-body) h6,
body:not(.app-body) .brand {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.035em;
}
.navbar{padding:14px 0}
.hero-section{background:radial-gradient(circle at top right,rgba(24,92,255,.15),transparent 34%),linear-gradient(180deg,#fff,#f7f9ff);padding-top:88px}
.section-padding{padding:88px 0}
.brand{font-weight:700;color:var(--primary);letter-spacing:-.04em}
.brand span{color:#0f172a}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.feature-card,.glass-card{background:#fff;border:1px solid rgba(2,6,23,.06);border-radius:28px;padding:28px;box-shadow:0 18px 48px rgba(15,23,42,.07)}
.feature-card{transition:.25s}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(15,23,42,.12)}
.icon-lg{font-size:40px}
.phone-mockup{max-width:360px;background:#0b1220;border-radius:42px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.phone-screen{background:#fff;border-radius:32px;padding:22px;min-height:620px}
.balance-card{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-radius:24px;padding:22px;box-shadow:0 16px 35px rgba(24,92,255,.25)}
.service-card{background:#f5f7fb;border-radius:20px;padding:18px 12px;min-height:105px;display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:center;font-weight:800}
.service-card i{font-size:28px}
.dark-feature-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:24px;height:100%}
.dark-feature-card i{font-size:28px;color:#7fb0ff}
.stat-card{background:#fff;border:0;border-radius:22px;box-shadow:0 12px 35px rgba(15,23,42,.06)}
.admin-sidebar{min-height:100vh;background:#07111f;color:#fff}
.admin-sidebar a{display:block;color:rgba(255,255,255,.75);text-decoration:none;padding:12px 16px;border-radius:14px;margin-bottom:6px}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.1);color:#fff}

/* ========== APP BODY ========== */
.app-body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
  padding-bottom: calc(var(--app-nav-h) + 16px);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ========== APP HEADER ========== */
.app-header {
  background: linear-gradient(145deg, var(--app-header-from) 0%, var(--app-header-to) 100%);
  color: #fff;
  border-radius: 0 0 36px 36px;
  padding: 52px 20px 28px;
  position: relative;
  overflow: hidden;
}
.app-header::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.app-header::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(74,108,247,0.12);
}
.app-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-bottom: 22px;
}
.app-header-greeting small {
  font-size: 12px;
  opacity: 0.6;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: block;
}
.app-header-greeting h4 {
  font-size: 19px;
  font-weight: 700;
  margin: 3px 0 0;
  letter-spacing: -0.3px;
}
.app-header-actions { display: flex; align-items: center; gap: 10px; }
.app-header-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.28);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  text-decoration: none; color: #fff;
}
.app-logout-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s;
}
.app-logout-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Balance slider */
.balance-slider-wrap { position: relative; z-index: 2; }
.balance-slider {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.balance-slider::-webkit-scrollbar { display: none; }
.balance-slide {
  flex: 0 0 calc(100% - 24px);
  scroll-snap-align: start;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.balance-slide-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.6; margin-bottom: 5px;
}
.balance-slide-amount {
  font-size: 28px; font-weight: 800;
  letter-spacing: -1.5px; line-height: 1;
  margin-bottom: 8px;
}
.balance-slide-meta { font-size: 12px; opacity: 0.6; font-weight: 500; }
.balance-dots {
  display: flex; justify-content: center;
  gap: 5px; margin-top: 10px;
}
.balance-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: all 0.3s;
}
.balance-dot.active {
  width: 18px; border-radius: 3px;
  background: rgba(255,255,255,0.9);
}

/* App content */
.app-content {
  padding: 20px 16px 0;
  max-width: 480px;
  margin: 0 auto;
}

/* Section headers */
.app-section-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 14px;
}
.app-section-title {
  font-size: 15px; font-weight: 700;
  color: var(--app-text); letter-spacing: -0.2px;
}
.app-section-link {
  font-size: 13px; font-weight: 600;
  color: var(--app-accent); text-decoration: none;
}

/* Promo slider */
.promo-slider {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 24px;
}
.promo-slider::-webkit-scrollbar { display: none; }
.promo-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  border-radius: 18px;
  padding: 16px 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 88px;
  display: flex; flex-direction: column; justify-content: center;
}
.promo-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.promo-card::after {
  content: '';
  position: absolute;
  bottom: -30px; right: 20px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
.promo-card-1 { background: linear-gradient(135deg, #4a6cf7, #7b2fbe); }
.promo-card-2 { background: linear-gradient(135deg, #059669, #0891b2); }
.promo-card-3 { background: linear-gradient(135deg, #d97706, #dc2626); }
.promo-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 10px; font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.promo-card strong { font-size: 14px; font-weight: 700; display: block; margin-bottom: 2px; }
.promo-card small { font-size: 12px; opacity: 0.75; font-weight: 500; }

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.service-tile {
  background: var(--app-card);
  border-radius: 16px;
  padding: 14px 6px;
  text-align: center;
  text-decoration: none;
  color: var(--app-text);
  box-shadow: var(--app-shadow);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  transition: transform 0.18s, box-shadow 0.18s;
  border: 1px solid var(--app-border);
}
.service-tile:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-lg); color: var(--app-text); }
.service-tile:active { transform: scale(0.95); }
.service-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 20px;
}
.service-icon-elec  { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #b45309; }
.service-icon-air   { background: linear-gradient(135deg,#dbeafe,#bfdbfe); color: #1d4ed8; }
.service-icon-data  { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #065f46; }
.service-icon-tv    { background: linear-gradient(135deg,#fce7f3,#fbcfe8); color: #9d174d; }
.service-tile strong { font-size: 11px; font-weight: 700; color: var(--app-text); display: block; }

/* Transaction cards */
.tx-card {
  background: var(--app-card);
  border-radius: var(--app-radius-sm);
  padding: 13px 15px;
  margin-bottom: 10px;
  box-shadow: var(--app-shadow);
  border: 1px solid var(--app-border);
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; color: inherit;
}
.tx-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0;
}
.tx-icon-electricity { background: #fef3c7; color: #b45309; }
.tx-icon-airtime     { background: #dbeafe; color: #1d4ed8; }
.tx-icon-data        { background: #d1fae5; color: #065f46; }
.tx-icon-dstv        { background: #fce7f3; color: #9d174d; }
.tx-icon-default     { background: #f3f4f6; color: #6b7280; }
.tx-info { flex: 1; min-width: 0; }
.tx-name { font-size: 14px; font-weight: 700; color: var(--app-text); margin-bottom: 2px; }
.tx-ref { font-size: 11px; color: var(--app-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-right { text-align: right; flex-shrink: 0; }
.tx-amount { font-size: 14px; font-weight: 700; color: var(--app-text); display: block; }
.tx-status { font-size: 11px; font-weight: 600; color: var(--app-success); display: block; }
.tx-date { font-size: 11px; color: var(--app-muted); font-weight: 500; }

/* ========== BOTTOM NAV ========== */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--app-nav-h);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,0.07);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  z-index: 999;
}
.bottom-nav a {
  text-decoration: none;
  color: var(--app-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  text-align: center;
  width: 25%;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 8px 0;
  transition: color 0.2s;
  letter-spacing: 0.2px;
}
.bottom-nav a i {
  font-size: 22px; display: block;
  transition: transform 0.2s;
}
.bottom-nav a span { display: block; }
.bottom-nav a.active { color: var(--app-accent); }
.bottom-nav a.active i { transform: translateY(-1px); }
.nav-pip {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
  margin: 0 auto -3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.bottom-nav a.active .nav-pip { opacity: 1; }

/* ========== PAGE HEADER (back pages) ========== */
.app-page-header {
  background: linear-gradient(145deg, var(--app-header-from) 0%, var(--app-header-to) 100%);
  color: #fff;
  padding: 52px 20px 28px;
  border-radius: 0 0 32px 32px;
  margin-bottom: 20px;
}
.app-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  margin-bottom: 16px;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.2s;
}
.app-back-btn:hover { color: #fff; }
.app-page-header h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 4px; }
.app-page-header p { font-size: 13px; opacity: 0.7; margin: 0; font-weight: 500; }

/* ========== FORM STYLES ========== */
.app-form-card {
  background: var(--app-card);
  border-radius: var(--app-radius);
  padding: 22px 18px;
  box-shadow: var(--app-shadow);
  border: 1px solid var(--app-border);
  margin: 0 16px 16px;
}
.app-form-group { margin-bottom: 18px; }
.app-form-group label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--app-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}
.app-input {
  border: 1.5px solid #e2e6f0;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--app-text);
  background: #f8f9fe;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
  display: block;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.app-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(74,108,247,0.12);
  background: #fff;
}
.app-input::placeholder { color: #b0b8d1; }

/* Network selector */
.network-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 4px;
}
.network-btn {
  border: 2px solid #e2e6f0;
  border-radius: 12px;
  background: #f8f9fe;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--app-text-soft);
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.network-btn:hover, .network-btn.selected {
  border-color: var(--app-accent);
  background: #eef1fd;
  color: var(--app-accent);
}
.network-btn i { font-size: 18px; }
.network-input { display: none; }

/* Amount pills */
.amount-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.amount-pill {
  background: #eef1fd; color: var(--app-accent);
  border: 1.5px solid transparent;
  border-radius: 20px; padding: 6px 14px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  font-family: 'DM Sans', sans-serif;
}
.amount-pill:hover, .amount-pill.selected {
  background: var(--app-accent); color: #fff;
}

/* Submit btn */
.app-btn-primary {
  display: block; width: 100%;
  background: linear-gradient(135deg, var(--app-accent), var(--app-accent2));
  color: #fff; border: none;
  border-radius: 16px; padding: 15px 24px;
  font-size: 16px; font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: opacity 0.2s, transform 0.2s;
  letter-spacing: -0.1px;
  text-decoration: none; text-align: center;
}
.app-btn-primary:hover { opacity: 0.9; color: #fff; }
.app-btn-primary:active { transform: scale(0.98); }

/* Alerts */
.app-alert {
  border-radius: 12px; padding: 12px 16px;
  font-size: 14px; font-weight: 600;
  margin-bottom: 16px;
}
.app-alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ========== WALLET ========== */
.wallet-hero {
  background: linear-gradient(145deg, var(--app-header-from), var(--app-header-to));
  color: #fff;
  padding: 52px 20px 40px;
  border-radius: 0 0 36px 36px;
  text-align: center; margin-bottom: 20px;
}
.wallet-hero-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 8px;
}
.wallet-hero-amount {
  font-size: 42px; font-weight: 800;
  letter-spacing: -2px; margin-bottom: 6px;
}
.wallet-hero-note { font-size: 13px; opacity: 0.65; font-weight: 500; }
.wallet-info-card {
  background: var(--app-card);
  border-radius: var(--app-radius);
  padding: 20px; margin: 0 16px 12px;
  box-shadow: var(--app-shadow);
  border: 1px solid var(--app-border);
}
.wallet-info-card p { font-size: 14px; color: var(--app-text-soft); line-height: 1.7; margin: 0; font-weight: 500; }

/* ========== PROFILE ========== */
.profile-hero {
  background: linear-gradient(145deg, var(--app-header-from), var(--app-header-to));
  color: #fff; padding: 52px 20px 36px;
  border-radius: 0 0 36px 36px;
  text-align: center; margin-bottom: 20px;
}
.profile-avatar-lg {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  display: grid; place-items: center;
  font-size: 26px; font-weight: 800;
  margin: 0 auto 12px;
}
.profile-name { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 6px; }
.profile-badge {
  display: inline-block;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px; padding: 4px 14px;
  font-size: 12px; font-weight: 600;
}
.profile-info-card {
  background: var(--app-card);
  border-radius: var(--app-radius);
  margin: 0 16px 12px;
  box-shadow: var(--app-shadow);
  border: 1px solid var(--app-border);
  overflow: hidden;
}
.profile-row {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-border);
}
.profile-row:last-child { border-bottom: none; }
.profile-row-label { font-size: 11px; font-weight: 700; color: var(--app-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.profile-row-value { font-size: 14px; font-weight: 600; color: var(--app-text); }
.app-btn-danger {
  display: block;
  width: calc(100% - 32px); margin: 0 16px 16px;
  background: #fff; color: var(--app-danger);
  border: 1.5px solid #fecaca;
  border-radius: 16px; padding: 14px;
  font-size: 15px; font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-decoration: none;
  text-align: center; transition: all 0.2s;
}
.app-btn-danger:hover { background: #fef2f2; color: var(--app-danger); }

/* ========== RECEIPT ========== */
.receipt-wrap { padding: 16px; max-width: 480px; margin: 0 auto; }
.receipt-card {
  background: var(--app-card);
  border-radius: 24px; padding: 28px 22px;
  box-shadow: var(--app-shadow-lg);
  border: 1px solid var(--app-border);
}
.success-circle {
  width: 68px; height: 68px;
  background: linear-gradient(135deg,#d1fae5,#a7f3d0);
  color: #059669; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 800;
  margin: 0 auto 16px;
}
.token-box {
  background: #f8f9fe;
  border: 1.5px dashed #c7d0f0;
  border-radius: 14px; padding: 18px;
  font-size: 22px; font-weight: 900;
  letter-spacing: 2px; text-align: center;
  color: var(--app-accent); margin: 18px 0;
}
.receipt-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--app-border);
  font-size: 14px;
}
.receipt-row:last-child { border-bottom: none; }
.receipt-row span { color: var(--app-text-soft); font-weight: 500; }
.receipt-row strong { color: var(--app-text); font-weight: 700; }
.receipt-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.app-btn-outline {
  display: block; width: 100%;
  background: transparent; color: var(--app-text);
  border: 1.5px solid #dde1ef;
  border-radius: 16px; padding: 13px;
  font-size: 15px; font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-decoration: none;
  text-align: center; transition: all 0.2s;
}
.app-btn-outline:hover { background: var(--app-bg); color: var(--app-text); }

/* ========== TRANSACTIONS LIST ========== */
.transactions-wrap { padding: 0 16px; max-width: 480px; margin: 0 auto; }
.empty-state { text-align: center; padding: 48px 24px; color: var(--app-muted); }
.empty-state i { font-size: 48px; margin-bottom: 12px; display: block; opacity: 0.4; }
.empty-state p { font-size: 15px; font-weight: 500; }

/* ========== RESPONSIVE ========== */
@media print {
  .no-print,.bottom-nav{display:none!important}
  body{background:#fff}
  .receipt-card{box-shadow:none}
}
@media(max-width:768px){
  .display-4{font-size:2.3rem}
  .section-padding{padding:64px 0}
  .phone-screen{min-height:auto}
  .admin-sidebar{min-height:auto}
  .table-responsive{font-size:.88rem}
}

/* Wallet purchase guard + top-up UI */
.wallet-balance-mini{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg,#f7f8ff,#eef2ff);border:1px solid #e0e7ff;
  border-radius:16px;padding:12px 14px;margin-bottom:16px;
}
.wallet-balance-mini span{display:block;font-size:11px;font-weight:700;color:var(--app-muted);text-transform:uppercase;letter-spacing:.5px;}
.wallet-balance-mini strong{display:block;font-size:18px;font-weight:800;color:var(--app-text);letter-spacing:-.4px;}
.wallet-balance-mini a{background:#fff;color:var(--app-accent);border:1px solid #dbe3ff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;}
.app-alert-success{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;}
.app-alert .alert-link{color:inherit;font-weight:900;text-decoration:underline;}
.wallet-action-card{margin-top:-6px;}
.wallet-card-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.wallet-card-icon{width:42px;height:42px;border-radius:14px;background:#eef1fd;display:grid;place-items:center;color:var(--app-accent);font-size:18px;flex-shrink:0;}
.wallet-card-title{font-size:15px;font-weight:800;color:var(--app-text);letter-spacing:-.2px;}
.wallet-card-subtitle{font-size:12px;font-weight:600;color:var(--app-muted);line-height:1.4;}
.wallet-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.save-card-check{display:flex;align-items:flex-start;gap:10px;margin:2px 0 16px;font-size:13px;font-weight:700;color:var(--app-text-soft);line-height:1.4;}
.save-card-check input{margin-top:2px;accent-color:var(--app-accent);}
.saved-card-row,.wallet-mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #eef1f6;}
.saved-card-row:first-of-type,.wallet-mini-row:first-of-type{border-top:none;}
.saved-card-brand{width:42px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--app-header-from),var(--app-accent));color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:.3px;flex-shrink:0;}
.saved-card-info{flex:1;min-width:0;}
.saved-card-info strong,.wallet-mini-row strong{display:block;font-size:13px;font-weight:800;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.saved-card-info span,.wallet-mini-row span{display:block;font-size:11px;font-weight:600;color:var(--app-muted);margin-top:2px;}
.wallet-mini-row b{font-size:14px;color:var(--app-success);white-space:nowrap;}

/* Network logo-style buttons */
.network-logo-badge{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 14px rgba(10,20,60,.06);
  padding:6px;overflow:hidden;
}
.network-logo-badge img{
  width:100%;height:100%;object-fit:contain;display:block;
}
.network-mtn .network-logo-badge{background:#fff8d7;border-color:#f2d15e;}
.network-vodacom .network-logo-badge{background:#fff1f1;border-color:#f1b3b3;}
.network-cellc .network-logo-badge{background:#ffffff;border-color:#d8dee9;}
.network-telkom .network-logo-badge{background:#eef9ff;border-color:#b7e5f8;}
.network-btn{min-height:94px;justify-content:center;}
.network-btn.selected .network-logo-badge{transform:scale(1.04);box-shadow:0 8px 18px rgba(74,108,247,.2);}
.network-btn span:last-child{font-size:11px;font-weight:800;line-height:1.15;}

@media(max-width:360px){.network-grid{grid-template-columns:repeat(2,1fr)}.wallet-two-col{grid-template-columns:1fr}}


/* Network-specific polish + data bundles */
.network-btn.network-mtn.selected{border-color:#ffcb05;background:#fff8d6;color:#111827;}
.network-btn.network-vodacom.selected{border-color:#e60000;background:#fff0f0;color:#b80000;}
.network-btn.network-cellc.selected{border-color:#111827;background:#f3f4f6;color:#111827;}
.network-btn.network-telkom.selected{border-color:#00a6d6;background:#ecfbff;color:#007da6;}
.bundle-helper{font-size:12px;font-weight:700;color:var(--app-muted);margin-top:9px;line-height:1.45;}
.data-bundle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;}
.bundle-card{border:1.5px solid #e2e6f0;background:#fff;border-radius:16px;padding:12px;text-align:left;min-height:74px;box-shadow:0 6px 16px rgba(10,20,60,.04);font-family:'DM Sans',sans-serif;transition:all .18s;}
.bundle-card strong{display:block;font-size:13px;font-weight:900;color:var(--app-text);letter-spacing:-.2px;margin-bottom:5px;}
.bundle-card span{display:inline-flex;align-items:center;background:#eef1fd;color:var(--app-accent);border-radius:999px;padding:4px 9px;font-size:12px;font-weight:900;}
.bundle-card:hover,.bundle-card.selected{border-color:var(--app-accent);transform:translateY(-1px);box-shadow:0 10px 22px rgba(74,108,247,.12);}
.bundle-card.selected span{background:var(--app-accent);color:#fff;}
.receipt-network-card{display:flex;align-items:center;gap:12px;background:#f8f9fe;border:1px solid #e6eaf6;border-radius:16px;padding:12px;margin:12px 0 4px;}
.receipt-network-logo{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;padding:6px;border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 14px rgba(10,20,60,.05);flex-shrink:0;}
.receipt-network-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.receipt-network-card span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.55px;color:var(--app-muted);}
.receipt-network-card strong{display:block;font-size:16px;font-weight:900;color:var(--app-text);letter-spacing:-.3px;margin-top:1px;}
@media(max-width:360px){.data-bundle-grid{grid-template-columns:1fr;}}

/* ======================================================
   DESKTOP / WEB APP LAYOUT  (≥ 768px)
   Mobile stays 100% unchanged — everything here is
   purely additive inside a min-width media query.
   Layout: fixed 240px left sidebar + scrollable right content.
   ====================================================== */

/* --- Sidebar brand: hidden by default (mobile) -------- */
.sidebar-brand { display: none; }

@media (min-width: 768px) {

  /* ── Body: shift right to clear the fixed sidebar ────── */
  .app-body {
    padding-bottom: 0;
    padding-left: 240px;
    min-height: 100vh;
    background: #eef0f7;
  }

  /* ── Fixed sidebar brand strip ────────────────────────── */
  .sidebar-brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 68px;
    padding: 0 20px;
    background: #ffffff;
    border-right: 1px solid rgba(0,0,0,0.07);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 1001;
    box-shadow: 2px 0 12px rgba(10,20,60,0.04);
  }

  .sidebar-brand-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--app-header-from), var(--app-accent));
    display: grid; place-items: center;
    color: #fff; font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(74,108,247,0.32);
  }

  .sidebar-brand-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 900;
    color: var(--app-text);
    letter-spacing: -0.5px;
  }

  .sidebar-brand-name span { color: var(--app-accent); }

  /* ── Fixed sidebar nav ───────────────────────────────── */
  .bottom-nav {
    /* Override mobile fixed-bottom */
    position: fixed;
    left: 0;
    top: 68px;          /* below brand strip */
    bottom: 0;
    right: auto;
    width: 240px;
    height: auto;

    /* Stack links vertically */
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 3px;
    padding: 16px 12px 24px;

    /* Sidebar appearance */
    background: #ffffff;
    border-top: none;
    border-right: 1px solid rgba(0,0,0,0.07);
    backdrop-filter: none;
    box-shadow: 2px 0 12px rgba(10,20,60,0.04);
    overflow-y: auto;
    z-index: 1000;
  }

  /* Sidebar nav links */
  .bottom-nav a {
    flex-direction: row;
    width: 100%;
    font-size: 13.5px;
    font-weight: 600;
    gap: 13px;
    padding: 11px 14px;
    border-radius: 12px;
    text-align: left;
    justify-content: flex-start;
    color: var(--app-text-soft);
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0;
  }

  .bottom-nav a:hover {
    background: #f0f2f9;
    color: var(--app-text);
  }

  .bottom-nav a.active {
    background: #eef1fd;
    color: var(--app-accent);
    font-weight: 700;
  }

  .bottom-nav a i {
    font-size: 19px;
    flex-shrink: 0;
  }

  .bottom-nav a.active i { transform: none; }
  .nav-pip { display: none; }

  /* ── Main content wrapper ─────────────────────────────── */
  .app-main-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* ── App header ──────────────────────────────────────── */
  .app-header {
    border-radius: 0;
    padding: 28px 48px 34px;
  }

  .app-page-header {
    border-radius: 0;
    padding: 28px 48px 32px;
    margin-bottom: 0;
  }

  .wallet-hero,
  .profile-hero {
    border-radius: 0;
    padding: 36px 48px 48px;
    margin-bottom: 0;
  }

  /* ── Content area ────────────────────────────────────── */
  .app-content {
    max-width: 100%;
    padding: 28px 48px 48px;
    flex: 1;
  }

  /* ── Services grid ───────────────────────────────────── */
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .service-tile {
    padding: 20px 12px;
  }

  .service-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 15px;
    font-size: 22px;
  }

  .service-tile strong { font-size: 12px; }

  /* ── Promo slider ────────────────────────────────────── */
  .promo-card {
    flex: 0 0 40%;
    min-height: 100px;
    padding: 20px 24px;
  }

  /* ── Balance slide ───────────────────────────────────── */
  .balance-slide {
    flex: 0 0 44%;
  }

  .balance-slide-amount { font-size: 32px; }

  /* ── Transaction cards ───────────────────────────────── */
  .tx-card {
    padding: 15px 20px;
    border-radius: 16px;
  }

  .tx-icon { width: 44px; height: 44px; border-radius: 14px; }
  .tx-name { font-size: 15px; }
  .tx-amount { font-size: 15px; }

  /* ── Transaction list wrapper ─────────────────────────── */
  .transactions-wrap {
    max-width: 820px;
    padding: 28px 48px 48px;
    margin: 0;
  }

  /* ── Receipt ─────────────────────────────────────────── */
  .receipt-wrap {
    max-width: 580px;
    padding: 28px 48px 48px;
    margin: 0;
  }

  .token-box {
    font-size: 24px;
    letter-spacing: 3px;
    padding: 22px;
  }

  /* ── Form cards ──────────────────────────────────────── */
  .app-form-card {
    margin: 0 0 16px;
    padding: 28px 26px;
    border-radius: 20px;
  }

  /* ── Wallet info / action cards ──────────────────────── */
  .wallet-info-card {
    margin: 0 0 12px;
    padding: 26px;
  }

  .wallet-action-card { margin: 0 0 16px; }

  /* ── Profile cards ───────────────────────────────────── */
  .profile-info-card {
    margin: 0 0 12px;
  }

  .app-btn-danger {
    width: auto;
    margin: 0 0 16px;
    display: inline-block;
    padding: 13px 30px;
  }

  /* ── Network / bundle grids ──────────────────────────── */
  .network-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .data-bundle-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Form inputs ─────────────────────────────────────── */
  .app-input {
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 14px;
  }

  .app-btn-primary {
    border-radius: 14px;
    padding: 16px 28px;
  }

  .amount-pills { gap: 10px; }
  .amount-pill { padding: 8px 18px; font-size: 14px; }

  /* ── Section headers ─────────────────────────────────── */
  .app-section-title { font-size: 16px; }
  .app-section-link { font-size: 14px; }
  .app-header-greeting h4 { font-size: 22px; }

} /* end @media (min-width: 768px) */


/* ======================================================
   LARGE DESKTOP (≥ 1200px) — wider canvas
   ====================================================== */
@media (min-width: 1200px) {

  .app-body { padding-left: 260px; }

  .sidebar-brand,
  .bottom-nav { width: 260px; }

  .app-header,
  .app-page-header { padding-left: 60px; padding-right: 60px; }

  .wallet-hero,
  .profile-hero { padding-left: 60px; padding-right: 60px; }

  .app-content {
    padding: 32px 60px 60px;
    max-width: 1200px;
  }

  .transactions-wrap {
    max-width: 960px;
    padding: 32px 60px 60px;
  }

  .receipt-wrap {
    max-width: 640px;
    padding: 32px 60px 60px;
  }

  .promo-card { flex: 0 0 34%; }
  .balance-slide { flex: 0 0 38%; }
  .services-grid { gap: 18px; }

}