/* NaijaTopup — supplemental CSS (dark-green / orange palette)
   Page lives on a fixed dark-green mesh; content cards are light
   ("white foreground") with dark text for readability. Orange is the
   action color (CTAs, badges, tab pills).
   Mobile/tablet first — every layout block uses fluid spacing. */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root {
  --forest-950: #022c22;
  --forest-900: #064e3b;
  --forest-800: #065f46;
  --forest-700: #047857;
  --forest-600: #059669;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-400: #fb923c;
  --ink:        #0b1220;
}

/* ============================================================
   THE MESH — dark emerald canvas with orange + green orbs
   ============================================================ */

.bg-mesh {
  background-color: var(--forest-950);
  background-image:
    radial-gradient(at 8% 12%,  rgba(249, 115, 22, 0.30) 0%, transparent 42%),
    radial-gradient(at 92% 6%,  rgba(16, 185, 129, 0.28) 0%, transparent 42%),
    radial-gradient(at 88% 88%, rgba(249, 115, 22, 0.22) 0%, transparent 45%),
    radial-gradient(at 12% 92%, rgba(6, 95, 70, 0.55)   0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(255,255,255,0.04)  0%, transparent 55%);
  background-attachment: fixed;
}

.bg-mesh-dark {
  background-color: #011a14;
  background-image:
    radial-gradient(at 10% 10%, rgba(249, 115, 22, 0.18) 0%, transparent 50%),
    radial-gradient(at 90% 20%, rgba(16, 185, 129, 0.20) 0%, transparent 50%),
    radial-gradient(at 80% 90%, rgba(249, 115, 22, 0.12) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ============================================================
   SURFACES — solid (no glassmorphism). The historic class names
   "glass" / "glass-soft" / "glass-bar" / "glass-dark" are kept so
   we don't have to retag every view; they now render as plain
   solid panels with no backdrop-filter, so colours stay true.
   ============================================================ */

.glass {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--ink);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
}

.glass-soft {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--ink);
}

/* Sidebar: solid deep green */
.glass-dark {
  background: var(--forest-950);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

/* Top bar: solid deep green to match the sidebar */
.glass-bar {
  background: var(--forest-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* Force dark text inside Tailwind bg-white surfaces — body has
   text-white so without this, cards would inherit white-on-white. */
.bg-white { color: var(--ink); }

/* Disable backdrop-filter wherever Tailwind's backdrop-blur* utility
   was applied inline. Translucent backgrounds (bg-white/10 etc.) stay
   translucent — only the blurring is removed so colours read cleanly. */
[class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* ============================================================
   FLOATING ORBS — extra depth behind the glass
   ============================================================ */

.orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.orbs::before,
.orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.orbs::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
  top: -160px; left: -120px;
  animation: orb-float-a 22s ease-in-out infinite alternate;
}
.orbs::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
  bottom: -200px; right: -160px;
  animation: orb-float-b 28s ease-in-out infinite alternate;
}

@keyframes orb-float-a {
  0%   { transform: translate(0, 0)    scale(1); }
  100% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes orb-float-b {
  0%   { transform: translate(0, 0)    scale(1); }
  100% { transform: translate(-60px, -80px) scale(1.1); }
}

/* Direct children of the mesh wrapper sit above the fixed orbs background.
   `header` is intentionally excluded — it owns its own stacking via the
   sticky + z-[55] Tailwind classes in views/partials/header.php. Including
   it here forces `position: relative` (clobbering sticky) and `z-index: 1`
   (sinking the dropdown below subsequent in-page sections). */
.bg-mesh > div,
.bg-mesh > main,
.bg-mesh > aside { position: relative; z-index: 1; }

/* ============================================================
   HOMEPAGE HERO — dark emerald with orange highlight
   ============================================================ */

.hero-section {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(249, 115, 22, 0.40), transparent 60%),
    radial-gradient(1000px 500px at 0% 100%, rgba(16, 185, 129, 0.35), transparent 60%),
    linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
  position: relative;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.30;
  mix-blend-mode: overlay;
  z-index: -1;
  background-color: transparent;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(2, 44, 34, 0.55) 0%, rgba(4, 120, 87, 0.50) 50%, rgba(6, 95, 70, 0.55) 100%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.55), transparent 60%);
  z-index: -1;
}

/* ============================================================
   TEXT-ON-DARK HELPER
   Apply to wrappers that contain bare text directly on the mesh
   (page titles + paragraphs outside cards). Auto-overrides the
   slate-* utilities that the existing markup uses.
   ============================================================ */

/* The wrapper sets a default white ink for bare text directly on
   the mesh. Tailwind text-* utilities still win when explicitly set. */
