/* Maventech Software Store - custom styles on top of Bootstrap 5 (dark multicolor gradient / white / cyan-teal) */
:root {
  --bs-primary: #06b6d4;
  --bs-primary-rgb: 6, 182, 212;
  --bs-link-color: #0891b2;
  --bs-link-hover-color: #0e7490;
  --bs-link-color-rgb: 8, 145, 178;
  --bs-link-hover-color-rgb: 14, 116, 144;
  --uc-blue: #06b6d4;
  --uc-blue-dark: #0891b2;
  --uc-indigo: #06b6d4;
  --uc-ink: #1a1f38;
  --uc-soft: #f7f7f7;
  --uc-grad: linear-gradient(135deg, #06b6d4, #2dd4bf);
  --uc-grad-hover: linear-gradient(135deg, #0891b2, #14b8a6);
  --uc-shadow-sm: 0 1px 2px rgba(2, 6, 23, .05), 0 5px 16px rgba(2, 6, 23, .06);
  --uc-shadow-lg: 0 16px 44px rgba(2, 6, 23, .16);
  --uc-ring: rgba(6, 182, 212, .3);
}
/* Slightly smaller global type scale — airier, lighter feel */
html { font-size: 15px; }
/* Bootstrap utility recolor — soft coral, light-first */
.text-primary { color: #0891b2 !important; }
.text-bg-primary { background-color: #cffafe !important; color: #0e7490 !important; }
.badge.text-bg-danger { background-color: #ffe4e6 !important; color: #e11d48 !important; }
/* Recolor Bootstrap "success" greens → theme royal blue (user request: no green highlights) */
.text-success { color: #2563eb !important; }
.text-success-emphasis { color: #1d4ed8 !important; }
[data-bs-theme="dark"] .text-success, .hero .text-success, .footer-dark .text-success,
.trustbar .text-success, .topbar .text-success { color: #60a5fa !important; }
.badge.text-bg-success { background-color: #1d4ed8 !important; color: #fff !important; }
.badge.text-bg-success-subtle { background-color: #dbeafe !important; color: #1d4ed8 !important; }
[data-bs-theme="dark"] .badge.text-bg-success-subtle { background-color: rgba(37, 99, 235, .22) !important; color: #93c5fd !important; }
.alert-success { --bs-alert-bg: #dbeafe; --bs-alert-color: #1e40af; --bs-alert-border-color: #bfdbfe; }
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: rgba(37, 99, 235, .18); --bs-alert-color: #93c5fd; --bs-alert-border-color: rgba(37, 99, 235, .4); }
.btn-success { --bs-btn-bg: #1d4ed8; --bs-btn-border-color: #1d4ed8; --bs-btn-hover-bg: #1e40af; --bs-btn-hover-border-color: #1e40af; --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af; }
.btn-outline-primary { --bs-btn-color: #0891b2; --bs-btn-border-color: #67e8f9; --bs-btn-hover-bg: #06b6d4; --bs-btn-hover-border-color: #06b6d4; --bs-btn-active-bg: #0891b2; --bs-btn-active-border-color: #0891b2; }
.form-check-input:checked { background-color: #06b6d4; border-color: #06b6d4; }
.form-check-input:focus { border-color: #06b6d4; box-shadow: 0 0 0 .25rem rgba(6, 182, 212, .2); }
.spinner-border.text-primary { color: #06b6d4 !important; }
.bg-primary { background-color: #06b6d4 !important; }
.border-primary { border-color: #06b6d4 !important; }

/* Soft indigo-slate dark palette — bright, readable, never murky */
[data-bs-theme="dark"] {
  --bs-body-bg: #151629;
  --bs-body-color: #ececf0;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #b9b9c1;
  --bs-border-color: rgba(103, 232, 249, .22);
  --bs-tertiary-bg: #1c1d33;
  --bs-secondary-bg: #23243d;
  --uc-soft: #181a2e;
  --uc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 5px 18px rgba(0, 0, 0, .28);
  --uc-shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --uc-ring: rgba(103, 232, 249, .45);
}
[data-bs-theme="dark"] .card { --bs-card-bg: transparent; background: linear-gradient(180deg, #20213a, #191a2f); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #1c1d33; --bs-dropdown-link-color: #ececf0; --bs-dropdown-link-hover-bg: #2b2c47; --bs-dropdown-link-hover-color: #fff; }
[data-bs-theme="dark"] .accordion-item { --bs-accordion-bg: #1c1d33; --bs-accordion-btn-color: #ececf0; --bs-accordion-active-bg: rgba(103, 232, 249, .12); --bs-accordion-active-color: #a5f3fc; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1c1d33; border-color: rgba(103, 232, 249, .3); color: #ececf0; }
[data-bs-theme="dark"] .form-control::placeholder { color: #9b9ba4; }
[data-bs-theme="dark"] .text-primary { color: #67e8f9 !important; }
[data-bs-theme="dark"] .text-secondary { color: #b9b9c1 !important; }
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) { color: #67e8f9; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c6c6cd; --bs-btn-border-color: rgba(103, 232, 249, .42); --bs-btn-hover-bg: #2b2c47; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(103, 232, 249, .55); }
[data-bs-theme="dark"] .table { --bs-table-color: #ececf0; --bs-table-bg: transparent; --bs-table-border-color: rgba(103, 232, 249, .22); }
[data-bs-theme="dark"] .badge.text-bg-light { background-color: #23243d !important; color: #ececf0 !important; border-color: rgba(103, 232, 249, .3) !important; }
[data-bs-theme="dark"] .page-content h2 { border-bottom-color: rgba(103, 232, 249, .3); }
[data-bs-theme="dark"] .page-content thead { background: rgba(103, 232, 249, .14); }
[data-bs-theme="dark"] .ask-ai-pill { background: linear-gradient(90deg, rgba(103, 232, 249, .16), rgba(45, 212, 191, .12)); border-color: rgba(103, 232, 249, .3); }
[data-bs-theme="dark"] .shop-toolbar { background: linear-gradient(90deg, rgba(103, 232, 249, .14), rgba(45, 212, 191, .1)); border-color: rgba(103, 232, 249, .25); }

body { font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5, .display-6 { letter-spacing: -.025em; }
/* Elegance pass — softened weights for refined feel (was 800/650/650/800) */
.fw-bold { font-weight: 600 !important; }
.fw-semibold { font-weight: 550 !important; }
.btn { font-weight: 550; }
.display-4, .display-5 { font-weight: 700; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 650; }
/* Global fallback selection tint — matches the body's blue (Zoom-style)
   so admin pages (`.adm` body) and form inputs in light mode share one
   consistent highlight colour with the rest of the storefront. Dark-mode
   pages override this further down via the data-bs-theme rule. */
::selection { background: rgba(11, 92, 255, .22); }

/* ---------- Brand logo ---------- */
.brand-mark { flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(6, 182, 212, .35)); }
.brand-text { font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; color: var(--bs-emphasis-color); }
.brand-grad { background: linear-gradient(90deg, #06b6d4, #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-bs-theme="dark"] .brand-grad, .footer-dark .brand-grad { background: linear-gradient(90deg, #06b6d4, #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-tag { display: block; font-size: .58rem; letter-spacing: .16em; font-weight: 600; color: var(--bs-secondary-color); }
/* Brand motion presets — admin chooses Bounce / Spin / Pulse / Static
   in Company Info; the `data-brand-motion` attribute on <body> swaps
   the animation site-wide.  Targets both the inline SVG and a custom
   uploaded image. */
.logo-3d { perspective: 320px; }
.logo-3d .brand-mark,
.logo-3d > img:first-of-type {
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 12px;
}

/* ============ BRAND VIBE PRESETS ============
   Each vibe key (premium / classic / playful / bold) sets CSS variables
   that cascade across the layout.  Currently consumed by:
     • .brand-text font-weight
     • .brand-grad gradient colours
     • .logo-3d > img border-radius (uploaded logo corner radius)
     • .navbar-brand .badge-vibe (subtle accent next to the brand)
   Add more places by reading `var(--vibe-*)` anywhere in this stylesheet. */
body[data-brand-vibe="premium"] {
  --vibe-g0: #0c0a09; --vibe-g1: #3f3f46; --vibe-g2: #facc15;
  --vibe-accent: #facc15;
  --vibe-radius: 6px;
  --vibe-fontw: 800;
}
body[data-brand-vibe="classic"] {
  --vibe-g0: #312e81; --vibe-g1: #1e40af; --vibe-g2: #06b6d4;
  --vibe-accent: #06b6d4;
  --vibe-radius: 14px;
  --vibe-fontw: 700;
}
body[data-brand-vibe="playful"] {
  --vibe-g0: #f97316; --vibe-g1: #ec4899; --vibe-g2: #a855f7;
  --vibe-accent: #f97316;
  --vibe-radius: 22px;
  --vibe-fontw: 800;
}
body[data-brand-vibe="bold"] {
  --vibe-g0: #7c3aed; --vibe-g1: #ec4899; --vibe-g2: #0ea5e9;
  --vibe-accent: #7c3aed;
  --vibe-radius: 10px;
  --vibe-fontw: 900;
}
.logo-3d > img:first-of-type { border-radius: var(--vibe-radius, 12px) !important; }
body .brand-text { font-weight: var(--vibe-fontw, 700) !important; }
body .brand-grad {
  background: linear-gradient(90deg, var(--vibe-g0, #06b6d4), var(--vibe-g1, #2dd4bf) 50%, var(--vibe-g2, #06b6d4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Bigger primary CTAs follow the active vibe colour, so the entire
   storefront feels coherent without per-button overrides. */
body .btn-primary { background: linear-gradient(135deg, var(--vibe-g1, #1d4ed8), var(--vibe-g2, #06b6d4)) !important; border-color: transparent !important; }
body .btn-primary:hover { filter: brightness(1.06); }
body[data-brand-motion="bounce"] .logo-3d .brand-mark,
body[data-brand-motion="bounce"] .logo-3d > img:first-of-type {
  /* Premium 360° bounce-spin — coin-flip rotateY + soft vertical bounce
     + landing scale pulse. Wrapped by a glowing halo ring that breathes
     in sync with the spin (see .logo-3d::before below). */
  animation: logo-spin-bounce 3.2s cubic-bezier(.55,.05,.25,1) infinite;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: drop-shadow(0 6px 14px rgba(6, 182, 212, 0.42));
  will-change: transform, filter;
}
/* Theme-aware halo ring behind the brand mark — pulses with the bounce,
   picks up the active vibe's accent colour so the logo always feels at
   home with the rest of the storefront. */
body[data-brand-motion="bounce"] .navbar .logo-3d {
  position: relative;
}
body[data-brand-motion="bounce"] .navbar .logo-3d::before {
  content: ''; position: absolute; left: -6px; top: 50%;
  width: 54px; height: 54px; transform: translateY(-50%);
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side,
              rgba(6, 182, 212, 0.30) 0%,
              rgba(45, 212, 191, 0.18) 45%,
              rgba(6, 182, 212, 0) 75%);
  filter: blur(2px);
  animation: logo-halo-pulse 3.2s cubic-bezier(.55,.05,.25,1) infinite;
}
body[data-brand-motion="bounce"] .navbar .logo-3d .brand-mark,
body[data-brand-motion="bounce"] .navbar .logo-3d > img:first-of-type {
  position: relative; z-index: 1;
}
@keyframes logo-halo-pulse {
  0%, 100% { transform: translateY(-50%) scale(0.85); opacity: .55; }
  20%      { transform: translateY(-50%) scale(1.10); opacity: .95; }
  50%      { transform: translateY(-50%) scale(1.00); opacity: .70; }
  80%      { transform: translateY(-50%) scale(1.10); opacity: .95; }
}
/* Dark-mode halo picks up a brighter cyan so it stays visible. */
[data-bs-theme="dark"] body[data-brand-motion="bounce"] .navbar .logo-3d::before {
  background: radial-gradient(closest-side,
              rgba(94, 234, 212, 0.45) 0%,
              rgba(45, 212, 191, 0.25) 45%,
              rgba(6, 182, 212, 0) 75%);
}
/* Honour the user's "reduce motion" OS preference for accessibility. */
@media (prefers-reduced-motion: reduce) {
  body[data-brand-motion="bounce"] .logo-3d .brand-mark,
  body[data-brand-motion="bounce"] .logo-3d > img:first-of-type,
  body[data-brand-motion="bounce"] .navbar .logo-3d::before {
    animation: none;
  }
}
body[data-brand-motion="spin"] .logo-3d .brand-mark,
body[data-brand-motion="spin"] .logo-3d > img:first-of-type {
  animation: logo-pure-spin 4.5s linear infinite;
}
body[data-brand-motion="pulse"] .logo-3d .brand-mark,
body[data-brand-motion="pulse"] .logo-3d > img:first-of-type {
  animation: logo-pulse 2.4s ease-in-out infinite;
}
body[data-brand-motion="static"] .logo-3d .brand-mark,
body[data-brand-motion="static"] .logo-3d > img:first-of-type {
  animation: none;
}
.logo-3d:hover .brand-mark,
.logo-3d:hover > img:first-of-type { animation-play-state: paused; cursor: pointer; }
@keyframes logo-spin-bounce {
  0%   { transform: translateY(0)    rotateY(0deg)   scale(1); }
  20%  { transform: translateY(-10px) rotateY(72deg)  scale(1.06); }
  40%  { transform: translateY(0)    rotateY(144deg) scale(0.96); }
  50%  { transform: translateY(-4px) rotateY(180deg) scale(1.02); }
  60%  { transform: translateY(0)    rotateY(216deg) scale(0.96); }
  80%  { transform: translateY(-10px) rotateY(288deg) scale(1.06); }
  100% { transform: translateY(0)    rotateY(360deg) scale(1); }
}
@keyframes logo-pure-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes logo-pulse {
  0%, 100% { transform: scale(1)    rotateZ(0deg); filter: drop-shadow(0 4px 10px rgba(6, 182, 212, .35)); }
  50%      { transform: scale(1.12) rotateZ(-2deg); filter: drop-shadow(0 6px 18px rgba(6, 182, 212, .55)); }
}
.logo-3d.tilting .brand-mark { animation: none;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(1.12);
  transition: transform .1s ease-out; }
.logo-3d .brand-grad { background: linear-gradient(90deg, #06b6d4, #2dd4bf 30%, #ff7849 50%, #2dd4bf 70%, #06b6d4);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brand-shimmer 7s linear infinite; }
@keyframes brand-shimmer { to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-3d .brand-mark, .logo-3d > img:first-of-type, .logo-3d .brand-grad { animation: none; }
}

/* Eyebrow section labels */
.eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--uc-blue); text-transform: uppercase; }
[data-bs-theme="dark"] .eyebrow { color: #06b6d4; }

/* Soft alternating section background */
.bg-soft { background-color: var(--uc-soft); }

/* ---------- Top bar ---------- */
/* ---------- Top bar (signature multicolor dark gradient) ---------- */
.topbar { background: linear-gradient(110deg, #2a1430 0%, #1b2240 50%, #0e4f5c 100%); color: #fff; font-size: .85rem; }
.topbar strong { color: #67e8f9; }
.trustbar { background: #1a1f38; color: #cbd5e1; font-size: .8rem; border-top: 1px solid rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .topbar { background: linear-gradient(110deg, #1e0e23 0%, #141a33 50%, #0a3a44 100%); }
[data-bs-theme="dark"] .trustbar { background: #111223; color: #d9d9df; }

/* Glassy sticky navbar */
.navbar.sticky-top { background: rgba(255, 255, 255, .86) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-bs-theme="dark"] .navbar.sticky-top { background: rgba(21, 31, 56, .88) !important; }

/* ---------- Page head band ---------- */
.page-head { background: linear-gradient(180deg, #F8FBFE 0%, #ECF4FD 100%); border-bottom: 1px solid rgba(21, 101, 192, .12); position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; background-image:
    radial-gradient(ellipse 60% 80% at 12% -10%, rgba(21, 101, 192, .22), transparent 55%),
    radial-gradient(ellipse 40% 60% at 95% 110%, rgba(26, 115, 232, .14), transparent 55%);
    pointer-events: none; }
.page-head > * { position: relative; z-index: 1; }
[data-bs-theme="dark"] .page-head { background: linear-gradient(180deg, #11203F 0%, #0B1426 100%); border-bottom-color: rgba(96, 165, 250, .22); }
[data-bs-theme="dark"] .page-head::before { background-image:
    radial-gradient(ellipse 60% 80% at 12% -10%, rgba(96, 165, 250, .25), transparent 55%),
    radial-gradient(ellipse 40% 60% at 95% 110%, rgba(26, 115, 232, .18), transparent 55%);
}
/* Trust-strip chips inside .page-head */
.page-head-trust { font-size: .82rem; }
.page-head-trust-item {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(21, 101, 192, .18);
  border-radius: 999px;
  color: #1F2937;
  font-weight: 500;
  backdrop-filter: saturate(120%);
}
.page-head-trust-item .bi { color: #1565C0; font-size: .92rem; }
[data-bs-theme="dark"] .page-head-trust-item {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(96, 165, 250, .35);
  color: #E2E8F0;
}
[data-bs-theme="dark"] .page-head-trust-item .bi { color: #93C5FD; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bs-secondary-color); }
.breadcrumb a { text-decoration: none; }

/* ---------- Mega menu ---------- */
.navbar .dropdown-menu.mega { left: 0; right: 0; top: 100%; width: 100%; border-radius: 0 0 1rem 1rem; max-height: 80vh; overflow-y: auto; border-top: 0; box-shadow: var(--uc-shadow-lg); }
.mega .mega-heading, .antivirus-menu .mega-heading { font-size: .72rem; letter-spacing: .08em; color: var(--uc-blue); font-weight: 700; }
[data-bs-theme="dark"] .mega .mega-heading, [data-bs-theme="dark"] .antivirus-menu .mega-heading { color: #06b6d4; }
.mega-year { display: block; font-size: .92rem; font-weight: 550; padding: .3rem 0; color: var(--bs-body-color); text-decoration: none; transition: color .15s ease, padding-left .15s ease; }
.mega-year:hover { color: var(--uc-blue); padding-left: .25rem; }
.antivirus-menu .mega-link, .mega a.mega-link { display: block; font-size: .8rem; padding: .2rem 0; color: var(--bs-secondary-color); text-decoration: none; transition: color .15s ease, padding-left .15s ease; }
.antivirus-menu .mega-link:hover, .mega a.mega-link:hover { color: var(--uc-blue); padding-left: .2rem; }
.dropdown-menu .mega-promo { border-top: 1px solid var(--bs-border-color); }
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
  /* Hover-gap bridge: pseudo-strip above each open dropdown so the cursor
     can travel from the nav trigger down into the menu without the
     :hover state being lost in the navbar's bottom padding. */
  .navbar .dropdown-menu.mega::before,
  .navbar .dropdown-menu.antivirus-menu::before {
    content: '';
    position: absolute;
    top: -16px; left: 0; right: 0; height: 16px;
    background: transparent;
  }
  /* Give the nav-link a slightly larger hit area downward */
  .navbar .nav-item.dropdown > .nav-link.dropdown-toggle { padding-bottom: 1rem; }
}

/* ---------- Cards (clean minimal layer) ---------- */
.card { border-radius: .75rem; border: 1px solid var(--bs-border-color); box-shadow: var(--uc-shadow-sm); }
.accordion-item, .card .card { box-shadow: none; }
.product-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--uc-ring), var(--uc-shadow-lg); border-color: transparent; }
.product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; font-size: .88rem; font-weight: 600; transition: color .15s ease; }
.product-card:hover .product-title { color: var(--uc-blue); }
.product-img-wrap { overflow: hidden; }
/* Compact framed artwork — smaller box, no dead space */
.product-card .ratio-1x1 { --bs-aspect-ratio: 76%; }
.product-card .product-img-wrap {
  margin: .65rem .65rem 0;
  border-radius: .8rem !important;
  background: linear-gradient(180deg, #f9fafc, #edf1f8) !important;
  border: 1px solid rgba(15, 23, 42, .06);
  transition: border-color .2s ease;
}
.product-card:hover .product-img-wrap { border-color: rgba(6, 182, 212, .35); }
.product-card .badge.position-absolute { z-index: 2; }
.product-card .product-img-wrap img { mix-blend-mode: multiply; transition: transform .35s ease; padding: .9rem !important; }
.product-card .card-body { padding: .85rem 1rem 1rem; }
.product-card .card-body .small { font-size: .78rem; }
.product-img-wrap img { mix-blend-mode: multiply; transition: transform .35s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.06); }
[data-bs-theme="dark"] .product-img-wrap, [data-bs-theme="dark"] .product-card .product-img-wrap { background: #fff !important; }
.app-chip { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; margin-right: 4px; }

/* ---------- Buttons: gradient color combos ---------- */
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, background-image .15s ease; }
.btn-primary { background-image: var(--uc-grad); border-color: transparent; }
.btn-primary:hover, .btn-primary:focus { background-image: var(--uc-grad-hover); border-color: transparent; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(6, 182, 212, .35); }
.btn-primary:active { background-image: var(--uc-grad-hover) !important; border-color: transparent !important; transform: translateY(0); }
.btn-outline-primary:hover { background-image: var(--uc-grad); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(6, 182, 212, .28); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #06b6d4; --bs-btn-border-color: rgba(103, 232, 249, .5); }

/* ---------- "For Every Business" compact card ---------- */
.biz-card { background: linear-gradient(135deg, #0891b2, #67e8f9); box-shadow: 0 14px 36px rgba(8, 145, 178, .35); }
.biz-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px 140px at 90% 0%, rgba(255, 255, 255, .18), transparent 70%),
              radial-gradient(180px 120px at 0% 100%, rgba(45, 212, 191, .18), transparent 70%); }
.biz-chip { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 650; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: .3rem .7rem; backdrop-filter: blur(4px); }

/* ---------- Shop filter sidebar ---------- */
.filter-card { position: sticky; top: 96px; }
.filter-group-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--uc-blue); margin-bottom: .5rem; }
[data-bs-theme="dark"] .filter-group-title { color: #06b6d4; }
.filter-check { padding-top: .2rem; padding-bottom: .2rem; }
.filter-check .form-check-label { width: 100%; font-size: .88rem; cursor: pointer; }
.filter-check .form-check-input { cursor: pointer; }
.filter-check .form-check-input:checked { background-image: var(--uc-grad); background-color: var(--uc-blue); border-color: transparent; }
.filter-count { font-size: .7rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: 999px; padding: .1rem .5rem; }
.view-toggle .btn { width: 38px; }

/* ---------- Content pages (policy/help) ---------- */
.page-content h2 { margin-top: 2.2rem; font-weight: 700; padding-bottom: .35rem; border-bottom: 2px solid rgba(6, 182, 212, .15); }
.page-content h3 { margin-top: 1.4rem; font-weight: 600; font-size: 1.05rem; }
.page-content table { border-radius: .6rem; overflow: hidden; }
.page-content .alert { border-radius: .9rem; }
.page-content thead { background: rgba(6, 182, 212, .08); }

/* ---------- Accordion (FAQ) ---------- */
.accordion-item { border: 1px solid var(--bs-border-color); border-radius: .9rem !important; overflow: hidden; margin-bottom: .65rem; }
.accordion-button { font-weight: 600; }
.accordion-button:focus { box-shadow: none; }
.accordion-button:not(.collapsed) { background: rgba(6, 182, 212, .06); color: var(--uc-blue); box-shadow: none; }

/* ---------- Hero (lightened Ochaka gradient: airy navy-teal → soft ember) ---------- */
/* ---------- Hero (clean & elegant light theme) ---------- */
.hero { position: relative; overflow: hidden; color: #0f172a;
  background: #ffffff;
  padding-top: 4.5rem; padding-bottom: 4.5rem;
}
/* Very subtle radial wash so the section doesn't look flat */
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(59,130,246,.06), transparent 60%),
    radial-gradient(700px 420px at 95% 110%, rgba(244,114,182,.05), transparent 65%);
}
.hero::after { content: none; }
.hero .container { position: relative; z-index: 1; }
/* Hide leftover decorative layers from the old dark hero */
.hero-stars { display: none; }
.hero-art-glow { display: none; }
.hero h1 { font-weight: 700; color: #0f172a; font-size: clamp(2rem, 3.6vw, 2.85rem); line-height: 1.18; letter-spacing: -.01em; }
.hero .accent { background: linear-gradient(90deg, #2563eb, #06b6d4 60%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .text-secondary { color: #475569 !important; }
.hero .fs-5 { font-size: 1.05rem !important; }
.hero .hero-stats { gap: 2.75rem !important; }
.hero .hero-stats .fs-3 { color: #0f172a; font-size: 1.55rem !important; font-weight: 700; }
.hero .hero-stats small { color: #64748b; }
.hero-badge { display: inline-block; font-size: .78rem; font-weight: 600; color: #2563eb;
  padding: .42rem 1rem; border-radius: 999px; letter-spacing: .02em;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.22);
}
.hero ul li { color: #334155; }
.hero ul li i { font-size: 1.05rem; }
/* CTA buttons re-tuned for the clean background */
.btn-hero-cta { background: linear-gradient(135deg, #ff7849, #ea580c); color: #fff; border: none; font-weight: 600;
  box-shadow: 0 10px 24px rgba(234,88,12,.28); transition: transform .18s ease, box-shadow .18s ease; }
.btn-hero-cta:hover, .btn-hero-cta:focus { background: linear-gradient(135deg, #ff8a5e, #f97316); color: #fff;
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(234,88,12,.38); }
.btn-hero-ghost { color: #0f172a; border: 1.5px solid #e2e8f0; background: #fff; font-weight: 600; }
.btn-hero-ghost:hover { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }

/* Dark mode: keep the clean look but with a dark surface */
[data-bs-theme="dark"] .hero { background: #0b1220; color: #e6edf7; }
[data-bs-theme="dark"] .hero h1 { color: #fff; }
[data-bs-theme="dark"] .hero .text-secondary { color: #94a3b8 !important; }
[data-bs-theme="dark"] .hero .hero-stats .fs-3 { color: #fff; }
[data-bs-theme="dark"] .hero-badge { color: #a5f3fc; background: rgba(103,232,249,.1); border-color: rgba(103,232,249,.32); }
[data-bs-theme="dark"] .hero ul li { color: #cbd5e1; }
[data-bs-theme="dark"] .btn-hero-ghost { color: #e6edf7; background: transparent; border-color: rgba(255,255,255,.18); }
[data-bs-theme="dark"] .btn-hero-ghost:hover { color: #fff; background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.42); }

/* ---------- Hero showcase: frameless 3D product display + watermark motif ---------- */
.hero-showcase { position: relative; width: min(460px, 100%); }
.hero-showcase-frame { position: relative; aspect-ratio: 10 / 11; }
/* Transparent stage that blends into the page — faint Windows watermark behind the product */
.hero-art { position: absolute; inset: 0; }
.hero-art-glow { position: absolute; border-radius: 50%; filter: blur(56px); opacity: .35; pointer-events: none; }
.hero-art-glow.glow-1 { width: 240px; height: 240px; top: -40px; left: -40px; background: #06b6d4; }
.hero-art-glow.glow-2 { width: 280px; height: 280px; bottom: 60px; right: -60px; background: #ff7849; opacity: .25; }
/* Bouncing brand-mark watermark behind the showcase (unique to this project) */
.hero-brand-watermark { position: absolute; left: 50%; top: 42%; margin-left: -170px; margin-top: -170px;
  opacity: .12; filter: brightness(2.1); pointer-events: none;
  animation: wm-bounce 6s ease-in-out infinite; }
.hero-brand-watermark svg { width: 340px; height: 340px; }
@keyframes wm-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
/* Premium 3D abstract showcase: iridescent orb, glass UI cards, orbit rings, cursor tilt */
.hero-ring { position: absolute; left: 50%; top: 40%; width: 86%; aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%) rotateX(67deg); border-radius: 50%;
  border: 1.5px dashed rgba(103, 232, 249, .5); animation: ring-spin 26s linear infinite; }
@keyframes ring-spin { to { transform: translate(-50%, -50%) rotateX(67deg) rotate(360deg); } }
.hero-podium { position: absolute; left: 50%; top: 61%; transform: translateX(-50%);
  width: 66%; height: 58px; pointer-events: none; filter: blur(7px);
  background: radial-gradient(ellipse at center, rgba(6, 182, 212, .4) 0%, rgba(255, 120, 73, .14) 45%, transparent 72%); }
.hero-stage { position: absolute; inset: 0; perspective: 1100px; pointer-events: none; }
/* Abstract thematic centerpiece (replaces literal product shots) */
.hero-abstract { position: absolute; left: 50%; top: 42%; width: 76%; aspect-ratio: 1;
  transform: translate(-50%, -52%); transform-style: preserve-3d; will-change: transform;
  animation: abstract-sway 9s ease-in-out infinite; }
/* 360°-style sway combined with a gentle bounce */
@keyframes abstract-sway {
  0%   { transform: translate(-50%, -52%) rotateY(-15deg) rotateX(4deg); }
  25%  { transform: translate(-50%, -55%) rotateY(0deg) rotateX(0deg); }
  50%  { transform: translate(-50%, -52%) rotateY(15deg) rotateX(-4deg); }
  75%  { transform: translate(-50%, -55%) rotateY(0deg) rotateX(0deg); }
  100% { transform: translate(-50%, -52%) rotateY(-15deg) rotateX(4deg); }
}
/* Cursor-follow tilt (set via main.js) overrides the sway while hovering */
.hero-stage.tilting .hero-abstract { animation: none;
  transform: translate(-50%, -52%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .12s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .hero-abstract, .hero-stage.tilting .hero-abstract { animation: none; transform: translate(-50%, -52%); }
}
/* Iridescent glow halo behind the rotating icon */
.hero-abstract .orb-halo { position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 120, 73, .38), rgba(6, 182, 212, .2) 45%, transparent 72%);
  filter: blur(26px); }
/* Big rotating product app icons (cycle one-by-one via main.js) */
.hero-big-icon { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; border-radius: 26%;
  background: #fff; border: 1px solid rgba(15, 30, 50, .1);
  box-shadow: 0 30px 60px rgba(2, 6, 23, .55), inset 0 -6px 18px rgba(15, 30, 50, .08);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.5) rotateY(85deg);
  transition: opacity .55s ease, transform .65s cubic-bezier(.34, 1.3, .64, 1); }
.hero-big-icon img { width: 62%; height: 62%; object-fit: contain; }
.hero-big-icon.active { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(0deg); }
@media (prefers-reduced-motion: reduce) { .hero-big-icon { transition: opacity .4s ease; transform: translate(-50%, -50%); } }
/* Floating glass software cards */
.hero-abstract .glass-card { position: absolute; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .4); }
.gc-code { left: -4%; top: 4%; width: 46%; padding: .7rem .8rem; animation: pill-float 5s ease-in-out infinite; }
.gc-dots { display: flex; gap: 4px; margin-bottom: .55rem; }
.gc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff7849; }
.gc-dots i:nth-child(2) { background: #f59e0b; }
.gc-dots i:nth-child(3) { background: #2dd4bf; }
.gc-line { height: 6px; border-radius: 99px; margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(103, 232, 249, .85), rgba(45, 212, 191, .45)); }
.gc-line.w-50 { background: linear-gradient(90deg, rgba(255, 178, 122, .85), rgba(255, 120, 73, .45)); }
.gc-line.w-25 { background: rgba(255, 255, 255, .4); margin-bottom: 0; }
.gc-key { right: -7%; bottom: 12%; width: 62%; display: flex; align-items: center; gap: .6rem;
  padding: .65rem .8rem; animation: pill-float 5.6s ease-in-out infinite; animation-delay: 1.2s; }
.gc-key-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; color: #fff;
  background: linear-gradient(135deg, #ff7849, #ea580c);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(255, 120, 73, .4); }
.gc-key-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gc-key-title { font-size: .58rem; font-weight: 800; letter-spacing: .16em; color: #a5f3fc; }
.gc-key-code { font-size: .72rem; font-weight: 700; color: #fff; letter-spacing: .04em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }
.gc-check { margin-left: auto; color: #67e8f9; font-size: 1.05rem; flex-shrink: 0; }
/* Floating 3D cubes */
.hero-abstract .cube { position: absolute; width: 16px; height: 16px; border-radius: 3px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45);
  transform: rotate(45deg); animation: pill-float 4.4s ease-in-out infinite; }
.hero-abstract .cb-1 { top: 0; right: 14%; }
.hero-abstract .cb-2 { bottom: 4%; left: 10%; animation-delay: .9s;
  background: rgba(255, 120, 73, .3); border-color: rgba(255, 178, 122, .55); }
.hero-abstract .cb-3 { top: 38%; right: -5%; width: 11px; height: 11px; animation-delay: 1.7s;
  background: rgba(103, 232, 249, .3); border-color: rgba(103, 232, 249, .6); }
.hero-tile { position: absolute; width: 54px; height: 54px; border-radius: 14px; background: #fff;
  box-shadow: 0 10px 24px rgba(15, 30, 50, .14); border: 1px solid rgba(15, 30, 50, .08);
  display: flex; align-items: center; justify-content: center;
  animation: pill-float 4.2s ease-in-out infinite; }
.hero-tile img { width: 30px; height: 30px; object-fit: contain; }
.hero-tile.tile-1 { top: 13%; left: 7%; }
.hero-tile.tile-2 { top: 24%; right: 8%; animation-delay: .8s; }
.hero-tile.tile-3 { top: 56%; left: 6%; animation-delay: 1.6s; }
.hero-tile.tile-4 { top: 60%; right: 10%; animation-delay: 2.4s; }
[data-bs-theme="dark"] .hero-tile { background: #f8fafc; }
/* Whole art panel links to the product currently shown (href synced by the rotator in main.js) */
.hero-photo-link { position: absolute; inset: 0; z-index: 1; }
.hero-delivery-pill { position: absolute; top: 16px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 750; color: #fff;
  padding: .4rem .8rem; border-radius: 999px; background: var(--uc-grad);
  box-shadow: 0 8px 22px rgba(6, 182, 212, .4); animation: pill-float 4s ease-in-out infinite; }
@keyframes pill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero-rating-chip { position: absolute; top: auto; bottom: 4%; left: -18px; z-index: 3; white-space: nowrap;
  animation: pill-float 4.5s ease-in-out infinite; animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .hero-delivery-pill, .hero-rating-chip, .hero-brand-watermark { animation: none; }
}

/* ---------- Sticky limited-time deal bar (fixed TOP, purple→blue gradient) ----------
 * Reworked Feb 2026 to match the design reference: a vibrant
 * purple-to-cyan-blue ribbon at the TOP of every page with the headline,
 * a clickable "GSOFT20"-style coupon-pill that copies on click, a
 * "Shop Now ›" link, an optional countdown (only when a scheduled vibe
 * promo is live) and a small × dismiss control on the right. */
/* Compact pill deal-bar — small floating chip at the very top center,
   no longer the full-width rectangular gradient strip.  When dismissed
   it slides up & out; the trustbar + navbar take its place naturally. */
.deal-bar { position: fixed; left: 0; right: 0; top: 8px; z-index: 1080;
  background: transparent;
  pointer-events: none;          /* only the inner pill is clickable */
  display: flex; justify-content: center;
  font-size: .82rem; line-height: 1;
}
.deal-bar-pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: .7rem;
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #0D47A1 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  box-shadow: 0 8px 22px rgba(13, 71, 161, .35);
  font-weight: 600;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
.deal-bar-icon { font-size: .85rem; opacity: .9; }
.deal-bar-headline { font-weight: 600; color: #ffffff; }
.deal-bar-code-pill { display: none !important; }    /* legacy element kept hidden */
.deal-bar-shop-link {
  color: #ffffff !important; text-decoration: none;
  font-weight: 700; font-size: .82rem; letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: .15rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background .15s ease, transform .15s ease;
}
.deal-bar-shop-link:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); text-decoration: none; }
.deal-bar-countdown-wrap {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(0, 0, 0, .18);
  border-radius: 999px; padding: 2px 10px;
  font-size: .76rem;
}
.deal-bar-countdown-wrap .deal-countdown { color: #fef3c7; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.deal-bar-close-x {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 0;
  width: 22px; height: 22px;
  font-size: .95rem; line-height: 1; padding: 0;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.deal-bar-close-x:hover { background: rgba(255, 255, 255, .35); }

/* The floating pill doesn't reserve vertical space, so the body no
   longer needs to be pushed down. Keep a tiny offset so it doesn't kiss
   the very edge on mobile. */
body.has-deal-bar { padding-top: 0; padding-bottom: 0; }
body.has-deal-bar #chat-bubble { bottom: 22px; }
@media (max-width: 768px) {
  body.has-deal-bar { padding-top: 56px; }
  .deal-bar-headline { font-size: .78rem; }
}

/* ---------- Home: Best Sellers spotlight (featured + side list) ---------- */
.spotlight-card { overflow: hidden; }
.spotlight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #43224d, #1b2240 50%, #06b6d4); }
.spotlight-img-wrap { background: linear-gradient(180deg, #f9fafc, #e8f9fc); border: 1px solid rgba(15, 23, 42, .06); overflow: hidden; }
.spotlight-img-wrap img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.spotlight-card:hover .spotlight-img-wrap img { transform: scale(1.05); }
[data-bs-theme="dark"] .spotlight-img-wrap { background: #fff; }
.side-product-row { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.side-product-row:hover { transform: translateX(4px); border-color: rgba(6, 182, 212, .4); box-shadow: var(--uc-shadow-sm); }
.side-thumb { width: 68px; height: 68px; flex-shrink: 0; border-radius: .8rem;
  background: linear-gradient(180deg, #f9fafc, #edf1f8); border: 1px solid rgba(15, 23, 42, .06);
  display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.side-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
[data-bs-theme="dark"] .side-thumb { background: #fff; }
.side-add { width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Home: Elessi-minimal centered product cards ---------- */
.product-card .card-body.text-center .product-title { font-size: .85rem; max-width: 100%; }
.btn-elessi { border: 1.5px solid var(--bs-border-color); color: var(--bs-body-color); background: transparent;
  border-radius: 999px; font-size: .8rem; font-weight: 650; letter-spacing: .02em;
  transition: background-color .18s ease, background-image .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .15s ease; }
.btn-elessi:hover { background-image: var(--uc-grad); border-color: transparent; color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 22px rgba(6, 182, 212, .3); }
[data-bs-theme="dark"] .btn-elessi { border-color: rgba(103, 232, 249, .35); color: #ececf0; }

/* ---------- Home: Picked-for-you horizontal scroll strip ---------- */
.scroll-strip { scrollbar-width: thin; scroll-snap-type: x mandatory; }
.strip-card { width: 232px; scroll-snap-align: start; }
.strip-img { height: 132px; margin: .65rem .65rem 0; border-radius: .8rem; overflow: hidden;
  background: linear-gradient(180deg, #f9fafc, #edf1f8); border: 1px solid rgba(15, 23, 42, .06);
  display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.strip-img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .8rem; mix-blend-mode: multiply; transition: transform .35s ease; }
.strip-card:hover .strip-img { border-color: rgba(6, 182, 212, .35); }
.strip-card:hover .strip-img img { transform: scale(1.06); }
[data-bs-theme="dark"] .strip-img { background: #fff; }

/* ---------- Shop: wide horizontal product banners ---------- */
.shop-row:hover { transform: translateY(-3px); }
.shop-row-img { width: 132px; height: 132px; overflow: hidden;
  background: linear-gradient(180deg, #f9fafc, #edf1f8); border: 1px solid rgba(15, 23, 42, .06);
  display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.shop-row-img img { width: 100%; height: 100%; object-fit: contain; padding: .9rem; mix-blend-mode: multiply; transition: transform .35s ease; }
.shop-row:hover .shop-row-img { border-color: rgba(6, 182, 212, .35); }
.shop-row:hover .shop-row-img img { transform: scale(1.06); }
[data-bs-theme="dark"] .shop-row-img { background: #fff; }
.shop-row-buy { min-width: 138px; }

.min-w-0 { min-width: 0; }

/* ---------- Rich toast notifications ---------- */
.mv-toast-wrap { position: fixed; top: 86px; right: 18px; z-index: 2000;
  display: flex; flex-direction: column; gap: .6rem;
  width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.mv-toast { position: relative; display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 2.5rem .95rem 1rem; border-radius: 16px; overflow: hidden; pointer-events: auto;
  background: linear-gradient(135deg, #1b2240 0%, #0e4f5c 100%); color: #fff;
  border: 1px solid rgba(103, 232, 249, .35); box-shadow: 0 18px 44px rgba(2, 6, 23, .45);
  animation: mv-toast-in .45s cubic-bezier(.34, 1.56, .64, 1); }
.mv-toast.hide { animation: mv-toast-out .3s ease forwards; }
@keyframes mv-toast-in { from { opacity: 0; transform: translateX(46px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes mv-toast-out { to { opacity: 0; transform: translateX(46px) scale(.95); } }
.mv-toast-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, #ff7849, #ea580c); box-shadow: 0 6px 16px rgba(255, 120, 73, .45);
  animation: toast-icon-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes toast-icon-pop { from { transform: scale(.4) rotate(-12deg); } to { transform: none; } }
.mv-toast-body { min-width: 0; }
.mv-toast-title { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.mv-toast-msg { font-size: .8rem; color: rgba(255, 255, 255, .82); line-height: 1.4; }
.mv-toast-action { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
  font-size: .78rem; font-weight: 750; color: #fff !important; text-decoration: none;
  background: var(--uc-grad); padding: .32rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(6, 182, 212, .4); transition: transform .15s ease, box-shadow .15s ease; }
.mv-toast-action:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(6, 182, 212, .55); color: #fff; }
.mv-toast-close { position: absolute; top: 8px; right: 8px; background: none; border: none;
  color: rgba(255, 255, 255, .55); font-size: .7rem; padding: .25rem; line-height: 1;
  transition: color .15s ease; }
.mv-toast-close:hover { color: #fff; }
.mv-toast-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #06b6d4, #ff7849); transform-origin: left;
  animation: toast-progress var(--toast-ttl, 3.2s) linear forwards; }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mv-toast, .mv-toast-icon, .mv-toast-progress { animation: none; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Chat widget ---------- */
#chat-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 1080;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--uc-grad); color: #fff; border: none;
  box-shadow: 0 10px 25px rgba(6, 182, 212, .45);
  font-size: 1.4rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
#chat-bubble:hover { transform: scale(1.07); box-shadow: 0 14px 32px rgba(6, 182, 212, .5); }

/* Unread notification bell — surfaces on top-right of the chat bubble the
   instant an admin reply lands while the chat panel is closed.  The bell
   shakes gently and shows a tiny red count badge; both disappear the
   moment the customer opens the chat or starts typing a reply.  */
/* Chat unread badge — clean bright red dot with count, shown the
   instant an admin reply lands while the chat panel is closed.
   Persisted across page navigations via localStorage (uc_chat_unread).
   Disappears the moment the customer opens the chat panel. */
.chat-bell {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .55), 0 0 0 2px #fff;
  animation: chat-bell-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.chat-bell > i { display: none; }   /* hide the legacy bell icon */
.chat-bell-count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
@keyframes chat-bell-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(239, 68, 68, .55), 0 0 0 2px #fff; }
  50%      { transform: scale(1.12); box-shadow: 0 2px 12px rgba(239, 68, 68, .85), 0 0 0 2px #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-bell { animation: none; }
}
/* Hide the badge entirely when display:none is set inline (default state). */
#chat-bubble .chat-bell[style*="display:none"],
#chat-bubble .chat-bell[style*="display: none"] { display: none !important; }
[data-bs-theme="dark"] .chat-bell { box-shadow: 0 2px 10px rgba(239, 68, 68, .65), 0 0 0 2px #0F172A; }

/* Messenger-style admin-reply preview card.  Anchored to the bottom-right
   right next to the chat bubble.  Slides in from the right with a soft
   bounce; clicking opens the chat panel.  Auto-clears on open/typing. */
.chat-msg-preview {
  position: fixed; bottom: 24px; right: 96px; z-index: 1080;
  width: 280px; max-width: calc(100vw - 110px);
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #c7d8f7;
  border-radius: 14px;
  padding: 10px 12px 12px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  animation: chat-msg-preview-in 0.32s cubic-bezier(.18,.89,.32,1.28) both;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-msg-preview:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(15,23,42,.22); }
.chat-msg-preview::after {
  /* tail pointing right at the chat bubble */
  content: ''; position: absolute; right: -7px; bottom: 22px;
  width: 14px; height: 14px; background: #ffffff;
  border-right: 1px solid #c7d8f7; border-top: 1px solid #c7d8f7;
  transform: rotate(45deg); border-bottom-left-radius: 4px;
}
[data-bs-theme="dark"] .chat-msg-preview { background: #1c2541; color: #e0e7ff; border-color: #2d3a5a; }
[data-bs-theme="dark"] .chat-msg-preview::after { background: #1c2541; border-color: #2d3a5a; }
.chat-msg-preview-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.chat-msg-preview-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.chat-msg-preview-meta { flex: 1; min-width: 0; line-height: 1.1; }
.chat-msg-preview-name { font-size: 12px; font-weight: 700; color: #1e3a8a; }
[data-bs-theme="dark"] .chat-msg-preview-name { color: #93c5fd; }
.chat-msg-preview-sub  { font-size: 10px; color: #64748b; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.chat-msg-preview-close {
  background: transparent; border: 0; color: #94a3b8; padding: 0 4px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.chat-msg-preview-close:hover { color: #ef4444; }
.chat-msg-preview-body {
  font-size: 13px; line-height: 1.35; color: #1e293b;
  /* clamp to 2 lines so the bubble stays compact */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  word-break: break-word;
}
[data-bs-theme="dark"] .chat-msg-preview-body { color: #e0e7ff; }
.chat-msg-preview-cta {
  font-size: 11px; font-weight: 600; color: #2563eb;
  margin-top: 6px;
}
[data-bs-theme="dark"] .chat-msg-preview-cta { color: #93c5fd; }
@keyframes chat-msg-preview-in {
  0%   { opacity: 0; transform: translateX(20px) scale(0.92); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.chat-msg-preview.is-hiding {
  opacity: 0; transform: translateX(20px) scale(0.92); pointer-events: none;
}
/* Mobile: shrink the preview a bit so it doesn't crowd the bubble */
@media (max-width: 480px) {
  .chat-msg-preview { width: 240px; bottom: 18px; right: 80px; padding: 8px 10px 10px; }
  .chat-msg-preview-body { font-size: 12px; }
}

/* Notify-Me modal — clean centered card for out-of-stock waitlist sign-up. */
.notify-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,23,42,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.notify-modal-overlay.is-open { display: flex; }
.notify-modal-card {
  background: #ffffff; color: #0f172a;
  border-radius: 18px; padding: 32px 28px 26px;
  width: 100%; max-width: 380px;
  text-align: center; position: relative;
  box-shadow: 0 24px 60px rgba(15,23,42,.32);
  animation: notify-card-in 0.28s cubic-bezier(.18,.89,.32,1.28);
}
[data-bs-theme="dark"] .notify-modal-card { background: #1c2541; color: #e0e7ff; }
.notify-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0; color: #94a3b8;
  font-size: 14px; padding: 6px 8px; cursor: pointer; border-radius: 6px;
}
.notify-modal-close:hover { color: #ef4444; background: rgba(239,68,68,.08); }
.notify-modal-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px;
  box-shadow: 0 6px 18px rgba(245,158,11,.4);
  animation: chat-bell-shake 1.6s ease-in-out 2;
}
.notify-modal-title {
  font-size: 18px; font-weight: 800; margin: 0 0 6px;
  color: #0f172a;
}
[data-bs-theme="dark"] .notify-modal-title { color: #e0e7ff; }
.notify-modal-sub {
  font-size: 13px; color: #64748b; margin: 0 0 18px;
  line-height: 1.5;
}
.notify-modal-sub strong { color: #1e3a8a; }
[data-bs-theme="dark"] .notify-modal-sub strong { color: #93c5fd; }
#notify-modal-email {
  margin-bottom: 12px; font-size: 14px;
  padding: 10px 14px; border-radius: 10px;
}
.notify-modal-submit {
  width: 100%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; border: 0;
  padding: 12px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.16s ease;
  box-shadow: 0 6px 18px rgba(29,78,216,.32);
}
.notify-modal-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(29,78,216,.44); }
.notify-modal-msg {
  margin-top: 12px; font-size: 12px; font-weight: 600;
  min-height: 18px;
}
.notify-modal-msg.is-pending { color: #94a3b8; }
.notify-modal-msg.is-ok      { color: #047857; }
.notify-modal-msg.is-err     { color: #b91c1c; }
@keyframes notify-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
/* ---------- Chat widget (rich navy blue, refined) ---------- */
:root {
  --chat-navy-1: #0b1d4f;
  --chat-navy-2: #172554;
  --chat-navy-3: #1e3a8a;
  --chat-accent: #3b82f6;
  --chat-accent-2: #60a5fa;
  --chat-surface: #ffffff;
  --chat-surface-soft: #f8fafc;
  --chat-text: #0f172a;
  --chat-text-soft: #475569;
  --chat-border: #e2e8f0;
}
[data-bs-theme="dark"] {
  --chat-surface: #0f1729;
  --chat-surface-soft: #1c2541;
  --chat-text: #e2e8f0;
  --chat-text-soft: #94a3b8;
  --chat-border: #1e293b;
}

#chat-panel {
  position: fixed; bottom: 16px; right: 16px; z-index: 1080;
  width: 360px; max-width: calc(100vw - 24px); height: 500px; max-height: calc(100vh - 40px);
  display: none; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(2, 6, 23, .28);
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  font-weight: 400;
}
/* Keep the launcher bubble visible when the panel is open by parking the
 * panel above the bubble's column.  Bubble lives at right:18 bottom:22. */
body.has-deal-bar #chat-panel { bottom: 72px; }
#chat-panel.open { display: flex; animation: chat-pop .25s ease; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

#chat-head {
  background: var(--chat-surface);
  color: var(--chat-text);
  padding: .7rem .8rem;
  position: relative;
  border-bottom: 1px solid var(--chat-border);
}
#chat-head::after { content: none; }
.chat-head-name { font-size: .95rem; font-weight: 700; letter-spacing: .1px; color: var(--chat-text); }
.chat-head-sub  { color: var(--chat-text-soft); font-weight: 400; font-size: .72rem; letter-spacing: .15px; }
.chat-head-btn {
  background: transparent; border: 0; color: var(--chat-text-soft);
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.chat-head-btn:hover { background: var(--chat-surface-soft); color: var(--chat-text); }
.chat-head-back { font-size: 1.15rem; }
.chat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center; font-size: .82rem;
  color: #cbd5ff;
}
/* Addie photo avatar — fills the circular chat-avatar with the headshot. */
.chat-avatar-photo { background: #fff; padding: 0; overflow: hidden; width: 34px; height: 34px; }
.chat-avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Addie greeting bubble shown at the top of the chat thread. */
.chat-addie-greeting { margin-bottom: .55rem; }
.chat-addie-bubble { max-width: 92%; }
.chat-addie-bubble strong { font-size: .82rem; }
.chat-addie-meta { font-size: .62rem; color: var(--chat-text-soft, #94a3b8); margin: .15rem 0 0 .15rem; font-weight: 500; }
/* Timezone dropdown inside the install scheduler. */
.pa-sched-tz-select {
  width: 100%; font-size: .76rem; padding: .35rem .5rem; border-radius: 8px;
  border: 1px solid #c7d8f7; background: #fff; color: #1e3a8a; font-weight: 600;
  cursor: pointer;
}
.pa-sched-tz-select:focus { outline: none; border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
[data-bs-theme="dark"] .pa-sched-tz-select { background: #1f2a4a; border-color: #2d3a5a; color: #e0e7ff; }

.chat-online-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; margin-right: .25rem; box-shadow: 0 0 0 2px rgba(74,222,128,.3);
  animation: online-pulse 2s ease-in-out infinite; }
@keyframes online-pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(74,222,128,.35); } 50% { box-shadow: 0 0 0 5px rgba(74,222,128,.12); } }

#chat-body { flex: 1; overflow-y: auto; padding: .65rem .6rem;
  background: var(--chat-surface);
  color: var(--chat-text);
}
.chat-msg {
  max-width: 90%; padding: .6rem .85rem; border-radius: 16px; margin-bottom: .5rem;
  font-size: .85rem; line-height: 1.45; font-weight: 400; white-space: pre-wrap;
}
.chat-msg.user {
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-navy-3));
  color: #fff; margin-left: auto;
  border-bottom-right-radius: 5px;
  box-shadow: 0 3px 10px rgba(29,78,216,.25);
}
.chat-msg.bot {
  background: #f1f3f7;
  border: 1px solid var(--chat-border);
  color: var(--chat-text);
  border-bottom-left-radius: 5px;
}
[data-bs-theme="dark"] .chat-msg.bot { background: var(--chat-surface-soft); }
.chat-msg.typing { display: inline-flex; gap: 4px; align-items: center; padding: .75rem .9rem; }
.chat-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-text-soft);
  animation: typing-bounce 1.1s ease-in-out infinite; }
.chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Soft fade-in for the welcome message + chips after the typing-dots
   intro plays.  Triggered by JS adding `.is-fade-in` once the dots fade. */
.chat-msg.is-fade-in, .chat-chips.is-fade-in, .chat-input-row.is-fade-in {
  animation: chat-intro-fade .35s ease-out both;
}
@keyframes chat-intro-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Quick chips */
.chat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 .45rem; }
.chat-chip {
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-soft);
  color: var(--chat-navy-3);
  font-size: .68rem; font-weight: 500; border-radius: 999px;
  padding: .25rem .6rem; cursor: pointer;
  transition: all .15s ease;
}
.chat-chip:hover {
  background: linear-gradient(135deg, var(--chat-navy-2), var(--chat-navy-3));
  color: #fff; border-color: var(--chat-navy-3); transform: translateY(-1px);
}
[data-bs-theme="dark"] .chat-chip { color: #93c5fd; }

/* Lead form card — uses the same navy palette */
.chat-lead-card {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  padding: .9rem;
  margin-bottom: .6rem;
}
[data-bs-theme="dark"] .chat-lead-card { background: linear-gradient(180deg,#1c2541 0%, #172037 100%); }
.chat-lead-title {
  font-size: .82rem; font-weight: 500; color: var(--chat-text);
  margin-bottom: .65rem; line-height: 1.4;
}
.chat-lead-input {
  background: var(--chat-surface) !important;
  border: 1px solid var(--chat-border) !important;
  font-weight: 400 !important; color: var(--chat-text) !important;
  margin-bottom: .45rem; border-radius: 8px;
}
.chat-lead-input:focus { border-color: var(--chat-accent) !important; box-shadow: 0 0 0 .2rem rgba(59,130,246,.18) !important; }
.chat-lead-cta {
  width: 100%; margin-top: .25rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--chat-navy-2), var(--chat-navy-3));
  border: 0; color: #fff; font-weight: 500;
}
.chat-lead-cta:hover { background: linear-gradient(135deg, var(--chat-navy-1), var(--chat-navy-2)); color: #fff; }
.chat-lead-cta-chat {
  width: 100%; margin-top: .35rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  border: 0; color: #fff; font-weight: 500;
  box-shadow: 0 3px 10px rgba(59,130,246,.25);
}
.chat-lead-cta-chat:hover { background: linear-gradient(135deg, var(--chat-accent-2), var(--chat-accent)); color: #fff; }
.chat-lead-cta-alt {
  width: 100%; margin-top: .35rem; border-radius: 8px;
  background: var(--chat-surface); color: var(--chat-navy-3);
  border: 1px solid var(--chat-navy-3); font-weight: 500;
}
.chat-lead-cta-alt:hover { background: var(--chat-navy-3); color: #fff; }
.chat-lead-skip {
  width: 100%; margin-top: .35rem; padding: 0;
  font-size: .72rem; color: var(--chat-text-soft) !important;
  text-decoration: none; font-weight: 400;
}
.chat-lead-skip:hover { color: var(--chat-accent) !important; }

/* Iteration 20 — new compact 3-fields + single blue send arrow layout. */
.chat-lead-field-row { margin-bottom: .45rem; }
.chat-lead-row-send  { display: flex; align-items: stretch; gap: .35rem; margin-bottom: .1rem; }
.chat-lead-row-send  .chat-lead-input { margin-bottom: 0; flex: 1; }
.chat-lead-send-btn {
  flex-shrink: 0; width: 36px; height: 32px; border-radius: 8px; border: 0;
  background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: .82rem;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .35); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.chat-lead-send-btn:hover { transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .5);
  background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; }
.chat-lead-send-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.chat-lead-error {
  margin-top: .4rem; padding: .35rem .55rem; border-radius: 7px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.32);
  color: #b91c1c; font-size: .68rem; line-height: 1.35;
}
[data-bs-theme="dark"] .chat-lead-error { color: #fca5a5; background: rgba(239,68,68,.12); }

/* Post-submit "Thanks for contacting" greeting message bubble. */
.chat-msg.agent-greeting {
  background: linear-gradient(135deg, #ecfeff, #cffafe);
  color: #0e7490; border: 1px solid #67e8f9;
  border-radius: 12px; font-weight: 500;
  padding: .55rem .8rem;
}
[data-bs-theme="dark"] .chat-msg.agent-greeting {
  background: linear-gradient(135deg, #164e63, #155e75);
  color: #cffafe; border-color: #0891b2;
}

/* ProAssist install-call scheduler — inline calendar inside the chat
   widget.  Navy header + light date pills + green-pill selected state.
   Sits at the top of #chat-body when uc_proassist=1. */
.pa-sched-card {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  border: 1px solid #c7d8f7; border-radius: 12px;
  padding: .8rem .85rem; margin-bottom: .6rem;
  box-shadow: 0 1px 3px rgba(30,58,138,.06);
}
[data-bs-theme="dark"] .pa-sched-card {
  background: linear-gradient(180deg,#1c2541 0%, #1a2440 100%);
  border-color: #2d3a5a;
}
.pa-sched-header {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-bottom: .55rem;
}
.pa-sched-header .bi {
  font-size: 1.15rem; color: #1e3a8a; margin-top: 2px;
}
[data-bs-theme="dark"] .pa-sched-header .bi { color: #93c5fd; }
.pa-sched-title {
  font-size: .85rem; font-weight: 700; color: #1e3a8a; line-height: 1.2;
}
[data-bs-theme="dark"] .pa-sched-title { color: #c7d2fe; }
.pa-sched-sub {
  font-size: .7rem; color: #475569; margin-top: 1px;
}
[data-bs-theme="dark"] .pa-sched-sub { color: #94a3b8; }
.pa-sched-step-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b; margin-bottom: .35rem;
}
[data-bs-theme="dark"] .pa-sched-step-label { color: #94a3b8; }
.pa-sched-tz {
  font-size: .6rem; color: #94a3b8; font-weight: 500; margin-left: .3rem;
  text-transform: none; letter-spacing: 0;
}
.pa-sched-dates {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
}
.pa-sched-date {
  border: 1px solid #c7d8f7; background: #fff; border-radius: 8px;
  padding: .35rem .25rem; text-align: center; cursor: pointer;
  transition: all .14s ease;
  display: flex; flex-direction: column; align-items: center;
}
.pa-sched-date:hover { border-color: #1e3a8a; background: #eff6ff; transform: translateY(-1px); }
.pa-sched-date.is-selected { background: linear-gradient(135deg,#1e3a8a,#2563eb); border-color:#1e3a8a; color:#fff; }
.pa-sched-date.is-selected .pa-sched-date-dow,
.pa-sched-date.is-selected .pa-sched-date-mon { color: #c7d2fe; }
[data-bs-theme="dark"] .pa-sched-date { background: #1f2a4a; border-color: #2d3a5a; color: #e0e7ff; }
[data-bs-theme="dark"] .pa-sched-date:hover { background: #243156; }
.pa-sched-date-dow {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
}
.pa-sched-date-day {
  font-size: .98rem; font-weight: 700; color: #1e3a8a; line-height: 1.1;
}
[data-bs-theme="dark"] .pa-sched-date-day { color: #e0e7ff; }
.pa-sched-date.is-selected .pa-sched-date-day { color: #fff; }
.pa-sched-date-mon {
  font-size: .6rem; color: #64748b; text-transform: uppercase;
}
.pa-sched-times {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .28rem;
  max-height: 200px; overflow-y: auto; padding-right: 2px;
}
.pa-sched-time {
  border: 1px solid #c7d8f7; background: #fff; border-radius: 6px;
  padding: .3rem .1rem; text-align: center; cursor: pointer;
  font-size: .73rem; font-weight: 600; color: #1e3a8a;
  transition: all .12s ease;
}
.pa-sched-time:hover { border-color: #10b981; background: #ecfdf5; color: #047857; transform: translateY(-1px); }
.pa-sched-time.is-taken,
.pa-sched-time.is-past {
  opacity: .35; cursor: not-allowed; background: #f1f5f9;
  text-decoration: line-through; pointer-events: none; color: #94a3b8;
}
[data-bs-theme="dark"] .pa-sched-time { background: #1f2a4a; border-color: #2d3a5a; color: #c7d2fe; }
[data-bs-theme="dark"] .pa-sched-time:hover { background: #064e3b; color: #6ee7b7; border-color: #10b981; }
[data-bs-theme="dark"] .pa-sched-time.is-taken,
[data-bs-theme="dark"] .pa-sched-time.is-past { background: #1a1f33; color: #475569; }
.pa-sched-back {
  margin-top: .5rem; background: transparent; border: 0;
  color: #1e3a8a; font-size: .72rem; font-weight: 600;
  padding: .15rem 0; cursor: pointer;
}
.pa-sched-back:hover { text-decoration: underline; }
[data-bs-theme="dark"] .pa-sched-back { color: #93c5fd; }
.pa-sched-error {
  margin-top: .5rem; padding: .35rem .55rem; border-radius: 6px;
  font-size: .72rem; background: #fef2f2; color: #b91c1c;
  border: 1px solid #fecaca;
}
.pa-sched-closed {
  font-size: .72rem; color: #64748b; padding: .4rem;
  text-align: center; font-style: italic;
}
.pa-sched-empty {
  font-size: .72rem; color: #64748b; padding: .4rem;
  text-align: center;
}
.pa-sched-step { margin-top: .25rem; }

/* Confirmed booking card */
.pa-sched-confirm {
  background: linear-gradient(135deg,#ecfdf5 0%, #ffffff 100%);
  border: 1px solid #6ee7b7; border-radius: 12px;
  padding: .85rem; margin-bottom: .6rem; text-align: center;
}
[data-bs-theme="dark"] .pa-sched-confirm {
  background: linear-gradient(135deg,#053922 0%, #0a3b29 100%);
  border-color: #10b981;
}
.pa-sched-confirm-icon {
  font-size: 1.6rem; color: #10b981; line-height: 1; margin-bottom: .25rem;
}
.pa-sched-confirm-title {
  font-size: .8rem; font-weight: 700; color: #047857; line-height: 1.2;
}
[data-bs-theme="dark"] .pa-sched-confirm-title { color: #6ee7b7; }
.pa-sched-confirm-when {
  font-size: .8rem; color: #064e3b; margin-top: .25rem; font-weight: 600;
}
[data-bs-theme="dark"] .pa-sched-confirm-when { color: #d1fae5; }
.pa-sched-reschedule {
  margin-top: .55rem; background: transparent; border: 1px solid #10b981;
  color: #047857; border-radius: 999px; padding: .25rem .85rem;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  transition: all .14s ease;
}
.pa-sched-reschedule:hover { background: #10b981; color: #fff; }
[data-bs-theme="dark"] .pa-sched-reschedule { color: #6ee7b7; }

/* Sticky "Don't lose this — agent on the way" nudge.  Surfaces the
   instant the customer starts typing into the chat-input without having
   submitted the lead form — captures the highest-intent moment before
   they bounce. */
.chat-lead-nudge {
  display: flex; align-items: center; gap: 8px;
  margin: -2px -2px 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
  color: #7c2d12;
  border: 1px solid #fb923c;
  border-left: 4px solid #ea580c;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(234,88,12,.22);
  animation: chat-nudge-in .35s ease-out, chat-nudge-pulse 2.4s ease-in-out 1.2s infinite;
}
.chat-lead-nudge .bi { font-size: 18px; color: #ea580c; flex-shrink: 0; }
[data-bs-theme="dark"] .chat-lead-nudge {
  background: linear-gradient(135deg, rgba(180,83,9,.40), rgba(234,88,12,.30));
  color: #fed7aa;
  border-color: rgba(251,146,60,.55);
  border-left-color: #fb923c;
}
[data-bs-theme="dark"] .chat-lead-nudge .bi { color: #fbbf24; }
@keyframes chat-nudge-in {
  from { opacity: 0; transform: translateY(-6px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat-nudge-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(234,88,12,.22); }
  50%      { box-shadow: 0 6px 22px rgba(234,88,12,.45); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-lead-nudge { animation: chat-nudge-in .35s ease-out; }
}


/* Live presence — admin is typing indicator (visible to customer).
   Pings from chat-customer.php (admin_typing flag, 5-sec freshness)
   drive the toggle from main.js inside adminPollOnce().  Same visual
   language as the admin-side "Customer is typing…" pill so both ends
   recognise the cue instantly. */
.chat-typing { padding: 0 14px 4px; }
.chat-typing-bubble {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  color: #1e3a8a;
  border-radius: 14px; border-bottom-left-radius: 5px;
  border: 1px solid rgba(59,130,246,.20);
  font-size: 12px; font-style: italic;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
[data-bs-theme="dark"] .chat-typing-bubble {
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(99,102,241,.18));
  color: #bfdbfe; border-color: rgba(96,165,250,.30);
}
.chat-typing-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #3b82f6;
  animation: chat-typing-bounce 1.05s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: .18s; }
.chat-typing-dot:nth-child(3) { animation-delay: .36s; margin-right: 4px; }
.chat-typing-text { margin-left: 4px; }
@keyframes chat-typing-bounce {
  0%, 80%, 100% { transform: translateY(0)    scale(1);   opacity: .55; }
  40%           { transform: translateY(-3px) scale(1.15); opacity: 1;  }
}

/* Input row + send */
.chat-input-row { background: var(--chat-surface); border-top: 1px solid var(--chat-border); padding: .5rem .6rem !important; position: relative; display: block; flex-direction: column; align-items: stretch; }
/* Rounded composer card (input on top, tool row below) — matches reference. */
.chat-composer {
  border: 1px solid var(--chat-border); border-radius: 16px;
  background: var(--chat-surface); padding: .5rem .65rem .4rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.chat-composer:focus-within { border-color: var(--chat-accent); box-shadow: 0 0 0 .18rem rgba(59,130,246,.13); }
.chat-input {
  width: 100%; border: 0 !important; background: transparent !important;
  padding: .15rem .1rem !important; font-weight: 400; font-size: .85rem !important;
  color: var(--chat-text) !important; box-shadow: none !important; outline: none !important;
}
.chat-input::placeholder { color: var(--chat-text-soft); font-weight: 400; }
.chat-input:focus { box-shadow: none !important; }
.chat-composer-tools { display: flex; align-items: center; gap: .15rem; margin-top: .35rem; }
.chat-tool-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  background: transparent; color: var(--chat-text-soft); font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.chat-tool-btn:hover { background: var(--chat-surface-soft); color: var(--chat-accent); }
.chat-tool-btn.is-recording { color: #fff; background: #ef4444; animation: chat-rec-pulse 1.2s ease-in-out infinite; }
/* Multilingual mic tooltip — appears above the mic on hover/focus */
.chat-mic-tip { position: relative; }
.chat-mic-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  background: var(--chat-navy-3, #0f172a); color: #fff;
  padding: 6px 10px; border-radius: 8px; font-size: .7rem; font-weight: 600;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 6px 18px rgba(15,23,42,.18); z-index: 20;
}
.chat-mic-tip::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--chat-navy-3, #0f172a);
  pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 20;
}
.chat-mic-tip:hover::after, .chat-mic-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.chat-mic-tip:hover::before, .chat-mic-tip:focus-visible::before { opacity: 1; }
.chat-mic-tip.is-recording::after, .chat-mic-tip.is-recording::before { opacity: 0 !important; }
@keyframes chat-rec-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.chat-voice-timer { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #ef4444; margin-left: .25rem; }
.chat-voice-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: online-pulse 1.2s ease-in-out infinite; }
.chat-send-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; padding: 0;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-navy-3));
  color: #fff; border: none; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-send-btn:hover { color: #fff; transform: scale(1.06); box-shadow: 0 6px 16px rgba(29,78,216,.4); }
/* Emoji picker panel */
.chat-emoji-panel {
  position: absolute; left: .6rem; right: .6rem; bottom: calc(100% - 2px);
  background: var(--chat-surface); border: 1px solid var(--chat-border);
  border-radius: 12px; box-shadow: 0 -6px 20px rgba(2,6,23,.16);
  padding: .5rem; grid-template-columns: repeat(8, 1fr); gap: .1rem;
  max-height: 160px; overflow-y: auto; z-index: 5;
}
.chat-emoji-item { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; padding: .25rem; border-radius: 8px; cursor: pointer; }
.chat-emoji-item:hover { background: var(--chat-surface-soft); }
.chat-attach-status { font-size: .72rem; margin: .35rem .2rem 0; }
/* In-chat attachment bubbles */
.chat-msg-attach { padding: .4rem !important; }
.chat-msg-img { max-width: 200px; max-height: 200px; border-radius: 12px; display: block; cursor: pointer; }
.chat-msg-audio { width: 210px; max-width: 100%; height: 38px; display: block; }
.chat-msg.user .chat-msg-file { color: #fff; }
.chat-msg-file { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; word-break: break-all; color: var(--chat-navy-3); }

.chat-talk-band {
  border-top: 1px solid var(--chat-border);
  background: var(--chat-surface-soft);
  color: var(--chat-text-soft); font-weight: 500;
  font-size: .68rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  padding: .4rem .7rem !important;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.chat-talk-band .chat-talk-phone {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--chat-navy-3); text-decoration: none;
  font-weight: 700; font-size: .76rem; letter-spacing: .1px;
  white-space: nowrap;
}
.chat-talk-band .chat-talk-phone:hover { color: var(--chat-navy-2); }
.chat-talk-phone-ring {
  color: #2563eb; font-size: .7rem;
  animation: chat-call-flicker 1.4s ease-in-out infinite;
}
@keyframes chat-call-flicker {
  0%, 100% { opacity: 1;   transform: rotate(0deg)   scale(1); }
  18%      { opacity: .35; transform: rotate(-12deg) scale(1.08); }
  36%      { opacity: 1;   transform: rotate(12deg)  scale(1.08); }
  55%      { opacity: .55; transform: rotate(-8deg)  scale(1); }
  72%      { opacity: 1;   transform: rotate(0deg)   scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-talk-phone-ring { animation: none; }
}
.chat-talk-band .ttf-sep { margin: 0 .35rem; opacity: .45; }
[data-bs-theme="dark"] .chat-talk-band a { color: #93c5fd; }

/* Bubble itself — match navy */
#chat-bubble {
  background: linear-gradient(135deg, var(--chat-navy-2), var(--chat-navy-3));
  box-shadow: 0 10px 26px rgba(29,78,216,.4);
}
#chat-bubble:hover { transform: scale(1.07); box-shadow: 0 14px 32px rgba(29,78,216,.5); }

/* ---------- Toll-free phone CTA (navbar pill + trust bar + mobile) ----------
 * Slim single-line pill sized to match the other btn-sm pills in the header
 * (Ask AI, USD, Cart) so the whole nav row stays on ONE line at ≥1200 px and
 * doesn't wrap the cart button to a second row.  Kept the orange gradient +
 * pulse animation so it still pops, but the height now matches its
 * neighbours (≈32 px) instead of towering over them. */
.phone-cta { align-items: center; gap: .4rem; padding: .25rem .85rem .25rem .3rem; border-radius: 999px;
  background: linear-gradient(135deg, #1565C0, #0D47A1); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: .85rem; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(255, 120, 73, .32);
  animation: phone-pulse 2.6s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease; }
.phone-cta:hover { color: #fff; transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 22px rgba(21, 101, 192, .5); }
.phone-cta-icon { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; font-size: .8rem;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .38);
  display: inline-flex; align-items: center; justify-content: center;
  animation: phone-ring 2.6s ease-in-out infinite; }
.phone-cta-tag { display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); color: #fff;
  border-radius: 999px; padding: 1px 7px; margin-right: .15rem; }
@keyframes phone-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(255, 120, 73, .35); }
  50% { box-shadow: 0 8px 26px rgba(255, 120, 73, .6), 0 0 0 7px rgba(255, 120, 73, .12); }
}
@keyframes phone-ring {
  0%, 24%, 100% { transform: rotate(0); }
  4% { transform: rotate(-16deg); } 8% { transform: rotate(14deg); }
  12% { transform: rotate(-10deg); } 16% { transform: rotate(7deg); } 20% { transform: rotate(0); }
}
.trustbar-phone {
  font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  color: #ffffff !important;                 /* clean white — elegant over the dark trustbar */
  display: inline-flex; align-items: center; gap: .35rem;
  transition: color .15s ease;
}
.trustbar-phone:hover { color: #f8fafc !important; }
.trustbar-phone .bi {
  color: #fbbf24;                            /* warm amber accent on the ring icon */
  font-size: .9rem;
  animation: phone-ring 2.6s ease-in-out infinite;
  display: inline-block;
}
.phone-cta-mobile { font-size: .78rem; background: linear-gradient(135deg, #1565C0, #0D47A1); color: #fff;
  border: none; box-shadow: 0 4px 12px rgba(255, 120, 73, .35); animation: phone-pulse 2.6s ease-in-out infinite; }
.phone-cta-mobile:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .phone-cta, .phone-cta-icon, .trustbar-phone .bi, .phone-cta-mobile { animation: none; } }

/* ---------- Product page: clean still image (replaces 360° viewer) ---------- */
.pd-still-card { overflow: hidden; border-radius: 1rem; }
.pd-still-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .8rem;
  background: radial-gradient(80% 70% at 50% 38%, rgba(6, 182, 212, .04), transparent 75%);
}
.pd-still-img {
  width: 86%;
  max-height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(15, 30, 50, .18));
  /* No animation — image is static so it loads + renders instantly. */
}
[data-bs-theme="dark"] .pd-still-img {
  filter: drop-shadow(0 14px 22px rgba(2, 6, 23, .55));
}

/* ---------- Product page: 360° viewer (legacy; kept for any other page) ---------- */
.pd-360-card { overflow: visible; }
.pd-360-frame { position: relative; aspect-ratio: 1 / 1; perspective: 1000px; cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  border-radius: .8rem; background: radial-gradient(80% 70% at 50% 38%, rgba(6, 182, 212, .08), transparent 75%); }
.pd-360-frame.dragging { cursor: grabbing; }
.pd-360-ring { position: absolute; left: 50%; top: 46%; width: 88%; aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%) rotateX(70deg); border-radius: 50%;
  border: 1.5px dashed rgba(6, 182, 212, .4); animation: ring-spin 26s linear infinite; }
.pd-360-podium { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: 64%; height: 44px; pointer-events: none; filter: blur(8px);
  background: radial-gradient(ellipse at center, rgba(6, 182, 212, .35) 0%, rgba(37, 99, 235, .15) 45%, transparent 72%); }
.pd-360-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.pd-360-img { width: 74%; max-height: 78%; object-fit: contain; pointer-events: none;
  transform-style: preserve-3d; will-change: transform;
  /* Gentle vertical bounce only — no Y-axis rotation.  Cursor-tilt
     and drag-to-spin still override this transform when the user
     interacts (see `.tilting` / `.dragging` rules below). */
  animation: pd-bounce-only 3.6s ease-in-out infinite;
  filter: drop-shadow(0 26px 34px rgba(15, 30, 50, .3));
  -webkit-box-reflect: below 10px linear-gradient(transparent 74%, rgba(15, 30, 50, .12)); }
@keyframes pd-bounce-only {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
[data-bs-theme="dark"] .pd-360-img { filter: drop-shadow(0 26px 36px rgba(2, 6, 23, .55));
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255, 255, 255, .1)); }
@keyframes pd-sway {
  0%   { transform: rotateY(-24deg) rotateX(3deg) translateY(0); }
  25%  { transform: rotateY(0deg) rotateX(0deg) translateY(-8px); }
  50%  { transform: rotateY(24deg) rotateX(-3deg) translateY(0); }
  75%  { transform: rotateY(0deg) rotateX(0deg) translateY(-8px); }
  100% { transform: rotateY(-24deg) rotateX(3deg) translateY(0); }
}
.pd-360-frame.tilting .pd-360-img { animation: none;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(1.03);
  transition: transform .12s ease-out; }
.pd-360-frame.dragging .pd-360-img { animation: none;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(1.05);
  transition: transform .04s linear; }
.pd-360-badge { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: .72rem; font-weight: 750; color: #fff; padding: .35rem .9rem; border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #06b6d4); box-shadow: 0 8px 20px rgba(37, 99, 235, .35);
  pointer-events: none; }
.pd-360-badge .bi { animation: ring-rotate 3.2s linear infinite; display: inline-block; }
@keyframes ring-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pd-360-img, .pd-360-ring, .pd-360-badge .bi { animation: none; }
  .pd-360-frame.tilting .pd-360-img, .pd-360-frame.dragging .pd-360-img { transform: none; }
}

/* ---------- Misc ---------- */
.footer-dark { background: linear-gradient(135deg, #221231 0%, #171c36 45%, #0c3a47 100%); color: #b4b4bc; }
[data-bs-theme="dark"] .footer-dark { background: linear-gradient(135deg, #190d24 0%, #11152a 45%, #092c36 100%); border-top: 1px solid rgba(103, 232, 249, .15); }
.footer-dark a { color: #d9d9df; text-decoration: none; transition: color .15s ease; }
.footer-dark a:hover { color: #fff; }
.footer-dark h6 { letter-spacing: .04em; }
.cat-chip { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--bs-body-color); display: inline-block; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.cat-chip:hover { border-color: var(--uc-blue); color: var(--uc-blue); background: rgba(6, 182, 212, .05); }
.pay-option { cursor: pointer; border: 2px solid var(--bs-border-color); border-radius: 12px; transition: border-color .15s ease; }
.pay-option.active { border-color: var(--uc-blue); background: rgba(6, 182, 212, .04); }
.pay-option.active.paypal { border-color: #0070BA; background: rgba(0, 112, 186, .05); }
.btn-paypal { background: #FFC439; color: #003087; font-weight: 700; }
.btn-paypal:hover { background: #f0b62e; color: #003087; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--uc-grad);
  color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* Payment method mini badges (footer + checkout) */
.pay-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .2rem .45rem;
  border-radius: .25rem;
  background: #fff;
  color: #1e293b;
  border: 1px solid rgba(0,0,0,.15);
}
[data-bs-theme="dark"] .pay-badge { background: #e2e8f0; }

/* Footer social icons */
.social-circle {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #cbd5e1 !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.social-circle:hover { background: #06b6d4; color: #fff !important; transform: translateY(-2px); }

/* Unavailable variant options: blurred + non-interactive */
.variant-blur {
  filter: blur(1px);
  opacity: .45;
  pointer-events: none;
  user-select: none;
}

/* ---------- Payment & trust badge images ---------- */
.pay-icon { height: 27px; width: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); background: #fff; }
.pay-icon-sm { height: 21px; }
.trust-badge-img { height: 40px; width: auto; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }

/* ---------- Mobile fixed contact strip (inside sticky header) ---------- */
.mobile-contact-strip { border-top: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.mobile-contact-strip .btn { white-space: nowrap; }

/* ---------- Star rating input (Write a Review) ---------- */
/* ---------- Interactive star rating input (write-a-review modal) ----------
   Default: every star is empty (light grey outline).
   Hover: hovered star + all stars to its right (lower values, due to
   row-reverse) preview-fill in gold.
   Selected: same fill carries through after release.
   This is the classic "pick N stars" UX — never shows pre-filled stars. */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; font-size: 1.9rem; line-height: 1; user-select: none; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label {
  color: #d1d5db;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease, text-shadow .12s ease;
  -webkit-text-stroke: 1px #94a3b8;
}
.star-input label:hover { transform: scale(1.18); }
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: #f59e0b;
  -webkit-text-stroke: 1px #d97706;
  text-shadow: 0 1px 2px rgba(217,119,6,.35);
}
.star-input input:focus-visible + label {
  outline: 2px solid #f59e0b;
  outline-offset: 3px;
  border-radius: 4px;
}
[data-bs-theme="dark"] .star-input label { color: #475569; -webkit-text-stroke: 1px #64748b; }
[data-bs-theme="dark"] .star-input label:hover,
[data-bs-theme="dark"] .star-input label:hover ~ label,
[data-bs-theme="dark"] .star-input input:checked ~ label {
  color: #fbbf24;
  -webkit-text-stroke: 1px #f59e0b;
  text-shadow: 0 1px 2px rgba(251,191,36,.45);
}

/* ---------- Ask AI compact pill ---------- */
.ask-ai-pill { border-radius: 999px; background: linear-gradient(90deg, rgba(6, 182, 212, .1), rgba(6, 182, 212, .08));
  border: 1px solid rgba(6, 182, 212, .18); }
.ask-ai-mark { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; }

/* ---------- OS icons (Windows / Mac) ---------- */
.os-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.os-icon-lg { width: 22px; height: 22px; vertical-align: -5px; }
.os-badge { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); font-weight: 650; }
.btn-primary .os-icon { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .8)); }

/* ---------- Shop toolbar + colorful sort ---------- */
.shop-toolbar { border-radius: 1rem; background: linear-gradient(90deg, rgba(6, 182, 212, .08), rgba(255, 120, 73, .07));
  border: 1px solid rgba(6, 182, 212, .15); }
.sort-label { background: var(--uc-grad); color: #fff; border-radius: 999px; padding: .32rem .85rem; font-size: .78rem; font-weight: 750; }
.sort-select { border: 2px solid rgba(6, 182, 212, .45); border-radius: 999px; font-weight: 700; color: var(--uc-blue);
  box-shadow: 0 2px 8px rgba(6, 182, 212, .12); padding-left: .9rem; }
.sort-select:focus { border-color: var(--uc-indigo); box-shadow: 0 0 0 .2rem rgba(6, 182, 212, .15); }
[data-bs-theme="dark"] .sort-select { color: #06b6d4; border-color: rgba(103, 232, 249, .5); }

/* ---------- Header alignment ---------- */
.navbar .navbar-nav .nav-link { display: flex; align-items: center; }
.navbar-brand .brand-text { white-space: nowrap; }

/* ---------- Footer alignment ---------- */
.footer-dark h6 { margin-bottom: 1rem !important; }
.footer-dark ul li a { display: inline-block; padding: .05rem 0; }

/* ---------- Add to Cart buttons: royal blue (theme-matched) ---------- */
.add-to-cart-btn { background-image: linear-gradient(135deg, #3b82f6, #1d4ed8); border-color: transparent; color: #fff; }
.add-to-cart-btn:hover, .add-to-cart-btn:focus { background-image: linear-gradient(135deg, #2563eb, #1e40af); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(37, 99, 235, .4); transform: translateY(-1px); }
.add-to-cart-btn:active { background-image: linear-gradient(135deg, #2563eb, #1e40af) !important; border-color: transparent !important; color: #fff !important; }
/* Added-to-cart state: deeper blue + check icon */
.add-to-cart-btn.added { background-image: linear-gradient(135deg, #1d4ed8, #1e3a8a); border-color: transparent; color: #fff; }
.add-to-cart-btn.added:hover, .add-to-cart-btn.added:focus { background-image: linear-gradient(135deg, #1e40af, #172554); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(37, 99, 235, .4); transform: translateY(-1px); }

/* ---------- Cart remove button ---------- */
.cart-remove-btn { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(220, 38, 38, .3); background: rgba(220, 38, 38, .08); color: #dc2626;
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cart-remove-btn:hover { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff;
  transform: scale(1.1) rotate(8deg); box-shadow: 0 6px 16px rgba(220, 38, 38, .4); }
[data-bs-theme="dark"] .cart-remove-btn { background: rgba(248, 113, 113, .14); color: #f87171; border-color: rgba(248, 113, 113, .35); }
[data-bs-theme="dark"] .cart-remove-btn:hover { color: #fff; }

/* ---------- Checkout flow stepper ---------- */
.checkout-steps { gap: .6rem; }
.checkout-steps .step { display: flex; align-items: center; gap: .45rem; }
.step-dot { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 2px solid var(--bs-border-color); font-size: .95rem;
  transition: box-shadow .2s ease; }
.step-label { font-size: .82rem; font-weight: 750; color: var(--bs-secondary-color); }
.step.done .step-dot { background: rgba(37, 99, 235, .12); color: #2563eb; border-color: rgba(37, 99, 235, .45); }
.step.done .step-label { color: #2563eb; }
.step.active .step-dot { background: var(--uc-grad); color: #fff; border-color: transparent; animation: step-pulse 2.2s ease-in-out infinite; }
.step.active .step-label { color: var(--uc-blue); }
[data-bs-theme="dark"] .step.active .step-label { color: #67e8f9; }
.step-line { flex: 0 0 44px; height: 3px; border-radius: 3px; background: var(--bs-border-color); }
.step-line.done { background: linear-gradient(90deg, #2563eb, #06b6d4); }
@keyframes step-pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(6, 182, 212, .35); } 50% { box-shadow: 0 6px 24px rgba(6, 182, 212, .6); } }

/* ---------- Checkout summary + assist cards ---------- */
.summary-card { overflow: hidden; }
.summary-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--uc-grad); }
.summary-total { background: linear-gradient(90deg, rgba(6, 182, 212, .1), rgba(255, 120, 73, .08)); border: 1px solid rgba(6, 182, 212, .22); }
[data-bs-theme="dark"] .summary-total { background: linear-gradient(90deg, rgba(103, 232, 249, .14), rgba(45, 212, 191, .1)); border-color: rgba(103, 232, 249, .28); }
.assist-card { border: 1.5px dashed rgba(6, 182, 212, .35); border-radius: .9rem;
  background: linear-gradient(135deg, rgba(6, 182, 212, .06), rgba(255, 120, 73, .05)); }
[data-bs-theme="dark"] .assist-card { border-color: rgba(103, 232, 249, .4); background: linear-gradient(135deg, rgba(103, 232, 249, .1), rgba(45, 212, 191, .08)); }

/* ---------- Checkout phone: flag | code | number ---------- */
.phone-flag { font-size: 1.15rem; background: var(--bs-tertiary-bg); border-right: 0; }
.phone-code { font-weight: 700; color: var(--uc-blue); }
[data-bs-theme="dark"] .phone-code { color: #67e8f9; }

/* ---------- Checkout canvas: stacked receipt-style banners ---------- */
.checkout-canvas { background: linear-gradient(180deg, #111223 0%, #1f2038 55%, #111223 100%); }
[data-bs-theme="dark"] .checkout-canvas { background: linear-gradient(180deg, #0e0f1e 0%, #1e1f37 55%, #0e0f1e 100%); }
.checkout-canvas .step-label { color: #c6c6cd; }
.checkout-canvas .step.done .step-label { color: #60a5fa; }
.checkout-canvas .step.active .step-label { color: #67e8f9; }
.checkout-canvas .step-dot { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #c6c6cd; }
.checkout-canvas .step.done .step-dot { background: rgba(96, 165, 250, .15); color: #60a5fa; border-color: rgba(96, 165, 250, .45); }
.checkout-canvas .step.active .step-dot { background: var(--uc-grad); color: #fff; border-color: transparent; }
.checkout-canvas .step-line { background: rgba(255, 255, 255, .16); }
.checkout-canvas .step-line.done { background: linear-gradient(90deg, #60a5fa, #2563eb); }
/* Mobile checkout: prevent overlaps, keep everything readable */
@media (max-width: 575.98px) {
  .co-banner-secure { position: static !important; align-self: center; margin: 0 0 .5rem !important; }
  .checkout-steps { gap: .15rem; }
  .checkout-steps .step-line { flex: 0 0 14px; }
  .checkout-steps .step-label { font-size: .68rem; }
  .checkout-steps .step-dot { width: 30px; height: 30px; font-size: .8rem; }
  .back-to-cart { font-size: .72rem; }
  .card-brands { display: none !important; }
  .co-watermark svg { width: 220px; height: 220px; }
  .receipt-amount { font-size: 1.45rem; }
}
.checkout-canvas .back-to-cart { color: #67e8f9; }
.co-banner { border: none; border-radius: 18px; box-shadow: 0 18px 44px rgba(2, 6, 23, .35); overflow: hidden; }
/* Very light brand watermark on the banner background */
.co-watermark { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-10deg);
  opacity: .045; pointer-events: none; z-index: 0; }
.co-watermark svg { width: 300px; height: 300px; }
[data-bs-theme="dark"] .co-watermark { opacity: .07; filter: brightness(1.9); }
.co-banner > *:not(.co-watermark) { position: relative; z-index: 1; }
.co-summary-sticky { position: sticky; top: 16px; }
.receipt-amount { font-size: 1.6rem; letter-spacing: -.5px; line-height: 1.1; }

/* Stylish banner columns: numbered heads + refined fields */
.co-head { border-bottom: 1px dashed var(--bs-border-color); padding-bottom: .6rem; }
.co-num { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--uc-grad); color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 16px rgba(6, 182, 212, .35); }
.co-head-icon { font-size: 1.4rem; color: var(--uc-blue); opacity: .35; }
.co-banner .form-label { font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.co-banner .form-control, .co-banner .form-select { border-radius: .65rem; padding: .42rem .65rem;
  background: rgba(6, 182, 212, .06); border: 1.5px solid rgba(6, 182, 212, .22);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.co-banner .form-control:hover, .co-banner .form-select:hover { border-color: rgba(6, 182, 212, .45); }
.co-banner .form-control:focus, .co-banner .form-select:focus { background: var(--bs-body-bg);
  border-color: var(--uc-blue); box-shadow: 0 0 0 .2rem rgba(6, 182, 212, .12); }
.co-banner .input-group .form-control, .co-banner .input-group .form-select { border-radius: 0; }
.co-banner .input-group > :first-child { border-top-left-radius: .65rem; border-bottom-left-radius: .65rem; }
.co-banner .input-group > :last-child { border-top-right-radius: .65rem; border-bottom-right-radius: .65rem; }
[data-bs-theme="dark"] .co-banner .form-control, [data-bs-theme="dark"] .co-banner .form-select { background: rgba(103, 232, 249, .06); border-color: rgba(103, 232, 249, .22); }
[data-bs-theme="dark"] .co-banner .form-control:focus, [data-bs-theme="dark"] .co-banner .form-select:focus { background: #1c1d33; border-color: #67e8f9; }

/* Payment tiles — short & sweet */
.pay-tile { border-radius: 14px; }
.pay-tile:hover { border-color: rgba(6, 182, 212, .5); }
.pay-option.active { box-shadow: 0 0 0 3px rgba(6, 182, 212, .14); }
.pay-option.active.paypal { box-shadow: 0 0 0 3px rgba(0, 112, 186, .14); }

/* Card details drop-down reveal */
.card-form-reveal { animation: card-reveal .3s ease; }
.card-form-reveal.d-none { animation: none; }
@keyframes card-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Live card brand detection icons */
.card-brands { gap: .3rem; }
.card-brand-icon { height: 18px; width: auto; border-radius: 3px; opacity: .45;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.card-brand-icon.dimmed { opacity: .15; filter: grayscale(100%); }
.card-brand-icon.active { opacity: 1; transform: scale(1.2); box-shadow: 0 2px 8px rgba(6, 182, 212, .35); }

/* ---------- Order success: blue tick ---------- */
.success-tick { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto;
  background: linear-gradient(135deg, #06b6d4, #06b6d4); color: #fff; font-size: 3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(6, 182, 212, .4);
  animation: tick-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
.success-tick.success-tick-sm { width: 64px; height: 64px; font-size: 2rem;
  box-shadow: 0 10px 26px rgba(6, 182, 212, .35); }
@keyframes tick-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Order success: QR receipt rail (boxless, theme-aware) ----------
 * The block now sits without a card wrapper.  Only the QR matrix itself has
 * its own white plate (required for scanning contrast) — everything else is
 * driven by the active theme so light/dark mode look natively integrated.
 * The QR plate emits a soft teal-cyan pulse to draw the customer's eye.
 * --------------------------------------------------------------------------- */
.receipt-qr-block { padding: 8px 4px 4px; }

.receipt-qr-tag { display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, #06b6d4, #0891b2); color:#fff;
  padding: 4px 12px; border-radius: 999px; font-size: 9.5px;
  font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(6, 182, 212, .26); margin-bottom: 12px; }

.receipt-qr-wrap { width: 156px; height: 156px; padding: 10px;
  background: #ffffff;                                        /* always white — needed for QR contrast */
  border-radius: 14px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(6, 182, 212, .55);
  animation: receipt-qr-pulse 2.4s ease-in-out infinite; position: relative; }
[data-bs-theme="dark"] .receipt-qr-wrap { box-shadow: 0 0 0 0 rgba(103, 232, 249, .65); }
@keyframes receipt-qr-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(6, 182, 212, .18), 0 0 0 0 rgba(6, 182, 212, .42); }
  60%      { box-shadow: 0 4px 14px rgba(6, 182, 212, .18), 0 0 0 12px rgba(6, 182, 212, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-qr-wrap { animation: none; box-shadow: 0 4px 14px rgba(6, 182, 212, .18); }
}

.receipt-qr-title { font-size: 12.5px; font-weight: 700; line-height: 1.32;
  color: var(--bs-body-color); margin-bottom: 6px; padding: 0 4px; }

.receipt-qr-help { font-size: 11px; line-height: 1.5;
  color: var(--bs-secondary-color, #6c757d); padding: 0 4px; margin-bottom: 12px; }
[data-bs-theme="dark"] .receipt-qr-help { color: rgba(236, 236, 240, .65); }
.receipt-qr-help strong { color: var(--bs-body-color); }

/* HIGHLIGHTED "Or copy the link" CTA — slightly smaller to match the
 * tighter rail.  Solid teal-cyan pill matching the SCAN tag + tick. */
.receipt-qr-copy-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: .3rem; padding: 7px 16px; border-radius: 999px; border: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: #ffffff;
  box-shadow: 0 5px 14px rgba(6, 182, 212, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; cursor: pointer; }
.receipt-qr-copy-btn:hover { transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(6, 182, 212, .42);
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%); color: #ffffff; }
.receipt-qr-copy-btn:focus-visible { outline: 3px solid rgba(6, 182, 212, .45); outline-offset: 2px; }
.receipt-qr-copy-btn.is-copied { background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 18px rgba(16, 185, 129, .4); }

/* ---------- Footer Google Maps button ---------- */
.gmap-btn { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; font-size: .78rem;
  border-color: rgba(255, 255, 255, .35); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gmap-btn:hover { background: linear-gradient(135deg, #4285F4, #34A853); border-color: transparent;
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(66, 133, 244, .4); }
.gmap-pin { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #EA4335; color: #fff; font-size: .65rem; }

/* ---------- Cart badge bump ---------- */
.cart-bump { animation: cart-bump .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cart-bump { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.55); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* ---------- Platform segmented filter (category toolbar) ---------- */
.platform-seg { background: var(--bs-body-bg); border: 1px solid rgba(6, 182, 212, .25); border-radius: 999px; }
[data-bs-theme="dark"] .platform-seg { border-color: rgba(103, 232, 249, .3); }
.platform-pill { display: inline-flex; align-items: center; padding: .3rem .85rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--bs-body-color);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.platform-pill:hover { background: rgba(6, 182, 212, .08); color: var(--uc-blue); }
.platform-pill.active { background: var(--uc-grad); color: #fff !important; box-shadow: 0 4px 12px rgba(6, 182, 212, .3); }
.platform-pill.active .os-icon { filter: brightness(0) invert(1); }

/* ---------- Responsive: tablets & mobile ---------- */
@media (max-width: 991.98px) {
  .navbar-collapse { padding: .5rem 0 .85rem; }
  .navbar-collapse .navbar-nav { margin-bottom: .5rem; }
  .navbar .dropdown-menu.mega { max-height: 60vh; box-shadow: none; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
  .antivirus-menu { min-width: 100% !important; box-shadow: none !important; border: 1px solid var(--bs-border-color); }
  .mega-promo .text-lg-end { text-align: left !important; }
}

@media (max-width: 767.98px) {
  .footer-dark .row.g-4 > div { text-align: center; }
  .footer-dark .row.g-4 .d-flex:not(.justify-content-center):not(.justify-content-md-start):not(.justify-content-md-end) { justify-content: center; }
  .footer-dark form { margin-left: auto; margin-right: auto; }
  .footer-dark .text-md-end .d-flex, .footer-dark .text-md-start .d-flex, .footer-dark .text-md-center .d-flex { justify-content: center; }
  .page-head .text-lg-end { text-align: left !important; }
}

@media (max-width: 575.98px) {
  .topbar { font-size: .72rem; }
  .hero h1 { font-size: 1.95rem; }
  .hero .fs-5 { font-size: 1rem !important; }
  .hero-stats { gap: 1.4rem !important; }
  .hero-stats .fs-3 { font-size: 1.3rem !important; }
  .hero-showcase { width: min(340px, 96%); margin-top: .5rem; }
  .hero-rating-chip { left: 4px; }
  .hero-tile { width: 42px; height: 42px; border-radius: 11px; }
  .hero-tile img { width: 23px; height: 23px; }
  .hero-brand-watermark { margin-left: -120px; margin-top: -120px; }
  .hero-brand-watermark svg { width: 240px; height: 240px; }
  body.has-deal-bar { padding-top: 60px; padding-bottom: 0; }
  body.has-deal-bar #chat-bubble { bottom: 22px; }
  body.has-deal-bar #chat-panel { bottom: 16px; }
  .deal-bar .container { padding-left: 14px !important; padding-right: 36px !important; }
  .deal-bar-headline { font-size: .74rem; }
  .deal-bar-code-pill { font-size: .72rem; padding: 2px 9px; }
  .deal-bar-shop-link { font-size: .76rem; }
  .page-content { overflow-x: hidden; }
  .page-content table { display: block; overflow-x: auto; }
  #chat-panel { height: min(460px, 68vh); bottom: 88px; right: 16px; }
  #chat-bubble { bottom: 18px; right: 16px; width: 52px; height: 52px; font-size: 1.25rem; }
  .pay-icon { height: 23px; }
  .trust-badge-img { height: 36px; }
  .display-4, .display-5 { font-size: 2rem; }
  .reviews-cta h2 { font-size: 1.3rem; }
}

/* =================================================================
   Stock pills — public site product listings & detail page
   ================================================================= */
.pc-stock-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pc-stock-pill.pc-stock-lg { font-size: 13.5px; padding: 6px 14px; }
.pc-stock-pill.is-in   { background:#dcfce7; color:#166534; border-color:#a7f3d0; }
.pc-stock-pill.is-low  { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.pc-stock-pill.is-out  { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.pc-stock-pill.is-ships { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
[data-bs-theme="dark"] .pc-stock-pill.is-in   { background: rgba(34,197,94,.15);  color:#86efac; border-color: rgba(34,197,94,.35); }
[data-bs-theme="dark"] .pc-stock-pill.is-low  { background: rgba(249,115,22,.18); color:#fdba74; border-color: rgba(249,115,22,.35); }
[data-bs-theme="dark"] .pc-stock-pill.is-out  { background: rgba(239,68,68,.18);  color:#fca5a5; border-color: rgba(239,68,68,.35); }
[data-bs-theme="dark"] .pc-stock-pill.is-ships { background: rgba(59,130,246,.16); color:#93c5fd; border-color: rgba(59,130,246,.35); }

/* Dim the whole card slightly when out of stock */
.product-card.is-out-of-stock { opacity: .82; }
.product-card.is-out-of-stock .product-img-wrap img { filter: grayscale(.35); }

/* =================================================================
   Product-card buttons — compact dual "Add" + "Buy Now" pair
   (matches the orange/white pill style on the product detail page)
   ================================================================= */
.pc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13.5px; font-weight: 700; line-height: 1;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap; cursor: pointer;
}
.pc-btn .bi { font-size: 14px; }
.pc-btn:hover { transform: translateY(-1px); }
.pc-btn-cart   { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; box-shadow: 0 4px 12px rgba(234,88,12,.30); }
.pc-btn-cart:hover  { background: linear-gradient(135deg, #fb923c, #f97316); box-shadow: 0 6px 16px rgba(234,88,12,.40); color:#fff; }
.pc-btn-buy    { background: linear-gradient(135deg, #fff4ed, #ffedd5); color: #c2410c; border-color: #fdba74; box-shadow: 0 2px 6px rgba(249,115,22,.10); }
.pc-btn-buy:hover   { background: linear-gradient(135deg, #f97316, #ea580c); border-color: #ea580c; color: #fff; box-shadow: 0 8px 20px rgba(234,88,12,.45); transform: translateY(-2px); }
.pc-btn-buy:hover .bi { color: #fff; }
.pc-btn-notify { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; cursor: not-allowed; }
.pc-btn-notify:hover { transform: none; }
[data-bs-theme="dark"] .pc-btn-buy    { background: rgba(249,115,22,.10); color: #fdba74; border-color: rgba(249,115,22,.40); box-shadow: none; }
[data-bs-theme="dark"] .pc-btn-buy:hover { background: linear-gradient(135deg, #f97316, #ea580c); border-color: #ea580c; color: #fff; box-shadow: 0 8px 20px rgba(234,88,12,.5); }
[data-bs-theme="dark"] .pc-btn-notify { background: rgba(148,163,184,.12); color: #94a3b8; border-color: rgba(148,163,184,.3); }

/* Hide the label on the very narrow card width so only the icon shows */
@media (max-width: 380px) {
  .pc-btn .pc-btn-label { display: none; }
}

/* Product detail page — orange-outlined Buy Now to match screenshot */
.btn-orange-solid   { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; border: 1.5px solid transparent; box-shadow: 0 6px 16px rgba(234,88,12,.32); }
.btn-orange-solid:hover, .btn-orange-solid:focus { background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; box-shadow: 0 10px 24px rgba(234,88,12,.42); transform: translateY(-1px); }
.btn-orange-outline { background: linear-gradient(135deg, #fff4ed, #ffedd5); color: #c2410c; border: 1.5px solid #fdba74; box-shadow: 0 2px 8px rgba(249,115,22,.12); }
.btn-orange-outline:hover, .btn-orange-outline:focus { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #9a3412; border-color: #f97316; box-shadow: 0 6px 16px rgba(249,115,22,.22); }
[data-bs-theme="dark"] .btn-orange-outline { background: rgba(249,115,22,.10); color: #fdba74; border-color: rgba(249,115,22,.40); box-shadow: none; }
[data-bs-theme="dark"] .btn-orange-outline:hover { background: rgba(249,115,22,.18); border-color: #f97316; color: #fff; }

/* =================================================================
   Icon-text spacing — prevents Bootstrap-Icons from touching the
   label that follows them. Applies globally so any new button gets
   correct spacing automatically.
   ================================================================= */
.btn .bi,
.btn i[class^="bi-"],
.s-badge .bi,
.s-badge i[class^="bi-"],
.kpi-label .bi,
.sidebar a .bi,
.adm-topbar .bi,
nav .bi,
.dropdown-item .bi,
.card-head .ttl .bi,
.card-head .ttl i[class^="bi-"] { margin-right: .45rem; }

/* When the icon is the LAST thing inside the element (e.g. ".btn ... <i>↗</i>"),
   add left margin instead of right */
.btn > .bi:last-child,
.btn > i[class^="bi-"]:last-child { margin-right: 0; margin-left: .45rem; }

/* Sidebar items: ensure 14px gap between icon and label so labels never overlap */
.sidebar .item { gap: .65rem; }
.sidebar .item .bi { flex-shrink: 0; }

/* Form controls: prevent icon prefix from kissing the input */
.input-group-text .bi { margin: 0; }

/* Toasts / alerts: lead-icon breathing room */
.alert .bi,
.toast .bi { margin-right: .55rem; }

/* AI Auto-Blogger automation pill — green pulse dot */
.auto-pulse { animation: auto-pulse-anim 1.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(255,255,255,0.85); }
@keyframes auto-pulse-anim {
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.85); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0);    }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);    }
}


/* ==============================================================
   ELEGANT 3D LOGO — public site (navbar) only.
   Adds cinematic depth, a glossy diagonal sheen sweep and a
   tactile hover lift to the brand mark in the navbar.  Admin
   shell uses `.brand-center.logo-3d` (not `.navbar .logo-3d`)
   so it stays untouched — this keeps the admin minimal.
   ============================================================== */
.navbar .logo-3d {
  /* Deeper perspective → the existing rotateY(360deg) bounce/spin
     keyframes now look like a true 3D coin flip instead of a flat
     2D sweep.  Lifting from 320px to 900px is what unlocks the
     "cinema" feel without changing any keyframe. */
  perspective: 900px;
  transform-style: preserve-3d;
  position: relative;
  isolation: isolate;
}
.navbar .logo-3d .brand-mark,
.navbar .logo-3d > img:first-of-type {
  transform-style: preserve-3d;
  filter: drop-shadow(0 6px 14px rgba(6, 182, 212, 0.42))
          drop-shadow(0 2px 4px rgba(15, 23, 42, 0.18));
  transition: filter .45s cubic-bezier(.22,.61,.36,1);
}

/* Glossy diagonal sheen — sweeps across the mark every ~5.5s so
   the logo always feels alive (premium watch / luxury packaging
   vibe).  Sits at z-index 2 so it overlays the SVG/image without
   blocking the hover area. */
.navbar .logo-3d::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  border-radius: var(--vibe-radius, 14px);
  background: linear-gradient(115deg,
              transparent 30%,
              rgba(255, 255, 255, 0.55) 50%,
              transparent 70%);
  background-size: 220% 100%;
  background-position: -150% 0;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: logo-3d-sheen-sweep 5.5s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: 1.6s;
}
[data-bs-theme="dark"] .navbar .logo-3d::after {
  background: linear-gradient(115deg,
              transparent 30%,
              rgba(94, 234, 212, 0.45) 50%,
              transparent 70%);
  mix-blend-mode: screen;
}
.navbar .logo-3d:hover::after { animation-duration: 2.2s; }

@keyframes logo-3d-sheen-sweep {
  0%,
  10%  { background-position: -150% 0; opacity: 0; }
  22%  { opacity: .85; }
  55%  { background-position:  200% 0; opacity: .85; }
  62%  { opacity: 0; }
  100% { background-position:  200% 0; opacity: 0; }
}

/* Hover "lift" — the mark rises off the navbar with deeper
   stacked shadows so the customer feels they're interacting with
   a real object, not flat ink on a page. */
.navbar .logo-3d:hover .brand-mark,
.navbar .logo-3d:hover > img:first-of-type {
  filter: drop-shadow(0 14px 26px rgba(6, 182, 212, 0.55))
          drop-shadow(0 4px 8px rgba(15, 23, 42, 0.32));
}

/* The existing JS-driven `.tilting` rule (mouse-tracking) only
   targeted `.brand-mark`.  Mirror it for the uploaded image so
   stores that uploaded a custom logo also get the parallax tilt. */
.navbar .logo-3d.tilting > img:first-of-type {
  animation: none;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(14px) scale(1.12);
  transition: transform .12s ease-out;
}
/* Slight Z-translate on the inline-SVG tilt too (more depth pop). */
.navbar .logo-3d.tilting .brand-mark {
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(14px) scale(1.14);
}

/* Premium ambient float for the Static motion preset — keeps the
   navbar feeling alive even when the admin picked "no motion" for
   the rest of the storefront. */
body[data-brand-motion="static"] .navbar .logo-3d .brand-mark,
body[data-brand-motion="static"] .navbar .logo-3d > img:first-of-type {
  animation: logo-3d-ambient-float 6.5s ease-in-out infinite;
}
@keyframes logo-3d-ambient-float {
  0%, 100% { transform: rotateY(-6deg) rotateX( 2deg) translateZ(0); }
  25%      { transform: rotateY( 0deg) rotateX(-3deg) translateZ(8px); }
  50%      { transform: rotateY( 6deg) rotateX( 2deg) translateZ(3px); }
  75%      { transform: rotateY( 0deg) rotateX( 3deg) translateZ(8px); }
}

/* Layer behind the logo: a soft 3D ground shadow that "moves" as
   the mark tilts — anchors the mark in space, prevents the
   floating feel from looking detached.  Only painted for the
   non-bounce motion presets (bounce already has its own halo
   ring on ::before — we don't overwrite that). */
body:not([data-brand-motion="bounce"]) .navbar .logo-3d::before {
  content: '';
  position: absolute;
  left: -2px;
  bottom: 2px;
  width: 50px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(15, 23, 42, .35) 0%,
              rgba(15, 23, 42, .15) 55%,
              rgba(15, 23, 42, 0)  85%);
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}
[data-bs-theme="dark"] body:not([data-brand-motion="bounce"]) .navbar .logo-3d::before {
  background: radial-gradient(closest-side,
              rgba(0, 0, 0, .55) 0%,
              rgba(0, 0, 0, .20) 60%,
              rgba(0, 0, 0, 0)   85%);
}

/* Honour OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .navbar .logo-3d::after,
  body[data-brand-motion="static"] .navbar .logo-3d .brand-mark,
  body[data-brand-motion="static"] .navbar .logo-3d > img:first-of-type {
    animation: none !important;
  }
}


/* ============================================================
   ELEGANCE POLISH v2 — Site-wide refinement (Feb 2026)
   Goals (user feedback):
   1. Shrink the mega-menu banner (Microsoft Products + Antivirus)
   2. Reduce boldness across the entire site; lift contrast for richer reading
   3. Make block/card sections smaller, simpler, less chunky
   ============================================================ */

/* --- 1. Lift body contrast (richer reading) --- */
:root {
  --bs-body-color: #1e293b;          /* slate-800, sharper than default #212529 muted */
  --bs-secondary-color: #475569;     /* slate-600 for muted text */
  --bs-emphasis-color: #0f172a;      /* slate-900 for headings */
}
body { color: var(--bs-body-color); }

/* --- 2. PayPal-style contrast: HEAVY headings + light body --- */
/* Body & paragraphs stay clean (NOT bold) for readable, elegant reading. */
body { font-family: "Manrope", "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important; font-weight: 400; }
p, li, small, .small, .text-secondary, .text-body, .form-label, .form-text, .form-control, .form-select, td, th { font-weight: 400; }
strong, b      { font-weight: 700; }
.btn           { font-weight: 600; }
.fw-bold       { font-weight: 600 !important; }    /* small UI emphasis, not bold-bold */
.fw-semibold   { font-weight: 500 !important; }    /* very light emphasis */
.navbar-nav .nav-link,
.navbar-nav .nav-link.fw-semibold,
.navbar-nav .dropdown-toggle.fw-semibold { font-weight: 600 !important; }

/* HEAVY display headings (PayPal-style impact) */
h1, .h1, .display-3, .display-4, .display-5 {
  font-family: "Manrope", "Lato", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
  line-height: 1.08;
  color: var(--bs-emphasis-color);
}
h2, .h2 { font-weight: 800; letter-spacing: -.028em; line-height: 1.15; color: var(--bs-emphasis-color); }
h3, .h3 { font-weight: 750; letter-spacing: -.022em; line-height: 1.2;  color: var(--bs-emphasis-color); }
h4, .h4 { font-weight: 700; letter-spacing: -.018em; color: var(--bs-emphasis-color); }
h5, .h5, h6, .h6 { font-weight: 700; letter-spacing: -.01em; color: var(--bs-emphasis-color); }

/* Hero — the show-stopper, max impact */
.hero h1 {
  font-weight: 800 !important;
  letter-spacing: -.035em;
  line-height: 1.06;
  color: #0a0f1c;
}
.hero .hero-stats .fs-3 { font-weight: 800; letter-spacing: -.02em; }

/* --- 3. Shrink the Microsoft Products mega menu (v3: even smaller) --- */
.navbar .dropdown-menu.mega {
  padding: .7rem .85rem !important;
  border-radius: 0 0 .75rem .75rem;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .1);
  border: 1px solid rgba(15, 23, 42, .08);
  max-width: 1100px;
}
.navbar .dropdown-menu.mega .row { --bs-gutter-x: .85rem; --bs-gutter-y: .35rem; }
.mega .mega-heading,
.antivirus-menu .mega-heading {
  font-size: .6rem !important;
  letter-spacing: .14em;
  margin-bottom: .22rem !important;
  font-weight: 600;
}
.mega-year {
  font-size: .78rem;
  padding: .1rem 0;
  font-weight: 500;
  line-height: 1.3;
}
.antivirus-menu .mega-link,
.mega a.mega-link {
  font-size: .72rem;
  padding: .1rem 0;
  font-weight: 500;
}
.mega a.mega-link.fw-bold,
.antivirus-menu a.mega-link.fw-bold { font-weight: 600 !important; font-size: .74rem; }

/* --- 4. Shrink the Antivirus dropdown (v3: even tighter) --- */
.navbar .dropdown-menu.antivirus-menu {
  min-width: 220px !important;
  padding: .65rem !important;
  border-radius: .65rem;
  border: 1px solid rgba(15, 23, 42, .08);
}

/* --- 5. Compact the Volume Pricing / Have-a-Question promo strip --- */
.dropdown-menu .mega-promo {
  margin-top: .6rem !important;
  padding-top: .6rem !important;
  font-size: .78rem;
}
.dropdown-menu .mega-promo .fw-bold,
.dropdown-menu .mega-promo .fw-semibold { font-size: .82rem; font-weight: 600 !important; }
.dropdown-menu .mega-promo small { font-size: .68rem; }
.dropdown-menu .mega-promo .btn-sm { padding: .25rem .75rem; font-size: .72rem; }
.dropdown-menu .mega-promo .bi-boxes { font-size: .95rem !important; }

/* Topic hubs strip under the menu — slim it down */
.dropdown-menu.mega > .border-top { margin-top: .7rem !important; padding-top: .6rem !important; }
.dropdown-menu .badge { padding: 3px 8px !important; font-size: 10.5px !important; font-weight: 500 !important; }

/* --- 6. Make all cards / blocks smaller & lighter --- */
.card {
  border-radius: .65rem;
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 2px 8px rgba(2, 6, 23, .04);
}
.card.p-4, .card.p-lg-4 { padding: 1.1rem !important; }
.card.p-5 { padding: 1.5rem !important; }
.card.p-3 { padding: .9rem !important; }
[data-bs-theme="dark"] .card { border-color: rgba(103, 232, 249, .14); }

/* Spotlight & side-product rows */
.spotlight-card { padding: 1.25rem !important; }
.side-product-row { padding: .75rem !important; }

/* Compact section spacing (was py-5 = 3rem) */
.py-5 { padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; }
.py-4 { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }

/* --- 7. Hero refinements --- */
.hero { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.hero h1 { color: #0f172a; }
.hero .text-secondary { color: #475569 !important; }
.hero ul li { color: #1e293b; }

/* --- 8. Eyebrow chips smaller --- */
.eyebrow { font-size: .65rem; font-weight: 600; letter-spacing: .18em; }

/* --- 9. Section headings: PayPal-style impact for clear hierarchy --- */
section h2.fw-bold, section .h2.fw-bold,
section h2, section .h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.12; }
section h3.fw-bold, section .h3.fw-bold,
section h3, section .h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 750; letter-spacing: -.02em; }
section h6.fw-bold,
section h6 { font-size: 1rem; font-weight: 700; letter-spacing: -.012em; }
section p, section li, .accordion-body { font-weight: 400; }

/* --- 10. Trust-strip & badges slim --- */
.trust-strip { padding: .65rem 0 !important; }

/* --- 11. Buttons: pill, refined weight --- */
.btn { border-radius: 999px; }
.btn-lg { padding: .55rem 1.5rem; font-size: .95rem; font-weight: 600; }
.btn-hero-cta { padding: .65rem 1.7rem; font-size: .98rem; font-weight: 700; letter-spacing: -.005em; }
.btn-hero-ghost { padding: .6rem 1.55rem; font-size: .94rem; font-weight: 600; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark { font-weight: 600; }

/* --- 12. Subtle, refined dark mode tweaks --- */
[data-bs-theme="dark"] {
  --bs-body-color: #e2e8f0;
  --bs-secondary-color: #94a3b8;
  --bs-emphasis-color: #f8fafc;
}

/* --- 13. Mobile: keep the mega menu compact --- */
@media (max-width: 991px) {
  .navbar .dropdown-menu.mega { padding: .85rem !important; }
  .navbar .dropdown-menu.mega .row { --bs-gutter-x: .75rem; }
  .mega-year { font-size: .85rem; }
}


/* ============================================================
   PAYPAL-STYLE OUTLINE HIGHLIGHT v3 (Feb 2026)
   Goal: every clickable / content box has a clear, refined outer
   layer like the PayPal "Pay with PayPal" pill — pronounced
   dark border, no chunky fill, refined hover lift.
   ============================================================ */

/* --- All content cards get a defined PayPal-style outer outline --- */
.card,
.spotlight-card,
.side-product-row {
  border: 1.5px solid rgba(15, 23, 42, .15) !important;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(2, 6, 23, .02);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover,
.spotlight-card:hover,
.side-product-row:hover {
  border-color: rgba(15, 23, 42, .35) !important;
  box-shadow: 0 8px 22px rgba(2, 6, 23, .08);
}

/* Product cards — refined elegance with crisper outline */
.product-card {
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.product-card:hover {
  border-color: #0f172a !important;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .1);
  transform: translateY(-3px);
}
.product-card .product-img-wrap {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, .06);
  background: linear-gradient(180deg, #fafbfd, #f1f5f9) !important;
}

/* Welcome-back outer wrapper card — distinct outline */
[data-testid="welcome-back-strip"] {
  border: 1.5px solid rgba(15, 23, 42, .15) !important;
  border-radius: 14px;
}
[data-testid="welcome-back-strip"] .card {
  border: 1px solid rgba(15, 23, 42, .1) !important;
  border-radius: 10px;
}

/* Trust badges — defined outlines */
[data-testid="trust-badges-row"] .card,
[data-testid="how-it-works"] .card,
[data-testid="why-choose-grid"] .card,
[data-testid="trust-badges-row"] > div > .card {
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  border-radius: 14px;
}

/* --- Buttons get the PayPal pill-outline aesthetic --- */
.btn-hero-cta {
  background: #0f172a !important;
  color: #fff !important;
  border: 1.5px solid #0f172a !important;
  border-radius: 999px;
  padding: .7rem 1.85rem;
  font-weight: 700;
  letter-spacing: -.005em;
  box-shadow: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-hero-cta:hover,
.btn-hero-cta:focus {
  background: #1e293b !important;
  color: #fff !important;
  border-color: #1e293b !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .25);
}

.btn-hero-ghost {
  background: #fff !important;
  color: #0f172a !important;
  border: 1.5px solid #0f172a !important;
  border-radius: 999px;
  padding: .65rem 1.75rem;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-hero-ghost:hover,
.btn-hero-ghost:focus {
  background: #0f172a !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Outline-style primary buttons / category chips */
.btn-outline-primary {
  border: 1.5px solid #0f172a !important;
  color: #0f172a !important;
  border-radius: 999px;
  background: transparent !important;
  font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
  transform: translateY(-1px);
}

.btn-outline-secondary {
  border: 1.5px solid rgba(15, 23, 42, .35) !important;
  color: #0f172a !important;
  border-radius: 999px;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
}

/* Primary solid button (Shop Now in body / Add to Cart) — refined dark pill */
.btn-primary {
  background-image: none !important;
  background-color: #0f172a !important;
  border: 1.5px solid #0f172a !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #1e293b !important;
  border-color: #1e293b !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .22);
}

/* Category chips & browse pills */
.cat-chip {
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  border-radius: 999px;
  padding: .35rem .9rem;
  color: #0f172a;
  background: #fff;
  font-weight: 500;
  font-size: .82rem;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.cat-chip:hover {
  border-color: #0f172a !important;
  background: #0f172a;
  color: #fff;
}

/* Accordion items get the PayPal outline */
.accordion-item {
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  border-radius: 12px !important;
  margin-bottom: .5rem;
  overflow: hidden;
}
.accordion-button {
  background: #fff;
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
}

/* Hero photo CTA tiles / hero rating chip */
.hero-rating-chip {
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  border-radius: 999px !important;
}

/* DARK MODE: invert the outlines so they remain visible on dark surfaces */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .product-card,
[data-bs-theme="dark"] .spotlight-card,
[data-bs-theme="dark"] .side-product-row,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] [data-testid="welcome-back-strip"],
[data-bs-theme="dark"] .cat-chip {
  border-color: rgba(255, 255, 255, .14) !important;
  background-color: rgba(255, 255, 255, .02) !important;
}
[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .product-card:hover {
  border-color: rgba(103, 232, 249, .55) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] .btn-hero-cta,
[data-bs-theme="dark"] .btn-primary {
  background-color: #06b6d4 !important;
  border-color: #06b6d4 !important;
  color: #051620 !important;
}
[data-bs-theme="dark"] .btn-hero-cta:hover,
[data-bs-theme="dark"] .btn-primary:hover {
  background-color: #67e8f9 !important;
  border-color: #67e8f9 !important;
}
[data-bs-theme="dark"] .btn-hero-ghost {
  background: transparent !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
[data-bs-theme="dark"] .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: rgba(255, 255, 255, .35) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: #67e8f9 !important;
  color: #051620 !important;
  border-color: #67e8f9 !important;
}
[data-bs-theme="dark"] .accordion-button { background: transparent; color: #e2e8f0; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(103, 232, 249, .08); color: #67e8f9; }
[data-bs-theme="dark"] .cat-chip:hover {
  background: #67e8f9;
  color: #051620;
  border-color: #67e8f9 !important;
}


/* ============================================================
   CORPORATE BLUE THEME v4 — gosoftwarebuy.com reference (Feb 2026)
   Goal: clean professional blue theme. White cards, soft shadows,
   rounded rectangles (not pills), generous whitespace, refined
   blue accents — replaces the dark-pill PayPal aesthetic.
   ============================================================ */

:root {
  /* Brand palette */
  --theme-primary: #0066CC;
  --theme-primary-hover: #0052A3;
  --theme-primary-dark: #003D7A;
  --theme-primary-light: #E7F1FB;
  --theme-primary-soft: #F0F7FF;
  --theme-accent: #1A73E8;
  --theme-success: #28A745;
  --theme-success-soft: #E6F4EA;
  --theme-warning: #FFC107;
  --theme-danger: #DC3545;

  /* Surfaces */
  --theme-bg: #FFFFFF;
  --theme-bg-soft: #F8FAFC;
  --theme-bg-muted: #F1F5F9;

  /* Text */
  --theme-text: #1F2937;
  --theme-text-muted: #4B5563;
  --theme-text-subtle: #6B7280;

  /* Borders & shadows */
  --theme-border: #E5E7EB;
  --theme-border-strong: #D1D5DB;
  --theme-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --theme-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --theme-shadow-lg: 0 10px 28px rgba(15, 23, 42, .12);

  /* Override existing brand vars to corporate blue */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: 0, 102, 204;
  --bs-link-color: var(--theme-primary);
  --bs-link-hover-color: var(--theme-primary-hover);
  --bs-body-color: var(--theme-text);
  --bs-secondary-color: var(--theme-text-muted);
  --bs-emphasis-color: #0F172A;
  --bs-border-color: var(--theme-border);
  --uc-blue: var(--theme-primary);
  --uc-blue-dark: var(--theme-primary-hover);
  --uc-indigo: var(--theme-primary);
  --uc-grad: linear-gradient(135deg, #0066CC, #1A73E8);
  --uc-grad-hover: linear-gradient(135deg, #0052A3, #0F62D6);
  --uc-soft: var(--theme-bg-soft);
  --uc-ring: rgba(0, 102, 204, .25);
  --uc-shadow-sm: var(--theme-shadow-sm);
  --uc-shadow-lg: var(--theme-shadow-lg);
}

/* Body & background */
body {
  background: var(--theme-bg);
  color: var(--theme-text);
}
.bg-soft { background: var(--theme-bg-soft) !important; }
.bg-body-tertiary { background: var(--theme-bg-muted) !important; }

/* --- BUTTONS — corporate rounded rectangles (NOT pills) --- */
.btn { border-radius: 8px !important; }
/* Preserve explicit shape utilities — pill stays pill, circle stays circle */
.btn.rounded-pill { border-radius: 999px !important; }
.btn.rounded-circle { border-radius: 50% !important; padding-left: .5rem !important; padding-right: .5rem !important; }
.btn.rounded-0 { border-radius: 0 !important; }

/* Primary solid blue */
.btn-primary,
.btn-hero-cta {
  background: var(--theme-primary) !important;
  background-image: none !important;
  border: 1.5px solid var(--theme-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: .6rem 1.5rem;
  font-weight: 600;
  letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(0, 102, 204, .18);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover, .btn-primary:focus,
.btn-hero-cta:hover, .btn-hero-cta:focus {
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 102, 204, .28);
}

/* Outline / secondary — white fill, blue border */
.btn-outline-primary,
.btn-hero-ghost {
  background: #fff !important;
  color: var(--theme-primary) !important;
  border: 1.5px solid var(--theme-primary) !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: .55rem 1.4rem;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-hero-ghost:hover, .btn-hero-ghost:focus {
  background: var(--theme-primary) !important;
  color: #fff !important;
  border-color: var(--theme-primary) !important;
  transform: translateY(-1px);
}

/* Secondary muted button */
.btn-outline-secondary {
  border: 1.5px solid var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  background: #fff !important;
  border-radius: 8px !important;
  font-weight: 500;
}
.btn-outline-secondary:hover {
  background: var(--theme-bg-soft) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-text-muted) !important;
}

/* Light button (on dark backgrounds like CTA band) */
.btn-light {
  background: #fff !important;
  color: var(--theme-primary) !important;
  border: 1.5px solid #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
}
.btn-light:hover {
  background: #f1f5f9 !important;
  color: var(--theme-primary-hover) !important;
}
.btn-outline-light {
  border: 1.5px solid rgba(255,255,255,.7) !important;
  color: #fff !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-weight: 600;
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Small buttons stay rounded rectangles */
.btn-sm { border-radius: 6px !important; padding: .35rem .9rem; font-size: .82rem; }

/* --- CARDS — clean white, soft shadow, light grey border (corporate look) --- */
.card,
.spotlight-card,
.side-product-row,
.product-card,
[data-testid="welcome-back-strip"],
[data-testid="trust-badges-row"] .card,
[data-testid="how-it-works"] .card,
[data-testid="why-choose-grid"] .card {
  background: #fff !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--theme-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover,
.spotlight-card:hover,
.side-product-row:hover,
.product-card:hover {
  border-color: var(--theme-primary) !important;
  box-shadow: var(--theme-shadow-md) !important;
  transform: translateY(-2px);
}
.product-card .product-img-wrap {
  background: var(--theme-bg-muted) !important;
  border: none !important;
  border-radius: 8px !important;
}

/* Accordion items match the corporate card style */
.accordion-item {
  background: #fff !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 10px !important;
  margin-bottom: .5rem;
}
.accordion-button { background: #fff; color: var(--theme-text); font-weight: 600; }
.accordion-button:not(.collapsed) {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
  box-shadow: inset 0 -1px 0 var(--theme-primary-light);
}
.accordion-button:focus { box-shadow: 0 0 0 .15rem var(--uc-ring); }

/* Category chips — pill outlines but with corporate colors */
.cat-chip {
  background: #fff !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text) !important;
  border-radius: 999px;
  padding: .38rem 1rem;
  font-weight: 500;
  font-size: .82rem;
}
.cat-chip:hover {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: #fff !important;
}

/* --- COLOR UTILITIES → corporate blue --- */
.text-primary { color: var(--theme-primary) !important; }
.bg-primary { background: var(--theme-primary) !important; }
.border-primary { border-color: var(--theme-primary) !important; }
.text-bg-primary { background: var(--theme-primary-light) !important; color: var(--theme-primary) !important; }

/* Success — restore proper green for genuine/verified labels */
.text-success { color: var(--theme-success) !important; }
.text-success-emphasis { color: #1E7E34 !important; }
.bg-success { background: var(--theme-success) !important; }
.badge.text-bg-success { background: var(--theme-success) !important; color: #fff !important; }
.badge.text-bg-success-subtle { background: var(--theme-success-soft) !important; color: var(--theme-success) !important; }
.alert-success { --bs-alert-bg: var(--theme-success-soft); --bs-alert-color: #1E7E34; --bs-alert-border-color: #B7E1C1; }
.btn-success { --bs-btn-bg: var(--theme-success); --bs-btn-border-color: var(--theme-success); --bs-btn-hover-bg: #1E7E34; --bs-btn-hover-border-color: #1E7E34; }

/* Yellow stars retain proper gold */
.text-warning { color: var(--theme-warning) !important; }

/* --- TOPBAR & HEADER — clean corporate blue --- */
.topbar {
  background: linear-gradient(90deg, #003D7A 0%, #0066CC 50%, #1A73E8 100%) !important;
  color: #fff;
}
.topbar strong { color: #BFDBFE; }
.trustbar {
  background: #003D7A !important;
  color: #DBEAFE;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Navbar glassy, sticky */
.navbar.sticky-top { background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--theme-border); }

/* Nav links */
.navbar .nav-link { color: var(--theme-text) !important; }
.navbar .nav-link:hover { color: var(--theme-primary) !important; }

/* --- EYEBROW labels in corporate blue --- */
.eyebrow {
  color: var(--theme-primary) !important;
  font-weight: 600;
  letter-spacing: .16em;
}

/* --- MEGA-MENU keeps its compact size, just blue accents now --- */
.mega .mega-heading,
.antivirus-menu .mega-heading,
.filter-group-title {
  color: var(--theme-primary) !important;
}
.mega-year:hover,
.mega a.mega-link:hover,
.antivirus-menu .mega-link:hover { color: var(--theme-primary) !important; }

/* --- HERO — clean white background, blue accents --- */
.hero { background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FF 100%) !important; }
.hero h1 { color: var(--bs-emphasis-color) !important; }
.hero h1 .accent {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .text-secondary { color: var(--theme-text-muted) !important; }
.hero-badge {
  background: var(--theme-primary-soft) !important;
  border: 1px solid var(--theme-primary-light) !important;
  color: var(--theme-primary) !important;
}

/* Hero rating chip — corporate */
.hero-rating-chip {
  background: #fff !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 8px !important;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-sm);
}

/* --- "For Every Business" biz-card — corporate blue gradient --- */
.biz-card {
  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important;
  box-shadow: 0 10px 28px rgba(0, 102, 204, .28);
}
.biz-chip {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  border-radius: 999px;
}

/* --- CTA band at bottom — corporate gradient --- */
[data-testid="cta-band"] {
  background: linear-gradient(135deg, #003D7A 0%, #0066CC 60%, #1A73E8 100%) !important;
}

/* --- FORMS — corporate inputs --- */
.form-control, .form-select, .form-control:focus, .form-select:focus {
  border-radius: 8px;
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 .18rem var(--uc-ring);
}
.form-check-input:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* --- BADGES — corporate blue accents --- */
.badge.text-bg-danger { background: #FEE2E2 !important; color: var(--theme-danger) !important; }
.badge.text-bg-warning { background: #FFF3CD !important; color: #856404 !important; }
.badge.text-bg-info { background: var(--theme-primary-light) !important; color: var(--theme-primary) !important; }
.badge.text-bg-light { background: var(--theme-bg-muted) !important; color: var(--theme-text) !important; }

/* --- Section headings — corporate look --- */
section h2, section .h2 { color: var(--bs-emphasis-color); }
section h3, section .h3, section h6 { color: var(--bs-emphasis-color); }

/* --- "Ask AI" pill — corporate --- */
.ask-ai-pill {
  background: var(--theme-primary-soft) !important;
  border: 1px solid var(--theme-primary-light) !important;
  border-radius: 999px;
}
.ask-ai-mark {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)) !important;
  color: #fff;
}

/* --- DARK MODE: corporate dark variant with cyan-blue --- */
[data-bs-theme="dark"] {
  --theme-bg: #0F172A;
  --theme-bg-soft: #1E293B;
  --theme-bg-muted: #1A2438;
  --theme-text: #E2E8F0;
  --theme-text-muted: #94A3B8;
  --theme-border: rgba(148, 163, 184, .22);
  --theme-border-strong: rgba(148, 163, 184, .35);
  --bs-body-bg: var(--theme-bg);
  --bs-body-color: var(--theme-text);
  --bs-emphasis-color: #F8FAFC;
  --bs-border-color: var(--theme-border);
}
[data-bs-theme="dark"] body { background: var(--theme-bg); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .product-card,
[data-bs-theme="dark"] .spotlight-card,
[data-bs-theme="dark"] .side-product-row,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] [data-testid="welcome-back-strip"] {
  background: var(--theme-bg-soft) !important;
  border-color: var(--theme-border) !important;
}
[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .product-card:hover {
  border-color: #60A5FA !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35) !important;
}
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-hero-cta {
  background: #1A73E8 !important;
  border-color: #1A73E8 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-hero-cta:hover {
  background: #4285F4 !important;
  border-color: #4285F4 !important;
}
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-hero-ghost {
  background: transparent !important;
  border-color: rgba(148, 163, 184, .55) !important;
  color: #E2E8F0 !important;
}
[data-bs-theme="dark"] .btn-outline-primary {
  border-color: #60A5FA !important;
  color: #60A5FA !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-hero-ghost:hover {
  background: #1A73E8 !important;
  border-color: #1A73E8 !important;
  color: #fff !important;
}
/* Dropdown menus & dropdown items in dark mode */
[data-bs-theme="dark"] .dropdown-menu { background: #1E293B !important; border: 1px solid rgba(148,163,184,.22) !important; }
[data-bs-theme="dark"] .dropdown-item { color: #E2E8F0 !important; }
[data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background: rgba(96,165,250,.12) !important; color: #fff !important; }
[data-bs-theme="dark"] .dropdown-item.active { background: #1A73E8 !important; color: #fff !important; }
/* Cart badge in dark mode stays visible */

/* --- Sticky footer pattern: footer stays at the bottom, content fills above --- */
html, body { min-height: 100vh; }
body { display: flex; flex-direction: column; }
body > footer.footer-dark { margin-top: auto !important; }
/* Disable any unintended growth/parallax: footer never animates its height */
footer.footer-dark { transition: none !important; transform: none !important; will-change: auto !important; }

/* --- BLOG CARDS — compact, elegant images contained, never stretched --- */
.blog-card { overflow: hidden; }
.blog-card-img {
  width: 100%;
  height: 130px;
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF3F8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .65rem;
  overflow: hidden;
  border-bottom: 1px solid var(--theme-border);
}
.blog-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .25s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-title {
  font-size: .92rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6rem;
}
[data-bs-theme="dark"] .blog-card-img {
  background: linear-gradient(180deg, #1A2438 0%, #1E293B 100%);
  border-bottom-color: rgba(148, 163, 184, .15);
}


[data-bs-theme="dark"] .cart-count-badge { background: #DC3545 !important; color: #fff !important; }
[data-bs-theme="dark"] .text-primary { color: #60A5FA !important; }
[data-bs-theme="dark"] .navbar.sticky-top { background: rgba(15, 23, 42, .95) !important; border-bottom-color: var(--theme-border); }
[data-bs-theme="dark"] .hero { background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%) !important; }
[data-bs-theme="dark"] .hero h1 { color: #F8FAFC !important; }
[data-bs-theme="dark"] .hero-badge { background: rgba(96, 165, 250, .12) !important; border-color: rgba(96, 165, 250, .3) !important; color: #93C5FD !important; }
[data-bs-theme="dark"] .accordion-button { background: var(--theme-bg-soft); color: var(--theme-text); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(96, 165, 250, .1) !important; color: #93C5FD !important; }
[data-bs-theme="dark"] .cat-chip { background: var(--theme-bg-soft) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; }
[data-bs-theme="dark"] .cat-chip:hover { background: #1A73E8 !important; border-color: #1A73E8 !important; color: #fff !important; }
[data-bs-theme="dark"] .eyebrow,
[data-bs-theme="dark"] .mega .mega-heading,
[data-bs-theme="dark"] .antivirus-menu .mega-heading,
[data-bs-theme="dark"] .filter-group-title { color: #60A5FA !important; }
[data-bs-theme="dark"] .topbar { background: linear-gradient(90deg, #0B1426 0%, #0F2D5C 50%, #1A4B9C 100%) !important; }
[data-bs-theme="dark"] .trustbar { background: #0B1426 !important; color: #93C5FD; }


/* --- Pro Assistance welcome card (replaces the old calendar/time picker) --- */
.pa-sched-welcome { padding: .85rem .9rem; }
.pa-welcome-body {
  font-size: .82rem;
  color: var(--theme-text);
  line-height: 1.45;
}
.pa-welcome-body p { margin-bottom: .5rem !important; }
.pa-welcome-phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem;
  border-radius: 999px;
  background: var(--theme-primary);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: .82rem;
  transition: background .15s ease, transform .15s ease;
  margin-top: .35rem;
}
.pa-welcome-phone:hover {
  background: var(--theme-primary-hover);
  transform: translateY(-1px);
  color: #fff !important;
}
.pa-welcome-phone i { font-size: .9rem; }
[data-bs-theme="dark"] .pa-welcome-body { color: #E2E8F0; }


/* --- Brand wordmark "Software" — flowing rich dark-navy shimmer --- */
.brand-grad,
body .brand-grad,
.logo-3d .brand-grad,
.footer-dark .brand-grad {
  background: linear-gradient(
    90deg,
    #1E3A8A 0%,
    #0C2461 25%,
    #1E40AF 50%,
    #312E81 75%,
    #1E3A8A 100%
  ) !important;
  background-size: 280% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: brand-shimmer-dark 8s linear infinite !important;
}
[data-bs-theme="dark"] .brand-grad,
[data-bs-theme="dark"] .footer-dark .brand-grad {
  background: linear-gradient(
    90deg,
    #3B82F6 0%,
    #1E40AF 25%,
    #2563EB 50%,
    #1D4ED8 75%,
    #3B82F6 100%
  ) !important;
  background-size: 280% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: brand-shimmer-dark 8s linear infinite !important;
}
@keyframes brand-shimmer-dark {
  0%   { background-position:   0% 0; }
  100% { background-position: -280% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-grad, body .brand-grad, .logo-3d .brand-grad,
  [data-bs-theme="dark"] .brand-grad, .footer-dark .brand-grad { animation: none !important; }
}


/* --- "AUTHORIZED RESELLER" brand tag — bold, refined, elegant --- */
.brand-tag {
  display: inline-block;
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  color: #1565C0 !important;
  text-transform: uppercase;
  padding: .15rem .5rem;
  margin-top: .1rem;
  border-radius: 4px;
  background: rgba(21, 101, 192, .08);
  border: 1px solid rgba(21, 101, 192, .22);
  line-height: 1.2;
}
[data-bs-theme="dark"] .brand-tag {
  color: #93C5FD !important;
  background: rgba(147, 197, 253, .1);
  border-color: rgba(147, 197, 253, .28);
}
.footer-dark .brand-tag {
  color: #93C5FD !important;
  background: rgba(147, 197, 253, .12);
  border-color: rgba(147, 197, 253, .28);
}


/* --- Sticky trustbar so the "Genuine Microsoft Products / phone" strip
       is always visible. The main navbar then sticks BELOW it so they
       never overlap. --- */
.trustbar.trustbar-sticky {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: #1a1f38;
}
.navbar.sticky-top.navbar-below-trustbar {
  top: 32px;   /* trustbar height — keep nav anchored just below it */
  z-index: 1030;
}
@media (max-width: 767.98px) {
  /* Trustbar is hidden on mobile (d-md-block), so nav goes back to top. */
  .navbar.sticky-top.navbar-below-trustbar { top: 0; }
}
[data-bs-theme="dark"] .trustbar.trustbar-sticky { background: #111223; }

/* --- Inline trustbar promo strip (replaces the floating deal-pill) --- */
.trustbar-deal {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 2px 4px 2px 12px;
  font-size: .76rem;
  color: #ffffff;
  line-height: 1.1;
  margin-left: .25rem;
}
.trustbar-deal-text {
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.trustbar-deal-text .bi-tag-fill { color: #fbbf24; }
.trustbar-deal-code {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255, 255, 255, .15);
  border: 1px dashed rgba(255, 255, 255, .55);
  color: #ffffff;
  border-radius: 999px;
  padding: 1px 9px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: 1.2px;
  font-size: .72rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.trustbar-deal-code:hover {
  background: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .85);
  transform: translateY(-1px);
}
.trustbar-deal-code .bi { font-size: .68rem; opacity: .85; }
.trustbar-deal-code.is-copied {

/* --- Mobile-only promo chip (sits above the navbar on phones) --- */
.mobile-promo {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 60%, #0D47A1 100%);
  color: #fff;
  padding: 7px 12px;
  font-size: .78rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 2px 8px rgba(13, 71, 161, .25);
}
.mobile-promo-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.mobile-promo-icon { color: #fbbf24; font-size: .9rem; flex-shrink: 0; }
.mobile-promo-text { display: none !important; }   /* always hidden on mobile — code + Shop are enough */
.mobile-promo-code {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(255, 255, 255, .18);
  border: 1px dashed rgba(255, 255, 255, .55);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: .8px;
  font-size: .7rem;
  cursor: pointer;
  transition: background .15s ease;
}
.mobile-promo-code:hover, .mobile-promo-code:active {
  background: rgba(255, 255, 255, .3);
}
.mobile-promo-code.is-copied {
  background: rgba(16, 185, 129, .88);
  border-color: rgba(16, 185, 129, .95);
  border-style: solid;
}
.mobile-promo-code .bi { font-size: .65rem; opacity: .85; }
.mobile-promo-cta {
  display: inline-flex; align-items: center; gap: .15rem;
  background: rgba(255, 255, 255, .25);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  padding: 1px 9px;
  font-weight: 700;
  font-size: .74rem;
}
/* Headline text already hidden on mobile via .mobile-promo-text; no narrow-viewport fallback needed */

  background: rgba(16, 185, 129, .88);
  border-color: rgba(16, 185, 129, .95);
  border-style: solid;
}
.trustbar-deal-shop {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--theme-primary, #0066CC);
  border: 1px solid var(--theme-primary, #0066CC);
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  transition: background .15s ease, transform .15s ease;
}
.trustbar-deal-shop:hover {
  background: var(--theme-primary-hover, #0052A3);
  border-color: var(--theme-primary-hover, #0052A3);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Hide the old standalone deal-bar pill (now lives inside the trustbar). */
.deal-bar, #deal-bar { display: none !important; }
body.has-deal-bar #chat-bubble { bottom: 22px; }

/* On smaller screens collapse the headline to just the icon + code + Shop Now. */
@media (max-width: 1199px) {
  .trustbar-deal-text { display: none; }
}



/* ============================================================
   DARK-MODE CONTRAST FIX (Feb 2026)
   The "Ask Maventech Software AI" pill + several hero/CTA cards
   were rendering with a light translucent background in dark mode
   so their text disappeared.  These rules force proper contrast.
   ============================================================ */
[data-bs-theme="dark"] .ask-ai-pill {
  background: linear-gradient(90deg, rgba(96, 165, 250, .12), rgba(96, 165, 250, .06)) !important;
  border: 1px solid rgba(96, 165, 250, .35) !important;
}
[data-bs-theme="dark"] .ask-ai-pill .fw-bold,
[data-bs-theme="dark"] .ask-ai-pill .small,
[data-bs-theme="dark"] .ask-ai-pill div { color: #E2E8F0 !important; }
[data-bs-theme="dark"] .ask-ai-pill .text-secondary { color: #94A3B8 !important; }

/* Hero secondary text on dark backgrounds */
[data-bs-theme="dark"] .hero .text-secondary,
[data-bs-theme="dark"] .hero p.text-secondary { color: #94A3B8 !important; }
[data-bs-theme="dark"] .hero ul li { color: #E2E8F0 !important; }

/* "Welcome back" strip + similar small cards in dark mode */
[data-bs-theme="dark"] [data-testid="welcome-back-strip"] *:not(.btn):not(.badge):not(i):not(.text-warning):not(.text-success) {
  color: inherit;
}
[data-bs-theme="dark"] [data-testid="welcome-back-strip"] .text-secondary { color: #94A3B8 !important; }
[data-bs-theme="dark"] [data-testid="welcome-back-strip"] .fw-bold { color: #F8FAFC !important; }

/* Section eyebrows + h2 + p in dark mode */
[data-bs-theme="dark"] section h2,
[data-bs-theme="dark"] section .h2 { color: #F8FAFC !important; }
[data-bs-theme="dark"] section p { color: #CBD5E1; }
[data-bs-theme="dark"] section .text-secondary { color: #94A3B8 !important; }

/* Trust check-mark icons + text in hero list */
[data-bs-theme="dark"] .hero .bi-check-circle-fill,
[data-bs-theme="dark"] .hero .bi-patch-check-fill { color: #34D399 !important; }

/* Product images render at full fidelity (no multiply blend → clearer art) */
.product-img-wrap img,
.product-card .product-img-wrap img,
.spotlight-img-wrap img,
.side-thumb img,
.strip-img img,
.shop-row-img img,
.pd-360-img,
.pd-main-img { mix-blend-mode: normal !important; image-rendering: auto; }

/* ===========================================================================
 * Per-product star rating + review-count caption
 * Renders inside product cards / rows / detail hero ONLY when a product has
 * at least one published customer_reviews row, so the chrome "grows in"
 * naturally as real social proof rolls in.
 * ========================================================================= */
.product-rating { white-space: nowrap; }
.product-rating .text-warning i { font-size: .82em; letter-spacing: .5px; }
.product-rating-row .text-warning i { font-size: .9em; }
.product-rating-detail .text-warning i { font-size: 1.05em; }
.product-rating-detail { padding: .25rem 0; }
a.product-rating-detail:hover { opacity: .85; }

/* Homepage "What our customers say" — review cards under
 * "Trusted by Thousands of Customers" stats. Driven by published
 * customer_reviews — hidden when none exist yet. */
.home-review-card {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-review-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
.home-review-card .home-review-text { line-height: 1.55; min-height: 4.6em; }
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--uc-blue, #2563eb), #06b6d4);
  color: #fff; font-weight: 700; font-size: .82rem;
  letter-spacing: .5px; flex: 0 0 36px;
}



/* ============================================================================
 *  ZOOM-INSPIRED THEME OVERRIDE  (public storefront only — admin untouched)
 *  ----------------------------------------------------------------------------
 *  Re-skins the entire customer-facing surface to match Zoom's "Tech Blue +
 *  deep-navy" enterprise-SaaS aesthetic without disturbing any of the 3 400+
 *  pre-existing rules above.  All overrides are scoped to `body:not(.adm)`
 *  so admin pages (which carry the .adm class on <body>) keep their neutral
 *  utility palette.
 *
 *  Palette  : Zoom Blue #0B5CFF · Deep Navy #050B1B · Soft Gray #F5F7FA ·
 *             Charcoal #131619 · Slate #4D555F
 *  Type     : Inter (geometric sans, Zoom-style), tight headline tracking
 *  Shapes   : Fully pill-shaped CTAs, 12 px soft-shadow cards, 1 px borders
 *  Rhythm   : Generous (96 px) section gutter on desktop, 56 px on mobile
 * ========================================================================== */
:root {
  /* Zoom palette — overrides the cyan/teal originals defined at the top.
     Cascades through every component that reads --uc-blue / --uc-blue-dark
     (CTA bg, focus rings, hero highlight, brand accents, OS badges, etc). */
  --zoom-blue:        #0B5CFF;
  --zoom-blue-strong: #0848CC;
  --zoom-blue-soft:   #E5EEFF;
  --zoom-navy:        #050B1B;
  --zoom-navy-2:      #0B1430;     /* slightly lighter for hero glow */
  --zoom-ink:         #131619;
  --zoom-slate:       #4D555F;
  --zoom-line:        #E4E8EE;
  --zoom-soft:        #F5F7FA;

  --uc-blue:          var(--zoom-blue);
  --uc-blue-dark:     var(--zoom-blue-strong);
  --uc-indigo:        var(--zoom-blue);
  --uc-ink:           var(--zoom-ink);
  --uc-soft:          var(--zoom-soft);
  --uc-grad:          linear-gradient(135deg, var(--zoom-blue), #4480FF);
  --uc-grad-hover:    linear-gradient(135deg, var(--zoom-blue-strong), var(--zoom-blue));
  --uc-shadow-sm:     0 1px 2px rgba(5, 11, 27, .04), 0 4px 12px rgba(5, 11, 27, .06);
  --uc-shadow-lg:     0 18px 48px rgba(5, 11, 27, .12);
  --uc-ring:          rgba(11, 92, 255, .28);

  --bs-primary:       var(--zoom-blue);
  --bs-primary-rgb:   11, 92, 255;
  --bs-link-color:    var(--zoom-blue);
  --bs-link-hover-color: var(--zoom-blue-strong);
  --bs-link-color-rgb:    11, 92, 255;
  --bs-link-hover-color-rgb: 8, 72, 204;
  --bs-body-color:    var(--zoom-ink);
  --bs-secondary-color: var(--zoom-slate);
  --bs-border-color:  var(--zoom-line);
}

/* Inter is wired up by includes/header.php (alongside the existing Manrope
   load). Falling back to Manrope/Lato keeps the page legible if Google
   Fonts is blocked on a corporate network. */
body:not(.adm) {
  font-family: "Inter", "Manrope", "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -.005em;
  color: var(--zoom-ink);
}
body:not(.adm) h1, body:not(.adm) h2, body:not(.adm) h3,
body:not(.adm) h4, body:not(.adm) h5, body:not(.adm) h6,
body:not(.adm) .h1, body:not(.adm) .h2, body:not(.adm) .h3,
body:not(.adm) .h4, body:not(.adm) .h5, body:not(.adm) .h6,
body:not(.adm) .display-4, body:not(.adm) .display-5, body:not(.adm) .display-6 {
  font-family: "Inter", "Manrope", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--zoom-ink);
}
body:not(.adm) .display-4 { letter-spacing: -.03em; line-height: 1.08; }
body:not(.adm) .text-secondary { color: var(--zoom-slate) !important; }
body:not(.adm) .text-muted     { color: #6B7785 !important; }

/* Bootstrap utility recolors — every "primary" surface uses Zoom blue. */
body:not(.adm) .text-primary          { color: var(--zoom-blue) !important; }
body:not(.adm) .bg-primary            { background-color: var(--zoom-blue) !important; }
body:not(.adm) .border-primary        { border-color: var(--zoom-blue) !important; }
body:not(.adm) .text-bg-primary       { background-color: var(--zoom-blue-soft) !important; color: var(--zoom-blue-strong) !important; }
body:not(.adm) .bg-soft                { background-color: var(--zoom-soft) !important; }
/* Text-selection highlight — split by theme so dark-mode users actually
   SEE what they've highlighted (the previous body:not(.adm) ::selection
   rule used dark text which became invisible on the dark navy form
   fields in checkout — the bug the user reported in iter 21). */
html:not([data-bs-theme="dark"]) body:not(.adm) ::selection { background: rgba(11, 92, 255, .22); color: var(--zoom-ink); }
html[data-bs-theme="dark"] body:not(.adm) ::selection,
html[data-bs-theme="dark"] body:not(.adm) input::selection,
html[data-bs-theme="dark"] body:not(.adm) textarea::selection,
html[data-bs-theme="dark"] body:not(.adm) select::selection { background: rgba(96, 165, 250, .55); color: #FFFFFF; }

/* === BUTTONS — pill-shape primary, hairline outline secondary === */
body:not(.adm) .btn {
  font-weight: 600;
  border-radius: 999px;
  padding: .58rem 1.25rem;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body:not(.adm) .btn-lg { padding: .8rem 1.7rem; font-size: 1rem; }
body:not(.adm) .btn-sm { padding: .38rem .9rem; font-size: .85rem; }
body:not(.adm) .btn-primary,
body:not(.adm) .btn-hero-cta {
  background: var(--zoom-blue) !important;
  background-image: none !important;          /* kill the vibe gradient on primary */
  border-color: var(--zoom-blue) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 92, 255, .25), 0 8px 22px rgba(11, 92, 255, .18);
}
body:not(.adm) .btn-primary:hover,
body:not(.adm) .btn-hero-cta:hover {
  background: var(--zoom-blue-strong) !important;
  border-color: var(--zoom-blue-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(11, 92, 255, .3), 0 12px 28px rgba(11, 92, 255, .25);
}
body:not(.adm) .btn-primary:focus-visible,
body:not(.adm) .btn-hero-cta:focus-visible { box-shadow: 0 0 0 4px var(--uc-ring); outline: none; }
body:not(.adm) .btn-outline-primary {
  --bs-btn-color: var(--zoom-blue);
  --bs-btn-border-color: var(--zoom-blue);
  --bs-btn-hover-bg: var(--zoom-blue);
  --bs-btn-hover-border-color: var(--zoom-blue);
  --bs-btn-active-bg: var(--zoom-blue-strong);
  --bs-btn-active-border-color: var(--zoom-blue-strong);
  background-image: none !important;
}
body:not(.adm) .btn-outline-secondary {
  --bs-btn-color: var(--zoom-ink);
  --bs-btn-border-color: var(--zoom-line);
  --bs-btn-hover-bg: var(--zoom-soft);
  --bs-btn-hover-color: var(--zoom-ink);
  --bs-btn-hover-border-color: #C8CFD9;
}
body:not(.adm) .btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--zoom-line);
  --bs-btn-color: var(--zoom-ink);
  --bs-btn-hover-bg: var(--zoom-soft);
}
body:not(.adm) .btn-success {
  --bs-btn-bg: var(--zoom-blue);
  --bs-btn-border-color: var(--zoom-blue);
  --bs-btn-hover-bg: var(--zoom-blue-strong);
  --bs-btn-hover-border-color: var(--zoom-blue-strong);
  background-image: none !important;
}

/* === Add-to-Cart / Buy Now buttons — replace the legacy orange gradient
       with Zoom blue across both the product-card "Add" + "Buy Now" pair
       and the larger product-detail page CTAs. Keeps the existing layout
       and class hooks; only the colour palette changes. === */
body:not(.adm) .add-to-cart-btn,
body:not(.adm) .pc-btn-cart {
  background-image: none !important;
  background-color: var(--zoom-blue) !important;
  border-color: var(--zoom-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11, 92, 255, .25);
}
body:not(.adm) .add-to-cart-btn:hover,
body:not(.adm) .pc-btn-cart:hover,
body:not(.adm) .add-to-cart-btn:focus,
body:not(.adm) .pc-btn-cart:focus {
  background-image: none !important;
  background-color: var(--zoom-blue-strong) !important;
  border-color: var(--zoom-blue-strong) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(11, 92, 255, .35);
}
body:not(.adm) .add-to-cart-btn.added,
body:not(.adm) .add-to-cart-btn.added:hover {
  background-image: none !important;
  background-color: #0848CC !important;
  border-color: #0848CC !important;
}

/* "Buy Now" secondary pill — soft blue tint with Zoom outline */
body:not(.adm) .pc-btn-buy {
  background: var(--zoom-blue-soft) !important;
  color: var(--zoom-blue-strong) !important;
  border-color: #B7CDFF !important;
  box-shadow: 0 1px 2px rgba(11, 92, 255, .08);
}
body:not(.adm) .pc-btn-buy:hover {
  background: var(--zoom-blue) !important;
  color: #fff !important;
  border-color: var(--zoom-blue) !important;
  box-shadow: 0 8px 22px rgba(11, 92, 255, .35);
}
body:not(.adm) .pc-btn-buy:hover .bi { color: #fff !important; }
[data-bs-theme="dark"] body:not(.adm) .pc-btn-buy {
  background: rgba(11, 92, 255, .12) !important;
  color: #79A6FF !important;
  border-color: rgba(11, 92, 255, .42) !important;
}
[data-bs-theme="dark"] body:not(.adm) .pc-btn-buy:hover {
  background: var(--zoom-blue) !important;
  color: #fff !important;
  border-color: var(--zoom-blue) !important;
}

/* Product-detail page "Buy Now" lightning button (the larger one beside
   "Add to Cart"). Has an inline orange outline rule near line 2005 in
   the legacy stylesheet that we override here. */
body:not(.adm) .product-detail-buy-now,
body:not(.adm) .btn-buy-now,
body:not(.adm) .buy-now-btn,
body:not(.adm) .btn-orange-outline {
  background: var(--zoom-blue-soft) !important;
  color: var(--zoom-blue-strong) !important;
  border: 1px solid var(--zoom-blue) !important;
  background-image: none !important;
}
body:not(.adm) .product-detail-buy-now:hover,
body:not(.adm) .btn-buy-now:hover,
body:not(.adm) .buy-now-btn:hover,
body:not(.adm) .btn-orange-outline:hover {
  background: var(--zoom-blue) !important;
  color: #fff !important;
}

/* === CARDS — soft floating shadow, 12 px radius, hairline border === */
body:not(.adm) .card,
body:not(.adm) .card-e,
body:not(.adm) .product-card {
  border-radius: 14px;
  border: 1px solid var(--zoom-line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(5, 11, 27, .03), 0 6px 18px rgba(5, 11, 27, .04);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
body:not(.adm) .product-card:hover,
body:not(.adm) .card-e:hover {
  box-shadow: 0 6px 14px rgba(5, 11, 27, .06), 0 20px 44px rgba(5, 11, 27, .08);
  border-color: #D7DDE6;
  transform: translateY(-3px);
}
body:not(.adm) .home-review-card { border-radius: 12px; }
body:not(.adm) .badge { font-weight: 600; letter-spacing: .005em; }
body:not(.adm) .form-control,
body:not(.adm) .form-select {
  border-radius: 10px;
  border: 1px solid var(--zoom-line);
  padding: .65rem .9rem;
  font-size: .95rem;
  background-color: #fff;
}
body:not(.adm) .form-control:focus,
body:not(.adm) .form-select:focus {
  border-color: var(--zoom-blue);
  box-shadow: 0 0 0 4px var(--uc-ring);
}
body:not(.adm) .input-group .form-control { border-radius: 10px 0 0 10px; }
body:not(.adm) .input-group > .btn { border-radius: 0 999px 999px 0; }

/* === NAVBAR — taller white bar, hairline underline, Zoom-blue active === */
body:not(.adm) .navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--zoom-line);
  min-height: 72px;
}
body:not(.adm) .navbar .nav-link {
  font-weight: 500;
  color: var(--zoom-ink) !important;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
}
body:not(.adm) .navbar .nav-link:hover,
body:not(.adm) .navbar .nav-link.active { color: var(--zoom-blue) !important; }
body:not(.adm) .navbar-brand { font-weight: 700; }

/* === HERO — Zoom signature deep-navy on the homepage only === */
body:not(.adm) .hero.hero--zoom-navy {
  background: radial-gradient(1200px 600px at 88% 18%, #1B2A55 0%, #0B1430 38%, var(--zoom-navy) 100%) !important;
  color: #EAF0FF;
  padding: 92px 0 96px;
  position: relative;
  overflow: hidden;
}
body:not(.adm) .hero.hero--zoom-navy::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 12% 110%, rgba(11, 92, 255, .35), transparent 60%),
    radial-gradient(700px 360px at 100% 0%,   rgba(68, 128, 255, .25), transparent 65%);
  pointer-events: none; z-index: 0;
}
body:not(.adm) .hero.hero--zoom-navy > .container { position: relative; z-index: 1; }
body:not(.adm) .hero.hero--zoom-navy h1,
body:not(.adm) .hero.hero--zoom-navy .display-4,
body:not(.adm) .hero.hero--zoom-navy .display-5 { color: #FFFFFF; letter-spacing: -.035em; font-weight: 700; }
body:not(.adm) .hero.hero--zoom-navy .hero-stats > div { color: #FFFFFF; }
/* Override the default .hero .hero-stats .fs-3 dark-slate at L408 — that
   colour was tuned for the light hero background and disappears against
   the Zoom-navy gradient. Force pure white on the big stat numbers and
   a translucent off-white on the labels for hierarchy. */
body:not(.adm) .hero.hero--zoom-navy .hero-stats .fs-3   { color: #FFFFFF !important; }
body:not(.adm) .hero.hero--zoom-navy .hero-stats small,
body:not(.adm) .hero.hero--zoom-navy .hero-stats .text-secondary { color: rgba(255,255,255,.7) !important; }
/* Hero bullet/check list — the "Genuine Microsoft License Keys" rows */
body:not(.adm) .hero.hero--zoom-navy li,
body:not(.adm) .hero.hero--zoom-navy .hero-list-item { color: #DCE6FF; }
body:not(.adm) .hero.hero--zoom-navy h1 { color: #FFFFFF !important; }
body:not(.adm) .hero.hero--zoom-navy p,
body:not(.adm) .hero.hero--zoom-navy small,
body:not(.adm) .hero.hero--zoom-navy .text-secondary { color: rgba(234, 240, 255, .78) !important; }
body:not(.adm) .hero.hero--zoom-navy .text-primary,
body:not(.adm) .hero.hero--zoom-navy .brand-grad { color: #79A6FF !important; -webkit-text-fill-color: #79A6FF; background: none; }
body:not(.adm) .hero.hero--zoom-navy .hero-badge {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #DCE6FF; border-radius: 999px;
  padding: .45rem .95rem; font-weight: 500; font-size: .82rem;
  backdrop-filter: blur(8px);
}
body:not(.adm) .hero.hero--zoom-navy .btn-hero-cta {
  background: var(--zoom-blue) !important; color: #fff !important; border: none !important;
  box-shadow: 0 4px 14px rgba(11, 92, 255, .4), 0 0 0 1px rgba(255,255,255,.08) inset;
}
body:not(.adm) .hero.hero--zoom-navy .btn-hero-cta:hover {
  background: var(--zoom-blue-strong) !important;
}
body:not(.adm) .hero.hero--zoom-navy .btn-hero-ghost {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(8px);
}
body:not(.adm) .hero.hero--zoom-navy .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .45) !important;
}
body:not(.adm) .hero.hero--zoom-navy .hero-art-glow {
  background: radial-gradient(closest-side, rgba(121, 166, 255, .55), transparent 70%) !important;
  filter: blur(40px);
}
body:not(.adm) .hero.hero--zoom-navy .hero-tile {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(11, 92, 255, .12);
}
body:not(.adm) .hero.hero--zoom-navy .hero-podium,
body:not(.adm) .hero.hero--zoom-navy .hero-ring { opacity: .35; }
body:not(.adm) .hero.hero--zoom-navy .hero-brand-watermark { opacity: .08; filter: invert(1) brightness(1.4); }
/* Light-mode-only: white band directly under the navy hero.  Scoped to
   html:not([data-bs-theme="dark"]) so this rule does NOT fight the
   dark-mode override on .trust-strip-band further down. */
html:not([data-bs-theme="dark"]) body:not(.adm) .hero.hero--zoom-navy + .trustbar,
html:not([data-bs-theme="dark"]) body:not(.adm) .hero.hero--zoom-navy + .py-3 { background: #fff !important; border-top: 1px solid var(--zoom-line); }

/* === SECTIONS — clean white / soft gray rhythm === */
body:not(.adm) section.py-5 { padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 992px) { body:not(.adm) section.py-5 { padding-top: 96px; padding-bottom: 96px; } }
body:not(.adm) .bg-soft,
body:not(.adm) section.bg-light { background: var(--zoom-soft) !important; }
body:not(.adm) .container > h2,
body:not(.adm) section h2.fw-bold { letter-spacing: -.025em; }

/* === TRUSTBAR / topbar — keep the existing dark navy gradient that's
       defined earlier in this stylesheet (lines 249-253, 3079-3080).
       My earlier Zoom override forced both bars to var(--zoom-soft)
       (light gray) which broke visibility of the WHITE deal pill and
       WHITE phone link in light mode — those bars are always meant to
       be dark-bg with light text in BOTH themes (Zoom-style).
       So this block is intentionally a no-op now. */

/* === FOOTER — deep navy, soft headings, Zoom-blue link hover === */
body:not(.adm) footer.footer-dark,
body:not(.adm) .footer-dark {
  background: var(--zoom-navy) !important;
  color: #BAC4D8;
  border-top: 0;
}
body:not(.adm) .footer-dark h6,
body:not(.adm) .footer-dark .h6,
body:not(.adm) .footer-dark .fw-bold { color: #FFFFFF; letter-spacing: -.01em; }
body:not(.adm) .footer-dark a { color: #BAC4D8; }
body:not(.adm) .footer-dark a:hover { color: #79A6FF; }
body:not(.adm) .footer-dark .brand-tag { color: rgba(255,255,255,.55); }
body:not(.adm) .footer-dark .btn-outline-light {
  border-color: rgba(255,255,255,.32);
  color: #fff;
}
body:not(.adm) .footer-dark .btn-outline-light:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.55);
}

/* === ASK AI chip — keeps Zoom's signature "AI sparkle" glow === */
body:not(.adm) .ask-ai-pill {
  background: linear-gradient(120deg, var(--zoom-blue-soft), #F4F0FF) !important;
  border: 1px solid #D9E3FF !important;
  color: var(--zoom-ink);
  box-shadow: 0 6px 18px rgba(11, 92, 255, .12);
}

/* === REVIEW cards — refined Zoom feel === */
body:not(.adm) .home-review-card {
  border: 1px solid var(--zoom-line);
  box-shadow: 0 1px 2px rgba(5, 11, 27, .03), 0 8px 22px rgba(5, 11, 27, .05);
}
body:not(.adm) .home-review-card:hover {
  box-shadow: 0 6px 14px rgba(5, 11, 27, .06), 0 22px 48px rgba(5, 11, 27, .09);
}
body:not(.adm) .avatar-circle {
  background: linear-gradient(135deg, var(--zoom-blue), #4480FF);
}
body:not(.adm) .product-rating .text-warning i { color: #F5A623 !important; }

/* === Dark mode mapping — Zoom navy as the surface, Zoom blue accents === */
[data-bs-theme="dark"] body:not(.adm),
body:not(.adm)[data-bs-theme="dark"] {
  --bs-body-bg: var(--zoom-navy);
  --bs-body-color: #DCE3F0;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: #9AA5BC;
  --bs-border-color: rgba(255, 255, 255, .12);
  --bs-tertiary-bg: #0B1430;
  --bs-secondary-bg: #111A38;
  --uc-soft: #0B1430;
}
[data-bs-theme="dark"] body:not(.adm) .navbar {
  background: var(--zoom-navy-2) !important;
  border-bottom-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .navbar .nav-link { color: #DCE3F0 !important; }
[data-bs-theme="dark"] body:not(.adm) .card,
[data-bs-theme="dark"] body:not(.adm) .product-card,
[data-bs-theme="dark"] body:not(.adm) .card-e {
  background: var(--zoom-navy-2);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] body:not(.adm) .bg-soft,
[data-bs-theme="dark"] body:not(.adm) section.bg-light { background: var(--zoom-navy-2) !important; }
[data-bs-theme="dark"] body:not(.adm) .form-control,
[data-bs-theme="dark"] body:not(.adm) .form-select {
  background-color: #0B1430;
  border-color: rgba(255,255,255,.12);
  color: #fff;
}


/* ============================================================================
 *  ZOOM THEME — COMPREHENSIVE DARK MODE OVERRIDES
 *  ----------------------------------------------------------------------------
 *  The Zoom override block above tuned the LIGHT theme (Zoom-blue + white).
 *  This second block makes EVERY public page render crystal-clear when the
 *  user toggles dark mode (data-bs-theme="dark"): page-head headlines stay
 *  white instead of dark-ink, breadcrumbs and links pick up Zoom-blue,
 *  accordions / alerts / tables / list-groups / forms / modals all use
 *  the deep-navy surface palette, empty-state icons and 404 hero are
 *  recoloured for visibility, and the brand wordmark stays elegant.
 *
 *  Scoped to body:not(.adm) like the rest of the Zoom theme — admin pages
 *  keep their own neutral palette.
 * ========================================================================== */

/* === Headings, links, body text === */
[data-bs-theme="dark"] body:not(.adm),
[data-bs-theme="dark"] body:not(.adm) p,
[data-bs-theme="dark"] body:not(.adm) li,
[data-bs-theme="dark"] body:not(.adm) span,
[data-bs-theme="dark"] body:not(.adm) td,
[data-bs-theme="dark"] body:not(.adm) th,
[data-bs-theme="dark"] body:not(.adm) label,
[data-bs-theme="dark"] body:not(.adm) dd,
[data-bs-theme="dark"] body:not(.adm) dt { color: #DCE3F0; }

[data-bs-theme="dark"] body:not(.adm) h1,
[data-bs-theme="dark"] body:not(.adm) h2,
[data-bs-theme="dark"] body:not(.adm) h3,
[data-bs-theme="dark"] body:not(.adm) h4,
[data-bs-theme="dark"] body:not(.adm) h5,
[data-bs-theme="dark"] body:not(.adm) h6,
[data-bs-theme="dark"] body:not(.adm) .h1,
[data-bs-theme="dark"] body:not(.adm) .h2,
[data-bs-theme="dark"] body:not(.adm) .h3,
[data-bs-theme="dark"] body:not(.adm) .h4,
[data-bs-theme="dark"] body:not(.adm) .h5,
[data-bs-theme="dark"] body:not(.adm) .h6,
[data-bs-theme="dark"] body:not(.adm) .display-1,
[data-bs-theme="dark"] body:not(.adm) .display-2,
[data-bs-theme="dark"] body:not(.adm) .display-3,
[data-bs-theme="dark"] body:not(.adm) .display-4,
[data-bs-theme="dark"] body:not(.adm) .display-5,
[data-bs-theme="dark"] body:not(.adm) .display-6 {
  color: #FFFFFF !important;
}
[data-bs-theme="dark"] body:not(.adm) .text-body,
[data-bs-theme="dark"] body:not(.adm) .text-dark { color: #DCE3F0 !important; }
[data-bs-theme="dark"] body:not(.adm) .text-secondary { color: #A6B2C8 !important; }
[data-bs-theme="dark"] body:not(.adm) .text-muted     { color: #8B95AA !important; }
[data-bs-theme="dark"] body:not(.adm) .text-black,
[data-bs-theme="dark"] body:not(.adm) .text-bg-light  { color: #FFFFFF !important; background-color: #111A38 !important; }
[data-bs-theme="dark"] body:not(.adm) a:not(.btn):not(.nav-link):not(.dropdown-item):not(.breadcrumb-item a) { color: #79A6FF; }
[data-bs-theme="dark"] body:not(.adm) a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #A6C3FF; }
[data-bs-theme="dark"] body:not(.adm) hr { border-color: rgba(255, 255, 255, .12); opacity: 1; }
[data-bs-theme="dark"] body:not(.adm) strong,
[data-bs-theme="dark"] body:not(.adm) b { color: #FFFFFF; }
[data-bs-theme="dark"] body:not(.adm) code,
[data-bs-theme="dark"] body:not(.adm) kbd { background: rgba(121, 166, 255, .12); color: #BDD0FF; border: 1px solid rgba(121, 166, 255, .25); padding: 1px 6px; border-radius: 6px; }

/* === Page-head (the H1 + breadcrumb block on every secondary page) === */
[data-bs-theme="dark"] body:not(.adm) .page-head {
  background: linear-gradient(180deg, #0B1430 0%, var(--zoom-navy) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] body:not(.adm) .page-head h1,
[data-bs-theme="dark"] body:not(.adm) .page-head .h1 { color: #FFFFFF !important; }
[data-bs-theme="dark"] body:not(.adm) .page-head p,
[data-bs-theme="dark"] body:not(.adm) .page-head .text-secondary { color: rgba(220, 227, 240, .82) !important; }
[data-bs-theme="dark"] body:not(.adm) .page-head .brand-grad,
[data-bs-theme="dark"] body:not(.adm) .page-head .text-primary { color: #79A6FF !important; -webkit-text-fill-color: #79A6FF; background: none; }
[data-bs-theme="dark"] body:not(.adm) .page-head-trust-item { color: rgba(220, 227, 240, .82); }

/* Breadcrumbs everywhere — dark-mode contrast */
[data-bs-theme="dark"] body:not(.adm) .breadcrumb,
[data-bs-theme="dark"] body:not(.adm) .breadcrumb-item { color: #A6B2C8; }
[data-bs-theme="dark"] body:not(.adm) .breadcrumb-item a { color: #79A6FF; }
[data-bs-theme="dark"] body:not(.adm) .breadcrumb-item.active { color: #FFFFFF; }
[data-bs-theme="dark"] body:not(.adm) .breadcrumb-item + .breadcrumb-item::before { color: #6B7896; }

/* === Page content blocks (legal docs, policies, install guide, activation help, FAQ) === */
[data-bs-theme="dark"] body:not(.adm) .page-content { color: #DCE3F0; }
[data-bs-theme="dark"] body:not(.adm) .page-content h2 {
  color: #FFFFFF;
  border-bottom: 2px solid rgba(121, 166, 255, .30);
}
[data-bs-theme="dark"] body:not(.adm) .page-content h3 { color: #FFFFFF; }
[data-bs-theme="dark"] body:not(.adm) .page-content thead {
  background: rgba(121, 166, 255, .14);
  color: #FFFFFF;
}
[data-bs-theme="dark"] body:not(.adm) .page-content table {
  border: 1px solid rgba(255, 255, 255, .10);
  background: #0B1430;
}
[data-bs-theme="dark"] body:not(.adm) .page-content table td,
[data-bs-theme="dark"] body:not(.adm) .page-content table th {
  border-color: rgba(255, 255, 255, .08);
  color: #DCE3F0;
}
[data-bs-theme="dark"] body:not(.adm) .page-content blockquote {
  border-left: 4px solid var(--zoom-blue);
  color: #BDD0FF;
  background: rgba(11, 92, 255, .08);
  padding: .8rem 1rem;
  border-radius: 0 10px 10px 0;
}

/* === Cards / surfaces / tiles === */
[data-bs-theme="dark"] body:not(.adm) .card,
[data-bs-theme="dark"] body:not(.adm) .card-e,
[data-bs-theme="dark"] body:not(.adm) .product-card,
[data-bs-theme="dark"] body:not(.adm) .home-review-card,
[data-bs-theme="dark"] body:not(.adm) .pricing-card,
[data-bs-theme="dark"] body:not(.adm) .step-card,
[data-bs-theme="dark"] body:not(.adm) .benefit-card,
[data-bs-theme="dark"] body:not(.adm) .feature-card {
  background: #111A38 !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #DCE3F0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 36px rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] body:not(.adm) .card *,
[data-bs-theme="dark"] body:not(.adm) .card-e * {
  border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .card .card-title,
[data-bs-theme="dark"] body:not(.adm) .card .card-header { color: #FFFFFF; }

/* === Sections — bg-soft / py-5 alternating bands === */
[data-bs-theme="dark"] body:not(.adm) .bg-soft,
[data-bs-theme="dark"] body:not(.adm) section.bg-light {
  background: #0B1430 !important;
}
[data-bs-theme="dark"] body:not(.adm) .bg-white { background: #111A38 !important; }
[data-bs-theme="dark"] body:not(.adm) .bg-body-tertiary,
[data-bs-theme="dark"] body:not(.adm) .bg-body-secondary { background: #111A38 !important; }

/* === Forms, inputs, textareas, selects === */
[data-bs-theme="dark"] body:not(.adm) .form-control,
[data-bs-theme="dark"] body:not(.adm) .form-select,
[data-bs-theme="dark"] body:not(.adm) textarea {
  background-color: #0B1430 !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #FFFFFF !important;
}
[data-bs-theme="dark"] body:not(.adm) .form-control::placeholder,
[data-bs-theme="dark"] body:not(.adm) textarea::placeholder { color: #7E89A4 !important; }
[data-bs-theme="dark"] body:not(.adm) .form-control:focus,
[data-bs-theme="dark"] body:not(.adm) .form-select:focus {
  border-color: var(--zoom-blue) !important;
  box-shadow: 0 0 0 4px rgba(11, 92, 255, .25) !important;
  background-color: #0B1430 !important;
}
[data-bs-theme="dark"] body:not(.adm) .form-label,
[data-bs-theme="dark"] body:not(.adm) .form-check-label { color: #DCE3F0; }
[data-bs-theme="dark"] body:not(.adm) .form-text { color: #A6B2C8; }
[data-bs-theme="dark"] body:not(.adm) .form-check-input { background-color: #0B1430; border-color: rgba(255, 255, 255, .25); }
[data-bs-theme="dark"] body:not(.adm) .form-check-input:checked { background-color: var(--zoom-blue); border-color: var(--zoom-blue); }
[data-bs-theme="dark"] body:not(.adm) .input-group-text { background: #0B1430; color: #DCE3F0; border-color: rgba(255,255,255,.14); }

/* === Accordions (FAQ, returns policy, install guide, activation help) === */
[data-bs-theme="dark"] body:not(.adm) .accordion {
  --bs-accordion-bg: #111A38;
  --bs-accordion-border-color: rgba(255, 255, 255, .08);
  --bs-accordion-active-bg: rgba(11, 92, 255, .15);
  --bs-accordion-active-color: #FFFFFF;
  --bs-accordion-btn-color: #FFFFFF;
  --bs-accordion-color: #DCE3F0;
}
[data-bs-theme="dark"] body:not(.adm) .accordion-button:not(.collapsed) {
  background: rgba(11, 92, 255, .15);
  color: #FFFFFF;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .accordion-button::after {
  filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(1456%) hue-rotate(195deg) brightness(102%) contrast(100%);
}
[data-bs-theme="dark"] body:not(.adm) .accordion-body { color: #DCE3F0; }

/* === Alerts === */
[data-bs-theme="dark"] body:not(.adm) .alert-info {
  --bs-alert-bg: rgba(11, 92, 255, .12);
  --bs-alert-color: #BDD0FF;
  --bs-alert-border-color: rgba(11, 92, 255, .3);
}
[data-bs-theme="dark"] body:not(.adm) .alert-warning {
  --bs-alert-bg: rgba(245, 166, 35, .12);
  --bs-alert-color: #F5C58A;
  --bs-alert-border-color: rgba(245, 166, 35, .3);
}
[data-bs-theme="dark"] body:not(.adm) .alert-success {
  --bs-alert-bg: rgba(34, 197, 94, .14);
  --bs-alert-color: #9BE3B9;
  --bs-alert-border-color: rgba(34, 197, 94, .3);
}
[data-bs-theme="dark"] body:not(.adm) .alert-danger {
  --bs-alert-bg: rgba(244, 63, 94, .12);
  --bs-alert-color: #FCA3B5;
  --bs-alert-border-color: rgba(244, 63, 94, .3);
}

/* === Tables (used on press-kit, sitemap, returns timeline, install guide) === */
[data-bs-theme="dark"] body:not(.adm) .table {
  --bs-table-bg: transparent;
  --bs-table-color: #DCE3F0;
  --bs-table-border-color: rgba(255, 255, 255, .08);
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(121, 166, 255, .07);
}
[data-bs-theme="dark"] body:not(.adm) .table thead { background: rgba(121, 166, 255, .14); color: #FFFFFF; }
[data-bs-theme="dark"] body:not(.adm) .table > :not(caption) > * > * { color: #DCE3F0; border-bottom-color: rgba(255, 255, 255, .08); }

/* === Dropdowns, modals, popovers, tooltips, list groups === */
[data-bs-theme="dark"] body:not(.adm) .dropdown-menu {
  --bs-dropdown-bg: #111A38;
  --bs-dropdown-color: #DCE3F0;
  --bs-dropdown-link-color: #DCE3F0;
  --bs-dropdown-link-hover-bg: #1A2552;
  --bs-dropdown-link-hover-color: #FFFFFF;
  border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .modal-content {
  background: #111A38; color: #DCE3F0;
  border: 1px solid rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .modal-header,
[data-bs-theme="dark"] body:not(.adm) .modal-footer { border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] body:not(.adm) .modal-title { color: #FFFFFF; }
[data-bs-theme="dark"] body:not(.adm) .btn-close { filter: invert(1) opacity(.85); }
[data-bs-theme="dark"] body:not(.adm) .list-group-item {
  background: #111A38; color: #DCE3F0;
  border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .list-group-item:hover { background: #1A2552; }
[data-bs-theme="dark"] body:not(.adm) .list-group-item.active { background: var(--zoom-blue); border-color: var(--zoom-blue); color: #FFFFFF; }

/* === Tabs (product detail, account, support center) === */
[data-bs-theme="dark"] body:not(.adm) .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body:not(.adm) .nav-tabs .nav-link {
  color: #A6B2C8; border-color: transparent;
}
[data-bs-theme="dark"] body:not(.adm) .nav-tabs .nav-link.active {
  background: #111A38; color: #FFFFFF;
  border-color: rgba(255, 255, 255, .08) rgba(255, 255, 255, .08) #111A38;
}
[data-bs-theme="dark"] body:not(.adm) .nav-tabs .nav-link:hover { color: #79A6FF; border-color: transparent; }
[data-bs-theme="dark"] body:not(.adm) .nav-pills .nav-link.active { background: var(--zoom-blue); color: #FFFFFF; }

/* === Badges & pills === */
[data-bs-theme="dark"] body:not(.adm) .badge.text-bg-light {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .12);
}
[data-bs-theme="dark"] body:not(.adm) .badge.text-bg-primary,
[data-bs-theme="dark"] body:not(.adm) .text-bg-primary {
  background-color: rgba(11, 92, 255, .22) !important;
  color: #BDD0FF !important;
}
[data-bs-theme="dark"] body:not(.adm) .badge.text-bg-success-subtle,
[data-bs-theme="dark"] body:not(.adm) .text-bg-success-subtle {
  background-color: rgba(34, 197, 94, .18) !important;
  color: #9BE3B9 !important;
}

/* === Empty states & 404 — visible glyph + readable headline === */
[data-bs-theme="dark"] body:not(.adm) .empty-state,
[data-bs-theme="dark"] body:not(.adm) .empty-result {
  color: #A6B2C8;
}
[data-bs-theme="dark"] body:not(.adm) .empty-state i,
[data-bs-theme="dark"] body:not(.adm) .empty-result i,
[data-bs-theme="dark"] body:not(.adm) .empty-state svg,
[data-bs-theme="dark"] body:not(.adm) .empty-result svg { color: #79A6FF; opacity: .8; }
[data-bs-theme="dark"] body:not(.adm) .page-404 .display-1,
[data-bs-theme="dark"] body:not(.adm) .display-1.text-primary { color: #79A6FF !important; }

/* The big "404" headline rendered on /404 route */
[data-bs-theme="dark"] body:not(.adm) .container > .display-1 { color: #4480FF !important; }

/* === Filter sidebar (shop), category chips === */
[data-bs-theme="dark"] body:not(.adm) .filter-sidebar,
[data-bs-theme="dark"] body:not(.adm) .filter-card,
[data-bs-theme="dark"] body:not(.adm) .shop-toolbar {
  background: #111A38 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: #DCE3F0;
}
[data-bs-theme="dark"] body:not(.adm) .filter-sidebar h6,
[data-bs-theme="dark"] body:not(.adm) .filter-sidebar .filter-group-title { color: #FFFFFF; }

/* === Product card OS / stock pills in dark === */
[data-bs-theme="dark"] body:not(.adm) .os-badge,
[data-bs-theme="dark"] body:not(.adm) .stock-pill,
[data-bs-theme="dark"] body:not(.adm) .badge.bg-light {
  background: rgba(255, 255, 255, .06) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}
[data-bs-theme="dark"] body:not(.adm) .price-original { color: #8B95AA !important; text-decoration: line-through; }

/* === Hero override on dark mode (homepage already has hero--zoom-navy;
       this rule ensures secondary-page heroes also feel native) === */
[data-bs-theme="dark"] body:not(.adm) .hero:not(.hero--zoom-navy) {
  background: linear-gradient(180deg, #0B1430, var(--zoom-navy)) !important;
  color: #DCE3F0;
}
[data-bs-theme="dark"] body:not(.adm) .hero:not(.hero--zoom-navy) h1,
[data-bs-theme="dark"] body:not(.adm) .hero:not(.hero--zoom-navy) .hero-stats .fs-3 { color: #FFFFFF !important; }
[data-bs-theme="dark"] body:not(.adm) .hero:not(.hero--zoom-navy) .text-secondary,
[data-bs-theme="dark"] body:not(.adm) .hero:not(.hero--zoom-navy) small { color: rgba(220,227,240,.7) !important; }

/* === Ask-AI pill / chat launcher === */
[data-bs-theme="dark"] body:not(.adm) .ask-ai-pill {
  background: linear-gradient(120deg, rgba(11, 92, 255, .18), rgba(168, 85, 247, .14)) !important;
  border-color: rgba(121, 166, 255, .32) !important;
  color: #EAF0FF;
  box-shadow: 0 6px 18px rgba(11, 92, 255, .25);
}

/* === Top trustbar / topbar — existing dark-navy gradient lives at lines
       3079-3080. Don't override here; the previous override made the bar
       a flat #0B1430 which lost the subtle Zoom-blue glow on the right
       side that's already tuned for both themes. === */

/* === Newsletter band ("Join our list and save up to 81%") === */
[data-bs-theme="dark"] body:not(.adm) .newsletter-band,
[data-bs-theme="dark"] body:not(.adm) section[data-testid="newsletter"] {
  background: linear-gradient(180deg, #0B1430, var(--zoom-navy)) !important;
}
[data-bs-theme="dark"] body:not(.adm) .newsletter-band h2,
[data-bs-theme="dark"] body:not(.adm) section[data-testid="newsletter"] h2 { color: #FFFFFF !important; }
[data-bs-theme="dark"] body:not(.adm) .newsletter-band .form-control {
  background: #FFFFFF !important;
  color: #131619 !important;
  border-color: transparent !important;
}

/* === Special section: "Trusted by Thousands" + review cards === */
[data-bs-theme="dark"] body:not(.adm) [data-testid="trusted-stats"] .fs-2 { color: #79A6FF !important; }
[data-bs-theme="dark"] body:not(.adm) [data-testid="trusted-stats"] small { color: #A6B2C8 !important; }
[data-bs-theme="dark"] body:not(.adm) .home-review-text { color: #DCE3F0 !important; }

/* === Footer is already deep-navy via the light-theme rules; tighten link
       hover for dark consistency === */
[data-bs-theme="dark"] body:not(.adm) .footer-dark { background: #050B1B !important; }
[data-bs-theme="dark"] body:not(.adm) .footer-dark a { color: #BAC4D8; }
[data-bs-theme="dark"] body:not(.adm) .footer-dark a:hover { color: #79A6FF; }

/* ============================================================================
 *  ZOOM-INSPIRED LOGO WORDMARK REFRESH
 *  ----------------------------------------------------------------------------
 *  Refines the existing "Maventech Software" + "AUTHORIZED RESELLER" markup
 *  used in the header and footer. Doesn't change any PHP — only the CSS:
 *    • "Maventech" sits in the body ink (white in dark mode) for max read.
 *    • "Software" picks up solid Zoom blue (#0B5CFF) — no more cyan/teal
 *      gradient that clashed with the new palette.
 *    • The "AUTHORIZED RESELLER" tag becomes a true chip — tighter
 *      Zoom-blue-soft pill background with Zoom-blue text, mono-spaced
 *      uppercase tracking, like the badges on Zoom's pricing tiers.
 * ========================================================================== */

/* Override the legacy brand-grad gradient with a clean solid Zoom blue. */
body:not(.adm) .brand-grad,
[data-bs-theme="dark"] body:not(.adm) .brand-grad {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--zoom-blue) !important;
  font-weight: 700;
  letter-spacing: -.02em;
}

body:not(.adm) .brand-text {
  font-family: "Inter", "Manrope", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.18rem;
  letter-spacing: -.025em;
  color: var(--zoom-ink);
  line-height: 1.05;
}
[data-bs-theme="dark"] body:not(.adm) .brand-text { color: #FFFFFF; }
.footer-dark .brand-text,
body:not(.adm) .footer-dark .brand-text { color: #FFFFFF; }

/* The "AUTHORIZED RESELLER" chip — re-designed as a pill, not a tracked
   tagline. Tightens the brand block visually and matches the rest of
   the Zoom-blue accent system. */
body:not(.adm) .brand-tag {
  display: inline-block;
  padding: 2px 9px;
  margin-top: 4px;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zoom-blue);
  background: var(--zoom-blue-soft);
  border: 1px solid rgba(11, 92, 255, .25);
  border-radius: 999px;
  line-height: 1.5;
}
[data-bs-theme="dark"] body:not(.adm) .brand-tag {
  color: #BDD0FF;
  background: rgba(11, 92, 255, .14);
  border-color: rgba(11, 92, 255, .35);
}
body:not(.adm) .footer-dark .brand-tag {
  color: #BDD0FF;
  background: rgba(11, 92, 255, .14);
  border-color: rgba(11, 92, 255, .35);
}

/* The SVG brand-mark — kill the legacy "vibe gradient" cyan/teal drop
   shadow and replace with a clean Zoom-blue glow so the icon matches
   the wordmark when no custom logo is uploaded. */
body:not(.adm) .brand-mark {
  filter: drop-shadow(0 4px 10px rgba(11, 92, 255, .35));
  border-radius: 12px;
}
[data-bs-theme="dark"] body:not(.adm) .brand-mark {
  filter: drop-shadow(0 4px 12px rgba(121, 166, 255, .42));
}

/* Hover on the navbar brand — subtle lift. */
body:not(.adm) a.navbar-brand,
body:not(.adm) .footer-dark a.navbar-brand,
body:not(.adm) a[href="index.php"] .brand-text {
  text-decoration: none;
}
body:not(.adm) .navbar-brand:hover .brand-text,
body:not(.adm) .navbar-brand:hover .brand-grad { opacity: .9; }



/* ============================================================================
 *  TOPBAR-RIGHT PILLS + TRUST STRIP BAND
 *  ----------------------------------------------------------------------------
 *  Dedicated classes for the three right-side topbar items
 *  (.trustbar-store-pill, .trustbar-age-pill, .trustbar-phone-link) and the
 *  hero→content trust strip (.trust-strip-band).  Previous markup used
 *  Bootstrap utilities (.text-bg-warning + .bg-white) that washed out
 *  against the Zoom-navy topbar in dark mode and were paler than ideal in
 *  light mode too — these new classes have proper contrast tuned for both
 *  themes.
 * ========================================================================== */

/* === LIGHT MODE === */
.trustbar-store-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 11px;
  font-size: .74rem; font-weight: 700;
  background: #FFF3CD; color: #6B4F00;
  border-radius: 999px;
  border: 1px solid #FFE69C;
  white-space: nowrap;
}
.trustbar-store-pill .bi { color: #F5A623; font-size: .82em; }

.trustbar-age-pill {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 3px 10px;
  font-size: .78rem; font-weight: 700;
  background: #FFFFFF; color: #131619;
  border-radius: 999px;
  border: 1px solid #E4E8EE;
  white-space: nowrap;
}
.trustbar-age-pill small { font-size: .68em; font-weight: 600; opacity: .7; }

.trustbar-phone-link {
  color: #FFFFFF !important;          /* topbar bg is dark navy in both themes */
  text-decoration: none;
  font-weight: 600; font-size: .85rem;
  display: inline-flex; align-items: center;
  letter-spacing: .005em;
}
.trustbar-phone-link:hover { color: #79A6FF !important; }
.trustbar-phone-link .bi { color: #79A6FF; }

/* Trust strip — light band that separates the hero from the next section.
   Centered "SSL Secured / 30-Day Guarantee / Microsoft Verified" badges
   with bold Zoom-blue icons. */
.trust-strip-band {
  background: var(--zoom-soft, #F5F7FA);
  border-bottom: 1px solid var(--zoom-line, #E4E8EE) !important;
  border-top: 1px solid var(--zoom-line, #E4E8EE);
}
.trust-strip-row .trust-strip-item {
  display: inline-flex; align-items: center; gap: 6px;
  color: #131619;
  font-weight: 600;
  font-size: .88rem;
}
.trust-strip-row .trust-strip-item .bi {
  color: var(--zoom-blue, #0B5CFF);
  font-size: 1.05em;
}

/* === DARK MODE OVERRIDES — bring all four elements into the Zoom-navy world */
[data-bs-theme="dark"] .trustbar-store-pill {
  background: rgba(245, 166, 35, .18);
  border-color: rgba(245, 166, 35, .35);
  color: #FFE69C;
}
[data-bs-theme="dark"] .trustbar-store-pill .bi { color: #FFD166; }

[data-bs-theme="dark"] .trustbar-age-pill {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: #FFFFFF;
}
[data-bs-theme="dark"] .trustbar-age-pill small { opacity: .8; }

[data-bs-theme="dark"] .trustbar-phone-link { color: #FFFFFF !important; }
[data-bs-theme="dark"] .trustbar-phone-link:hover { color: #79A6FF !important; }

[data-bs-theme="dark"] body:not(.adm) .trust-strip-band {
  background: linear-gradient(180deg, #050B1B 0%, #0B1430 100%) !important;
  border-top-color: rgba(255, 255, 255, .08) !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}
[data-bs-theme="dark"] body:not(.adm) .trust-strip-row .trust-strip-item {
  color: #FFFFFF;
}
[data-bs-theme="dark"] body:not(.adm) .trust-strip-row .trust-strip-item .bi {
  color: #79A6FF;
}


/* ============================================================================
 *  HOMEPAGE AIRY-TRIM — applied on top of all previous Zoom-theme overrides.
 *  Goal (user feedback "entire website looks bulky make it light"):
 *    – section padding ↓ ~28% (72→52 mobile, 96→68 desktop)
 *    – hero padding ↓ ~30%
 *    – trust strip py-3 → py-2 equivalent
 *    – cards: lighter shadow + thinner border + smaller radius
 *    – buttons / badges: slightly tighter padding + radius
 *    – stat values: smaller font weight so they breathe
 *  Scoped to body:not(.adm) so admin shell is untouched.
 * ========================================================================== */

/* 1. Section rhythm — tighter top/bottom on every public section */
body:not(.adm) section.py-5,
body:not(.adm) section.py-4 { padding-top: 52px !important; padding-bottom: 52px !important; }
@media (min-width: 992px) {
  body:not(.adm) section.py-5,
  body:not(.adm) section.py-4 { padding-top: 68px !important; padding-bottom: 68px !important; }
}

/* 2. Hero — drop ~30% padding, slightly smaller H1, calmer line-height */
body:not(.adm) .hero.hero--zoom-navy { padding: 56px 0 60px !important; }
@media (min-width: 992px) {
  body:not(.adm) .hero.hero--zoom-navy { padding: 64px 0 72px !important; }
}
body:not(.adm) .hero.hero--zoom-navy h1 { font-size: clamp(1.9rem, 3.1vw, 2.55rem) !important; line-height: 1.15; }
body:not(.adm) .hero .fs-5 { font-size: .98rem !important; }
body:not(.adm) .hero-stats { gap: 2.25rem !important; margin-top: 2rem !important; }
body:not(.adm) .hero-stats .fs-3 { font-size: 1.35rem !important; font-weight: 650; }

/* 3. Trust strip — compress the band */
body:not(.adm) .trust-strip-band { padding-top: 10px !important; padding-bottom: 10px !important; }
body:not(.adm) .trust-strip-row { gap: 1.5rem !important; }
body:not(.adm) .trust-strip-row .trust-strip-item { font-size: .82rem !important; }

/* 4. Cards — lighter elevation + thinner border + tighter radius */
body:not(.adm) .card { border-radius: .6rem !important; border-width: 1px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; }
body:not(.adm) .card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08) !important; }
body:not(.adm) .product-card { border-radius: .65rem !important; }
body:not(.adm) .product-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 22px rgba(11, 92, 255, .10) !important; }
body:not(.adm) .product-card .product-img-wrap { border-radius: .55rem !important; }

/* 5. Buttons & pills — softer, less chunky */
body:not(.adm) .btn { font-weight: 550; letter-spacing: 0; }
body:not(.adm) .btn-lg { padding: .55rem 1.1rem !important; font-size: .95rem !important; }
body:not(.adm) .btn-hero-cta { box-shadow: 0 6px 16px rgba(234, 88, 12, .22) !important; }
body:not(.adm) .btn-hero-cta:hover { box-shadow: 0 10px 22px rgba(234, 88, 12, .28) !important; }

/* 6. Headings — slightly lighter weight so pages don't feel "bold-everywhere" */
body:not(.adm) section h2.fw-bold,
body:not(.adm) .container h2.fw-bold { font-weight: 620 !important; letter-spacing: -.018em; }
body:not(.adm) section h2.fw-bold { font-size: clamp(1.45rem, 2.4vw, 1.9rem) !important; }
body:not(.adm) [data-testid="trusted-stats"] .fs-2 { font-size: 1.6rem !important; font-weight: 650; }

/* 7. Footer — soften the giant top heading */
body:not(.adm) footer h2,
body:not(.adm) footer .h2 { font-size: 1.4rem !important; font-weight: 600 !important; }

/* 8. Dark-mode pairing: lighter card surface + softer borders so dark
      mode doesn't feel like a slab of navy — matches "make it light" intent */
[data-bs-theme="dark"] body:not(.adm) .card { background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .06) !important; }
[data-bs-theme="dark"] body:not(.adm) .card:hover { background: rgba(255, 255, 255, .05) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; }
/* ============================================================================
 *  TOPBAR UTILITY ACTIONS — currency selector + dark-mode toggle promoted
 *  from the main nav so the front nav line breathes (user feedback
 *  "front line should not look so congested").  Sits to the right of the
 *  phone link in .trustbar, matches the deep-navy trustbar surface, and
 *  inherits the same crisp light/dark contrast as the other trustbar pills.
 * ========================================================================== */
.trustbar-utility-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .65rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: #E5ECFA;
  font-size: .78rem;
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.15;
  transition: background-color .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.trustbar-utility-btn:hover,
.trustbar-utility-btn:focus { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); color: #fff; }
.trustbar-utility-btn.dropdown-toggle::after { margin-left: .3rem; opacity: .75; }
.trustbar-utility-icon { padding: .22rem .42rem; }
.trustbar-utility-icon .bi { font-size: .95em; line-height: 1; }
.trustbar-currency .dropdown-menu { font-size: .85rem; }
/* The trustbar surface is navy in BOTH light + dark site themes (it's the
   brand chrome row), so the utility chips always need the light-on-navy
   variant.  The earlier light-mode override here (dark text on faint
   light outline) rendered the chips invisible on the navy strip — kept
   removed on purpose. */


/* ============================================================================
 *  One-Time Purchase badge (product page) — was using `text-bg-info` which
 *  in dark mode rendered a light-cyan pill with washed-out dark text
 *  (almost invisible).  Use an explicit blue accent that holds contrast in
 *  BOTH themes, matched to the rest of the Zoom-navy palette.
 * ========================================================================== */
.one-time-purchase-badge {
  background: #DBEAFE;       /* sky-100 — readable on white in light mode */
  color: #1E3A8A;            /* indigo-900 */
  border: 1px solid #BFDBFE; /* sky-200 — light separator */
  font-weight: 600;
}
[data-bs-theme="dark"] .badge.one-time-purchase-badge {
  /* In dark mode we lift the badge with a translucent indigo surface so it
     reads cleanly against the navy product hero.  Text stays near-white for
     crisp contrast. */
  background: rgba(96, 165, 250, .18);   /* blue-400 @ 18% */
  color: #BFDBFE;                        /* sky-200 — bright enough on navy */
  border: 1px solid rgba(147, 197, 253, .35);
}