/**
 * EVK WoodMart Dark Mode
 * Al-Najah Chemical Industries — najahchem.com.jo
 * Built 100% from the Computed-CSS inspection report.
 * Strategy: override WoodMart CSS custom properties first, then patch hard-coded colors.
 * Scope: html.evk-dark  (added pre-paint by the no-FOUC script)
 * ------------------------------------------------------------------------- */

/* =========================================================================
   0. DARK PALETTE (single source of truth)
   Light  →  Dark  (per report §11 conversion map, tuned for contrast)
   ========================================================================= */
html.evk-dark {
	--evk-bg:            #121417; /* body            #ffffff */
	--evk-bg-2:         #1a1d21; /* alt surface               */
	--evk-card:         #22262b; /* product card    #fafafa */
	--evk-card-blue:    #1f2a3d; /* light cards     #d6e0f0 */
	--evk-search:       #24282e; /* header search   #f5f5f5 */
	--evk-btn-default:  #2a2f36; /* .btn default    #f3f3f3 */
	--evk-footer:       #0e1622; /* footer background (admin-controllable) */

	--evk-primary:      #7fa2d6; /* accent (text/links/borders) — brightened for WCAG AA */
	--evk-primary-hi:   #9db9e4; /* hover / bright accent                     */
	--evk-primary-btn:  #33507e; /* primary BUTTON bg (kept blue, lifted)     */
	--evk-title:        #ffffff; /* headings → WHITE (client preference)      */
	--evk-title-hover:  #d7dee9; /* heading link hover                        */

	--evk-text:         #e4e7ec; /* body text       #1b2b3b */
	--evk-text-muted:   #c7ccd4; /* desc text       #595959 */
	--evk-text-dim:     #8b929c; /* category        #a5a5a5 */

	--evk-border:       rgba(255,255,255,0.12);
	--evk-border-strong:rgba(255,255,255,0.22);
	--evk-shadow:       rgba(0,0,0,0.55);

	/* ---- Override WoodMart native tokens (biggest win) ---- */
	--wd-primary-color:            var(--evk-primary);
	--wd-title-color:              var(--evk-title);
	--wd-entities-title-color:     var(--evk-title);
	--wd-text-color:               var(--evk-text-muted);
	--wd-link-color:               var(--evk-primary);
	--wd-link-color-hover:         var(--evk-primary-hi);
	--wd-form-brd-color:           var(--evk-border-strong);
	--wd-form-brd-color-focus:     var(--evk-primary);
	--wd-avatar-brd-color:         var(--evk-border);
	--btns-default-bgcolor:        var(--evk-btn-default);
	--btns-default-color:          var(--evk-text);
	--btns-default-bgcolor-hover:  #363c44;
	--btns-default-color-hover:    #ffffff;
}

/* =========================================================================
   0.5  ELEMENTOR INLINE-STYLE OVERRIDES  (highest-impact fix)
   Elementor injects style="background:#d6e0f0" and style="color:#2a4269"
   inline, which beats variable/class rules. We target those inline values
   directly and also blanket-convert light containers + their text.
   ========================================================================= */

/* Light-blue info cards (#d6e0f0 in any rgb/hex spelling) */
html.evk-dark [style*="#d6e0f0"],
html.evk-dark [style*="#D6E0F0"],
html.evk-dark [style*="214, 224, 240"],
html.evk-dark [style*="214,224,240"] {
	background-color: var(--evk-card-blue) !important;
	background-image: none !important;
}

/* -------------------------------------------------------------------------
   SURFACE PASS (JS-tagged): Elementor paints many cards light via GLOBAL CSS
   (post-XXX.css → .elementor-element-abc{background:#d6e0f0}), NOT inline. We
   cannot match those values in CSS, so dark-mode.js reads each element's
   light-mode background and stamps data-evk-surface="blue|white". These rules
   then recolor precisely — no layout wrapper is touched, no guessing.
   ------------------------------------------------------------------------- */
html.evk-dark [data-evk-surface="blue"],
html.evk-dark .elementor-element[data-evk-surface="blue"],
html.evk-dark .e-con[data-evk-surface="blue"] {
	background: #1f2a3d !important;
	background-color: #1f2a3d !important;
	background-image: none !important;
}
html.evk-dark [data-evk-surface="white"],
html.evk-dark .elementor-element[data-evk-surface="white"],
html.evk-dark .e-con[data-evk-surface="white"] {
	background: #22262b !important;
	background-color: #22262b !important;
	background-image: none !important;
}

