/* donate.css (FIXED + cleaned up + adds zakat button style + smoother defaults)
   - Keeps your exact look, just tightens inconsistencies and adds missing pieces
   - Adds: proper body/background resets, better focus states, better mobile spacing
   - Adds: .donate-btn--zakat styling (for your hero Zakat fund button)
*/

/* ===== Base ===== */
:root{
  --sa-navy:#0b1228;
  --sa-blue:#1e2d64;
  --sa-blue2:#273581;
  --sa-red:#e24533;
  --sa-red2:#c13a32;
  --sa-soft:#f9fafb;
  --sa-text:#1f2937;
  --sa-muted:#4b5563;
  --sa-ring:#e6e9f2;
  --sa-shadow:0 14px 34px rgba(0,0,0,.08);

  --sa-radius:18px;
  --sa-radius2:16px;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ margin:0; padding:0; width:100%; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--sa-text);
  background: #fff;
  line-height: 1.55;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ===== HERO ===== */
.donate-hero{
  position: relative;
  overflow: hidden;
  padding: 4.5rem 1rem 3.5rem;
  background: #060b1f;
}

@media (max-width: 760px){
  .donate-hero{ padding: 3.8rem 1rem 3rem; }
}

.donate-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(226,69,51,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(0deg, rgba(11,18,40,.86), rgba(11,18,40,.86));
  z-index:0;
}

.donate-hero__inner{
  position: relative;
  z-index: 1;
  width: min(1120px, 100% - 2rem);
  margin: 0 auto;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1.2fr .8fr;
  align-items: start;
}

@media (max-width: 980px){
  .donate-hero__inner{ grid-template-columns: 1fr; }
}

.donate-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#e5e7eb;
  font-weight:800;
  font-size: .95rem;
}

.donate-title{
  margin: .9rem 0 .55rem;
  color: #ffb6a6;
  font-weight: 900;
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  letter-spacing: -0.02em;
}

.donate-sub{
  margin: 0 0 1.2rem;
  color:#dfe6ff;
  line-height: 1.7;
  font-size: 1.05rem;
  max-width: 58ch;
}

/* CTA row */
.donate-ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin: 1rem 0 1.2rem;
}

.donate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  border: 2px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
  cursor: pointer;
}

.donate-btn:active{ transform: translateY(0); }

.donate-btn--primary{
  background: var(--sa-red);
  color:#fff;
  box-shadow: 0 10px 22px rgba(226,69,51,.22);
}
.donate-btn--primary:hover{
  background: var(--sa-red2);
  transform: translateY(-1px);
}

.donate-btn--ghost{
  background: transparent;
  border-color: rgba(223,230,255,.85);
  color: rgba(223,230,255,.95);
}
.donate-btn--ghost:hover{
  background: rgba(223,230,255,.95);
  color: var(--sa-blue);
  transform: translateY(-1px);
}

/* ✅ ZAKAT BUTTON (use in hero CTA row) */
.donate-btn--zakat{
  background: rgba(243, 210, 24, .14);
  border-color: rgba(243, 210, 24, .45);
  color: #f3d218;
}
.donate-btn--zakat:hover{
  background: rgba(243, 210, 24, .22);
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(243, 210, 24, .65);
}

.donate-btn--soft{
  width:100%;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color:#eef1f7;
  margin-top: .9rem;
}
.donate-btn--soft:hover{
  background: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

/* Hero badges */
.donate-badges{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-top: .7rem;
}

@media (max-width: 760px){
  .donate-badges{ grid-template-columns: 1fr; }
}

.donate-badge{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--sa-radius2);
  padding: .95rem;
  display:flex;
  gap: .8rem;
  align-items:flex-start;
  color:#e8ecff;
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}

.donate-badge i{
  font-size: 1.2rem;
  color: #f3d218;
  margin-top: .15rem;
}

.donate-badge h3{
  margin:0;
  font-size: 1.02rem;
  font-weight: 900;
  color:#fff;
}
.donate-badge p{
  margin:.15rem 0 0;
  color:#dfe6ff;
  font-size: .95rem;
}

