/* ==========================================
   SKAITECH - GRANDMASTER BRAND STYLES
   ========================================== */
   /* Prevent oversized images from breaking layout */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.brand-logo img {
  max-height: 40px;
  width: auto;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  line-height: 1.5;
  overflow-x: hidden;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* NAVBAR */
.site-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
}

.brand-logo img {
  height: 2.25rem;
  width: auto;
  object-fit: contain;
}

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.nav-links {
  display: flex;
  gap: 1.75rem;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
}

.nav-link:hover {
  color: #0284c7;
}

.btn-login {
  background-color: #0284c7;
  color: #ffffff;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-login:hover {
  background-color: #0369a1;
}

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

/* HERO SECTION */
.hero-section {
  background: #ffffff;
  padding: 3.5rem 1.25rem 4rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

.badge-location {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0284c7;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.text-accent {
  color: #0284c7;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: #475569;
  max-width: 38rem;
  margin: 0 auto 2rem auto;
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-buttons { flex-direction: row; }
  .hero-title { font-size: 3.25rem; }
}

.btn-primary {
  background-color: #0284c7;
  color: #ffffff;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-primary:hover {
  background-color: #0369a1;
}

.hero-data-btn {
  background: #facc15;
  color: #1f2937;
  padding: 1.15rem 2.35rem;
  font-size: 1.15rem;
  box-shadow: 0 7px 18px rgba(234, 179, 8, 0.35);
  transform: scale(1.03);
}

.hero-data-btn:hover {
  background: #eab308;
  color: #111827;
}

.btn-secondary {
  background-color: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: #e2e8f0;
}

/* NETWORK PROVIDERS SECTION */
.partners-section {
  padding: 3.5rem 1.25rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.partners-subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.network-card {
  background-color: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, border-color 0.2s;
}

.network-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
}

.network-icon-box {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
}

.mtn-box { background-color: #ffcc00; color: #000000; }
.telecel-box { background-color: #e11d48; color: #ffffff; }
.airteltigo-box { background-color: #0284c7; color: #ffffff; }

.network-name {
  font-weight: 800;
  font-size: 1.1rem;
  color: #0f172a;
}

.network-status {
  font-size: 0.75rem;
  font-weight: 700;
  color: #16a34a;
  background-color: #dcfce7;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

/* FEATURES SECTION */
.features-section {
  padding: 4rem 1.25rem;
  background-color: #f8fafc;
}

.section-title {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 3rem;
  color: #0f172a;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 1.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.icon-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.icon-sky { background-color: #e0f2fe; color: #0284c7; }
.icon-emerald { background-color: #dcfce7; color: #16a34a; }
.icon-amber { background-color: #fef3c7; color: #d97706; }

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.card-desc {
  font-size: 0.925rem;
  color: #475569;
}

/* CTA & FOOTER */
.cta-section {
  background-color: #0f172a;
  color: #ffffff;
  padding: 4rem 1.25rem;
  text-align: center;
}

.cta-title {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.cta-desc {
  font-size: 1rem;
  color: #94a3b8;
  max-width: 32rem;
  margin: 0 auto 2rem auto;
}

.btn-cta {
  background-color: #0284c7;
  color: #ffffff;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-block;
}

.btn-cta:hover { background-color: #0369a1; }

.site-footer {
  background-color: #020617;
  color: #64748b;
  padding: 2rem 1.25rem;
  border-top: 1px solid #1e293b;
  text-align: center;
  font-size: 0.85rem;
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
  font-size: 1.1rem;
}

.footer-socials a { color: #64748b; text-decoration: none; }
.footer-socials a:hover { color: #ffffff; }

/* ==========================================
   LOGIN & AUTHENTICATION STYLES
   ========================================== */
.auth-wrapper {
  min-height: calc(100vh - 70px - 80px); /* Fill screen between header & footer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  background-color: #f8fafc;
}

.auth-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  width: 100%;
  max-width: 420px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.auth-tabs {
  display: flex;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 1.75rem;
}

.auth-tab {
  flex: 1;
  padding: 0.75rem;
  background: none;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.auth-tab.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper i {
  position: absolute;
  left: 0.875rem;
  color: #94a3b8;
  font-size: 0.9rem;
}

.password-field {
  position: relative;
}

.password-field .form-input {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover {
  color: #0284c7;
}

.password-toggle:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

.password-toggle i {
  position: static;
  left: auto;
  color: inherit;
  font-size: 0.9rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 0.875rem 0.75rem 2.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.925rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.825rem;
}

.forgot-link {
  color: #0284c7;
  text-decoration: none;
  font-weight: 600;
}

.forgot-link:hover {
  text-decoration: underline;
}

.btn-auth {
  width: 100%;
  background-color: #0284c7;
  color: #ffffff;
  padding: 0.875rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 0.5rem;
}

.btn-auth:hover {
  background-color: #0369a1;
}

.hidden-form {
  display: none;
}


/* ==========================================
   GRANDMASTER MOBILE DASHBOARD STYLES
   ========================================== */
.gt-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.gt-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hamburger-btn {
  background: #2d3748;
  color: #ffffff;
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gt-brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: #0f172a;
}

.gt-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-badge-wrapper {
  position: relative;
  font-size: 1.25rem;
  color: #475569;
  cursor: pointer;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.35rem;
  border-radius: 9999px;
}

.user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #cbd5e1;
  color: #334155;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SIDE DRAWER & MENU OVERLAYS */
.sidebar-overlay,
.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.sidebar-overlay.active,
.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* SIDE DRAWER PANEL */
.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  height: 100vh;
  background: #ffffff;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 18px 0 28px 0;
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 28px rgba(15, 23, 42, 0.15);
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.side-drawer.active {
  transform: translateX(0);
}

/* Custom slim scrollbar */
.side-drawer::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
.side-drawer::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* DRAWER BRAND HEADER */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 16px 18px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-brand img,
.drawer-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.drawer-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0f172a;
  text-transform: uppercase;
}

.drawer-close-btn {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08);
}

/* SECTION LABELS */
.drawer-section-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.08em;
  padding: 12px 20px 4px 20px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* NAVIGATION ITEMS - BOLD & ATTRACTIVE */
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px;
}

.drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  margin: 1px 0;
  border-radius: 12px;
  color: #1e293b;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.drawer-item i {
  width: 24px;
  text-align: center;
  font-size: 1.15rem;
  color: #2563eb;
  transition: transform 0.22s ease, color 0.22s ease;
  flex-shrink: 0;
}

/* Hover state: bold elevation and slight movement */
.drawer-item:hover {
  background-color: #f1f5f9;
  color: #0f172a;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.drawer-item:hover i {
  color: #1d4ed8;
  transform: scale(1.18);
}

/* Active state: bold vibrant gradient with glow shadow */
.drawer-item.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(37, 99, 235, 0.35);
  transform: translateX(0);
}

.drawer-item.active i {
  color: #ffffff !important;
  transform: scale(1.1);
}

.drawer-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 10px 14px;
  border: none;
}

/* ==========================================
   AGENT PORTAL SIDEBAR (persistent on desktop)
   ========================================== */
@media (min-width: 992px) {
  body.agent-shell-mounted.agent-shell-agent {
    margin-left: 280px;
  }

  body.agent-shell-mounted.agent-shell-agent .side-drawer {
    transform: translateX(0);
    transition: none;
    box-shadow: 6px 0 28px rgba(15, 23, 42, 0.15);
  }

  body.agent-shell-mounted.agent-shell-agent .sidebar-overlay {
    display: none;
  }

  body.agent-shell-mounted.agent-shell-agent .gt-header-left .hamburger-btn {
    display: none;
  }
}

/* DASHBOARD MAIN CONTAINER */
.gt-dashboard-body {
  background: #0b0f19;
  padding: 1.25rem;
  max-width: 500px;
  margin: 0 auto;
  min-height: calc(100vh - 60px);
}

/* Dashboard page background (sits behind the centered wrapper) */
html body.dashboard-page {
  background-color: #0b0f19 !important;
}

.agent-welcome {
  margin-bottom: 1.25rem;
}

.agent-welcome h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e9eef8;
}

.agent-code {
  font-size: 0.8rem;
  font-weight: 700;
  color: #8b97ad;
  letter-spacing: 0.025em;
}

/* TOP BULK BUTTONS */
.action-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.btn-bulk-action {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* TOPUP SECTION */
.topup-card {
  background-color: #111827;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.topup-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #e9eef8;
  margin-bottom: 0.25rem;
}

.topup-subtitle {
  font-size: 0.85rem;
  color: #8b97ad;
  margin-bottom: 1.25rem;
}

.field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 0.75rem;
  display: block;
}

/* NETWORK STACKED BUTTONS */
.network-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.net-stack-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 0.6rem;
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Networks share one uniform navy accent (no per-network colour mix) */
.net-mtn,
.net-telecel,
.net-ishare,
.net-bigtime {
  background-color: #1e40af;
  color: #ffffff;
}

/* PACKAGE PRODUCT CARDS */
.packages-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.package-card {
  background-color: #111827;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.card-net-badge {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #1e40af;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
  position: relative;
}

.card-net-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 9999px;
  border: 1px solid #0b0f19;
}

.card-net-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #e9eef8;
  margin-bottom: 0.75rem;
}

.card-data-size {
  font-size: 1.25rem;
  font-weight: 800;
  color: #e9eef8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.card-price-tag {
  font-size: 1.15rem;
  font-weight: 800;
  color: #93c5fd;
}

.card-pay-type {
  font-size: 0.75rem;
  color: #8b97ad;
  margin-bottom: 1.25rem;
}

.btn-add-cart {
  width: 100%;
  background: linear-gradient(to right, #2563eb, #1e40af);
  color: #ffffff;
  border: none;
  border-radius: 0.6rem;
  padding: 0.75rem;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(30, 64, 175, 0.35);
}

/* FLOATING WHATSAPP BUTTON */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: #10b981;
  color: #ffffff;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  text-decoration: none;
  z-index: 90;
}

/* TELECEL THEME (unified navy - no separate colour mix) */
.package-card.theme-telecel {
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}
.package-card.theme-telecel .card-price-tag {
  color: #93c5fd !important;
}
.package-card.theme-telecel .btn-add-cart {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  color: #ffffff !important;
}

/* AIRTELTIGO THEME (unified navy - no separate colour mix) */
.package-card.theme-airteltigo {
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}
.package-card.theme-airteltigo .card-price-tag {
  color: #93c5fd !important;
}
.package-card.theme-airteltigo .btn-add-cart {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  color: #ffffff !important;
}

/* LOGO BADGE & STATUS DOT */
.card-logo-wrapper {
  position: relative;
  display: inline-block;
  background: #1e293b;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  margin: 0 auto 8px auto;
}

.card-network-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

.status-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border: 2px solid #0b0f19;
  border-radius: 50%;
}
/* CARD LOGO BADGE & DOT */
.card-logo-wrapper {
  position: relative;
  display: inline-block;
  background: #1e293b;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  margin-bottom: 8px;
}

.card-network-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

.status-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border: 2px solid #0b0f19;
  border-radius: 50%;
}

/* TELECEL CARD THEME */
.package-card.theme-telecel {
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}
.package-card.theme-telecel .card-price-tag {
  color: #93c5fd !important;
}
.package-card.theme-telecel .btn-add-cart {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
}

/* AIRTELTIGO CARD THEME */
.package-card.theme-airteltigo {
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}
.package-card.theme-airteltigo .card-price-tag {
  color: #93c5fd !important;
}
.package-card.theme-airteltigo .btn-add-cart {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
}

/* MODAL OVERLAY & CARD STYLES */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-card {
  background: #111827;
  border: 1px solid rgba(148, 163, 184, 0.14);
  padding: 24px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.modal-card h3 {
  color: #e9eef8;
}

.modal-details {
  font-weight: 600;
  color: #8b97ad;
  margin: 10px 0 16px;
}

.modal-input-group {
  text-align: left;
  margin-bottom: 20px;
}

.modal-input-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #cbd5e1;
}

.modal-input-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  background: #0b0f19;
  color: #e9eef8;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.btn-cancel {
  flex: 1;
  background: #1e293b;
  color: #cbd5e1;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn-confirm {
  flex: 1;
  background: #1e40af;
  color: #ffffff;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.accordion-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #111827;
}

.badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
/* YELLOW THEME BACKGROUND & LAYOUT */
.orders-body-yellow {
  /* Deep yellow. Rich gold rather than pastel, so the white cards on top of it
     read as clearly raised. Pure #ffff00 was unreadable and looked like the page
     was clipping at the edges. */
  background-color: #ffc400;
  background-image: linear-gradient(180deg, #ffd633 0%, #ffc400 45%, #e8a200 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  /* Nothing on this page is allowed to push the viewport sideways. */
  overflow-x: hidden;
  box-sizing: border-box;
}

.orders-body-yellow *,
.orders-body-yellow *::before,
.orders-body-yellow *::after {
  box-sizing: border-box;
}

.orders-page-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

/* SEARCH INPUT */
.search-input-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.search-input-wrapper input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 0.95rem;
  box-sizing: border-box;
  outline: none;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}

/* STATUS FILTER PILLS */
.status-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  /* The pill rows are the one place horizontal scrolling is intended, so keep it
     inside the row and off the page itself. */
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.status-pills::-webkit-scrollbar {
  display: none;
}

.service-tabs {
  margin-bottom: 12px;
}

.pill-btn {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.pill-btn.active {
  background: #0f172a; /* Dark active pill like screenshot */
  color: #ffffff;
  border-color: #0f172a;
}

.orders-count-text {
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-weight: 500;
}

/* ORDERS CARD CONTAINER */
.orders-content-card {
  background: #fffdf2;

  border-radius: 20px;
  padding: 40px 20px;
  /* Deeper gold behind the card needs a slightly stronger shadow to keep the
     card reading as raised rather than flat. */
  box-shadow: 0 6px 20px rgba(120, 83, 0, 0.18);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The table below is wider than this card on a phone. Letting the card clip
     it (rather than containing it) is what used to cut the columns off. */
  overflow: hidden;
}

/*
 * Dedicated horizontal scroll container for the orders table.
 *
 * min-width: 0 is the important part: as a flex child, a table will otherwise
 * refuse to shrink below its intrinsic width and widen the whole card.
 */
.orders-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* TRANSACTION SUMMARY CARDS */
.tx-stats-grid {
  display: grid;
  /* minmax(140px, ...) rather than 150px so two cards still fit side by side
     on a 320px phone instead of collapsing to a single column. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.tx-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(120, 83, 0, 0.14);
  min-width: 0;
}

.tx-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.tx-stat-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
}

.tx-stat-airtime .tx-stat-label { color: #c026d3; }
.tx-stat-utility .tx-stat-label { color: #d97706; }
.tx-stat-data .tx-stat-label { color: #0284c7; }
.tx-stat-instant-data .tx-stat-label { color: #7c3aed; }
.tx-stat-ok { color: #16a34a; }
.tx-stat-bad { color: #dc2626; }
.tx-stat-pending { color: #d97706; }

/* EMPTY STATE BOX */
.empty-state-box {
  text-align: center;
  max-width: 320px;
}

.empty-state-box .package-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.empty-state-box h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.empty-state-box p {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0;
}

/* DYNAMIC TABLE STYLES */
.orders-data-table {
  width: 100%;
  border-collapse: collapse;
  /* Below this width the columns start overlapping, so the table keeps its
     natural width and the .orders-table-scroll wrapper scrolls it sideways. */
  min-width: 720px;
}

.orders-data-table th, .orders-data-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
  vertical-align: middle;
}

.orders-data-table th {
  white-space: nowrap;
  color: #64748b;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.orders-data-table .cell-id {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.orders-data-table .cell-date { color: #64748b; font-size: 0.8rem; white-space: nowrap; }

/* STATUS BADGES */
.status-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
}
.badge-pending { background: #fef3c7; color: #b45309; }
.badge-processing { background: #e0f2fe; color: #0369a1; }
.badge-completed { background: #dcfce7; color: #15803d; }
.badge-failed { background: #fee2e2; color: #b91c1c; }
.badge-cancelled { background: #f1f5f9; color: #64748b; }

/* PAGINATION CONTROLS */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.page-size-selector,
.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #555;
  flex-wrap: wrap;
}

.page-size-selector label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 2px;
}

.page-size-selector select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.pagination-buttons button {
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
}

.pagination-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#pageIndicator { font-weight: 700; font-size: 0.85rem; }

/* ORDERS PAGE RESPONSIVE LAYOUT */
@media (max-width: 768px) {
  .orders-page-wrapper { padding: 18px 12px 32px; }
  .orders-content-card { padding: 24px 12px; border-radius: 16px; }
  .search-input-wrapper input { padding: 12px 14px 12px 40px; font-size: 0.9rem; }
  .search-input-wrapper .search-icon { left: 14px; }
  .pill-btn { padding: 9px 16px; font-size: 0.85rem; }
  .tx-stats-grid { gap: 10px; }
  .tx-stat-card { padding: 12px 13px; }
  .tx-stat-value { font-size: 1.3rem; }
  .tx-stat-label { font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .orders-page-wrapper { padding: 14px 10px 28px; }
  .orders-content-card { padding: 18px 8px; }
  .pagination-container { flex-direction: column; align-items: stretch; }
  .pagination-buttons { justify-content: space-between; }
  .status-pills { margin-bottom: 16px; }
}

/* Support Section Container */
.support-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

/* Form Inputs and Textarea Styling */
.support-section input,
.support-section textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #111827;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.support-section input:focus,
.support-section textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Submit Button Styling */
.support-section button[type="submit"] {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

/* Independent Logo Bar */
.top-logo-bar {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
}

/* Separate Action Header on the Right */
.top-header {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Vertical Stack for Agent Portal and Menu Button */
.header-right-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

}

/* Site Header Positioning */
.site-header {
    position: relative;
    padding: 16px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

/* Agent Portal Button Blue Background */
.agent-portal-btn {
    background-color: #2563eb;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.agent-portal-btn:hover {
    background-color: #1d4ed8;
}
/* Dropdown Menu (Sliding Side Drawer on index.html) */
.dropdown-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 285px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -6px 0 30px rgba(15, 23, 42, 0.15);
    border-left: 1px solid #e2e8f0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 28px 12px;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.dropdown-menu.active {
    transform: translateX(0);
}

/* Stack the links vertically */
.dropdown-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

/* Individual dropdown links styling - Bold & Attractive */
.dropdown-nav-link {
    color: #1e293b;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    padding: 11px 16px;
    border-radius: 12px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-nav-link:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    transform: translateX(-4px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.dropdown-nav-link.dropdown-nav-link-active,
.dropdown-nav-link.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.35);
    transform: translateX(0);
}

/* Styling for the Menu Toggle Button */
.menu-toggle-btn {
    background: #111827;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.menu-toggle-btn:hover {
    background: #1f2937;
}

/* Remove default text underlines from the network card links */
.network-card-link {
    text-decoration: none;
    color: inherit;
}

.network-card-link:hover {
    text-decoration: none;
}

.ecg-box { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; }
.water-box { background: linear-gradient(135deg, #0284c7, #0369a1); color: #ffffff; }
.tv-box { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #ffffff; }
.dstv-box { background: #00539f; color: #ffffff; }
.gotv-box { background: #00a826; color: #ffffff; }
.startimes-box { background: #e65c00; color: #ffffff; }

/* AGENT ACCESS PROMPT MODAL */
.agent-gate-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.agent-gate-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.agent-gate-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 440px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.25);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-gate-modal.active .agent-gate-card {
  transform: translateY(0) scale(1);
}

.agent-gate-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 16px;
}

.agent-gate-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}

.agent-gate-desc {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 24px;
}

.agent-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-gate-btn-primary {
  background: #2563eb;
  color: #ffffff !important;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.agent-gate-btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.agent-gate-btn-secondary {
  background: #f1f5f9;
  color: #1e293b !important;
  border: 1px solid #cbd5e1;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.agent-gate-btn-secondary:hover {
  background: #e2e8f0;
}

.agent-gate-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1;
}

.agent-gate-close:hover {
  color: #334155;
  background: #f1f5f9;
}

/* ==========================================
   AIRTIME PURCHASE STYLES
   ========================================== */
.airtime-wrapper {
  max-width: 620px;
  margin: 30px auto;
  padding: 0 16px 60px;
}

.airtime-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  border: 1px solid #e2e8f0;
}

.airtime-header {
  text-align: center;
  margin-bottom: 24px;
}

.airtime-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.airtime-header p {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}

/* Network Selector Grid */
.network-selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.network-select-btn {
  border: 2px solid #e2e8f0;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: center;
}

.network-select-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-2px);
}

.network-select-btn.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.network-select-btn.active-mtn {
  border-color: #eab308;
  background: #fefce8;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2);
}

.network-select-btn.active-telecel {
  border-color: #e11d48;
  background: #fff1f2;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2);
}

.network-select-btn.active-at {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
}

.network-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
}

.network-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
}

.network-check-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #2563eb;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.network-select-btn.active .network-check-badge {
  opacity: 1;
}

/* Phone input with network badge */
.phone-field-wrapper {
  position: relative;
}

.phone-network-indicator {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  pointer-events: none;
}

.phone-network-indicator.detected {
  background: #dcfce7;
  color: #166534;
}

/* Amount Chips */
.airtime-amount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.airtime-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.airtime-chip:hover {
  border-color: #94a3b8;
  background: #e2e8f0;
}

.airtime-chip.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* Payment Method Selection */
.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 20px;
}

@media (min-width: 480px) {
  .payment-methods-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.payment-method-card {
  border: 2px solid #e2e8f0;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.payment-method-card:hover {
  border-color: #cbd5e1;
}

.payment-method-card.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
}

.payment-method-icon {
  font-size: 1.4rem;
  color: #2563eb;
  margin-top: 2px;
}

.payment-method-details h4 {
  margin: 0 0 3px 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

.payment-method-details p {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.payment-fee-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  background: #f1f5f9;
  color: #475569;
}

.payment-fee-badge.free {
  background: #dcfce7;
  color: #166534;
}

/* Live Summary Card */
.airtime-summary-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}

.airtime-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #64748b;
}

.airtime-summary-row:last-child {
  margin-bottom: 0;
}

.airtime-summary-row.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

/* Full Processing Overlay */
.airtime-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.airtime-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.airtime-processing-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.spinner-pulse {
  width: 56px;
  height: 56px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 18px;
}

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

/* History Modal */
.airtime-history-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
  position: relative;
}

.airtime-history-scroll {
  overflow-y: auto;
  margin-top: 14px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  margin-bottom: 8px;
  background: #f8fafc;
  transition: background 0.15s;
}

.history-item:hover {
  background: #f1f5f9;
}

/* ==========================================
   UNIFIED AGENT PORTAL SHELL (agentNav.js)
   ========================================== */
.agent-shell-header {
  position: sticky;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}

.gt-brand {
  text-decoration: none;
}

.gt-brand:hover {
  color: #2563eb;
}

.agent-shell-portal-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

.agent-shell-guest-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  background: #2563eb;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.agent-shell-guest-login:hover {
  background: #1d4ed8;
}

