/* قالبِ نمایشیِ دومِ سایدبارِ فیلتر — نسخهٔ مستقلِ افزونه.
 *
 * چرا این فایل وجود دارد: تا پیش از این، کلاسِ dms-sidebar-box--dmgold فقط
 * روی مارک‌آپ می‌نشست و هیچ استایلی در خودِ افزونه نداشت؛ کلِ ظاهر از CSSِ
 * یک تمِ خاص می‌آمد. یعنی خریدارِ افزونه روی هر تمِ دیگری این قالب را انتخاب
 * می‌کرد و هیچ اتفاقی نمی‌افتاد. حالا طرح داخلِ خودِ افزونه است.
 *
 * ⚠ هر رنگ/فونت با الگویِ var(--x, fallback) نوشته شده: اگر تمِ فعال چنین
 * توکن‌هایی تعریف کرده باشد عیناً با تم هماهنگ می‌شود، و اگر نداشته باشد
 * مقدارِ پشتیبان می‌نشیند و طرح روی هر تمی کامل رندر می‌شود.
 *
 * کلاس‌های js- در این فایل هیچ استایلی نمی‌گیرند مگر به‌عنوان شرطِ حالت (is-open)
 * که خودِ ماژولِ sidebar-accordion.js آن را روی آیتم می‌گذارد.
 */

/* ⚠⚠ ریشهٔ باگِ «جعبه‌توی‌جعبه»: قالبِ اول کلِ سایدبار را یک کارتِ واحد
 * می‌بیند (بوردر/رادیوس/پس‌زمینه روی خودِ .dms-sidebar-box، با خط‌جداکنندهٔ
 * داخلی روی هر بخش)، ولی قالبِ دوم هرکدام از header/plain/accordion-item
 * را کارتِ جداگانهٔ خودش می‌سازد. چون کارتِ بیرونیِ قالبِ اول خنثی نشده
 * بود، هر دو معماری هم‌زمان فعال بودند. اینجا اول کارتِ بیرونی و خط‌های
 * جداکنندهٔ داخلیِ قالبِ اول را صفر می‌کنیم. */
