/* /plata/: the page a customer comes back to from NETOPIA's card page (assets/plata.js) */
.pay-page { min-height: calc(100vh - 180px); display: grid; align-items: center; padding: 150px 0 90px; }
.pay-card { max-width: 640px; margin: 0 auto; padding: 40px 34px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.pay-card h1 { font-size: clamp(38px, 7vw, 60px); margin: 0 0 12px; }
.pay-card h1.ok { color: #8fe3ad; }
.pay-card h1.bad { color: #ffb3a5; }
.pay-card .lead { color: var(--muted); font-size: 17px; margin: 0; }
.pay-card .lead b { color: var(--cream); }
.pay-id { display: inline-block; margin: 18px 0 0; padding: 8px 14px; border-radius: 10px; background: rgba(244,233,216,.06); border: 1px dashed var(--line-2); font-weight: 700; letter-spacing: 1.5px; }
.pay-test { margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(233,184,114,.1); border: 1px solid rgba(233,184,114,.35); color: var(--gold); font-size: 14px; font-weight: 600; }
.pay-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pay-act .btn { justify-content: center; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #27b765; }
.btn-wa svg { width: 20px; height: 20px; }
.pay-sent { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(34,163,90,.14); color: #8fe3ad; font-size: 14px; }
.pay-wait { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -2px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: pay-spin 1s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
@media (max-width: 560px) { .pay-page { padding: 120px 0 70px; } .pay-card { padding: 30px 22px; } .pay-act .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pay-wait { animation: none; } }