/* ============================================================
   Canada — Maple red, clean & friendly North-American style
   Deliberately distinct from USA.css (navy business) and UK.css (royal blue):
   Canada is red-dominant on white, soft rounded, friendly.
   No @import / no external fonts
   ============================================================ */

:root {
  --brand: #D80621;          /* maple leaf red */
  --brand2: #9c0418;
  --brand3: #f4f4f4;
  --bg: #fafafa;
  --card: #ffffff;
  --ink: #1b1b1b;
}

body {
  font-family: 'Segoe UI', -apple-system, Roboto, Arial, sans-serif;
  background: #f0f0f0;
  color: var(--ink);
}
.app { background: var(--bg); }

/* Flag strip: red-white-red vertical blocks (Canadian flag) */
.flagstrip {
  height: 6px;
  background: linear-gradient(to right,
    #D80621 0 18%, #ffffff 18% 82%, #D80621 82% 100%);
}

/* Appbar: clean red-to-deepred, big friendly rounded bottom */
.appbar {
  background: linear-gradient(160deg, #D80621 0%, #9c0418 100%);
  border-radius: 0 0 26px 26px;        /* big rounded bottom edge */
  padding: 14px 18px 22px;
}
.appbar .brand { letter-spacing: .2px; font-weight: 700; color: #fff; }
.appbar .brand .logo { border-radius: 12px; background: rgba(255,255,255,.2); }
.appbar .iconbtn { border-radius: 50%; background: rgba(255,255,255,.18); }

/* Wallet card: white frosted on red */
.wallet-card {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 18px;
}
.wallet-card .acts a { border-radius: 12px; background: #fff; color: var(--brand); }

/* Cards: very rounded, light shadow */
.card, .cat, .badge, .testi {
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(216,6,33,.08);
}
.card { background: var(--card); border: 1px solid #f0f0f0; }

/* Buttons: solid maple red, pill */
.btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #D80621, #b0051a);
  box-shadow: 0 6px 16px rgba(216,6,33,.3);
  font-weight: 600;
}
.btn.secondary { background: #eeeeee; color: var(--ink); box-shadow: none; }

/* Promo: white card with red side leaf-bar */
.promo {
  border-radius: 18px;
  background: linear-gradient(120deg, #ffffff 0%, #fdecee 60%, #fbd9de 100%);
  border-left: 5px solid var(--brand);
  box-shadow: 0 6px 18px rgba(216,6,33,.15);
  color: var(--ink);
}

/* Chips: pill, red tinted */
.chip { border-radius: 999px; border-color: #f3c2ca; color: var(--brand); background: #fff; }

/* Category grid */
.cat { border: 1px solid #f0f0f0; background: var(--card); }
.cat .nm { color: var(--ink); font-weight: 600; }

/* Stats: solid red */
.stats {
  background: var(--brand);
  border-radius: 18px;
}

/* Badges */
.badge { border: 1px solid #f0f0f0; background: #fff; }
.badge .b-t { color: var(--ink); }

/* Howto numbers: red circles */
.howto .n { border-radius: 50%; background: var(--brand); color: #fff; }

/* Price */
.price { color: var(--brand); font-weight: 700; }

/* Tabbar */
.tabbar { border-top: 1px solid #e8e8e8; background: #fff; }
.tabbar a.on { color: var(--brand); }
.tabbar a.on .ic { filter: none; }