/* ==========================================================================
   COODU Trust — DONATE page ("Gift Multiplier")
   Built on the shared design system (coodu-tokens/base/components/motion).
   Sections: hero · impact proof · give (form + live impact mirror) ·
   other ways to give · success. Mobile-first; honors prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO --- */
.donate-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 42vw, 420px);
  padding-block: clamp(48px, 8vw, 84px);
  background: var(--grad-hero);
  isolation: isolate;
  overflow: hidden;
  color: var(--color-on-dark);
}
.donate-hero__layers { position: absolute; inset: 0; z-index: -1; }
.donate-hero__layers::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("https://res.cloudinary.com/dvxbg6to3/image/upload/f_auto,q_auto,w_1600/v1754551326/coodu-trust/images/headers/Donate_bg.jpg");
  background-size: cover;
  background-position: center;
}
.donate-hero__scrim { position: absolute; inset: 0; background: var(--overlay-hero); }
@media (max-width: 760px) {
  .donate-hero__scrim { background: var(--overlay-hero-mobile); }
}
.donate-hero__content { max-width: 640px; }
.donate-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-amber-light);
}
.donate-hero__eyebrow i { width: 16px; height: 16px; }
.donate-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  margin: 10px 0 12px;
  color: var(--color-on-dark);   /* white over the dark hero scrim */
}
.donate-hero__sub {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: rgba(255,255,255,.92);
  max-width: 36ch;
}
.donate-hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 20px; padding: 0; list-style: none;
  font-size: var(--fs-small); color: rgba(255,255,255,.85);
}
.donate-hero__meta li { display: inline-flex; align-items: center; gap: 7px; }
.donate-hero__meta i { width: 16px; height: 16px; color: var(--color-amber-light); }

/* -------------------------------------------------------- IMPACT PROOF --- */
.donate-proof { margin-top: clamp(-56px, -5vw, -36px); position: relative; z-index: 2; }
.donate-proof__card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 28px) clamp(12px, 3vw, 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-band);
  padding: clamp(20px, 4vw, 30px) clamp(18px, 4vw, 34px);
  text-align: center;
}
@media (min-width: 760px) { .donate-proof__card { grid-template-columns: repeat(4, 1fr); } }
.donate-proof .stat { gap: 4px; }
.donate-proof .stat__num { font-size: var(--fs-stat); }

/* --------------------------------------------------------------- GIVE --- */
.give__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 32px);
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 980px) {
  .give__layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
}

/* ----- form card ----- */
.give__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-1);
  padding: clamp(20px, 4vw, 36px);
}
.give__group { border: 0; margin: 0 0 clamp(20px, 3.5vw, 30px); padding: 0; }
.give__group:last-of-type { margin-bottom: 0; }
.give__legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-strong);
  margin-bottom: 12px;
  padding: 0;
}
.give__cur, .give__opt-label { color: var(--text-muted); font-weight: 400; font-family: var(--font-body); font-size: var(--fs-small); }

/* frequency segmented control */
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 5px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.seg__opt {
  min-height: 42px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  color: var(--text-body);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.seg__opt.is-active { background: var(--surface); color: var(--color-primary); box-shadow: var(--shadow-1); }
.seg__opt.is-soon { color: var(--text-muted); cursor: not-allowed; }
.seg__tag {
  font-family: var(--font-body); font-weight: 600; font-size: .625rem;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--surface-tint-orange); color: var(--color-accent-dark);
  padding: 1px 6px; border-radius: var(--radius-pill);
}

/* amount chips */
.amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.amount-chip {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; cursor: pointer;
  min-height: 64px; padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.amount-chip__val { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text-strong); }
.amount-chip__note { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.3; }
.amount-chip:hover { border-color: var(--color-primary); }
.amount-chip.is-active {
  border-color: var(--color-accent);
  background: var(--surface-tint-orange);
  box-shadow: 0 0 0 1px var(--color-accent) inset, var(--shadow-donate);
}
.amount-chip.is-active .amount-chip__val { color: var(--color-accent-dark); }

