/* ============================================================================
   Pay.TechDreamAfrica.org — custom styles layered on top of Tailwind CDN.
   No gradients anywhere, by design — solid brand colors only, matching the
   flat, confident look of techdreamafrica.org.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); }

/* ---------------------------------------------------------------- Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* ------------------------------------------------------------ Announcement */
.announcement-bar { background: #0B5C56; } /* solid, darker primary */
.dark .announcement-bar { background: #083F3B; }

/* ------------------------------------------------------------------- Hero */
/* Solid overlay on a photo, not a mesh/gradient — matches the real site's
   single-tone dark overlay over a background photograph. */
.hero-photo { position: relative; background-color: #0F172A; }
.hero-photo::before {
  content: '';
  position: absolute; inset: 0;
  background-color: rgba(15, 23, 42, 0.72); /* flat dark overlay, no gradient */
}
.hero-photo > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------- Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------- Animations */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.animate-pulse-dot { animation: pulse-dot 1.4s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 1.6s linear infinite; }

/* -------------------------------------------------------- Provider badges */
/* Flat solid-color chips referencing (not reproducing) provider branding —
   plain text on a solid tint, no logos, no gradients. */
.badge-mtn { background: #FFF4CC; color: #7A5D00; }
.dark .badge-mtn { background: #4A3B00; color: #FFE38A; }
.badge-telecel { background: #FDE1E4; color: #A3121D; }
.dark .badge-telecel { background: #4A1418; color: #FCA5AC; }
.badge-airteltigo { background: #E1EEFD; color: #0B4A8F; }
.dark .badge-airteltigo { background: #0B2A4A; color: #93C5FD; }
.badge-visa { background: #E7E9F5; color: #1A237E; }
.dark .badge-visa { background: #1B1F3B; color: #C5CAE9; }
.badge-mastercard { background: #FDEBE1; color: #9A3412; }
.dark .badge-mastercard { background: #4A2410; color: #FDBA74; }

/* ---------------------------------------------------------------- Kanban-like status rail */
.pipeline-rail { position: relative; }
.pipeline-rail::before {
  content: '';
  position: absolute; left: 15px; top: 0; bottom: 0; width: 2px;
  background: #CBD5E1; /* solid, no gradient */
}
.dark .pipeline-rail::before { background: #334155; }

/* --------------------------------------------------------------- Focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ Print (receipts) */
@media print {
  body * { visibility: hidden; }
  #receipt-card, #receipt-card * { visibility: visible; }
  #receipt-card { position: absolute; top: 0; left: 0; width: 100%; }
  .no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}