button.drawer-item.drawer-action {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

button.drawer-item.drawer-action.danger,
button.drawer-item.drawer-action.danger i {
  color: #dc2626;
}

button.drawer-item.drawer-action.danger:hover {
  background-color: #fef2f2;
}

button.drawer-item.drawer-action.danger:hover i {
  color: #b91c1c;
}

/* Pages that use the shell should not double up on body padding. */
body.agent-shell-flush {
  padding-top: 0 !important;
}
/* ===========================================================================
   HEADER CONTROLS - notification bell + theme toggle
   =========================================================================== */
/* Sits before the "Agent Portal" tag. position:relative anchors the dropdown
   to this wrapper rather than the whole header, so it cannot drift. */
.header-utility {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #334155;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.header-icon-btn:hover,
.header-icon-btn:focus-visible {
  background-color: #f1f5f9;
  color: #0f172a;
  outline: none;
  border-color: #cbd5e1;
}

.notif-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
  box-sizing: border-box;
}

.notif-badge[hidden] {
  display: none;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 21rem;
  max-width: calc(100vw - 2rem);
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  z-index: 300;
}

.notif-dropdown[hidden] {
  display: none;
}

.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
}

.notif-markall {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
}

.notif-markall:hover {
  text-decoration: underline;
}

.notif-list {
  max-height: 20rem;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #f1f5f9;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item.is-unread {
  background-color: #f8fafc;
}

