/* =====================================================================
   ISLAMIC RELIEF KENYA — DONATION WIZARD
   donation_wizard.css  — Updated per IRK_Donation_System_Guide_v2.pdf
===================================================================== */

@import url(fonts.css);

/* ── DESIGN TOKENS ────────────────────────────────────────────────── */
:root {
  --irk-green:        #0778D4;
  --irk-green-dark:   #1d507a;
  --irk-green-light:  #fcfeff;
  --irk-green-mid:    #3b8aca;
  --irk-gold:         #c8922a;
  --irk-gold-light:   #fdf3e3;
  --irk-red:          #c0392b;
  --text-primary:     #222222;
  --text-secondary:   #8d97a0;
  --text-muted:       #889097;
  --text-light:       #b0bdb3;
  --bg-page:          #ffffff;
  --bg-card:          #f2f3f4;
  --bg-soft:          #f0f4f1;
  --bg-c:             #a91f21;
  --border:           #dde8df;
  --shadow-sm:        0 1px 4px rgba(26,122,60,.08);
  --shadow-md:        0 4px 20px rgba(26,122,60,.12);
  --shadow-lg:        0 12px 48px rgba(26,122,60,.18);
  --radius-sm:        6px;
  --radius-md:        0px;
  --radius-lg:        18px;
  --radius-xl:        24px;
  --font-display: 'Geogrotesque', system-ui, -apple-system, sans-serif;
  --font-body:    'Geogrotesque', system-ui, -apple-system, sans-serif;
  --step-size:        40px;
  --wizard-max:       780px;
  --wizard-step-max:  680px;
  --transition:       .22s cubic-bezier(.4, 0, .2, 1);
}

/* === Font Rendering Fix === */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Remove italic from headings if using *text* in markdown */
h1 em, h2 em, h3 em {
  font-style: normal;
}

