.payment-art{--loop:9s;--green:#2dd4bf;position:relative;width:320px;max-width:100%;height:242px;margin:0 auto;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:var(--font-manrope),Manrope,sans-serif}.payment-art *{box-sizing:border-box}.payment-art .scene{position:relative;height:242px;margin-top:0}.payment-art .scene:before{content:"";position:absolute;inset:0;background:radial-gradient(46% 44% at 52% 48%,rgba(var(--accent-rgb),.16),transparent 72%);pointer-events:none}.payment-art .floor-shadow{position:absolute;height:12px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%);filter:blur(2px)}.payment-art .floor-shadow.fs-term{right:40px;top:210px;width:106px}.payment-art .phone-rig{position:absolute;left:58px;top:6px;width:104px;height:224px;z-index:3;transform-origin:50% 92%;animation:pay-art-phoneMove var(--loop) cubic-bezier(.5,.08,.4,.95) infinite;will-change:transform;filter:drop-shadow(0 12px 16px rgba(15,23,42,.24))}.payment-art .phone{width:100%;height:100%;border-radius:24px;position:relative;overflow:hidden;background:#090f1c;border:2px solid #475569;box-shadow:inset 0 0 0 1px #000,inset 0 2px 5px #ffffff17}.payment-art .p-screen{position:absolute;inset:3px;border-radius:20px;background:linear-gradient(180deg,#111b2d,#0b1220);overflow:hidden}.payment-art .p-status{position:absolute;top:6px;left:10px;right:10px;z-index:5;display:flex;justify-content:space-between;align-items:center;color:#d6d6da;font:600 6px/1 var(--font-manrope),Manrope,sans-serif;letter-spacing:.2px}.payment-art .p-status svg{width:12px;height:7px;opacity:.85}.payment-art .p-top{margin:20px 6px 0}.payment-art .p-card{width:100%;height:52px;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(115deg,#99f6e4,#5eead4,#2dd4bf 32%,#0d9488,#2dd4bf 68%,#5eead4,#99f6e4);background-size:200% 100%;background-repeat:repeat-x;animation:pay-art-cardFlow 6s linear infinite;box-shadow:inset 0 1px #ffffff8c,inset 0 -6px 12px #03463f38}.payment-art .card-glow,.payment-art .card-glow2{position:absolute;left:-25%;top:-30%;width:150%;height:160%;pointer-events:none}.payment-art .card-glow{background:radial-gradient(40% 40% at 50% 50%,#ffffff8c,#fff0 70%);mix-blend-mode:screen;opacity:.7;animation:pay-art-glowOrbit 10s linear infinite}.payment-art .card-glow2{background:radial-gradient(38% 38% at 50% 50%,rgba(45,212,191,.4),transparent 70%);mix-blend-mode:color-dodge;opacity:.45;animation:pay-art-glowOrbit 14s linear infinite reverse}.payment-art .p-card:before{content:"";position:absolute;top:-60%;left:-70%;width:46%;height:220%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.22) 32%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.22) 68%,transparent 100%);transform:translate(-160%) rotate(25deg);animation:pay-art-shine 4.2s cubic-bezier(.35,.1,.65,.9) infinite;pointer-events:none}.payment-art .card-line{position:absolute;left:6px;bottom:8px;width:16px;height:3px;border-radius:2px;background:#044e468c}.payment-art .card-mc{position:absolute;right:6px;bottom:6px;width:14px;line-height:0;filter:drop-shadow(0 1px 2px rgba(3,70,63,.25))}.payment-art .card-mc svg{width:100%;height:auto;display:block}.payment-art .p-bottom{position:absolute;left:0;right:0;bottom:0;height:128px}.payment-art .state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:9px;gap:7px}.payment-art .state.pay{animation:pay-art-payUI var(--loop) linear infinite}.payment-art .state.done{animation:pay-art-doneUI var(--loop) linear infinite}.payment-art .brand-badge{width:38px;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}.payment-art .brand-badge svg{width:100%;height:auto;display:block}.payment-art .waves{width:18px;height:18px;color:#e8e8ec;animation:pay-art-wavePulse 1.6s ease-in-out infinite}.payment-art .hint{font:500 6.8px/1.35 var(--font-manrope),Manrope,sans-serif;color:#8b8b90;letter-spacing:.2px;text-align:center;padding:0 8px}.payment-art .check{width:36px;height:36px;color:var(--green);margin-top:4px;animation:pay-art-checkPop var(--loop) linear infinite}.payment-art .d-label{font:600 8px/1 var(--font-manrope),Manrope,sans-serif;color:#e8e8ec;letter-spacing:.3px}.payment-art .terminal{position:absolute;right:46px;top:36px;width:96px;height:172px;z-index:2;border-radius:14px;padding:6px 8px 9px;display:flex;flex-direction:column;background:linear-gradient(180deg,#475569,#28364b 70%,#1e293b);box-shadow:inset 0 1px #ffffff24,inset 0 -2px 5px #0003,0 12px 18px #0f172a38}.payment-art .t-slot{width:34px;height:4px;border-radius:2px;background:#17171a;margin:1px auto 6px}.payment-art .t-screen{position:relative;height:76px;border-radius:7px;background:#0b1220;overflow:hidden;box-shadow:inset 0 0 0 1px #1e1e22}.payment-art .t-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.payment-art .t-idle{animation:pay-art-termIdle var(--loop) linear infinite}.payment-art .t-proc{animation:pay-art-termProc var(--loop) linear infinite}.payment-art .t-done{animation:pay-art-termDone var(--loop) linear infinite}.payment-art .t-shop{font:500 5.5px/1 var(--font-manrope),Manrope,sans-serif;color:#7c7c82;letter-spacing:.2px}.payment-art .t-amount{font:700 13px/1 var(--font-manrope),Manrope,sans-serif;color:#fff;letter-spacing:.3px}.payment-art .t-sub{font:500 6px/1 var(--font-manrope),Manrope,sans-serif;color:#85858a;letter-spacing:.2px}.payment-art .t-waves{width:13px;height:13px;color:#9a9aa0;animation:pay-art-wavePulse 1.6s ease-in-out infinite}.payment-art .t-dots{position:absolute;top:5px;left:0;right:0;display:flex;justify-content:center;gap:3px}.payment-art .t-dots i{width:3px;height:3px;border-radius:50%;background:var(--green);animation:pay-art-blink 1s ease-in-out infinite}.payment-art .t-dots i:nth-child(2){animation-delay:.15s}.payment-art .t-dots i:nth-child(3){animation-delay:.3s}.payment-art .t-dots i:nth-child(4){animation-delay:.45s}.payment-art .t-check{width:24px;height:24px;color:var(--green);animation:pay-art-checkPop var(--loop) linear infinite}.payment-art .t-label{font:600 7px/1 var(--font-manrope),Manrope,sans-serif;color:#e6e6ea;letter-spacing:.3px}.payment-art .keypad{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.payment-art .keypad i{height:9px;border-radius:3px;background:#526176;box-shadow:inset 0 1px #ffffff17}.payment-art .keypad i.k-red{background:#d6453c}.payment-art .keypad i.k-org{background:#e08a2e}.payment-art .keypad i.k-grn{background:#35b573}@keyframes pay-art-phoneMove{0%,8%{transform:translateZ(0) rotate(0)}20%,38%{transform:translate3d(72px,-12px,0) rotate(9deg)}50%,to{transform:translateZ(0) rotate(0)}}@keyframes pay-art-payUI{0%,30%{opacity:1}34%,66%{opacity:0}70%,to{opacity:1}}@keyframes pay-art-doneUI{0%,30%{opacity:0}34%,66%{opacity:1}70%,to{opacity:0}}@keyframes pay-art-checkPop{0%,30%{transform:scale(.3)}34%{transform:scale(1.18)}38%,66%{transform:scale(1)}70%,to{transform:scale(.3)}}@keyframes pay-art-termIdle{0%,12%{opacity:1}16%,68%{opacity:0}74%,to{opacity:1}}@keyframes pay-art-termProc{0%,12%{opacity:0}16%,28%{opacity:1}32%,to{opacity:0}}@keyframes pay-art-termDone{0%,28%{opacity:0}32%,66%{opacity:1}70%,to{opacity:0}}@keyframes pay-art-blink{0%,to{opacity:.25}50%{opacity:1}}@keyframes pay-art-wavePulse{0%,to{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}@keyframes pay-art-scan{0%{top:16%}to{top:80%}}@keyframes pay-art-cardFlow{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes pay-art-glowOrbit{0%{transform:translate3d(-14%,-8%,0)}25%{transform:translate3d(10%,-6%,0)}50%{transform:translate3d(14%,8%,0)}75%{transform:translate3d(-8%,6%,0)}to{transform:translate3d(-14%,-8%,0)}}@keyframes pay-art-shine{0%{transform:translate(-160%) rotate(25deg)}46%,to{transform:translate(470%) rotate(25deg)}}@container (max-width:300px){.payment-art .phone-rig{left:36px}.payment-art .terminal{right:28px}.payment-art .floor-shadow.fs-term{right:22px}}@media(prefers-reduced-motion:reduce){.payment-art .phone-rig,.payment-art .state,.payment-art .t-state,.payment-art .check,.payment-art .t-check,.payment-art .p-card,.payment-art .p-card:before,.payment-art .card-glow,.payment-art .card-glow2,.payment-art .waves,.payment-art .t-waves,.payment-art .t-dots i{animation:none!important}}@media(prefers-reduced-motion:reduce){.payment-art .state.pay,.payment-art .t-idle{opacity:1!important}.payment-art .state.done,.payment-art .t-proc,.payment-art .t-done{opacity:0!important}.payment-art .check,.payment-art .t-check{stroke-dashoffset:0}}.payment-art .wallet-marks{position:relative;width:40px;height:18px;flex:none}.payment-art .wallet-marks .brand-badge{position:absolute;inset:0;width:40px;margin:0}.payment-art .wallet-apple{animation:pay-art-wallet-apple 18s linear infinite}.payment-art .wallet-google{opacity:0;animation:pay-art-wallet-google 18s linear infinite}@keyframes pay-art-wallet-apple{0%,48%{opacity:1}50%,98%{opacity:0}to{opacity:1}}@keyframes pay-art-wallet-google{0%,48%{opacity:0}50%,98%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.payment-art .wallet-apple{animation:none;opacity:1}.payment-art .wallet-google{animation:none;opacity:0}}