.notif-item-icon {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.notif-kind-success { color: #16a34a; }
.notif-kind-error   { color: #dc2626; }
.notif-kind-warning { color: #d97706; }
.notif-kind-info    { color: #2563eb; }

.notif-item-body {
  min-width: 0;
}

.notif-item-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}

.notif-item-text {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: #475569;
  overflow-wrap: anywhere;
}

.notif-item-time {
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  color: #94a3b8;
}

.notif-empty {
  margin: 0;
  padding: 1.1rem 0.9rem;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
}

.notif-dismiss {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.agent-notification-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.62);
}

.agent-notification-dialog {
  width: min(100%, 31rem);
  padding: 1.25rem;
  border: 1px solid #dbeafe;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.3);
}

.agent-notification-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.agent-notification-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  border-radius: 0.75rem;
  background: #dbeafe;
  color: #1d4ed8;
}

.agent-notification-dialog-kicker {
  margin: 0 0 0.15rem;
  color: #2563eb;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-notification-dialog h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.1rem;
}

.agent-notification-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.agent-notification-dialog-body {
  margin: 1rem 0 0;
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-notification-dialog-time {
  margin: 0.75rem 0 1rem;
  color: #94a3b8;
  font-size: 0.72rem;
}

.agent-notification-dismiss {
  width: 100%;
  justify-content: center;
}

/* The "Agent Portal" tag had no rule at all, so it rendered as bare text. */
.agent-portal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  background-color: #eff6ff;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* On a phone the tag and the two controls are the first things to go. */
@media (max-width: 560px) {
  .agent-portal-tag { display: none; }
  .notif-dropdown { width: calc(100vw - 2rem); right: -3.2rem; }
}

/* ===========================================================================
   DARK MODE
   =========================================================================== */
/* style.css has no custom properties, so this is a deliberate override layer
   over the surfaces the agent portal actually uses rather than a variable
   flip. Anything not listed here keeps its light colours. */
html.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}

html.dark .gt-header {
  background-color: #1e293b;
  border-bottom-color: #334155;
}

html.dark .header-icon-btn {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

html.dark .header-icon-btn:hover,
html.dark .header-icon-btn:focus-visible {
  background-color: #334155;
  color: #f8fafc;
}

html.dark .notif-dropdown,
html.dark .notif-dropdown-head {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark .notif-item {
  border-bottom-color: #334155;
}

html.dark .notif-item.is-unread {
  background-color: #172033;
}

html.dark .notif-item-title { color: #f1f5f9; }
html.dark .notif-item-text  { color: #cbd5e1; }
html.dark .notif-item-time  { color: #94a3b8; }
html.dark .notif-empty       { color: #94a3b8; }
html.dark .agent-notification-dialog {
  background: #1e293b;
  border-color: #334155;
}
html.dark .agent-notification-dialog h2 { color: #f1f5f9; }
html.dark .agent-notification-dialog-body { color: #cbd5e1; }
html.dark .agent-notification-dialog-time { color: #94a3b8; }
html.dark .agent-notification-close { color: #cbd5e1; }

html.dark .agent-portal-tag {
  background-color: #1e3a8a;
  color: #dbeafe;
}

html.dark .user-avatar {
  background-color: #334155;
  color: #e2e8f0;
}

html.dark .side-drawer,
html.dark .drawer-header {
  background-color: #1e293b;
  color: #e2e8f0;
}

html.dark .topup-card,
html.dark .tx-stat-card,
html.dark .modal-card,
html.dark .card {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark .net-stack-btn {
  background-color: #172033;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #172033;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark table,
html.dark th,
html.dark td {
  border-color: #334155;
  color: #cbd5e1;
}

/* The help desk sends the agent back to dashboard.html#dataBundle. The header is
   sticky, so without this the heading lands underneath it. */
#dataBundle {
  scroll-margin-top: 90px;
}

/* ---- Inline styles ------------------------------------------------
   Nearly every page hard-codes its colours in a style="" attribute, and an
   inline style outranks any selector, so these have to be !important and they
   have to match the value that is actually in the markup.

   The selectors below were generated from the colours that are actually
   present in the repo rather than written by hand, and each keeps the exact
   spelling of the declaration it matches, including the 10 declarations in
   the repo that omit the space after the colon (style="color:#1f2937").

   Every hex in the repo is ";"-terminated, so the semicolon inside the match
   is what stops "color: #fff;" from also catching "color: #fff3cd;".

   Background groups come first and set a light default text colour; the text
   groups after them are later in source order and so take precedence for any
   element that named a colour of its own. Saturated brand buttons (the blue
   #2563eb, green #10b981, gold #ffcc00) are deliberately not touched. */

[style*="background: #f3f4f6;"],
[style*="background:#f3f4f6;"],
[style*="background: #fff;"],
[style*="background:#fff;"],
[style*="background: #f8fafc;"],
[style*="background:#f8fafc;"],
[style*="background: #ffffff;"],
[style*="background: white;"],
[style*="background: #f1f5f9;"],
[style*="background: #f8f9fa;"],
[style*="background: #f9fafb;"] {
  background-color: #16203a !important;
  color: #e2e8f0 !important;
}

[style*="background: #1e293b;"],
[style*="background:#1e293b;"] {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

[style*="background: #eff6ff;"],
[style*="background:#eff6ff;"],
[style*="background: #eef6ff;"],
[style*="background: #f0f4ff;"] {
  background-color: #14264a !important;
  color: #e2e8f0 !important;
}

[style*="background: #fef3c7;"],
[style*="background: #fff3cd;"],
[style*="background: #fefce8;"] {
  background-color: #3a2d10 !important;
  color: #e2e8f0 !important;
}

[style*="background: #fee2e2;"],
[style*="background: #fef2f2;"] {
  background-color: #3b1a1a !important;
  color: #e2e8f0 !important;
}

[style*="background: #dcfce7;"],
[style*="background: #ecfdf5;"],
[style*="background: #f0fdf4;"] {
  background-color: #12291f !important;
  color: #e2e8f0 !important;
}

[style*="color: #1f2937;"],
[style*="color:#1f2937;"],
[style*="color: #1e293b;"],
[style*="color:#1e293b;"],
[style*="color: #111827;"],
[style*="color: #0f172a;"],
[style*="color: #212529;"] {
  color: #f1f5f9 !important;
}

[style*="color: #1d4ed8;"],
[style*="color:#1d4ed8;"],
[style*="color: #3b82f6;"],
[style*="color: #2563eb;"],
[style*="color: #1e40af;"],
[style*="color: #1e3a8a;"],
[style*="color: #1a365d;"] {
  color: #93c5fd !important;
}

[style*="color: #d97706;"],
[style*="color: #78350f;"],
[style*="color: #f59e0b;"],
[style*="color: #b45309;"],
[style*="color: #856404;"] {
  color: #fcd34d !important;
}

[style*="color: #6b7280;"],
[style*="color: #4b5563;"],
[style*="color: #64748b;"],
[style*="color: #374151;"],
[style*="color: #334151;"],
[style*="color: #475569;"],
[style*="color: #666;"],
[style*="color: #555;"],
[style*="color: #777;"],
[style*="color: #495057;"],
[style*="color: #6c757d;"],
[style*="color: #9ca3af;"] {
  color: #cbd5e1 !important;
}

[style*="color: #cbd5e1;"],
[style*="color: #94a3b8;"],
[style*="color: #121212;"] {
  color: #e2e8f0 !important;
}

[style*="color: #10b981;"],
[style*="color: #15803d;"],
[style*="color: #166534;"],
[style*="color: #065f46;"] {
  color: #6ee7b7 !important;
}

[style*="color: #a855f7;"],
[style*="color: #8b5cf6;"] {
  color: #c4b5fd !important;
}

[style*="color: #ef4444;"],
[style*="color: #dc2626;"],
[style*="color: #991b1b;"],
[style*="color: #b91c1c;"] {
  color: #fca5a5 !important;
}

[style*="color: #0ea5e9;"],
[style*="color: #06b6d4;"] {
  color: #7dd3fc !important;
}

[style*="color: #000;"] {
  color: #f8fafc !important;
}

/* Keep page content readable in dark mode, including components with their own
   light-theme class colors that are not covered by the inline color overrides. */
html.dark :where(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd, th, td) {
  color: #e2e8f0;
}

html.dark :where(a:not([class*="btn"]), .text-muted, .text-secondary) {
  color: #93c5fd;
}

html.dark :where(.bg-white, .bg-light, .accordion-item, .accordion-header, .accordion-body, .dropdown-menu, .list-group-item, .form-control, .form-select) {
  background-color: #16203a;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark :where(input, select, textarea)::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* Ash charcoal palette and clearer control feedback for dark mode. */
html.dark body {
  background-color: #24272b;
  color: #edf0f2;
}

html.dark .gt-header,
html.dark .side-drawer,
html.dark .drawer-header,
html.dark .notif-dropdown,
html.dark .notif-dropdown-head,
html.dark .topup-card,
html.dark .tx-stat-card,
html.dark .modal-card,
html.dark .card {
  background-color: #30343a;
  border-color: #4b5159;
}

html.dark .net-stack-btn,
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #292d32;
  border-color: #4b5159;
}

html.dark .notif-item.is-unread { background-color: #383d43; }
html.dark .header-icon-btn { background-color: #383d43; border-color: #555c65; }
html.dark .header-icon-btn:hover,
html.dark .header-icon-btn:focus-visible { background-color: #4a5058; }

html.dark [style*="background: #f3f4f6;"],
html.dark [style*="background:#f3f4f6;"],
html.dark [style*="background: #fff;"],
html.dark [style*="background:#fff;"],
html.dark [style*="background: #ffffff;"],
html.dark [style*="background: white;"],
html.dark [style*="background: #f1f5f9;"],
html.dark [style*="background: #f8fafc;"],
html.dark [style*="background:#f8fafc;"],
html.dark [style*="background: #f8f9fa;"],
html.dark [style*="background: #f9fafb;"] {
  background-color: #30343a !important;
}

html.dark [style*="background: #1e293b;"],
html.dark [style*="background:#1e293b;"],
html.dark [style*="background: #eff6ff;"],
html.dark [style*="background:#eff6ff;"],
html.dark [style*="background: #eef6ff;"],
html.dark [style*="background: #f0f4ff;"] {
  background-color: #383d43 !important;
}

html.dark :where(button, .btn, a, input, select, textarea, .header-icon-btn,
  .package-card, .network-card, .card, .topup-card, .tx-stat-card,
  .payment-method-card, .net-stack-btn, .list-group-item) {
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html.dark :where(button:not(:disabled), .btn, .package-card, .network-card,
  .payment-method-card, .net-stack-btn):hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

html.dark :where(button, a, input, select, textarea, .btn):focus-visible {
  outline: 2px solid #aeb6c0;
  outline-offset: 2px;
}

html.dark :where(button:active, .btn:active) {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.dark :where(button, .btn, a, input, select, textarea, .package-card,
    .network-card, .card, .topup-card, .tx-stat-card, .payment-method-card,
    .net-stack-btn, .list-group-item) {
    transition: none;
    transform: none;
  }
}

/* Match the ash palette on utility panels used by wallet, support, and AFA. */
html.dark :where(.bg-white, .bg-light, .accordion-item, .accordion-header,
  .accordion-body, .dropdown-menu, .list-group-item, .form-control, .form-select) {
  background-color: #30343a;
  border-color: #4b5159;
  color: #edf0f2;
}

html.dark [style*="background: #0f172a;"],
html.dark [style*="background-color: #0f172a;"],
html.dark [style*="background: #16203a;"],
html.dark [style*="background-color: #16203a;"],
html.dark [style*="background: #172033;"],
html.dark [style*="background-color: #172033;"],
html.dark [style*="background: #14264a;"],
html.dark [style*="background-color: #14264a;"] {
  background-color: #383d43 !important;
  border-color: #4b5159 !important;
}

html.dark .support-section,
html.dark .faq-item,
html.dark .faq-item .faq-content,
html.dark .agent-afa-card,
html.dark .wallet-stat-card,
html.dark .transaction-card {
  background-color: #30343a;
  border-color: #4b5159;
  color: #edf0f2;
}

/* ==========================================================================
   RETIRED DATA MODAL STYLES
   Dark purchase sheet. The active network drives the accent through custom
   properties, so switching tabs re-themes the card without touching any other
   rule. --idm-accent is the network brand colour and --idm-accent-ink is the
   readable text colour on top of it (MTN's yellow needs dark text, the red and
   blue need white).
   ========================================================================== */

.idm-banner {
  background: linear-gradient(135deg, #111827, #1f2937);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.idm-banner-title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #f8fafc; }
.idm-banner-sub { margin: 0; font-size: 0.82rem; color: #94a3b8; }

.idm-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1e40af;
  color: #ffffff;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.idm-banner-btn:hover { background: #1d4ed8; }

.idm-overlay {
  --idm-accent: #FFCC00;
  --idm-accent-ink: #1a1400;
  --idm-accent-soft: rgba(255, 204, 0, 0.14);
  --idm-surface: #0b1220;
  --idm-surface-2: #131c2e;
  --idm-line: rgba(255, 255, 255, 0.09);
  --idm-text: #f1f5f9;
  --idm-muted: #94a3b8;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 17, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.idm-overlay.is-open { opacity: 1; visibility: visible; }

.idm-theme-mtn { --idm-accent: #FFCC00; --idm-accent-ink: #1a1400; --idm-accent-soft: rgba(255, 204, 0, 0.14); }
.idm-theme-telecel { --idm-accent: #DA291C; --idm-accent-ink: #ffffff; --idm-accent-soft: rgba(218, 41, 28, 0.16); }
.idm-theme-airteltigo { --idm-accent: #0072BC; --idm-accent-ink: #ffffff; --idm-accent-soft: rgba(0, 114, 188, 0.18); }

body.idm-open { overflow: hidden; }

.idm-card {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--idm-surface-2), var(--idm-surface));
  border: 1px solid var(--idm-line);
  border-radius: 18px;
  color: var(--idm-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.idm-overlay.is-open .idm-card { transform: none; }

.idm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--idm-line);
  background: linear-gradient(180deg, var(--idm-accent-soft), transparent);
}

.idm-eyebrow {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--idm-accent);
}

.idm-brand-lockup { display: flex; align-items: center; gap: 11px; }
.idm-network-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; background: #fff; padding: 3px; flex: none; }
.idm-pricing-header { margin: 4px 0 0; color: var(--idm-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.idm-title { margin: 0; font-size: 1.15rem; font-weight: 800; }

.idm-close {
  background: transparent;
  border: 1px solid var(--idm-line);
  color: var(--idm-muted);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.idm-close:hover { color: var(--idm-text); border-color: var(--idm-accent); }

.idm-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 18px 4px;
}

.idm-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  border-radius: 11px;
  border: 1px solid var(--idm-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--idm-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.idm-tab:hover { color: var(--idm-text); }
.idm-tab.is-active {
  background: var(--idm-accent);
  border-color: var(--idm-accent);
  color: var(--idm-accent-ink);
}

.idm-phone { padding: 12px 18px 4px; }

.idm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--idm-muted);
}

.idm-phone-field { position: relative; }

.idm-phone-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--idm-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

#idmPhone {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border-radius: 11px;
  border: 1px solid var(--idm-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--idm-text);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
#idmPhone::placeholder { color: #64748b; }
#idmPhone:focus {
  outline: none;
  border-color: var(--idm-accent);
  box-shadow: 0 0 0 3px var(--idm-accent-soft);
}

.idm-hint { margin: 6px 0 0; font-size: 0.72rem; color: #64748b; }

.idm-error {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fecaca;
  font-size: 0.78rem;
}

.idm-bundles {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--idm-accent) transparent;
}
.idm-bundles::-webkit-scrollbar { width: 6px; }
.idm-bundles::-webkit-scrollbar-thumb { background: var(--idm-accent); border-radius: 3px; }

.idm-bundle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid var(--idm-line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.idm-bundle:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.idm-bundle.is-selected {
  border-color: var(--idm-accent);
  background: var(--idm-accent-soft);
}
.idm-bundle.is-low { opacity: 1; cursor: pointer; }
.idm-bundle.is-low:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.22); }

.idm-bundle input[type="radio"] {
  accent-color: var(--idm-accent);
  width: 17px;
  height: 17px;
  flex: none;
}

.idm-bundle-info { flex: 1; min-width: 0; }
.idm-bundle-title { display: block; font-size: 0.92rem; font-weight: 700; }
.idm-bundle-validity { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--idm-muted); }
.idm-bundle-category {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border: 1px solid var(--idm-accent);
  border-radius: 999px;
  color: var(--idm-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.idm-bundle-side { text-align: right; flex: none; }
.idm-bundle-price { display: block; font-size: 0.92rem; font-weight: 800; color: var(--idm-accent); }
.idm-bundle.is-low .idm-bundle-price { color: #ef4444; }

.idm-bundle.is-low .idm-flag {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(248, 113, 113, 0.38);
  color: #fca5a5;
}

.idm-flag {
  display: inline-block;
  margin-bottom: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fcd34d;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.idm-loading, .idm-empty {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  color: var(--idm-muted);
  font-size: 0.85rem;
}

.idm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--idm-line);
  background: rgba(2, 6, 17, 0.6);
}

.idm-balance-label { display: block; font-size: 0.68rem; color: var(--idm-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.idm-balance-value { display: block; margin-top: 2px; font-size: 1rem; font-weight: 800; }

.idm-cta {
  flex: 1;
  max-width: 62%;
  padding: 13px 16px;
  border: none;
  border-radius: 12px;
  background: var(--idm-accent);
  color: var(--idm-accent-ink);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.16s ease, opacity 0.16s ease;
}
.idm-cta:hover:not(:disabled) { filter: brightness(1.08); }
.idm-cta:disabled { opacity: 0.42; cursor: not-allowed; }

.idm-cta.is-topup {
  background: transparent;
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

@media (max-width: 520px) {
  .idm-overlay { padding: 0; align-items: flex-end; }
  .idm-card {
    max-width: none;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .idm-banner { flex-direction: column; align-items: stretch; }
  .idm-banner-btn { width: 100%; padding: 11px; }
  .idm-footer { flex-direction: column; align-items: stretch; }
  .idm-cta { max-width: none; width: 100%; }
  .idm-balance { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .idm-overlay, .idm-card, .idm-bundle, .idm-tab, .idm-cta { transition: none; }
}

/* ==========================================================================
   AGENT DASHBOARD - keep the whole page dark navy in every theme.
   The charcoal dark-mode rules above would otherwise turn the dashboard
   cards grey when the dark class is toggled. Scoped to body.dashboard-page
   so other pages are untouched.
   ========================================================================== */
body.dashboard-page .gt-dashboard-body {
  background: #0b0f19;
}

body.dashboard-page .accordion-header {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.14);
}

body.dashboard-page .topup-card,
body.dashboard-page .package-card,
body.dashboard-page .modal-card {
  background-color: #111827;
  border-color: rgba(148, 163, 184, 0.14);
}

body.dashboard-page .net-stack-btn,
body.dashboard-page .net-mtn,
body.dashboard-page .net-telecel,
body.dashboard-page .net-ishare,
body.dashboard-page .net-bigtime {
  background-color: #1e40af;
  color: #ffffff;
}

/* Dashboard top header stays navy too (the shell header is white by default). */
body.dashboard-page .gt-header {
  background-color: #0b0f19;
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

body.dashboard-page .gt-brand,
body.dashboard-page .gt-brand:hover {
  color: #e9eef8;
}

body.dashboard-page .hamburger-btn {
  background: #1e293b;
  color: #e9eef8;
}

body.dashboard-page .header-icon-btn {
  background-color: #111827;
  border-color: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

body.dashboard-page .header-icon-btn:hover,
body.dashboard-page .header-icon-btn:focus-visible {
  background-color: #1e293b;
  color: #ffffff;
  border-color: rgba(148, 163, 184, 0.3);
}

body.dashboard-page .user-avatar {
  background-color: #1e293b;
  color: #cbd5e1;
}

body.dashboard-page .agent-portal-tag {
  background-color: rgba(37, 99, 235, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

body.dashboard-page .side-drawer,
body.dashboard-page .drawer-header {
  background-color: #111827;
  color: #e9eef8;
}

body.dashboard-page .drawer-brand-name { color: #e9eef8; }

body.dashboard-page .drawer-section-label { color: #8b97ad; }

body.dashboard-page .drawer-item { color: #e9eef8; }
body.dashboard-page .drawer-item i { color: #93c5fd; }

body.dashboard-page .drawer-item:hover {
  background-color: #1e293b;
  color: #ffffff;
}
body.dashboard-page .drawer-item:hover i { color: #bfdbfe; }

body.dashboard-page .drawer-divider { background: rgba(148, 163, 184, 0.14); }

body.dashboard-page .drawer-close-btn {
  background: #1e293b;
  color: #cbd5e1;
}
body.dashboard-page .drawer-close-btn:hover {
  background: #334155;
  color: #ffffff;
}

/* Notification dropdown (header chrome) also navy on the dashboard. */
body.dashboard-page .notif-dropdown {
  background-color: #111827;
  border-color: rgba(148, 163, 184, 0.16);
}

body.dashboard-page .notif-dropdown-head {
  border-bottom-color: rgba(148, 163, 184, 0.16);
  color: #e9eef8;
}

body.dashboard-page .notif-item {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

body.dashboard-page .notif-item.is-unread {
  background-color: #172033;
}

body.dashboard-page .notif-item-title { color: #f1f5f9; }
body.dashboard-page .notif-item-text  { color: #cbd5e1; }
body.dashboard-page .notif-item-time  { color: #94a3b8; }
body.dashboard-page .notif-empty      { color: #94a3b8; }

/* Orders page uses the same dark navy palette as the agent dashboard. */
body.orders-body-yellow {
  background-color: #0b0f19;
  background-image: linear-gradient(180deg, #0b0f19 0%, #111827 100%);
  color: #e9eef8;
}

body.orders-body-yellow .search-input-wrapper input,
body.orders-body-yellow .pill-btn,
body.orders-body-yellow .tx-stat-card,
body.orders-body-yellow .orders-content-card,
body.orders-body-yellow .page-size-selector select,
body.orders-body-yellow .pagination-buttons button {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.14);
  color: #e9eef8;
}

body.orders-body-yellow .search-input-wrapper input::placeholder {
  color: #8b97ad;
}

body.orders-body-yellow .pill-btn.active,
body.orders-body-yellow .pagination-buttons button:not(:disabled):hover {
  background: #1e40af;
  border-color: #1e40af;
  color: #ffffff;
}

body.orders-body-yellow .orders-count-text,
body.orders-body-yellow .page-size-selector,
body.orders-body-yellow .pagination-buttons,
body.orders-body-yellow .orders-data-table th,
body.orders-body-yellow .orders-data-table .cell-date {
  color: #94a3b8;
}

body.orders-body-yellow .orders-content-card {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

body.orders-body-yellow .tx-stat-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

body.orders-body-yellow .orders-data-table th,
body.orders-body-yellow .orders-data-table td {
  border-bottom-color: rgba(148, 163, 184, 0.14);
}

body.orders-body-yellow .orders-data-table .cell-id,
body.orders-body-yellow .empty-state-box h3,
body.orders-body-yellow .tx-stat-value {
  color: #e9eef8;
}

body.orders-body-yellow .empty-state-box p {
  color: #94a3b8;
}