/* z11.store light theme: html[data-z11-theme="light"] (set by z11-theme.php). Dark stays the default.
   The prism hero (.z11-hero) keeps its night look in both modes. */

/* ---------- switch button ---------- */
.z11-theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer; padding: 0;
  background: transparent; border: 1px solid var(--z-line-2, rgba(255,255,255,.16)); color: var(--z-fg, #f3f4f7); transition: background .2s; }
.z11-theme-btn:hover { background: var(--z-panel-2, rgba(255,255,255,.06)); }
.z11-theme-btn svg { width: 18px; height: 18px; }
.z11-theme-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- palette ---------- */
html[data-z11-theme="light"] body.z11-v2 {
  --z-bg: #f5f6fa; --z-panel: #ffffff; --z-panel-2: #eef0f5;
  --z-line: rgba(12, 14, 24, .09); --z-line-2: rgba(12, 14, 24, .16);
  --z-fg: #0c0e18; --z-muted: #4f5466; --z-dim: #868b9d;
  color-scheme: light;
}
html[data-z11-theme="light"], html[data-z11-theme="light"] body { background: #f5f6fa !important; }

/* loader: light background, dark pixel logo */
html[data-z11-theme="light"] .page-loader-container, html[data-z11-theme="light"] .page-loader { background: #f5f6fa !important; }
html[data-z11-theme="light"] .page-loader-container img, html[data-z11-theme="light"] .page-loader img { filter: invert(1); }

/* header + phone menu */
html[data-z11-theme="light"] body.z11-v2 .header { background: rgba(255, 255, 255, .92) !important; }
html[data-z11-theme="light"] body.z11-v2.z11-head-compact .header { background: rgba(255, 255, 255, .86) !important; box-shadow: 0 8px 30px rgba(12, 14, 24, .06) !important; }
html[data-z11-theme="light"] body.z11-v2 .mobile-header .hamburger span { background: #0c0e18 !important; }
html[data-z11-theme="light"] body.z11-v2 .mobile-header-menu-container .menu-close::before { color: #0c0e18; }
html[data-z11-theme="light"] body.z11-v2 .mobile-header-menu-container { background: #f5f6fa !important; }

/* pixel logo in header / footer (not the hero) */
html[data-z11-theme="light"] body.z11-v2 .z11-pixel-logo .z11-px, html[data-z11-theme="light"] .z11h-foot .z11-px { fill: #0c0e18; }
html[data-z11-theme="light"] body.z11-v2 .z11-pixel-logo .z11-px-shadow, html[data-z11-theme="light"] .z11h-foot .z11-px-shadow { fill: #c9ccd8; }
html[data-z11-theme="light"] body.z11-v2 .z11-pixel-logo .z11-cursor, html[data-z11-theme="light"] .z11h-foot .z11-cursor { fill: #9a9eae; }

/* main (white) buttons turn black */
html[data-z11-theme="light"] body.z11-v2 .z11-auth .z11-auth-register,
html[data-z11-theme="light"] .z11h-btn--primary,
html[data-z11-theme="light"] .z11-nav-wa,
html[data-z11-theme="light"] .z11-nav-auth a.is-primary,
html[data-z11-theme="light"] body.z11-inner .woocommerce button.button,
html[data-z11-theme="light"] body.z11-inner .woocommerce a.button,
html[data-z11-theme="light"] body.z11-inner .woocommerce input.button { background: #0c0e18 !important; color: #fff !important; border-color: #0c0e18 !important; }
html[data-z11-theme="light"] .z11h-phone__avatar { background: #0c0e18; color: #fff; }
html[data-z11-theme="light"] .z11h-btn:focus-visible, html[data-z11-theme="light"] .z11h-lang:focus-visible, html[data-z11-theme="light"] .z11h-faq summary:focus-visible,
html[data-z11-theme="light"] .z11-nav a:focus-visible, html[data-z11-theme="light"] .z11-nav-actions a:focus-visible { outline-color: #0c0e18; }

/* spectrum-bordered buttons: white inside */
html[data-z11-theme="light"] .z11h-btn--spectrum { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #ff4d4d, #ffad33, #f5ea2b, #3ddc84, #2eaaff, #7b61ff) border-box; }
html[data-z11-theme="light"] .z11h-btn--spectrum:hover { background: linear-gradient(#f0f1f6, #f0f1f6) padding-box, linear-gradient(90deg, #ff4d4d, #ffad33, #f5ea2b, #3ddc84, #2eaaff, #7b61ff) border-box; }
html[data-z11-theme="light"] .z11-nav-admin, html[data-z11-theme="light"] .z11-acct-admin { background: linear-gradient(#fff, #fff) padding-box, var(--z-spectrum) border-box; }
html[data-z11-theme="light"] .z11-nav-admin:hover { background: linear-gradient(#f0f1f6, #f0f1f6) padding-box, var(--z-spectrum) border-box; }

/* cards get a soft shadow instead of glow */
html[data-z11-theme="light"] .z11h-card, html[data-z11-theme="light"] .z11h-step, html[data-z11-theme="light"] .z11h-faq details,
html[data-z11-theme="light"] .z11h-final, html[data-z11-theme="light"] .z11-404-card { box-shadow: 0 1px 2px rgba(12, 14, 24, .04), 0 10px 30px rgba(12, 14, 24, .05); }
html[data-z11-theme="light"] .z11h-phone { background: linear-gradient(180deg, #ffffff, #f8f9fc); box-shadow: 0 30px 70px -30px rgba(12, 14, 24, .25), inset 0 1px 0 #fff; }
html[data-z11-theme="light"] .z11h-final { background: radial-gradient(120% 140% at 0% 0%, rgba(123, 97, 255, .10), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(61, 220, 132, .10), transparent 55%), #fff; }

/* inner pages: account forms */
html[data-z11-theme="light"] body.z11-inner .woocommerce input.input-text, html[data-z11-theme="light"] body.z11-inner .woocommerce input[type="text"],
html[data-z11-theme="light"] body.z11-inner .woocommerce input[type="email"], html[data-z11-theme="light"] body.z11-inner .woocommerce input[type="password"],
html[data-z11-theme="light"] body.z11-inner .woocommerce input[type="tel"], html[data-z11-theme="light"] body.z11-inner .woocommerce textarea,
html[data-z11-theme="light"] body.z11-inner .woocommerce select, html[data-z11-theme="light"] body.z11-inner input.input-text,
html[data-z11-theme="light"] body.z11-inner .input-floating-wrap .floating-placeholder { background: #fff !important; }
html[data-z11-theme="light"] body.z11-inner .woocommerce input:focus { outline-color: rgba(12, 14, 24, .5); }
html[data-z11-theme="light"] .z11-404-path code { background: rgba(12, 14, 24, .04); }
html[data-z11-theme="light"] body.z11-inner .page-title-container { box-shadow: 0 1px 2px rgba(12, 14, 24, .04), 0 10px 30px rgba(12, 14, 24, .05); }

/* the prism hero keeps its night look */
html[data-z11-theme="light"] .page-title-container.z11-hero { background: #05060a !important; }

/* the parent theme paints every heading near-white, so headings need the dark ink here */
html[data-z11-theme="light"] body.z11-v2 :is(h1, h2, h3, h4, h5, h6),
html[data-z11-theme="light"] body.z11-v2 .z11h-faq summary,
html[data-z11-theme="light"] body.z11-v2 .z11h-phone__who b { color: var(--z-fg) !important; }
html[data-z11-theme="light"] body.z11-v2 :is(strong, b) { color: inherit; }
/* inner pages show the pixel logo as an <img> of the white SVG: flip it to black ink */
html[data-z11-theme="light"] img.z11-pixel-logo { filter: invert(1) hue-rotate(180deg); }

/* dark mode (default): the parent theme can paint headings dark grey, so ink them light here too */
html:not([data-z11-theme="light"]) body.z11-v2 :is(h1, h2, h3, h4, h5, h6),
html:not([data-z11-theme="light"]) body.z11-v2 .z11h-faq summary { color: var(--z-fg) !important; }
html:not([data-z11-theme="light"]) body.z11-v2 .z11p .z11p-plan.is-pick h3 { color: #05060a !important; }
html[data-z11-theme="light"] body.z11-v2 .z11p .z11p-plan.is-pick h3 { color: #f4f5f8 !important; }