/* ==========================================================================
   NDF — donate.html: the donation panel (assets/support.js). A dark "field"
   plate like the hero panels: why it matters and the payment details on the
   left, the bank's UPI QR on a white card on the right, the social links
   under it. Colours only through site tokens (--field-*, --stamp), so it
   follows every skin in light and dark. The upi:// button shows on touch
   screens only (a desktop reader scans the QR with their phone instead).
   ========================================================================== */

.don{ padding-top:var(--s5); scroll-margin-top:var(--s2); }
@media (prefers-reduced-motion: reduce){ .don{ scroll-margin-top:96px; } }

.don-plate{
  /* the accent lifted towards the plate's ink, so small labels read on the dark plate in every skin */
  --don-accent:var(--stamp);
  --don-accent:color-mix(in srgb, var(--stamp) 55%, var(--field-ink));
  --don-rule:rgba(255,255,255,.13);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); align-items:center;
  padding:clamp(26px,4.2vw,60px);
}
.don-main{ min-width:0; }
.don .don-plate .don-eyebrow{ color:var(--don-accent); margin:0; }   /* out-ranks the skins' own .eyebrow colour */
.don h2{ font-size:clamp(28px,3.3vw,46px); line-height:1.08; color:var(--field-ink); margin:var(--s1) 0 0; max-width:22ch; }
.don-intro{ margin-top:var(--s2); max-width:60ch; font-size:17px; line-height:1.6; color:var(--field-ink); opacity:.84; }
.don-intro:empty{ display:none; }

.don-label{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--don-accent);
}

/* what a donation pays for: numbered like the one-pager's lists */
.don-funds{ margin-top:var(--s4); }
.don-funds ul{
  list-style:none; margin:var(--s1) 0 0; padding:0; counter-reset:fund;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s4);
}
.don-funds li{
  counter-increment:fund; display:flex; gap:12px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--don-rule);
  font-size:15.5px; line-height:1.4; color:var(--field-ink);
}
.don-funds li::before{ content:counter(fund, decimal-leading-zero); flex:none; font-family:var(--mono); font-size:11px; color:var(--don-accent); }

/* payment details */
.don-acct{ margin:var(--s4) 0 0; }
.don-row{
  display:grid; grid-template-columns:minmax(120px,160px) minmax(0,1fr); gap:var(--s2); align-items:center;
  padding:13px 0; border-bottom:1px solid var(--don-rule);
}
.don-row[hidden]{ display:none; }
.don-row dt{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--don-accent);
}
.don-row dd{ margin:0; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; font-size:17px; line-height:1.35; color:var(--field-ink); }
.don-val{ min-width:0; overflow-wrap:anywhere; }
.don-row[data-sup-row="upi"] .don-val,
.don-row[data-sup-row="number"] .don-val,
.don-row[data-sup-row="ifsc"] .don-val{ font-family:var(--mono); font-size:14.5px; letter-spacing:.02em; }
.don-copy{
  flex:none; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 11px; background:transparent; color:var(--field-ink);
  border:1px solid rgba(255,255,255,.3);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.don-copy:hover{ border-color:var(--field-ink); }
.don-copy.is-done{ background:var(--stamp); border-color:var(--stamp); color:var(--stamp-ink); }
.don :focus-visible{ outline:2px solid var(--don-accent); outline-offset:3px; }

.don-pay{ display:none; margin-top:var(--s3); }
@media (hover: none) and (pointer: coarse){ .don-pay{ display:block; } }
.don-pay[hidden]{ display:none; }
.don-note{ margin-top:var(--s2); min-height:1.5em; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; line-height:1.5; color:var(--field-ink); opacity:.8; }
.don-note:empty{ min-height:0; margin:0; }
.don-note.is-err{ color:var(--don-accent); opacity:1; }

/* the bank's QR on white (scanners need the contrast) inside amber corner marks */
.don-qr{ margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.don-qr[hidden]{ display:none; }
.don-qr-card{ position:relative; display:block; background:#fff; padding:14px; box-shadow:0 26px 50px -30px rgba(0,0,0,.85); }
.don-qr-card img{ display:block; width:clamp(184px,17vw,236px); height:auto; }
.don-qr-card::before{
  content:""; position:absolute; inset:-11px; pointer-events:none;
  --c:var(--don-accent);
  background:
    linear-gradient(var(--c),var(--c)) left top / 22px 2px, linear-gradient(var(--c),var(--c)) left top / 2px 22px,
    linear-gradient(var(--c),var(--c)) right top / 22px 2px, linear-gradient(var(--c),var(--c)) right top / 2px 22px,
    linear-gradient(var(--c),var(--c)) left bottom / 22px 2px, linear-gradient(var(--c),var(--c)) left bottom / 2px 22px,
    linear-gradient(var(--c),var(--c)) right bottom / 22px 2px, linear-gradient(var(--c),var(--c)) right bottom / 2px 22px;
  background-repeat:no-repeat;
}
.don-qr figcaption{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.don-qr figcaption b{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--field-ink); }
.don-qr figcaption small{ font-size:13.5px; color:var(--field-ink); opacity:.72; }

/* under the plate, on the page: the social links (Settings › Social links) and how to join the Digital Defenders */
.don-follow{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2) var(--s3);
  margin-top:var(--s3); padding-top:var(--s3);
}
.don-follow .don-label{ color:var(--ink-3); }
.don-join{ flex:1 1 320px; font-size:15px; line-height:1.5; color:var(--ink-2); }
.don-follow:has(.don-social[hidden]){ display:none; }   /* no social links set: nothing to message us on */

@media (max-width:980px){
  .don-plate{ grid-template-columns:1fr; gap:var(--s4); }
  .don-qr{ flex-direction:row; justify-content:flex-start; gap:var(--s4); padding:11px; }
  .don-qr figcaption{ align-items:flex-start; text-align:left; }
}
@media (max-width:620px){
  .don-funds ul{ grid-template-columns:1fr; }
  .don-row{ grid-template-columns:1fr; gap:6px; }
  .don-pay .btn{ width:100%; }
  .don-qr{ flex-direction:column; align-items:center; }
  .don-qr figcaption{ align-items:center; text-align:center; }
}