/* ═══════════════════════════════════════════════════════════
   MasjidBD v13 — Donate Page
   css/pages/donate.css
   ═══════════════════════════════════════════════════════════ */

.donate-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter) var(--sp-12);
}

/* ─────────────────────────────────────────────────────────
   HERO / HEADER
───────────────────────────────────────────────────────── */
.donate-hero {
  background: linear-gradient(160deg, #0b3d2e, #0a2820);
  border-radius: var(--r-2xl, 24px);
  padding: var(--sp-10) var(--sp-10);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
}

[data-theme="glass"] .donate-hero {
  background: rgba(11,61,46,.5);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(56,181,137,.15);
}

.donate-hero::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, rgba(184,148,58,.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.donate-hero-left { position: relative; }

.donate-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(56,181,137,.15);
  border: 1px solid rgba(56,181,137,.25);
  border-radius: var(--r-full);
  padding: 5px 14px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.7);
  margin-bottom: var(--sp-4);
  font-weight: var(--weight-medium);
}

.donate-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #fff;
  margin-bottom: var(--sp-4);
  line-height: 1.15;
}

.donate-hero-title .gold { color: var(--c-gold-400); }

.donate-hero-sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  max-width: 420px;
  margin-bottom: var(--sp-6);
}

/* Total raised stat box */
.donate-hero-right { position: relative; }

.donate-total-box {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  text-align: center;
  min-width: 220px;
}

.donate-total-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-3);
  display: block;
}

.donate-total-amount {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--c-gold-400);
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-3);
}

.donate-total-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}

.donate-total-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), var(--c-gold-500));
  border-radius: var(--r-full);
  transition: width .8s cubic-bezier(.4,0,.2,1) .2s;
}

.donate-total-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,.4);
}

.donate-mini-stats {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.1);
}

.donate-mini-stat { text-align: center; flex: 1; }
.donate-mini-val { font-size: 1.1rem; font-weight: var(--weight-semi); color: #fff; display: block; }
.donate-mini-lbl { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 2px; display: block; }

/* ─────────────────────────────────────────────────────────
   CAMPAIGN GRID
───────────────────────────────────────────────────────── */
.donate-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.donate-section-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-text);
}

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}

.campaign-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: all var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.campaign-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

[data-theme="glass"] .campaign-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Campaign image / placeholder */
.campaign-img {
  height: 160px;
  background: var(--color-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
  overflow: hidden;
}

.campaign-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.campaign-urgency-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--weight-semi);
  background: var(--color-danger);
  color: #fff;
}

.campaign-urgency-badge.verified { background: var(--color-brand); }
.campaign-urgency-badge.featured { background: var(--c-gold-600); }

.campaign-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }

.campaign-cat {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--sp-2);
}

.campaign-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}

.campaign-mosque {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-bottom: var(--sp-3);
}

.campaign-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

/* Progress bar */
.campaign-progress-wrap {
  margin-bottom: var(--sp-3);
}

.campaign-progress-top {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  margin-bottom: var(--sp-1);
}
.campaign-raised { color: var(--color-brand); font-weight: var(--weight-semi); }
.campaign-goal   { color: var(--color-text-3); }

.campaign-progress-bar-wrap {
  height: 5px;
  background: var(--color-border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.campaign-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), var(--c-gold-500));
  border-radius: var(--r-full);
  transition: width .6s var(--ease) .2s;
}

.campaign-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-bottom: var(--sp-4);
}

.campaign-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─────────────────────────────────────────────────────────
   DONATION FORM
───────────────────────────────────────────────────────── */
.donate-form-section {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
  align-items: start;
}

.donate-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--nav-h) + 60px);
}

[data-theme="glass"] .donate-form-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.donate-form-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

/* Amount buttons */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.amount-btn {
  padding: 12px 8px;
  border: 2px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface-3);
  color: var(--color-text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-base);
  font-family: var(--font-sans);
}

.amount-btn:hover   { border-color: var(--color-brand); color: var(--color-brand); }
.amount-btn.active  {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.amount-btn .amount-label {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-normal);
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

.amount-btn:not(.active) .amount-label { color: var(--color-text-3); }

/* Zakat/Sadaqah tabs */
.donate-type-tabs {
  display: flex;
  background: var(--color-sunken);
  border-radius: var(--r-lg);
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--sp-5);
}

.donate-type-tab {
  flex: 1;
  padding: 9px;
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-3);
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-base);
  font-family: var(--font-sans);
}
.donate-type-tab.active { background: var(--color-surface); color: var(--color-brand); box-shadow: var(--shadow-sm); }

/* Payment method icons */
.payment-methods {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.payment-method-btn {
  flex: 1;
  min-width: 70px;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface-3);
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-base);
  font-family: var(--font-sans);
}
.payment-method-btn:hover { border-color: var(--color-brand); }
.payment-method-btn.active { border-color: var(--color-brand); background: rgba(var(--c-forest-800-rgb,11,61,46),.06); }

.payment-method-icon  { font-size: 1.4rem; display: block; margin-bottom: 3px; }
.payment-method-label { font-size: 10px; color: var(--color-text-3); }

/* Summary before confirm */
.donate-summary {
  background: var(--color-surface-3);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.donate-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  padding: 4px 0;
}

.donate-summary-row.total {
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  font-size: var(--text-base);
}

.donate-secure-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-top: var(--sp-3);
  text-align: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────
   MILESTONES SECTION
───────────────────────────────────────────────────────── */
.milestones-section { margin-bottom: var(--sp-10); }

.milestones-track {
  position: relative;
  padding: var(--sp-6) 0;
}

.milestones-line {
  position: absolute;
  top: 50%; left: 40px; right: 40px;
  height: 3px;
  background: var(--color-border);
  border-radius: var(--r-full);
  z-index: 0;
}

.milestones-line-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), var(--c-gold-500));
  border-radius: var(--r-full);
  transition: width .8s var(--ease);
}

.milestones-list {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100px;
  text-align: center;
}

.milestone-dot {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all var(--dur-base);
}

.milestone-item.reached .milestone-dot {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.milestone-item.current .milestone-dot {
  border-color: var(--c-gold-500);
  background: var(--c-gold-500);
  animation: pulse 2s ease-in-out infinite;
}

.milestone-amount { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--color-text-2); }
.milestone-label  { font-size: 10px; color: var(--color-text-3); line-height: 1.3; }
.milestone-item.reached .milestone-amount { color: var(--color-brand); }

/* ─────────────────────────────────────────────────────────
   TRANSPARENCY SECTION
───────────────────────────────────────────────────────── */
.transparency-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  margin-bottom: var(--sp-10);
}

[data-theme="glass"] .transparency-section {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.transparency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

/* Breakdown donut-like bar */
.fund-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.fund-breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.fund-color-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.fund-label { font-size: var(--text-sm); color: var(--color-text-2); flex: 1; }
.fund-pct   { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-text); min-width: 40px; text-align: right; }

.fund-bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 4px;
}
.fund-bar { height: 100%; border-radius: var(--r-full); transition: width .6s var(--ease) .3s; }

/* Recent transactions */
.recent-tx-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.recent-tx-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.recent-tx-item:last-child { border-bottom: none; }

.recent-tx-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.recent-tx-name  { color: var(--color-text); font-weight: var(--weight-medium); }
.recent-tx-time  { font-size: var(--text-xs); color: var(--color-text-3); }
.recent-tx-amount { margin-left: auto; color: var(--color-brand); font-weight: var(--weight-semi); }