/* Approved Motion study 02, adapted to the existing PassPay terminal geometry. */
.terminal:not([data-phase="amount"]) .stage{min-height:360px;margin-left:20px;margin-right:20px}
.terminal:not([data-phase="amount"]) .primary-button,.terminal:not([data-phase="amount"]) .primary-button.status-only{height:60px;min-height:60px}
.payment-flow,.payment-flow.active{display:block;transform:none;transition:opacity 240ms ease,visibility 0s 240ms}
.payment-flow.active{transition:opacity 280ms ease,visibility 0s}
.payment-flow .payment-status-position{position:absolute;left:50%;top:43px;width:224px;height:224px;transform:translate(-50%,-50%) scale(.42);transform-origin:center;will-change:transform;pointer-events:none;z-index:2}
.payment-circle{width:100%;height:100%;margin:0;display:block;overflow:visible}
.payment-circle circle,.payment-circle path{vector-effect:non-scaling-stroke}
.payment-circle .halo{stroke-width:1;fill:none;opacity:.11}
.payment-circle .disc{stroke:none}
.payment-circle .track{fill:none;stroke-width:1.5;opacity:.13}
.payment-circle .ring{fill:none;stroke-width:2.7;stroke-linecap:round}
.payment-circle .symbol{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.payment-flow .transaction-copy{position:absolute;left:0;right:0;top:91px;margin:0;padding:0 10px;min-height:110px;max-width:none;width:100%;transform:scale(.82);transform-origin:center top;will-change:transform;text-align:center;z-index:3;pointer-events:none}
.payment-flow .transaction-copy h2{font-size:26px;line-height:1.2;letter-spacing:-.9px;font-weight:570;margin:0 0 13px}
.payment-flow .transaction-copy p{font-size:14px;line-height:1.65;max-width:285px;margin:0 auto;color:var(--muted)}
.payment-flow .flow-copy-previous{position:absolute;inset:0;padding:0 10px;pointer-events:none}
.payment-flow .qr-panel,.payment-flow .qr-panel:not(.active){position:absolute;inset:var(--flow-qr-top,150px) 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;height:auto;transform:none;transform-origin:center top;opacity:1;visibility:visible;transition:none;will-change:opacity,transform;pointer-events:none}
.payment-flow .qr-frame,html[data-theme="dark"] .payment-flow .qr-frame{width:var(--flow-qr-edge,240px);max-width:100%;padding:12px;aspect-ratio:1;height:auto;border-radius:26px;background:#fff;border:1px solid #e6ecee;box-shadow:0 12px 35px #00000008;transform:none!important;animation:none!important;transition:none}
.payment-flow #qr-code,.payment-flow .qr-panel:not(.creating).active #qr-code{display:block;width:100%;aspect-ratio:1;animation:none!important;transition:none;transform:none;filter:none;opacity:1}
.payment-flow .creating #qr-code{opacity:0}
.payment-flow #qr-code svg{display:block;width:100%;height:100%;shape-rendering:crispEdges;stroke:none;border-radius:0}
.payment-flow .qr-loading span{animation:none;border:0;background:var(--surface-soft);width:44px;height:44px;border-radius:12px}
.payment-flow .qr-instruction,html[data-theme="dark"] .payment-flow .qr-instruction{font-size:12px;line-height:1.4;gap:9px}
.payment-flow .qr-instruction small,html[data-theme="dark"] .payment-flow .qr-instruction small{font-size:10px}
@media(max-height:720px){.terminal:not([data-phase="amount"]) .primary-button,.terminal:not([data-phase="amount"]) .primary-button.status-only{height:54px;min-height:54px}.payment-flow .transaction-copy h2{font-size:24px}.payment-flow .transaction-copy p{font-size:12px;line-height:1.6}.payment-flow .transaction-copy{min-height:92px}.payment-flow .qr-frame,html[data-theme="dark"] .payment-flow .qr-frame{padding:10px;border-radius:22px}}
@media(max-height:620px) and (max-width:700px){.terminal:not([data-phase="amount"]){min-height:640px;height:640px}.workspace{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.payment-flow .payment-status-position,.payment-flow .transaction-copy,.payment-flow .qr-panel{will-change:auto;transition:none!important;animation:none!important}}

/* Footer actions overlay the scene, keeping the QR-to-result geometry stable. */
.terminal:not([data-phase="amount"]){position:relative}
.terminal:not([data-phase="amount"]) .action-area{position:absolute;left:0;right:0;bottom:0;z-index:5}
.terminal[data-phase="waiting"] .action-area,.terminal[data-phase="creating"] .action-area,.terminal[data-phase="processing"][data-has-qr="true"] .action-area{display:none}
.payment-flow .qr-instruction{display:none}
.payment-flow .transaction-copy p{max-width:300px}
.operation-refund{margin-top:12px;width:100%;min-height:48px;border-radius:16px;background:var(--negative-soft);color:var(--negative);font:inherit;font-weight:650}
.refund-confirm .refund-summary{background:var(--surface-soft);padding:18px;border-radius:18px;margin:18px 0}
.refund-confirm .refund-summary strong{font-size:30px;display:block;color:var(--ink);margin-top:6px}
.refund-confirm .primary-button{background:var(--negative-soft);color:var(--negative)}
.operation-refund:disabled{opacity:.55}
.operation-status.partially_refunded{color:var(--muted)}