/* Right quote card */
.donate-quoteCard{
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--sa-radius);
  padding: 1.1rem 1.05rem;
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color:#eef1f7;
}

.donate-quoteIcon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(226,69,51,.18);
  border: 1px solid rgba(226,69,51,.28);
  color:#ffb6a6;
  margin-bottom: .7rem;
}

.donate-quoteText{
  margin: 0 0 .45rem;
  line-height: 1.7;
  font-size: 1.02rem;
}

.donate-quoteRef{
  margin:0;
  opacity:.9;
  font-weight:800;
}

.donate-mini{
  margin-top: .9rem;
  display:grid;
  gap: .55rem;
}

.donate-miniItem{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
}

.donate-miniItem .dot{
  width:10px;height:10px;border-radius:999px;
  background: #ffb6a6;
  margin-top:.45rem;
  flex: 0 0 auto;
}

.donate-miniItem p{
  margin:0;
  color:#dfe6ff;
  line-height: 1.55;
}

/* ===== SECTIONS ===== */
.donate-section{
  padding: 3.2rem 1rem;
  background: #fff;
}

@media (max-width: 760px){
  .donate-section{ padding: 2.6rem 1rem; }
}

.donate-section--tint{
  background: var(--sa-soft);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.donate-container{
  width: min(1120px, 100% - 2rem);
  margin: 0 auto;
}

.donate-sectionHeader{
  text-align:center;
  max-width: 780px;
  margin: 0 auto 1.8rem;
}

.donate-sectionHeader h2{
  margin:0 0 .55rem;
  color: var(--sa-blue);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.35rem + 1vw, 2.25rem);
}

.donate-sectionHeader p{
  margin:0;
  color: var(--sa-muted);
  font-size: 1.06rem;
  line-height: 1.7;
}

/* ===== Cards grid ===== */
.donate-grid3{
  display:grid;
  gap: 1.1rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .donate-grid3{ grid-template-columns: 1fr; }
}

