/*
 * Word.Studio — dark theme for image tools.
 *
 * Loaded only on image tool pages and Images & Design archives (see inc/dark-theme.php).
 * The surfaces step Black (page) → Ink (boxes and cards) → Gray 800 (form panel), with
 * Black again for form inputs.
 *
 * #3596, #638 and the shared cards keep their light settings in Elementor, so this file
 * has to outrank Elementor's per-element rules, which reach (0,4,0) or higher. Rather than
 * `!important`, selectors start `body.ws-dark.ws-dark` and repeat classes where needed.
 */

html:has(> body.ws-dark) {
	background: var(--ws-black);
	color-scheme: dark;   /* native dropdown lists, scrollbars, date pickers */
}

body.ws-dark {
	background: var(--ws-black);

	--ws-dark-box:   var(--ws-gray-900);
	--ws-dark-panel: var(--ws-gray-800);
	--ws-dark-input: var(--ws-black);
	--ws-dark-edge:        rgb(255 255 255 / 0.08);
	--ws-dark-edge-strong: rgb(255 255 255 / 0.24);
	/* The home hero's light: a soft gray pool fading to black in every direction,
	 * so it never leaves a seam against the header or the next section. */
	--ws-dark-glow:     radial-gradient(ellipse 760px 460px at 28% 210px, #252525 0%, rgb(37 37 37 / 0) 100%);
	--ws-dark-box-fill: radial-gradient(120% 140% at 50% 0%, var(--ws-gray-900) 0%, var(--ws-black) 100%);

	/* Design system roles, re-pointed for dark. ai-engine.css and base.css read these. */
	--ws-surface-page:    var(--ws-dark-panel);
	--ws-surface-inverse: var(--ws-dark-panel);
	--ws-text:             var(--ws-gray-200);
	--ws-text-strong:      var(--ws-white);
	--ws-text-muted:       var(--ws-gray-300);
	--ws-text-placeholder: var(--ws-gray-400);   /* 6.3:1 on Black */
	--ws-border:           var(--ws-dark-edge);
	--ws-border-control:   transparent;         /* fields have no visible edge at rest */
	--ws-focus:            var(--ws-white);
}

/* Elementor globals, flipped inside the page body only. The header and footer are
 * separate documents, so they keep their own colors. */
body.ws-dark :is(.elementor-3596, .elementor-638) {
	--e-global-color-primary: var(--ws-white);
	--e-global-color-c1d133f: var(--ws-white);
	--e-global-color-text: var(--ws-gray-300);
	--e-global-color-secondary: var(--ws-gray-300);
	--e-global-color-7c49827: var(--ws-gray-300);
	color: var(--ws-gray-300);
}

body.ws-dark ::selection { background: var(--ws-white); color: var(--ws-gray-900); }

/* ── Page ── */
body.ws-dark.ws-dark .elementor-3596 { background: var(--ws-dark-glow) no-repeat, var(--ws-black); }
body.ws-dark.ws-dark .elementor-638 { background: var(--ws-black); }
body.ws-dark.ws-dark .elementor-3596 > .elementor-section.elementor-element,
body.ws-dark.ws-dark .elementor-3596 .elementor-column > .elementor-element-populated,
body.ws-dark.ws-dark .elementor-638 > .elementor-element-6c045f1.elementor-element {
	background: transparent;
}

/* The archive hero is lit from its bottom edge, which reads as a hard line against the dark
 * category bar. Here the light sits inside the hero and fades out before the bar. */
body.ws-dark.ws-dark .elementor-638 > .elementor-element-499826a.elementor-element {
	background: radial-gradient(ellipse 72% 88% at 50% 44%, #252525 0%, rgb(37 37 37 / 0) 100%), var(--ws-black);
}
body.ws-dark.ws-dark .elementor-638 > .elementor-element-499826a.elementor-element::before { background: none; }

/* ── Type ── */
body.ws-dark.ws-dark :is(.elementor-3596, .elementor-638) .elementor-widget-heading .elementor-heading-title,
body.ws-dark.ws-dark :is(.elementor-3596, .elementor-638) .elementor-widget-theme-post-title .elementor-heading-title {
	color: var(--ws-white);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-heading.elementor-element-7527bd30 .elementor-heading-title {
	color: var(--ws-gray-300);   /* the category label above the tool title */
}
body.ws-dark.ws-dark :is(.elementor-3596, .elementor-638) .elementor-widget-text-editor.elementor-widget-text-editor,
body.ws-dark.ws-dark :is(.elementor-3596, .elementor-638) .elementor-widget-theme-post-excerpt.elementor-widget-theme-post-excerpt > .elementor-widget-container,
body.ws-dark.ws-dark :is(.elementor-3596, .elementor-638) .elementor-widget-theme-post-excerpt p {
	color: var(--ws-gray-300);
}

/* ── Tool box: the outer box that holds the form and its output ── */
body.ws-dark.ws-dark .elementor-3596 .elementor-column > .elementor-element-populated:has(> .elementor-widget-theme-post-content) {
	background: var(--ws-dark-box-fill);
	box-shadow: inset 0 0 0 1px var(--ws-dark-edge);
}
/* The limit wall's button sits in here too and keeps its own colors. */
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-theme-post-content a:not(.elementor-button, .ws-limit-box a) { color: var(--ws-white); }

/* Step 1/2/3 icons: their color is an inline style saved in each tool, but the fill is
 * set on the svg itself, so one rule covers the black, purple and gray ones. */
body.ws-dark.ws-dark .wp-block-outermost-icon-block .icon-container svg { fill: var(--ws-gray-300); }

/* ── Form panel, fields and submit ──
 * The panel, labels and placeholder follow the roles above. */
body.ws-dark .mwai-form-container.mwai-form-container fieldset :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], select, textarea) {
	background-color: var(--ws-dark-input);
	color: var(--ws-white);
}
body.ws-dark .mwai-form-container.mwai-form-container fieldset :is(input, select, textarea):hover { border-color: transparent; }
body.ws-dark .mwai-form-container.mwai-form-container fieldset :is(input, select, textarea):focus {
	border-color: var(--ws-white);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.16);
}
body.ws-dark .mwai-form-container.mwai-form-container fieldset :is(input, select, textarea)[disabled] {
	background-color: var(--ws-dark-box);
	color: var(--ws-gray-400);
}
body.ws-dark .mwai-form-container.mwai-form-container input[type=checkbox],
body.ws-dark .mwai-form-container.mwai-form-container input[type=radio] {
	accent-color: var(--ws-white);
}

