/* =========================================================
   Donation page
   ========================================================= */

.donate-hero{
  position: relative; overflow: hidden;
  text-align:center; padding: 90px clamp(20px,5vw,56px) 70px; max-width:720px; margin:0 auto;
}
.donate-hero h1{ font-family: var(--font-display); font-size: clamp(2rem,4vw,2.8rem); margin: 14px 0; position:relative; z-index:2; }
.donate-hero .eyebrow, .donate-hero .section-sub{ position:relative; z-index:2; }

.donate-hero-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
/* petals here use their own quick, contained animation (see setupHeroDecoration
   in donate.js) — the shared full-page petal effect elsewhere on the site is
   built for tall viewport-height heroes and reads as barely-moving in a box
   this compact, so this page spawns its own faster-cycling version instead. */
.donate-hero-fx .petal{
  position:absolute; top:-12%;
  animation-name: petalDriftBox;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes petalDriftBox{
  0%{ top:-12%; opacity:0; }
  15%{ opacity:.9; }
  100%{ top:112%; opacity:.7; transform: translateX(var(--drift,20px)) rotate(340deg); }
}

.donate-hero-flowers{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 0 clamp(0px, 8vw, 60px);
}
/* Flowers.svgFor() draws a full stem-and-leaves illustration (built for the
   bouquet builder); for a small decorative accent here we only want the
   bloom itself, so each one sits in a fixed-height clipping window that
   shows just the top of the artwork and hides the stem below it. */
.hero-bloom{
  width: 74px; height: 62px; overflow: hidden;
  opacity:.85; animation: floatY ease-in-out infinite;
}
.hero-bloom svg{ display:block; width: 74px; }
.donate-hero-flowers .hero-bloom:nth-child(1){ --r:-6deg; animation-duration:3.4s; margin-top: 14px; }
.donate-hero-flowers .hero-bloom:nth-child(2){ --r:5deg; animation-duration:4s; animation-delay:.3s; margin-top: 64px; }
.donate-hero-flowers .hero-bloom:nth-child(3){ --r:-4deg; animation-duration:3s; animation-delay:.5s; margin-top: 26px; }

/* ---- UPI ---- */
.upi-section{ max-width:420px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }
.upi-card{ padding: 34px 28px; text-align:center; }
.upi-card .icon{ font-size:2rem; margin-bottom:14px; }
.upi-card h3{ font-family: var(--font-serif-alt); margin-bottom:8px; font-size:1.2rem; }
.upi-card p{ color: var(--plum-quiet); font-size:0.88rem; line-height:1.6; margin-bottom:20px; }
.upi-card img{
  width: 200px; height:200px; border-radius: var(--radius-m); border:1px solid rgba(62,44,63,.1);
  margin: 0 auto 18px; display:block; background: var(--cream);
}
.upi-id-row{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background: var(--cream); padding: 10px 16px; border-radius: 999px;
}
.upi-id-row span{ font-size:0.88rem; font-weight:600; color: var(--plum); }

.why-section{ max-width:760px; margin: 70px auto 0; padding: 0 clamp(20px,5vw,56px); text-align:center; }
.why-list{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin-top:30px; text-align:left; }
.why-item{ padding:22px; }
.why-item h4{ font-family: var(--font-serif-alt); font-size:1rem; margin-bottom:6px; }
.why-item p{ font-size:0.85rem; color: var(--plum-quiet); line-height:1.6; }

.support-form{ max-width:520px; margin: 70px auto 0; padding: 0 clamp(20px,5vw,56px); }
.support-form .card{ padding: 30px; }
.support-form input, .support-form textarea{
  width:100%; padding:13px 16px; border-radius: var(--radius-m); border:1.5px solid rgba(62,44,63,.12);
  margin-bottom:14px; font-size:0.92rem; background: var(--cream);
}
.support-form textarea{ min-height:90px; resize:vertical; }

.supporters-wall{ max-width:900px; margin: 60px auto 100px; padding: 0 clamp(20px,5vw,56px); }
.supporter-mode-notice{
  text-align:center; font-size:0.82rem; max-width:520px; margin: 12px auto 0;
  padding: 10px 16px; border-radius: var(--radius-m); line-height:1.5;
}
.supporter-mode-notice:empty{ display:none; }
.supporter-mode-notice.local{ background:#FBF0DC; color:#7A5A24; }
.supporters-list{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:24px; }
.supporter-card{ padding:16px 18px; }
.supporter-card .name{ font-weight:600; font-size:0.92rem; }
.supporter-card .msg{ font-size:0.84rem; color: var(--plum-quiet); margin-top:6px; line-height:1.5; }
.supporter-card .time{ font-size:0.72rem; color: var(--plum-quiet); opacity:.7; margin-top:8px; }