:root{--ink:#071b4d;--muted:#53607d;--pink:#ff1f6d;--orange:#ff8a00;--blue:#006bd6;--green:#08784d;--red:#a52a22;--line:rgba(7,27,77,.14);--paper:#fff}
*{box-sizing:border-box}
body.payment-document{min-height:100vh;margin:0;padding:24px;display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:radial-gradient(circle at 8% 8%,rgba(255,31,109,.16),transparent 30%),radial-gradient(circle at 90% 14%,rgba(255,138,0,.15),transparent 28%),#f7f9ff}
.payment-card{width:min(760px,100%);overflow:hidden;border:2px solid rgba(255,138,0,.26);border-radius:28px;background:var(--paper);box-shadow:0 22px 60px rgba(17,32,72,.16)}
.payment-head{padding:28px 30px;text-align:center;background:linear-gradient(90deg,rgba(255,31,109,.11),rgba(0,140,255,.09),rgba(255,138,0,.11))}
.payment-head h1{margin:0;font-size:clamp(28px,5vw,46px);line-height:1.05;text-transform:uppercase}
.payment-tag{display:inline-block;margin-top:12px;padding:8px 16px;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--orange));font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.payment-body{padding:28px 30px 32px}
.payment-banner{margin-bottom:18px;padding:15px 17px;border:1px solid rgba(255,138,0,.3);border-radius:16px;color:#674000;background:#fff8e9;font-weight:800;line-height:1.5}
.payment-banner.success{color:var(--green);border-color:rgba(8,120,77,.24);background:#effcf6}
.payment-banner.failure{color:var(--red);border-color:rgba(165,42,34,.22);background:#fff1ef}
.preview-banner{margin-bottom:18px;padding:12px 16px;border:2px dashed var(--blue);border-radius:14px;color:#004f9d;background:#eef7ff;text-align:center;font-weight:900;text-transform:uppercase}
.payment-details{display:grid;gap:0}
.payment-row{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px dashed var(--line)}
.payment-row span:first-child{color:var(--muted)}
.payment-row span:last-child,.payment-row a{max-width:64%;overflow-wrap:anywhere;text-align:right;font-weight:800;color:var(--ink)}
.payment-link-box{margin-top:20px;padding:17px;border:1px solid rgba(0,107,214,.2);border-radius:16px;background:#f2f8ff}
.payment-link-box strong{display:block;margin-bottom:8px;color:#153577}
.payment-link-box a,.print-url{overflow-wrap:anywhere;color:#004db8}
.payment-link-box a[aria-disabled=true]{pointer-events:none}
.payment-note{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.payment-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.payment-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 20px;border:0;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--orange));text-decoration:none;font:900 13px/1 Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.payment-button.secondary{color:var(--ink);background:#eaf0ff}.payment-button.blue{background:#0056bd}.payment-button[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}
.print-only{display:none}
@media(max-width:560px){body.payment-document{padding:14px}.payment-head,.payment-body{padding:23px 20px}.payment-row{display:grid;gap:4px}.payment-row span:last-child,.payment-row a{max-width:none;text-align:left}.payment-button{width:100%}}
@page{size:A4;margin:14mm}
@media print{html,body.payment-document{background:#fff!important}body.payment-document{display:block;min-height:0;padding:0;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}.payment-card{width:100%;border:1px solid #bbb;border-radius:0;box-shadow:none}.payment-head{padding:18px}.payment-body{padding:20px}.screen-only,.payment-actions{display:none!important}.print-only{display:block}.payment-row,.payment-link-box{break-inside:avoid}.payment-row span:last-child,.payment-row a{color:#000}.payment-link-box a{color:#003f8f;text-decoration:underline}}