.dms-sidebar-box--dmgold {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__header,
.dms-sidebar-box--dmgold .dms-sidebar-box__plain {
    border-bottom: none;
}

.dms-sidebar-box--dmgold {
    --dmsg-accent: var(--accent, #b68235);
    --dmsg-accent-100: var(--accent-100, #fbf0dd);
    --dmsg-accent-700: var(--accent-700, #7d5411);
    --dmsg-surface: var(--bg, #f6f4f1);
    --dmsg-text: var(--text, #201f1d);
    --dmsg-muted: var(--neutral-500, #9b9797);
    --dmsg-icon: var(--neutral-600, #7d7979);
    --dmsg-divider: var(--divider, rgba(32, 31, 29, .14));
    --dmsg-radius: var(--radius-lg, 14px);

    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--dmsg-text);
}

.dms-sidebar-box--dmgold .dms-sidebar-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__title {
    font-weight: 700;
    font-size: 15px;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__clear {
    font-size: 12px;
    color: var(--dmsg-accent-700);
    text-decoration: none;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__clear:hover {
    color: var(--dmsg-accent);
}

.dms-sidebar-box--dmgold .dms-active-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dms-sidebar-box--dmgold .dms-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dmsg-accent-100);
    color: var(--dmsg-accent-700);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__plain,
.dms-sidebar-box--dmgold .dms-accordion-item {
    border: 1px solid var(--dmsg-divider);
    border-radius: var(--dmsg-radius);
    background: var(--dmsg-surface);
    overflow: hidden;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__plain {
    padding: 14px 16px;
}

/* ⚠ ویجتِ سوییچی (موجودی/پیش‌فروش/کم‌اجرت) با the_widget() رندر می‌شود و
 * مارک‌آپش خودش یک .dms-card کامل است (بوردر+پس‌زمینه+سایه+فاصله‌ی پایین).
 * چون این .dms-card داخلِ .dms-sidebar-box__plain (که خودش هم بوردر و
 * پس‌زمینه دارد) می‌نشیند، نتیجه یک جعبه‌ی توخالی داخل جعبه‌ی دیگر بود.
 * اینجا فقط برای این حالت، جعبه‌ی داخلی خنثی می‌شود تا یک لایه بیشتر نماند. */
.dms-sidebar-box--dmgold .dms-sidebar-box__plain > .dms-card {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.dms-sidebar-box--dmgold .dms-sidebar-box__plain > .dms-card > .dms-card__body {
    padding: 4px 0;
}

/* سوییچ‌های موجودی/پیش‌فروش/کم‌اجرت: به‌جای کپسولِ iOS، همان چک‌باکسِ
 * سادهٔ مربعی که بقیهٔ فیلترها استفاده می‌کنند — یکدست با ظاهرِ کلیِ سایدبار. */
.dms-sidebar-box--dmgold .dms-switch-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    cursor: pointer;
}

.dms-sidebar-box--dmgold .dms-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--dmsg-divider);
    background: var(--dmsg-surface);
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
}

.dms-sidebar-box--dmgold .dms-switch::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 1px;
    background: transparent;
    transition: background .15s;
    /* اطمینان از خنثی‌بودنِ افکتِ پیش‌فرضِ دایره‌ای/جابه‌جایی افزونه */
    width: auto;
    height: auto;
    box-shadow: none;
    transform: none;
}

.dms-sidebar-box--dmgold .dms-switch:checked {
    background: var(--dmsg-accent);
    border-color: var(--dmsg-accent);
}

.dms-sidebar-box--dmgold .dms-switch:checked::after {
    background: #fff9ee;
    transform: none;
}

.dms-sidebar-box--dmgold .dms-switch-row__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--dmsg-text);
    cursor: pointer;
}

.dms-sidebar-box--dmgold .dms-switch-row__label .dms-icon { display: flex; color: var(--dmsg-icon); flex: none; }
.dms-sidebar-box--dmgold .dms-switch-row__label .dms-icon svg { width: 16px; height: 16px; }

.dms-sidebar-box--dmgold .dms-accordion-item__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 14px;
    color: var(--dmsg-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: border-color .2s;
}

.dms-sidebar-box--dmgold .js-dms-accordion-item.is-open .dms-accordion-item__toggle {
    border-bottom-color: var(--dmsg-divider);
}

/* ⚠⚠ ریشهٔ باگِ «دو فلش روی هم»: قالبِ اول (dms-sidebar-builder.css) خودِ
 * همین span را با بوردر می‌کشد (border-right+border-bottom+rotate) — بدونِ
 * هیچ ::before ای. آن قانون بدونِ اسکوپِ dmgold نوشته شده، پس حتی وقتی
 * قالبِ دوم فعال است هم اجرا می‌شود. قالبِ دوم فلشِ خودش را با ::before
 * جداگانه می‌سازد؛ بدونِ خنثی‌کردنِ فلشِ قالبِ اول، هر دو روی هم می‌افتند.
 * پس اینجا اول فلشِ قالبِ اول را روی خودِ عنصر صفر می‌کنیم. */
.dms-sidebar-box--dmgold .dms-accordion-item__chevron {
    width: 15px;
    height: 15px;
    flex: none;
    position: relative;
    border: none !important;
    transform: none !important;
}

.dms-sidebar-box--dmgold .js-dms-accordion-item.is-open .dms-accordion-item__chevron {
    transform: none !important;
}

/* ⚠ اگر «قالبِ قدیمیِ صفحهٔ سرچ» (dms-search-page-legacy.css) هم هم‌زمان فعال باشد، آن فایل
 * رویِ همین چورون‌ها rotate(-135deg)!important می‌گذارد (با همان اختصاصیتِ 0,2,0) — برندهٔ نهایی
 * فقط به ترتیبِ ثبتِ استایل‌ها بستگی دارد، نه به منطق. این‌جا با یک لایهٔ اسکوپِ اضافه
 * (اختصاصیتِ بالاتر) قطعی می‌کنیم که قالبِ دوم همیشه پیروز است. */
.dms-legacy-layout__sidebar .dms-sidebar-box--dmgold .dms-accordion-item__chevron {
    border: none !important;
    transform: none !important;
}
.dms-legacy-layout__sidebar .dms-sidebar-box--dmgold .js-dms-accordion-item.is-open .dms-accordion-item__chevron::before {
    transform: rotate(225deg) !important;
}

/* ⚠⚠ چرخش فقط روی همینِ ::before اعمال می‌شود، نه هم روی خودش هم روی
 * والدش. قبلاً ::before چرخشِ ثابتِ ۴۵ درجه داشت و حالتِ «باز» یک ۱۸۰
 * درجهٔ دیگر روی خودِ والد اضافه می‌کرد؛ چون چرخشِ فرزند و والد جمع
 * می‌شوند، نتیجه ۴۵+۱۸۰=۲۲۵ درجه بود — یک شکلِ کج/قلاب‌مانند، نه فلشِ
 * آینه‌شده. حالا فقط یک نقطهٔ کنترلِ چرخش هست: ۴۵ درجه بسته، ۲۲۵ درجه باز
 * (دقیقاً معادلِ «۴۵ + ۱۸۰» ولی این‌بار روی خودِ عنصر، نه جمعِ دو لایه). */
.dms-sidebar-box--dmgold .dms-accordion-item__chevron::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    border-inline-end: 2px solid var(--dmsg-icon);
    border-bottom: 2px solid var(--dmsg-icon);
    transform: rotate(45deg);
    transition: transform .25s ease;
}

.dms-sidebar-box--dmgold .js-dms-accordion-item.is-open .dms-accordion-item__chevron::before {
    transform: rotate(225deg);
}

.dms-sidebar-box--dmgold .dms-accordion-item__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dmsg-accent);
    margin-inline-start: 6px;
}

.dms-sidebar-box--dmgold .dms-accordion-item__preview {
    padding: 0 16px 10px;
    font-size: 11.5px;
    color: var(--dmsg-muted);
}

.dms-sidebar-box--dmgold .dms-accordion-item__body {
    padding: 14px 16px 16px;
}

/* عنصری که JS با اتریبیوتِ hidden پنهانش می‌کند، بدون این خط دیده می‌ماند
 * (اتریبیوت 0-1-0 است و به هر کلاسی که display بدهد می‌بازد). */
.dms-sidebar-box--dmgold [hidden] {
    display: none !important;
}