.donate-card{
  background:#fff;
  border: 1.5px solid #f0f0f3;
  border-radius: var(--sa-radius);
  padding: 1.2rem 1.1rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.donate-card:hover{
  transform: translateY(-3px);
  border-color: #f1cccb;
  box-shadow: 0 16px 30px rgba(0,0,0,.08);
}

.donate-cardIcon{
  width:54px;height:54px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom: .75rem;
  font-size: 1.25rem;
}
.donate-cardIcon.red{ background:#fceeee; color:#c42e2e; }
.donate-cardIcon.blue{ background:#e8f0ff; color:#1e2d64; }
.donate-cardIcon.green{ background:#e8f9ec; color:#2c974b; }

.donate-card h3{
  margin:0 0 .4rem;
  color: var(--sa-blue);
  font-weight: 900;
  font-size: 1.18rem;
}

.donate-card p{
  margin:0;
  color: var(--sa-muted);
  line-height: 1.65;
}

/* ===== Monthly split ===== */
.donate-split{
  display:grid;
  gap: 1.25rem;
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
}
@media (max-width: 980px){
  .donate-split{ grid-template-columns: 1fr; }
}

.donate-splitLeft h2{
  margin:0 0 .55rem;
  color: var(--sa-blue);
  font-weight: 900;
  font-size: 2rem;
}

.donate-splitLeft p{
  margin: 0 0 1rem;
  color: var(--sa-muted);
  line-height: 1.7;
  font-size: 1.05rem;
}

.donate-chipRow{
  display:flex;
  flex-wrap:wrap;
  gap: .6rem;
  margin: .6rem 0 1rem;
}

.donate-chip{
  border: 1.5px solid #dfe3ee;
  background:#fff;
  color: var(--sa-blue);
  padding: .6rem .9rem;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.donate-chip:hover{
  transform: translateY(-1px);
  border-color: #c8dbfb;
}

.donate-chip--active{
  background: rgba(226,69,51,.10);
  border-color: rgba(226,69,51,.32);
  color: #c13a32;
}

.donate-note{
  margin-top: 0;
  font-size: .98rem;
  color: #6b7280;
}

.donate-impact{
  background:#fff;
  border: 1.5px solid #f0f0f3;
  border-radius: var(--sa-radius);
  padding: 1.2rem 1.1rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.donate-impact h3{
  margin:0 0 .7rem;
  color: var(--sa-blue);
  font-weight: 900;
}

.donate-impact ul{
  list-style:none;
  padding:0;
  margin:0 0 1rem;
  display:grid;
  gap: .5rem;
}

.donate-impact li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  color: var(--sa-muted);
  line-height: 1.6;
}

.donate-impact i{
  color:#2c974b;
  margin-top:.25rem;
}

.donate-impactBar__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .45rem;
}

.muted{ color:#6b7280; }
.small{ font-size: .92rem; }

.donate-progress{
  width:100%;
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow:hidden;
  border: 1px solid #e5e7eb;
}

.donate-progress__fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(226,69,51,.85), rgba(39,53,129,.85));
}

/* ===== Two panels ===== */
.donate-grid2{
  display:grid;
  gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px){
  .donate-grid2{ grid-template-columns: 1fr; }
}

.donate-panel{
  background:#fff;
  border: 1.5px solid #f0f0f3;
  border-radius: var(--sa-radius);
  padding: 1.25rem 1.15rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.donate-panel h2{
  margin:0 0 .55rem;
  color: var(--sa-blue);
  font-weight: 900;
}

.donate-panel p{
  margin:0 0 .9rem;
  color: var(--sa-muted);
  line-height: 1.7;
}

.donate-bullets{
  list-style:none;
  padding:0;
  margin:0 0 .4rem;
  display:grid;
  gap: .55rem;
}

.donate-bullets li{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  color: var(--sa-muted);
}

.donate-bullets i{
  color:#2c974b;
  margin-top:.2rem;
}

.donate-panel--dark{
  background: linear-gradient(135deg, #1e2d64, #273581);
  border: 1px solid rgba(255,255,255,.12);
  color:#eef1f7;
}

.donate-panel--dark h2{ color:#fff; }
.donate-panel--dark p{ color:#dfe6ff; }

.donate-3steps{
  display:grid;
  gap:.65rem;
  margin-top: .5rem;
}

.step{
  display:flex;
  gap:.75rem;
  align-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  padding: .75rem .8rem;
  border-radius: 14px;
}

.step .num{
  width:34px;height:34px;border-radius: 12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,182,166,.18);
  border: 1px solid rgba(255,182,166,.28);
  color:#ffb6a6;
  font-weight: 900;
}

.step p{
  margin:0;
  color:#eef1f7;
}

/* ===== Zeffy iframe ===== */
.zeffy-frameWrap{
  background:#fff;
  border: 1.5px solid #f0f0f3;
  border-radius: var(--sa-radius);
  overflow:hidden;
  box-shadow: var(--sa-shadow);
}

/* NOTE: Zeffy might block embedding due to X-Frame-Options.
   We still include it; if it blocks, the link below will work. */
#zeffyFrame{
  width: 100%;
  height: min(980px, 120vh);
  border: 0;
}

.donate-altLink{
  margin-top: .8rem;
  text-align:center;
}

.donate-altLink a{
  color: var(--sa-red2);
  font-weight: 900;
  text-decoration: none;
}

.donate-altLink a:hover{ text-decoration: underline; }

/* ===== FAQ ===== */
.donate-faq{
  max-width: 860px;
  margin: 0 auto;
  display:grid;
  gap:.75rem;
}

.faq-item{
  background:#fff;
  border: 1.5px solid #f0f0f3;
  border-radius: var(--sa-radius2);
  padding: .9rem 1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.faq-item summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--sa-blue);
  list-style: none;
  outline: none;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item p{
  margin: .65rem 0 0;
  color: var(--sa-muted);
  line-height: 1.7;
}

/* Make details open animation feel nicer */
.faq-item[open]{ border-color:#e9e9f2; }