﻿.h1, h1 {font-size: 1.7rem}

@media (max-width: 767px) {
    #categoryPageRoot { overflow-x: hidden !important; width: 100% !important; position: relative; }

    #categoryPageRoot .container { overflow-x: hidden !important; max-width: 100% !important; }

    #categoryPageRoot .row { overflow-x: hidden !important; }

    #categoryPageRoot section { overflow-x: hidden; }
}

/* استایل برای صفحه‌بندی */
.pagination-wrapper { direction: rtl; }

.pagination { gap: 0.5rem; }

.pagination .page-item { margin: 0 0.25rem; }

.pagination .page-link { border-radius: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid #dee2e6; color: #0F2E4A; transition: all 0.3s ease; min-width: 40px; text-align: center; }

.pagination .page-link:hover { background-color: #0F2E4A; color: #fff; border-color: #0F2E4A; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15, 46, 74, 0.2); }

.pagination .page-item.active .page-link { background-color: #0F2E4A; border-color: #0F2E4A; color: #fff; font-weight: 600; }

.pagination .page-item.disabled .page-link { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.pagination .page-link i { font-size: 1.1rem; }

/* دسته‌بندی‌ها: نمایش وسط‌چین به‌جای راست‌چین */
#categoryPageRoot .root-category-title,
#categoryPageRoot .category-box .card-title,
#categoryPageRoot .category-banner-title,
#categoryPageRoot .category-banner-count { text-align: center !important; justify-content: center; }

/* فقط وقتی اسلایدر قفل است (تعداد کم)، ردیف دسته‌بندی وسط باشد */
#categoryPageRoot .category-swiper-fade-outer.is-swiper-locked .category-swiper .swiper-wrapper { justify-content: center; }

/* استایل سایدبار فیلتر — مثل سایدبار پروفایل/باکس امتیاز: با اسکرول زیر هدر می‌چسبد و تا فوتر همراه می‌آید بعد سر جایش می‌ماند */
.product-filters-sidebar { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); position: sticky; top: calc(var(--header-height, 0px) + 12px); max-height: calc(100vh - var(--header-height, 0px) - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--C5, #86ccb8) transparent; }

/* تنظیم اسکرول‌بار نازک و شکیل برای سایدبار فیلترها با فاصله از لبه‌ها */
.product-filters-sidebar::-webkit-scrollbar {
    width: 11px;
}
.product-filters-sidebar::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 3px;
    margin-bottom: 3px;
}
.product-filters-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--C5, #86ccb8);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

@media (min-width: 768px) {
    /* ستون سایدبار: فلکس تا aside ارتفاع کامل بگیرد و محدودهٔ sticky تا انتهای محتوا/فوتر باشد */
    #categoryPageRoot .filters-sidebar-col { display: flex; flex-direction: column; }
    #categoryPageRoot .filters-sidebar-col aside { flex: 1 1 auto; min-height: 0; }
    #categoryPageRoot .product-filters-sidebar { align-self: flex-start; }
}

/* فشرده‌تر کردن آیتم‌های فیلتر (ارتفاع کمتر) */
.product-filters-sidebar .filter-group { padding-bottom: 0.6rem; margin-bottom: 0.7rem !important; }
.product-filters-sidebar .form-label { margin-bottom: 0.35rem !important; }
.product-filters-sidebar .products-count-row .filters-loading-indicator { margin-bottom: 0 !important; }

.filter-group { padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0; }

.filter-group:last-child { border-bottom: none; }

/* جستجوی سایدبار — باکس مدرن */
#categoryPageRoot .filter-search-wrap { margin-top: 0.15rem; }
#categoryPageRoot .filter-search-box { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem 0.45rem 0.55rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--C5, #86ccb8) 55%, #e2e8f0); background: linear-gradient(145deg, color-mix(in srgb, var(--C8, #e0ffef) 42%, #fff) 0%, #fff 58%); box-shadow: 0 1px 2px rgba(5, 42, 20, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
#categoryPageRoot .filter-search-box:focus-within { border-color: color-mix(in srgb, var(--C3, #08a379) 70%, var(--C1, #294a41)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--C3, #08a379) 18%, transparent), 0 4px 14px rgba(8, 163, 121, 0.12); background: #fff; }
#categoryPageRoot .filter-search-box.is-pending { border-color: color-mix(in srgb, var(--C3, #08a379) 45%, var(--C5, #86ccb8)); }
#categoryPageRoot .filter-search-box__icon { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--C3, #08a379); background: color-mix(in srgb, var(--C3, #08a379) 12%, transparent); font-size: 1.05rem; pointer-events: none; }
#categoryPageRoot .filter-search-box__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0.35rem 0.15rem; font-size: 0.9375rem; line-height: 1.45; color: var(--C1, #294a41); box-shadow: none !important; }
#categoryPageRoot .filter-search-box__input::placeholder { color: color-mix(in srgb, var(--C5, #86ccb8) 75%, #94a3b8); opacity: 1; }
#categoryPageRoot .filter-search-box__input:focus { outline: none; }
/* جلوگیری از دکمه پاک‌کردن پیش‌فرض مرورگر (type=search) — فقط دکمه سفارشی */
#categoryPageRoot .filter-search-box__input::-webkit-search-cancel-button,
#categoryPageRoot .filter-search-box__input::-webkit-search-decoration,
#categoryPageRoot .filter-search-box__input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
#categoryPageRoot .filter-search-box__input::-ms-clear { display: none; width: 0; height: 0; }
#categoryPageRoot .filter-search-box__clear,
#categoryPageRoot .filter-search-box__pending { flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: color-mix(in srgb, var(--C1, #294a41) 8%, transparent); color: var(--C5, #64748b); transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; }
#categoryPageRoot .filter-search-box__clear:hover { background: color-mix(in srgb, var(--C3, #08a379) 16%, transparent); color: var(--C3, #08a379); }
#categoryPageRoot .filter-search-box__clear[hidden],
#categoryPageRoot .filter-search-box__pending[hidden] { display: none !important; }
#categoryPageRoot .filter-search-hint { min-height: 1.25rem; margin-top: 0.45rem; font-size: 0.78rem; line-height: 1.4; color: color-mix(in srgb, var(--C5, #86ccb8) 88%, #64748b); }
#categoryPageRoot .filter-search-hint.is-active { color: var(--C3, #08a379); }
#categoryPageRoot .filter-search-hint.is-warn { color: #b45309; }
[data-bs-theme="dark"] #categoryPageRoot .filter-search-box,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-search-box { border-color: color-mix(in srgb, var(--C5, #81ad9f) 35%, var(--C4, #1f3a2d)); background: linear-gradient(145deg, color-mix(in srgb, var(--C2, #10261e) 80%, var(--C8, #0b1411)) 0%, var(--C2, #10261e) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
[data-bs-theme="dark"] #categoryPageRoot .filter-search-box:focus-within,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-search-box:focus-within { border-color: var(--C3, #047b54); box-shadow: 0 0 0 3px color-mix(in srgb, var(--C3, #047b54) 22%, transparent); background: color-mix(in srgb, var(--C2, #10261e) 92%, #000); }
[data-bs-theme="dark"] #categoryPageRoot .filter-search-box__input,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-search-box__input { color: var(--C6, #e5e7eb); }
[data-bs-theme="dark"] #categoryPageRoot .filter-search-box__input::placeholder,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-search-box__input::placeholder { color: var(--C5, #81ad9f); }
[data-bs-theme="dark"] #categoryPageRoot .filter-search-hint,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-search-hint { color: var(--C5, #81ad9f); }

/* Price range (double slider) */
.price-slider-wrapper { height: 26px; /* جهت طبیعی RTL */ direction: rtl; }

.price-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 999px; background: var(--C4); z-index: 1; }

.price-range { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 999px; background: var(--C3); z-index: 2; right: 0; width: 0; left: auto; }

.price-slider-wrapper input[type=range] { position: absolute; left: 0; right: 0; top: -2px; width: 100%; pointer-events: none; background: transparent; z-index: 3; direction: rtl; }

@-moz-document url-prefix() {
    .price-slider-wrapper input[type=range] { top: 1px; }
}

/* Hide native tracks so they never cover thumbs */
.price-slider-wrapper input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 6px; }
.price-slider-wrapper input[type=range]::-moz-range-track { background: transparent; height: 6px; }

.price-slider-wrapper input[type=range]::-webkit-slider-thumb { pointer-events: all; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--C3); border: 3px solid var(--C2); cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; }

.price-slider-wrapper input[type=range]::-webkit-slider-thumb:hover { background: var(--C4); border-color: var(--C2); transform: scale(1.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }

.price-slider-wrapper input[type=range]::-webkit-slider-thumb:active { background: var(--C4); transform: scale(1.15); }

.price-slider-wrapper input[type=range]::-moz-range-thumb { pointer-events: all; -moz-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--C3); border: 3px solid var(--C2); cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; }

.price-slider-wrapper input[type=range]::-moz-range-thumb:hover { background: var(--C4); border-color: var(--C2); transform: scale(1.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }

.price-slider-wrapper input[type=range]::-moz-range-thumb:active { background: var(--C4); transform: scale(1.15); }

/* موبایل: فیلتر به‌صورت دراور؛ از 768px به بالا سایدبار در صفحه نمایش داده می‌شود */
.filters-backdrop { display: none; position: fixed; inset: 0; background-color: #000000a3; z-index: 1051; }

.filters-backdrop.is-open { display: block; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); isolation: isolate; transform: translateZ(0); }

@media (max-width: 767px) {
    /* دکمهٔ فیلتر: با transform همگام اسکرول زیر هدر می‌چسبد (بدون پرش) */
    #categoryPageRoot .filters-mobile-sticky { position: relative; z-index: 1; padding-top: 0.35rem; padding-bottom: 0.35rem; margin-bottom: 0.75rem !important; will-change: transform; transition: box-shadow 0.28s ease, background-color 0.28s ease; }

    #categoryPageRoot .filters-mobile-sticky.is-stuck { z-index: 1025; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.14); }

    [data-bs-theme="dark"] #categoryPageRoot .filters-mobile-sticky.is-stuck,
    :root[data-bs-theme="dark"] #categoryPageRoot .filters-mobile-sticky.is-stuck { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.4); }

    .product-filters-sidebar { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(86vw, 340px); height: auto; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1051; transform: translateX(110%); transition: transform .25s ease-in-out; border-radius: 0; box-sizing: border-box; }

    .product-filters-sidebar.is-open { transform: translateX(0); padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }

    /* جلوگیری از تداخل انیمیشن با دراور موبایل */
    .product-filters-sidebar.animate-element.animate-in:not(.is-open) { transform: translateX(110%) !important; }
}

/* Sidebar loading indicator */
.filters-loading-indicator { display: inline-flex; align-items: center; gap: .4rem; visibility: hidden; opacity: 0; transition: opacity .15s ease; position: relative; z-index: 2; }

.filters-loading-indicator.is-loading { visibility: visible; opacity: 1; }

/* تعداد محصول راست سایدبار؛ لودر بلافاصله سمت راست متن (لبه راست ردیف) */
.products-count-row { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; min-height: 20px; position: relative; width: 100%; direction: ltr; }
.products-count-row #productsCountText { direction: rtl; text-align: right; }

/* Better checkbox UI (only this page) */
#categoryPageRoot .filters-check { display: flex; align-items: center; gap: .6rem; padding: .35rem .25rem; border-radius: 10px; }

#categoryPageRoot .filters-check .form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; border: 2px solid #cfd4da; }

#categoryPageRoot .filters-check .form-check-input:checked { background-color: var(--C1); border-color: var(--C1); }

#categoryPageRoot .filters-check .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(143, 31, 47, 0.2); }

#categoryPageRoot .filters-check .form-check-label { cursor: pointer; user-select: none; margin: 0; }

#categoryPageRoot .filters-check:hover { background: rgba(143, 31, 47, 0.06); }

/* فیلتر لیست‌های بلند: حداکثر چند ردیف + گرادیان و دکمهٔ «نمایش همه» — لایت / دارک */
#categoryPageRoot .filter-expand-block { --filter-fade-from: rgba(255, 255, 255, 0); --filter-fade-to: #ffffff; position: relative; margin-top: 0.15rem; }

[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block { --filter-fade-from: transparent; --filter-fade-to: var(--C2, #14322a); }

#categoryPageRoot .filter-expand-block__clip { position: relative; overflow: hidden; transition: max-height 0.28s ease; }

#categoryPageRoot .filter-expand-block.is-clipped:not(.is-expanded) .filter-expand-block__clip { max-height: 12.85rem; }

#categoryPageRoot .filter-expand-block.is-expanded .filter-expand-block__clip { max-height: none; overflow: visible; }

#categoryPageRoot .filter-expand-block__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 2.75rem; pointer-events: none; opacity: 0; transition: opacity 0.22s ease; background: linear-gradient(to top, var(--filter-fade-to) 28%, var(--filter-fade-from) 100%); }

#categoryPageRoot .filter-expand-block.is-clipped:not(.is-expanded) .filter-expand-block__shade { opacity: 1; }

#categoryPageRoot .filter-expand-block__toggle { margin-top: 0.2rem; padding-left: 0 !important; padding-right: 0 !important; font-size: 0.8125rem; font-weight: 600; color: var(--C1, #8f1f2f) !important; border: none; box-shadow: none !important; align-self: flex-start; }

#categoryPageRoot .filter-expand-block__toggle:hover,
#categoryPageRoot .filter-expand-block__toggle:focus { color: var(--C3, #047b54) !important; text-decoration: underline !important; }

[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block__toggle,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block__toggle { color: var(--C3, #eb9e32) !important; }

[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block__toggle:hover,
[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block__toggle:focus,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block__toggle:hover,
:root[data-bs-theme="dark"] #categoryPageRoot .filter-expand-block__toggle:focus { color: var(--C6, #f3f4f6) !important; }

/* سواتچ رنگ کنار مقدار واریانت */
#categoryPageRoot .variant-color-swatch { flex-shrink: 0; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }

[data-bs-theme="dark"] #categoryPageRoot .variant-color-swatch,
:root[data-bs-theme="dark"] #categoryPageRoot .variant-color-swatch { border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }