/* ==========================================================================
   smart-filter.css — Smart Filter (Price Range + Brand + Stock) স্টাইল
   --------------------------------------------------------------------------
   এক্সিস্টিং CSS ভ্যারিয়েবল (--brand, --brand-dark, --brand-darker, --line,
   --ink, --ink-soft, --paper, --bg) অনুসরণ করে লেখা, যাতে সাইটের বাকি
   অংশের সাথে ভিজুয়ালি মিলে যায়। ডেস্কটপে এটা বাম দিক থেকে স্লাইড করা একটা
   সাইডবার-ড্রয়ার হিসেবে খোলে, মোবাইলে নিচ থেকে বটম-শিট হিসেবে খোলে।
   ========================================================================== */

.hkl-sf-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:-6px 0 16px;
}
.hkl-sf-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:8px;
  border:1.5px solid var(--brand, #0a7d3a);
  background:var(--paper, #fff);
  color:var(--brand-darker, #0a5c2b);
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease;
}
.hkl-sf-toggle:hover{ background:#f0f7f2; }
.hkl-sf-badge{
  background:var(--brand, #0a7d3a);
  color:#fff;
  font-size:11px;
  font-weight:700;
  border-radius:20px;
  padding:1px 7px;
  min-width:18px;
  text-align:center;
}
.hkl-sf-clear-inline{
  border:none;
  background:none;
  color:var(--ink-soft, #8a908c);
  font-size:12.5px;
  text-decoration:underline;
  cursor:pointer;
  padding:4px;
}

/* ---- ওভারলে ---- */
.hkl-sf-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.42);
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.hkl-sf-overlay.hkl-sf-open{ opacity:1; pointer-events:auto; }

/* ---- প্যানেল: ডেস্কটপে বাম-সাইডবার ড্রয়ার ---- */
.hkl-sf-panel{
  position:fixed;
  top:0; left:0; bottom:0;
  width:320px;
  max-width:88vw;
  background:var(--paper, #fff);
  z-index:10001;
  display:flex;
  flex-direction:column;
  transform:translateX(-105%);
  transition:transform .25s ease;
  box-shadow:8px 0 24px rgba(0,0,0,.12);
}
.hkl-sf-panel.hkl-sf-open{ transform:translateX(0); }

.hkl-sf-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--line, #e3e6e2);
}
.hkl-sf-panel-head h3{
  margin:0; font-family:'Baloo Da 2',sans-serif; font-size:17px;
  color:var(--brand-darker, #0a5c2b);
}
.hkl-sf-close{
  border:none; background:#f0f2ef; width:30px; height:30px; border-radius:50%;
  font-size:15px; cursor:pointer; color:var(--ink, #1b1f22); line-height:1;
}

.hkl-sf-panel-body{
  flex:1; overflow-y:auto; padding:16px 18px;
}
.hkl-sf-group{ margin-bottom:22px; }
.hkl-sf-group-title{
  font-size:13.5px; font-weight:700; color:var(--ink, #1b1f22); margin-bottom:10px;
}

/* ---- প্রাইস রেঞ্জ ---- */
.hkl-sf-price-values{
  font-size:13px; color:var(--ink-soft, #8a908c); margin-bottom:10px;
}
.hkl-sf-price-values b{ color:var(--brand-dark, #0a7d3a); }
.hkl-sf-price-inputs{ display:flex; gap:8px; margin-bottom:10px; }
.hkl-sf-price-inputs input[type="number"]{
  width:100%; padding:7px 8px; border-radius:6px; border:1px solid var(--line, #e3e6e2);
  font-family:inherit; font-size:13px; color:var(--ink, #1b1f22);
}
.hkl-sf-range-wrap{
  position:relative; height:34px;
}
.hkl-sf-range-track{
  position:absolute; left:0; right:0; top:15px; height:4px;
  background:#e3e6e2; border-radius:4px;
}
.hkl-sf-range-fill{
  position:absolute; top:15px; height:4px;
  background:var(--brand, #0a7d3a); border-radius:4px;
}
.hkl-sf-range-wrap input[type="range"]{
  position:absolute; left:0; right:0; top:0; width:100%; height:34px;
  margin:0; background:none; pointer-events:none;
  -webkit-appearance:none; appearance:none;
}
.hkl-sf-range-wrap input[type="range"]::-webkit-slider-runnable-track{ background:transparent; }
.hkl-sf-range-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:18px; height:18px; border-radius:50%;
  background:var(--paper, #fff);
  border:3px solid var(--brand, #0a7d3a);
  cursor:pointer; margin-top:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.hkl-sf-range-wrap input[type="range"]::-moz-range-track{ background:transparent; }
.hkl-sf-range-wrap input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width:16px; height:16px; border-radius:50%;
  background:var(--paper, #fff);
  border:3px solid var(--brand, #0a7d3a);
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* ---- ব্র্যান্ড চেকবক্স ---- */
.hkl-sf-brand-list{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
.hkl-sf-checkline{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13.5px; color:var(--ink, #1b1f22); cursor:pointer;
}
.hkl-sf-checkline span.hkl-sf-cnt{ color:var(--ink-soft, #8a908c); font-size:12px; }
.hkl-sf-checkline input{ accent-color:var(--brand, #0a7d3a); width:16px; height:16px; }
.hkl-sf-checkline .hkl-sf-lbl{ display:flex; align-items:center; gap:8px; }

/* ---- স্টক রেডিও ---- */
.hkl-sf-stock-opts{ display:flex; flex-direction:column; gap:8px; }
.hkl-sf-stock-opts label{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink, #1b1f22); cursor:pointer;
}
.hkl-sf-stock-opts input{ accent-color:var(--brand, #0a7d3a); }

.hkl-sf-panel-foot{
  padding:14px 18px; border-top:1px solid var(--line, #e3e6e2);
  display:flex; gap:10px;
}
.hkl-sf-panel-foot button{
  flex:1; padding:11px; border-radius:8px; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
#hklSfClearBtn{ border:1.5px solid var(--line, #e3e6e2); background:var(--paper, #fff); color:var(--ink, #1b1f22); }
#hklSfApplyBtn{ border:none; background:var(--brand, #0a7d3a); color:#fff; }

/* ---- মোবাইলে বটম-শিট ---- */
@media (max-width:640px){
  .hkl-sf-panel{
    top:auto; left:0; right:0; bottom:0; width:100%; max-width:100%;
    height:82vh;
    border-radius:16px 16px 0 0;
    transform:translateY(105%);
    box-shadow:0 -8px 24px rgba(0,0,0,.16);
  }
  .hkl-sf-panel.hkl-sf-open{ transform:translateY(0); }
}