/* === headings (details > summary) bigger + dropdown arrow === */
#filters summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 12px; border-radius:12px;
  cursor:pointer; user-select:none; font-weight:800;
  font-size:1rem; color:#fff; letter-spacing:.2px;
  background:transparent;
}
#filters summary::-webkit-details-marker{ display:none; }
#filters summary::after{
  content:"▾"; font-size:1.1rem; line-height:1;
  opacity:.75; transition:transform .2s ease, opacity .2s ease;
}
#filters details[open] > summary::after{ transform:rotate(180deg); opacity:.9; }
#filters summary:hover{ background:rgba(255,255,255,.06); }

#filters * { box-sizing: border-box; }
#filters .f-input{
  width:100%; height:44px; border-radius:9999px;
  background:transparent; border:1px solid rgba(255,255,255,.20);
  color:#fff; padding:0 14px; font-size:.9rem;
}
#filters .f-input::placeholder{ color:rgba(255,255,255,.55); }

/* full-width action buttons */
#filters .f-btn{
  width:100%; height:40px; border-radius:9999px;
  border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85);
  background:transparent; transition:.2s;
}
#filters .f-btn:hover{ background:#b1e346; color:#111; border-color:transparent; }
#filters .f-btn.is-active{ background:#b1e346; color:#111; border-color:transparent; }

/* accordion titles */
#filters details{ margin:8px 0; }
#filters summary{
  list-style:none; cursor:pointer; user-select:none;
  text-align:center; font-size:.75rem; color:rgba(255,255,255,.65);
}
#filters summary::-webkit-details-marker{ display:none; }

/* rows (text right, switch left) */
#filters .f-row{
  width:100%; height:48px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:9999px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15); transition:.2s; cursor:pointer;
}
#filters .f-row:hover{ background:rgba(255,255,255,.08); }
#filters .f-text{ color:#fff; font-weight:600; font-size:.9rem; white-space:nowrap; }

/* hide native checkbox */
#filters .f-check{ position:absolute; opacity:0; pointer-events:none; }

/* toggle */
#filters .f-toggle{
  width:56px; height:28px; border-radius:9999px;
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:flex-start;
  background:transparent; transition:.2s;
}
#filters .f-knob{ width:20px; height:20px; border-radius:9999px; background:#fff; margin:0 6px; }

/* checked state (adjacent sibling) */
#filters .f-check:checked + .f-toggle{ background:#b1e346; justify-content:flex-end; }

/* lists spacing */
#filters .f-list{ display:flex; flex-direction:column; gap:8px; }

/* numeric inputs full-width stack */
#filters .f-numlist{ display:flex; flex-direction:column; gap:8px; }

/* utilities */
#filters .mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; }
#filters .gap-2{ gap:8px; } #filters .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }


/* Show filter modal */
/* فقط موبایل: مودال با :target فعال می‌شود */
@media (max-width: 767.98px){
  .filters-modal{ opacity:0; pointer-events:none; }
  .filters-modal .sheet{
    transform: translateY(16px);
    opacity:.0;
    transition: transform .25s ease, opacity .25s ease;
  }
  /* وقتی هَش آدرس برابر id مودال شود */
  .filters-modal:target{ opacity:1; pointer-events:auto; }
  .filters-modal:target .sheet{ transform: translateY(0); opacity:1; }
}
/* دسکتاپ: مودال مخفی (تو از فیلتر سایدبار/ثابت استفاده می‌کنی) */
@media (min-width: 768px){
  #filtersModal{ display:none; }
}
/* Show filter modal */