/* KL Dark Mode — hand-written base. dark-auto.css (generated) handles per-component colours. */

html[data-theme="dark"] {
    color-scheme: dark;
    background: #0d0f13;
}

html[data-theme="dark"] body {
    background: #0d0f13 !important;
    color: #d6dbe3;
}

/* Smooth switch only while toggling, never on page load */
html.kl-theme-anim,
html.kl-theme-anim *,
html.kl-theme-anim *::before,
html.kl-theme-anim *::after {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease !important;
}

/* ---- Toggle button (sits in the header next to the account icon) ---- */
.kl-theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .kl-theme-toggle .fa-sun { display: inline-block; color: #ffd166; }
html[data-theme="dark"] .kl-theme-toggle .fa-moon { display: none; }
.kl-theme-toggle i { font-size: 17px; }

/* Form fields: native widgets follow color-scheme, text must stay readable */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #161a21;
    color: #e8ebf0;
    border-color: #2c323c;
}

html[data-theme="dark"] ::placeholder { color: #7d8693; }

/* Product images are shot on white — soften them slightly so they don't glare */
html[data-theme="dark"] .woocommerce img,
html[data-theme="dark"] .kl-product-card img {
    filter: brightness(.94);
}

/* ---- Inline-styled storefront bits (style="" attributes beat stylesheets without !important) ---- */
html[data-theme="dark"] .kl-ty-cid {
    background: #0f2622 !important;
    border-color: #1c4a41 !important;
}
html[data-theme="dark"] .kl-ty-cid > div { color: #b5bac0 !important; }
html[data-theme="dark"] .kl-ty-cid a { color: #2fe0bb !important; }

/* Safety net for other inline light surfaces / dark text inside page content */
html[data-theme="dark"] #page [style*="background:#fff"],
html[data-theme="dark"] #page [style*="background: #fff"],
html[data-theme="dark"] #page [style*="background-color:#fff"],
html[data-theme="dark"] #page [style*="background-color: #fff"],
html[data-theme="dark"] #page [style*="background:#f8f9fa"],
html[data-theme="dark"] #page [style*="background:#f0f0f0"],
html[data-theme="dark"] #page [style*="background:#f0f4ff"] {
    background: #1e2127 !important;
}
html[data-theme="dark"] #page [style*="color:#0a0a0a"],
html[data-theme="dark"] #page [style*="color: #0a0a0a"],
html[data-theme="dark"] #page [style*="color:#333"],
html[data-theme="dark"] #page [style*="color: #333"],
html[data-theme="dark"] #page [style*="color:#555"],
html[data-theme="dark"] #page [style*="color: #555"],
html[data-theme="dark"] #page [style*="color: #191919"],
html[data-theme="dark"] #page [style*="color:#191919"] {
    color: #c9ced6 !important;
}
html[data-theme="dark"] #page [style*="color:#6b7280"],
html[data-theme="dark"] #page [style*="color:#888"],
html[data-theme="dark"] #page [style*="color: #888"] {
    color: #9aa2ad !important;
}

html[data-theme="dark"] #page [style*="border: 1px solid #dcdce6"] { border-color: #343942 !important; }

/* ---- Theme menu (Light / Dark / Automatic) ---- */
.kl-theme-toggle { position: relative; }
.kl-theme-toggle.kl-theme-is-auto::after {
    content: ""; position: absolute; right: 9px; bottom: 9px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #00d4aa !important; box-shadow: 0 0 0 2px var(--kl-header-bg, #fff) !important;
}
html[data-theme="dark"] .kl-theme-toggle.kl-theme-is-auto::after { box-shadow: 0 0 0 2px #1b1b1b !important; }

.kl-theme-menu {
    position: absolute; z-index: 100000; min-width: 210px; padding: 6px;
    background: #fff !important; border: 1px solid #ececec !important; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important;
    font-family: 'Outfit', sans-serif;
}
.kl-theme-menu[hidden] { display: none !important; }
.kl-theme-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 0 !important; box-shadow: none !important; text-transform: none; letter-spacing: 0; border-radius: 8px; background: transparent !important;
    color: #0a0a0a !important; font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.kl-theme-menu button:hover { background: #f4f4f5 !important; }
.kl-theme-menu button i { width: 18px; text-align: center; font-size: 15px; color: #6c757d !important; }
.kl-theme-menu button span { display: flex; flex-direction: column; line-height: 1.25; }
.kl-theme-menu button small { font-size: 11.5px; font-weight: 400; color: #8a8f98 !important; margin-top: 2px; }
.kl-theme-menu button[aria-checked="true"] { background: rgba(0, 212, 170, .12) !important; }
.kl-theme-menu button[aria-checked="true"] i { color: #00a383 !important; }

html[data-theme="dark"] .kl-theme-menu { background: #1e2127 !important; border-color: #2e333c !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .5) !important; }
html[data-theme="dark"] .kl-theme-menu button { color: #e8ebf0 !important; }
html[data-theme="dark"] .kl-theme-menu button:hover { background: #272b33 !important; }
html[data-theme="dark"] .kl-theme-menu button i { color: #9aa2ad !important; }
html[data-theme="dark"] .kl-theme-menu button small { color: #8b93a0 !important; }
html[data-theme="dark"] .kl-theme-menu button[aria-checked="true"] { background: rgba(0, 212, 170, .16) !important; }
html[data-theme="dark"] .kl-theme-menu button[aria-checked="true"] i { color: #2fe0bb !important; }