/* VLIKE Commerce Hub V5.2 — night navigation. */

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub {
  --vch-brand: #8b7cff;
  --vch-text: #f7f9ff;
  --vch-muted: #9eabc4;
  --vch-line: rgba(154, 174, 211, .17);
  --vch-surface: rgba(12, 20, 38, .9);
  color-scheme: dark;
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__inner {
  position: relative;
  border-color: rgba(139, 124, 255, .2);
  background:
    radial-gradient(circle at 96% -20%, rgba(34, 211, 238, .13), transparent 34%),
    linear-gradient(145deg, rgba(18, 28, 52, .96), rgba(8, 15, 30, .94));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(22px) saturate(125%);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__inner::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 18%;
  left: 18%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .65), transparent);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__top {
  border-bottom-color: rgba(148, 163, 184, .13);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__brand > span {
  color: #fff;
  border: 1px solid rgba(165, 243, 252, .18);
  background: linear-gradient(135deg, #7c3aed, #0891b2);
  box-shadow: 0 10px 24px rgba(34, 211, 238, .17), inset 0 1px rgba(255, 255, 255, .18);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__types {
  border: 1px solid rgba(148, 163, 184, .11);
  background: rgba(3, 10, 24, .4);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .25);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__types a:hover {
  color: #67e8f9 !important;
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__types a.is-active {
  color: #ecfeff !important;
  border: 1px solid rgba(103, 232, 249, .18);
  background: linear-gradient(135deg, rgba(124, 92, 255, .26), rgba(34, 211, 238, .11));
  box-shadow: 0 7px 20px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .055);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__primary a:hover {
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(139, 124, 255, .12), rgba(34, 211, 238, .055));
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__primary a.is-active {
  color: #a5f3fc !important;
  text-shadow: 0 0 22px rgba(34, 211, 238, .2);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__primary a.is-active::after {
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  box-shadow: 0 -3px 14px rgba(34, 211, 238, .32);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__icon {
  border: 1px solid rgba(148, 163, 184, .1);
  background: rgba(148, 163, 184, .07);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__primary a.is-active .vlike-commerce-hub__icon {
  color: #fff;
  border-color: rgba(165, 243, 252, .16);
  background: linear-gradient(135deg, #7c3aed, #0891b2);
  box-shadow: 0 7px 18px rgba(34, 211, 238, .13);
}

:is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__primary {
  scrollbar-color: rgba(103, 232, 249, .35) transparent;
}

@media (max-width: 720px) {
  :is(html:has(#night-mode-css), body.theme-dark, body[data-theme="dark"], .night-mode) .vlike-commerce-hub__inner {
    border-top-color: rgba(103, 232, 249, .18);
    border-bottom-color: rgba(139, 124, 255, .18);
  }
}