:root {
  color-scheme: dark;
  --motion-fast: 160ms;
  --motion-med: 260ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-pop: cubic-bezier(0.2, 1.35, 0.35, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

html:not(.theme-dark) * {
  scrollbar-color: rgba(0,0,0,0.22) transparent;
}

html:not(.theme-dark) ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

a,
button,
.menu-item,
.danger-item,
.recent-order,
.order-card,
.history-order,
.summary-chip,
.quick-amount-btn,
.payment-method,
.pay-method,
.net-tab,
.bundle-card,
.theme-toggle,
.zongo-theme-float {
  touch-action: manipulation;
}

button,
a,
.menu-item,
.danger-item,
.recent-order,
.order-card,
.history-order,
.summary-chip,
.quick-amount-btn,
.payment-method,
.pay-method,
.net-tab,
.bundle-card,
.wallet-topup-btn,
.submit-btn,
.search-btn,
.modal-btn,
.topup-btn,
.history-lock-btn,
.btn-cta {
  transition-timing-function: var(--motion-ease) !important;
}

button:active,
a:active,
.menu-item:active,
.danger-item:active,
.recent-order:active,
.order-card:active,
.history-order:active,
.summary-chip:active,
.quick-amount-btn:active,
.payment-method:active,
.pay-method:active,
.net-tab:active,
.bundle-card:active,
.wallet-topup-btn:active,
.submit-btn:active,
.search-btn:active,
.modal-btn:active,
.topup-btn:active,
.history-lock-btn:active,
.btn-cta:active {
  transform: scale(0.98);
}

.modal-overlay,
.home-payment-overlay,
.offcanvas-overlay,
.toast,
.wa-bubble,
.page-loader {
  will-change: opacity, transform;
}

.card,
.search-card,
.result-card,
.tips-card,
.menu-card,
.profile-hero,
.wallet-card,
.recent-card,
.history-lock-card,
.history-order,
.bundle-card {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.purchase-modal,
.home-payment-dialog,
.offcanvas {
  backface-visibility: hidden;
  will-change: transform;
}

.zongo-motion .zongo-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease);
  will-change: opacity, transform;
}

.zongo-motion .zongo-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.zongo-motion .zongo-reveal.reveal-soft {
  transform: translate3d(0, 14px, 0) scale(0.985);
}

.zongo-motion .zongo-reveal.reveal-soft.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.zongo-motion .bundle-section.visible .bundle-card {
  animation-duration: 0.52s !important;
  animation-timing-function: var(--motion-ease) !important;
}

.zongo-motion .section-heading,
.zongo-motion .page-header,
.zongo-motion .page-head,
.zongo-motion .profile-hero {
  animation: zongoFloatIn 0.58s var(--motion-ease) both;
}

@keyframes zongoFloatIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.theme-dark body,
body.theme-dark {
  background: #050505 !important;
  color: #f7f7f7 !important;
}

html.theme-dark header,
html.theme-dark .card,
html.theme-dark .search-card,
html.theme-dark .result-card,
html.theme-dark .tips-card,
html.theme-dark .not-found,
html.theme-dark .summary-chip,
html.theme-dark .filter-row,
html.theme-dark .order-card,
html.theme-dark .menu-card,
html.theme-dark .wallet-card,
html.theme-dark .recent-card,
html.theme-dark .tx-card,
html.theme-dark .topup-card,
html.theme-dark .quick-amount-btn,
html.theme-dark .payment-method,
html.theme-dark .payment-status-dialog,
html.theme-dark .payment-info-card,
html.theme-dark .home-payment-dialog,
html.theme-dark .home-payment-info,
html.theme-dark .member-card,
html.theme-dark .referral-box,
html.theme-dark .bundle-card,
html.theme-dark .net-tab,
html.theme-dark .purchase-modal,
html.theme-dark .modal-price-row,
html.theme-dark .pay-method,
html.theme-dark .history-order,
html.theme-dark .history-lock-card {
  background: #101010 !important;
  border-color: #2b2b2b !important;
  color: #f7f7f7 !important;
}

html.theme-dark .header-stripe {
  background: #ffffff !important;
}

html.theme-dark .logo-icon,
html.theme-dark .page-header-icon,
html.theme-dark .card-icon,
html.theme-dark .profile-avatar,
html.theme-dark .wallet-icon,
html.theme-dark .btn-register,
html.theme-dark .submit-btn,
html.theme-dark .search-btn,
html.theme-dark .header-back,
html.theme-dark .header-link,
html.theme-dark .history-link,
html.theme-dark .history-lock-btn.primary,
html.theme-dark .copy-referral-btn,
html.theme-dark .btn-cta,
html.theme-dark .modal-btn,
html.theme-dark .topup-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html.theme-dark .btn-login,
html.theme-dark .history-lock-btn.outline,
html.theme-dark .offcanvas-btn.outline,
html.theme-dark .theme-toggle {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.theme-dark .theme-toggle:hover,
html.theme-dark .zongo-theme-float:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

html.theme-dark .logo-name,
html.theme-dark .page-title,
html.theme-dark .card-title,
html.theme-dark .profile-name,
html.theme-dark .profile-stat-value,
html.theme-dark .wallet-balance,
html.theme-dark .wallet-hero-balance,
html.theme-dark .menu-item-label,
html.theme-dark .recent-title,
html.theme-dark .recent-order-bundle,
html.theme-dark .recent-order-amount,
html.theme-dark .order-bundle,
html.theme-dark .order-amount,
html.theme-dark .summary-chip-value,
html.theme-dark .empty-title,
html.theme-dark .result-bundle,
html.theme-dark .result-amount,
html.theme-dark .result-meta-value,
html.theme-dark .step-label,
html.theme-dark .payment-title,
html.theme-dark .payment-info-label,
html.theme-dark .history-title,
html.theme-dark .history-order-title,
html.theme-dark .history-amount,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark .section-title,
html.theme-dark .card-size,
html.theme-dark .modal-bundle-name {
  color: #f7f7f7 !important;
}

html.theme-dark .page-sub,
html.theme-dark .card-sub,
html.theme-dark .hero-sub,
html.theme-dark .section-sub,
html.theme-dark .profile-email,
html.theme-dark .profile-stat-label,
html.theme-dark .wallet-label,
html.theme-dark .menu-item-sub,
html.theme-dark .recent-order-date,
html.theme-dark .order-phone,
html.theme-dark .order-date,
html.theme-dark .summary-chip-label,
html.theme-dark .empty-sub,
html.theme-dark .result-order-id,
html.theme-dark .result-meta-label,
html.theme-dark .step-time,
html.theme-dark .payment-subtitle,
html.theme-dark .payment-info-value,
html.theme-dark .payment-reference,
html.theme-dark .history-sub,
html.theme-dark .history-order-meta,
html.theme-dark .history-lock-sub,
html.theme-dark .referral-note,
html.theme-dark .modal-bundle-meta,
html.theme-dark .modal-price-label,
html.theme-dark .pay-method-sub {
  color: #bdbdbd !important;
}

html.theme-dark .form-input,
html.theme-dark .search-input,
html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background: #050505 !important;
  border-color: #2b2b2b !important;
  color: #f7f7f7 !important;
}

html.theme-dark .form-input:focus,
html.theme-dark .search-input:focus,
html.theme-dark input:focus,
html.theme-dark select:focus,
html.theme-dark textarea:focus {
  border-color: #ffffff !important;
}

html.theme-dark .footer-bg,
html.theme-dark footer {
  background: #050505 !important;
}

html.theme-dark .footer-logo-icon,
html.theme-dark .footer-cta {
  background: #ffffff !important;
  color: #000000 !important;
}

html.theme-dark .payment-action.primary {
  background: #ffffff !important;
  color: #000000 !important;
}

html.theme-dark .payment-action.secondary {
  background: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

html.theme-dark .h1-gradient,
html.theme-dark .h2-orange {
  background: linear-gradient(90deg, #ffcb05 0%, #dc2626 48%, #60a5fa 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #ffcb05 !important;
}

html.theme-dark .net-tab.active-mtn {
  background: rgba(255,203,5,0.18) !important;
  border-color: #ffcb05 !important;
  color: #ffef99 !important;
  box-shadow: 0 8px 24px rgba(255,203,5,0.14) !important;
}

html.theme-dark .bundle-card.mtn {
  background: linear-gradient(145deg, rgba(255,203,5,0.24) 0%, #080808 58%) !important;
  border-color: #ffcb05 !important;
  box-shadow: 0 12px 32px rgba(255,203,5,0.16), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html.theme-dark .bundle-card.mtn:hover {
  border-color: #ffe45c !important;
  box-shadow: 0 16px 40px rgba(255,203,5,0.22), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

html.theme-dark .mtn .card-logo-corner,
html.theme-dark .mtn .popular-badge {
  background: #ffcb05 !important;
  border-color: #ffcb05 !important;
  color: #101010 !important;
}

html.theme-dark .mtn .card-price {
  color: #ffde3b !important;
  text-shadow: 0 0 18px rgba(255,203,5,0.32) !important;
}

html.theme-dark .mtn .card-logo-text {
  color: #101010 !important;
}

html:not(.theme-dark) .net-tab.active-mtn {
  background: #ffcb05 !important;
  border-color: #ffcb05 !important;
  color: #111111 !important;
  box-shadow: 0 8px 22px rgba(255,203,5,0.34) !important;
}

html:not(.theme-dark) .net-tab.active-telecel {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(220,38,38,0.26) !important;
}

html:not(.theme-dark) .net-tab.active-at {
  background: linear-gradient(135deg, #dc2626 0%, #2563eb 100%) !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(37,99,235,0.24) !important;
}

html:not(.theme-dark) .bundle-card.mtn {
  background: linear-gradient(180deg, #fffef4 0%, #fff6bc 100%) !important;
  border-color: rgba(255,203,5,0.78) !important;
  box-shadow: 0 10px 30px rgba(255,203,5,0.16) !important;
}

html:not(.theme-dark) .bundle-card.telecel {
  background: linear-gradient(180deg, #fff7f7 0%, #ffd6d6 100%) !important;
  border-color: rgba(220,38,38,0.62) !important;
  box-shadow: 0 10px 30px rgba(220,38,38,0.13) !important;
}

html:not(.theme-dark) .bundle-card.at {
  background: linear-gradient(180deg, #f7fbff 0%, #dbeafe 100%) !important;
  border-color: rgba(37,99,235,0.62) !important;
  box-shadow: 0 10px 30px rgba(37,99,235,0.13) !important;
}

html:not(.theme-dark) .bundle-card.mtn:hover {
  border-color: #f4b400 !important;
  box-shadow: 0 14px 34px rgba(255,203,5,0.32) !important;
}

html:not(.theme-dark) .bundle-card.telecel:hover {
  border-color: #dc2626 !important;
  box-shadow: 0 14px 34px rgba(220,38,38,0.24) !important;
}

html:not(.theme-dark) .bundle-card.at:hover {
  border-color: #2563eb !important;
  box-shadow: 0 14px 34px rgba(37,99,235,0.24) !important;
}

html:not(.theme-dark) .mtn .card-logo-corner,
html:not(.theme-dark) .mtn .popular-badge {
  background: #ffcb05 !important;
  color: #1a1a1a !important;
}

html:not(.theme-dark) .telecel .card-logo-corner,
html:not(.theme-dark) .telecel .popular-badge {
  background: #dc2626 !important;
  color: #ffffff !important;
}

html:not(.theme-dark) .at .card-logo-corner,
html:not(.theme-dark) .at .popular-badge {
  background: linear-gradient(135deg, #dc2626, #2563eb) !important;
  color: #ffffff !important;
}

html:not(.theme-dark) .mtn .card-logo-text {
  color: #1a1a1a !important;
}

html:not(.theme-dark) .telecel .card-logo-text,
html:not(.theme-dark) .at .card-logo-text {
  color: #ffffff !important;
}

html.theme-dark .net-tab.active-telecel {
  background: rgba(220,38,38,0.18) !important;
  border-color: #ef4444 !important;
  color: #fecaca !important;
  box-shadow: 0 8px 24px rgba(220,38,38,0.14) !important;
}

html.theme-dark .bundle-card.telecel {
  background: linear-gradient(145deg, rgba(220,38,38,0.24) 0%, #080808 58%) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 12px 32px rgba(220,38,38,0.16), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html.theme-dark .bundle-card.telecel:hover {
  border-color: #f87171 !important;
  box-shadow: 0 16px 40px rgba(220,38,38,0.22), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

html.theme-dark .telecel .card-logo-corner,
html.theme-dark .telecel .popular-badge {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

html.theme-dark .telecel .card-price,
html.theme-dark .telecel .card-logo-text {
  color: #f87171 !important;
  text-shadow: 0 0 18px rgba(220,38,38,0.32) !important;
}

html.theme-dark .net-tab.active-at {
  background: rgba(37,99,235,0.18) !important;
  border-color: #3b82f6 !important;
  color: #bfdbfe !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.14) !important;
}

html.theme-dark .bundle-card.at {
  background: linear-gradient(145deg, rgba(37,99,235,0.24) 0%, #080808 58%) !important;
  border-color: #2563eb !important;
  box-shadow: 0 12px 32px rgba(37,99,235,0.16), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html.theme-dark .bundle-card.at:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 16px 40px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

html.theme-dark .at .card-logo-corner,
html.theme-dark .at .popular-badge {
  background: linear-gradient(135deg, #dc2626, #2563eb) !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

html.theme-dark .at .card-price,
html.theme-dark .at .card-logo-text {
  color: #60a5fa !important;
  text-shadow: 0 0 18px rgba(37,99,235,0.32) !important;
}

.logo-wrap {
  gap: 0 !important;
}

.zongo-mark {
  --pill-width: 17px;
  --pill-height: 42px;
  --dot-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

.zongo-pill {
  width: var(--pill-width);
  height: var(--pill-height);
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 2px 0;
}

.zongo-pill.top { justify-content: flex-start; flex-direction: column; }
.zongo-pill.bottom { justify-content: flex-end; flex-direction: column; }

.zongo-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 999px;
  background: #000000;
  color: #ffd700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  animation: zongoDotBounce 1.8s ease-in-out infinite;
}

.zongo-pill:nth-child(2) .zongo-dot { animation-delay: 0.15s; }
.zongo-pill:nth-child(3) .zongo-dot { animation-delay: 0.3s; }
.zongo-pill:nth-child(4) .zongo-dot { animation-delay: 0.45s; }
.zongo-pill:nth-child(5) .zongo-dot { animation-delay: 0.6s; }

.footer-mark {
  --pill-width: 24px;
  --pill-height: 58px;
  --dot-size: 21px;
  gap: 5px;
  padding: 0;
}

.footer-mark .zongo-dot {
  font-size: 11px;
}

@keyframes zongoDotBounce {
  0%, 100% { transform: translateY(0); }
  22% { transform: translateY(-6px); }
  42% { transform: translateY(0); }
  58% { transform: translateY(-3px); }
  74% { transform: translateY(0); }
}

html.theme-dark .zongo-mark {
  box-shadow: none;
}

@media (max-width: 480px) {
  .zongo-mark {
    --pill-width: 15px;
    --pill-height: 38px;
    --dot-size: 13px;
    gap: 3px;
    padding: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .zongo-motion .zongo-reveal,
  .zongo-motion .zongo-reveal.reveal-soft {
    opacity: 1 !important;
    transform: none !important;
  }

  .zongo-dot {
    animation: none;
  }
}

.zongo-theme-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: #ffffff;
  color: #000000;
  font: 800 13px 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
}

html.theme-dark .zongo-theme-float {
  background: #101010;
  color: #ffffff;
}

.zongo-theme-float svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}