/* =============================================
   ZGF DONATE — PAYMENT CSS
   Brand: Zambian Governance Foundation
   Palette: Forest green, earthy gold, charcoal, cream
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  /* ── Brand Colours ── */
  --green-deep:       #1a4d1e;   /* dark forest */
  --green-mid:        #2d7a35;   /* acacia green (logo) */
  --green-bright:     #3d9946;   /* hover / accent */
  --green-light:      #e8f5e9;   /* mint wash */
  --green-glow:       rgba(45,122,53,0.18);

  --gold:             #c8a84b;   /* warm earthy gold accent */
  --gold-light:       rgba(200,168,75,0.15);

  --charcoal:         #2b2e30;   /* logo text colour */
  --slate:            #4a5568;
  --muted:            #718096;

  /* ── Background ── */
  --bg-page:          #0d1f10;   /* very deep forest night */
  --bg-card:          rgba(255,255,255,0.055);
  --bg-input:         rgba(255,255,255,0.07);
  --border-subtle:    rgba(255,255,255,0.10);
  --border-focus:     rgba(61,153,70,0.7);

  /* ── Text ── */
  --text-primary:     #f0f4ef;
  --text-muted:       #94a897;
  --text-label:       #b8c9b9;

  /* ── Utility ── */
  --success:          #4caf6e;
  --error:            #e57373;
  --shadow-glow:      0 0 70px rgba(45,122,53,0.22);
  --radius-card:      24px;
  --radius-input:     13px;
  --radius-btn:       14px;
  --transition:       0.28s cubic-bezier(0.4,0,0.2,1);
}

/* =============================================
   RESET
   ============================================= */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* =============================================
   BODY — deep forest night background
   ============================================= */
body {
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  background: var(--bg-page);
  background-image:
    /* leafy canopy glow top-left */
    radial-gradient(ellipse 70% 55% at 15% -5%,  rgba(45,122,53,0.40) 0%, transparent 65%),
    /* warm golden glow bottom-right */
    radial-gradient(ellipse 55% 45% at 90% 105%,  rgba(200,168,75,0.18) 0%, transparent 60%),
    /* subtle mid green centre */
    radial-gradient(ellipse 40% 35% at 55% 50%,  rgba(26,77,30,0.20)  0%, transparent 60%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:44px 16px 64px;
  overflow-x:hidden;
}

/* Subtle texture overlay */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at  8% 18%, rgba(255,255,255,0.08) 0%,transparent 100%),
    radial-gradient(1px   1px   at 28% 72%, rgba(255,255,255,0.06) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,0.07) 0%,transparent 100%),
    radial-gradient(1px   1px   at 82% 55%, rgba(255,255,255,0.05) 0%,transparent 100%),
    radial-gradient(2px   2px   at 44% 88%, rgba(255,255,255,0.06) 0%,transparent 100%),
    radial-gradient(1px   1px   at 88% 28%, rgba(255,255,255,0.04) 0%,transparent 100%);
  pointer-events:none;
  z-index:0;
  animation:twinkle 9s ease-in-out infinite alternate;
}

/* =============================================
   KEYFRAMES
   ============================================= */
@keyframes twinkle {
  from { opacity:0.4; }
  to   { opacity:1.0; }
}

@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(36px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulseGreen {
  0%   { box-shadow:0 0 0  0   rgba(45,122,53,0.55), 0 10px 30px rgba(45,122,53,0.35); }
  60%  { box-shadow:0 0 0 14px rgba(45,122,53,0),    0 10px 30px rgba(45,122,53,0.35); }
  100% { box-shadow:0 0 0  0   rgba(45,122,53,0),    0 10px 30px rgba(45,122,53,0.35); }
}

@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

@keyframes leafSway {
  0%,100% { transform:rotate(-1deg); }
  50%      { transform:rotate(1.5deg); }
}

/* =============================================
   FORM WRAPPER
   ============================================= */
form#payment_form,
form#payment_confirmation {
  width:100%;
  max-width:520px;
  position:relative;
  z-index:1;
  animation:fadeSlideUp 0.65s cubic-bezier(0.34,1.5,0.64,1) forwards;
}

/* =============================================
   CARD
   ============================================= */
.donation-card {
  background:var(--bg-card);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  padding:40px 36px 44px;
  box-shadow:
    var(--shadow-glow),
    0 40px 90px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  position:relative;
  overflow:hidden;
}

