/* ============================================================
   South Africa (ZA) Theme — Rainbow Nation: green / blue / red /
   gold / black Y-shape palette.
   Distinct from NG (green+orange), KE (dark red/black), GH (gold).
   Cool green-to-blue appbar, multi-band rainbow flagstrip, rounded
   rainbow chips. No external assets.
   ============================================================ */

:root {
  --brand: #007A4D;
  --brand2: #002395;
  --brand3: #005C3A;
  --bg: #eef3f1;
  --card: #ffffff;
  --ink: #122019;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #dfe9e6;
  color: var(--ink);
}

.app { background: #f5faf8; box-shadow: 0 0 40px rgba(0, 60, 90, 0.18); }

/* Flag strip: rainbow bands — red / white / green / black / blue */
.flagstrip {
  height: 9px;
  background: linear-gradient(
    to bottom,
    #DE3831 0 22%,
    #ffffff 22% 30%,
    #007A4D 30% 55%,
    #000000 55% 63%,
    #002395 63% 100%
  );
}

/* App bar: green -> deep blue (cool, rainbow Y vibe) */
.appbar {
  background: linear-gradient(150deg, #005C3A 0%, #007A4D 45%, #002395 100%);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 35, 149, 0.25);
}
.appbar .brand { letter-spacing: 0.5px; }
.appbar .brand .logo { border-radius: 8px; background: rgba(255, 255, 255, 0.2); }

.wallet-card { border-radius: 18px; background: rgba(255, 255, 255, 0.15); }
.wallet-card .acts a { color: #005C3A; }

/* Cards: large radius + multi-tone top border */
.card, .cat, .badge, .testi {
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(0, 60, 90, 0.08);
}
.card { border-top: 3px solid #007A4D; }
.cat { border-top: 3px solid #002395; }
.badge { border-bottom: 3px solid #DE3831; }

/* Buttons: green -> blue */
.btn {
  background: linear-gradient(135deg, #007A4D, #002395);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(0, 90, 70, 0.35);
  letter-spacing: 0.3px;
}
.btn.secondary { background: #e3ece8; color: #0a4a30; }

/* Promo: rainbow gradient banner */
.promo {
  background: linear-gradient(120deg, #DE3831 0%, #FCD116 50%, #007A4D 100%);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 90, 70, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

/* Chips: blue outline rounded pills */
.chip {
  color: #002395;
  border: 1.5px solid #007A4D;
  background: #e9f5ef;
  border-radius: 999px;
  font-weight: 800;
}

/* Stats bar: green -> blue */
.stats {
  background: linear-gradient(135deg, #007A4D, #002395);
  border-radius: 18px;
}

.howto .n { background: #007A4D; box-shadow: 0 3px 8px rgba(0, 122, 77, 0.35); }

.price { color: #007A4D; }
a { color: #007A4D; }

.tabbar { border-top: 2px solid #dde8e3; }
.tabbar a.on { color: #007A4D; }

.pill.g { background: #dcfce7; color: #166534; }