/* ============================================================ support page (/donate)
   One card per way to pay. The colour of a card comes from its "kind" (site.css,
   [data-kind]); a card with three or more details spans the whole row, so the
   small ones sit three in a row above it and nothing is left half empty. */

.don{padding-top:clamp(18px,3.4vh,44px)}
.don-hero{max-width:760px;margin:0 auto clamp(30px,4.4vh,50px);text-align:center;display:flex;flex-direction:column;align-items:center}
.don-hero .eyebrow{margin-bottom:.9rem}
.don-hero h1{font-size:clamp(2.35rem,4.8vw,4rem);margin:0 0 .32em}
.don-hero .lead{margin:0 auto;max-width:52ch;text-wrap:balance}

/* a heart that beats twice every few seconds, the way a pulse does */
.don-heart{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:1.1rem;color:var(--red);
  background:radial-gradient(circle at 50% 45%,rgba(211,33,40,.16),rgba(211,33,40,.06) 70%);box-shadow:0 0 0 1px rgba(211,33,40,.14) inset}
.don-heart .ic{width:28px;height:28px;animation:don-beat 2.6s var(--ease) infinite}
.don-heart .ic path,.don-note .ic path{fill:currentColor;stroke:none}
@keyframes don-beat{0%,40%,100%{transform:scale(1)}8%{transform:scale(1.16)}16%{transform:scale(1)}24%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.don-heart .ic{animation:none}}

.don-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(14px,1.7vw,22px);max-width:1120px;margin:0 auto}
.don-card--wide{grid-column:1 / -1}
@media (max-width:1100px){
  .don-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* two columns and an odd number of small cards: the last one takes the row */
  .don-card:not(.don-card--wide):nth-last-child(1 of .don-card:not(.don-card--wide)):nth-child(odd of .don-card:not(.don-card--wide)){grid-column:1 / -1}
}
@media (max-width:680px){.don-grid{grid-template-columns:1fr}}

.don-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-width:0;
  padding:clamp(20px,2.2vw,26px);border-radius:24px;background:var(--surface-3);border:1px solid var(--line);
  box-shadow:0 26px 50px -40px rgba(var(--shadow),.45);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.don-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 80% at 0% 0%,var(--k-glow),transparent 58%)}
@media (hover:hover){
  .don-card:hover{transform:translateY(-4px);border-color:var(--k-line);box-shadow:0 34px 60px -36px rgba(var(--shadow),.5)}
}

.don-head{display:flex;align-items:center;gap:14px;min-width:0}
.don-mark{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--k1),var(--k2));box-shadow:0 12px 22px -14px var(--k2),inset 0 1px 0 rgba(255,255,255,.25);
  font-family:var(--sans);font-weight:800;font-size:1.6rem;line-height:1;letter-spacing:-.03em}
.don-mark .ic{width:27px;height:27px;stroke-width:1.8}
.don-ttl{min-width:0}
.don-ttl h2{font-size:clamp(1.45rem,2vw,1.8rem);line-height:1.12}
.don-ttl p{margin:.28em 0 0;font-size:.92rem;line-height:1.4;color:var(--ink-3)}

.don-rows{display:flex;flex-direction:column;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.don-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab btn" "val btn";
  align-items:center;gap:3px 12px;padding:12px 10px 12px 16px;cursor:pointer;transition:background .25s}
.don-row + .don-row{border-top:1px solid var(--line)}
.don-lab{grid-area:lab;font-family:var(--cond);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.don-val{grid-area:val;min-width:0;font-size:1.03rem;font-weight:600;color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;cursor:text}
.don-btn{grid-area:btn;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface-3);color:var(--ink-2);
  transition:background .25s,border-color .25s,color .25s,transform .2s var(--ease)}
.don-btn .ic{width:18px;height:18px}
.don-btn .i-ok{display:none}
@media (hover:hover){
  .don-row:hover{background:var(--tint)}
  .don-row:hover .don-btn{border-color:var(--k1);color:var(--k2)}
  [data-theme=dark] .don-row:hover .don-btn{color:var(--ink)}
}
.don-btn:active{transform:scale(.94)}
.don-btn:focus-visible{outline:2px solid var(--k1);outline-offset:2px}
.don-row.done{background:rgba(14,158,147,.1)}
.don-row.done .don-btn{background:var(--ok);border-color:var(--ok);color:#fff}
.don-row.done .i-copy{display:none}
.don-row.done .i-ok{display:block}

@media (max-width:520px){
  .don-card{padding:18px;gap:16px}
  .don-row{grid-template-areas:"lab btn" "val val";gap:2px 10px;padding:8px 8px 12px 14px}
  .don-btn{width:38px;height:38px}
  .don-btn .ic{width:17px;height:17px}
}
@media (max-width:374px){.don-val{font-size:.95rem}}

/* the wide card: title on the left, each detail on one line on the right */
@media (min-width:960px){
  .don-card--wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:24px 32px}
  .don-card--wide .don-row{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"lab val btn";padding:10px 10px 10px 18px}
  .don-card--wide .don-val{font-size:1.12rem}
  .don-card--wide .don-go{grid-column:2}
}

.don-card .don-go{align-self:flex-start;margin-top:auto;background:linear-gradient(140deg,var(--k1),var(--k2));box-shadow:0 12px 24px -16px var(--k2)}
.don-card .don-go .ic{width:15px;height:15px}
@media (hover:hover){.don-card .don-go:hover{background:linear-gradient(140deg,var(--k2),var(--k2));box-shadow:0 18px 30px -16px var(--k2)}}

.don-note{display:flex;align-items:center;justify-content:center;gap:.5em;margin:clamp(30px,4.6vh,52px) 0 0;text-align:center;
  font-family:var(--display);font-stretch:87.5%;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.2;color:var(--ink)}
.don-note .ic{flex:none;width:.8em;height:.8em;color:var(--red)}

/* "Скопировано" + what exactly went to the clipboard; on a phone it rides above the WhatsApp button */
.don-toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:.6em;
  max-width:min(92vw,460px);padding:.78em 1.25em;border-radius:999px;background:#0E1E38;color:#fff;font-size:.92rem;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translate(-50%,16px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.don-toast.on{opacity:1;transform:translate(-50%,0)}
.don-toast b{flex:none;font-weight:600;color:#7FE3D6}
.don-toast span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
@media (max-width:640px){.don-toast{bottom:calc(88px + env(safe-area-inset-bottom))}}