html.evk-dark [data-evk-surface] p,
html.evk-dark [data-evk-surface] span,
html.evk-dark [data-evk-surface] li,
html.evk-dark [data-evk-surface] > div:not([data-evk-surface]) {
	color: var(--evk-text) !important;
}
html.evk-dark [data-evk-surface] h1,
html.evk-dark [data-evk-surface] h2,
html.evk-dark [data-evk-surface] h3,
html.evk-dark [data-evk-surface] h4,
html.evk-dark [data-evk-surface] h5,
html.evk-dark [data-evk-surface] h6 {
	color: var(--evk-title) !important;
}

/* Keep the inline-value overrides too (covers cards that ARE inline-styled) */
html.evk-dark [style*="#d6e0f0"] *,
html.evk-dark [style*="214, 224, 240"] * { color: var(--evk-text) !important; }
html.evk-dark [style*="#d6e0f0"] h1, html.evk-dark [style*="#d6e0f0"] h2,
html.evk-dark [style*="#d6e0f0"] h3, html.evk-dark [style*="#d6e0f0"] h4,
html.evk-dark [style*="214, 224, 240"] h1, html.evk-dark [style*="214, 224, 240"] h2,
html.evk-dark [style*="214, 224, 240"] h3, html.evk-dark [style*="214, 224, 240"] h4 {
	color: var(--evk-title) !important;
}

/* Hard-coded dark-blue headings/text set inline (#2a4269) — lift to light */
html.evk-dark [style*="#2a4269"],
html.evk-dark [style*="42, 66, 105"],
html.evk-dark [style*="42,66,105"] {
	color: var(--evk-text) !important;
}
/* but if #2a4269 was a BACKGROUND (buttons/CTA), keep it as a button surface */
html.evk-dark [style*="background"][style*="#2a4269"],
html.evk-dark [style*="background"][style*="42, 66, 105"] {
	background-color: var(--evk-primary-btn) !important;
	color: #fff !important;
}

/* Hard-coded green titles set inline (#08382f) — lift to teal */
html.evk-dark [style*="#08382f"],
html.evk-dark [style*="8, 56, 47"],
html.evk-dark [style*="8,56,47"] {
	color: var(--evk-title) !important;
}

/* Catch-all: any heading/text still rendering in the dark-blue brand color
   (#2a4269) — whether set inline OR via Elementor global CSS — becomes light.
   Handled by JS too (surfacePass reads computed color), but this covers the
   common heading case without JS. Buttons/CTA keep their bg via section 3. */
html.evk-dark [data-evk-recolor="title"] { color: var(--evk-title) !important; }
html.evk-dark [data-evk-recolor="text"]  { color: var(--evk-text)  !important; }

/* Generic: any element with inline WHITE background inside content → transparent
   so the page-dark surface shows through (fixes leftover white sections) */
html.evk-dark .wd-page-content [style*="#ffffff"],
html.evk-dark .wd-page-content [style*="#fff;"],
html.evk-dark .wd-page-content [style*="255, 255, 255"] {
	background-color: transparent !important;
}

/* Timeline columns (About page) painted white via class */
html.evk-dark .timeline-col,
html.evk-dark .timeline-col-primary,
html.evk-dark .timeline-col-secondary {
	background-color: var(--evk-card) !important;
	color: var(--evk-text) !important;
}
html.evk-dark .timeline-col * { color: var(--evk-text) !important; }
html.evk-dark .timeline-col h1,
html.evk-dark .timeline-col h2,
html.evk-dark .timeline-col h3,
html.evk-dark .timeline-col h4 { color: var(--evk-title) !important; }

/* Cart drawer (right side) */
html.evk-dark .cart-widget-side,
html.evk-dark .wd-cart-drawer,
html.evk-dark .widget_shopping_cart_content { background-color: var(--evk-bg-2) !important; }

/* =========================================================================
   0.6  BACKGROUND OVERLAYS & PHOTO SECTIONS
   Elementor sections use .elementor-background-overlay with light
   radial/linear GRADIENTS (e.g. Company Overview, Regional Coverage,
   Partnership Application). These aren't backgroundColor so the surface
   pass can't catch them. dark-mode.js tags them data-evk-overlay="light".
   Photo (url) backgrounds are tagged data-evk-overlay="photo" and LEFT ALONE.
   ========================================================================= */
