/**
 * Hadara Accessibility — conservative semantic dark engine.
 * Transparent layout containers stay transparent. A background is painted only
 * for a real detected fill or an element with a clear interface role.
 */
@layer hadara-dark {
	:root {
		--hd-bg: var(--hadara-a11y-dark-bg, #17191c);
		--hd-surface: var(--hadara-a11y-dark-surface, #24272b);
		--hd-elevated: var(--hadara-a11y-dark-elevated, #2d3136);
		--hd-header: var(--hadara-a11y-dark-header, #17191c);
		--hd-footer: var(--hadara-a11y-dark-footer, #111315);
		--hd-field: var(--hadara-a11y-dark-field, #202328);
		--hd-heading: var(--hadara-a11y-dark-heading, #e6c678);
		--hd-text: var(--hadara-a11y-dark-text, #e9e7e2);
		--hd-text-2: var(--hadara-a11y-dark-text2, #cfcdc7);
		/* اللون الجديد — دور «الوصف»: بين المتن والبيانات الوصفية. */
		--hd-text-3: var(--hadara-a11y-dark-text3, #d8cfbe);
		--hd-muted: var(--hadara-a11y-dark-muted, #aaa8a2);
		--hd-divider: var(--hadara-a11y-dark-divider, #3a3e43);
		--hd-border: var(--hadara-a11y-dark-border, #494d53);
		--hd-primary: var(--hadara-a11y-dark-primary, #d4ae63);
		--hd-secondary: var(--hadara-a11y-dark-secondary, #b9914a);
		--hd-accent: var(--hadara-a11y-dark-accent, #efca7b);
		--hd-link: var(--hadara-a11y-dark-link, #efd08d);
		--hd-link-hover: var(--hadara-a11y-dark-linkhover, #fff1c6);
	}

	html.hadara-a11y-color-dark {
		color-scheme: dark;
		background: var(--hd-bg) !important;
		scrollbar-color: var(--hd-border) var(--hd-bg);
	}

	html.hadara-a11y-color-dark body {
		background-color: var(--hd-bg) !important;
		color: var(--hd-text) !important;
	}

	/* Layout is not a surface. Keep Elementor's transparent structure intact. */
	html.hadara-a11y-color-dark :where(main, #main, #content, #primary, .site-main, .site-content, .content-area, article, section, .elementor, .elementor-section, .elementor-container, .elementor-widget-wrap, .e-con, .e-con-inner) {
		color: var(--hd-text) !important;
	}

	/* The classifier applies these tokens only to existing opaque surfaces. */
	html.hadara-a11y-color-dark [data-hd-s~="fill"] {
		background-color: var(--hd-fill, var(--hd-surface)) !important;
	}

	html.hadara-a11y-color-dark [data-hd-s~="grad"]:not([data-hd-s~="img"]) {
		background-color: var(--hd-fill, var(--hd-surface)) !important;
		background-image: linear-gradient(155deg, var(--hd-elevated), var(--hd-surface)) !important;
		background-blend-mode: normal !important;
	}

	/* Elementor cards often put their bright gradient on a generated layer. */
	html.hadara-a11y-color-dark [data-hd-p~="bx"]::before,
	html.hadara-a11y-color-dark [data-hd-p~="ax"]::after {
		background-image: linear-gradient(155deg, var(--hd-elevated), var(--hd-surface)) !important;
		background-color: var(--hd-surface) !important;
		filter: none !important;
	}

	html.hadara-a11y-color-dark [data-hd-s~="float"] {
		background-color: var(--hd-fill, var(--hd-elevated)) !important;
		border-color: var(--hd-border) !important;
		box-shadow: 0 12px 32px rgb(0 0 0 / .3) !important;
	}

	/* ══════════════════════════════════════════════════════════════════════
	 * نظام ألوان الكتابات — أربعة أدوار لا تتداخل
	 *
	 * ═══ سبب التداخل الذي كان قائماً (مقيسٌ بالخصوصية) ═══
	 * كانت قاعدة الروابط `a:not(.button):not(.btn):not([class*="button"])`
	 * بوزن **(0,4,2)** — وهو أثقل بكثير من قواعد العناوين والمحتوى (0,1,1)
	 * ومن مصنّف JS ‏`[data-hd-t]` ‏(0,2,1). فكل عنوانٍ أو نصٍّ داخل رابط — وهذا
	 * حال كل بطاقةٍ قابلة للنقر — كان يرث لون الرابط بدل لون دوره، فيبدو
	 * التلوين «متداخلاً» بين العنوان والمحتوى.
	 *
	 * ═══ الحل: سلّم أوزانٍ صريح ═══
	 * كل دورٍ يحمل ذيل `:not([data-hd-t="…"])` يستثني الأدوار الأخرى، فيرتفع
	 * وزنه فوق قاعدة الروابط ويستحيل أن يتنازع دوران على عنصرٍ واحد:
	 *   العناوين (0,5,2) · المحتوى (0,5,2) · الثانوي (0,5,2) · الروابط (0,4,2)
	 * ووسم `data-hd-t` من مصنّف JS يعلوها جميعاً (0,6,1) لأنه قرارٌ صريح.
	 *
	 * الأدوار الأربعة:
	 *   heading   — العناوين            → --hd-heading
	 *   body      — المتن               → --hd-text
	 *   secondary — الوصف والتعريف      → --hd-text-3   (اللون الجديد)
	 *   muted     — البيانات الوصفية    → --hd-muted
	 * ══════════════════════════════════════════════════════════════════════ */

	/* ① العناوين — ذهبية. */
	html.hadara-a11y-color-dark :is(h1, h2, h3, h4, h5, h6, .entry-title, .post-title, .page-title, .elementor-heading-title, .elementor-post__title, .widget-title, .elementor-flip-box__layer__title):not([data-hd-t="body"]):not([data-hd-t="secondary"]):not([data-hd-t="muted"]) {
		color: var(--hd-heading) !important;
		-webkit-text-fill-color: var(--hd-heading) !important;
		text-shadow: none !important;
	}

	/*
	 * أبناء العنوان (span/strong داخله) يتبعونه — لكن **الروابط مستثناة** حتى
	 * يبقى الرابط داخل العنوان مميّزاً بلونه فيُعرف أنه قابل للنقر.
	 */
	html.hadara-a11y-color-dark :is(h1, h2, h3, h4, h5, h6, .entry-title, .elementor-heading-title, .elementor-flip-box__layer__title) :is(span, strong, em, b, i, small):not(a):not([data-hd-t]) {
		color: inherit !important;
		-webkit-text-fill-color: inherit !important;
	}

	/* ② المتن — أبيض واضح. */
	html.hadara-a11y-color-dark :is(p, li, dt, dd, blockquote, td, th, .entry-content, .post-content, .elementor-widget-text-editor, .elementor-widget-icon-list-text):not([data-hd-t="heading"]):not([data-hd-t="secondary"]):not([data-hd-t="muted"]) {
		color: var(--hd-text) !important;
		text-shadow: none !important;
	}

	/* ③ الوصف والتعريف — اللون الجديد: أهدأ من المتن وأوضح من البيانات الوصفية. */
	html.hadara-a11y-color-dark :is(.elementor-flip-box__layer__description, .description, .subtitle, .excerpt, .entry-summary, .elementor-post__excerpt, figcaption, caption, legend):not([data-hd-t="heading"]):not([data-hd-t="body"]):not([data-hd-t="muted"]) {
		color: var(--hd-text-3) !important;
		-webkit-text-fill-color: var(--hd-text-3) !important;
	}

	/* ④ البيانات الوصفية — الأخفت. */
	html.hadara-a11y-color-dark :is(.entry-meta, .post-meta, .meta, .date, .author, .comment-metadata, small, time):not([data-hd-t="heading"]):not([data-hd-t="body"]):not([data-hd-t="secondary"]) {
		color: var(--hd-muted) !important;
	}

	/* ⑤ الروابط — أقلّ وزناً من الأدوار أعلاه عمداً، فلا تبتلع نصاً له دورٌ صريح. */
	html.hadara-a11y-color-dark a:not(.button):not(.btn):not([class*="button"]) {
		color: var(--hd-link) !important;
	}

	html.hadara-a11y-color-dark a:not(.button):not(.btn):not([class*="button"]):where(:hover, :focus-visible) {
		color: var(--hd-link-hover) !important;
	}

	/*
	 * ⑥ قرار مصنّف JS — الكلمة الأخيرة دائماً.
	 * يُكرَّر ذيل `:not()` ليعلو وزنه فوق كل ما سبق، لأنه فحصٌ فعليٌّ للعنصر لا
	 * تخمينٌ من اسم وسمٍ أو صنف.
	 */
	html.hadara-a11y-color-dark [data-hd-t="heading"]:not([data-hd-x]):not([data-hd-y]):not([data-hd-z]) {
		color: var(--hd-heading) !important;
		-webkit-text-fill-color: var(--hd-heading) !important;
	}

	html.hadara-a11y-color-dark [data-hd-t="body"]:not([data-hd-x]):not([data-hd-y]):not([data-hd-z]) {
		color: var(--hd-text) !important;
		-webkit-text-fill-color: var(--hd-text) !important;
	}

	html.hadara-a11y-color-dark [data-hd-t="secondary"]:not([data-hd-x]):not([data-hd-y]):not([data-hd-z]) {
		color: var(--hd-text-3) !important;
		-webkit-text-fill-color: var(--hd-text-3) !important;
	}

	html.hadara-a11y-color-dark [data-hd-t="muted"]:not([data-hd-x]):not([data-hd-y]):not([data-hd-z]) {
		color: var(--hd-muted) !important;
		-webkit-text-fill-color: var(--hd-muted) !important;
	}

	html.hadara-a11y-color-dark [data-hd-t="link"]:not([data-hd-x]):not([data-hd-y]):not([data-hd-z]) {
		color: var(--hd-link) !important;
		-webkit-text-fill-color: var(--hd-link) !important;
	}

	/* A header over a photo/video stays transparent; only its text changes. */
	html.hadara-a11y-color-dark :where(header, #masthead, .site-header, .elementor-location-header):not([data-hd-s~="img"]) {
		background-color: var(--hd-header) !important;
	}

	html.hadara-a11y-color-dark :where(header, #masthead, .site-header, .elementor-location-header)[data-hd-s~="img"],
	html.hadara-a11y-color-dark :where(header, #masthead, .site-header, .elementor-location-header):has(video) {
		background-color: transparent !important;
	}

	html.hadara-a11y-color-dark :where(header, #masthead, .site-header, .elementor-location-header) :where(nav, ul, li):not(.sub-menu):not(.dropdown-menu) {
		background-color: transparent !important;
	}

	/* Dropdowns are local floating surfaces, not a blanket over the header. */
	html.hadara-a11y-color-dark :where(.sub-menu, .dropdown-menu, [role="menu"], .elementor-nav-menu--dropdown) {
		background: var(--hd-elevated) !important;
		color: var(--hd-text) !important;
		border-color: var(--hd-border) !important;
		box-shadow: 0 12px 30px rgb(0 0 0 / .32) !important;
	}

	html.hadara-a11y-color-dark :where(.sub-menu, .dropdown-menu, [role="menu"], .elementor-nav-menu--dropdown) :where(li, a) {
		background-color: transparent !important;
		color: var(--hd-text) !important;
	}

	html.hadara-a11y-color-dark :where(.sub-menu, .dropdown-menu, [role="menu"], .elementor-nav-menu--dropdown) a:where(:hover, :focus-visible) {
		background-color: var(--hd-surface) !important;
		color: var(--hd-link-hover) !important;
	}

	/* Footer is intentionally one complete dark region. */
	html.hadara-a11y-color-dark :where(footer, #colophon, .site-footer, .elementor-location-footer) {
		background-color: var(--hd-footer) !important;
		color: var(--hd-text-2) !important;
		border-color: var(--hd-divider) !important;
	}

	html.hadara-a11y-color-dark :where(footer, #colophon, .site-footer, .elementor-location-footer) :where(section, div, nav, ul, li):not([data-hd-s~="fill"]):not([data-hd-s~="float"]) {
		background-color: transparent !important;
	}

	/* Controls and data components are genuine interface surfaces. */
	html.hadara-a11y-color-dark :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
		background: var(--hd-field) !important;
		color: var(--hd-text) !important;
		border-color: var(--hd-border) !important;
		box-shadow: none !important;
	}

	html.hadara-a11y-color-dark :where(button, input[type="button"], input[type="submit"], input[type="reset"], a.button, a.btn, .elementor-button, .wp-element-button):not(.hadara-a11y-trigger):not(.hadara-a11y-close) {
		background-color: var(--hd-primary) !important;
		color: #16130e !important;
		border-color: var(--hd-secondary) !important;
		box-shadow: 0 7px 18px rgb(0 0 0 / .24) !important;
	}

	html.hadara-a11y-color-dark :where(button, input[type="button"], input[type="submit"], input[type="reset"], a.button, a.btn, .elementor-button, .wp-element-button):not(.hadara-a11y-trigger):not(.hadara-a11y-close):where(:hover, :focus-visible) {
		background-color: var(--hd-accent) !important;
		color: #0e0c08 !important;
	}

	html.hadara-a11y-color-dark :where(table, thead, tbody, tfoot, tr, th, td) {
		color: var(--hd-text) !important;
		border-color: var(--hd-divider) !important;
	}

	html.hadara-a11y-color-dark :where(th, thead td) {
		background-color: var(--hd-elevated) !important;
	}

	html.hadara-a11y-color-dark :where(dialog, [role="dialog"], .modal, .popup, .offcanvas, .drawer) {
		background: var(--hd-elevated) !important;
		color: var(--hd-text) !important;
		border-color: var(--hd-border) !important;
	}

	/* Background media gets a tint; it never becomes a manufactured panel. */
	html.hadara-a11y-color-dark :where(.hero, [class*="hero"], .elementor-section, .e-con)[data-hd-s~="img"] {
		background-color: rgb(0 0 0 / var(--hadara-a11y-dark-hero-dim, .38)) !important;
		background-blend-mode: multiply !important;
	}

	html.hadara-a11y-color-dark :where(.hero, [class*="hero"], .elementor-section, .e-con):has(video) > :where(.elementor-background-overlay, .background-overlay, .overlay) {
		background: rgb(0 0 0 / var(--hadara-a11y-dark-hero-dim, .38)) !important;
		opacity: 1 !important;
		pointer-events: none !important;
	}

	/* Images, logos, video and embeds can be explicitly protected. */
	html.hadara-a11y-color-dark.hadara-a11y-dark-protect-media :where(img, picture, video, canvas, svg, iframe, object, embed, .elementor-widget-image, .wp-block-image, .wp-post-image) {
		filter: none !important;
		opacity: revert-layer !important;
		mix-blend-mode: normal !important;
	}

	html.hadara-a11y-color-dark ::selection {
		background: var(--hd-accent) !important;
		color: #15120d !important;
	}

	html.hadara-a11y-color-dark :focus-visible {
		outline-color: var(--hadara-a11y-dark-focus, var(--hd-accent)) !important;
	}

	/* ═══ أنماط الحضارة: ثلاث معماريات تتجاوز تبديل اللوحة اللونية. ═══ */
	/* الملكي: تسلسل أزرق أكاديمي، بطاقات واضحة، وحواف ذهبية دقيقة. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-royal"] body {
		background-image: linear-gradient(180deg, rgb(27 67 94 / .18), transparent 38rem) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-royal"] :where(article, .elementor-post, .elementor-widget-posts .elementor-post, .e-loop-item, .card, [class*="card"])[data-hd-s~="fill"],
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-royal"] :where(.elementor-widget-container, .e-con)[data-hd-s~="float"] {
		border: 1px solid color-mix(in srgb, var(--hd-primary) 34%, var(--hd-border)) !important;
		box-shadow: 0 16px 36px rgb(0 7 13 / .34) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-royal"] :where(h1, h2, .entry-title, .elementor-heading-title) {
		color: #f6f2e8 !important;
		text-decoration-color: var(--hd-primary) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-royal"] :where(.sub-menu, .dropdown-menu, [role="menu"], .elementor-nav-menu--dropdown) {
		border-block-start: 2px solid var(--hd-primary) !important;
	}

	/* الأرشيف: بنية تحريرية مسطحة للمقالات والأخبار، بلا صناديق مصطنعة. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-archive"] :where(article, .elementor-post, .e-loop-item, .post, .type-post) {
		border-color: transparent transparent var(--hd-divider) !important;
		box-shadow: none !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-archive"] :where(article, .elementor-post, .e-loop-item, .post, .type-post)[data-hd-s~="fill"] {
		background: color-mix(in srgb, var(--hd-surface) 86%, transparent) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-archive"] :where(.entry-content, .post-content, .elementor-widget-theme-post-content) :where(p, li, blockquote) {
		color: var(--hd-text-2) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-archive"] :where(blockquote, .wp-block-quote) {
		background: var(--hd-elevated) !important;
		border: 0 !important;
		border-inline-start: 1px solid var(--hd-primary) !important;
	}

	/* الفناء: طبقات خضراء هادئة، شفافية محسوبة، ودمج أنظف للخلفيات المزخرفة. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-courtyard"] body {
		background-image: radial-gradient(circle at 50% 0, rgb(70 126 116 / .13), transparent 34rem) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-courtyard"] [data-hd-s~="fill"] {
		background-color: color-mix(in srgb, var(--hd-surface) 91%, transparent) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-courtyard"] :where(.elementor-section, .e-con, [class*="hero"])[data-hd-s~="img"] {
		background-color: rgb(4 20 20 / calc(var(--hadara-a11y-dark-hero-dim, .38) * .84)) !important;
		background-blend-mode: multiply !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-courtyard"] :where(.card, [class*="card"], article, .elementor-post, .e-loop-item)[data-hd-s~="float"] {
		border-color: color-mix(in srgb, var(--hd-border) 72%, transparent) !important;
		box-shadow: 0 14px 34px rgb(1 10 10 / .28) !important;
	}

	/* Elementor/Pro: الوسائط تبقى مرئية في الأنماط الثلاثة، والطبقة فقط تتلون. */
	html.hadara-a11y-color-dark[data-hadara-dark-style^="hadara-"] :where(.elementor-background-video-container, .elementor-background-video-hosted, .elementor-background-video-embed, .elementor-widget-image img, .elementor-post__thumbnail img) {
		filter: none !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style^="hadara-"] :where(.elementor-widget-image, .elementor-post__thumbnail, figure, picture) {
		background-color: transparent !important;
	}

	/* البسيط: يحافظ على البنية الأصلية ويغيّر الأسطح الحقيقية فقط. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-simple"] :where(article, section, .e-con, .elementor-section):not([data-hd-s~="fill"]):not([data-hd-s~="float"]) {
		background-color: transparent !important;
		box-shadow: none !important;
	}

	/* العميق: ثلاث درجات سطحية واضحة للمحتوى المتداخل. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-deep"] [data-hd-s~="fill"] { background-color: var(--hd-surface) !important; }
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-deep"] [data-hd-s~="fill"] [data-hd-s~="fill"] { background-color: var(--hd-elevated) !important; }
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-deep"] :where(.sub-menu, [role="dialog"], .modal, .popup) { background-color: #1d2935 !important; }

	/* الجذري: يوحّد كل الحاويات الملونة، مع استثناء الوسائط والحاويات الشفافة. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-radical"] :where([data-hd-s~="fill"], [data-hd-s~="grad"], [data-hd-s~="float"], [data-hd-s~="frame"]) {
		background-image: none !important;
		background-color: var(--hd-surface) !important;
		border-color: var(--hd-border) !important;
	}

	/* الإجباري: طبقة إنقاذ للنصوص ذات الألوان inline أو التي تنشئها الإضافات لاحقاً. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-forced"] body :where(div, p, li, dt, dd, span, label, legend, address, time, figcaption, blockquote, td) {
		color: var(--hd-text) !important;
		-webkit-text-fill-color: var(--hd-text) !important;
		text-shadow: none !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-forced"] body :where(h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 *, .entry-title, .entry-title *, .post-title, .post-title *, .elementor-heading-title, .elementor-heading-title *) {
		color: var(--hd-heading) !important;
		-webkit-text-fill-color: var(--hd-heading) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-forced"] body :where(a, a *) {
		color: var(--hd-link) !important;
		-webkit-text-fill-color: var(--hd-link) !important;
	}

	/* القصري: أسطح بنفسجية فخمة مع ذهب أكثر حضوراً ودون المساس بالصور. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-palace"] :where([data-hd-s~="float"], article[data-hd-s~="fill"], .elementor-post[data-hd-s~="fill"]) {
		border: 1px solid color-mix(in srgb, var(--hd-primary) 40%, var(--hd-border)) !important;
		box-shadow: 0 18px 42px rgb(5 2 8 / .38) !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-palace"] :where(header, #masthead, .site-header):not([data-hd-s~="img"]) {
		background-color: #180f1e !important;
	}

	/* السينمائي: الصورة والفيديو يقودان المشهد، والنص يوضع على تباين محسوب. */
	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-cinematic"] :where(.hero, [class*="hero"], .elementor-section, .e-con)[data-hd-s~="img"] {
		background-color: rgb(2 7 12 / .52) !important;
		background-blend-mode: multiply !important;
	}

	html.hadara-a11y-color-dark[data-hadara-dark-style="hadara-cinematic"] :where(.elementor-background-overlay, .background-overlay, .overlay) {
		background-color: rgb(2 7 12 / .48) !important;
	}

	/* The accessibility widget owns its own palette. */
	html.hadara-a11y-color-dark :where(.hadara-a11y-root, .hadara-a11y-root *) {
		color-scheme: normal;
	}

	@media (prefers-reduced-motion: no-preference) {
		html.hadara-a11y-color-dark :where(body, header, footer, input, select, textarea, button, [data-hd-s~="fill"]) {
			transition: background-color .18s ease, color .18s ease, border-color .18s ease;
		}
	}

	/* ══════════════════════════════════════════════════════════════════════
	 * Elementor Flip Box — قواعد صريحة مبنيّة على فحصٍ حيّ لموقع hadara.edu.iq
	 *
	 * ما رُصد فعلياً على الموقع (لا تخمين):
	 *  ① كل بطاقة تحمل تدرّجها في ورقة الصفحة `post-10.css` بمحدّدٍ خاصٍّ بمعرّف
	 *     الودجت، مثال حقيقي:
	 *       .elementor-10 .elementor-element-b22d08d .elementor-flip-box__front
	 *         { background: linear-gradient(rgb(68,200,255), rgb(51,47,48)); }
	 *       …__back { background: linear-gradient(rgb(52,97,150), rgb(6,170,138)); }
	 *       …__button { background: linear-gradient(rgb(255,223,0), rgb(0,0,0)); }
	 *     ٣٦ بطاقة، لكل واحدةٍ معرّفٌ مختلف — فلا يمكن استهدافها بمعرّفاتها إطلاقاً؛
	 *     الاستهداف الصحيح بأصناف Elementor البنيوية الثابتة كما هنا.
	 *
	 *  ② الوجهان `__front` و`__back` **متراكبان دائماً** (كلاهما `position:absolute`
	 *     بنفس الحيّز). لذلك لا يكفي تلوين أحدهما: لو بقي أحدهما شفّافاً رُئي الآخر
	 *     من خلفه فيظهر نصّان معاً — وهذا هو عطل «الكارت المتقلّب» بعينه. القاعدة
	 *     هنا تفرض سطحاً **مصمتاً** على كليهما.
	 *
	 *  ③ Elementor يحقن قاعدة تحميلٍ مؤجّل تمسح خلفيات كل ما بعد الحاوية الثالثة:
	 *       .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * {
	 *         background-image: none !important; }
	 *     رُصد أن الحاويات الـ٣٦ كلها في حالة «معلّقة» — فالخلفيات ممسوحةٌ أصلاً
	 *     **قبل أي تدخّلٍ منّا وحتى والوضع الليلي مطفأ**. لهذا كانت كل محاولات
	 *     التلوين السابقة تفشل: كنا نلوّن عنصراً مُفرَّغاً سلفاً بـ`!important`.
	 *     الحلّ أن نضع `background-image` صراحةً من داخل الطبقة — وقد تأكّد عملياً
	 *     أن الطبقة تتغلّب على `!important` غير المُطبَّق الخاص بـElementor.
	 * ══════════════════════════════════════════════════════════════════════ */

	html.hadara-a11y-color-dark :where(.elementor-flip-box__front) {
		background-color: var(--hd-surface) !important;
		background-image: linear-gradient(160deg, var(--hd-elevated), var(--hd-surface)) !important;
		border-color: var(--hd-border) !important;
	}

	html.hadara-a11y-color-dark :where(.elementor-flip-box__back) {
		background-color: var(--hd-elevated) !important;
		background-image: linear-gradient(160deg, var(--hd-surface), var(--hd-elevated)) !important;
		border-color: var(--hd-border) !important;
	}

	/*
	 * الطبقات الداخلية (`__layer__overlay` و`__layer__inner`) تبقى شفّافة عمداً:
	 * تلوينها يضع سطحاً ثانياً فوق سطح الوجه فيبدو الكارت مزدوج الخلفية.
	 */
	html.hadara-a11y-color-dark :where(.elementor-flip-box__layer__overlay, .elementor-flip-box__layer__inner) {
		background-color: transparent !important;
		background-image: none !important;
	}

	/* هوية النص داخل البطاقة: العنوان ذهبي والوصف أبيض — نفس نظام الموقع. */
	html.hadara-a11y-color-dark :where(.elementor-flip-box__layer__title) {
		color: var(--hd-heading) !important;
		-webkit-text-fill-color: var(--hd-heading) !important;
	}

	html.hadara-a11y-color-dark :where(.elementor-flip-box__layer__description) {
		color: var(--hd-text) !important;
		-webkit-text-fill-color: var(--hd-text) !important;
	}

	/*
	 * زرّ البطاقة: تدرّجه الأصلي أصفر فاقع (rgb(255,223,0) → أسود) يبقى صارخاً
	 * على سطحٍ داكن. يُستبدل بلون الهوية مع نصٍّ داكن ليحقّق تبايناً مقروءاً.
	 *
	 * حرج — `:is()` هنا لا `:where()`: قاعدة Elementor الأصلية تستهدفه بمحدّدٍ
	 * مركّب `.elementor-flip-box__button.elementor-button` بوزن (0,2,0)، بينما
	 * `:where()` **تصفّر** الوزن فتُنتج (0,1,1) فتخسر. رُصد هذا بالقياس الحيّ:
	 * العنوان والوصف تلوّنا بينما بقي الزرّ بلونه الأصلي. `:is()` تحتفظ بوزن
	 * أثقل حجّةٍ داخلها فيتساوى الوزنان ثم تحسم الطبقة لصالحنا.
	 */
	html.hadara-a11y-color-dark :is(.elementor-flip-box__button, .elementor-flip-box__button.elementor-button) {
		background-color: var(--hd-primary) !important;
		background-image: none !important;
		color: #17140d !important;
		-webkit-text-fill-color: #17140d !important;
		border-color: var(--hd-primary) !important;
	}

	/*
	 * أيقونة البطاقة: قاعدة Elementor الأساسية تعطيها `rgba(0,0,0,.5)` فتذوب في
	 * السطح الداكن. تُرفَع إلى سطحٍ مرتفعٍ بحدٍّ خفيف لتبقى مميّزة.
	 */
	html.hadara-a11y-color-dark :where(.elementor-flip-box .elementor-icon) {
		background-color: var(--hd-elevated) !important;
		color: var(--hd-primary) !important;
		border-color: var(--hd-border) !important;
	}

	/*
	 * علاج جذر مشكلة التحميل المؤجّل: أي حاويةٍ لم تُطلَق بعد تُمسح خلفيات كل
	 * أبنائها. نُعيد رسم الأسطح المصنَّفة داخلها صراحةً حتى لا تظهر شفّافةً على
	 * خلفية الصفحة أثناء انتظار الإطلاق.
	 */
	html.hadara-a11y-color-dark .e-con.e-parent:not(.e-lazyloaded) :where([data-hd-s~="fill"], [data-hd-s~="grad"]) {
		background-image: linear-gradient(160deg, var(--hd-elevated), var(--hd-surface)) !important;
	}

}