/* Custom dropdown list (built in ai-engine.css; same browser conditions). The chevron and
 * the patch long names fade under are part of one background, so both are restated. */
@media (hover: hover) and (pointer: fine) {
	@supports (appearance: base-select) and selector(::picker(select)) {
		body.ws-dark .mwai-form-container.mwai-form-container fieldset select:open {
			border-color: var(--ws-white);
			box-shadow: 0 0 0 3px rgb(255 255 255 / 0.16);
		}
		body.ws-dark .mwai-form-container.mwai-form-container fieldset select::picker-icon {
			background:
				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right var(--ws-space-4) center / 12px 8px no-repeat,
				linear-gradient(to right, transparent, var(--ws-dark-input) 16px);
		}
		body.ws-dark .mwai-form-container.mwai-form-container fieldset select::picker(select) {
			background: var(--ws-dark-box);
			border-color: var(--ws-dark-edge-strong);
			box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.7);
		}
		body.ws-dark .mwai-form-container.mwai-form-container fieldset select option:hover,
		body.ws-dark .mwai-form-container.mwai-form-container fieldset select option:checked:hover {
			background: rgb(255 255 255 / 0.08);
		}
	}
}

/* Ready: the Get Access glow, lit from above. It stays the brightest thing on the page.
 * Waiting keeps the Gray 700 state from ai-engine.css. */
body.ws-dark .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button:not([disabled]) {
	background: var(--ws-white) var(--ws-glow-fill);
	color: var(--ws-gray-900);
	box-shadow: var(--ws-glow-rest);
}
body.ws-dark .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button:not([disabled]):hover {
	background: var(--ws-white) var(--ws-glow-fill-hover);
	box-shadow: var(--ws-glow-hover);
}
body.ws-dark .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button:not([disabled]):active {
	box-shadow: var(--ws-glow-rest);
}

/* ── Output ── */
body.ws-dark .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output,
body.ws-dark .mwai-form-output-container .mwai-form-output.mwai-form-output {
	background: var(--ws-black);
	color: var(--ws-gray-200);
}
body.ws-dark .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output a:not(.ws-limit-box a),
body.ws-dark .mwai-form-output-container .mwai-form-output.mwai-form-output a:not(.ws-limit-box a) { color: var(--ws-white); }

