:root {
    --khdl-light-bg: #fff;
    --khdl-light-surface: #f7f8f8;
    --khdl-light-text: #17211d;
    --khdl-light-muted: #68756f;
    --khdl-light-border: #dde7e2;
    --khdl-light-primary: #04724d;
    --khdl-dark-bg: #101513;
    --khdl-dark-surface: #171e1b;
    --khdl-dark-text: #f4f7f5;
    --khdl-dark-muted: #a4b0aa;
    --khdl-dark-border: #2a3530;
    --khdl-dark-primary: #56c49a;
}

html[data-kh-theme="light"] {
    --kh-bg: var(--khdl-light-bg);
    --kh-surface: var(--khdl-light-surface);
    --kh-text: var(--khdl-light-text);
    --kh-muted: var(--khdl-light-muted);
    --kh-border: var(--khdl-light-border);
    --kh-primary: var(--khdl-light-primary);
    --kh-input-bg: #fff;
    --kh-shadow: rgba(4, 114, 77, .08);
}

html[data-kh-theme="dark"] {
    --kh-bg: var(--khdl-dark-bg);
    --kh-surface: var(--khdl-dark-surface);
    --kh-text: var(--khdl-dark-text);
    --kh-muted: var(--khdl-dark-muted);
    --kh-border: var(--khdl-dark-border);
    --kh-primary: var(--khdl-dark-primary);
    --kh-input-bg: #141b18;
    --kh-shadow: rgba(0, 0, 0, .28);
}

html[data-kh-theme] body {
    background-color: var(--kh-bg);
    color: var(--kh-text);
}

body.khdl-transition,
body.khdl-transition :where(.elementor, .elementor-element, .elementor-widget-container, .site, .site-main, header, footer, section, article, aside, nav, div, a, button, input, textarea, select, table, th, td) {
    transition-property: background-color, border-color, color, box-shadow, fill, stroke;
    transition-duration: .22s;
    transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
    body.khdl-transition,
    body.khdl-transition * { transition: none !important; }
}

/* =========================================================
 * Global dark mode
 * Elementor can write background colors inline or in post CSS.
 * These selectors intentionally win in dark mode.
 * ======================================================= */
html[data-kh-theme="dark"] body.khdl-force-global,
html[data-kh-theme="dark"] body.khdl-force-global .site,
html[data-kh-theme="dark"] body.khdl-force-global .site-main,
html[data-kh-theme="dark"] body.khdl-force-global #page,
html[data-kh-theme="dark"] body.khdl-force-global #content {
    background-color: var(--kh-bg) !important;
    color: var(--kh-text) !important;
}

/* Elementor Containers / Sections / Columns */
html[data-kh-theme="dark"] body.khdl-force-global :is(
    .e-con,
    .e-con-inner,
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap
) {
    background-color: var(--kh-bg) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}

/* Widget surfaces. Background images are intentionally kept intact. */
html[data-kh-theme="dark"] body.khdl-force-global .elementor-widget-container {
    background-color: transparent !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor span,
    .elementor-icon-list-text,
    .elementor-icon-box-title,
    .elementor-icon-box-description,
    .elementor-image-box-title,
    .elementor-image-box-description,
    .elementor-testimonial-content,
    .elementor-testimonial-name,
    .elementor-accordion-title,
    .elementor-tab-title,
    .elementor-tab-content,
    .elementor-toggle-title,
    .elementor-toggle-content
) {
    color: var(--kh-text) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .elementor-divider-separator,
    .elementor-accordion-item,
    .elementor-toggle-item,
    .elementor-tab-title,
    .elementor-tab-content
) {
    border-color: var(--kh-border) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .elementor-widget-text-editor a,
    .elementor-icon-list-item a,
    .elementor-heading-title a
) {
    color: var(--kh-primary) !important;
}

