{"id":365,"date":"2024-06-09T23:56:51","date_gmt":"2024-06-09T23:56:51","guid":{"rendered":"http:\/\/careox-demo.local\/?page_id=365"},"modified":"2026-05-14T21:03:24","modified_gmt":"2026-05-14T21:03:24","slug":"donate-now","status":"publish","type":"page","link":"https:\/\/amzealcreatives.com\/smartgirl\/donate-now\/","title":{"rendered":"Donate Now"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"365\" class=\"elementor elementor-365\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62cf893 e-con-full e-flex e-con e-parent\" data-id=\"62cf893\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3909d2 elementor-widget elementor-widget-shortcode\" data-id=\"d3909d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n\/* =========================================================\n   Smart Girl Donation Page\n   Premium | Step-by-Step | Responsive | Secure Paystack Flow\n========================================================= *\/\n\n.sg-donate-page {\n  --sg-pink: #e90a7d;\n  --sg-pink-dark: #bf0869;\n  --sg-purple: #3b0c63;\n  --sg-purple-dark: #24063f;\n  --sg-soft-pink: #fff3f9;\n  --sg-light-pink: #ffe7f3;\n  --sg-soft-purple: #f7effc;\n  --sg-text: #281733;\n  --sg-muted: #6a5974;\n  --sg-white: #ffffff;\n  --sg-border: rgba(233, 10, 125, 0.15);\n\n  position: relative;\n  overflow: hidden;\n  padding: clamp(52px, 7vw, 96px) clamp(14px, 4vw, 56px);\n  background:\n    radial-gradient(circle at 8% 10%, rgba(233, 10, 125, 0.10), transparent 28%),\n    radial-gradient(circle at 92% 82%, rgba(59, 12, 99, 0.08), transparent 34%),\n    linear-gradient(135deg, #ffffff 0%, #fff8fc 48%, #f8f1ff 100%);\n  color: var(--sg-text);\n  font-family: \"Inter\", \"Segoe UI\", Arial, sans-serif;\n}\n\n.sg-donate-page * {\n  box-sizing: border-box;\n}\n\n.sg-donate-wrap {\n  width: min(100%, 1240px);\n  margin: 0 auto;\n  position: relative;\n  z-index: 2;\n}\n\n\/* Focus mode behavior\n   Landing: form is hidden until donor clicks Start Donating.\n   Focus: only the step-by-step donation form is shown for a clean donation experience.\n   Success view: full content is shown again after successful payment verification. *\/\n.sg-donate-page.sg-donate-landing .sg-donate-hero {\n  grid-template-columns: minmax(0, 880px);\n  justify-content: center;\n  text-align: center;\n}\n\n.sg-donate-page.sg-donate-landing .sg-donate-copy {\n  margin: 0 auto;\n}\n\n.sg-donate-page.sg-donate-landing .sg-donate-panel {\n  display: none;\n}\n\n.sg-donate-page.sg-donate-focus {\n  min-height: 100svh;\n  padding-top: clamp(32px, 5vw, 64px);\n}\n\n.sg-donate-page.sg-donate-focus .sg-donate-copy,\n.sg-donate-page.sg-donate-focus .sg-donate-trust {\n  display: none !important;\n}\n\n.sg-donate-page.sg-donate-focus .sg-donate-hero {\n  grid-template-columns: minmax(0, 900px);\n  justify-content: center;\n  align-items: start;\n}\n\n.sg-donate-page.sg-donate-focus .sg-donate-panel {\n  width: min(100%, 900px);\n  margin: 0 auto;\n}\n\n.sg-donate-page.sg-donate-success-view .sg-donate-hero {\n  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);\n}\n\n.sg-donate-page.sg-donate-success-view .sg-donate-copy,\n.sg-donate-page.sg-donate-success-view .sg-donate-trust,\n.sg-donate-page.sg-donate-success-view .sg-donate-panel {\n  display: block;\n}\n\n.sg-donate-page::before {\n  content: \"\";\n  position: absolute;\n  width: 360px;\n  height: 360px;\n  right: -140px;\n  top: -150px;\n  border-radius: 50%;\n  background: rgba(233, 10, 125, 0.10);\n  animation: sgDonateFloat 8s ease-in-out infinite;\n}\n\n.sg-donate-page::after {\n  content: \"\";\n  position: absolute;\n  width: 280px;\n  height: 280px;\n  left: -120px;\n  bottom: -120px;\n  border-radius: 50%;\n  background: rgba(59, 12, 99, 0.08);\n  animation: sgDonateFloatTwo 9s ease-in-out infinite;\n}\n\n.sg-donate-reveal {\n  opacity: 0;\n  transform: translateY(28px);\n  transition: opacity 0.8s ease, transform 0.8s ease;\n}\n\n.sg-donate-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* Hero *\/\n.sg-donate-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);\n  gap: clamp(30px, 5vw, 62px);\n  align-items: center;\n}\n\n.sg-donate-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px;\n  margin-bottom: 22px;\n  border-radius: 999px;\n  background: var(--sg-white);\n  border: 1px solid var(--sg-border);\n  color: var(--sg-pink);\n  box-shadow: 0 14px 32px rgba(59, 12, 99, 0.07);\n  font-size: 13px;\n  font-weight: 650;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.sg-donate-badge svg {\n  width: 18px;\n  height: 18px;\n}\n\n.sg-donate-title {\n  max-width: 720px;\n  margin: 0 0 18px;\n  color: var(--sg-purple);\n  font-size: clamp(38px, 5vw, 64px);\n  line-height: 1.06;\n  font-weight: 600;\n  letter-spacing: -0.045em;\n}\n\n.sg-donate-title span {\n  color: var(--sg-pink);\n}\n\n.sg-donate-intro {\n  max-width: 720px;\n  margin: 0 0 28px;\n  color: var(--sg-muted);\n  font-size: clamp(16px, 1.7vw, 19px);\n  line-height: 1.78;\n}\n\n.sg-donate-page.sg-donate-landing .sg-donate-intro {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.sg-donate-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n  align-items: center;\n  margin-bottom: 28px;\n}\n\n.sg-donate-page.sg-donate-landing .sg-donate-actions {\n  justify-content: center;\n}\n\n.sg-donate-start-btn,\n.sg-donate-secondary-link {\n  min-height: 54px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 0 26px;\n  border-radius: 999px;\n  font-size: 15px;\n  font-weight: 750;\n  font-family: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, color 0.28s ease;\n}\n\n.sg-donate-start-btn {\n  border: none;\n  background: var(--sg-pink);\n  color: #ffffff;\n  box-shadow: 0 16px 36px rgba(233, 10, 125, 0.24);\n}\n\n.sg-donate-start-btn:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 20px 46px rgba(233, 10, 125, 0.30);\n}\n\n.sg-donate-start-btn svg {\n  width: 19px;\n  height: 19px;\n}\n\n.sg-donate-secondary-link {\n  background: #ffffff;\n  color: var(--sg-purple);\n  border: 1px solid rgba(59, 12, 99, 0.13);\n  box-shadow: 0 12px 28px rgba(59, 12, 99, 0.07);\n}\n\n.sg-donate-secondary-link:hover {\n  transform: translateY(-3px);\n  color: var(--sg-purple);\n}\n\n.sg-donate-impact-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 14px;\n  margin-top: 26px;\n}\n\n.sg-donate-impact {\n  padding: 18px;\n  border-radius: 22px;\n  background: rgba(255,255,255,0.95);\n  border: 1px solid rgba(233, 10, 125, 0.13);\n  box-shadow: 0 16px 36px rgba(59, 12, 99, 0.07);\n}\n\n.sg-donate-impact strong {\n  display: block;\n  margin-bottom: 6px;\n  color: var(--sg-pink);\n  font-size: 26px;\n  line-height: 1;\n}\n\n.sg-donate-impact span {\n  color: var(--sg-purple);\n  font-size: 13.5px;\n  line-height: 1.45;\n  font-weight: 600;\n}\n\n\/* Panel *\/\n.sg-donate-panel {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(24px, 3vw, 34px);\n  border-radius: 34px;\n  background:\n    radial-gradient(circle at 12% 18%, rgba(233, 10, 125, 0.10), transparent 30%),\n    radial-gradient(circle at 88% 18%, rgba(59, 12, 99, 0.08), transparent 32%),\n    linear-gradient(135deg, #ffffff 0%, #fff6fb 48%, #f8f1ff 100%);\n  border: 1px solid rgba(233, 10, 125, 0.16);\n  box-shadow: 0 28px 76px rgba(59, 12, 99, 0.12);\n}\n\n.sg-donate-panel::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(233, 10, 125, 0.07) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(59, 12, 99, 0.05) 1px, transparent 1px);\n  background-size: 32px 32px;\n  opacity: 0.12;\n}\n\n.sg-donate-panel::after {\n  content: \"\";\n  position: absolute;\n  left: 28px;\n  right: 28px;\n  bottom: 0;\n  height: 5px;\n  border-radius: 999px 999px 0 0;\n  background: linear-gradient(90deg, var(--sg-pink), var(--sg-purple));\n}\n\n.sg-donate-panel-inner {\n  position: relative;\n  z-index: 2;\n}\n\n.sg-donate-panel h2 {\n  margin: 0 0 10px;\n  color: var(--sg-purple);\n  font-size: clamp(25px, 3vw, 36px);\n  line-height: 1.16;\n  font-weight: 600;\n}\n\n.sg-donate-panel p {\n  margin: 0 0 24px;\n  color: var(--sg-muted);\n  font-size: 15.6px;\n  line-height: 1.72;\n}\n\n\/* Stepper *\/\n.sg-donate-stepper {\n  margin: 22px 0 24px;\n}\n\n.sg-donate-progress-track {\n  overflow: hidden;\n  height: 8px;\n  border-radius: 999px;\n  background: #f3ddec;\n  margin-bottom: 16px;\n}\n\n.sg-donate-progress-fill {\n  width: 33.333%;\n  height: 100%;\n  border-radius: inherit;\n  background: linear-gradient(90deg, var(--sg-pink), var(--sg-purple));\n  transition: width 0.35s ease;\n}\n\n.sg-donate-steps {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n}\n\n.sg-donate-step-dot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding: 10px;\n  border-radius: 18px;\n  background: rgba(255, 255, 255, 0.72);\n  border: 1px solid rgba(233, 10, 125, 0.12);\n  color: var(--sg-muted);\n  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;\n}\n\n.sg-donate-step-dot span {\n  flex: 0 0 34px;\n  width: 34px;\n  height: 34px;\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  background: var(--sg-soft-purple);\n  color: var(--sg-pink);\n  font-size: 13px;\n  font-weight: 750;\n}\n\n.sg-donate-step-dot strong {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.sg-donate-step-dot.sg-active {\n  background: #ffffff;\n  color: var(--sg-purple);\n  box-shadow: 0 12px 28px rgba(59, 12, 99, 0.08);\n}\n\n.sg-donate-step-dot.sg-active span,\n.sg-donate-step-dot.sg-complete span {\n  background: var(--sg-pink);\n  color: #ffffff;\n}\n\n\/* Form *\/\n.sg-donate-form {\n  display: grid;\n  gap: 16px;\n}\n\n.sg-donate-step-panel {\n  display: none;\n  animation: sgStepIn 0.35s ease both;\n}\n\n.sg-donate-step-panel.sg-active {\n  display: block;\n}\n\n.sg-donate-step-heading {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 14px;\n  margin-bottom: 16px;\n}\n\n.sg-donate-step-heading h3 {\n  margin: 0;\n  color: var(--sg-purple);\n  font-size: 22px;\n  line-height: 1.25;\n  font-weight: 650;\n}\n\n.sg-donate-step-heading span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 78px;\n  min-height: 34px;\n  padding: 0 12px;\n  border-radius: 999px;\n  background: #ffffff;\n  color: var(--sg-pink);\n  border: 1px solid rgba(233, 10, 125, 0.16);\n  font-size: 12.5px;\n  font-weight: 750;\n}\n\n.sg-donate-amounts {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.sg-donate-amount {\n  min-height: 54px;\n  border: 1px solid rgba(233, 10, 125, 0.15);\n  border-radius: 18px;\n  background: #ffffff;\n  color: var(--sg-purple);\n  font-size: 15px;\n  font-weight: 700;\n  cursor: pointer;\n  box-shadow: 0 12px 28px rgba(59, 12, 99, 0.05);\n  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;\n}\n\n.sg-donate-amount:hover,\n.sg-donate-amount.sg-active {\n  transform: translateY(-2px);\n  border-color: rgba(233, 10, 125, 0.45);\n  background: var(--sg-pink);\n  color: #ffffff;\n}\n\n.sg-donate-row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n}\n\n.sg-donate-field {\n  display: grid;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n\n.sg-donate-field:last-child {\n  margin-bottom: 0;\n}\n\n.sg-donate-field label {\n  color: var(--sg-purple);\n  font-size: 13.5px;\n  font-weight: 650;\n}\n\n.sg-donate-field input,\n.sg-donate-field textarea,\n.sg-donate-field select {\n  width: 100%;\n  min-height: 52px;\n  padding: 14px 16px;\n  border-radius: 18px;\n  border: 1px solid rgba(233, 10, 125, 0.15);\n  background: #ffffff;\n  color: var(--sg-text);\n  font-family: inherit;\n  font-size: 14.8px;\n  outline: none;\n  box-shadow: 0 12px 28px rgba(59, 12, 99, 0.04);\n  transition: border-color 0.25s ease, box-shadow 0.25s ease;\n}\n\n.sg-donate-field textarea {\n  min-height: 100px;\n  resize: vertical;\n}\n\n.sg-donate-field input:focus,\n.sg-donate-field textarea:focus,\n.sg-donate-field select:focus {\n  border-color: rgba(233, 10, 125, 0.45);\n  box-shadow: 0 0 0 4px rgba(233, 10, 125, 0.10);\n}\n\n.sg-donate-nav {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  margin-top: 18px;\n}\n\n.sg-donate-btn {\n  min-height: 54px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 0 24px;\n  border: none;\n  border-radius: 999px;\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: 750;\n  cursor: pointer;\n  transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.25s ease;\n}\n\n.sg-donate-btn-primary {\n  background: var(--sg-pink);\n  color: #ffffff;\n  box-shadow: 0 16px 36px rgba(233, 10, 125, 0.24);\n}\n\n.sg-donate-btn-secondary {\n  background: #ffffff;\n  color: var(--sg-purple);\n  border: 1px solid rgba(59, 12, 99, 0.13);\n  box-shadow: 0 12px 28px rgba(59, 12, 99, 0.07);\n}\n\n.sg-donate-btn:hover {\n  transform: translateY(-3px);\n}\n\n.sg-donate-btn:disabled {\n  opacity: 0.65;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sg-donate-submit {\n  min-width: 240px;\n}\n\n.sg-donate-review-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.sg-donate-review-card {\n  padding: 16px;\n  border-radius: 20px;\n  background: #ffffff;\n  border: 1px solid rgba(233, 10, 125, 0.13);\n  box-shadow: 0 12px 28px rgba(59, 12, 99, 0.05);\n}\n\n.sg-donate-review-card span {\n  display: block;\n  margin-bottom: 6px;\n  color: var(--sg-muted);\n  font-size: 12.8px;\n  line-height: 1.35;\n  font-weight: 650;\n}\n\n.sg-donate-review-card strong {\n  display: block;\n  color: var(--sg-purple);\n  font-size: 15.5px;\n  line-height: 1.4;\n  overflow-wrap: anywhere;\n}\n\n.sg-donate-review-card.sg-highlight {\n  background: linear-gradient(180deg, #ffffff, var(--sg-soft-pink));\n}\n\n.sg-donate-review-card.sg-highlight strong {\n  color: var(--sg-pink);\n  font-size: 26px;\n  line-height: 1.1;\n}\n\n.sg-donate-secure-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  margin-top: 4px;\n  padding: 14px;\n  border-radius: 18px;\n  background: #ffffff;\n  border: 1px solid rgba(233, 10, 125, 0.13);\n  color: var(--sg-muted);\n  font-size: 13.5px;\n  line-height: 1.55;\n}\n\n.sg-donate-secure-note svg {\n  flex: 0 0 18px;\n  width: 18px;\n  height: 18px;\n  color: var(--sg-pink);\n}\n\n.sg-donate-alert {\n  display: none;\n  padding: 14px 16px;\n  margin-bottom: 16px;\n  border-radius: 18px;\n  font-size: 14.2px;\n  line-height: 1.55;\n  font-weight: 600;\n}\n\n.sg-donate-alert.sg-show {\n  display: block;\n}\n\n.sg-donate-alert.sg-error {\n  color: #7a143f;\n  background: #fff0f6;\n  border: 1px solid rgba(233, 10, 125, 0.22);\n}\n\n.sg-donate-alert.sg-success {\n  color: #174c32;\n  background: #edfff5;\n  border: 1px solid rgba(23, 76, 50, 0.16);\n}\n\n\/* Professional payment result popup *\/\n.sg-donate-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  display: grid;\n  place-items: center;\n  padding: 18px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease;\n}\n\n.sg-donate-modal.sg-show {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sg-donate-modal-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(36, 6, 63, 0.58);\n  backdrop-filter: blur(10px);\n}\n\n.sg-donate-modal-card {\n  position: relative;\n  width: min(100%, 520px);\n  overflow: hidden;\n  padding: clamp(24px, 4vw, 34px);\n  border-radius: 30px;\n  background:\n    radial-gradient(circle at 12% 18%, rgba(233, 10, 125, 0.10), transparent 30%),\n    radial-gradient(circle at 88% 18%, rgba(59, 12, 99, 0.08), transparent 32%),\n    linear-gradient(135deg, #ffffff 0%, #fff6fb 48%, #f8f1ff 100%);\n  border: 1px solid rgba(233, 10, 125, 0.18);\n  box-shadow: 0 34px 90px rgba(36, 6, 63, 0.26);\n  transform: translateY(18px) scale(0.96);\n  transition: transform 0.28s ease;\n}\n\n.sg-donate-modal.sg-show .sg-donate-modal-card {\n  transform: translateY(0) scale(1);\n}\n\n.sg-donate-modal-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(233, 10, 125, 0.07) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(59, 12, 99, 0.05) 1px, transparent 1px);\n  background-size: 32px 32px;\n  opacity: 0.12;\n  pointer-events: none;\n}\n\n.sg-donate-modal-card::after {\n  content: \"\";\n  position: absolute;\n  left: 28px;\n  right: 28px;\n  bottom: 0;\n  height: 5px;\n  border-radius: 999px 999px 0 0;\n  background: linear-gradient(90deg, var(--sg-pink), var(--sg-purple));\n}\n\n.sg-donate-modal-content {\n  position: relative;\n  z-index: 2;\n  text-align: center;\n}\n\n.sg-donate-modal-close {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  z-index: 3;\n  width: 40px;\n  height: 40px;\n  display: grid;\n  place-items: center;\n  border: 0;\n  border-radius: 14px;\n  background: #ffffff;\n  color: var(--sg-purple);\n  box-shadow: 0 10px 24px rgba(59, 12, 99, 0.10);\n  cursor: pointer;\n}\n\n.sg-donate-modal-close svg {\n  width: 18px;\n  height: 18px;\n}\n\n.sg-donate-modal-icon {\n  width: 82px;\n  height: 82px;\n  display: grid;\n  place-items: center;\n  margin: 4px auto 18px;\n  border-radius: 30px;\n  color: #ffffff;\n  box-shadow: 0 18px 42px rgba(59, 12, 99, 0.16);\n}\n\n.sg-donate-modal-icon svg {\n  width: 40px;\n  height: 40px;\n}\n\n.sg-donate-modal-icon.sg-success {\n  background: linear-gradient(135deg, #16864f, #26c979);\n}\n\n.sg-donate-modal-icon.sg-error {\n  background: linear-gradient(135deg, #b4235a, var(--sg-pink));\n}\n\n.sg-donate-modal-title {\n  margin: 0 0 10px;\n  color: var(--sg-purple);\n  font-size: clamp(24px, 4vw, 34px);\n  line-height: 1.18;\n  font-weight: 700;\n  letter-spacing: -0.025em;\n}\n\n.sg-donate-modal-message {\n  margin: 0;\n  color: var(--sg-muted);\n  font-size: 15.6px;\n  line-height: 1.7;\n}\n\n.sg-donate-modal-reference {\n  display: none;\n  margin: 18px 0 0;\n  padding: 14px 16px;\n  border-radius: 18px;\n  background: #ffffff;\n  border: 1px solid rgba(233, 10, 125, 0.14);\n  color: var(--sg-purple);\n  font-size: 13.5px;\n  line-height: 1.5;\n  font-weight: 650;\n  overflow-wrap: anywhere;\n}\n\n.sg-donate-modal-reference.sg-show {\n  display: block;\n}\n\n.sg-donate-modal-actions {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n  margin-top: 22px;\n}\n\n.sg-donate-modal-action {\n  min-height: 50px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  border: 0;\n  padding: 0 18px;\n  font-family: inherit;\n  font-size: 14.6px;\n  font-weight: 750;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.sg-donate-modal-action.sg-primary {\n  background: var(--sg-pink);\n  color: #ffffff;\n  box-shadow: 0 14px 30px rgba(233, 10, 125, 0.24);\n}\n\n.sg-donate-modal-action.sg-secondary {\n  background: #ffffff;\n  color: var(--sg-purple);\n  border: 1px solid rgba(59, 12, 99, 0.13);\n}\n\n@media (max-width: 520px) {\n  .sg-donate-modal-card {\n    border-radius: 24px;\n    padding: 24px 18px;\n  }\n\n  .sg-donate-modal-actions {\n    grid-template-columns: 1fr;\n  }\n}\n\n\/* Trust *\/\n.sg-donate-trust {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n  margin-top: clamp(34px, 5vw, 54px);\n}\n\n.sg-donate-trust-card {\n  padding: 22px;\n  border-radius: 26px;\n  background: rgba(255,255,255,0.96);\n  border: 1px solid rgba(233, 10, 125, 0.13);\n  box-shadow: 0 18px 45px rgba(59, 12, 99, 0.08);\n}\n\n.sg-donate-trust-icon {\n  width: 54px;\n  height: 54px;\n  display: grid;\n  place-items: center;\n  margin-bottom: 16px;\n  border-radius: 20px;\n  background: var(--sg-soft-purple);\n  color: var(--sg-pink);\n}\n\n.sg-donate-trust-icon svg {\n  width: 27px;\n  height: 27px;\n}\n\n.sg-donate-trust-card h3 {\n  margin: 0 0 8px;\n  color: var(--sg-purple);\n  font-size: 18px;\n  line-height: 1.3;\n  font-weight: 650;\n}\n\n.sg-donate-trust-card p {\n  margin: 0;\n  color: var(--sg-muted);\n  font-size: 14.4px;\n  line-height: 1.65;\n}\n\n@keyframes sgDonateFloat {\n  0%, 100% { transform: translateY(0) scale(1); }\n  50% { transform: translateY(18px) scale(1.03); }\n}\n\n@keyframes sgDonateFloatTwo {\n  0%, 100% { transform: translateY(0) scale(1); }\n  50% { transform: translateY(-18px) scale(1.03); }\n}\n\n@keyframes sgStepIn {\n  from { opacity: 0; transform: translateX(16px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@media (max-width: 1180px) {\n  .sg-donate-hero {\n    grid-template-columns: 1fr;\n  }\n\n  .sg-donate-panel {\n    max-width: 860px;\n  }\n\n  .sg-donate-trust {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 760px) {\n  .sg-donate-page {\n    padding: 46px 14px;\n  }\n\n  .sg-donate-title {\n    font-size: 38px;\n  }\n\n  .sg-donate-impact-grid,\n  .sg-donate-row,\n  .sg-donate-trust,\n  .sg-donate-review-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .sg-donate-page.sg-donate-landing .sg-donate-hero,\n  .sg-donate-page.sg-donate-focus .sg-donate-hero,\n  .sg-donate-page.sg-donate-success-view .sg-donate-hero {\n    grid-template-columns: 1fr;\n  }\n\n  .sg-donate-actions {\n    display: grid;\n    grid-template-columns: 1fr;\n  }\n\n  .sg-donate-start-btn,\n  .sg-donate-secondary-link {\n    width: 100%;\n  }\n\n  \/* Donation amount buttons: organized rows on mobile\/tablet *\/\n  .sg-donate-amounts {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n  }\n\n  .sg-donate-amount {\n    min-height: 56px;\n    padding: 0 10px;\n    border-radius: 16px;\n    font-size: 14px;\n    line-height: 1.2;\n  }\n\n  .sg-donate-panel {\n    padding: 22px;\n    border-radius: 24px;\n  }\n\n  .sg-donate-steps {\n    grid-template-columns: 1fr;\n  }\n\n  .sg-donate-step-dot strong {\n    white-space: normal;\n  }\n\n  .sg-donate-nav {\n    display: grid;\n    grid-template-columns: 1fr;\n  }\n\n  .sg-donate-btn,\n  .sg-donate-submit {\n    width: 100%;\n    min-width: 0;\n  }\n}\n\n@media (max-width: 520px) {\n  \/* Normal phones: 2 amount buttons per row instead of a long vertical list *\/\n  .sg-donate-amounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n  }\n\n  .sg-donate-amount {\n    min-height: 54px;\n    padding: 0 10px;\n    font-size: 14px;\n  }\n}\n\n@media (max-width: 430px) {\n  .sg-donate-title {\n    font-size: 34px;\n  }\n\n  .sg-donate-panel h2 {\n    font-size: 26px;\n  }\n\n  .sg-donate-step-heading {\n    display: grid;\n  }\n}\n\n@media (max-width: 360px) {\n  \/* Only very tiny screens use 1 column to avoid text squeezing *\/\n  .sg-donate-amounts {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sg-donate-page::before,\n  .sg-donate-page::after,\n  .sg-donate-reveal,\n  .sg-donate-submit,\n  .sg-donate-start-btn,\n  .sg-donate-secondary-link,\n  .sg-donate-amount,\n  .sg-donate-step-panel {\n    animation: none;\n    transition: none;\n    opacity: 1;\n    transform: none;\n  }\n}\n<\/style>\n\n<section class=\"sg-donate-page sg-donate-landing\" id=\"donate\">\n  <div class=\"sg-donate-wrap\">\n\n    <div class=\"sg-donate-hero\">\n\n      <div class=\"sg-donate-copy sg-donate-reveal\">\n        <div class=\"sg-donate-badge\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M12 21S5 16.8 5 10.5A4.3 4.3 0 0 1 12 7.2A4.3 4.3 0 0 1 19 10.5C19 16.8 12 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n          <\/svg>\n          Donate to Smart Girl\n        <\/div>\n\n        <h1 class=\"sg-donate-title\">\n          Give today. <span>Empower a girl. Transform a community.<\/span>\n        <\/h1>\n\n        <p class=\"sg-donate-intro\">\n          Your donation helps us provide mentorship, life skills training, emotional wellness support, advocacy, leadership development, and safe spaces for girls and youth.\n        <\/p>\n\n        <div class=\"sg-donate-actions\">\n          <button class=\"sg-donate-start-btn\" id=\"sgDonateStartButton\" type=\"button\">\n            Start Donating\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 12H19M13 6L19 12L13 18\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"sg-donate-impact-grid\">\n          <div class=\"sg-donate-impact\">\n            <strong>20K+<\/strong>\n            <span>Girls and youth impacted through empowerment programs.<\/span>\n          <\/div>\n\n          <div class=\"sg-donate-impact\">\n            <strong>500+<\/strong>\n            <span>Schools engaged through mentorship and outreach.<\/span>\n          <\/div>\n\n          <div class=\"sg-donate-impact\">\n            <strong>200+<\/strong>\n            <span>Community partners supporting transformation.<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"sg-donate-panel sg-donate-reveal\">\n        <div class=\"sg-donate-panel-inner\">\n\n          <h2>Make a secure donation<\/h2>\n          <p>\n            Complete the three simple steps below and proceed to Paystack secure checkout.\n          <\/p>\n\n          <div class=\"sg-donate-stepper\" aria-label=\"Donation form progress\">\n            <div class=\"sg-donate-progress-track\">\n              <div class=\"sg-donate-progress-fill\" id=\"sgDonateProgress\"><\/div>\n            <\/div>\n\n            <div class=\"sg-donate-steps\">\n              <div class=\"sg-donate-step-dot sg-active\" data-step-dot=\"1\"><span>1<\/span><strong>Amount<\/strong><\/div>\n              <div class=\"sg-donate-step-dot\" data-step-dot=\"2\"><span>2<\/span><strong>Your Details<\/strong><\/div>\n              <div class=\"sg-donate-step-dot\" data-step-dot=\"3\"><span>3<\/span><strong>Review<\/strong><\/div>\n            <\/div>\n          <\/div>\n\n          <div id=\"sgDonateAlert\" class=\"sg-donate-alert\"><\/div>\n\n          <form class=\"sg-donate-form\" id=\"sgDonateForm\" novalidate>\n\n            <div class=\"sg-donate-step-panel sg-active\" data-step-panel=\"1\">\n              <div class=\"sg-donate-step-heading\">\n                <h3>Step 1: Choose donation amount<\/h3>\n                <span>KES<\/span>\n              <\/div>\n\n              <div class=\"sg-donate-amounts\">\n                <button type=\"button\" class=\"sg-donate-amount\" data-amount=\"500\">KES 500<\/button>\n                <button type=\"button\" class=\"sg-donate-amount\" data-amount=\"1000\">KES 1,000<\/button>\n                <button type=\"button\" class=\"sg-donate-amount\" data-amount=\"2500\">KES 2,500<\/button>\n                <button type=\"button\" class=\"sg-donate-amount\" data-amount=\"5000\">KES 5,000<\/button>\n                <button type=\"button\" class=\"sg-donate-amount\" data-amount=\"10000\">KES 10,000<\/button>\n                <button type=\"button\" class=\"sg-donate-amount\" data-amount=\"20000\">KES 20,000<\/button>\n              <\/div>\n\n              <div class=\"sg-donate-row\">\n                <div class=\"sg-donate-field\">\n                  <label for=\"sgd_amount\">Custom Amount (KES)<\/label>\n                  <input id=\"sgd_amount\" name=\"amount\" type=\"number\" min=\"50\" step=\"1\" placeholder=\"Enter amount\" required>\n                <\/div>\n\n                <div class=\"sg-donate-field\">\n                  <label for=\"sgd_frequency\">Donation Type<\/label>\n                  <select id=\"sgd_frequency\" name=\"frequency\">\n                    <option value=\"one-time\">One-time donation<\/option>\n                    <option value=\"monthly\">Monthly pledge<\/option>\n                    <option value=\"program-support\">Program support<\/option>\n                    <option value=\"school-outreach\">School outreach<\/option>\n                  <\/select>\n                <\/div>\n              <\/div>\n\n              <div class=\"sg-donate-nav\">\n                <span><\/span>\n                <button class=\"sg-donate-btn sg-donate-btn-primary\" type=\"button\" data-next-step>\n                  Continue to Details\n                <\/button>\n              <\/div>\n            <\/div>\n\n            <div class=\"sg-donate-step-panel\" data-step-panel=\"2\">\n              <div class=\"sg-donate-step-heading\">\n                <h3>Step 2: Enter donor details<\/h3>\n                <span>Secure<\/span>\n              <\/div>\n\n              <div class=\"sg-donate-row\">\n                <div class=\"sg-donate-field\">\n                  <label for=\"sgd_first_name\">First Name<\/label>\n                  <input id=\"sgd_first_name\" name=\"first_name\" type=\"text\" placeholder=\"Enter first name\" required autocomplete=\"given-name\">\n                <\/div>\n\n                <div class=\"sg-donate-field\">\n                  <label for=\"sgd_last_name\">Last Name<\/label>\n                  <input id=\"sgd_last_name\" name=\"last_name\" type=\"text\" placeholder=\"Enter last name\" required autocomplete=\"family-name\">\n                <\/div>\n              <\/div>\n\n              <div class=\"sg-donate-row\">\n                <div class=\"sg-donate-field\">\n                  <label for=\"sgd_email\">Email Address<\/label>\n                  <input id=\"sgd_email\" name=\"email\" type=\"email\" placeholder=\"Enter email address\" required autocomplete=\"email\">\n                <\/div>\n\n                <div class=\"sg-donate-field\">\n                  <label for=\"sgd_phone\">Phone Number<\/label>\n                  <input id=\"sgd_phone\" name=\"phone\" type=\"tel\" placeholder=\"+254...\" autocomplete=\"tel\">\n                <\/div>\n              <\/div>\n\n              <div class=\"sg-donate-field\">\n                <label for=\"sgd_note\">Optional Note<\/label>\n                <textarea id=\"sgd_note\" name=\"note\" placeholder=\"Write a short note or specify what you would like to support...\"><\/textarea>\n              <\/div>\n\n              <div class=\"sg-donate-nav\">\n                <button class=\"sg-donate-btn sg-donate-btn-secondary\" type=\"button\" data-prev-step>\n                  Back\n                <\/button>\n                <button class=\"sg-donate-btn sg-donate-btn-primary\" type=\"button\" data-next-step>\n                  Review Donation\n                <\/button>\n              <\/div>\n            <\/div>\n\n            <div class=\"sg-donate-step-panel\" data-step-panel=\"3\">\n              <div class=\"sg-donate-step-heading\">\n                <h3>Step 3: Review and donate<\/h3>\n                <span>Paystack<\/span>\n              <\/div>\n\n              <div class=\"sg-donate-review-grid\">\n                <div class=\"sg-donate-review-card sg-highlight\">\n                  <span>Donation Amount<\/span>\n                  <strong id=\"sgReviewAmount\">KES 0<\/strong>\n                <\/div>\n\n                <div class=\"sg-donate-review-card\">\n                  <span>Donation Type<\/span>\n                  <strong id=\"sgReviewFrequency\">One-time donation<\/strong>\n                <\/div>\n\n                <div class=\"sg-donate-review-card\">\n                  <span>Donor Name<\/span>\n                  <strong id=\"sgReviewName\">Not provided<\/strong>\n                <\/div>\n\n                <div class=\"sg-donate-review-card\">\n                  <span>Email Address<\/span>\n                  <strong id=\"sgReviewEmail\">Not provided<\/strong>\n                <\/div>\n              <\/div>\n\n              <div class=\"sg-donate-secure-note\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M12 3L20 7V12C20 16.5 17.1 20.2 12 21C6.9 20.2 4 16.5 4 12V7L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n                  <path d=\"M8.5 12.2L10.8 14.5L15.8 9.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n                <span>\n                  Your payment is processed securely by Paystack. We do not collect or store card details on this website.\n                <\/span>\n              <\/div>\n\n              <input type=\"hidden\" id=\"sgd_currency\" value=\"KES\">\n\n              <div class=\"sg-donate-nav\">\n                <button class=\"sg-donate-btn sg-donate-btn-secondary\" type=\"button\" data-prev-step>\n                  Back\n                <\/button>\n                <button class=\"sg-donate-btn sg-donate-btn-primary sg-donate-submit\" id=\"sgDonateSubmit\" type=\"submit\">\n                  Donate Securely With Paystack\n                <\/button>\n              <\/div>\n            <\/div>\n\n          <\/form>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"sg-donate-modal\" id=\"sgDonateModal\" aria-hidden=\"true\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"sgDonateModalTitle\">\n      <div class=\"sg-donate-modal-backdrop\" data-sg-donate-modal-close><\/div>\n      <div class=\"sg-donate-modal-card\" role=\"document\">\n        <button class=\"sg-donate-modal-close\" type=\"button\" data-sg-donate-modal-close aria-label=\"Close payment message\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/button>\n\n        <div class=\"sg-donate-modal-content\">\n          <div class=\"sg-donate-modal-icon sg-success\" id=\"sgDonateModalIcon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M20 7L10 17L5 12\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/div>\n\n          <h3 class=\"sg-donate-modal-title\" id=\"sgDonateModalTitle\">Payment successful<\/h3>\n          <p class=\"sg-donate-modal-message\" id=\"sgDonateModalMessage\">Thank you for supporting Smart Girl.<\/p>\n          <div class=\"sg-donate-modal-reference\" id=\"sgDonateModalReference\"><\/div>\n\n          <div class=\"sg-donate-modal-actions\">\n            <button class=\"sg-donate-modal-action sg-secondary\" type=\"button\" data-sg-donate-modal-close>Close<\/button>\n            <a class=\"sg-donate-modal-action sg-primary\" href=\"#donate\" id=\"sgDonateModalPrimaryAction\">Done<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"sg-donate-trust\">\n\n      <div class=\"sg-donate-trust-card sg-donate-reveal\">\n        <div class=\"sg-donate-trust-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M12 3L20 7V12C20 16.5 17.1 20.2 12 21C6.9 20.2 4 16.5 4 12V7L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n          <\/svg>\n        <\/div>\n        <h3>Secure Giving<\/h3>\n        <p>All transactions are initialized and verified from the server using secure Paystack endpoints.<\/p>\n      <\/div>\n\n      <div class=\"sg-donate-trust-card sg-donate-reveal\">\n        <div class=\"sg-donate-trust-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M8.5 11A3.5 3.5 0 1 0 8.5 4A3.5 3.5 0 0 0 8.5 11ZM15.5 11A3.5 3.5 0 1 0 15.5 4A3.5 3.5 0 0 0 15.5 11ZM3.5 20C4.1 16.8 5.8 15 8.5 15C11.2 15 12.9 16.8 13.5 20M10.5 20C11.1 16.8 12.8 15 15.5 15C18.2 15 19.9 16.8 20.5 20\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/div>\n        <h3>Direct Impact<\/h3>\n        <p>Your donation supports girls, youth, families, schools, and communities through structured programs.<\/p>\n      <\/div>\n\n      <div class=\"sg-donate-trust-card sg-donate-reveal\">\n        <div class=\"sg-donate-trust-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M4 19V5M4 19H20M8 15L11 12L13.5 14.5L19 8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n        <h3>Transparent Support<\/h3>\n        <p>Each donation is tracked with a unique transaction reference for verification and reconciliation.<\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  const config = {\n    restBase: \"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/sg-donation\/v1\",\n    nonce: \"651c7de8aa\",\n    currency: \"KES\"\n  };\n\n  const page = document.querySelector(\".sg-donate-page\");\n  const form = document.getElementById(\"sgDonateForm\");\n  const alertBox = document.getElementById(\"sgDonateAlert\");\n  const submitBtn = document.getElementById(\"sgDonateSubmit\");\n  const amountInput = document.getElementById(\"sgd_amount\");\n  const startButton = document.getElementById(\"sgDonateStartButton\");\n  const progress = document.getElementById(\"sgDonateProgress\");\n  const modal = document.getElementById(\"sgDonateModal\");\n  const modalIcon = document.getElementById(\"sgDonateModalIcon\");\n  const modalTitle = document.getElementById(\"sgDonateModalTitle\");\n  const modalMessage = document.getElementById(\"sgDonateModalMessage\");\n  const modalReference = document.getElementById(\"sgDonateModalReference\");\n  const modalPrimaryAction = document.getElementById(\"sgDonateModalPrimaryAction\");\n  const panels = page ? page.querySelectorAll(\"[data-step-panel]\") : [];\n  const dots = page ? page.querySelectorAll(\"[data-step-dot]\") : [];\n  let currentStep = 1;\n\n  if (!page || !form) return;\n\n  function enterDonationFocus(shouldScroll) {\n    page.classList.remove(\"sg-donate-landing\", \"sg-donate-success-view\");\n    page.classList.add(\"sg-donate-focus\");\n\n    if (shouldScroll !== false) {\n      window.setTimeout(function () {\n        page.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      }, 80);\n    }\n  }\n\n  function exitDonationFocus(shouldScroll) {\n    page.classList.remove(\"sg-donate-focus\", \"sg-donate-landing\");\n    page.classList.add(\"sg-donate-success-view\");\n\n    if (shouldScroll) {\n      window.setTimeout(function () {\n        page.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      }, 80);\n    }\n  }\n\n  if (startButton) {\n    startButton.addEventListener(\"click\", function () {\n      enterDonationFocus(true);\n      goToStep(1);\n    });\n  }\n\n  function showAlert(type, message) {\n    alertBox.className = \"sg-donate-alert sg-show \" + (type === \"success\" ? \"sg-success\" : \"sg-error\");\n    alertBox.textContent = message;\n  }\n\n  function clearAlert() {\n    alertBox.className = \"sg-donate-alert\";\n    alertBox.textContent = \"\";\n  }\n\n  function successIconSvg() {\n    return '<svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7L10 17L5 12\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>';\n  }\n\n  function errorIconSvg() {\n    return '<svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 8V12.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M12 16H12.01\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/><path d=\"M10.3 4.4L2.8 17.2C2 18.6 3 20.3 4.6 20.3H19.4C21 20.3 22 18.6 21.2 17.2L13.7 4.4C12.9 3.1 11.1 3.1 10.3 4.4Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>';\n  }\n\n  function showPaymentModal(type, title, message, reference) {\n    if (!modal) return;\n\n    const isSuccess = type === \"success\";\n    modalIcon.className = \"sg-donate-modal-icon \" + (isSuccess ? \"sg-success\" : \"sg-error\");\n    modalIcon.innerHTML = isSuccess ? successIconSvg() : errorIconSvg();\n    modalTitle.textContent = title;\n    modalMessage.textContent = message;\n\n    if (reference) {\n      modalReference.textContent = \"Transaction Reference: \" + reference;\n      modalReference.classList.add(\"sg-show\");\n    } else {\n      modalReference.textContent = \"\";\n      modalReference.classList.remove(\"sg-show\");\n    }\n\n    modalPrimaryAction.textContent = isSuccess ? \"View Details\" : \"Try Again\";\n    modalPrimaryAction.setAttribute(\"data-result\", isSuccess ? \"success\" : \"error\");\n    modal.classList.add(\"sg-show\");\n    modal.setAttribute(\"aria-hidden\", \"false\");\n    document.documentElement.style.overflow = \"hidden\";\n  }\n\n  function closePaymentModal() {\n    if (!modal) return;\n    modal.classList.remove(\"sg-show\");\n    modal.setAttribute(\"aria-hidden\", \"true\");\n    document.documentElement.style.overflow = \"\";\n  }\n\n  function clearPaymentReferenceFromUrl() {\n    const url = new URL(window.location.href);\n    url.searchParams.delete(\"reference\");\n    url.searchParams.delete(\"trxref\");\n    window.history.replaceState({}, document.title, url.pathname + url.search + url.hash);\n  }\n\n  if (modal) {\n    modal.querySelectorAll(\"[data-sg-donate-modal-close]\").forEach(function (button) {\n      button.addEventListener(\"click\", closePaymentModal);\n    });\n\n    document.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Escape\" && modal.classList.contains(\"sg-show\")) {\n        closePaymentModal();\n      }\n    });\n\n    if (modalPrimaryAction) {\n      modalPrimaryAction.addEventListener(\"click\", function (event) {\n        event.preventDefault();\n        const result = modalPrimaryAction.getAttribute(\"data-result\");\n        closePaymentModal();\n\n        if (result === \"success\") {\n          exitDonationFocus(true);\n        } else {\n          enterDonationFocus(true);\n        }\n      });\n    }\n  }\n\n  function formatCurrency(amount) {\n    const number = Number(amount || 0);\n    return config.currency + \" \" + number.toLocaleString();\n  }\n\n  function donationTypeLabel(value) {\n    const labels = {\n      \"one-time\": \"One-time donation\",\n      \"monthly\": \"Monthly pledge\",\n      \"program-support\": \"Program support\",\n      \"school-outreach\": \"School outreach\"\n    };\n    return labels[value] || \"One-time donation\";\n  }\n\n  function setLoading(isLoading) {\n    submitBtn.disabled = isLoading;\n    submitBtn.textContent = isLoading ? \"Preparing Secure Checkout...\" : \"Donate Securely With Paystack\";\n  }\n\n  function goToStep(step) {\n    currentStep = Math.max(1, Math.min(3, step));\n\n    panels.forEach(function (panel) {\n      panel.classList.toggle(\"sg-active\", Number(panel.getAttribute(\"data-step-panel\")) === currentStep);\n    });\n\n    dots.forEach(function (dot) {\n      const dotStep = Number(dot.getAttribute(\"data-step-dot\"));\n      dot.classList.toggle(\"sg-active\", dotStep === currentStep);\n      dot.classList.toggle(\"sg-complete\", dotStep < currentStep);\n    });\n\n    if (progress) {\n      progress.style.width = (currentStep \/ 3 * 100) + \"%\";\n    }\n\n    if (currentStep === 3) {\n      updateReview();\n    }\n\n    clearAlert();\n  }\n\n  function validateStep(step) {\n    const formData = new FormData(form);\n    const amount = Number(formData.get(\"amount\"));\n    const firstName = String(formData.get(\"first_name\") || \"\").trim();\n    const lastName = String(formData.get(\"last_name\") || \"\").trim();\n    const email = String(formData.get(\"email\") || \"\").trim();\n\n    if (step === 1) {\n      if (!amount || amount < 50) {\n        showAlert(\"error\", \"Please select or enter a donation amount of at least \" + config.currency + \" 50.\");\n        amountInput.focus();\n        return false;\n      }\n    }\n\n    if (step === 2) {\n      if (!firstName || !lastName || !email || !\/^\\S+@\\S+\\.\\S+$\/.test(email)) {\n        showAlert(\"error\", \"Please enter your first name, last name, and a valid email address.\");\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  function updateReview() {\n    const formData = new FormData(form);\n    const amount = formData.get(\"amount\");\n    const frequency = formData.get(\"frequency\");\n    const firstName = String(formData.get(\"first_name\") || \"\").trim();\n    const lastName = String(formData.get(\"last_name\") || \"\").trim();\n    const email = String(formData.get(\"email\") || \"\").trim();\n\n    document.getElementById(\"sgReviewAmount\").textContent = formatCurrency(amount);\n    document.getElementById(\"sgReviewFrequency\").textContent = donationTypeLabel(frequency);\n    document.getElementById(\"sgReviewName\").textContent = (firstName + \" \" + lastName).trim() || \"Not provided\";\n    document.getElementById(\"sgReviewEmail\").textContent = email || \"Not provided\";\n  }\n\n  page.querySelectorAll(\".sg-donate-amount\").forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      page.querySelectorAll(\".sg-donate-amount\").forEach(function (btn) {\n        btn.classList.remove(\"sg-active\");\n      });\n      button.classList.add(\"sg-active\");\n      amountInput.value = button.getAttribute(\"data-amount\");\n    });\n  });\n\n  amountInput.addEventListener(\"input\", function () {\n    page.querySelectorAll(\".sg-donate-amount\").forEach(function (btn) {\n      btn.classList.remove(\"sg-active\");\n    });\n  });\n\n  page.querySelectorAll(\"[data-next-step]\").forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      if (validateStep(currentStep)) {\n        goToStep(currentStep + 1);\n      }\n    });\n  });\n\n  page.querySelectorAll(\"[data-prev-step]\").forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      goToStep(currentStep - 1);\n    });\n  });\n\n  form.addEventListener(\"submit\", function (event) {\n    event.preventDefault();\n\n    if (!validateStep(1) || !validateStep(2)) {\n      return;\n    }\n\n    updateReview();\n\n    const formData = new FormData(form);\n    const payload = {\n      amount: formData.get(\"amount\"),\n      currency: document.getElementById(\"sgd_currency\").value,\n      frequency: formData.get(\"frequency\"),\n      first_name: formData.get(\"first_name\"),\n      last_name: formData.get(\"last_name\"),\n      email: formData.get(\"email\"),\n      phone: formData.get(\"phone\"),\n      note: formData.get(\"note\"),\n      callback_url: window.location.href.split(\"#\")[0]\n    };\n\n    setLoading(true);\n\n    fetch(config.restBase + \"\/initialize\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application\/json\",\n        \"X-WP-Nonce\": config.nonce\n      },\n      body: JSON.stringify(payload)\n    })\n    .then(function (response) {\n      return response.json();\n    })\n    .then(function (result) {\n      if (!result || !result.success || !result.authorization_url) {\n        throw new Error(result && result.message ? result.message : \"Unable to initialize donation.\");\n      }\n\n      window.location.href = result.authorization_url;\n    })\n    .catch(function (error) {\n      const message = error.message || \"Something went wrong. Please try again.\";\n      showAlert(\"error\", message);\n      showPaymentModal(\n        \"error\",\n        \"Checkout could not start\",\n        message + \" Please confirm your details and try again.\",\n        \"\"\n      );\n      setLoading(false);\n    });\n  });\n\n  function verifyReturnPayment() {\n    const params = new URLSearchParams(window.location.search);\n    const reference = params.get(\"reference\") || params.get(\"trxref\");\n\n    if (!reference) return false;\n\n    enterDonationFocus(false);\n    goToStep(3);\n    showAlert(\"success\", \"Verifying your donation. Please wait...\");\n\n    fetch(config.restBase + \"\/verify\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application\/json\",\n        \"X-WP-Nonce\": config.nonce\n      },\n      body: JSON.stringify({ reference: reference })\n    })\n    .then(function (response) {\n      return response.json();\n    })\n    .then(function (result) {\n      if (result && result.success) {\n        const successMessage = \"Thank you. Your donation has been received successfully. We appreciate your support in empowering girls and youth.\";\n        showAlert(\"success\", successMessage + \" Reference: \" + reference);\n        exitDonationFocus(false);\n        showPaymentModal(\"success\", \"Payment successful\", successMessage, reference);\n        clearPaymentReferenceFromUrl();\n      } else {\n        const failureMessage = result && result.message ? result.message : \"Payment verification was not successful.\";\n        showAlert(\"error\", failureMessage);\n        showPaymentModal(\n          \"error\",\n          \"Payment not completed\",\n          failureMessage + \" If money was deducted, please contact us with your transaction reference for verification.\",\n          reference\n        );\n      }\n    })\n    .catch(function () {\n      const message = \"Unable to verify payment at the moment. Please contact us with your transaction reference.\";\n      showAlert(\"error\", message);\n      showPaymentModal(\"error\", \"Verification delayed\", message, reference);\n    });\n\n    return true;\n  }\n\n  const returningFromPaystack = verifyReturnPayment();\n  if (!returningFromPaystack) {\n    goToStep(1);\n  }\n\n  const revealItems = page.querySelectorAll(\".sg-donate-reveal\");\n  const revealObserver = new IntersectionObserver(function (entries) {\n    entries.forEach(function (entry) {\n      if (entry.isIntersecting) {\n        entry.target.classList.add(\"sg-donate-visible\");\n      }\n    });\n  }, { threshold: 0.18 });\n\n  revealItems.forEach(function (item) {\n    revealObserver.observe(item);\n  });\n})();\n<\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-365","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/pages\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":7,"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/pages\/365\/revisions"}],"predecessor-version":[{"id":2499,"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/pages\/365\/revisions\/2499"}],"wp:attachment":[{"href":"https:\/\/amzealcreatives.com\/smartgirl\/wp-json\/wp\/v2\/media?parent=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}