/* custom amount */
.amounts__custom { margin-top: 14px; }
.input-rupee {
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: var(--radius-btn);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.input-rupee > span {
  padding: 0 12px; font-family: var(--font-display); font-weight: 600;
  color: var(--text-muted); align-self: stretch; display: flex; align-items: center;
  background: var(--surface-alt); border-right: 1px solid var(--border);
}
.input-rupee input { border: 0; background: transparent; }
.input-rupee:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30,126,52,.15); }

/* causes */
.causes { display: flex; flex-wrap: wrap; gap: 8px; }
.cause-opt {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 14px; cursor: pointer;
  background: var(--surface); color: var(--text-body);
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-small);
  transition: border-color var(--ease), background-color var(--ease), color var(--ease);
}
.cause-opt i { width: 16px; height: 16px; }
.cause-opt:hover { border-color: var(--color-primary); }
.cause-opt.is-active { border-color: var(--color-primary); background: var(--surface-tint); color: var(--color-primary-dark); }

/* fields */
.give__field { margin-bottom: 14px; }
.give__field:last-child { margin-bottom: 0; }
.give__field-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 540px) { .give__field-row { grid-template-columns: 1fr 1fr; } }
.give__field label {
  display: block; margin-bottom: 6px;
  font-weight: 600; font-size: var(--fs-small); color: var(--text-strong);
}
.give__card input[type="text"],
.give__card input[type="email"],
.give__card input[type="tel"],
.give__card input[type="number"] {
  width: 100%; min-height: 46px;
  padding: 10px 14px; font-size: 1rem; color: var(--text-strong);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-btn);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.give__card input::placeholder { color: var(--text-muted); }
.give__card input:focus-visible { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30,126,52,.15); }
.u-upper { text-transform: uppercase; }
.u-upper::placeholder { text-transform: none; }

/* checkboxes */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 14px; font-size: var(--fs-small); color: var(--text-body); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--ease), border-color var(--ease);
}
.check__box i { width: 15px; height: 15px; color: #fff; opacity: 0; transition: opacity var(--ease); }
.check input:checked + .check__box { background: var(--color-primary); border-color: var(--color-primary); }
.check input:checked + .check__box i { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(30,126,52,.18); }

/* receipt details (revealed when 80G checked) */
.give__receipt-inner { padding-top: 14px; }
.give__receipt[hidden] { display: none; }

/* trust strip */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: clamp(20px, 3.5vw, 28px) 0 16px;
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
}
.trust__lock { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-small); color: var(--text-strong); }
.trust__lock i { width: 17px; height: 17px; color: var(--color-primary); }
.trust__marks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.trust__marks .mark {
  font-family: var(--font-display); font-weight: 600; font-size: .625rem; letter-spacing: .03em;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px;
}
.trust__badge {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: #5b4300; background: var(--color-amber); border-radius: var(--radius-pill);
  padding: 5px 12px;
}

/* CTA — sticky to the viewport bottom on mobile only; inline on desktop */
.give__cta {
  width: 100%; min-height: 54px; font-size: 1.06rem;
}
@media (max-width: 979px) {
  .give__cta { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--shadow-2), var(--shadow-donate); }
}
.give__cta-load { display: inline-flex; align-items: center; gap: 8px; }
.give__cta-load i { width: 18px; height: 18px; animation: dn-spin 1s linear infinite; }
.give__cta.is-loading .give__cta-text { display: none; }
.give__fineprint {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 2px 0; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5;
}
.give__fineprint i { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.give__fineprint a { color: var(--color-primary-dark); }

@keyframes dn-spin { to { transform: rotate(360deg); } }

/* ----- LIVE IMPACT MIRROR (signature moment) ----- */
.give__mirror { order: -1; }                 /* mobile: above the form */
@media (min-width: 980px) {
  .give__mirror { order: 0; position: sticky; top: 92px; }
}
.mirror__card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #20633a, #11371b);
  color: var(--color-on-dark);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-band);
  padding: clamp(22px, 3.5vw, 30px);
}
.mirror__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: rgba(255,255,255,.85); }
.mirror__eyebrow span { color: var(--color-amber-light); }
.mirror__big { margin: 6px 0 0; line-height: 1; }
.mirror__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 2.4rem + 3.6vw, 4.6rem);
  color: #fff; font-variant-numeric: tabular-nums;
}
.mirror__noun { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 2px 0 0; }
.mirror__caption { color: rgba(255,255,255,.82); font-size: var(--fs-small); margin: 6px 0 0; max-width: 26ch; }
.mirror__leaf {
  position: absolute; right: -10px; bottom: -14px; opacity: .14; color: #fff; pointer-events: none;
}
.mirror__leaf i { width: 132px; height: 132px; }
.mirror__foot {
  display: flex; align-items: center; gap: 7px;
  margin: clamp(18px, 3vw, 26px) 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-micro); color: rgba(255,255,255,.7);
}
.mirror__foot i { width: 14px; height: 14px; color: var(--color-amber-light); flex: 0 0 auto; }