.on-dark { color: #ffffff; }

/* Bare headings (no Tailwind colour class) directly under .on-dark */
.on-dark > h1, .on-dark > h2, .on-dark > h3, .on-dark > h4,
.on-dark > div > h1, .on-dark > div > h2, .on-dark > div > h3, .on-dark > div > h4 { color: #ffffff; }

/* Slate text utilities — when used directly on the mesh, lighten so
   they read against dark green. Inside a card surface (.glass /
   .bg-white / .glass-soft), the more specific reset below restores
   the original slate value. */
.on-dark .text-slate-400,
.on-dark .text-slate-500,
.on-dark .text-slate-600 { color: rgba(255,255,255,0.75) !important; }
.on-dark .text-slate-700,
.on-dark .text-slate-800,
.on-dark .text-slate-900 { color: #ffffff !important; }
.on-dark a:hover         { color: var(--orange-400); }

/* Inside a card surface, reset slate utilities to their Tailwind
   defaults so cards read like normal light surfaces. Apply to every
   light background we use in admin/user pages — glass, bg-white, and
   the bg-slate-50/100 chip-style cards. */
.on-dark .glass .text-slate-400,
.on-dark .glass-soft .text-slate-400,
.on-dark .bg-white .text-slate-400,
.on-dark .bg-slate-50 .text-slate-400,
.on-dark .bg-slate-100 .text-slate-400 { color: #94a3b8 !important; }
.on-dark .glass .text-slate-500,
.on-dark .glass-soft .text-slate-500,
.on-dark .bg-white .text-slate-500,
.on-dark .bg-slate-50 .text-slate-500,
.on-dark .bg-slate-100 .text-slate-500 { color: #64748b !important; }
.on-dark .glass .text-slate-600,
.on-dark .glass-soft .text-slate-600,
.on-dark .bg-white .text-slate-600,
.on-dark .bg-slate-50 .text-slate-600,
.on-dark .bg-slate-100 .text-slate-600 { color: #475569 !important; }
.on-dark .glass .text-slate-700,
.on-dark .glass-soft .text-slate-700,
.on-dark .bg-white .text-slate-700,
.on-dark .bg-slate-50 .text-slate-700,
.on-dark .bg-slate-100 .text-slate-700 { color: #334155 !important; }
.on-dark .glass .text-slate-800,
.on-dark .glass-soft .text-slate-800,
.on-dark .bg-white .text-slate-800,
.on-dark .bg-slate-50 .text-slate-800,
.on-dark .bg-slate-100 .text-slate-800 { color: #1e293b !important; }
.on-dark .glass .text-slate-900,
.on-dark .glass-soft .text-slate-900,
.on-dark .bg-white .text-slate-900,
.on-dark .bg-slate-50 .text-slate-900,
.on-dark .bg-slate-100 .text-slate-900 { color: #0f172a !important; }

/* Bare text inside light cards (no Tailwind text-slate-* class) —
   default to a readable dark color so endpoint reference cards, KPI
   chips, service cards, etc. don't inherit the page's white text.
   Includes plain bg-white surfaces (the SMM service picker, recent-orders
   strip) that previously rendered invisible white-on-white. */
.on-dark .bg-white,
.on-dark .bg-slate-50,
.on-dark .bg-slate-100,
.on-dark .glass,
.on-dark .glass-soft { color: #0f172a; }

/* Headings inside light cards default to slate-900 (very dark) for punch. */
.on-dark .bg-white h1, .on-dark .bg-white h2, .on-dark .bg-white h3, .on-dark .bg-white h4,
.on-dark .bg-slate-50 h1, .on-dark .bg-slate-50 h2, .on-dark .bg-slate-50 h3, .on-dark .bg-slate-50 h4,
.on-dark .glass h1, .on-dark .glass h2, .on-dark .glass h3, .on-dark .glass h4,
.on-dark .glass-soft h1, .on-dark .glass-soft h2, .on-dark .glass-soft h3, .on-dark .glass-soft h4 { color: #0f172a !important; }

/* Same protection for translucent-white chips (bg-white/50 etc.) used on
   the services page. The slash class needs an escaped selector. */
.on-dark [class*="bg-white/"] { color: #334155; }
.on-dark [class*="bg-white/"] .text-slate-400 { color: #94a3b8 !important; }
.on-dark [class*="bg-white/"] .text-slate-500 { color: #64748b !important; }
.on-dark [class*="bg-white/"] .text-slate-600 { color: #475569 !important; }
.on-dark [class*="bg-white/"] .text-slate-700 { color: #334155 !important; }
.on-dark [class*="bg-white/"] .text-slate-800 { color: #1e293b !important; }
.on-dark [class*="bg-white/"] .text-slate-900 { color: #0f172a !important; }

/* ============================================================
   MISC
   ============================================================ */

.animate-tick { will-change: transform; }

.cat-tab.active {
  border-color: var(--orange-500);
  background: var(--orange-500);
  color: #fff;
}

.bg-white::-webkit-scrollbar { height: 8px; }
.bg-white::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

::selection { background: var(--orange-500); color: #fff; }

.prose strong { color: var(--forest-900); }
.prose a      { color: var(--orange-600); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   MOBILE/TABLET TUNING
   ============================================================ */

@media (max-width: 640px) {
  .glass, .glass-soft { box-shadow: 0 6px 18px -10px rgba(0,0,0,0.4); }
  .hero-section       { background-attachment: scroll; }
  .bg-mesh            { background-attachment: scroll; }
}