@import url('/footer.css');
@import url('/branding.css');
.payment-layout{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);gap:26px;align-items:start;margin-bottom:26px}
.qris-card{position:relative;overflow:hidden;text-align:center;padding:30px;border-radius:20px;border:1px solid #ffffff25;background:linear-gradient(145deg,#121d30,#0a1020);color:#fff;box-shadow:0 24px 70px #080e1b36}
.qris-card h2{font-size:1.45rem;margin:5px 0 20px}.qris-card p{color:#bec9da;margin:16px auto;max-width:430px}.qris-card .eyebrow{color:#ffb36f}
.qris-glow{position:absolute;width:230px;height:230px;border-radius:50%;background:#ff822944;filter:blur(70px);top:-100px;right:-80px;pointer-events:none}
.qris-image{display:block;position:relative;max-width:390px;margin:auto;border-radius:15px;overflow:hidden;background:white;border:1px solid #ffffff30;box-shadow:0 18px 45px #0005;transition:transform .25s,box-shadow .25s}
.qris-image:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 24px 55px #0007}.qris-image img{display:block;width:100%;height:auto}.payment-form-panel{border-radius:20px}
.amount-preview{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin:18px 0;padding:18px;border-radius:12px;background:#ff8a2412;border:1px solid #ff9b3d3d}
.amount-preview strong{font-size:1.55rem;color:#e86616}.amount-preview small{width:100%;color:var(--muted)}
.payment-help{display:grid;gap:9px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.payment-help p{font-size:.875rem}.payment-help .link{justify-self:start}.payment-history{margin-top:0}
.payment-status{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:5px 10px;font-size:.75rem;font-weight:700}.payment-status.pending{background:#fff1cb;color:#875e09}.payment-status.approved{background:#dff4e5;color:#267044}.payment-status.rejected{background:#ffe4df;color:#9a392d}
.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
@media(max-width:900px){.payment-layout{grid-template-columns:1fr}.qris-image{max-width:340px}}
@media(max-width:560px){.payment-layout{display:block}.qris-card{padding:22px 16px;margin-bottom:20px}.qris-image{max-width:290px}.payment-form-panel{padding:20px}.payment-history{padding:18px}}