/* ============================================================
   VELTREX MARKET — Widgets
   1. Bonus promo popup (square, attention shake)
   2. Custom 42-language translator
   Palette inherited from the logo: navy #060d1a / teal #00c9a7
   ============================================================ */

:root{
  --vx-navy:#060d1a;
  --vx-navy2:#0a1426;
  --vx-card:#111b30;
  --vx-teal:#00c9a7;
  --vx-teal-lt:#00e8c2;
  --vx-signal:#00f7f2;
  --vx-text:#d7e5fb;
  --vx-muted:#8da4c5;
  --vx-dim:#5d7497;
  --vx-line:rgba(0,201,167,.18);
  --vx-line2:rgba(0,201,167,.4);
}

/* ============================================================
   1 · BONUS PROMO POPUP
   ============================================================ */
.vx-promo-overlay{
  position:fixed;inset:0;z-index:99990;
  background:rgba(3,7,14,.72);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.vx-promo-overlay.vx-show{opacity:1;pointer-events:auto}

/* The square card */
.vx-promo{
  position:relative;
  width:min(400px,100%);
  min-height:min(400px,88vh);
  max-height:92vh;
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(0,201,167,.22),transparent 60%),
    linear-gradient(165deg,var(--vx-card) 0%,var(--vx-navy2) 55%,var(--vx-navy) 100%);
  border:1px solid var(--vx-line2);
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(0,201,167,.08) inset;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:26px 24px 22px;
  transform:scale(.86) translateY(18px);
  transition:transform .5s cubic-bezier(.16,1.1,.3,1);
}
.vx-promo-overlay.vx-show .vx-promo{transform:scale(1) translateY(0)}

/* Rotating aurora ring — the signature element */
.vx-promo::before{
  content:'';position:absolute;inset:-45%;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(0,247,242,.5) 55deg,
    transparent 120deg,transparent 240deg,
    rgba(0,201,167,.4) 300deg,transparent 360deg);
  animation:vxSpin 7s linear infinite;
  z-index:0;
}
.vx-promo::after{
  content:'';position:absolute;inset:1px;border-radius:21px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(0,201,167,.2),transparent 60%),
    linear-gradient(165deg,var(--vx-card) 0%,var(--vx-navy2) 55%,var(--vx-navy) 100%);
  z-index:1;
}
@keyframes vxSpin{to{transform:rotate(360deg)}}

.vx-promo > *{position:relative;z-index:2}

/* Attention shake */
.vx-promo.vx-shake{animation:vxShake .82s cubic-bezier(.36,.07,.19,.97)}
@keyframes vxShake{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  10%{transform:translate3d(-7px,0,0) rotate(-1.1deg)}
  20%{transform:translate3d(6px,0,0) rotate(1deg)}
  30%{transform:translate3d(-6px,0,0) rotate(-.9deg)}
  40%{transform:translate3d(5px,0,0) rotate(.8deg)}
  50%{transform:translate3d(-4px,0,0) rotate(-.6deg)}
  60%{transform:translate3d(3px,0,0) rotate(.45deg)}
  70%{transform:translate3d(-2px,0,0) rotate(-.3deg)}
  80%{transform:translate3d(1px,0,0) rotate(.15deg)}
  90%{transform:translate3d(-1px,0,0) rotate(0)}
}

.vx-promo-close{
  position:absolute;top:12px;right:12px;z-index:5;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:var(--vx-muted);font-size:19px;line-height:1;
  transition:background .2s,color .2s,transform .2s;
}
.vx-promo-close:hover{background:rgba(239,68,68,.2);color:#fff;transform:rotate(90deg)}

.vx-promo-logo{height:30px;width:auto;margin-bottom:14px}

.vx-promo-tag{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vx-signal);
  background:rgba(0,247,242,.09);
  border:1px solid rgba(0,247,242,.3);
  padding:5px 11px;border-radius:100px;margin-bottom:14px;
}
.vx-promo-tag i{
  width:6px;height:6px;border-radius:50%;background:var(--vx-signal);
  animation:vxPulse 1.5s infinite;font-style:normal;flex-shrink:0;
}
@keyframes vxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.vx-promo-range{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:800;line-height:1.06;letter-spacing:-.015em;
  font-size:clamp(2rem,9.5vw,3.1rem);
  width:100%;white-space:nowrap;
  padding-bottom:.06em;              /* descender room so nothing is sliced */
  background:linear-gradient(100deg,var(--vx-teal) 0%,var(--vx-signal) 42%,#fff 55%,var(--vx-signal) 68%,var(--vx-teal) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:vxShimmer 4.5s linear infinite;
}
@keyframes vxShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

.vx-promo-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.22rem;font-weight:700;color:#fff;
  margin-top:6px;line-height:1.25;
}
.vx-promo-copy{
  font-size:.85rem;color:var(--vx-muted);line-height:1.62;margin-top:9px;
}
.vx-promo-copy b{color:var(--vx-teal-lt);font-weight:600}

.vx-promo-spacer{flex:1;min-height:8px}