html.evk-dark [data-evk-overlay="light"] > .elementor-background-overlay,
html.evk-dark .elementor-background-overlay[data-evk-overlay="light"] {
	background-image: none !important;
	background-color: var(--evk-bg) !important;
	opacity: 1 !important;
}
/* Text inside a section that had a light overlay must be readable */
html.evk-dark [data-evk-overlay="light"] p,
html.evk-dark [data-evk-overlay="light"] span,
html.evk-dark [data-evk-overlay="light"] li {
	color: var(--evk-text) !important;
}
html.evk-dark [data-evk-overlay="light"] h1,
html.evk-dark [data-evk-overlay="light"] h2,
html.evk-dark [data-evk-overlay="light"] h3,
html.evk-dark [data-evk-overlay="light"] h4 {
	color: #ffffff !important;
}
/* PHOTO background sections (What We Do etc.) — DO NOT touch the image.
   Just make sure text stays light. This is the single intentional exception. */
html.evk-dark [data-evk-overlay="photo"] { background-color: transparent !important; }

/* Light gradient painted on a ::before / ::after pseudo-element (the real cause
   of "stubborn" light sections like Our Global Reach / Company Overview — the
   gradient is a radial light-blue on the section's ::before, invisible to normal
   background scans). JS tags these data-evk-pseudo="light"; we kill the paint. */
html.evk-dark [data-evk-pseudo="light"]::before,
html.evk-dark [data-evk-pseudo="light"]::after {
	background-image: none !important;
	background-color: var(--evk-bg) !important;
	opacity: 1 !important;
}
html.evk-dark [data-evk-pseudo="light"] p,
html.evk-dark [data-evk-pseudo="light"] span,
html.evk-dark [data-evk-pseudo="light"] li {
	color: var(--evk-text) !important;
}
html.evk-dark [data-evk-pseudo="light"] h1,
html.evk-dark [data-evk-pseudo="light"] h2,
html.evk-dark [data-evk-pseudo="light"] h3,
html.evk-dark [data-evk-pseudo="light"] h4 {
	color: var(--evk-title) !important;
}
/* Manual class also clears its pseudo overlays */
html.evk-dark .evk-force-dark::before,
html.evk-dark .evk-force-dark::after {
	background-image: none !important;
	background-color: var(--evk-bg) !important;
	opacity: 1 !important;
}

/* Manual escape hatches (add these classes in Elementor if ever needed):
   .evk-keep-photo  → force-preserve a photo/background on this section
   .evk-force-dark  → force a stubborn light section to the dark surface     */