/* ----- OTHER WAYS TO GIVE ----- */
.otherways { max-width: 1080px; margin: clamp(24px, 4vw, 40px) auto 0; }
.otherways__acc { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.otherways__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; background: transparent; border: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-strong);
}
.otherways__trigger > span { display: inline-flex; align-items: center; gap: 10px; }
.otherways__trigger i { width: 18px; height: 18px; color: var(--color-primary); }
.otherways__trigger[aria-expanded="true"] i[data-lucide="chevron-down"] { transform: rotate(180deg); }
.otherways__acc .acc__panel { padding: 4px 20px 22px; }
.otherways__grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 28px); }
@media (min-width: 700px) { .otherways__grid { grid-template-columns: 1fr 1fr; } }
.otherways__block h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-strong); margin: 0 0 10px; }
.bankdl { margin: 0; }
.bankdl > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.bankdl dt { color: var(--text-muted); font-size: var(--fs-small); }
.bankdl dd { margin: 0; font-weight: 600; color: var(--text-strong); display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.copybtn { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: color var(--ease), border-color var(--ease); }
.copybtn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.copybtn.is-copied { color: var(--color-success); border-color: var(--color-success); }
.copybtn i { width: 15px; height: 15px; }
.otherways__addr { font-style: normal; color: var(--text-body); line-height: 1.6; }
.otherways__note { font-size: var(--fs-small); color: var(--text-muted); margin-top: 12px; }
.otherways__note a, .otherways__block a { color: var(--color-primary-dark); }

/* ----- SUCCESS (Impact Receipt) ----- */
.give__success { max-width: 640px; margin: 0 auto; }
.receipt {
  text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-frame); box-shadow: var(--shadow-2);
  padding: clamp(28px, 5vw, 44px);
}
.receipt__check {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-tint); color: var(--color-success);
}
.receipt__check i { width: 32px; height: 32px; }
.receipt__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--text-strong); margin: 0 0 6px; }
.receipt__lead { color: var(--text-body); margin: 0 0 18px; }
.receipt__rows { text-align: left; border: 1px solid var(--border-soft); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 18px; }
.receipt__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; }
.receipt__rows > div:nth-child(odd) { background: var(--surface-alt); }
.receipt__rows dt { color: var(--text-muted); font-size: var(--fs-small); }
.receipt__rows dd { margin: 0; font-weight: 600; color: var(--text-strong); }
.receipt__impact { background: var(--surface-tint); border-radius: var(--radius-card); padding: 14px 16px; font-size: var(--fs-small); color: var(--color-primary-dark); margin-bottom: 20px; }
.receipt__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* inline form messages */
.give__msg { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-btn); font-size: var(--fs-small); margin-bottom: 16px; }
.give__msg--error { background: #fdecec; color: var(--color-error); }
.give__msg--info  { background: var(--surface-alt); color: var(--text-body); }
.give__msg i { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------------------------------------------------------- motion gate --- */
@media (prefers-reduced-motion: no-preference) {
  .amount-chip:hover { transform: translateY(-2px); }
  .cause-opt:hover { transform: translateY(-1px); }
  .amount-chip.is-pulse { animation: dn-pulse 320ms var(--ease-fn); }
}
@keyframes dn-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .give__cta-load i { animation: none; }
}