.vx-promo-actions{display:flex;gap:9px;margin-top:4px}
.vx-promo-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 14px;border-radius:10px;
  font-size:.86rem;font-weight:700;letter-spacing:.02em;
  transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
  text-align:center;
}
.vx-promo-btn--go{
  background:linear-gradient(135deg,var(--vx-teal-lt),var(--vx-teal));
  color:#04121b;
  box-shadow:0 8px 26px rgba(0,201,167,.34);
}
.vx-promo-btn--go:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,201,167,.5)}
.vx-promo-btn--alt{
  background:rgba(255,255,255,.05);
  border:1px solid var(--vx-line2);
  color:var(--vx-text);
}
.vx-promo-btn--alt:hover{border-color:var(--vx-teal);color:var(--vx-teal)}

.vx-promo-foot{
  margin-top:11px;text-align:center;
  font-size:.65rem;color:var(--vx-dim);line-height:1.55;
}
.vx-promo-foot a{color:var(--vx-muted);text-decoration:underline;text-underline-offset:2px}
.vx-promo-foot a:hover{color:var(--vx-teal)}

/* Small phones */
@media (max-width:420px){
  .vx-promo{width:min(340px,100%);min-height:0;padding:22px 18px 18px}
  .vx-promo-range{font-size:clamp(1.9rem,10.5vw,2.6rem)}
  .vx-promo-title{font-size:1.05rem}
  .vx-promo-copy{font-size:.79rem}
  .vx-promo-logo{height:26px}
  .vx-promo-actions{flex-direction:column}
}
@media (max-height:680px){
  .vx-promo{min-height:0;padding:20px 20px 16px}
  .vx-promo-copy{font-size:.79rem;margin-top:7px}
  .vx-promo-logo{height:26px;margin-bottom:10px}
}

/* ============================================================
   2 · CUSTOM TRANSLATOR
   ============================================================ */

/* Hide every piece of Google's own chrome */
.goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt,
.goog-tooltip,.goog-tooltip:hover,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,.VIpgJd-ZVi9od-ORHb-OEVmcd,
.skiptranslate > iframe{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
body{top:0!important;position:static!important}
#vx-gt-host{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0;overflow:hidden}

.vx-lang{position:relative;display:inline-block;font-family:'DM Sans',system-ui,sans-serif}

.vx-lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;
  background:rgba(0,201,167,.07);
  border:1px solid var(--vx-line);
  color:var(--vx-text);font-size:.82rem;font-weight:500;
  transition:border-color .2s,background .2s,color .2s;
  white-space:nowrap;line-height:1.2;
}
.vx-lang-btn:hover{border-color:var(--vx-line2);background:rgba(0,201,167,.13);color:#fff}
.vx-lang-btn .vx-flag{font-size:1.05rem;line-height:1}
.vx-lang-btn .vx-caret{
  margin-left:1px;font-size:.62rem;color:var(--vx-teal);
  transition:transform .25s;
}
.vx-lang.vx-open .vx-lang-btn{border-color:var(--vx-teal);background:rgba(0,201,167,.16)}
.vx-lang.vx-open .vx-caret{transform:rotate(180deg)}

.vx-lang-panel{
  position:absolute;z-index:99995;
  top:calc(100% + 10px);right:0;
  width:290px;max-width:calc(100vw - 32px);
  background:var(--vx-card);
  border:1px solid var(--vx-line2);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.65);
  overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.97);
  pointer-events:none;
  transition:opacity .22s,transform .22s;
}
.vx-lang.vx-open .vx-lang-panel{opacity:1;transform:none;pointer-events:auto}
.vx-lang-panel.vx-up{top:auto;bottom:calc(100% + 10px)}
.vx-lang-panel.vx-left{right:auto;left:0}

.vx-lang-head{
  padding:12px 14px 10px;
  border-bottom:1px solid var(--vx-line);
  background:linear-gradient(180deg,rgba(0,201,167,.08),transparent);
}
.vx-lang-head strong{
  display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vx-teal);font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:500;margin-bottom:9px;
}
.vx-lang-search{
  width:100%;padding:9px 11px;border-radius:8px;
  background:var(--vx-navy);border:1px solid var(--vx-line);
  color:#fff;font-size:.85rem;font-family:inherit;outline:none;
  transition:border-color .2s;
}
.vx-lang-search::placeholder{color:var(--vx-dim)}
.vx-lang-search:focus{border-color:var(--vx-teal)}

.vx-lang-list{max-height:290px;overflow-y:auto;padding:6px}
.vx-lang-list::-webkit-scrollbar{width:5px}
.vx-lang-list::-webkit-scrollbar-track{background:transparent}
.vx-lang-list::-webkit-scrollbar-thumb{background:rgba(0,201,167,.32);border-radius:3px}

