/* Loyalsnap website: follow the visitor's light/dark setting.
   Portal mockups follow the theme too (see theme-tokens.css). */
:root { --ls-band: #E8E9F1; color-scheme: light; }
[data-theme="dark"] { --ls-band: #1F2333; color-scheme: dark; }

/* Sticky header after scrolling */
html[data-theme="dark"].ls-scrolled .sc-host > header {
  background: rgba(31, 35, 51, .88) !important;
  box-shadow: 0 -1px 2px #00000033, 0 3px 8px #00000066;
}

/* Home: What's inside — dark cards, light mockups */
[data-theme="dark"] .ls-wi {
  background: var(--bg-canvas);
  --surface: #1F2333; --text: var(--text-primary); --text2: var(--text-secondary);
  --hair: #252A3D;
  color: var(--text-primary);
}
[data-theme="dark"] .ls-wi__card { box-shadow: var(--shadow-1); }

/* Home: Loyalsnap Intelligence section — dark copy and form, light chat mockup */
[data-theme="dark"] .lsai {
  background: var(--bg-canvas);
  --text: var(--text-primary); --text2: var(--text-secondary);
  --line: #3B4054; --field: #252A3D;
  color: var(--text-primary);
}
[data-theme="dark"] .lsai .ai-chip { background: var(--ai-chip-bg); color: var(--ai-chip-text); }
[data-theme="dark"] .lsai .ai-form { background: var(--bg-surface); border-color: var(--border-subtle); box-shadow: var(--shadow-1); }
[data-theme="dark"] .lsai .ai-btn { border-color: transparent; }

/* Home: testimonial video placeholders */
[data-theme="dark"] .hm-ph, [data-theme="dark"] .hm-ph.empty { background-color: #252A3D; }

/* Home: client journey — dark copy and tabs, light mockup stage */
[data-theme="dark"] .hw {
  --text: var(--text-primary); --text2: var(--text-secondary); --sunk: var(--bg-surface);
  --line: #3B4054; color: var(--text-primary);
}
[data-theme="dark"] .hw .hw-step.on,
[data-theme="dark"] .hw .hw-jt button.on { background: var(--bg-surface-raised); box-shadow: var(--shadow-1); }
[data-theme="dark"] .hw .hw-jt { box-shadow: var(--shadow-1); }
[data-theme="dark"] .hw .hw-n { background: var(--bg-surface); }
[data-theme="dark"] .hw .hw-step.on .hw-n { background: #3255B8; color: #fff; }


/* Brand-blue text needs the lighter blue on dark */
[data-theme="dark"] :is(.ls-wi__all, .ls-wi__eyebrow, .hw .chip.brand, .hw .au-ic, .hw .cbtn:not(.on), .hw .ini) { color: #8FA4DE; }

/* Loyalsnap logo: swap to the white SVG on dark */
[data-theme="dark"] img.ls-logo-light { display: none !important; }
[data-theme="dark"] img.ls-logo-dark { display: block !important; }

/* Customer logos turn white on dark */
[data-theme="dark"] img[src*="/logo.png"],
[data-theme="dark"] .hm img.lg, [data-theme="dark"] img.lg { filter: brightness(0) invert(1); }
[data-theme="dark"] img[src*="/logo.png"], [data-theme="dark"] img.lg { opacity: .75; }

/* Hero: soften the light haze behind the revenue card */
[data-theme="dark"] .lsv-scrim { background: rgba(23, 26, 38, .55) !important; }

/* Dot patterns: same as before in light, soft white dots in dark */
:root{--lsx-dot-14:rgba(42,47,71,0.14);--lsx-dot-16:rgba(42,47,71,0.16);--lsx-dot-20:rgba(42,47,71,.2);--lsx-dot-22:rgba(42,47,71,0.22);--lsx-dot-brand:rgba(50,85,184,.2)}
[data-theme="dark"]{--lsx-dot-14:rgba(255,255,255,0.10);--lsx-dot-16:rgba(255,255,255,0.10);--lsx-dot-20:rgba(255,255,255,0.12);--lsx-dot-22:rgba(255,255,255,0.13);--lsx-dot-brand:rgba(143,164,222,0.25)}

/* Testimonial quote mark: lighter on dark */
[data-theme="dark"] .hm-mark, [data-theme="dark"] .fh-tm-mark { color: #8FA4DE; opacity: .4; }

/* Map: lighter dots on dark (background unchanged) */
[data-theme="dark"] #ls-world-map circle[fill="#3255B8"] { fill: #8FA4DE; }
[data-theme="dark"] #ls-world-map circle[stroke="#3255B8"] { stroke: #8FA4DE; }

/* Logos with a dark-mode SVG: swap the file by theme */
:root:not([data-theme="dark"]) img.ls-dk { display: none !important; }
[data-theme="dark"] img.ls-lt { display: none !important; }

/* Home hero portal mockup on dark: match the portal's dark look */
[data-theme="dark"] .lsv-window { box-shadow: 0 0 0 1px #2F3447, 0 18px 48px rgba(0,0,0,.55); }
[data-theme="dark"] .lsv-window-in { background: #171A26; }
[data-theme="dark"] .lsv-col { background: #1F2333; border-color: #252A3D; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
[data-theme="dark"] .lsv-chip { background: #2A2F42; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.35); }
[data-theme="dark"] .lsv-chip.is-on { box-shadow: 0 0 0 2px rgba(143,164,222,.6), 0 3px 8px rgba(0,0,0,.4); }
[data-theme="dark"] .lsv-card { background: #1F2333; border-color: #2F3447; box-shadow: 0 3px 8px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45); }
/* Brighter glow behind the hero so the portal stands out */
[data-theme="dark"] .lsv-glow-a { background: rgba(74,123,218,0.38); }
[data-theme="dark"] .lsv-glow-b { background: rgba(30,178,152,0.20); }

/* Inputs on dark: brand placeholder and icon color */
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #A6AABC; opacity: 1; }
[data-theme="dark"] .fq-search, [data-theme="dark"] .wb-search, [data-theme="dark"] .bl-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A6AABC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .fq-search { background-color: var(--bg-field); border-color: transparent; }

/* Top navigation: hover line under Features, Pricing, About and Contact (not Resources) */
header nav > a { position: relative; }
header nav > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--text-brand); transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
header nav > a:hover::after, header nav > a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { header nav > a::after { transition: none; } }

/* Secondary (tinted) buttons: visible hover on dark */
[data-theme="dark"] { --action-tinted-hover: rgba(50,85,184,0.36); }
[data-theme="dark"] .ls-bs:hover { background: rgba(50,85,184,0.36) !important; color: #AFC0EC !important; }
[data-theme="dark"] .vd-more:hover { background: rgba(50,85,184,0.36); }

/* FIT landing page on dark: brand logos in white, step circles match their light illustrations */
html[data-theme="dark"] .fh img[src$="f45-logo.svg"], [data-theme="dark"] img[src$="/assets/f45-logo.svg"],
[data-theme="dark"] .fh-tq-logo img,
[data-theme="dark"] .fh-tm-tab img.lg { filter: brightness(0) invert(1) !important; }
[data-theme="dark"] .fh-si { background: #F8F9FC !important; }

/* Home testimonials: F45 logo badge bigger; white on dark */
.hm-logo img[src*="790df56340584ecdbd573f36d8b864a5"] { height: 24px; }
[data-theme="dark"] .hm-logo img[src*="790df56340584ecdbd573f36d8b864a5"] { filter: brightness(0) invert(1); }

/* Home pricing on dark: cards lift off the section */
[data-theme="dark"] .ls-price > div > div:nth-child(2) > div { background: #2A2F42 !important; box-shadow: 0 -1px 2px #00000033, 0 3px 8px #00000066 !important; }
[data-theme="dark"] .ls-price > div > div:nth-child(2) > div:not([style*="border: 2px"]) { border-color: #353A4F !important; }

/* Home hero on dark: lighter surface, like before */
[data-theme="dark"] .ls-hero-bg { background: var(--bg-surface) !important; }

/* FIT landing page plans on dark: cards lift off the section */
[data-theme="dark"] #plans .fh-plan, [data-theme="dark"] #plans .fh-all { background: #2A2F42; box-shadow: 0 -1px 2px #00000033, 0 3px 8px #00000066; }
[data-theme="dark"] #plans .fh-plan:not(.pop), [data-theme="dark"] #plans .fh-all { border-color: #353A4F; }

/* Home on dark: "Trusted by" logo strip matches the hero */
[data-theme="dark"] .ls-hero-bg + div { background: var(--bg-surface); box-shadow: 0 0 0 100vmax var(--bg-surface); clip-path: inset(0 -100vmax); }

/* Legal pages side menu: hover on the warm canvas (same as the testimonial list hover) */
.lg-nav a { transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.lg-nav a:not([style*="bg-selected"]):hover { background: var(--bg-surface); box-shadow: var(--shadow-1); color: var(--text-primary) !important; }

/* Search window: darker backdrop, like a modal */
.ls-so { background: rgba(42,47,71,0.48) !important; }
[data-theme="dark"] .ls-so { background: rgba(0,0,0,0.6) !important; }

/* Sticky filter bars (Webinars, Videos, Blog): sit right under the header when it shows, and cover to the top when it hides */
.wb-bar, .bl-bar { top: var(--ls-hh, 0px) !important; transition: top .3s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease !important; }
.wb-bar.stuck { border-radius: 0 0 20px 20px; }

/* Segmented tabs in dark mode: one style everywhere (brand: track bg/sunken with a shadow (dark Elevation/2), selected tab bg/surface with Elevation/1) */
[data-theme="dark"] :is(.bl-tabs, .ct-tabs, .fh-sw, .hw-jt, .rp-tabs, .wb-tabs, .ck-tabs) { background: var(--bg-sunken) !important; box-shadow: 0 -1px 2px #00000033, 0 3px 8px #00000066 !important; }
[data-theme="dark"] :is(.bl-tabs, .ct-tabs, .fh-sw, .hw-jt, .rp-tabs, .wb-tabs, .ck-tabs) > :is([aria-selected="true"], .on) { background: var(--bg-surface) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-1) !important; }

/* Search window: no "Esc" key hint on phones and touch screens */
@media (max-width: 759.98px), (hover: none) and (pointer: coarse) { .ls-sk { display: none !important; } }

/* Search box: long placeholder ends with "..." instead of being cut */
.ls-si { text-overflow: ellipsis; }
/* Legal pages side menu: the page you are on does not change on hover */
.lg-nav a[style*="bg-selected"]:hover { background: var(--bg-selected) !important; color: var(--text-primary) !important; box-shadow: none !important; transform: none !important; cursor: default; }

/* Pricing page plan cards in dark mode: same as the Home and FIT plan cards */
[data-theme="dark"] .pr-cards > div { background: #2A2F42 !important; box-shadow: 0 -1px 2px #00000033, 0 3px 8px #00000066 !important; }
[data-theme="dark"] .pr-cards > div:not([style*="border: 2px"]) { border-color: #353A4F !important; }

/* "Get started" next to "See my options" in the end-of-page banner: secondary button in dark mode, with a hover in both modes */
a[href*="portal.loyalsnap.com/onboarding"][style*="background: var(--bg-surface)"] { transition: background-color .15s ease; }
a[href*="portal.loyalsnap.com/onboarding"][style*="background: var(--bg-surface)"]:hover { background: #DEE4F4 !important; }
[data-theme="dark"] a[href*="portal.loyalsnap.com/onboarding"][style*="background: var(--bg-surface)"] { background: rgba(50,85,184,0.2) !important; color: #8FA4DE !important; }
[data-theme="dark"] a[href*="portal.loyalsnap.com/onboarding"][style*="background: var(--bg-surface)"]:hover { background: rgba(50,85,184,0.36) !important; }

/* Partners page, dark mode: logos with no white version turn white so they show on the dark cards */
[data-theme="dark"] .rp-logo img:is([alt="Telomere"], [alt="Raising the Bar Consulting"], [alt="Studio Grow"], [alt="Excelsior Fitness Group"]) { filter: brightness(0) invert(1); }

/* FIT "Partner price" chip: readable red text in dark mode */
[data-theme="dark"] .fh-deal { color: #FF9088 !important; }