/* Forms: Elementor Pro, native and project forms */
html[data-kh-theme="dark"] body.khdl-force-global :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]),
    textarea,
    select,
    .select2-selection,
    .elementor-field,
    .elementor-search-form__input
) {
    color: var(--kh-text) !important;
    background-color: var(--kh-input-bg) !important;
    border-color: var(--kh-border) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(input, textarea)::placeholder {
    color: var(--kh-muted) !important;
    opacity: 1 !important;
}

html[data-kh-theme="dark"] body.khdl-force-global hr {
    border-color: var(--kh-border) !important;
}

/* Common Elementor popup/menu surfaces */
html[data-kh-theme="dark"] body.khdl-force-global :is(
    .elementor-nav-menu--dropdown,
    .elementor-nav-menu--dropdown a,
    .elementor-search-form,
    .elementor-search-form__container,
    .dialog-widget-content,
    .elementor-popup-modal .dialog-widget-content
) {
    border-color: var(--kh-border) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .elementor-nav-menu--dropdown,
    .elementor-search-form__container,
    .dialog-widget-content,
    .elementor-popup-modal .dialog-widget-content
) {
    background-color: var(--kh-surface) !important;
    color: var(--kh-text) !important;
}

/* =========================================================
 * Khaleghi project plugins
 * Search v1.x + Woo category line + future khaleghi widgets.
 * ======================================================= */
html[data-kh-theme="dark"] body.khdl-force-global :is(
    .khaleghi-search-widget,
    .khaleghi-search-widget .khaleghi-search-box,
    .khaleghi-search-widget .khaleghi-search-results,
    .khaleghi-search-widget .khaleghi-search-dropdown,
    .khaleghi-search-widget .khaleghi-search-panel,
    .khaleghi-search-widget [class*="result"],
    .khaleghi-search-widget [class*="dropdown"],
    .khaleghi-search-widget [class*="suggest"],
    .khaleghi-woo-category-line,
    .khaleghi-category-line,
    .khaleghi-wc-category-line,
    [class*="khaleghi-"][class*="category-line"],
    [class*="khaleghi-"][class*="search"] [class*="panel"],
    [class*="khaleghi-"][class*="search"] [class*="dropdown"]
) {
    background-color: var(--kh-surface) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .khaleghi-search-widget input,
    .khaleghi-search-widget textarea,
    .khaleghi-search-widget select,
    [class*="khaleghi-"][class*="search"] input,
    [class*="khaleghi-"][class*="search"] textarea,
    [class*="khaleghi-"][class*="search"] select
) {
    background-color: var(--kh-input-bg) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .khaleghi-search-status,
    .khaleghi-search-widget .khaleghi-search-status,
    [class*="khaleghi-"][class*="search"] [class*="status"],
    [class*="khaleghi-"][class*="search"] [class*="empty"],
    [class*="khaleghi-"][class*="search"] [class*="message"]
) {
    color: var(--kh-muted) !important;
    font-family: inherit !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .khaleghi-woo-category-line a,
    .khaleghi-category-line a,
    .khaleghi-wc-category-line a,
    [class*="khaleghi-"][class*="category-line"] a
) {
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}

html[data-kh-theme="dark"] body.khdl-force-global :is(
    .khaleghi-woo-category-line a:hover,
    .khaleghi-category-line a:hover,
    .khaleghi-wc-category-line a:hover,
    [class*="khaleghi-"][class*="category-line"] a:hover
) {
    color: var(--kh-primary) !important;
}

/* Generic project surfaces. Kept intentionally narrow to visual containers. */
html[data-kh-theme="dark"] body.khdl-force-global :is(
    .khaleghi-card,
    .khaleghi-modal,
    .khaleghi-dropdown,
    [data-kh-surface],
    [class^="khaleghi-"][class*="modal"],
    [class^="khaleghi-"][class*="dropdown"],
    [class^="khaleghi-"][class*="card"]
) {
    background-color: var(--kh-surface) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}

/* =========================================================
 * Elementor theme toggle widget
 * All interactive states intentionally use !important.
 * ======================================================= */
.khdl-toggle-wrap {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.khdl-toggle {
    --khdl-toggle-size: 44px;
    position: relative !important;
    display: inline-flex !important;
    min-width: var(--khdl-toggle-size) !important;
    min-height: var(--khdl-toggle-size) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--kh-border, #dde7e2) !important;
    border-radius: 14px !important;
    color: var(--kh-text, #17211d) !important;
    background-color: var(--kh-surface, #f7f8f8) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.khdl-toggle:hover,
.khdl-toggle:focus,
.khdl-toggle:focus-visible,
.khdl-toggle:active {
    color: var(--kh-primary, #04724d) !important;
    background-color: var(--kh-surface, #f7f8f8) !important;
    border-color: var(--kh-primary, #04724d) !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.khdl-toggle:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-primary, #04724d) 22%, transparent) !important;
}

.khdl-toggle__icon {
    width: calc(var(--khdl-toggle-size) * .48) !important;
    height: calc(var(--khdl-toggle-size) * .48) !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    color: inherit !important;
    pointer-events: none !important;
}

.khdl-toggle__icon svg,
.khdl-toggle:hover .khdl-toggle__icon svg,
.khdl-toggle:focus .khdl-toggle__icon svg,
.khdl-toggle:active .khdl-toggle__icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.khdl-toggle__icon svg *,
.khdl-toggle:hover .khdl-toggle__icon svg *,
.khdl-toggle:focus .khdl-toggle__icon svg *,
.khdl-toggle:active .khdl-toggle__icon svg * {
    fill: none !important;
    stroke: currentColor !important;
}

.khdl-toggle__icon--moon,
.khdl-toggle__label--dark {
    display: none !important;
}

html[data-kh-theme="dark"] .khdl-toggle__icon--sun,
html[data-kh-theme="dark"] .khdl-toggle__label--light {
    display: none !important;
}

html[data-kh-theme="dark"] .khdl-toggle__icon--moon {
    display: grid !important;
}

html[data-kh-theme="dark"] .khdl-toggle__label--dark {
    display: inline-block !important;
}

html[data-kh-theme="light"] .khdl-toggle__icon--sun {
    display: grid !important;
}

html[data-kh-theme="light"] .khdl-toggle__label--light {
    display: inline-block !important;
}

.khdl-toggle__label {
    font: inherit;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: inherit !important;
    pointer-events: none !important;
}