/* Errors and the limit wall use Gray 800, so they read as a raised panel on the tool box. */
body.ws-dark .mwai-form-container.mwai-form-container { --mwai-errorBackgroundColor: var(--ws-dark-panel); }
body.ws-dark .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output.mwai-error,
body.ws-dark .mwai-form-output-container .mwai-form-output.mwai-form-output.mwai-error {
	background: var(--ws-dark-panel);
	color: var(--ws-white);
}
body.ws-dark .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output.mwai-error:has(.ws-limit-box),
body.ws-dark .mwai-form-output-container .mwai-form-output.mwai-form-output.mwai-error:has(.ws-limit-box) {
	background: transparent;
}

/* ── Locked panel (Pro CTA #1929), what logged-out visitors see on Pro tools ── */
/* The image is a white JPG. Inverted it turns black, and screen drops the black out,
 * leaving the padlock and blurred form lit on the box behind it. */
body.ws-dark.ws-dark .elementor-1929 .elementor-widget-image img {
	filter: invert(1) grayscale(1);
	mix-blend-mode: screen;
}
body.ws-dark.ws-dark .elementor-3596 .elementor-1929.elementor-1929 .elementor-widget-button .elementor-button {
	background-color: var(--ws-white);
	background-image: var(--ws-glow-fill);
	color: var(--ws-gray-900);
	fill: var(--ws-gray-900);
	font-family: var(--ws-font-sans);
	font-weight: 700;
	border: 1px solid var(--ws-glow-edge);
	box-shadow: var(--ws-glow-rest);
	transition: box-shadow var(--ws-dur-glow) var(--ws-ease-out), transform var(--ws-dur-glow) var(--ws-ease-out);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-1929.elementor-1929 .elementor-widget-button .elementor-button:is(:hover, :focus-visible) {
	background-image: var(--ws-glow-fill-hover);
	color: var(--ws-gray-900);
	fill: var(--ws-gray-900);
	box-shadow: var(--ws-glow-hover);
	transform: scale(var(--ws-glow-grow));
}
body.ws-dark.ws-dark .mepr-login-form-wrap .mepr-login-link a { color: var(--ws-gray-300); }
body.ws-dark.ws-dark .mepr-login-form-wrap .mepr-login-link a:hover { color: var(--ws-white); }

/* ── How to Use and Feedback boxes ── */
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-toggle.elementor-widget-toggle > .elementor-widget-container {
	background: var(--ws-dark-box);
	box-shadow: inset 0 0 0 1px var(--ws-dark-edge);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-toggle.elementor-widget-toggle .elementor-toggle-title { color: var(--ws-white); }
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-toggle.elementor-widget-toggle .elementor-toggle-icon svg { fill: var(--ws-white); }
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-toggle.elementor-widget-toggle .elementor-tab-content { color: var(--ws-gray-300); }
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-toggle .elementor-tab-content :is(h1, h2, h3, h4, h5, h6, strong, b, a) { color: var(--ws-white); }

/* Feedback form (#3397) */
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-field-group .elementor-select-wrapper select {
	background-color: var(--ws-dark-input);
	border-color: var(--ws-dark-edge-strong);
	color: var(--ws-white);
}
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-field-group .elementor-field::placeholder { color: var(--ws-gray-400); opacity: 1; }
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-field-label { color: var(--ws-white); }
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-button[type="submit"] {
	background-color: var(--ws-white);
	border-color: var(--ws-white);
	color: var(--ws-gray-900);
}
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-button[type="submit"]:hover { background-color: var(--ws-gray-200); }
body.ws-dark.ws-dark .elementor-widget-form.elementor-widget-form .elementor-button[type="submit"] svg * { fill: var(--ws-gray-900); }

/* ── Search on tool pages (the archive's search is already dark) ── */
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-search.elementor-widget-search {
	--e-search-input-color: var(--ws-white);
	--e-search-placeholder-color: var(--ws-gray-400);
	--e-search-icon-label-color: var(--ws-white);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-search.elementor-widget-search.e-focus { --e-search-input-color: var(--ws-white); }
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-search.elementor-widget-search .e-search-input.e-search-input {
	background-color: var(--ws-dark-input);
	box-shadow: inset 0 0 0 1px var(--ws-dark-edge-strong);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-search.elementor-widget-search .e-search-results-container { background-color: var(--ws-dark-box); }
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-search.elementor-widget-search .e-search-results-container > div { box-shadow: inset 0 0 0 1px var(--ws-dark-edge); }
body.ws-dark.ws-dark .e-search-results:has([data-elementor-id="34302"]) .elementor-pagination {
	border-top-color: var(--ws-dark-edge);
	--ws-page-fg: var(--ws-white);
	--ws-page-edge: var(--ws-dark-edge-strong);
	--ws-page-hover: rgb(255 255 255 / 0.08);
}
/* Result cards (#34302) */
body.ws-dark.ws-dark .e-search-results .elementor-34302 > .elementor-element.e-con,
body.ws-dark.ws-dark .e-search-results .elementor-34302 > .elementor-element.e-con > .elementor-element.e-con {
	background: transparent;
	border-color: var(--ws-dark-edge);
}
body.ws-dark.ws-dark .e-search-results .elementor-34302.elementor-34302 > .e-con:hover { background: rgb(255 255 255 / 0.06); }
body.ws-dark.ws-dark .e-search-results .elementor-34302.elementor-34302 .elementor-heading-title { color: var(--ws-white); }
body.ws-dark.ws-dark .e-search-results .elementor-34302.elementor-34302 .elementor-widget-theme-post-excerpt > .elementor-widget-container { color: var(--ws-gray-300); }

/* ── Cards: related tools (Posts widget) and the archive grid (loop item #3632) ── */
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-posts.elementor-widget-posts .elementor-post,
body.ws-dark.ws-dark .elementor-638 .e-loop-item.e-loop-item > .elementor-element.e-con {
	background: var(--ws-dark-box);
	box-shadow: inset 0 0 0 1px var(--ws-dark-edge);
	transition: box-shadow var(--ws-dur) var(--ws-ease-out), transform var(--ws-dur) var(--ws-ease-out);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-posts.elementor-widget-posts .elementor-post:hover,
body.ws-dark.ws-dark .elementor-638 .e-loop-item.e-loop-item > .elementor-element.e-con:hover {
	box-shadow: inset 0 0 0 1px var(--ws-dark-edge-strong);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-posts.elementor-widget-posts .elementor-post__title,
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-posts.elementor-widget-posts .elementor-post__title a {
	color: var(--ws-white);
}
body.ws-dark.ws-dark .elementor-3596 .elementor-widget-posts.elementor-widget-posts .elementor-post__excerpt p { color: var(--ws-gray-300); }

/* Load More buttons */
body.ws-dark.ws-dark .e-loop__load-more .elementor-button.elementor-button {
	background: transparent;
	color: var(--ws-white);
	border-color: var(--ws-white);
}
body.ws-dark.ws-dark .e-loop__load-more .elementor-button.elementor-button:hover {
	background: var(--ws-white);
	color: var(--ws-gray-900);
}

/* ── Archive category bar ── */
body.ws-dark.ws-dark .elementor-638 > .elementor-element-fd0a3d9.elementor-element {
	background: rgb(0 0 0 / 0.65);
	border-color: var(--ws-dark-edge);
}
body.ws-dark.ws-dark .elementor-638 .elementor-element.elementor-element-8646cc0 .elementor-nav-menu--main .elementor-item.elementor-item {
	color: var(--ws-gray-300);
	fill: var(--ws-gray-300);
}
body.ws-dark.ws-dark .elementor-638 .elementor-element.elementor-element-8646cc0 .elementor-nav-menu--main .elementor-item.elementor-item:is(:hover, :focus, .elementor-item-active) {
	color: var(--ws-gray-900);
	fill: var(--ws-gray-900);
}
body.ws-dark.ws-dark .elementor-638 .elementor-element.elementor-element-8646cc0 .elementor-nav-menu--main.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item:is(:hover, :focus, .elementor-item-active)::before {
	background-color: var(--ws-white);
}

@media (prefers-reduced-motion: reduce) {
	body.ws-dark.ws-dark .elementor-3596 .elementor-1929.elementor-1929 .elementor-widget-button .elementor-button { transition: none; }
	body.ws-dark.ws-dark .elementor-3596 .elementor-1929.elementor-1929 .elementor-widget-button .elementor-button:is(:hover, :focus-visible) { transform: none; }
}