:root{
  --accent:#ff6b4a;
  --muted:#6b7280;
  --card-bg:#fff;
  --shadow:0 6px 18px rgba(16,24,40,0.08);
  --radius:12px;
  --gap:0.75rem;
  --max-width:64rem;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#111827;
}

/* Layout */
.donate-container{ display:flex; justify-content:center; margin:0 auto; padding:0 1rem; max-width:var(--max-width); box-sizing:border-box; }
.donate-text{ flex:1 1 auto; text-align:left; }

/* Donation list as stacked cards */
.donate-text ul{ padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:var(--gap); }
.donate-text li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--card-bg); padding:0.9rem 1rem; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(16,24,40,0.02); }

/* Primary hero */
.primary-row{ background:linear-gradient(90deg, rgba(255,107,74,1) 0%, rgba(255,86,56,0.95) 100%); color:#fff; border-radius:14px; padding:0.9rem; box-shadow:0 18px 40px rgba(255,107,74,0.12); margin-bottom:var(--gap); }
.primary-row-content{ display:flex; align-items:center; gap:1rem; justify-content:space-between; }
.primary-emoji{ font-size:24px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.12); border-radius:8px; flex:0 0 44px; }
.primary-copy{ flex:1 1 auto; margin-right:1rem; }
.primary-lead{ font-weight:600; margin:0; }

/* Main donate CTA */
.main-donate{ display:inline-block; padding:0.7rem 1.4rem; border-radius:12px; background:#fff; color:var(--accent); font-weight:800; border:none; box-shadow:0 10px 30px rgba(16,24,40,0.12); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; white-space:nowrap; }
.main-donate:is(:hover,:focus){ transform:translateY(-3px); box-shadow:0 18px 44px rgba(16,24,40,0.16); filter:brightness(.98); outline:3px solid rgba(255,255,255,0.14); outline-offset:3px; }

/* Small CTAs and links */
.donate-text .cta{ margin:0; white-space:nowrap; }
.donate-links{ display:flex; gap:var(--gap); align-items:center; }
.donate-links a{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 0.6rem; border-radius:10px; text-decoration:none; color:inherit; background:#c1d6ff; border:2px solid rgba(16,24,40,0.2); }
.donate-links img.fund-logo{ height:28px; width:auto; display:block; }

/* Push first CTA to the right */
.donate-text li > a:first-of-type {
  margin-left: auto;
}

/* Style inline CTAs in list items (physical donations, volunteer) */
.donate-text ul li > a{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 0.6rem; border-radius:10px; text-decoration:none; color:inherit; background:#c1d6ff; border:2px solid rgba(16,24,40,0.2); }
.donate-text ul li > a:is(:hover,:focus){ background:#c0392b; }

/* Details / dropdown styling */
.donate-text details{ width:100%; }
.donate-text summary{ list-style:none; display:flex; align-items:center; gap:1rem; padding:0; cursor:pointer; }
.donate-text summary::-webkit-details-marker{ display:none; }
.donate-text summary::before{ content:"▸"; margin-right:0.5rem; transition:transform .18s ease; color:var(--muted); }
.donate-text details[open] summary::before{ transform:rotate(90deg); }
.donate-text summary .label{ flex:1 1 auto; }
.donate-text summary > .cta{ margin-left:auto; }
.donate-text summary .donate-links{ margin-left:auto; display:flex; gap:var(--gap); align-items:center; }
.donate-text summary > .cta:is(:hover,:focus){ background:#c0392b; }
.donate-text .donate-details{ margin-top:0.6rem; color:var(--muted); padding-top:0.6rem; border-top:1px dashed rgba(16,24,40,0.04); }

/* Buttons with hover states */
.donate-text a.cta { transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.donate-text a.cta:hover,
.donate-text a.cta:focus { background: color-mix(in srgb, #ff6b4a 85%, black 15%); color: #fff; box-shadow: 0 4px 12px rgba(255,107,74,0.2); }

/* Responsive adjustments */
@media (max-width:640px){
  .primary-row-content{ flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .main-donate{ width:100%; text-align:center; box-sizing:border-box; }
  .donate-container{ padding:0 0.5rem; }
  .donate-text li{ flex-direction:column; align-items:flex-start; }
  .donate-text .label{ margin-bottom:0.5rem; }
  .donate-links{ flex-direction:column; align-items:stretch; gap:0.5rem; width:100%; }
  .donate-links a{ width:100%; justify-content:flex-start; }
  .donate-links img.fund-logo{ height:28px; }
  .donate-text ul li > a{ width:100%; justify-content:flex-start; }
}

/* Support page cards */
.support-actions{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin:2rem 0; }
.support-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1.5rem;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(16,24,40,0.05);
  text-decoration:none;
  color:inherit;
  transition:transform 0.2s, box-shadow 0.2s;
  border:1px solid rgba(16,24,40,0.04);
}
.support-card:hover,
.support-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(16,24,40,0.12);
}
.support-card:focus-visible{ outline:3px solid rgba(255,107,74,0.18); outline-offset:4px; }
.support-icon{ font-size:2.5rem; margin-bottom:0.75rem; }
.support-card-title{ margin:0 0 0.5rem; font-size:1.1rem; }
.support-card-text{ margin:0; font-size:0.9rem; color:#6b7280; }

@media (max-width:965px){
  .support-actions{ grid-template-columns:1fr; }
}