.filters-panel{ position: sticky; top: 12px; }
.filter-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.filter-title{
  font-weight:900;
  font-size:14px;
  margin-bottom:10px;
  color:#111827;
  position:relative;
  padding-right:10px;
}
.filter-title::before{
  content:"";
  position:absolute;
  right:0; top:4px; bottom:4px;
  width:3px; border-radius:6px;
  background: linear-gradient(180deg,#1565C0 0%, #FF9800 100%);
}

.filter-scroll{ max-height: 240px; overflow:auto; padding-left:4px; }

/* دسته‌ها */
.cat-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px;
  border-radius:12px; text-decoration:none;
  color:#111827; font-weight:800; font-size:13px;
  transition:.15s ease;
}
.cat-row i{ opacity:.55; font-size:12px; }
.cat-row:hover{ background:rgba(21,101,192,.06); color:#0D47A1; }
.cat-row.is-active{ background:rgba(21,101,192,.12); color:#0D47A1; }

/* چک‌باکس‌ها */
.check-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 8px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  margin-bottom:4px;
  transition:.15s ease;
}
.check-row:hover{ background:rgba(21,101,192,.06); }
.check-row input{ width:16px; height:16px; }
.check-row .muted{ color:#6B7280; font-weight:700; margin-right:6px; }

/* برند سرچ */
.brand-search{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  font-size:13px;
  outline:none;
  margin-bottom:10px;
}
.brand-search:focus{ border-color: rgba(21,101,192,.45); }

/* ====== Sortbar ====== */
.sortbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.sort-left{ display:flex; align-items:center; gap:8px; font-weight:900; color:#111827; }
.sort-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.sort-btn{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  transition:.15s ease;
}
.sort-btn:hover{ background:rgba(21,101,192,.06); border-color:rgba(21,101,192,.18); color:#0D47A1; }
.sort-btn.active{ background:rgba(21,101,192,.12); border-color:rgba(21,101,192,.28); color:#0D47A1; }

/* ====== Active filter chips ====== */
.active-filters .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,152,0,.12);
  border:1px solid rgba(255,152,0,.35);
  color:#111827;
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  font-size:12.5px;
}
.chip button{
  border:none; background:transparent;
  font-weight:900; cursor:pointer; opacity:.75;
}
.chip button:hover{ opacity:1; }

/* ====== Mobile offcanvas look ====== */
.filters-offcanvas .offcanvas-body{ background:#f7f9fc; }

/* لودر همون قبلی خودت */
/* ---------- Reset Filters Button (Soft Danger) ---------- */
.reset-filters-soft{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 10px;

  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;

  border: 1px dashed rgba(220, 53, 69, 0.4);
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  transition: all .25s ease;
}

.reset-filters-soft i{
  font-size: 15px;
}

.reset-filters-soft:hover{
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.7);
  transform: translateY(-1px);
}

.reset-filters-soft:active{
  transform: scale(0.98);
}

/* ================================
   Custom Checkbox – Filters Panel
================================ */

.filters-panel .check-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;

  font-size: 14px;
  font-weight: 700;
  color: #111827;

  transition: background .18s ease, box-shadow .18s ease;
}

.filters-panel .check-row:hover{
  background: rgba(21,101,192,.06);
}

/* مخفی کردن input اصلی */
.filters-panel .check-row input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* متن */
.filters-panel .check-row span{
  padding-right: 34px;
  position: relative;
  line-height: 1.4;
}

/* باکس چک */
.filters-panel .check-row span::before{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);

  width:22px;
  height:22px;
  border-radius:8px;

  border:2px solid rgba(15,23,42,.18);
  background:#fff;

  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: .18s ease;
}

/* تیک */
.filters-panel .check-row span::after{
  content:"";
  position:absolute;
  right:7px;
  top:45%;
  transform: translateY(-50%) rotate(45deg) scale(.6);

  width:7px;
  height:12px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;

  opacity:0;
  transition:.18s ease;
}

/* checked */
.filters-panel .check-row input:checked + span::before{
  background: linear-gradient(135deg,#1565C0,#0D47A1);
  border-color: transparent;
}

.filters-panel .check-row input:checked + span::after{
  opacity:1;
  transform: translateY(-50%) rotate(45deg) scale(1);
}

/* ردیف فعال (حس انتخاب) */
.filters-panel .check-row input:checked + span{
  color:#0D47A1;
}

/* برند – متن فرعی */
.filters-panel .brand-row small.muted{
  font-weight:500;
  color:#6B7280;
  margin-right:4px;
}

/* فاصله بین گزینه‌ها */
.filters-panel .filter-card .check-row + .check-row{
  margin-top:6px;
}

/* ====== Collapsible Filter Cards ====== */

.filter-title.filter-toggle-btn{
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
  padding: 0 10px 0 0;

  font-weight: 900;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  text-align: right;
}

.filter-title.filter-toggle-btn span{
  display: inline-flex;
  align-items: center;
}

.filter-title.filter-toggle-btn i{
  font-size: 12px;
  color: #6B7280;
  transition: transform .25s ease;
}

.filter-title.filter-toggle-btn.is-open i{
  transform: rotate(180deg);
}

.filter-collapse{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}

.filter-collapse.is-open{
  overflow: auto;
}