/* ── RESET ────────────────────────────────────────────────────────── */
.wiz-page *, .wiz-page *::before, .wiz-page *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── PAGE WRAPPER ─────────────────────────────────────────────────── */
.wiz-page {
  font-family: var(--font-display);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  padding-bottom: 60px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 8 — IDLE OVERLAY ("Still with us?")
   IRK logo at top, NOT mosque emoji
   Continue left (white/blue border), Main Site right (filled blue)
══════════════════════════════════════════════════════════════════════ */
.return-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.return-overlay.visible {
  display: flex;
  animation: wiz-fadeIn .25s ease;
}
.return-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 32px 32px;
  max-width: 420px;
  width: 92%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: wiz-slideUp .3s cubic-bezier(.34,1.56,.64,1);
}
.rc-logo             { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.rc-logo-img         { max-width: 130px; height: auto; object-fit: contain; }
.return-card h3      { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 8px; color: var(--text-primary); }
.return-card p       { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; margin-bottom: 24px; }
.return-btns         { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Left: white bg, blue border/text */
.return-btns .rc-keep {
  padding: 10px 22px; border-radius: var(--radius-md);
  border: 2px solid var(--irk-green); background: #fff; color: var(--irk-green);
  font-family: var(--font-display); font-weight: 600; cursor: pointer; font-size: .9rem;
  transition: var(--transition);
}
.return-btns .rc-keep:hover { background: var(--irk-green-light); }
/* Right: filled IRK Blue, white text */
.return-btns .rc-back {
  padding: 10px 22px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--irk-green);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  -webkit-transition: var(--transition);
  -moz-transition: var(--transition);
  -ms-transition: var(--transition);
  -o-transition: var(--transition);
}
.return-btns .rc-back:hover { background: var(--irk-green-dark); }

.pay-method-mpesa {
    border-color: var(--irk-green);
    background: #f0f8ff;
    font-weight: 600;
}
/* ══════════════════════════════════════════════════════════════════════
   STEPPER — Section 2 design rules
   Labels always visible including mobile (user request + PDF spec)
══════════════════════════════════════════════════════════════════════ */
.stepper-outer {
  max-width: var(--wizard-step-max);
  margin: 0 auto;
  padding: 28px 0 0;
}
.stepper {
  display: flex;
  align-items: flex-start;  /* flex-start so labels don't misalign on mobile */
  margin: 0 20px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.step-circle {
  width: var(--step-size);
  height: var(--step-size);
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
/* Labels BELOW circles — Section 2 design rules */
.step-label {
  font-size: 0.72rem;       /* default desktop */
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .05em;
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
  display: block;           /* always shown */
}
.step.active .step-circle { background: var(--irk-green); border-color: var(--irk-green); color: #fff; box-shadow: 0 0 0 5px rgba(7,120,212,.15); }
.step.active .step-label  { color: var(--irk-green); font-weight: 700; }
.step.done  .step-circle  { background: var(--irk-green-light); border-color: var(--irk-green); color: var(--irk-green); }
.step.done  .step-label   { color: #222; }
.step.done:hover  .step-circle,
.step.active:hover .step-circle { transform: scale(1.08); }

/* Connector line — always visible including mobile */
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 20px 4px 0;  /* align with circle centre */
  border-radius: 2px;
  transition: background .4s ease;
  align-self: flex-start;
  margin-top: 19px;  /* half of step-size = 40/2 - 1px border */
}
.step-line.done { background: var(--irk-green); }

/* ── MOBILE STEPPER (step labels + lines always shown) ───────── */
@media (max-width: 520px) {
  .stepper-outer { padding: 18px 10px 0; }
  .stepper       { margin: 0 4px; }
  .step-label {
    display: block !important;   /* NEVER hide labels */
    font-size: 0.58rem !important;
    letter-spacing: .01em;
  }
  .step-circle {
    width: 32px;
    height: 32px;
    font-size: .78rem;
  }
  :root { --step-size: 32px; }
  .step-line { margin-top: 15px; } /* recalc for 32px circle */
}
@media (max-width: 360px) {
  .step-label { font-size: 0.52rem !important; }
}

/* ── WIZARD OUTER ─────────────────────────────────────────────────── */
.wiz-outer {
  max-width: var(--wizard-max);
  margin: 0 auto;
  padding: 20px 20px 40px;
}

/* ── PANEL ────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-top: 20px;
  animation: wiz-panelIn .28s cubic-bezier(.4,0,.2,1);
}
.panel-head { padding: 28px 28px 0; }
.panel-body { padding: 20px 28px; }
.panel-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 2.0rem;
  text-align: center;
  line-height: 1.2;
  color: var(--irk-green);
  margin-bottom: .5rem;
}
.panel-title em { color: var(--irk-green); font-style: normal; font-weight: 900; }

/* ── STEP 1 — FREQUENCY (Section 2.1) ───────────────────────────── */
.impact-photos { width: 100%; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; }
.impact-photo  { width: 100%; height: auto; max-height: 420px; object-fit: cover; display: block; border-radius: inherit; transition: transform .4s ease; }
.impact-photo:hover { transform: scale(1.02); }
@media (max-width: 520px) { .impact-photo { max-height: 240px; } }

/* Section 2.1: MONTHLY filled blue (pre-selected), ONE-OFF white/blue border */
.dtype-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.dtype-btn {
  width: 200px;
  padding: 6px 15px;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  text-align: center;
  margin-bottom: 10px;
  border: 1px solid #0778D4;
}
.dtype-btn:hover  { border-color: var(--irk-green); color: var(--bg-page); background: var(--irk-green); }
.dtype-btn.active { border-color: var(--irk-green); background: var(--irk-green); color: #fff; box-shadow: var(--shadow-md); }
.dtype-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(7,120,212,.25); }

/* ── STEP 2 — FUND SELECTION (Section 3.1 & 3.5) ────────────────── */
/* Section 3.1: 2-column grid */
.s2-fund-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.s2-fund-cell {
  padding: 13px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.35;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
}
/* Section 3.1: selected = filled IRK Blue bg, white text */
.s2-fund-cell:hover  { border-color: var(--irk-green); color: var(--bg-page); background: var(--irk-green); transform: translateY(-1px); }
.s2-fund-cell.active { border-color: var(--irk-green); background: var(--irk-green); color: #fff; box-shadow: var(--shadow-sm); }

/* Amount section */
.amount-section     { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.fund-selected-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--irk-green-light);
  border: 1px solid rgba(26,122,60,.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: .85rem;
  color: var(--irk-green);
  font-weight: 600;
  -webkit-border-radius: var(--radius-md);
  -moz-border-radius: var(--radius-md);
  -ms-border-radius: var(--radius-md);
  -o-border-radius: var(--radius-md);
}
.s2-section-label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.s2-amt-row       { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-bottom:10px; }
.s2-amt-btn       { padding:13px 8px; border-radius:var(--radius-md); border:2px solid var(--border); background:#fff; cursor:pointer; font-family:var(--font-display); font-size:.84rem; font-weight:600; color:var(--text-secondary); transition:var(--transition); text-align:center; -webkit-border-radius:var(--radius-md); -moz-border-radius:var(--radius-md); -ms-border-radius:var(--radius-md); -o-border-radius:var(--radius-md); }
.s2-amt-btn:hover  { border-color:var(--irk-green); color:var(--irk-green); background:var(--irk-green-light); }
.s2-amt-btn.active { border-color:var(--irk-green); background:var(--irk-green); color:#fff; }
.s2-amt-btn.other-btn { font-size:.76rem; letter-spacing:.06em; color:var(--text-muted); }
.s2-custom-wrap  { display:none; margin-bottom:10px; animation:wiz-panelIn .2s ease; }
.s2-custom-group { display:flex; align-items:center; border:2px solid var(--irk-green); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.s2-custom-pfx   { padding:0 14px; background:var(--irk-green-light); color:var(--irk-green); font-weight:700; font-size:.9rem; border-right:2px solid var(--irk-green); height:48px; display:flex; align-items:center; flex-shrink:0; }
.s2-custom-input { flex:1; border:none; outline:none; padding:0 14px; font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--text-primary); background:#fff; height:48px; min-width:0; }
.s2-impact       { font-size:.8rem; color:var(--irk-green); font-weight:500; min-height:20px; margin-bottom:8px; }
.s2-add-cart-btn { width:100%; padding:14px; background:var(--bg-c); color:var(--bg-page); border:2px solid var(--bg-page); border-radius:var(--radius-md); font-family:var(--font-display); font-size:.92rem; font-weight:700; letter-spacing:.05em; cursor:pointer; transition:var(--transition); margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; }
.s2-add-cart-btn:hover:not(:disabled) { background:var(--bg-c); color:#fff; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.s2-add-cart-btn:disabled { opacity:.6; cursor:not-allowed; }
.cart-added-notice { display:none; align-items:center; gap:8px; background:#e8f5ec; border:1px solid #a5d6b5; border-radius:var(--radius-md); padding:10px 14px; font-size:.83rem; color:var(--irk-green); font-weight:600; margin-top:10px; }
.cart-chip-strip { display:none; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.cart-chip { display:inline-flex; align-items:center; gap:6px; background:var(--irk-green-light); border:1px solid rgba(26,122,60,.3); border-radius:20px; padding:4px 10px 4px 12px; font-size:.76rem; font-weight:600; color:var(--irk-green); }
.cart-chip button { background:none; border:none; cursor:pointer; color:var(--irk-green); padding:0; display:flex; align-items:center; font-size:.72rem; opacity:.7; }
.cart-chip button:hover { opacity:1; }

/* Section 3.4: Nav bar — BACK | scroll hint (red italic, centre) | NEXT */
.wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  gap: 8px;
}
.wiz-nav.no-border { border-top: none; padding-top: 0; }
/* Section 3.4: scroll hint — red, italic, centre */
.nav-scroll-hint {
  font-size: .73rem;
  color: #c0392b;
  font-style: italic;
  text-align: center;
  flex: 1;
  padding: 0 6px;
  line-height: 1.4;
}
.btn-back {
 background: #fff;
  line-height: normal;
  color: #a7a7a7;
  font-size: 26px;
  border-radius: 0px;
  text-transform: uppercase;
  padding: 4px 10px;
}
.btn-back:hover { border-color: var(--irk-green); color: var(--irk-green); background: #a7a7a7; }
.btn-next {
  background: var(--irk-green);
  line-height: normal;
  color: #ffffff;
  font-size: 26px;
  border-radius: 0px;
  text-transform: uppercase;
  padding: 4px 10px;
}
.btn-next:hover { background: var(--irk-green-dark); border-color: var(--irk-green-dark); transform: translateY(-1px); }

/* Section 3.4: error if no fund selected */
.step2-error-msg {
  display: none;
  background: #fef0ee; border: 1.5px solid #f5c6c2;
  color: var(--irk-red); font-size: .85rem; font-weight: 600;
  padding: 10px 16px; border-radius: 8px;
  margin: 0 28px 16px; text-align: center;
}

/* ── STEP 3 — YOUR DETAILS (Section 4) ──────────────────────────── */
.val-banner { display:none; align-items:center; gap:8px; background:#fef0ee; border:1px solid #f5c6c2; color:var(--irk-red); border-radius:var(--radius-md); padding:10px 14px; font-size:.83rem; font-weight:600; margin:0 28px 12px; }
.summary-strip { margin:0 28px 4px; background:var(--irk-green-light); border-radius:var(--radius-md); padding:10px 16px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; }
.summary-strip-label  { font-size:.8rem;  color:var(--irk-green); font-weight:600; }
.summary-strip-amount { font-size:.9rem;  font-weight:700; color:var(--irk-green); }
.form-grid-3 { display:grid; grid-template-columns:1fr 1.6fr 1.6fr; gap:12px; margin-bottom:12px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.form-full   { margin-bottom:12px; }
.f-label     { display:block; font-size:.74rem; font-weight:700; color:var(--text-secondary); letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px; }
.req         { color:var(--irk-red); }
.opt, .f-hint{ color:var(--text-muted); font-weight:400; text-transform:none; }
.f-input, .f-select { width:100%; padding:10px 13px; border:2px solid var(--border); border-radius:var(--radius-md); font-family:var(--font-display); font-size:.88rem; color:var(--text-primary); background:#fff; outline:none; transition:var(--transition); appearance:none; -webkit-appearance:none; }
.f-input:focus, .f-select:focus { border-color:var(--irk-green); box-shadow:0 0 0 3px rgba(26,122,60,.1); }
.f-input.err, .f-select.err    { border-color:var(--irk-red);   box-shadow:0 0 0 3px rgba(192,57,43,.1);  }
textarea.f-input { resize:vertical; min-height:66px; }
.country-select-wrap { position:relative; }
.country-chevron    { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; transition:transform .2s; font-size:.8rem; }
.country-chevron.open { transform:translateY(-50%) rotate(180deg); }
.country-dropdown   { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:2px solid var(--irk-green); border-radius:var(--radius-md); box-shadow:var(--shadow-md); z-index:200; max-height:200px; overflow-y:auto; display:none; flex-direction:column; }
.country-opt        { padding:9px 14px; font-family:var(--font-display); font-size:.87rem; cursor:pointer; transition:background .15s; }
.country-opt:hover, .country-opt.selected { background:var(--irk-green-light); color:var(--irk-green); font-weight:600; }
.kip-section { background:var(--bg-soft); border-radius:var(--radius-md); padding:14px 16px; margin-top:4px; }
.kip-title   { font-size:.82rem; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.kip-check   { display:flex; align-items:flex-start; gap:9px; cursor:pointer; font-family:var(--font-display); font-size:.82rem; color:var(--text-secondary); }
.kip-check input[type="checkbox"] { accent-color:var(--irk-green); margin-top:2px; flex-shrink:0; width:15px; height:15px; }

/* ── STEP 4 — PAYMENT (Section 5) ───────────────────────────────── */
.co-section-label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.co-loading { display:flex; align-items:center; gap:10px; padding:20px 0; color:var(--text-muted); font-size:.88rem; }
.co-spinner { width:20px; height:20px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--irk-green); animation:wiz-spin .8s linear infinite; flex-shrink:0; }
.co-empty   { text-align:center; padding:24px 0; color:var(--text-muted); font-size:.9rem; }
.co-empty a { color:var(--irk-green); }
.co-table   { width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:4px; }
.co-table th { text-align:left; padding:8px 10px 6px; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); }
.co-table td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.co-cause-name { font-weight:600; color:var(--text-primary); }
.co-type-badge { display:inline-block; padding:2px 8px; border-radius:20px; background:var(--irk-green-light); color:var(--irk-green); font-size:.7rem; font-weight:700; }
.co-amount     { font-weight:600; color:var(--text-primary); }
.co-remove-btn { background:none; border:none; cursor:pointer; color:#ccc; padding:4px; border-radius:4px; transition:color .2s, background .2s; }
.co-remove-btn:hover { color:var(--irk-red); background:#fef0ee; }
.co-add-more   { padding:8px 2px 2px; text-align:right; }
.co-add-more a { font-size:.8rem; font-weight:600; color:var(--irk-green); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.co-add-more a:hover { text-decoration:underline; }

/* Cart summary card */
.checkout-summary-card { background:#fff;padding:16px 18px; margin-top:14px; box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid #e5e7eb; }
.summary-row           { display:flex; justify-content:space-between; font-size:.9rem; padding:6px 0; color:#374151; }
.summary-row small     { color:#6b7280; font-size:.75rem; }
.summary-divider       { height:1px; background:#e5e7eb; margin:10px 0; }
.summary-row.total     { font-size:1.05rem; font-weight:700; color:#111827; }
.summary-row.total span:last-child { color:#2e7d32; font-size:1.15rem; }

/* Monthly pay notice */
.monthly-pay-notice {
  display: none; align-items: flex-start; gap: 10px;
  background: #eff6ff; border: 1.5px solid #bfdbfe;
  border-radius: 10px; padding: 12px 14px;
  font-size: .85rem; color: #1d4ed8; line-height: 1.55;
  margin-top: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 5.2 — PAYMENT METHOD LIST
   Order: M-Pesa (1st) → Google Pay (2nd) → Apple Pay (3rd) →
          divider "Or donate with card" → Card (4th, red)
══════════════════════════════════════════════════════════════════════ */
.pay-method-list {
  display: flex; flex-direction: column; gap: 10px;
  margin: 12px 0 20px;
}
.pay-method-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  background: #fff;
  transition: border-color .16s, background .16s, box-shadow .16s;
  user-select: none;
  position: relative;
}
.pay-method-row:hover                    { border-color: var(--irk-green); background: var(--irk-green-light); }
.pay-method-row:has(input:checked)       { border-color: var(--irk-green); background: var(--irk-green-light); box-shadow: 0 0 0 3px rgba(7,120,212,.1); }
.pay-method-mpesa                        { border-color: var(--irk-green); background: #f0f8ff; }
.pay-method-row input[type="radio"]      { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.pay-method-radio-box {
  width: 20px; height: 20px;
  border: 2px solid #cbd5e0; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: border-color .16s, background .16s;
}
.pay-method-row:has(input:checked) .pay-method-radio-box { border-color: var(--irk-green); background: var(--irk-green); }
.pay-method-dot { width:8px; height:8px; background:#fff; opacity:0; transition:opacity .14s; }
.pay-method-row:has(input:checked) .pay-method-dot { opacity:1; }
.pay-method-logo { width:52px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pay-method-logo img { max-width:52px; max-height:36px; object-fit:contain; }
.mpesa-logo-wrap, .apay-logo-wrap { width:60px; }
.mpesa-text-fallback { display:flex; align-items:center; gap:4px; font-size:.9rem; }
.pay-method-info { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pay-method-name { font-size:.93rem; font-weight:700; color:#1a202c; line-height:1.2; }
.pay-method-row:has(input:checked) .pay-method-name { color:var(--irk-green-dark); }
.pay-method-sub  { font-size:.75rem; color:#718096; }
.pay-method-primary-badge { background:var(--irk-green); color:#fff; font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:20px; flex-shrink:0; }

/* Section 5.2 divider: "Or donate with card" */
.pay-method-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0; color: #a0aec0; font-size: .8rem; font-weight: 500;
}
.pay-method-divider::before, .pay-method-divider::after { content:""; flex:1; height:1px; background:#e2e8f0; }

/* Section 5.1: Card row — red (Section 10.1 Red #C0392B) */
.pay-method-card-row                      { border-color: #c0392b22; }
.pay-method-card-row:hover,
.pay-method-card-row:has(input:checked)   { border-color: #c0392b; background: #fff5f5; box-shadow: 0 0 0 3px rgba(192,57,43,.08); }
.pay-method-card-row:has(input:checked) .pay-method-name         { color: #c0392b; }
.pay-method-card-row:has(input:checked) .pay-method-radio-box    { border-color: #c0392b; background: #c0392b; }
.pay-method-card-row:has(input:checked) .pay-method-dot          { opacity: 1; }

/* M-Pesa phone input */
.mpesa-phone-row    { display:flex; align-items:center; border:2px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:#fff; transition:var(--transition); margin-bottom:6px; }
.mpesa-phone-row:focus-within { border-color:var(--irk-green); box-shadow:0 0 0 3px rgba(26,122,60,.1); }
.mpesa-pfx          { padding:0 14px; background:var(--irk-green-light); color:var(--irk-green); font-weight:700; font-size:.85rem; border-right:2px solid var(--border); height:48px; display:flex; align-items:center; white-space:nowrap; flex-shrink:0; }
.mpesa-num          { flex:1; border:none; outline:none; padding:0 14px; font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--text-primary); height:48px; letter-spacing:.06em; background:#fff; min-width:0; }
.mpesa-hint         { font-size:.73rem; color:var(--text-muted); margin-top:.25rem; }
.integration-notice { display:flex; align-items:center; gap:10px; background:#f9f9f9; border:1px dashed #ccc; border-radius:var(--radius-md); padding:14px; font-size:.83rem; color:var(--text-muted); }

/* Section 2.2 Monthly + Card authorisation */
.recurring-auth-box {
  background:#fffbeb; border:1.5px solid #f6d860;
  border-radius:10px; padding:14px 16px; margin-bottom:14px;
}
.recurring-auth-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.87rem; color:#4a5568; line-height:1.6; }
.recurring-auth-label input[type="checkbox"] { accent-color:var(--irk-green); width:16px; height:16px; margin-top:3px; flex-shrink:0; }
.recurring-auth-label strong { color:#1a202c; }

/* UC widget */
.uc-widget-container { min-height:260px; margin-top:16px; }
.uc-status-box { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:8px; font-size:.88rem; margin-top:14px; line-height:1.4; }
.uc-status-loading, .uc-status-processing { background:#eff6ff; border:1.5px solid #bfdbfe; color:#1d4ed8; }
.uc-status-error   { background:#fff5f5;  border:1.5px solid #feb2b2; color:#c53030; }
.uc-status-success { background:#f0fff4;  border:1.5px solid #9ae6b4; color:#276749; }
.uc-spinner { width:18px; height:18px; flex-shrink:0; border:3px solid rgba(29,78,216,.22); border-top-color:#1d4ed8; border-radius:50%; animation:wiz-spin 1s linear infinite; }

/* Fee cover */
.fee-cover-card { background:#fffbf0; border:1.5px solid #f6d860;padding:14px 16px; margin-top:12px; display:none; -webkit-border-radius:10p ; -moz-border-radius:10p ; -ms-border-radius:10p ; -o-border-radius:10p ; }
.fee-checkbox-label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; user-select:none; }
.fee-checkbox-wrap  { position:relative; flex-shrink:0; margin-top:1px; }
.fee-checkbox-wrap input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.fee-checkbox-box   { width:22px; height:22px; border-radius:5px; border:2px solid #cbd5e0; background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; }
.fee-checkbox-wrap input:checked + .fee-checkbox-box { border-color:#2e7d32; background:#2e7d32; }
.fee-checkbox-tick  { color:#fff; font-size:.85rem; opacity:0; transition:opacity .12s; }
.fee-checkbox-wrap input:checked + .fee-checkbox-box .fee-checkbox-tick { opacity:1; }
.fee-checkbox-text  { font-size:.88rem; color:#4a5568; line-height:1.55; }
.fee-checkbox-text strong { color:#1a202c; }

/* Section 5.1 Donate Now button */
.donate-now-btn {
  width:100%; padding:16px; background:var(--irk-green); border:none; border-radius:var(--radius-md);
  color:#fff; font-family:var(--font-display); font-size:1.1rem; font-weight:700; cursor:pointer;
  transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--shadow-md); margin-top:18px;
}
.donate-now-btn:hover:not(:disabled) { background:var(--irk-green-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.donate-now-btn:disabled { opacity:.65; cursor:not-allowed; }

/* STK UI */
.stk-pending-wrap  { text-align:center; padding:40px 20px 32px; max-width:460px; margin:0 auto; }
.stk-pulse-icon    { font-size:4.5rem; color:var(--irk-green); margin-bottom:16px; display:inline-block; animation:stkPulse 1.4s ease-in-out infinite; }
@keyframes stkPulse { 0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.15);opacity:.75;} }
.stk-heading       { font-family:var(--font-display); font-size:1.7rem; margin-bottom:12px; }
.stk-subtext       { font-size:.93rem; line-height:1.75; color:var(--text-secondary); margin-bottom:20px; }
.stk-phone         { color:var(--text-primary); font-size:1.05rem; }
.stk-amount        { color:var(--irk-green); }
.stk-status-box    { display:flex; align-items:center; justify-content:center; gap:10px; background:#f0f9f0; border:1.5px solid #c6e9c6; border-radius:10px; padding:12px 16px; margin:0 auto 16px; max-width:340px; font-size:.88rem; color:#2d6a2d; }
.stk-spinner       { width:20px; height:20px; border:3px solid #b2d8b2; border-top-color:var(--irk-green); border-radius:50%; animation:wiz-spin 1s linear infinite; flex-shrink:0; }
.stk-ref-box       { font-size:.82rem; color:var(--text-muted); margin-bottom:16px; }
.stk-receipt-box   { background:#f0fff4; border:1.5px solid #9ae6b4; border-radius:10px; padding:14px 18px; margin:0 auto 20px; max-width:360px; }
.stk-receipt-inner { display:flex; align-items:flex-start; gap:12px; text-align:left; }
.receipt-row       { display:flex; justify-content:space-between; gap:12px; font-size:.87rem; padding:4px 0; border-bottom:1px dashed #c6f6d5; }
.receipt-row:last-child { border-bottom:none; }
.receipt-row span  { color:var(--text-muted); }
.stk-error-box     { background:#fff5f5; border:1.5px solid #feb2b2; border-radius:10px; padding:14px 18px; margin:0 auto 20px; max-width:380px; }
.stk-error-title   { font-weight:700; font-size:.97rem; color:#c53030; margin-bottom:6px; }
.stk-error-message { font-size:.88rem; color:#742a2a; margin-bottom:4px; }
.stk-error-hint    { font-size:.83rem; color:#9b2c2c; font-style:italic; }
.stk-error-code    { font-size:.76rem; color:#a0aec0; margin-top:6px; }
.stk-confirm-btn   { display:inline-flex; align-items:center; gap:8px; margin-top:28px; padding:14px 40px; font-size:1rem; font-family:var(--font-display); font-weight:700; background:var(--irk-green); color:#fff; border:none; border-radius:var(--radius-md); cursor:pointer; box-shadow:0 4px 14px rgba(46,125,50,.3); transition:background .2s; }
.stk-confirm-btn:hover { background:#1b5e20; }
.stk-retry-wrap    { margin:20px auto 0; padding:16px; background:#fffbeb; border:1.5px solid #fbd38d; border-radius:10px; max-width:360px; }
.stk-retry-btn     { display:inline-flex; align-items:center; gap:8px; padding:11px 28px; font-size:.92rem; font-weight:700; background:#dd6b20; color:#fff; border:none; border-radius:8px; cursor:pointer; }
.stk-retry-btn:hover    { background:#c05621; }
.stk-retry-btn:disabled { opacity:.6; cursor:not-allowed; }
.stk-retry-hint    { font-size:.79rem; color:#744210; margin-top:8px; margin-bottom:0; }
.stk-back-link     { font-size:.8rem; color:var(--text-muted); text-decoration:none; }
.stk-back-link:hover { color:var(--irk-green); }
.stk-wrapper       { display:flex; align-items:center; justify-content:center; padding:14px; }
.stk-content       { width:100%; max-width:520px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; animation:wiz-panelIn .3s ease; }
/* M-Pesa Ratiba notice (Section 2.2 monthly flow) */
.ratiba-notice {
  display:flex; align-items:flex-start; gap:12px;
  background:#e8f5e9; border:1.5px solid #a5d6a7;
  border-radius:10px; padding:14px 16px;
  font-size:.87rem; color:#1b5e20; line-height:1.6;
  margin-top:20px; text-align:left; width:100%;
}
.ratiba-notice i { font-size:1.2rem; flex-shrink:0; margin-top:2px; }

/* ── FOOTER (Section 10.3) ────────────────────────────────────────── */
.wiz-footer { margin-top:40px; padding:40px 20px 34px; text-align:center; background:#fff; color:var(--text-muted); }
.wiz-footer a { color:var(--irk-green); text-decoration:none; font-weight:600; }
.wiz-footer a:hover { text-decoration:underline; }

/* ── CATEGORY MODAL ───────────────────────────────────────────────── */
.cat-modal-overlay { display:none; position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,.5); align-items:center; justify-content:center; padding:16px; }
.cat-modal-overlay.open { display:flex; animation:wiz-fadeIn .2s ease; }
.cat-modal-box { background:#fff; border-radius:var(--radius-xl); width:100%; max-width:460px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:wiz-slideUp .25s cubic-bezier(.34,1.56,.64,1); }
.cat-modal-header { display:flex; justify-content:space-between; align-items:flex-start; padding:20px 20px 12px; border-bottom:1px solid var(--border); }
.cat-modal-title-row { display:flex; align-items:center; gap:10px; }
.cat-modal-icon-wrap { width:36px; height:36px; border-radius:50%; background:var(--irk-green-light); display:flex; align-items:center; justify-content:center; color:var(--irk-green); font-size:1rem; flex-shrink:0; }
.cat-modal-title { font-family:var(--font-display); font-size:1.15rem; color:var(--text-primary); }
.cat-modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:1rem; padding:4px 6px; border-radius:4px; }
.cat-modal-close:hover { color:var(--text-primary); }
.cat-modal-body { padding:16px 20px; }
.cat-modal-desc { font-size:.88rem; color:var(--text-secondary); line-height:1.6; margin-bottom:14px; }
.cat-progress-labels { display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-muted); margin-bottom:5px; }
.cat-progress-raised { font-weight:700; color:var(--irk-green); }
.cat-progress-bar-bg   { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.cat-progress-bar-fill { height:100%; background:var(--irk-green); border-radius:3px; transition:width .6s ease; }
.cat-progress-pct      { font-size:.72rem; text-align:right; color:var(--text-muted); margin-top:4px; }
.cat-modal-footer { display:flex; gap:10px; padding:12px 20px 20px; border-top:1px solid var(--border); }
.btn-modal-donate { flex:1; padding:11px; border-radius:var(--radius-md); background:var(--irk-green); border:none; color:#fff; font-family:var(--font-display); font-weight:700; cursor:pointer; font-size:.88rem; display:flex; align-items:center; justify-content:center; gap:6px; }
.btn-modal-donate:hover { background:var(--irk-green-dark); }
.btn-modal-close-footer { padding:11px 18px; border-radius:var(--radius-md); border:2px solid var(--border); background:#fff; color:var(--text-secondary); font-family:var(--font-display); font-weight:600; cursor:pointer; font-size:.88rem; }
.btn-modal-close-footer:hover { border-color:var(--irk-green); color:var(--irk-green); }

/* ── KEYFRAMES ────────────────────────────────────────────────────── */
@keyframes wiz-panelIn { from{opacity:0;transform:translateY(10px);}  to{opacity:1;transform:translateY(0);} }
@keyframes wiz-fadeIn  { from{opacity:0;}                              to{opacity:1;} }
@keyframes wiz-slideUp { from{opacity:0;transform:translateY(28px);}  to{opacity:1;transform:translateY(0);} }
@keyframes wiz-spin    { to{transform:rotate(360deg);} }

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 680px) {
  :root { --wizard-max: 100%; }
  .stepper-outer, .wiz-outer { padding-left:14px; padding-right:14px; }
  .panel-head  { padding:22px 20px 0; }
  .panel-body  { padding:16px 20px; }
  .wiz-nav     { padding:14px 20px 20px; }
  .val-banner, .summary-strip { margin-left:20px; margin-right:20px; }
  .s2-fund-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
}

@media (max-width: 520px) {
  .stepper-outer, .wiz-outer { padding-left:12px; padding-right:12px; }
  /* Step labels always shown on mobile — override nothing */
  .step-label { display:block !important; font-size:.58rem !important; }
  .panel-head  { padding:18px 16px 0; }
  .panel-body  { padding:14px 16px; }
  .wiz-nav     { padding:12px 16px 18px; }
  .val-banner, .summary-strip, .step2-error-msg { margin-left:16px; margin-right:16px; }
  .panel-title { font-size:1.45rem; text-align:center; }
  .impact-photos { grid-template-columns:repeat(2,1fr); }
  .form-grid-3 { grid-template-columns:1fr 1fr; }
  .form-grid-3 > :first-child { grid-column:1/-1; }
  .form-grid-2 { grid-template-columns:1fr; }
  .s2-fund-grid { grid-template-columns:1fr; }
  .s2-fund-cell { width:100%; text-align:center; justify-content:center; padding:16px 14px; font-size:.9rem; }
  .s2-amt-row   { grid-template-columns:repeat(3,1fr); }
  .dtype-row    { display:grid !important; grid-template-columns:1fr !important; gap:12px; }
  .dtype-btn    { width:100%; padding:16px 12px; font-size:.9rem; text-align:center; justify-content:center; }
  .btn-back, .btn-next { font-size: 26px;
  border-radius: 0px;
  text-transform: uppercase;
  padding: 4px 10px;
} }
  .nav-scroll-hint { font-size:.64rem; }
  .co-table th:nth-child(2), .co-table td:nth-child(2) { display:none; }
  .pay-method-row  { padding:12px 12px; gap:10px; }
  .pay-method-name { font-size:.84rem; }
  .pay-method-primary-badge { display:none; }
}

@media (max-width: 768px) {
  .s2-fund-grid { display:flex !important; flex-direction:column; }
  #amtRow { display:flex; flex-direction:column; }
  .s2-amt-btn { width:100%; }
  #customWrap input { width:100%; }
  .co-table thead { display:none; }
  .co-table tr  { display:block; background:#fff; margin-bottom:12px; padding:14px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
  .co-table td  { display:flex; justify-content:space-between; font-size:.9rem; padding:4px 0; }
}

@media (max-width: 360px) {
  .pay-method-sub { display:none; }
  .s2-amt-row { grid-template-columns:repeat(2,1fr); }
}