/* Top shimmer in brand green → gold */
.donation-card::before {
  content:'';
  position:absolute;
  top:0; left:-100%; right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--green-mid) 30%,
    var(--gold) 70%,
    transparent 100%);
  background-size:200% auto;
  animation:shimmer 4s linear infinite;
}

/* Very subtle inner leaf watermark */
.donation-card::after {
  content:'';
  position:absolute;
  bottom:-60px;
  right:-50px;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(45,122,53,0.06) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* =============================================
   LOGO
   ============================================= */
.logo-wrapper {
  text-align:center;
  margin-bottom:24px;
}

.logo-wrapper img {
  max-width:200px;
  height:auto;
  filter:drop-shadow(0 4px 18px rgba(45,122,53,0.30));
  transition:filter var(--transition), transform var(--transition);
  animation:leafSway 5s ease-in-out infinite;
}

.logo-wrapper img:hover {
  filter:drop-shadow(0 6px 28px rgba(45,122,53,0.55));
  animation:none;
  transform:scale(1.03);
}

/* =============================================
   PROGRESS STEPS
   ============================================= */
.progress-steps {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:28px;
}

.step {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex:1;
  position:relative;
}

.step:not(:last-child)::after {
  content:'';
  position:absolute;
  top:13px;
  left:50%;
  right:-50%;
  height:2px;
  background:var(--border-subtle);
  z-index:0;
}

.step.done:not(:last-child)::after {
  background:linear-gradient(90deg, var(--green-mid), rgba(45,122,53,0.3));
}

.step.active:not(:last-child)::after {
  background:linear-gradient(90deg, var(--green-mid), var(--border-subtle));
}

.step-circle {
  width:26px; height:26px;
  border-radius:50%;
  background:var(--bg-input);
  border:2px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  color:var(--text-muted);
  position:relative; z-index:1;
  transition:all var(--transition);
}

.step.active .step-circle {
  background:linear-gradient(135deg, var(--green-deep), var(--green-mid));
  border-color:var(--green-mid);
  color:#fff;
  box-shadow:0 0 0 4px rgba(45,122,53,0.22);
}

.step.done .step-circle {
  background:var(--green-bright);
  border-color:var(--green-bright);
  color:#fff;
}

.step-label {
  font-size:10px; font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.5px;
  white-space:nowrap;
}

.step.active .step-label { color:var(--green-bright); }
.step.done  .step-label  { color:var(--success); }

/* =============================================
   HEADER
   ============================================= */
.card-header {
  text-align:center;
  margin-bottom:28px;
}

.card-header h1 {
  font-family:'Playfair Display', Georgia, serif;
  font-size:24px;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:-0.3px;
  line-height:1.25;
  margin-bottom:7px;
}

/* Green highlight on key word */
.card-header h1 span { color:var(--green-bright); }

.card-header p {
  font-size:14px;
  color:var(--text-muted);
  font-weight:400;
}

/* Secure badge */
.secure-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(76,175,110,0.12);
  border:1px solid rgba(76,175,110,0.28);
  border-radius:100px;
  padding:5px 14px;
  font-size:12px; font-weight:600;
  color:var(--success);
  margin-top:12px;
  letter-spacing:0.2px;
}

.secure-badge svg { width:13px; height:13px; flex-shrink:0; }

/* =============================================
   SECTION TITLES
   ============================================= */
.form-section-title {
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.3px;
  color:var(--text-muted);
  margin:26px 0 14px;
  display:flex; align-items:center; gap:8px;
}

.form-section-title::after {
  content:''; flex:1; height:1px;
  background:var(--border-subtle);
}

/* =============================================
   AMOUNT PRESETS
   ============================================= */
.amount-presets {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}

.preset-chip {
  flex:1; min-width:68px;
  padding:10px 6px;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  background:var(--bg-input);
  color:var(--text-muted);
  font-family:'Inter',sans-serif;
  font-size:13px; font-weight:600;
  cursor:pointer; text-align:center;
  transition:all var(--transition);
  position:relative; overflow:hidden;
}

.preset-chip::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--green-deep), var(--green-mid));
  opacity:0;
  transition:opacity var(--transition);
}

.preset-chip span { position:relative; z-index:1; }

