/* 2026-10-21 · /oplata/: animated order & payment flow */
body.vx .vx-flow{margin:8px 0 36px;padding:28px;border-radius:var(--r-lg,24px);background:linear-gradient(135deg,#f5f3ff 0,#fff 60%);box-shadow:0 0 0 1px var(--line,#e6e6ef) inset}
body.vx .vx-flow__h{margin:0 0 22px!important;font-size:26px!important;font-weight:800!important;letter-spacing:-.03em;color:var(--ink,#16152b)}
body.vx .vx-flow__wrap{position:relative}
body.vx .vx-flow__path{position:absolute;pointer-events:none;overflow:visible}
body.vx .vx-flow__path path[id]{stroke:var(--ac,#4f46e5);stroke-width:2.5;stroke-dasharray:7 9;stroke-linecap:round;opacity:.55;vector-effect:non-scaling-stroke;animation:vxDash 1.6s linear infinite}
body.vx .vx-flow__plane path{fill:var(--ac,#4f46e5)}
body.vx .vx-flow__path--x{left:0;right:0;top:-6px;width:100%;height:84px}
body.vx .vx-flow__path--y{display:none}
body.vx .vx-flow__steps{position:relative;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0!important;padding:0!important;list-style:none;counter-reset:none}
body.vx .vx-flow__steps>li{display:flex;flex-direction:column;gap:6px;margin:0!important;padding:0!important;list-style:none;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*120ms)}
body.vx .vx-flow__steps>li::before,body.vx .vx-flow__steps>li::marker{content:none!important;display:none!important}
body.vx .vx-flow.is-in .vx-flow__steps>li{opacity:1;transform:none}
body.vx .vx-flow__ic{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:6px 0 8px;border-radius:20px;background:#fff;box-shadow:0 10px 24px -12px rgba(59,47,201,.45),0 0 0 1.5px var(--soft,#ece9ff);transition:transform .3s}
body.vx .vx-flow__steps>li:hover .vx-flow__ic{transform:translateY(-3px) rotate(-3deg)}
body.vx .vx-flow__ic svg{width:28px;height:28px;fill:none;stroke:var(--ac,#4f46e5);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.vx .vx-flow__ic b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac,#4f46e5);color:#fff;font-size:12px;font-weight:800}
body.vx .vx-flow__steps strong{font-size:16px;font-weight:800;color:var(--ink,#16152b)}
body.vx .vx-flow__steps li>span:last-child{font-size:14px;line-height:1.45;color:var(--mut,#5f5e70)}
body.vx .vx-flow__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
body.vx .vx-flow__facts>div{padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line,#e6e6ef) inset}
body.vx .vx-flow__facts b{display:block;font-size:20px;font-weight:800;color:var(--ac,#4f46e5);letter-spacing:-.02em}
body.vx .vx-flow__facts span{font-size:13px;color:var(--mut,#5f5e70)}
@keyframes vxDash{to{stroke-dashoffset:-32}}
@media (max-width:900px){
 body.vx .vx-flow{padding:20px 16px}
 body.vx .vx-flow__h{font-size:21px!important}
 body.vx .vx-flow__path--x{display:none}
 body.vx .vx-flow__path--y{display:block;left:8px;top:10px;bottom:10px;width:48px;height:calc(100% - 20px)}
 body.vx .vx-flow__steps{grid-template-columns:1fr;gap:18px;padding-left:72px!important}
 body.vx .vx-flow__steps>li{position:relative;min-height:64px}
 body.vx .vx-flow__ic{position:absolute;left:-72px;top:0;margin:0;width:56px;height:56px;border-radius:18px}
 body.vx .vx-flow__facts{grid-template-columns:1fr 1fr}
 body.vx .vx-flow__facts b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
 body.vx .vx-flow__steps>li{opacity:1;transform:none;transition:none}
 body.vx .vx-flow__path path[id]{animation:none}
 body.vx .vx-flow__plane{display:none}
}