/* =========================================================================
   Houston Media Source — Donation Center & Universal Payment Gateway styles
   Built on the shared hms.css tokens (navy / gold / cream). Mobile-first,
   high-contrast, reduced-motion friendly. No new color language introduced.
   ========================================================================= */

/* ---- Campaign header ---- */
.donate-head{max-width:760px}
.donate-head .supporting{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lit);
  background:var(--gold-soft);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
}
.donate-head .purpose{margin-top:20px;font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--sub)}
.donate-amount-note{
  margin-top:16px;padding:14px 18px;border-radius:12px;
  border:1px dashed var(--line);background:rgba(255,255,255,.02);
  color:var(--text);font-size:.96rem;
}

/* ---- Flow / "what happens next" clarity strip ---- */
.donate-flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:26px 0 8px;
  background:var(--line-cool);border:1px solid var(--line-cool);border-radius:var(--radius);overflow:hidden;
}
@media(max-width:760px){.donate-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.donate-flow{grid-template-columns:1fr}}
.donate-flow .step{background:var(--navy);padding:18px 18px}
.donate-flow .step b{display:block;font-family:'Archivo';font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lit)}
.donate-flow .step span{display:block;margin-top:6px;color:var(--sub);font-size:.9rem;line-height:1.5}

/* ---- Payment module (active method: Zelle) ---- */
.pay-module{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(224,187,107,.06),rgba(255,255,255,.01));
  padding:clamp(22px,3vw,34px);margin-top:26px;
}
.pay-module-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pay-module-head h3{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.pay-badge{
  font-family:'Archivo';font-weight:800;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
}
.pay-badge-active{background:var(--gold);color:#1a1206}

.pay-steps{margin:20px 0 4px;padding-left:22px;display:grid;gap:8px}
.pay-steps li{color:var(--text);font-size:.98rem;line-height:1.6}
.pay-ref{font-family:'Archivo';color:var(--gold-lit);word-break:break-all}

.pay-zelle-grid{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);
  align-items:start;margin-top:22px;
}
@media(max-width:640px){.pay-zelle-grid{grid-template-columns:1fr}}

.pay-qr{
  background:#fff;border-radius:14px;padding:16px;border:1px solid var(--line);
  text-align:center;box-shadow:var(--shadow);width:max-content;max-width:100%;margin:0 auto;
}
.pay-qr img{width:240px;height:240px;max-width:70vw;image-rendering:auto}
.pay-qr figcaption{
  margin-top:12px;font-family:'Archivo';font-weight:700;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:#3a2c07;
}

.pay-zelle-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.pay-note{border:1px solid var(--line-cool);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.02)}
.pay-note-lab{display:block;font-family:'Archivo';font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pay-note-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pay-note-val{
  flex:1 1 auto;min-width:0;background:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--gold-bright);font-family:'Archivo',monospace;font-size:.9rem;word-break:break-word;
}
.pay-note-help{font-size:.8rem;color:var(--muted);margin-top:8px}
.pay-open svg{width:18px;height:18px}
.pay-alt{font-size:.86rem;color:var(--sub)}

.pay-disclosure{
  display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px 18px;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;
  background:var(--gold-soft);
}
.pay-disclosure svg{width:22px;height:22px;flex-shrink:0;stroke:var(--gold-lit);margin-top:2px}
.pay-disclosure p{color:var(--text);font-size:.94rem;line-height:1.6}