.preset-chip:hover,
.preset-chip.active {
  border-color:var(--green-mid);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(45,122,53,0.38);
}

.preset-chip:hover::before,
.preset-chip.active::before { opacity:1; }

/* =============================================
   FORM ROWS
   ============================================= */
.form-row { margin-bottom:18px; position:relative; }

.form-row label {
  display:block;
  font-size:11.5px; font-weight:700;
  color:var(--text-label);
  text-transform:uppercase; letter-spacing:0.8px;
  margin-bottom:8px;
}

/* Icon wrapper */
.input-wrapper { position:relative; }

.input-icon {
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  width:17px; height:17px;
  color:var(--text-muted);
  pointer-events:none;
  transition:color var(--transition);
  z-index:1;
}

/* =============================================
   INPUTS & SELECTS
   ============================================= */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row select {
  width:100%;
  padding:14px 14px 14px 42px;
  font-family:'Inter',sans-serif;
  font-size:15px; font-weight:500;
  color:var(--text-primary);
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-input);
  transition:all var(--transition);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  caret-color:var(--green-bright);
}

.form-row input::placeholder {
  color:rgba(148,168,151,0.45);
  font-weight:400;
}

.form-row input:focus,
.form-row select:focus {
  border-color:var(--green-mid);
  background:rgba(45,122,53,0.09);
  box-shadow:0 0 0 3px rgba(45,122,53,0.18), 0 4px 16px rgba(45,122,53,0.1);
  transform:translateY(-1px);
}

.form-row input:focus + .input-icon,
.form-row select:focus + .input-icon { color:var(--green-bright); }

.form-row input[readonly] { opacity:0.55; cursor:not-allowed; }

/* Select chevron */
.select-wrapper { position:relative; }
.select-wrapper::after {
  content:'';
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--text-muted);
  pointer-events:none;
  transition:border-top-color var(--transition);
}
.select-wrapper select { padding-right:36px; }
.select-wrapper select option { background:#0d2210; color:var(--text-primary); }

/* =============================================
   REVIEW VALUE (Confirmation)
   ============================================= */
.review-value {
  padding:14px 14px 14px 42px;
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-input);
  font-size:15px; font-weight:500;
  color:var(--text-primary);
  position:relative; overflow:hidden;
  min-height:50px; display:flex; align-items:center;
}

.review-value::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--green-mid), var(--gold));
  border-radius:0 2px 2px 0;
}

/* =============================================
   AMOUNT SUMMARY BANNER
   ============================================= */
.amount-summary {
  background:linear-gradient(135deg,
    rgba(26,77,30,0.40),
    rgba(200,168,75,0.12));
  border:1px solid rgba(45,122,53,0.35);
  border-radius:16px;
  padding:22px 24px;
  margin:22px 0;
  text-align:center;
}

.amount-summary .summary-label {
  font-size:11px; font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:6px;
}

.amount-summary .summary-value {
  font-family:'Playfair Display', Georgia, serif;
  font-size:38px; font-weight:700;
  color:#fff;
  letter-spacing:-1px;
  line-height:1;
}

.amount-summary .summary-currency {
  font-size:14px; font-weight:500;
  color:var(--gold);
  margin-top:6px;
}

/* =============================================
   SECURITY NOTE
   ============================================= */
.security-note {
  background:rgba(45,122,53,0.08);
  border:1px solid rgba(45,122,53,0.20);
  border-radius:13px;
  padding:15px 16px;
  font-size:13px; line-height:1.6;
  color:var(--text-muted);
  margin:22px 0;
  display:flex; gap:12px; align-items:flex-start;
}

.security-note-icon {
  flex-shrink:0; margin-top:2px;
  width:17px; height:17px;
  color:var(--green-bright);
}

.security-note strong { color:var(--text-primary); }

/* =============================================
   SUBMIT BUTTON
   ============================================= */
.btn-donate {
  display:block; width:100%;
  padding:17px 24px;
  font-family:'Inter',sans-serif;
  font-size:15.5px; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,
    var(--green-deep)  0%,
    var(--green-mid)  45%,
    var(--green-bright) 100%);
  background-size:200% auto;
  border:none;
  border-radius:var(--radius-btn);
  cursor:pointer;
  letter-spacing:0.2px;
  position:relative; overflow:hidden;
  transition:all var(--transition);
  box-shadow:
    0 8px 28px rgba(45,122,53,0.50),
    0 2px 8px rgba(0,0,0,0.30);
  margin-top:10px;
  animation:pulseGreen 2.8s ease-out infinite;
}

