/* Payment step (19 Oct 2026) — galaxy colours from galaxy.css, glass from style.css */
.pay-sum .total span:last-child { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--ice, #A8E4FF); }
.pay-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; margin: 4px 0 14px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); border-radius: 14px; }
.pay-tabs button { background: none; border: 0; color: var(--mist); font: 600 15px var(--text); padding: 10px 6px; border-radius: 10px; cursor: pointer; min-height: 44px; }
.pay-tabs button[aria-selected="true"] { background: linear-gradient(135deg, rgba(124,92,255,.55), rgba(176,75,226,.45)); color: #fff; box-shadow: 0 6px 20px -8px rgba(124,92,255,.8); }
.pay-panel { min-height: 236px; }
.pay-lbl { font-size: 14px; color: var(--mist); margin-bottom: 8px; }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.app { display: flex; align-items: center; gap: 10px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--moon); border-radius: 12px; padding: 10px 12px;
  font: 600 15px var(--text); cursor: pointer; min-height: 48px; text-align: left; transition: border-color .2s, background .2s; }
.app:hover { border-color: var(--glass-line-hi); }
.app.on { border-color: var(--violet, #7C5CFF); background: rgba(124,92,255,.18); box-shadow: 0 0 0 1px rgba(124,92,255,.5) inset; }
.app .dot { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #7C5CFF, #3FA8FF); flex: none; }
.qr-row { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.qr { width: 104px; height: 104px; border-radius: 8px; flex: none; opacity: .92; }
.qr-row p { font-size: 14.5px; color: var(--mist); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.banks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.banks label { display: flex; align-items: center; gap: 8px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 14.5px; min-height: 48px; }
.banks input { accent-color: #7C5CFF; width: 18px; height: 18px; flex: none; }
.banks label:has(input:checked) { border-color: var(--violet, #7C5CFF); background: rgba(124,92,255,.16); }
.pay-go { width: 100%; margin-top: 4px; }
.pay-secure { text-align: center; }
.pay-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pay-foot .btn-text { color: var(--ice, #A8E4FF); font-size: 14px; }

.pay-wait, .pay-ok, .pay-bad { text-align: center; padding: 34px 6px 18px; }
.pay-wait .big, .pay-ok .big, .pay-bad .big { font-size: 19px; color: var(--moon); margin-top: 18px; }
.ring { display: inline-block; width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(255,255,255,.12); border-top-color: #7C5CFF; border-right-color: #46C8FF; animation: spin .9s linear infinite; }
.tick, .cross { width: 76px; height: 76px; }
.tick circle { fill: rgba(70,200,140,.12); stroke: #6EE7B7; stroke-width: 2; }
.tick path { fill: none; stroke: #6EE7B7; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawTick .5s .15s ease-out forwards; }
@keyframes drawTick { to { stroke-dashoffset: 0; } }
.cross circle { fill: rgba(255,120,120,.12); stroke: #FCA5A5; stroke-width: 2; }
.cross path { fill: none; stroke: #FCA5A5; stroke-width: 4; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .tick path { stroke-dashoffset: 0; } }
@media (max-width: 380px) { .apps, .banks { grid-template-columns: 1fr; } .qr-row .qr { width: 88px; height: 88px; } }