/* ==========================================================
   DONATE  —  /donate.html + /en/donate.html
   Scoped .donate-* on tokens.css. Shares .page-hero,
   .hi-section-heading, .hi-shell, .hi-btn from components.css.
   ========================================================== */

.donate-page .hi-section { padding-block: clamp(48px, 6vw, 88px); }

/* ---- principles strip ------------------------------------ */
.donate-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 24px);
    padding: clamp(20px, 3vw, 30px) 0;
    border-block: 1px solid var(--rule);
}
.donate-principles div { display: grid; gap: 4px; }
.donate-principles span {
    font-size: var(--step-cap);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.donate-principles strong {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}
@media (max-width: 720px) {
    .donate-principles { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- cause selector ------------------------------------- */
.donate-selector {
    max-width: 640px;
    margin: clamp(24px, 3vw, 36px) 0;
    padding: clamp(18px, 2.4vw, 26px);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.donate-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ink);
}
.donate-selector select {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink-body);
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
}
.donate-selector select:disabled { opacity: .6; }
.donate-selector__help { margin: 10px 0 0; font-size: var(--step-sm); color: var(--ink-muted); }

/* ---- the resolved route -------------------------------- */
.donate-route { margin-top: clamp(20px, 3vw, 32px); }
.donate-route__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    margin-bottom: 18px;
}
.donate-route__cause { font-size: var(--step-sm); color: var(--ink-muted); }
.donate-route__trust {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    color: var(--primary);
}
#route-status, #route-incomplete { font-size: var(--step-sm); }
#route-incomplete {
    width: 100%;
    margin: 6px 0 0;
    padding: 10px 14px;
    color: #7a3c12;
    background: #f7ecd9;
    border: 1px solid #e4c9a1;
    border-radius: 8px;
}

.donate-route__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(18px, 3vw, 34px);
    align-items: start;
}
@media (max-width: 820px) {
    .donate-route__grid { grid-template-columns: 1fr; }
}

.donate-card {
    padding: clamp(18px, 2.4vw, 26px);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.donate-card h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}
.donate-card__intro { margin: 0 0 16px; font-size: var(--step-sm); color: var(--ink-muted); }

.donate-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
}
.donate-field:first-of-type { border-top: 0; }
.donate-field span {
    grid-column: 1;
    font-size: var(--step-cap);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.donate-field strong {
    grid-column: 1;
    font-family: var(--font-latin);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}
.donate-field .is-pending {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 500;
    color: var(--ink-muted);
}
.donate-copy {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding: 5px 12px;
    font-size: var(--step-sm);
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    cursor: pointer;
}
.donate-copy:hover { background: var(--bg-wash); }

.donate-compliance {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: var(--step-sm);
}
.donate-compliance span { color: var(--ink-muted); }
.donate-compliance strong { font-family: var(--font-latin); }
.donate-compliance a { display: inline-block; margin-top: 4px; color: var(--accent); }

.donate-upi { text-align: center; }
.donate-upi__qr {
    width: 190px;
    max-width: 100%;
    margin: 4px auto 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 10px;
}
.donate-upi__id {
    font-family: var(--font-latin);
    font-weight: 600;
    word-break: break-all;
    color: var(--ink);
}
.donate-upi__caption { font-size: var(--step-sm); color: var(--ink-muted); }
.donate-upi__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.donate-upi__actions [aria-disabled="true"] { opacity: .45; pointer-events: none; }

#copy-status, #receipt-status { margin-top: 10px; font-size: var(--step-sm); color: var(--gold-deep); }

/* ---- the "why no gateway" note ------------------------- */
.donate-note {
    display: flex;
    gap: 16px;
    margin: clamp(24px, 3vw, 36px) 0;
    padding: clamp(16px, 2.2vw, 24px);
    background: var(--bg-wash);
    border-radius: var(--radius);
}
.donate-note__mark {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: 1.6rem;
    color: var(--gold-deep);
}
.donate-note p { margin: 4px 0 0; font-size: var(--step-sm); }

/* ---- receipt form ------------------------------------- */
.donate-receipt { border-top: 1px solid var(--rule); }
.donate-receipt__privacy {
    margin: 0 0 22px;
    padding: 14px 16px;
    font-size: var(--step-sm);
    background: var(--surface-sunk);
    border-radius: 10px;
}
.donate-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
}
@media (max-width: 640px) { .donate-form__grid { grid-template-columns: 1fr; } }
.donate-form__field { display: grid; gap: 5px; }
.donate-form__field--wide { grid-column: 1 / -1; }
.donate-form__field label { font-weight: 600; font-size: var(--step-sm); color: var(--ink); }
.donate-form__field input,
.donate-form__field textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--ink-body);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
}
.donate-form__field input[readonly] { background: var(--surface-sunk); color: var(--ink-muted); }
.donate-form__field small { font-size: var(--step-cap); color: var(--ink-muted); }

#no-80g-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 14px;
    font-size: var(--step-sm);
    background: #f7ecd9;
    border: 1px solid #e4c9a1;
    border-radius: 8px;
}

.donate-consent {
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
    font-size: var(--step-sm);
}
.donate-consent input { margin-top: 3px; flex: 0 0 auto; }

.donate-form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---- 3 steps + safety --------------------------------- */
.donate-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
    margin-top: clamp(24px, 3vw, 36px);
}
.donate-steps article span {
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: var(--gold-deep);
}
.donate-steps h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.donate-steps p { margin: 0; font-size: var(--step-sm); color: var(--ink-body); }

.donate-safety {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
}
.donate-safety h3 { margin: 0 0 4px; font-size: 1rem; }
.donate-safety p { margin: 0; font-size: var(--step-sm); color: var(--ink-body); }

@media (max-width: 720px) {
    .donate-steps, .donate-safety { grid-template-columns: 1fr; }
}