.btn-donate::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
  opacity:0;
  transition:opacity var(--transition);
}

/* Gold shimmer strip on hover */
.btn-donate::after {
  content:'';
  position:absolute;
  top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(200,168,75,0.25),
    transparent);
  transform:skewX(-20deg);
  transition:left 0.5s ease;
}

.btn-donate:hover {
  transform:translateY(-3px) scale(1.015);
  background-position:right center;
  box-shadow:0 18px 44px rgba(45,122,53,0.55), 0 4px 14px rgba(0,0,0,0.35);
  animation:none;
}

.btn-donate:hover::before { opacity:1; }
.btn-donate:hover::after  { left:130%; }

.btn-donate:active {
  transform:translateY(-1px) scale(0.99);
  box-shadow:0 6px 16px rgba(45,122,53,0.4);
}

/* Loading state */
.btn-donate.loading {
  pointer-events:none; animation:none; color:transparent;
}
.btn-donate.loading::before {
  opacity:0;
}
.btn-donate.loading .btn-donate-inner::after {
  content:'';
  position:absolute;
  width:20px; height:20px;
  border:3px solid rgba(255,255,255,0.30);
  border-top-color:#fff;
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  animation:spin 0.75s linear infinite;
}

.btn-donate-inner {
  display:flex; align-items:center;
  justify-content:center; gap:9px;
  position:relative; z-index:1;
}

.btn-donate-inner svg { width:19px; height:19px; flex-shrink:0; }

/* =============================================
   VALIDATION STATES
   ============================================= */
.form-row.error input,
.form-row.error select {
  border-color:var(--error);
  box-shadow:0 0 0 3px rgba(229,115,115,0.18);
}

.field-error {
  font-size:12px; color:var(--error);
  margin-top:5px;
  display:none; align-items:center; gap:4px;
  animation:fadeIn 0.2s ease;
}

.form-row.error .field-error { display:flex; }

/* =============================================
   TRUST FOOTER
   ============================================= */
.trust-footer {
  display:flex; align-items:center;
  justify-content:center; gap:18px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--border-subtle);
  flex-wrap:wrap;
}

.trust-item {
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--text-muted); font-weight:500;
}

.trust-item svg { width:13px; height:13px; color:var(--success); flex-shrink:0; }

/* =============================================
   BACK LINK
   ============================================= */
.back-link {
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text-muted); font-size:13.5px; font-weight:500;
  text-decoration:none; margin-bottom:18px;
  transition:color var(--transition);
}

.back-link:hover { color:var(--text-primary); }

.back-link svg {
  width:15px; height:15px;
  transition:transform var(--transition);
}

.back-link:hover svg { transform:translateX(-4px); }

/* =============================================
   TOOLTIP
   ============================================= */
.tooltip-wrapper {
  position:relative; display:inline-block;
  margin-left:5px; cursor:help;
}

.tooltip-icon {
  width:13px; height:13px;
  border-radius:50%;
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  color:var(--text-muted);
  font-size:9px; font-weight:700;
  display:inline-flex; align-items:center;
  justify-content:center; vertical-align:middle; line-height:1;
}

.tooltip-text {
  position:absolute;
  bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  background:#132416;
  border:1px solid var(--border-subtle);
  border-radius:9px;
  padding:9px 13px;
  font-size:12px; color:var(--text-muted);
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:10;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
}

.tooltip-wrapper:hover .tooltip-text { opacity:1; }

/* =============================================
   DIVIDER
   ============================================= */
.gold-divider {
  width:48px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:0 auto 20px;
  border-radius:2px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:540px) {
  body { padding:20px 12px 44px; }

  .donation-card {
    padding:28px 18px 32px;
    border-radius:20px;
  }

  .card-header h1 { font-size:20px; }
  .amount-presets { gap:7px; }
  .preset-chip { min-width:58px; font-size:12px; padding:9px 3px; }
  .amount-summary .summary-value { font-size:30px; }
  .trust-footer { gap:12px; }

  .logo-wrapper img { max-width:170px; }
}

@media (max-width:360px) {
  .preset-chip { font-size:11px; }
  .trust-footer { flex-direction:column; gap:9px; }
}