html.evk-dark .evk-keep-photo,
html.evk-dark .evk-keep-photo > .elementor-background-overlay {
	background-color: transparent !important;
	background-image: unset !important;
	filter: none !important;
}
html.evk-dark .evk-force-dark,
html.evk-dark .evk-force-dark > .elementor-background-overlay {
	background-color: var(--evk-bg) !important;
	background-image: none !important;
	opacity: 1 !important;
}
html.evk-dark .evk-force-dark * { color: var(--evk-text) !important; }
html.evk-dark .evk-force-dark h1,
html.evk-dark .evk-force-dark h2,
html.evk-dark .evk-force-dark h3,
html.evk-dark .evk-force-dark h4 { color: #ffffff !important; }


html.evk-dark,
html.evk-dark body,
html.evk-dark #wrapper,
html.evk-dark .website-wrapper,
html.evk-dark .wd-page-content,
html.evk-dark .main-page-wrapper,
html.evk-dark .content-area,
html.evk-dark #main-page-wrapper,
html.evk-dark .site-content {
	background-color: var(--evk-bg) !important;
	color: var(--evk-text) !important;
}
/* NOTE: .container / .row are intentionally NOT filled here — they wrap hero /
   page-title photo sections; filling them paints a black bar over the image.
   The page background comes from the wrappers above instead. */
html.evk-dark .wd-page-title .container,
html.evk-dark .page-title .container {
	background-color: transparent !important;
}

/* WoodMart paints white on the page-content wrapper (not body) — kill any
   remaining near-white section/container backgrounds so text stays readable */
html.evk-dark section[style*="fff"],
html.evk-dark .elementor-section[style*="fff"],
html.evk-dark .elementor-section:not([style*="background"]) > .elementor-container {
	background-color: transparent !important;
}
html.evk-dark .mobile-nav,
html.evk-dark .wd-side-hidden,
html.evk-dark .wd-side-hidden-nav,
html.evk-dark .wd-close-side,
html.evk-dark .wd-close-side-widget,
html.evk-dark .cart-widget-side,
html.evk-dark .wd-cart-drawer,
html.evk-dark .widget_shopping_cart_content {
	background-color: var(--evk-bg-2) !important;
	color: var(--evk-text) !important;
}
html.evk-dark .mobile-nav a,
html.evk-dark .mobile-nav *,
html.evk-dark .wd-side-hidden a,
html.evk-dark .wd-side-hidden .nav-link-text,
html.evk-dark .cart-widget-side * {
	color: var(--evk-text) !important;
}
html.evk-dark .cart-widget-side [style*="f7f7f7"],
html.evk-dark .cart-widget-side [style*="247, 247, 247"],
html.evk-dark .cart-widget-side .cart_list {
	background-color: var(--evk-card) !important;
}

/* Page title hero: keep its OWN background image (building photo) — do NOT
   paint a dark bar over it. Only ensure the heading + breadcrumb text is white. */
html.evk-dark .wd-page-title,
html.evk-dark .page-title,
html.evk-dark .title-wrapper {
	background-color: transparent !important;
}
html.evk-dark .wd-page-title .title,
html.evk-dark .wd-page-title h1,
html.evk-dark .page-title h1,
html.evk-dark .page-title .title {
	color: #ffffff !important;
}
html.evk-dark .wd-page-title .breadcrumbs a,
html.evk-dark .breadcrumbs a,
html.evk-dark .breadcrumbs {
	color: rgba(255,255,255,0.85) !important;
}

html.evk-dark p,
html.evk-dark li,
html.evk-dark span,
html.evk-dark td,
html.evk-dark dd,
html.evk-dark .wd-entities-list,
html.evk-dark .elementor-widget-text-editor,
html.evk-dark .elementor-widget-container {
	color: var(--evk-text);
}

/* Smooth toggle */
html.evk-dark body,
html.evk-dark .whb-header,
html.evk-dark .wd-header-inner,
html.evk-dark .product-grid-item,
html.evk-dark .btn,
html.evk-dark input,
html.evk-dark textarea,
html.evk-dark select {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* =========================================================================
   2. TYPOGRAPHY — titles / headings / links
   ========================================================================= */
html.evk-dark h1,
html.evk-dark h2,
html.evk-dark h3,
html.evk-dark h4,
html.evk-dark h5,
html.evk-dark h6,
html.evk-dark .elementor-heading-title,
html.evk-dark .woodmart-title-container,
html.evk-dark .woodmart-title-container .title-text,
html.evk-dark .wd-title-text,
html.evk-dark .section-title,
html.evk-dark .title.wd-fontsize-l {
	color: var(--evk-title);
}

/* Elementor headings that were dark-blue primary rather than green */
html.evk-dark .elementor-heading-title[style*="2a4269"],
html.evk-dark .wd-sub-heading {
	color: var(--evk-text) !important;
}

html.evk-dark a {
	color: var(--evk-primary);
}
html.evk-dark a:hover {
	color: var(--evk-primary-hi);
}

/* Product / entity titles (archive + single) */
html.evk-dark .product-grid-item .wd-entities-title,
html.evk-dark .product_title.entry-title,
html.evk-dark .wd-entities-title a {
	color: var(--evk-title) !important;
}
html.evk-dark .product-grid-item .wd-entities-title a:hover {
	color: var(--evk-title-hover) !important;
}

/* Category subtitle under product / meta */
html.evk-dark .wd-product-cats,
html.evk-dark .wd-product-cats a,
html.evk-dark .post-meta-date,
html.evk-dark .meta-post-categories,
html.evk-dark .category-text {
	color: var(--evk-text-dim) !important;
}

/* =========================================================================
   3. BUTTONS
   ========================================================================= */

/* Primary / Add-To-Quote / Elementor primary */
html.evk-dark .btn.btn-color-primary,
html.evk-dark .single_add_to_cart_button,
html.evk-dark .add_to_cart_button,
html.evk-dark .wd-buy-now-btn,
html.evk-dark button.alt,
html.evk-dark .elementor-button:not(.elementor-button-link),
html.evk-dark input[type="submit"] {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
	border-color: var(--evk-primary-btn) !important;
}
html.evk-dark .btn.btn-color-primary:hover,
html.evk-dark .single_add_to_cart_button:hover,
html.evk-dark .add_to_cart_button:hover,
html.evk-dark .elementor-button:not(.elementor-button-link):hover,
html.evk-dark input[type="submit"]:hover {
	background-color: #3e5f92 !important;
	color: #ffffff !important;
}

/* Default grey button */
html.evk-dark .btn.btn-style-default,
html.evk-dark .btn-default,
html.evk-dark button.button.wc-backward {
	background-color: var(--evk-btn-default) !important;
	color: var(--evk-text) !important;
	border-color: var(--evk-border) !important;
}
html.evk-dark .btn.btn-style-default:hover,
html.evk-dark .btn-default:hover {
	background-color: #363c44 !important;
	color: #ffffff !important;
}

/* Outline (Contact Us) */
html.evk-dark .btn-style-bordered,
html.evk-dark .btn.btn-color-primary.btn-style-bordered {
	background-color: transparent !important;
	color: var(--evk-primary-hi) !important;
	border-color: var(--evk-primary) !important;
}
html.evk-dark .btn-style-bordered:hover {
	background-color: var(--evk-primary) !important;
	color: #ffffff !important;
}

/* Inverse button (white on dark bg — Join Us) — keep readable */
html.evk-dark .btn-color-white,
html.evk-dark .elementor-button.evk-inverse {
	background-color: #eef2f8 !important;
	color: #1f2a3d !important;
}

/* =========================================================================
   4. FORMS — WPForms + WooCommerce inputs
   ========================================================================= */
html.evk-dark input[type="text"],
html.evk-dark input[type="email"],
html.evk-dark input[type="tel"],
html.evk-dark input[type="url"],
html.evk-dark input[type="number"],
html.evk-dark input[type="search"],
html.evk-dark input[type="password"],
html.evk-dark textarea,
html.evk-dark select,
html.evk-dark .wpforms-field input,
html.evk-dark .wpforms-field textarea,
html.evk-dark .wpforms-field select {
	background-color: var(--evk-card) !important;
	color: rgba(255,255,255,0.9) !important;
	border-color: var(--evk-border-strong) !important;
}
html.evk-dark input::placeholder,
html.evk-dark textarea::placeholder,
html.evk-dark .wpforms-field input::placeholder {
	color: rgba(255,255,255,0.45) !important;
}
html.evk-dark input:focus,
html.evk-dark textarea:focus,
html.evk-dark select:focus,
html.evk-dark .wpforms-field input:focus {
	border-color: var(--evk-primary) !important;
	box-shadow: 0 0 0 1px var(--evk-primary) inset !important;
	outline: none !important;
}
/* Labels */
html.evk-dark label,
html.evk-dark .wpforms-field-label,
html.evk-dark .wd-field-label {
	color: rgba(255,255,255,0.88) !important;
}
/* WPForms submit */
html.evk-dark .wpforms-submit,
html.evk-dark .wpforms-form button[type="submit"] {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
}
html.evk-dark .wpforms-submit:hover {
	background-color: #3e5f92 !important;
}
/* Search field in header */
html.evk-dark .wd-search-inited .searchform,
html.evk-dark .searchform input.s,
html.evk-dark form.searchform input {
	background-color: var(--evk-search) !important;
	color: var(--evk-text) !important;
	border-color: var(--evk-border) !important;
}

/* Choices.js dropdown (WPForms modern select — Inquiry Type) */
html.evk-dark .choices,
html.evk-dark .choices__inner,
html.evk-dark .choices__list,
html.evk-dark .choices__list--dropdown,
html.evk-dark .choices__list--dropdown.is-active,
html.evk-dark .choices__list--single,
html.evk-dark div.choices__list--dropdown,
html.evk-dark .choices[data-type*="select-one"] .choices__inner,
html.evk-dark .choices[data-type*="select-one"] .choices__list--dropdown {
	background-color: var(--evk-card) !important;
	color: rgba(255,255,255,0.9) !important;
	border-color: var(--evk-border-strong) !important;
}
html.evk-dark .choices__list--dropdown .choices__item,
html.evk-dark .choices__item {
	color: rgba(255,255,255,0.9) !important;
	background-color: transparent !important;
}
html.evk-dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.evk-dark .choices__list--dropdown .choices__item.is-highlighted {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
}
html.evk-dark .choices__placeholder { color: rgba(255,255,255,0.45) !important; }
html.evk-dark .choices[data-type*="select-one"] .choices__inner::after {
	border-color: rgba(255,255,255,0.6) transparent transparent !important;
}
/* Native selects as fallback */
html.evk-dark select option {
	background-color: var(--evk-card) !important;
	color: rgba(255,255,255,0.9) !important;
}
/* Beat WPForms' own specificity (div.wpforms-container .wpforms-form ...) */
html.evk-dark div.wpforms-container .wpforms-form .choices__list--dropdown,
html.evk-dark div.wpforms-container .wpforms-form .choices__list--dropdown .choices__item,
html.evk-dark div.wpforms-container .wpforms-form .choices__inner {
	background-color: var(--evk-card) !important;
	color: rgba(255,255,255,0.9) !important;
}
html.evk-dark div.wpforms-container .wpforms-form .choices__list--dropdown .choices__item.is-highlighted {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
}

/* Dark hard-coded labels inside info/contact cards (Phone:/Email: were #333) */
html.evk-dark [data-evk-surface] strong,
html.evk-dark [data-evk-surface] b,
html.evk-dark [data-evk-overlay] strong,
html.evk-dark .wd-info-box strong,
html.evk-dark .wd-info-box b,
html.evk-dark .wd-info-box span,
html.evk-dark .wd-info-box p,
html.evk-dark .wd-info-box li,
html.evk-dark [style*="#2a4269"] strong,
html.evk-dark [style*="214, 224, 240"] strong,
html.evk-dark [style*="214, 224, 240"] span {
	color: var(--evk-text) !important;
}
/* Info-box itself → dark card */
html.evk-dark .wd-info-box {
	background-color: var(--evk-card-blue) !important;
}

/* =========================================================================
   5. CARDS & SECTIONS
   ========================================================================= */

/* Product card inner */
html.evk-dark .product-grid-item,
html.evk-dark .wd-product .product-wrapper {
	background-color: var(--evk-card) !important;
	border-color: var(--evk-border) !important;
	box-shadow: none !important;
}

/* Light info cards (Vision / Mission / Why-Choose-Us  #d6e0f0) */
html.evk-dark .elementor-element[style*="d6e0f0"],
html.evk-dark [style*="rgb(214, 224, 240)"],
html.evk-dark .evk-light-card,
html.evk-dark .wd-info-box {
	background-color: var(--evk-card-blue) !important;
	color: var(--evk-text) !important;
	border-color: var(--evk-border) !important;
}

/* Blog cards */
html.evk-dark .blog-post-loop .article-inner,
html.evk-dark article.post .article-body,
html.evk-dark .wd-blog-post,
html.evk-dark .wd-post-inner,
html.evk-dark .wd-post-inner.article-inner,
html.evk-dark .wd-post-content,
html.evk-dark .article-body-container,
html.evk-dark .wd-post .article-body {
	background-color: var(--evk-card) !important;
	box-shadow: 0 6px 20px var(--evk-shadow) !important;
}
html.evk-dark .wd-post-content,
html.evk-dark .article-body-container {
	box-shadow: none !important;
}
html.evk-dark .blog-post-loop .entry-title,
html.evk-dark .wd-blog-post .entry-title,
html.evk-dark .wd-post .entry-title,
html.evk-dark .wd-post .entry-title a {
	color: var(--evk-title) !important;
}
/* Blog card excerpt / meta text that renders too dim on the dark card */
html.evk-dark .wd-post-content p,
html.evk-dark .wd-post-content .excerpt,
html.evk-dark .article-body-container p {
	color: var(--evk-text-muted) !important;
}
html.evk-dark .wd-post .post-meta,
html.evk-dark .wd-post .post-meta a,
html.evk-dark .wd-post .read-more-btn {
	color: var(--evk-primary-hi) !important;
}

/* Category badge (DECORATION…) */
html.evk-dark .category-badge,
html.evk-dark .labels .onsale,
html.evk-dark .wd-cats-label {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
}

/* WoodMart post category badge (.wd-post-cat). Its text uses
   -webkit-text-fill-color which OVERRIDES `color`, so we must set BOTH.
   Badge bg was the same color as its text → set a readable accent bg + white. */
html.evk-dark .wd-post-cat.wd-style-with-bg,
html.evk-dark .meta-post-categories.wd-style-with-bg,
html.evk-dark .wd-post-cat.wd-style-with-bg a,
html.evk-dark .meta-post-categories a {
	background-color: var(--evk-primary-btn) !important;
}
html.evk-dark .wd-post-cat.wd-style-with-bg a,
html.evk-dark .meta-post-categories a,
html.evk-dark .wd-post-cat a {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Testimonials (boxed style) — inner card is painted #fff */
html.evk-dark .testimonial-inner,
html.evk-dark .testimon-style-boxed .testimonial-inner,
html.evk-dark .wd-testimonial-inner {
	background-color: var(--evk-card) !important;
	border-color: var(--evk-border) !important;
	box-shadow: 0 6px 20px var(--evk-shadow) !important;
}
html.evk-dark .testimonial-inner,
html.evk-dark .testimonial-inner p,
html.evk-dark .testimonial-inner .testimonial-text,
html.evk-dark .testimonial-inner span {
	color: var(--evk-text) !important;
}
html.evk-dark .testimonial-inner .testimonial-name,
html.evk-dark .testimonial-inner .testimonial-company,
html.evk-dark .testimonial-inner cite,
html.evk-dark .testimonial-inner strong {
	color: var(--evk-title) !important;
}
/* Testimonial star rating stays visible */
html.evk-dark .testimonial-inner .wd-star-rating,
html.evk-dark .testimonial-inner .star-rating {
	color: var(--evk-primary-hi) !important;
}

/* Tabs — active / inactive */
html.evk-dark .wd-nav-tabs li.active > a,
html.evk-dark .elementor-tab-title.elementor-active,
html.evk-dark .e-n-tab-title[aria-selected="true"],
html.evk-dark .e-n-tab-title.e-active {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
}
html.evk-dark .wd-nav-tabs li > a,
html.evk-dark .elementor-tab-title,
html.evk-dark .e-n-tab-title {
	background-color: var(--evk-btn-default) !important;
	color: var(--evk-text) !important;
}
html.evk-dark .e-n-tabs-heading { background-color: transparent !important; }

/* Accordions (single product tabs) */
html.evk-dark .wc-tabs li a,
html.evk-dark .woocommerce-tabs .panel {
	color: var(--evk-text-muted) !important;
	border-color: var(--evk-border) !important;
}

/* Custom spec/ingredient tables (.vcf-specs-table — SDS/TDS on single product).
   Light cells #f5f8ff with dark-blue text → dark cells with light text. */
html.evk-dark .vcf-specs-table,
html.evk-dark table.vcf-specs-table {
	background-color: var(--evk-card) !important;
	border-color: var(--evk-border) !important;
}
html.evk-dark .vcf-specs-table td,
html.evk-dark .vcf-specs-table th {
	background-color: var(--evk-card) !important;
	color: var(--evk-text) !important;
	border-color: var(--evk-border) !important;
}
/* Zebra striping: alternate rows a touch lighter for readability */
html.evk-dark .vcf-specs-table tr:nth-child(even) td,
html.evk-dark .vcf-specs-table tbody tr:nth-child(even) td {
	background-color: #1c2025 !important;
}
html.evk-dark .vcf-specs-table tr:nth-child(odd) td {
	background-color: var(--evk-card) !important;
}
/* Header row + row-label column stay accent-dark */
html.evk-dark .vcf-specs-table thead th,
html.evk-dark .vcf-specs-table thead td,
html.evk-dark .vcf-specs-table tr:first-child th,
html.evk-dark .vcf-specs-table .vcf-row-label,
html.evk-dark .vcf-specs-table td:first-child {
	background-color: var(--evk-primary-btn) !important;
	color: #ffffff !important;
}

/* =========================================================================
   6. HEADER / NAV / FOOTER
   ========================================================================= */
html.evk-dark .whb-header,
html.evk-dark .whb-general-header,
html.evk-dark .whb-general-header-inner,
html.evk-dark .whb-row,
html.evk-dark .whb-top-bar,
html.evk-dark .whb-main-header,
html.evk-dark .whb-general-header .whb-column,
html.evk-dark .wd-header-inner,
html.evk-dark .wd-header-nav {
	background-color: var(--evk-bg-2) !important;
}
html.evk-dark .whb-general-header a,
html.evk-dark .wd-header-nav a,
html.evk-dark .woodmart-nav-link,
html.evk-dark .nav-link-text,
html.evk-dark .whb-header .wd-nav > li > a,
html.evk-dark .main-nav > li > a {
	color: var(--evk-text) !important;
}
html.evk-dark .whb-header .wd-nav > li.current-menu-item > a,
html.evk-dark .whb-general-header a:hover,
html.evk-dark .woodmart-nav-link:hover,
html.evk-dark .whb-header .wd-nav > li > a:hover {
	color: var(--evk-primary-hi) !important;
}
/* Dropdown submenu */
html.evk-dark .wd-dropdown-menu,
html.evk-dark ul.sub-menu {
	background-color: var(--evk-bg-2) !important;
	border-color: var(--evk-border) !important;
}
html.evk-dark .wd-dropdown-menu a {
	color: var(--evk-text-muted) !important;
}
html.evk-dark .wd-dropdown-menu a:hover {
	color: var(--evk-primary-hi) !important;
	background-color: rgba(255,255,255,0.04) !important;
}

/* Footer (was primary blue — deepen so it isn't brighter than body).
   Links must be WHITE-ish, not the blue accent (blue-on-blue failed at 3.9). */
html.evk-dark .footer-container,
html.evk-dark .wd-footer-container,
html.evk-dark .wd-footer,
html.evk-dark [data-elementor-type="footer"],
html.evk-dark [class*="footer"][style*="2a4269"] {
	background-color: var(--evk-footer) !important;
}
html.evk-dark .footer-container .widget-title,
html.evk-dark .wd-footer-container h1,
html.evk-dark .wd-footer-container h2,
html.evk-dark .wd-footer-container h3,
html.evk-dark [data-elementor-type="footer"] h1,
html.evk-dark [data-elementor-type="footer"] h2,
html.evk-dark [data-elementor-type="footer"] h3 {
	color: #ffffff !important;
}
html.evk-dark .footer-container a,
html.evk-dark .wd-footer-container a,
html.evk-dark .wd-footer a,
html.evk-dark [data-elementor-type="footer"] a {
	color: rgba(255,255,255,0.82) !important;
}
html.evk-dark .footer-container a:hover,
html.evk-dark .wd-footer-container a:hover,
html.evk-dark [data-elementor-type="footer"] a:hover {
	color: #ffffff !important;
}
/* Skip-content / breadcrumb button strip */
html.evk-dark .wd-skip-content { background-color: var(--evk-card) !important; }
html.evk-dark .wd-skip-content a { color: var(--evk-primary-hi) !important; }

/* CTA section (blue rounded block) */
html.evk-dark .evk-cta,
html.evk-dark [class*="cta"][style*="2a4269"],
html.evk-dark .wd-cta-section {
	background-color: var(--evk-card-blue) !important;
	color: var(--evk-text) !important;
}

/* =========================================================================
   7. BORDERS / DIVIDERS / MISC
   ========================================================================= */
html.evk-dark hr,
html.evk-dark .elementor-divider-separator,
html.evk-dark .wd-scroll-content,
html.evk-dark table,
html.evk-dark th,
html.evk-dark td {
	border-color: var(--evk-border) !important;
}
html.evk-dark ::selection {
	background: var(--evk-primary);
	color: #fff;
}
/* Scrollbar */
html.evk-dark ::-webkit-scrollbar { width: 12px; height: 12px; }
html.evk-dark ::-webkit-scrollbar-track { background: var(--evk-bg); }
html.evk-dark ::-webkit-scrollbar-thumb { background: #333a43; border-radius: 8px; }
html.evk-dark ::-webkit-scrollbar-thumb:hover { background: #444c57; }

/* Keep logos / photos from glowing on dark — light dim only on white PNG logos */
html.evk-dark img.evk-dim-on-dark {
	filter: brightness(.92);
}

/* =========================================================================
   8. FLOATING TOGGLE (FAB) + inline toggle
   ========================================================================= */
.evk-dm-fab {
	position: fixed;
	z-index: 99990;
}
.evk-dm-fab--bottom-left  { bottom: 24px; left: 24px; }
.evk-dm-fab--bottom-right { bottom: 24px; right: 24px; }
.evk-dm-fab--top-left     { top: 90px;   left: 24px; }
.evk-dm-fab--top-right    { top: 90px;   right: 24px; }

.evk-dm-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 35px;
	background: #ffffff;
	color: #2a4269;
	font-family: 'Cairo', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0,0,0,0.16);
	transition: background .25s, color .25s, box-shadow .25s, transform .15s;
}
.evk-dm-toggle:hover { transform: translateY(-2px); }
.evk-dm-toggle:active { transform: translateY(0); }

html.evk-dark .evk-dm-toggle {
	background: var(--evk-card);
	color: #ffe9a8;
	border-color: rgba(255,255,255,0.14);
	box-shadow: 0 6px 22px rgba(0,0,0,0.5);
}

.evk-dm-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.evk-dm-sun  { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.evk-dm-moon { fill: currentColor; }

/* Show correct icon per mode */
.evk-dm-toggle .evk-dm-moon { display: inline-block; }
.evk-dm-toggle .evk-dm-sun  { display: none; }
html.evk-dark .evk-dm-toggle .evk-dm-moon { display: none; }
html.evk-dark .evk-dm-toggle .evk-dm-sun  { display: inline-block; }

.evk-dm-label { white-space: nowrap; }

/* Inline (shortcode) variant */
.evk-dm-inline .evk-dm-toggle {
	box-shadow: none;
	padding: 8px 14px;
}

/* RTL: FAB already flips via left/right classes; label direction ok in Cairo */
html[dir="rtl"] .evk-dm-toggle { direction: rtl; }