.vx-lang-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border-radius:8px;
  color:var(--vx-text);font-size:.87rem;text-align:left;
  transition:background .16s,color .16s;
}
.vx-lang-item:hover{background:rgba(0,201,167,.11);color:#fff}
.vx-lang-item.vx-active{background:rgba(0,201,167,.16);color:var(--vx-teal-lt);font-weight:600}
.vx-lang-item .vx-flag{font-size:1.1rem;line-height:1;flex-shrink:0}
.vx-lang-item .vx-native{margin-left:auto;font-size:.72rem;color:var(--vx-dim)}
.vx-lang-item.vx-active .vx-native{color:var(--vx-teal)}

.vx-lang-empty{padding:20px 12px;text-align:center;color:var(--vx-dim);font-size:.8rem}

.vx-lang-foot{
  padding:9px 14px;border-top:1px solid var(--vx-line);
  font-size:.62rem;color:var(--vx-dim);text-align:center;
}

/* Footer placement variant — panel opens upward, left aligned */
.vx-lang--footer .vx-lang-panel{top:auto;bottom:calc(100% + 10px);right:auto;left:0}

@media (max-width:560px){
  .vx-lang-btn{padding:7px 10px;font-size:.76rem}
  .vx-lang-btn .vx-name{display:none}
  .vx-lang-panel{width:260px}
  .vx-lang-list{max-height:240px}
}

@media (prefers-reduced-motion:reduce){
  .vx-promo::before{animation:none}
  .vx-promo.vx-shake{animation:none}
  .vx-promo-range{animation:none;-webkit-text-fill-color:var(--vx-teal);color:var(--vx-teal)}
}

/* ============================================================
   3 · LIVE ACTIVITY TOAST
   Bottom-left so it never sits on top of the chat launcher.
   ============================================================ */
.vx-act{
  position:fixed;left:18px;bottom:18px;z-index:99500;
  width:318px;max-width:calc(100vw - 36px);
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:13px;
  background:linear-gradient(150deg,rgba(17,27,48,.97),rgba(10,20,38,.97));
  border:1px solid var(--vx-line2);
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  backdrop-filter:blur(14px);
  opacity:0;transform:translateY(14px) scale(.96);
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
.vx-act.vx-in{opacity:1;transform:none;pointer-events:auto}

.vx-act-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;position:relative;
}
.vx-act-icon::after{
  content:'';position:absolute;inset:0;border-radius:11px;
  border:1px solid currentColor;opacity:.35;
}
.vx-act--dep .vx-act-icon{background:rgba(34,197,94,.14);color:#22c55e}
.vx-act--wd  .vx-act-icon{background:rgba(0,201,167,.14);color:var(--vx-teal)}
.vx-act--tr  .vx-act-icon{background:rgba(59,130,246,.14);color:#3b82f6}

.vx-act-body{flex:1;min-width:0}
.vx-act-line{font-size:.79rem;color:var(--vx-text);line-height:1.35}

/* Line 1 — who. May ellipsis if the name/country is long. */
.vx-act-who{
  display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--vx-muted);
}
.vx-act-who b{color:#fff;font-weight:600}

/* Line 2 — what and how much. Always fully visible. */
.vx-act-do{
  display:block;margin-top:1px;
  white-space:nowrap;
  font-size:.78rem;color:var(--vx-muted);
}
.vx-act-amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600}
.vx-act--dep .vx-act-amt{color:#22c55e}
.vx-act--wd  .vx-act-amt{color:var(--vx-teal-lt)}
.vx-act--tr  .vx-act-amt{color:#60a5fa}
.vx-act-meta{
  display:flex;align-items:center;gap:6px;margin-top:3px;
  font-size:.64rem;color:var(--vx-dim);
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.vx-act-dot{width:5px;height:5px;border-radius:50%;background:var(--vx-signal);animation:vxPulse 1.6s infinite;flex-shrink:0}

.vx-act-x{
  position:absolute;top:-8px;right:-8px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vx-navy2);border:1px solid var(--vx-line2);
  color:var(--vx-dim);font-size:13px;line-height:1;
  opacity:0;transition:opacity .2s,color .2s;
}
.vx-act:hover .vx-act-x{opacity:1}
.vx-act-x:hover{color:#fff}

/* Progress hairline */
.vx-act-bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--vx-teal),var(--vx-signal));
  transform-origin:left center;border-radius:0 0 13px 13px;
}

@media (max-width:600px){
  .vx-act{left:10px;right:10px;bottom:10px;width:auto;padding:10px 12px}
  .vx-act-line{font-size:.76rem}
  .vx-act-do{font-size:.75rem}
  .vx-act-x{opacity:1}
}
/* Very narrow phones — shrink the text rather than clip the figure */
@media (max-width:360px){
  .vx-act-who{font-size:.72rem}
  .vx-act-do{font-size:.71rem}
  .vx-act-icon{width:34px;height:34px;font-size:.95rem}
}
/* Never let it cover the offer popup */
.vx-promo-overlay.vx-show ~ .vx-act{opacity:0!important;pointer-events:none!important}

@media (prefers-reduced-motion:reduce){
  .vx-act{transition:opacity .2s}
  .vx-act-dot{animation:none}
}