/* ════════════════════════════════════════════════════════════════════
   DM Gold — حالت شب (Dark / Night Mode)
   ════════════════════════════════════════════════════════════════════
   ⚠ این فایل «پالت» ندارد. تمامِ رنگ‌های حالت شب از یک بلوکِ توکن می‌آیند که
   PHP در wp_head چاپ می‌کند (dmhouse_dark_mode_css در inc/settings/settings-general.php)
   و مقادیرش از تنظیماتِ قالب خوانده می‌شود. اگر رنگی را این‌جا هارد-کد کنی،
   کنترلِ مدیر روی آن رنگ از بین می‌رود.

   اینجا فقط چیزهایی می‌آید که با «عوض‌کردنِ توکن» درست نمی‌شوند:
   عناصری که رنگشان در مارک‌آپِ افزونه‌های ثالث یا در استایل‌های مرورگر نشسته،
   سایه‌ها (که باید در زمینهٔ تیره عمیق‌تر شوند) و تصاویری که خودشان روشن‌اند.
   ════════════════════════════════════════════════════════════════════ */

/* ── پایه ───────────────────────────────────────────────────────── */
body.theme-dark {
    background-color: var(--dm-bg-soft);
    color: var(--dm-text);
}

/*
 * ⚠ عمداً به‌جای رنگِ ثابت از توکنِ متنِ پررنگ استفاده می‌شود، ولی عنوان‌هایی که
 * خودشان کلاسِ رنگی دارند دست‌نخورده می‌مانند: این قانون وزنِ ۰-۱-۱ دارد و از
 * هر قانونِ تک‌کلاسه (۰-۱-۰) بالاتر است، پس فقط عنوان‌هایی را می‌گیرد که رنگِ
 * صریح ندارند و در غیر این صورت متنِ تیره روی زمینهٔ تیره می‌ماندند.
 */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
    color: var(--dm-text-strong);
}

/* ── فرم‌ها ─────────────────────────────────────────────────────────
   مارک‌آپِ ورودی‌ها بیشتر از هستهٔ وردپرس/ووکامرس یا افزونه‌ها می‌آید و هیچ
   کلاسِ قالبِ ما را ندارد؛ پس این‌جا با نوعِ عنصر هدف گرفته می‌شوند. */
body.theme-dark input[type="text"],
body.theme-dark input[type="search"],
body.theme-dark input[type="email"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="url"],
body.theme-dark input[type="number"],
body.theme-dark input[type="password"],
body.theme-dark textarea,
body.theme-dark select {
    background-color: var(--dm-paper-2);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: var(--dm-text-muted);
    opacity: 1; /* فایرفاکس پیش‌فرض شفافش می‌کند و در زمینهٔ تیره تقریباً محو می‌شود */
}

body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
    border-color: var(--dm-primary);
    outline-color: var(--dm-primary);
}

/* ── جدول‌ها (سبد خرید، سفارش‌ها، حساب کاربری) ───────────────────── */
body.theme-dark table,
body.theme-dark table th,
body.theme-dark table td {
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* ── سایه‌ها ────────────────────────────────────────────────────────
   سایهٔ روشن روی زمینهٔ تیره دیده نمی‌شود؛ عمقِ بیشتر همان نقشِ جداکنندگی را
   بازمی‌گرداند. فقط ظرف‌های اصلی، نه هر عنصری. */
body.theme-dark .dm-main-header,
body.theme-dark .mobile-sticky-nav,
body.theme-dark .dm-mini-cart-panel,
body.theme-dark .offcanvas-inner {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45) !important;
}

/* ── تصاویرِ ذاتاً روشن ───────────────────────────────────────────────
   ⚠ عمداً هیچ فیلترِ سراسری روی <img> گذاشته نشده: عکسِ محصولِ طلا نباید
   دست‌کاری شود. فقط لوگو، که معمولاً تک‌رنگِ تیره روی زمینهٔ سفید است، در
   حالتِ شب کمی روشن‌تر می‌شود تا محو نشود. */
