.payment-dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 30px 36px 24px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 30px 100px #172b2340;
}
.payment-dialog::backdrop { background: #172b237a; backdrop-filter: blur(7px); }
.payment-confetti { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:4; }
.payment-dialog__close,.payment-dialog__actions { position:relative; z-index:5; }
.payment-dialog__close { position:absolute; }
.payment-dialog__close { position: absolute; top: 12px; right: 12px; }
.payment-dialog .eyebrow { margin: 18px 0 8px; font-size: 10px; letter-spacing: 1.7px; }
.payment-dialog h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(28px, 5vw, 34px); line-height: 1.15; letter-spacing: -.8px; }
.payment-dialog__message { max-width: 380px; margin: 12px auto 0; color: var(--ink-soft); line-height: 1.5; }
.payment-dialog__footnote { margin: 14px 0 0; color: var(--ink-soft); font-size: 12px; }
.payment-dialog__actions { display: grid; gap: 10px; margin-top: 18px; }
.payment-dialog__actions .button { white-space: normal; }
.payment-indicator { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: #29473b0c; color: var(--ink); }
.payment-spinner { width: 42px; height: 42px; border: 3px solid #29473b24; border-top-color: var(--ink); border-radius: 50%; animation: payment-spin 1s linear infinite; }
.payment-tick, .payment-neutral { display: none; }
.payment-dialog[data-state="success"] .payment-indicator { background: #e5f4e9; color: #25813e; animation: payment-celebrate .55s ease-out; box-shadow: 0 0 0 10px #25813e08; }
.payment-dialog[data-state="success"] .payment-tick { display: block; width: 52px; height: 52px; }
.payment-dialog[data-state="success"][data-tier="goal-complete"], .payment-dialog[data-state="success"][data-tier="whole-goal"] { border-color:#c49a45; box-shadow:0 0 0 5px #e7ad4522,0 30px 100px #172b2340; }
.payment-dialog[data-state="success"][data-tier="whole-goal"] .payment-receipt { background:#ead7a44d; border-color:#c49a4570; }
.payment-tick path { stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 0; animation: payment-check .45s ease-out; }
.payment-dialog:not([data-state="processing"]) .payment-spinner { display: none; }
.payment-dialog:not([data-state="processing"]):not([data-state="success"]) .payment-neutral { display: block; font-size: 34px; font-weight: 700; }
.payment-receipt { display: grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:18px; margin-top: 20px; padding: 14px 16px; border: 1px solid #29473b20; border-radius: 14px; background: #efe4cf66; text-align:left; }
.payment-receipt__media { position:relative; width:88px; aspect-ratio:1; border-radius:12px; overflow:hidden; background:radial-gradient(ellipse at top left,#678c74,#29473b); }
.payment-receipt__media img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.payment-receipt__media .visual-icon { transform:translate(-50%,-50%) scale(.41); }
.payment-receipt__details { display:grid; min-width:0; gap:7px; }
.payment-receipt__amount { font-size: 36px; line-height: 1.15; font-weight: 900; letter-spacing: -1px; }
.payment-receipt__label { font-size: 12px; color: var(--ink-soft); }
.payment-receipt__goal { font-size: 17px; overflow-wrap: anywhere; }
.payment-progress { margin-top:18px; text-align:left; }
.payment-progress__heading,.payment-progress__totals { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; font-size:12px; line-height:1.5; }
.payment-progress__heading { font-size:13px; }
.payment-progress__heading span,.payment-progress__totals span { color:var(--ink-soft); }
.payment-progress__track { position:relative; height:12px; margin:9px 0; overflow:hidden; border-radius:99px; background:#29473b18; }
.payment-progress__shape { position:absolute; left:0; display:block; height:100%; border-radius:inherit; overflow:hidden; }
.payment-progress__shape > span { position:absolute; left:0; display:block; height:100%; background:#25813e; }
.payment-progress__shape [data-progress-addition] { background:#e7ad45; }
.payment-progress[data-phase="grow"] .payment-progress__track,.payment-progress[data-phase="celebrate"] .payment-progress__track { box-shadow:0 0 0 3px #e7ad451a; }
.payment-progress:not([data-phase="settled"]) [data-progress-note] { color:#805b19; }
.payment-progress small { display:block; margin-top:6px; color:var(--ink-soft); font-size:11px; }
.payment-status[data-state="success"] { border-color: #25813e66; }
.is-contributed { outline: 3px solid #25813e; outline-offset: 5px; animation: payment-goal-glow 1.3s ease-out 3; scroll-margin-top: 100px; }
@keyframes payment-spin { to { transform: rotate(360deg); } }
@keyframes payment-check { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes payment-celebrate { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes payment-goal-glow { 0% { box-shadow: 0 0 0 5px #25813e24; } 100% { box-shadow: 0 0 0 18px #25813e00; } }
@media (max-width: 540px) { .payment-dialog { padding: 40px 22px 24px; } .payment-indicator { width: 76px; height: 76px; } .payment-receipt { grid-template-columns:80px minmax(0,1fr); gap:12px; padding:14px 12px; } .payment-receipt__media { width:80px; } .payment-receipt__media .visual-icon { transform:translate(-50%,-50%) scale(.37); } .payment-receipt__amount { font-size:30px; } }
@media (prefers-reduced-motion: reduce) {
  .payment-dialog[data-state="success"] .payment-indicator, .payment-tick path, .is-contributed { animation: none; }
  .payment-spinner { animation: none; }
}