/* Promo banner at the very top of every page (text and look are set in Admin -> Sales -> Top banner). */
.vv-tb {
  --tb-bg: linear-gradient(180deg, rgba(16, 20, 30, 0.96), rgba(11, 15, 23, 0.96));
  --tb-line: var(--line, rgba(157, 207, 255, 0.16));
  --tb-text: var(--text, #eaf2ff);
  --tb-accent: var(--accent, #4a9eff);
  --tb-chip-bg: rgba(74, 158, 255, 0.12);
  --tb-chip-line: rgba(74, 158, 255, 0.5);
  --tb-chip-text: #cfe5ff;
  --tb-glow: rgba(74, 158, 255, 0.55);
  position: relative; z-index: 310; box-sizing: border-box; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 52px 11px 20px; min-height: 46px;
  background: var(--tb-bg); color: var(--tb-text);
  border-bottom: 1px solid var(--tb-line);
  font: 600 0.9rem/1.35 var(--font-body, 'Manrope', 'Inter', sans-serif); text-align: center;
  animation: vv-tb-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.vv-tb[hidden] { display: none; }
@keyframes vv-tb-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.vv-tb-icon { display: inline-flex; line-height: 0; color: #fff; filter: drop-shadow(0 0 6px var(--tb-glow)); }
.vv-tb-text { min-width: 0; text-shadow: 0 0 12px var(--tb-glow), 0 1px 3px rgba(0, 0, 0, 0.7); }
.vv-tb-text b { color: var(--tb-accent); font-weight: 800; text-shadow: 0 0 8px var(--tb-glow), 0 0 22px var(--tb-glow); }

.vv-tb-code {
  appearance: none; cursor: pointer; border-radius: 9px;
  padding: 5px 13px; font: 800 0.82rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: 0.14em;
  color: var(--tb-chip-text); background: var(--tb-chip-bg); border: 1px solid var(--tb-chip-line);
  box-shadow: 0 0 14px -4px var(--tb-glow); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.vv-tb-code:hover { transform: translateY(-1px); border-color: var(--tb-accent); box-shadow: 0 0 18px -2px var(--tb-glow); }
.vv-tb-code:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.vv-tb-code.is-copied { border-color: var(--tb-accent); letter-spacing: 0.04em; }

.vv-tb-close {
  appearance: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: inherit; opacity: 0.7;
  display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease, background-color 0.15s ease;
}
.vv-tb-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.vv-tb-close:focus-visible { outline: 2px solid var(--tb-accent); }

/* Halloween: warm dark amber, pumpkin-orange accent */
.vv-tb--halloween {
  --tb-bg: linear-gradient(180deg, #2b1405 0%, #180a03 100%);
  --tb-line: rgba(255, 140, 40, 0.32);
  --tb-text: #f4dcc3;
  --tb-accent: #ff9a2e;
  --tb-chip-bg: rgba(255, 140, 40, 0.1);
  --tb-chip-line: rgba(255, 140, 40, 0.55);
  --tb-chip-text: #ffc27a;
  --tb-glow: rgba(255, 138, 31, 0.6);
}
.vv-tb--halloween::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 140% at 50% 130%, rgba(255, 122, 24, 0.22), transparent 70%);
}

/* New Year: a night sky with a soft aurora, two strings of fairy lights that glow in turn, crystal snow and sparkles */
.vv-tb--newyear {
  --tb-bg:
    radial-gradient(38% 190% at 12% 135%, rgba(70, 220, 170, 0.26), transparent 70%),
    radial-gradient(34% 190% at 52% -45%, rgba(120, 140, 255, 0.24), transparent 70%),
    radial-gradient(40% 190% at 90% 135%, rgba(225, 60, 90, 0.28), transparent 70%),
    linear-gradient(90deg, #071a2e 0%, #0b2d3a 38%, #0a2a30 62%, #08182c 100%);
  --tb-line: rgba(255, 212, 102, 0.5);
  --tb-text: #f4faf7;
  --tb-accent: #ffd466;
  --tb-chip-bg: linear-gradient(180deg, rgba(214, 58, 74, 0.55), rgba(140, 26, 44, 0.55));
  --tb-chip-line: rgba(255, 212, 102, 0.8);
  --tb-chip-text: #fff1c4;
  --tb-glow: rgba(255, 212, 102, 0.7);
  padding-top: 24px; padding-bottom: 24px; min-height: 68px;
  box-shadow: inset 0 -1px 0 rgba(255, 212, 102, 0.35), 0 6px 26px -10px rgba(255, 200, 90, 0.45);
}

.vv-tb-lights { position: absolute; left: 0; right: 0; top: 0; height: 20px; overflow: hidden; pointer-events: none; z-index: 0; }
.vv-tb-lights--bottom { top: auto; bottom: 0; transform: scaleY(-1); }
.vv-tb-lights i { position: absolute; inset: 0; background-repeat: repeat-x; background-size: 224px 20px; }
.vv-tb-lights .w {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='20'%3E%3Cpath d='M0 2Q28 17 56 2M56 2Q84 17 112 2M112 2Q140 17 168 2M168 2Q196 17 224 2' fill='none' stroke='%23c4cfdd' stroke-opacity='.75' stroke-width='1'/%3E%3C/svg%3E");
}
.vv-tb-lights--bottom i { background-position-x: 112px; }
.vv-tb-lights .b { animation: vv-tb-bulb 2.4s ease-in-out infinite; }
.vv-tb-lights--bottom .b { animation-direction: reverse; }
.vv-tb-lights .b0 { background-image: radial-gradient(circle at 28px 12px, #ff5468 0 3.3px, transparent 4.2px), radial-gradient(circle at 28px 12px, rgba(255, 84, 104, 0.4) 0 7px, transparent 10px); }
.vv-tb-lights .b1 { background-image: radial-gradient(circle at 84px 12px, #ffd466 0 3.3px, transparent 4.2px), radial-gradient(circle at 84px 12px, rgba(255, 212, 102, 0.4) 0 7px, transparent 10px); animation-delay: -0.6s; }
.vv-tb-lights .b2 { background-image: radial-gradient(circle at 140px 12px, #5fe39a 0 3.3px, transparent 4.2px), radial-gradient(circle at 140px 12px, rgba(95, 227, 154, 0.4) 0 7px, transparent 10px); animation-delay: -1.2s; }
.vv-tb-lights .b3 { background-image: radial-gradient(circle at 196px 12px, #72c9ff 0 3.3px, transparent 4.2px), radial-gradient(circle at 196px 12px, rgba(114, 201, 255, 0.4) 0 7px, transparent 10px); animation-delay: -1.8s; }
@keyframes vv-tb-bulb { 0%, 100% { opacity: 0.3; } 45%, 55% { opacity: 1; } }

/* Plain: the site's own look (tokens above) */
.vv-tb--plain { --tb-glow: rgba(74, 158, 255, 0.5); }

.vv-tb > :not(.vv-tb-close):not(.vv-tb-fx):not(.vv-tb-lights) { position: relative; z-index: 1; }

/* Falling decorations (Halloween: pumpkins, spiders, bats, ghosts; New Year: snowflakes) */
.vv-tb-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.vv-tb-p {
  position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s);
  margin-top: calc(var(--s) * -1.5); opacity: var(--o);
  animation: vv-tb-fall var(--d) linear var(--delay) infinite; will-change: transform;
}
.vv-tb-p svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vv-tb-p svg .f { fill: currentColor; stroke: none; }
@keyframes vv-tb-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(calc(var(--sway) * -0.6), 40px, 0) rotate(calc(var(--rot) * 0.5)); }
  100% { transform: translate3d(var(--sway), 84px, 0) rotate(var(--rot)); }
}

/* Snow: near flakes are large and glow, far ones are small and soft, round bokeh dots sit behind, sparkles twinkle */
.vv-tb-p--near svg { filter: drop-shadow(0 0 4px rgba(190, 225, 255, 0.95)); }
.vv-tb-p--far { filter: blur(0.6px); }
.vv-tb-bokeh { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); filter: blur(1px); }
.vv-tb-spark { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; color: #fff3c0; animation: vv-tb-spark var(--d) ease-in-out var(--delay) infinite; }
.vv-tb-spark svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 3px #ffe9a0); }
@keyframes vv-tb-spark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

@media (max-width: 640px) {
  .vv-tb { padding: 10px 44px 10px 14px; font-size: 0.82rem; gap: 8px; }
  .vv-tb-close { top: 8px; transform: none; }
  .vv-tb.vv-tb--newyear { padding-top: 22px; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vv-tb { animation: none; }
  .vv-tb-lights .b { animation: none; opacity: 1; }
  .vv-tb-spark { display: none; }
  .vv-tb-fx { display: none; }
  .vv-tb-code { transition: none; }
}

/* The banner stays at the top of the window while the page scrolls; a sticky header sits right below it. */
#vvTopBanner { position: sticky; top: 0; z-index: 90; }
html header { top: var(--vv-tb-h, 0px); }
#vvAnnounceTop { top: var(--vv-tb-h, 0px); }