body.theme-dark .header-logo img,
body.theme-dark .mobile-logo img,
body.theme-dark .dmh-footer__logo img {
    filter: brightness(1.15);
}

/* ── دکمهٔ تغییر تم: تعویض آیکون خورشید/ماه ───────────────────────── */
.dm-theme-toggle .icon-moon { display: none; }
body.theme-dark .dm-theme-toggle .icon-sun { display: none; }
body.theme-dark .dm-theme-toggle .icon-moon { display: block; }

/* ⚠ آیکونِ فعالِ حالت شب با رنگِ تأکید دیده می‌شود تا کاربر بفهمد کدام حالت روشن است */
body.theme-dark .dm-theme-toggle {
    color: var(--dm-primary) !important;
}

/* ── پیام‌های ووکامرس ───────────────────────────────────────────────
   این‌ها را خودِ ووکامرس با زمینهٔ روشن چاپ می‌کند و هیچ توکنی از ما ندارند. */
body.theme-dark .woocommerce-info,
body.theme-dark .woocommerce-message,
body.theme-dark .woocommerce-error,
body.theme-dark .woocommerce-notice {
    background-color: var(--dm-paper-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* ── نوارِ اسکرول ───────────────────────────────────────────────────
   نوارِ روشنِ پیش‌فرض در کنارِ صفحهٔ تیره مثل یک خطِ سفید می‌زند بیرون. */
body.theme-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.theme-dark ::-webkit-scrollbar-track {
    background: var(--dm-bg-soft);
}

body.theme-dark ::-webkit-scrollbar-thumb {
    background: var(--dm-paper-2);
    border-radius: 8px;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-border);
}

/* ════════════════════════════════════════════════════════════════════
   لایهٔ سازگاری با افزونه‌ها
   ════════════════════════════════════════════════════════════════════
   ⚠ هیچ‌کدام از افزونه‌های خانه حالت شب ندارند؛ همه‌شان یک پالتِ روشن را در
   :root چاپ می‌کنند. چون وزنِ :root برابر ۰-۱-۰ و وزنِ body.theme-dark برابر
   ۰-۱-۱ است، بازتعریفِ همان توکن‌ها این‌جا همیشه برنده است — بدونِ اینکه یک خط
   از کدِ آن افزونه‌ها دست بخورد و بدونِ اینکه در حالتِ روشن چیزی عوض شود.
   ⚠ این‌جا محلِ درستِ این کار است: مسئولیتِ «ظاهرِ سایت» با قالب است، و اگر این
   رنگ‌ها داخلِ خودِ افزونه‌ها هارد-کد شوند، آن افزونه روی هر سایتِ دیگری هم تیره
   می‌شود.
   ════════════════════════════════════════════════════════════════════ */

/* ── سطوحِ «شیشه‌ای» روی تصویر (آیکون علاقه‌مندی، اشتراک‌گذاری، بزرگ‌نمایی) ──
   این‌ها سفیدِ نیمه‌شفافِ هارد-کد بودند و در حالت شب آیکونِ روشن روی سطحِ سفید
   می‌افتاد ⇒ عملاً نامرئی. توکنِ زیر فقط در همین بلوک تعریف شده، پس حالتِ روشن
   دقیقاً همان سفیدِ قبلی را نگه می‌دارد. */
body.theme-dark {
    --dm-glass: rgba(16, 29, 56, .92);
    --dm-banner-bg: var(--dm-card-bg);
    --dm-banner-muted: var(--dm-text-muted);
}

/* ── آیکونِ سبد خرید (فایلِ SVG آپلودی، پس currentColor روی آن اثری ندارد) ──
   تنها راهِ رنگ‌دادن به یک <img>، فیلتر است: اول کاملاً سیاه، بعد معکوس ⇒ سفیدِ
   تخت. روی هر آیکونی که مدیر آپلود کند کار می‌کند، مستقل از رنگِ اصلی‌اش. */
body.theme-dark .btn-cart .dm-scm-icon-img {
    filter: brightness(0) invert(1);
}

/* ── مگامنو ── */
body.theme-dark {
    --dmmega-text: var(--dm-text);
    --dmmega-primary: var(--dm-primary);
    --dmmega-border: var(--dm-border);

    --dmimg-box-bg: var(--dm-card-bg);
    --dmimg-box-border-color: var(--dm-border);
    --dmimg-box-shadow-color: rgba(0, 0, 0, .55);
    --dmimg-sidebar-item-bg: transparent;
    --dmimg-sidebar-link-color: var(--dm-text);
    --dmimg-sidebar-link-hover-color: var(--dm-primary);
    --dmimg-sidebar-link-hover-bg: var(--dm-paper-2);
    --dmimg-sidebar-hover-border-color: var(--dm-primary);
    --dmimg-icon-bg: var(--dm-paper-2);
    --dmimg-content-bg: transparent;
    --dmimg-title-color: var(--dm-text-strong);
    --dmimg-title-border-color: var(--dm-primary);
    --dmimg-category-color: var(--dm-text);
    --dmimg-category-hover-color: var(--dm-primary);
    --dmimg-tag-bg: var(--dm-paper-2);
    --dmimg-tag-color: var(--dm-text-muted);
    --dmimg-tag-border-color: var(--dm-border);
    --dmimg-tag-hover-bg: var(--dm-primary);

    /* ستون سوم (پرومو) — تصویر + دکمهٔ «مشاهده همه» */
    --dmimg-promo-bg: var(--dm-paper-2);
    --dmimg-promo-btn-bg: transparent;
    --dmimg-promo-btn-color: var(--dm-primary);
    --dmimg-promo-btn-border-color: var(--dm-primary);
    --dmimg-promo-btn-hover-bg: var(--dm-primary);
    --dmimg-promo-btn-hover-color: var(--dm-bg-soft);
    --dmimg-promo-btn-border-hover-color: var(--dm-primary);
}

/* ⚠ تنها رنگِ ستونِ پرومو که توکن ندارد: پس‌زمینهٔ جایگاهِ تصویر. وقتی تصویری
   ست نشده باشد یا هنوز لود نشده، همان مستطیلِ خاکستریِ روشن دیده می‌شود. */
body.theme-dark .dm-megamenu-img-side__promo-img {
    background-color: var(--dm-border);
}

/* ════════════════════════════════════════════════════════════════════
   مودالِ منوی موبایلِ مگامنو (شیتی که با دکمهٔ منو باز می‌شود)
   ════════════════════════════════════════════════════════════════════
   ⚠ این بخش کاملاً هارد-کد است و هیچ توکنی ندارد؛ برخلافِ پنلِ دسکتاپ که با
   بلوکِ توکنِ بالا برمی‌گردد. پس هر سطح باید صریح نوشته شود.

   ⚠ تصحیح نسبت به دورِ قبل: من `.dmmega-modal` را هدف گرفته بودم با این فرضِ
   نادرست که ظرفِ مودال همین است. چنین کلاسی اصلاً وجود ندارد — ظرفِ واقعی
   `.dmmega-bar-modal-inner` است و `.dmmega-modal-*` فقط پیشوندِ اجزای داخلِ آن
   است. یعنی آن قانون روی هیچ عنصری نمی‌نشست و مودالِ موبایل دست‌نخورده سفید
   می‌ماند؛ همان چیزی که گزارش شد.
   ════════════════════════════════════════════════════════════════════ */

/* ظرفِ شیت + سر و بدنه */
body.theme-dark .dmmega-bar-modal-inner {
    background: var(--dm-card-bg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

body.theme-dark .dmmega-modal-head {
    background: var(--dm-card-bg);
    border-bottom-color: var(--dm-border);
}

/* دستگیرهٔ کوچکِ بالای شیت — روشن بود و مثل یک خطِ سفید می‌زد بیرون */
body.theme-dark .dmmega-bar-modal[data-dmmega-modal-pos="sheet"] .dmmega-modal-head::before {
    background: var(--dm-border);
}

body.theme-dark .dmmega-bar-modal-bg {
    background: rgba(0, 0, 0, .72);
}

/* نوارِ زبانه‌ها */
body.theme-dark .dmmega-modal-tabs {
    background: var(--dm-paper-2);
}

body.theme-dark .dmmega-modal-tab {
    color: var(--dm-text-muted);
}

/* ⚠ زبانهٔ فعال دست‌نخورده می‌ماند: پس‌زمینه‌اش رنگِ تأکید و متنش سفید است و در
   حالت شب هم درست کار می‌کند. تغییر دادنش تنها نشانهٔ «کجا هستم» را می‌بُرد. */

body.theme-dark .dmmega-modal-close {
    background: var(--dm-paper-2);
    color: var(--dm-text-muted);
}

body.theme-dark .dmmega-modal-close:hover {
    background: var(--dm-border);
    color: var(--dm-text);
}

/* ریلِ سطح‌اول کنارِ پنل */
body.theme-dark .dmmega-modal-rail {
    background: var(--dm-paper-2);
    border-inline-end-color: var(--dm-border);
}

/*
 * ⚠ ردیفِ فعالِ ریل عمداً رنگِ ظرف (نه رنگِ ریل) را می‌گیرد — دقیقاً همان کاری که
 * نسخهٔ روشن با #fff می‌کرد: ردیفِ فعال باید از نوارِ کنارش «بیرون بزند» و به پنل
 * وصل به‌نظر برسد. با یک رنگِ تیره‌ترِ دلبخواه این حسِ اتصال از بین می‌رفت.
 */
body.theme-dark .dmmega-modal-rail-item.is-active {
    background: var(--dm-card-bg);
}

/* برگ‌ها و آکاردئونِ سطوحِ پایین‌تر */
body.theme-dark .dmmega-modal-leaf {
    color: var(--dm-text-muted);
}

body.theme-dark .dmmega-modal-acc {
    background: var(--dm-paper-2);
    color: var(--dm-text-muted);
}

body.theme-dark .dmmega-modal-group-body > .dmmega-modal-branch {
    border-inline-start-color: var(--dm-border);
}

body.theme-dark .dmmega-modal-quick > .dmmega-modal-branch > .dmmega-modal-leaf,
body.theme-dark .dmmega-modal-quick > .dmmega-modal-branch > .dmmega-modal-group {
    border-bottom-color: var(--dm-border);
}

/* ── آفکنواسِ نوارِ بالا از همان افزونه (dmtb-oc) — همان الگو، کلاس‌های دیگر ── */
body.theme-dark .dmtb-oc__inner,
body.theme-dark .dmtb-oc__tabs,
body.theme-dark .dmtb-oc__body,
body.theme-dark .dmtb-oc__sub {
    background: var(--dm-card-bg);
}

body.theme-dark .dmtb-oc__tabs {
    border-bottom-color: var(--dm-border);
}

body.theme-dark .dmtb-oc__tab {
    color: var(--dm-text-muted);
}

body.theme-dark .dmtb-oc__tab.is-active {
    background: var(--dm-paper-2);
    color: var(--dm-text);
}

body.theme-dark .dmtb-oc__close {
    background: var(--dm-glass);
    color: var(--dm-text);
}

body.theme-dark .dmtb-oc__close:hover {
    background: var(--dm-paper-2);
}

body.theme-dark .dmtb-oc__row,
body.theme-dark .dmtb-oc__sub-head,
body.theme-dark .dmtb-oc__group {
    border-bottom-color: var(--dm-border);
}

body.theme-dark .dmtb-oc__back {
    background: var(--dm-paper-2);
    color: var(--dm-text-muted);
}

/* ── مودالِ نرخِ لحظه‌ای (با کلیک روی نوارِ بالای صفحه باز می‌شود) ──
   ⚠ این مودال هیچ توکنی ندارد و کلِ رنگ‌هایش ثابت است، پس تنها راهش قانونِ
   صریح است. متنِ جدول از قانونِ عمومیِ جدول‌ها در همین فایل روشن شده بود ولی
   سطحِ زیرش سفید مانده بود — همان «محتوا سفید است ولی پس‌زمینه درست نیست». */
body.theme-dark .dm-gold-modal-content,
body.theme-dark .dm-gold-section {
    background: var(--dm-card-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

body.theme-dark .dm-gold-modal-header {
    border-bottom-color: var(--dm-border);
}

body.theme-dark .dm-gold-modal-title {
    color: var(--dm-text-strong);
}

body.theme-dark .dm-gold-modal-close {
    color: var(--dm-text-muted);
}

body.theme-dark .dm-gold-table th {
    background: var(--dm-paper-2);
    color: var(--dm-text-muted);
    border-bottom-color: var(--dm-border);
}

body.theme-dark .dm-gold-table td {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}

body.theme-dark .dm-gold-table .dm-empty-row {
    color: var(--dm-text-muted);
}

/* ⚠ پوششِ تیرهٔ پشتِ مودال روی زمینهٔ تیره تقریباً دیده نمی‌شود و مرزِ مودال با
   صفحه گم می‌شود؛ عمیق‌تر می‌شود تا مودال واقعاً «جلو» بیاید. */
body.theme-dark .dm-gold-modal {
    background: rgba(0, 0, 0, .72);
}

/* ── افزونهٔ جستجو و فیلتر (سایدبار آرشیو، ویجت‌ها، مودال) ──
   کلِ افزونه توکن‌محور است، پس یک بلوکِ توکن تمامِ سایدبار را برمی‌گرداند. */
body.theme-dark {
    --dms-surface: var(--dm-card-bg);
    --dms-surface-alt: var(--dm-paper-2);
    --dms-surface-muted: var(--dm-paper-2);
    --dms-border: var(--dm-border);
    --dms-border-light: var(--dm-border);
    --dms-border-soft: var(--dm-border);
    --dms-text: var(--dm-text);
    --dms-text-strong: var(--dm-text-strong);
    --dms-text-muted: var(--dm-text-muted);
    --dms-text-soft: var(--dm-text-muted);
    --dms-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --dms-shadow: 0 4px 12px rgba(0, 0, 0, .45);
    --dms-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
}

/*
 * ⚠ ظرفِ خودِ سایدبار و کارت‌هایش در مارک‌آپِ افزونه رنگِ سفید را از قوانینِ
 * خودشان می‌گیرند نه همیشه از توکن؛ این چند خط همان‌ها را می‌بندد.
 * ⚠ سلکتور با کلاسِ ظرفِ قالب (.dm-archive-sidebar) شروع می‌شود تا این قوانین
 * به مودال یا هر جای دیگری که همان افزونه رندر می‌کند نشت نکند.
 */
body.theme-dark .dm-archive-sidebar .dms-sidebar-box,
body.theme-dark .dm-archive-sidebar .dms-card,
body.theme-dark .dm-archive-sidebar .dms-accordion-item {
    background-color: var(--dm-card-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

body.theme-dark .dm-archive-sidebar .dms-sidebar-box__title,
body.theme-dark .dm-archive-sidebar .dms-widget__title,
body.theme-dark .dm-archive-sidebar .dms-accordion-item__title,
body.theme-dark .dm-archive-sidebar .dms-term-item__label {
    color: var(--dm-text);
}

body.theme-dark .dm-archive-sidebar .dms-term-item__count {
    color: var(--dm-text-muted);
}

/*
 * ⚠ استانداردِ سراسری: عنصری که جاوااسکریپت با اتریبیوتِ hidden مخفی می‌کند،
 * وزنِ ۰-۱-۰ دارد و هر کلاسی که display بدهد آن را می‌بَرد ⇒ عنصر «مخفی» کاملاً
 * دیده می‌شود. این قانون در هر شیوه‌نامه‌ای که JS آن اتریبیوت را جابه‌جا می‌کند
 * لازم است.
 */
[hidden] { display: none !important; }