/* ===== WebX11 — Lite Mode (animations + glass blur OFF) =====
 * Activated by <html data-wx11-lite="on"> (set by /js/lite-mode.js).
 * Kills animations, hover transitions, backdrop-filter blur.
 */

/* Solid fallback for glassy dark panels (root has no --bg-glass-solid) */
html[data-wx11-lite="on"] {
  --wx-lite-bg: rgba(18, 18, 32, 0.96);
}

/* Kill all animations and transitions */
html[data-wx11-lite="on"] *,
html[data-wx11-lite="on"] *::before,
html[data-wx11-lite="on"] *::after {
  animation: none !important;
  transition: none !important;
}

/* Kill all backdrop blur (catch-all — root glass classes vary per page) */
html[data-wx11-lite="on"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Floating lite button (bottom-left; chat widget is bottom-right) */
#wx11LiteBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #374151;
  background: rgba(18, 18, 32, 0.96);
  color: #e5e7eb;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#wx11LiteBtn:active { transform: scale(0.94); }
@media (max-width: 768px) {
  #wx11LiteBtn { width: 46px; height: 46px; font-size: 1.2rem; }
}

/* ===== 3D background toggle (pricing/services .bg-3d layer) ===== */
html[data-bg3d="off"] .bg-3d { display: none !important; }

#wx11Bg3dBtn {
  position: fixed;
  bottom: 84px;
  left: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #374151;
  background: rgba(18, 18, 32, 0.96);
  color: #e5e7eb;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#wx11Bg3dBtn:active { transform: scale(0.94); }
#wx11Bg3dBtn.off { opacity: 0.55; }
@media (max-width: 768px) {
  #wx11Bg3dBtn { width: 46px; height: 46px; bottom: 76px; font-size: 0.8rem; }
}

/* ===== Mobile nav: single scrollable row (all root navs) =====
 * Under 768px every page nav becomes one row: nowrap + overflow-x scroll,
 * fixed height, hidden scrollbar, and links keep their padding.
 */
@media (max-width: 768px) {
  nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
    max-height: 60px;
  }
  nav::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  nav a, nav .nav-links, nav select {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  nav select { font-size: 0.8rem; }
}