/* VOTREX V21 — progressive enhancement only; does not alter checkout/state. */
:root { --vtx21-cyan: #3bcda8; --vtx21-green: #1a895b; }
.vtx21-tap-target { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vtx21-pressed { transform: scale(.965) !important; filter: brightness(1.10); transition: transform .14s cubic-bezier(.17,.67,.31,1.5), filter .18s ease !important; }
.vtx21-ripple { isolation: isolate; }
.vtx21-ripple::after { content:""; pointer-events:none; position:absolute; inset:0; z-index:2; border-radius:inherit; opacity:0; background:radial-gradient(circle at var(--vtx21-x,50%) var(--vtx21-y,50%), rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 20%, transparent 66%); animation:vtx21-flash .42s ease-out; }
@keyframes vtx21-flash { 0%{opacity:.95;transform:scale(.86)} 100%{opacity:0;transform:scale(1.09)} }
.vtx21-image-pending { background-color:rgba(120,180,168,.08); filter:blur(1.6px); opacity:.65; }
.vtx21-image-ready { animation:vtx21-reveal .23s ease-out both; }
@keyframes vtx21-reveal { from{opacity:.78} to{opacity:1} }
#vtx21-route-indicator { position:fixed; top: max(3px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%) translateY(-12px); z-index:2147483000; display:flex; align-items:center; gap:9px; box-sizing:border-box; max-width:min(84vw,340px); padding:9px 14px; border-radius:999px; background:rgba(7,36,31,.96); border:1px solid rgba(86,207,169,.38); color:#effff8; font:600 12px/1.45 system-ui,-apple-system,sans-serif; box-shadow:0 6px 28px rgba(0,0,0,.36); opacity:0; visibility:hidden; pointer-events:none; direction:rtl; transition:transform .2s ease,opacity .18s ease,visibility .2s ease; }
#vtx21-route-indicator.vtx21-active { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#vtx21-route-indicator .vtx21-spinner {width:16px;height:16px;flex:0 0 16px;border:2px solid rgba(255,255,255,.18);border-top-color:var(--vtx21-cyan);border-right-color:var(--vtx21-cyan);border-radius:50%;animation:vtx21-turn .74s linear infinite;}
@keyframes vtx21-turn {to{transform:rotate(360deg)}}
#vtx21-route-indicator::before{content:"";position:absolute;bottom:0;left:14px;right:14px;height:2px;transform-origin:right;transform:scaleX(.14);background:linear-gradient(90deg,transparent,var(--vtx21-cyan));border-radius:2px;animation:vtx21-progress 2s ease-in-out infinite alternate;}
@keyframes vtx21-progress{to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine) { .vtx21-tap-target:hover { filter:brightness(1.065); } }
@media (prefers-reduced-motion:reduce) { .vtx21-pressed { transform:none !important; } .vtx21-tap-target, .vtx21-pressed, .vtx21-ripple::after, .vtx21-image-ready, #vtx21-route-indicator, #vtx21-route-indicator .vtx21-spinner, #vtx21-route-indicator::before { animation:none !important; transition:none !important; } }
