/* لندینگ v2 -- ظاهر تازه‌ی فیلترینگ (۱۴۰۵/۰۸/۱۲)، طبق اتود دسکتاپ A و موبایل C
   فقط CSS (+ یک سرتیتر کوچک با JS در bpr-landing-v2-tabs.js)؛ موتور فیلتر (bpr-cat-filter.js)، آکاردئون، اسلایدر قیمت و کشوی موبایل
   همان‌ها هستند و رفتارشان عوض نشده. فقط وقتی فعال است که صفحه روی قالب «لندینگ تازه (v2)» باشد (کلاس html.bpr-lv2-on).
   ستون فیلتر بیرون از .bpr-lv2 است (aside) و کشوی موبایل زیر body؛ برای همین انتخابگرها با html.bpr-lv2-on شروع می‌شوند.
   برگرداندن به حالت قبل: برداشتن خط <link> این فایل از templates/executive_tpls/products/product_category_landing_v2.tpl.html */

/* ------------------------------------------------------------------ ستون فیلتر: کارت گرد، سرتیتر، گروه‌های ساده */
html.bpr-lv2-on .products-filters-sh2 {
    /* قاب واضح: بردر هم‌خانواده‌ی کاشی‌ها + سایه. (ستون aside overflow دارد و سایه‌ی بیرونی را می‌برد؛ پس بردر اصلی‌ترین نشانه است) */
    width: calc(100% - 4px);
    margin: 2px;
    border: 1.5px solid #BFD9DC;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 26px -14px rgba(11, 110, 105, .45);
    overflow: hidden;
    padding: 0 0 8px;
}
/* سرتیتر: ساده و سفید (بدون نوار گرادیانتی)، فقط آیکون + عنوان و یک خط جداکننده */
html.bpr-lv2-on .bpr-lv2-fh {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; direction: rtl;
    padding: 16px 20px 12px; margin: 0;
    background: none;
    border-bottom: 1px solid #EEF2F6;
}
html.bpr-lv2-on .bpr-lv2-fh b { display: inline-flex; align-items: center; gap: 9px; font-family: "bprYekanBold", byekan, "bYekan", Tahoma, sans-serif; font-size: 16px; font-weight: 700; color: #0B2A4A; }
html.bpr-lv2-on .bpr-lv2-fh b::before {
    content: ""; width: 20px; height: 20px; background: #0B8F88;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18l-7 8.5V20l-4-2v-4.5L3 5Z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18l-7 8.5V20l-4-2v-4.5L3 5Z'/></svg>") center / contain no-repeat;
}
html.bpr-lv2-on .bpr-lv2-fh a { display: none; font-size: 12px; font-weight: 700; color: #C93B31; cursor: pointer; text-decoration: none; padding: 3px 10px; border-radius: 999px; background: #FDECEA; }
html.bpr-lv2-on .bpr-lv2-fh.has-active a { display: inline; }
html.bpr-lv2-on .bpr-lv2-fh a:hover { background: #FAD9D5; text-decoration: none; }

html.bpr-lv2-on .products-filters-sh2 .filter-item-sh2 { background: none; }
html.bpr-lv2-on .products-filters-sh2 .slide-select-sh2 > span,
html.bpr-lv2-on .products-filters-sh2 #price-dropdown-toggle {
    height: auto !important;
    min-height: 48px;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.6;
    color: #1F2D3D !important;
    background: none !important;
    border: 0 !important;
    border-top: 1px solid #EEF2F6 !important;
    border-radius: 0 !important;
    transition: color .2s, background .2s;
}
html.bpr-lv2-on .products-filters-sh2 .filter-item-sh2:first-of-type #price-dropdown-toggle { border-top: 0 !important; }
html.bpr-lv2-on .products-filters-sh2 .slide-select-sh2 > span:hover,
html.bpr-lv2-on .products-filters-sh2 #price-dropdown-toggle:hover { background: #F3FBFA !important; color: #0B6E69 !important; }
html.bpr-lv2-on .products-filters-sh2 .slide-select-sh2 > span i.fa,
html.bpr-lv2-on .products-filters-sh2 #price-dropdown-toggle i.fa { color: #9AA7B6; font-size: 14px; }
html.bpr-lv2-on .products-filters-sh2 .slide-select-sh2 > span i.fa-chevron-up,
html.bpr-lv2-on .products-filters-sh2 #price-dropdown-toggle i.fa-chevron-up { color: #0B8F88 !important; }
html.bpr-lv2-on .products-filters-sh2 .slide-select-sh2 > span::after { display: none !important; }

/* لیست گزینه‌ها (باز) */
html.bpr-lv2-on .products-filters-sh2 .filter-opt-list-sh2 { background: #F2FAF9; border: 1px solid #DDEEEC; border-radius: 16px; margin: 0 12px 10px; padding: 6px 8px 8px; width: auto; box-sizing: border-box; box-shadow: none; }
html.bpr-lv2-on .products-filters-sh2 .filter-opt-list-sh2 .filter-search-box-sh2 {
    width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 8px 14px; font-size: 12.5px;
    border: 1px solid #DCE3EC; border-radius: 999px; background: #fff; box-shadow: none; color: #33414F;
}
html.bpr-lv2-on .products-filters-sh2 .filter-opt-list-sh2 .filter-search-box-sh2:focus { border-color: #0B8F88; box-shadow: 0 0 0 3px rgba(26, 195, 186, .15); }
html.bpr-lv2-on .products-filters-sh2 .bf-li { margin: 0 !important; padding: 6px 8px; border-radius: 10px; font-size: 13.5px !important; transition: background .15s; }
html.bpr-lv2-on .products-filters-sh2 .bf-li:hover { background: #E9F6F5; }
html.bpr-lv2-on .products-filters-sh2 .bf-lb { font-size: 13.5px !important; font-weight: 600 !important; color: #2B3A4A; line-height: 1.7; }
html.bpr-lv2-on .products-filters-sh2 .bf-in,
html.bpr-lv2-on .filter-drawer-body-sh2 .bf-in {
    -webkit-appearance: none; appearance: none;
    width: 19px !important; height: 19px !important;
    margin: 0 0 0 9px !important; vertical-align: middle !important;
    border: 1.5px solid #B9C6D4; border-radius: 6px; background: #fff; cursor: pointer;
    transition: background .15s, border-color .15s;
}
html.bpr-lv2-on .products-filters-sh2 .bf-in:checked,
html.bpr-lv2-on .filter-drawer-body-sh2 .bf-in:checked {
    border-color: #0B8F88;
    background: #0B8F88 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.4 8.4l3 3 6.2-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 13px no-repeat;
}
html.bpr-lv2-on .products-filters-sh2 .bf-in:focus-visible { outline: 2px solid #1AC3BA; outline-offset: 2px; }

/* چیپ فیلترهای فعال */
html.bpr-lv2-on .products-filters-sh2 .active-filters-sh2 { padding: 2px 16px 10px; margin: 0; gap: 6px; }
html.bpr-lv2-on .products-filters-sh2 .active-filter-sh2 {
    width: auto; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 999px;
    background: #E3F8F5; border: 1px solid #1AC3BA; color: #0B6E69;
    font-size: 12px !important; font-weight: 700;
}
html.bpr-lv2-on .products-filters-sh2 .active-filter-sh2 span { margin: 0; }
html.bpr-lv2-on .products-filters-sh2 .active-filter-sh2 i.fa-close { position: static !important; flex: none; margin: 0; color: #0B6E69; font-size: 11px; opacity: .8; }
html.bpr-lv2-on .products-filters-sh2 .active-filter-sh2 i.fa-close:hover { color: #D8453B; opacity: 1; }

/* قیمت: اسلایدر دو دستگیره + ورودی‌های گرد */
html.bpr-lv2-on .products-filters-sh2 .price-dropdown-content { background: #F2FAF9; border: 1px solid #DDEEEC; border-radius: 16px; margin: 0 12px 10px; padding: 14px 14px 12px; }
html.bpr-lv2-on .products-filters-sh2 .price-range-slider-container { padding: 6px 12px 10px; }
html.bpr-lv2-on #price-range-slider.ui-slider { height: 5px; border: 0; border-radius: 5px; background: #DCE5EE; margin: 10px 0; }
html.bpr-lv2-on #price-range-slider .ui-slider-range { background: linear-gradient(90deg, #1AC3BA, #0B8F88); border-radius: 5px; }
html.bpr-lv2-on #price-range-slider .ui-slider-handle {
    width: 20px; height: 20px; top: -8px; margin-left: -10px; border-radius: 50%; cursor: grab;
    background: #fff; border: 3px solid #0B8F88; box-shadow: 0 4px 10px -3px rgba(11, 110, 105, .55); outline: none;
}
html.bpr-lv2-on #price-range-slider .ui-slider-handle:focus-visible { box-shadow: 0 0 0 4px rgba(26, 195, 186, .3); }
html.bpr-lv2-on .products-filters-sh2 .price-dropdown-content .input-group .form-control,
html.bpr-lv2-on .products-filters-sh2 .price-dropdown-content .input-group-addon {
    background: #fff; border: 1px solid #DCE3EC !important; height: 38px; color: #33414F;
}
html.bpr-lv2-on .products-filters-sh2 .price-dropdown-content .input-group .form-control { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
html.bpr-lv2-on .products-filters-sh2 .price-dropdown-content .input-group-addon.price-label-addon-sh2 { border-radius: 0 12px 12px 0; border-left: 0 !important; }
html.bpr-lv2-on .products-filters-sh2 .price-dropdown-content .input-group-addon.price-unit-addon-sh2 { border-radius: 12px 0 0 12px; border-right: 0 !important; }
html.bpr-lv2-on .products-filters-sh2 #apply-price-filter-btn { height: 38px; border-radius: 12px !important; background: linear-gradient(135deg, #1AC3BA, #0B8F88) !important; border-color: #0B8F88 !important; font-weight: 700; box-shadow: 0 10px 20px -12px rgba(11, 110, 105, .7); }

/* ------------------------------------------------------------------ موبایل: کشوی فیلتر = پنل پایین‌کشو */
@media (max-width: 767px) {
    html.bpr-lv2-on .filter-drawer-overlay-sh2 { background: rgba(11, 42, 74, .5); }
    html.bpr-lv2-on .filter-drawer-sh2 {
        top: auto; bottom: 0; left: 0; right: 0; height: 88vh; height: 88dvh; max-height: 88vh;
        border-radius: 26px 26px 0 0; transform: translateY(105%);
        box-shadow: 0 -14px 44px rgba(0, 43, 81, .28);
    }
    html.bpr-lv2-on .filter-drawer-sh2.is-open { transform: translateY(0); }
    html.bpr-lv2-on .filter-drawer-head-sh2 { position: relative; padding: 22px 18px 12px; border-bottom: 1px solid #EEF2F6; border-radius: 26px 26px 0 0; }
    html.bpr-lv2-on .filter-drawer-head-sh2::before { content: ""; position: absolute; top: 8px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: #D5DEE8; }
    html.bpr-lv2-on .filter-drawer-title-sh2 { font-family: "bprYekanBold", byekan, "bYekan", Tahoma, sans-serif; font-size: 16px; font-weight: 700; color: #0B2A4A; }
    html.bpr-lv2-on .filter-drawer-title-sh2 .fa { color: #0B8F88; }
    html.bpr-lv2-on .filter-drawer-close-sh2 { background: #F1F4F8; color: #4B5563; }
    html.bpr-lv2-on .filter-drawer-body-sh2 { padding: 4px 16px 0; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .products-filters-sh2 { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; overflow: visible; width: 100%; margin: 0; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .bpr-lv2-fh { padding: 8px 4px 4px; margin: 0; background: none; border: 0; justify-content: flex-start; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .bpr-lv2-fh b { display: none; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .products-filters-sh2 .filter-item-sh2 { padding: 0 !important; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .slide-select-sh2 > span,
    html.bpr-lv2-on .filter-drawer-body-sh2 #price-dropdown-toggle {
        font-size: 15px !important; padding: 16px 6px !important; min-height: 54px;
        border: 0 !important; border-top: 1px solid #EEF2F6 !important; border-radius: 0 !important; background: none !important;
    }
    html.bpr-lv2-on .filter-drawer-body-sh2 .filter-item-sh2:first-of-type #price-dropdown-toggle { border-top: 0 !important; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .slide-select-sh2 > span i.fa,
    html.bpr-lv2-on .filter-drawer-body-sh2 #price-dropdown-toggle i.fa { left: 6px; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .filter-opt-list-sh2 { margin: 0 0 12px; border-radius: 16px; max-height: 360px; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .bf-li { padding: 9px 8px; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .bf-in { width: 22px !important; height: 22px !important; border-radius: 7px; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .bf-lb { font-size: 15px !important; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .price-dropdown-content { margin: 0 0 12px; }
    html.bpr-lv2-on .filter-drawer-body-sh2 .filter-mobile-apply-wrap-sh2 { padding: 12px 0 14px; background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0)); }
    html.bpr-lv2-on .filter-drawer-body-sh2 .apply-filters-mobile-sh2 {
        border-radius: 16px; font-size: 16px; font-weight: 700; padding: 14px;
        background: linear-gradient(135deg, #1AC3BA, #0B8F88); box-shadow: 0 14px 26px -14px rgba(11, 110, 105, .75);
    }
    html.bpr-lv2-on .filter-drawer-body-sh2 .apply-filters-mobile-sh2:disabled,
    html.bpr-lv2-on .filter-drawer-body-sh2 .apply-filters-mobile-sh2[disabled] { background: #DDE3EA; box-shadow: none; }
}

/* موبایل: نوار «فیلتر / مرتب‌سازی» همیشه روی صفحه می‌ماند (چسبان زیر بالای صفحه).
   sticky فقط داخل والدِ نزدیکش کار می‌کند؛ پس خودِ ستونِ نوار چسبان می‌شود (والدش .row.producs کل لیست است)،
   و دو نگهدارنده‌ی overflow:hidden به clip عوض می‌شوند (clip نگهدارنده‌ی اسکرول نمی‌سازد؛ flow-root همان مهار float را نگه می‌دارد). */
@media (max-width: 767px) {
    html.bpr-lv2-on .container, html.bpr-lv2-on .mod-content-internal { overflow: clip; }
    html.bpr-lv2-on .mod-content-internal { display: flow-root; }
    html.bpr-lv2-on .row.producs > div:has(> .product-toolbar) {
        position: sticky; top: 0; z-index: 40; float: none; width: 100%;
        padding-top: 6px; padding-bottom: 6px;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        box-shadow: 0 8px 20px -16px rgba(0, 43, 81, .45);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.bpr-lv2-on .filter-drawer-sh2 { transition: none; }
}