/* ---- More ways to give (inactive method status cards) ---- */
.pay-more{margin-top:34px}
.pay-more-h{font-size:1.2rem;margin-bottom:16px}
.pay-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.pay-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.pay-card-grid{grid-template-columns:1fr}}
.pay-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line-cool);border-radius:12px;padding:16px 18px;background:rgba(255,255,255,.02);
}
.pay-card-name{font-family:'Archivo';font-weight:600;color:var(--text);font-size:.94rem}
.pay-card-status{font-family:'Archivo';font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
/* Coming soon = clearly disabled, not a button. */
.pay-card-soon{opacity:.72;cursor:not-allowed}
.pay-status-soon{background:rgba(150,180,215,.12);color:var(--muted);border:1px solid var(--line-cool)}
/* Contact HMS = a real link, visibly distinct from disabled cards. */
.pay-card-contact{transition:border-color .2s,transform .2s}
.pay-card-contact:hover,.pay-card-contact:focus-visible{border-color:var(--gold-lit);transform:translateY(-2px)}
.pay-status-contact{background:var(--gold-soft);color:var(--gold-lit);border:1px solid var(--line)}

.pay-error{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--gold-soft);color:var(--text)}

/* ---- Report form ---- */
.report-form{margin-top:12px;display:grid;gap:16px}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.report-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-family:'Archivo';font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--text)}
.field .opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.field input,.field textarea{
  width:100%;background:var(--navy);border:1px solid var(--line-cool);border-radius:10px;
  padding:13px 14px;color:var(--text);font-family:inherit;font-size:1rem;min-height:48px;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold-lit);outline-offset:1px;border-color:var(--gold-lit)}
.field-hint{font-size:.8rem;color:var(--muted)}
.field-consent{flex-direction:row;align-items:flex-start;gap:12px}
.field-consent input{width:22px;height:22px;min-height:22px;flex-shrink:0;margin-top:2px}
.field-consent label{font-weight:400;color:var(--sub);font-size:.9rem;line-height:1.5}

.form-status{margin-top:4px;padding:12px 16px;border-radius:10px;font-size:.94rem}
.form-status:empty{display:none}
.form-status.ok{background:var(--gold-soft);border:1px solid var(--line);color:var(--gold-bright)}
.form-status.err{background:rgba(200,80,80,.12);border:1px solid rgba(200,80,80,.4);color:#ffb4a8}

.report-secure-note{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted)}
.report-secure-note svg{width:18px;height:18px;flex-shrink:0;stroke:var(--muted);margin-top:2px}

/* ---- Confirmation panel ---- */
.report-confirm{
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(224,187,107,.08),rgba(255,255,255,.01));padding:clamp(22px,3vw,34px);
}
.report-confirm:focus{outline:none}
.report-confirm h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.report-confirm .status-list{list-style:none;margin:18px 0 0;display:grid;gap:10px}
.report-confirm .status-list li{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line-cool);border-radius:10px;background:rgba(255,255,255,.02)}
.report-confirm .status-list b{font-family:'Archivo';font-weight:600;color:var(--sub);font-size:.86rem;letter-spacing:.02em}
.report-confirm .status-list span{font-family:'Archivo';font-weight:700;color:var(--gold-lit);font-size:.86rem}
.report-confirm [data-report-ref-out]{color:var(--gold-bright)}

/* ---- Registration → donation continuity (wineddown) ---- */
.wd-next{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(224,187,107,.06),rgba(255,255,255,.01));
  padding:clamp(22px,3vw,32px);margin-top:22px;
}
.wd-next .wd-next-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.wd-received{
  display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--gold-soft);
}
.wd-received svg{width:24px;height:24px;flex-shrink:0;stroke:var(--gold-lit);margin-top:2px}

/* ---- QR systems separation legend ---- */
.qr-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:760px){.qr-legend{grid-template-columns:1fr}}
.qr-legend .qrl{border:1px solid var(--line-cool);border-radius:12px;padding:16px 18px;background:rgba(255,255,255,.02)}
.qr-legend .qrl b{display:block;font-family:'Archivo';font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lit)}
.qr-legend .qrl p{margin-top:8px;color:var(--sub);font-size:.88rem;line-height:1.55}
.qr-legend .qrl.future{opacity:.7}

.btn-sm{padding:10px 16px;font-size:.78rem}

/* Utility */
[hidden]{display:none!important}