/* ============================================================
 * HORIZON — Sadaqah page
 * ------------------------------------------------------------
 * Everything reusable (page-hero, .section, .btn, .stat-number
 * typography, geo-pattern backgrounds) lives in styles.css /
 * islamic-design.css already and is untouched here. This file only
 * covers the one thing unique to this page: the live running total.
 * ============================================================ */

.sadaqah-total-section { text-align: center; }

.sadaqah-total-card {
  max-width: 640px; margin: 0 auto;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  position: relative; overflow: hidden;
}
.sadaqah-total-card::before {
  /* thin gold rule across the top — same "premium card" treatment used
     elsewhere on the site, kept subtle rather than decorative-heavy */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}

.sadaqah-live-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--sp-4, 1rem);
}
.sadaqah-live-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #3DDC84; /* same "live" green used by the floating visitor counter */
  box-shadow: 0 0 0 0 rgba(61,220,132,.6);
}
@media (prefers-reduced-motion: no-preference) {
  .sadaqah-live-dot { animation: sadaqahLivePulse 2.2s ease-out infinite; }
  @keyframes sadaqahLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(61,220,132,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(61,220,132,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); }
  }
}

.sadaqah-total-value {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin-bottom: .6rem;
}
/* Brief scale-pulse whenever the total ticks up, so "live" is felt, not
   just stated — same technique as the floating visitor counter. */
.sadaqah-total-value.is-ticking { animation: sadaqahTick 420ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .sadaqah-total-value.is-ticking { animation: none; }
}
@keyframes sadaqahTick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.sadaqah-total-label { font-size: .95rem; font-weight: 600; color: var(--gray-600); }

.sadaqah-how-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 780px) {
  .sadaqah-how-grid { grid-template-columns: 1fr; }
}