/* ==========================================================================
   VLR Promotion Banner — cyberpunk (neon green/pink, dark, glow, grid, animated)
   Self-contained; only loads where the banner shows.
   ========================================================================== */
.vlr-promo-banner{
  --vp-green:#A6FF00; --vp-pink:#FF1F8F; --vp-ink:#050505;
  position:relative; overflow:hidden; z-index:5;
  border-bottom:1px solid rgba(166,255,0,.35);
  font-family:var(--vlr-mono, ui-monospace, monospace);
  color:#fff; padding:18px clamp(14px,4vw,48px);
  background:var(--vp-ink);
  box-shadow:0 8px 30px rgba(0,0,0,.55);
}
.vlr-promo-bg-cyberpunk{ background:radial-gradient(120% 140% at 15% 0%, #14040c 0%, #050505 55%), linear-gradient(90deg, rgba(255,31,143,.06), rgba(166,255,0,.05)); }
.vlr-promo-bg-gradient{ background:linear-gradient(120deg,#1a0a14 0%,#0a1408 100%); }
.vlr-promo-bg-dark{ background:#0a0a0a; }

/* animated neon top/bottom edge */
.vlr-promo-banner::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg,transparent,var(--vp-pink),var(--vp-green),transparent);
  background-size:200% 100%; animation:vpSlide 4s linear infinite;
}
@keyframes vpSlide{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* faint grid overlay */
.vlr-promo-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.14;
  background-image:linear-gradient(rgba(166,255,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,31,143,.25) 1px,transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 100%);
}

.vlr-promo-inner{ position:relative; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.vlr-promo-close{
  position:absolute; top:8px; right:10px; z-index:6; background:transparent; border:none;
  color:#888; font-size:22px; line-height:1; cursor:pointer; transition:color .15s;
}
.vlr-promo-close:hover{ color:var(--vp-pink); }

.vlr-promo-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.vlr-promo-title{ margin:0; font-size:clamp(16px,2.4vw,24px); font-weight:800; letter-spacing:1.5px; color:#fff;
  text-shadow:0 0 14px rgba(255,31,143,.55); }
.vlr-promo-subtitle{ margin:2px 0 0; font-size:12px; letter-spacing:1px; color:#9fb0a0; text-transform:uppercase; }

/* countdown */
.vlr-promo-countdown{ display:flex; gap:8px; }
.vlr-promo-cd-unit{ min-width:46px; text-align:center; background:rgba(255,255,255,.04); border:1px solid rgba(166,255,0,.3);
  border-radius:8px; padding:6px 8px; box-shadow:0 0 12px rgba(166,255,0,.12) inset; }
.vlr-promo-cd-unit span{ display:block; font-size:18px; font-weight:800; color:var(--vp-green); text-shadow:0 0 10px rgba(166,255,0,.6); }
.vlr-promo-cd-unit em{ font-style:normal; font-size:9px; letter-spacing:1px; color:#8aa; }

/* dynamic status line */
.vlr-promo-status{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; }
.vlr-promo-status-applied{ color:var(--vp-green); font-weight:700; text-shadow:0 0 8px rgba(166,255,0,.4); }
.vlr-promo-status-next{ color:#e8e8e8; }
.vlr-promo-status strong{ color:var(--vp-pink); }
.vlr-promo-status-applied strong{ color:var(--vp-green); }

/* tier cards */
.vlr-promo-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.vlr-promo-card{
  position:relative; background:rgba(10,10,10,.7); border:1px solid #2a2a2a; border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:4px; transition:opacity .25s, border-color .25s, transform .2s;
  scroll-snap-align:start;
}
.vlr-promo-card.is-dim{ opacity:.45; }
.vlr-promo-card.is-active{ border-color:var(--vp-green); box-shadow:0 0 0 1px var(--vp-green), 0 0 22px rgba(166,255,0,.28); }
.vlr-promo-card.is-active::after{
  content:""; position:absolute; inset:-1px; border-radius:12px; pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(166,255,0,.5),transparent) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; background-size:200% 100%; animation:vpSlide 2.2s linear infinite;
}
.vlr-promo-card-active{ display:none; position:absolute; top:10px; right:12px; font-size:9px; font-weight:800; letter-spacing:1px;
  color:#050505; background:var(--vp-green); padding:2px 6px; border-radius:4px; }
.vlr-promo-card.is-active .vlr-promo-card-active{ display:inline-block; }
.vlr-promo-card-badge{ font-size:10px; font-weight:800; letter-spacing:1px; color:var(--vp-green); text-transform:uppercase; }
.vlr-promo-card-req{ font-size:12px; color:#b8c2b8; }
.vlr-promo-card-title{ font-size:17px; font-weight:800; color:#fff; }
.vlr-promo-card-desc{ font-size:11px; color:#9aa; }
.vlr-promo-card-code{
  margin-top:6px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:transparent; border:1px dashed var(--vp-pink); border-radius:6px; padding:4px 8px;
  color:var(--vp-pink); font-family:inherit; font-size:12px; letter-spacing:.5px; transition:background .15s;
}
.vlr-promo-card-code:hover{ background:rgba(255,31,143,.1); }
.vlr-promo-card-code em{ font-style:normal; font-size:9px; font-weight:700; color:#7a8; }
.vlr-promo-card-code.copied{ border-color:var(--vp-green); color:var(--vp-green); }
.vlr-promo-card-code.copied em{ color:var(--vp-green); }

.vlr-promo-cta{
  align-self:flex-start; margin-top:2px; display:inline-block; text-decoration:none; font-weight:800; letter-spacing:1px;
  background:var(--vp-pink); color:#fff; padding:10px 22px; border-radius:7px; font-size:13px;
  box-shadow:0 6px 18px rgba(255,31,143,.35); transition:transform .15s, box-shadow .15s;
}
.vlr-promo-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(255,31,143,.5); color:#fff; }

.vlr-promo-banner.vp-hidden{ display:none !important; }

/* mobile: swipe cards horizontally instead of shrinking */
@media(max-width:720px){
  .vlr-promo-head{ flex-direction:column; align-items:flex-start; }
  .vlr-promo-cards{
    display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:6px; margin:0 -4px; scrollbar-width:none;
  }
  .vlr-promo-cards::-webkit-scrollbar{ display:none; }
  .vlr-promo-card{ flex:0 0 78%; max-width:78%; }
  .vlr-promo-cta{ align-self:stretch; text-align:center; }
}

/* ==========================================================================
   LAUNCH POPUP (homepage) — centered cyberpunk modal
   ========================================================================== */
.vlr-promo-pop{
  --vp-green:#A6FF00; --vp-pink:#FF1F8F;
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none; transition:opacity .35s ease;
  font-family:var(--vlr-mono, ui-monospace, monospace);
}
.vlr-promo-pop.is-open{ opacity:1; pointer-events:auto; }
.vlr-promo-pop.vp-hidden{ display:none !important; }
.vlr-promo-pop-backdrop{ position:absolute; inset:0; background:rgba(2,2,6,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

.vlr-promo-pop-card{
  position:relative; width:min(560px,100%); max-height:92vh; overflow:auto; border-radius:18px;
  padding:30px clamp(20px,4vw,38px); color:#fff; border:1px solid rgba(166,255,0,.4);
  background:radial-gradient(130% 120% at 20% -10%, #1a0510 0%, #070709 60%);
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,31,143,.18);
  transform:translateY(24px) scale(.96); transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.vlr-promo-pop.is-open .vlr-promo-pop-card{ transform:translateY(0) scale(1); }
.vlr-promo-pop-card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent,var(--vp-pink),var(--vp-green),transparent); background-size:200% 100%; animation:vpSlide 4s linear infinite; }
.vlr-promo-pop-card .vlr-promo-grid{ border-radius:18px; }
.vlr-promo-pop-card .vlr-promo-close{ top:12px; right:14px; font-size:26px; z-index:3; }

.vlr-promo-eyebrow{ display:inline-block; align-self:center; font-size:11px; font-weight:800; letter-spacing:2px;
  color:#050505; background:var(--vp-green); padding:5px 12px; border-radius:20px; margin-bottom:6px;
  box-shadow:0 0 18px rgba(166,255,0,.5); }
.vlr-promo-pop .vlr-promo-inner{ align-items:center; text-align:center; gap:16px; }
.vlr-promo-pop .vlr-promo-head{ flex-direction:column; align-items:center; gap:14px; }
.vlr-promo-pop .vlr-promo-title{ font-size:clamp(24px,5vw,34px); line-height:1.05; }
.vlr-promo-pop .vlr-promo-subtitle{ font-size:13px; }
.vlr-promo-pop .vlr-promo-countdown{ gap:10px; }
.vlr-promo-pop .vlr-promo-cd-unit{ min-width:58px; padding:8px 10px; }
.vlr-promo-pop .vlr-promo-cd-unit span{ font-size:22px; }
.vlr-promo-pop .vlr-promo-status{ justify-content:center; }
.vlr-promo-pop .vlr-promo-cards{ grid-template-columns:1fr; gap:10px; width:100%; }
.vlr-promo-pop .vlr-promo-card{ text-align:left; }
.vlr-promo-pop .vlr-promo-cta{ align-self:stretch; text-align:center; font-size:15px; padding:14px 22px; }

@media (max-width:600px){
  .vlr-promo-pop{ padding:12px; align-items:flex-end; }
  .vlr-promo-pop-card{ padding:26px 20px 22px; border-radius:16px; }
}

/* ==========================================================================
   CHECKOUT / CART "launch discount applied" callout
   ========================================================================== */
.vlr-promo-checkout-win{
  display:flex; align-items:center; gap:12px; margin:10px 0 16px; padding:13px 15px; border-radius:12px;
  border:1px solid rgba(166,255,0,.55);
  background:linear-gradient(90deg, rgba(166,255,0,.12), rgba(255,31,143,.10));
  box-shadow:0 0 20px rgba(166,255,0,.16); animation:vpWin .5s ease both;
}
@keyframes vpWin{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.vlr-promo-checkout-win .vpc-spark{ font-size:22px; line-height:1; filter:drop-shadow(0 0 6px rgba(166,255,0,.6)); }
.vlr-promo-checkout-win .vpc-text{ display:flex; flex-direction:column; line-height:1.3; }
.vlr-promo-checkout-win .vpc-text strong{ color:#A6FF00; font-size:12px; font-weight:800; letter-spacing:1.2px;
  font-family:var(--vlr-mono, ui-monospace, monospace); text-shadow:0 0 8px rgba(166,255,0,.4); }
.vlr-promo-checkout-win .vpc-text span{ color:#c9d6c4; font-size:11px; }
.vlr-promo-checkout-win .vpc-text .vpc-mechanic{ color:#e8f5da; font-weight:600; }
.vlr-promo-checkout-win .vpc-amt{ margin-left:auto; color:#A6FF00; font-weight:800; font-size:17px;
  font-family:var(--vlr-mono, ui-monospace, monospace); white-space:nowrap; }
.vlr-promo-checkout-win .vpc-amt .amount{ color:#A6FF00; }
/* make the plain coupon discount row itself read as a positive win */
.vlr-os-row.cart-discount span, .vlr-os-row.cart-discount .amount{ color:#A6FF00 !important; }