/* =====================================================================
   filter.css — واجهة الفلترة المتقدم لموقع سكن
   ---------------------------------------------------------------------
   مبنية بنفس هوية الموقع البصرية في styles.css:
   - نفس المتغيرات: --ink / --ink-soft / --ink-faint / --line / --brand ...
   - أزرار pills دائرية (border-radius:100px) زي باقي الموقع
   - نفس الخط (موروث من body = Cairo) ونفس الظلال الناعمة

   ملاحظة مهمة: الملف ده مايعيدش تعريف أي كلاس موجود في styles.css
   (زي .listing-grid أو .results-count) عشان ميكسرش تصميم الموقع.
   ===================================================================== */

/* ===== الحاوية العامة: شريط جانبي + نتائج ===== */
.filters-wrapper{
  display:flex;
  gap:26px;
  align-items:flex-start;
  margin-top:20px;
}

/* ===== الفلاتر السريعة (بيع/إيجار + النوع) ===== */
.quick-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}
.quick-filters .chip{
  flex:0 0 auto;
  padding:9px 18px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:100px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.quick-filters .chip:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--brand-tint);
}
.quick-filters .chip.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 6px 16px rgba(225,91,61,0.28);
}
/* شارة عدد النتائج جوه كل فلتر سريع */
.chip-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:21px;
  height:20px;
  padding:0 6px;
  margin-inline-start:7px;
  background:var(--bg-soft);
  color:var(--ink-faint);
  border-radius:100px;
  font-size:11px;
  font-weight:800;
  transition:all .2s ease;
}
.quick-filters .chip:hover .chip-count{ background:#FCE0D5; color:var(--brand); }
.quick-filters .chip.active .chip-count{ background:rgba(255,255,255,0.24); color:#fff; }
/* فلتر ملوش نتائج حاليًا — يتخفت شوية بس يفضل قابل للضغط */
.quick-filters .chip.is-empty{ opacity:0.45; }
.chip-divider{
  width:1px;
  height:22px;
  background:var(--line);
  margin:0 4px;
  flex:0 0 auto;
}

/* ===== شرائح الفلاتر النشطة ===== */
.active-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
  padding:12px 16px;
  background:var(--brand-tint);
  border:1px solid #F5CFC4;
  border-radius:16px;
  font-size:13px;
}
.active-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:100px;
  padding:5px 6px 5px 12px;
  font-weight:600;
  color:var(--ink);
}
.active-chip button{
  background:var(--bg-soft);
  border:none;
  width:20px;
  height:20px;
  border-radius:50%;
  color:var(--ink-faint);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.active-chip button:hover{
  background:var(--brand);
  color:#fff;
}
.clear-all-inline{
  background:none;
  border:none;
  color:var(--brand);
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  margin-inline-start:auto;
  padding:5px 10px;
  border-radius:100px;
  transition:background .18s;
}
.clear-all-inline:hover{ background:#FCE0D5; }

/* ===== الشريط الجانبي (ديسكتوب) ===== */
.filter-sidebar{
  flex:0 0 272px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  position:sticky;
  top:86px;                              /* تحت الهيدر اللاصق */
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  box-shadow:0 8px 22px rgba(20,20,20,0.05);
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.filter-sidebar::-webkit-scrollbar{ width:5px; }
.filter-sidebar::-webkit-scrollbar-track{ background:transparent; }
.filter-sidebar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

.filter-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.filter-header h3{
  font-size:15.5px;
  font-weight:800;
  color:var(--ink);
  margin:0;
}
.clear-all{
  background:none;
  border:none;
  color:var(--brand);
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  padding:4px 10px;
  border-radius:100px;
  transition:background .18s;
}
.clear-all:hover{ background:var(--brand-tint); }

/* ===== مجموعات الفلاتر ===== */
.filter-group{ margin-bottom:20px; }
.filter-group:last-of-type{ margin-bottom:8px; }
.filter-group-header{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:10px;
}
.filter-group-header svg{
  width:15px;
  height:15px;
  color:var(--brand);
  flex:0 0 auto;
}

/* حقول الإدخال والقوائم — نفس شكل حقول الموقع */
.filter-group input[type="search"],
.filter-group input[type="number"],
.filter-group select{
  width:100%;
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  font-family:inherit;
  font-size:13px;
  color:var(--ink);
  background:#fff;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.filter-group input:focus,
.filter-group select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(225,91,61,0.12);
}
.filter-group input::placeholder{ color:var(--ink-faint); }
.filter-group select{
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
  padding-inline-start:32px;
}

/* اختصارات السعر الجاهزة */
.price-presets{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.price-presets button{
  flex:1;
  padding:7px 6px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  border-radius:100px;
  font-family:inherit;
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s ease;
}
.price-presets button:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--brand-tint);
}
.price-presets button.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

/* السعر والمساحة */
.price-inputs, .area-inputs{
  display:flex;
  align-items:center;
  gap:8px;
}
.area-inputs span{ color:var(--ink-faint); flex:0 0 auto; }
#priceDisplay{
  font-size:12px;
  color:var(--ink-faint);
  margin-top:7px;
  font-weight:600;
}

/* أزرار عدد الغرف — pills زي الموقع */
.filter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.filter-pills button{
  min-width:42px;
  padding:8px 12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:100px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.pill-count{
  font-size:10px;
  font-weight:800;
  color:var(--ink-faint);
  background:var(--bg-soft);
  border-radius:100px;
  min-width:17px;
  height:16px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
}
.filter-pills button:hover .pill-count{ background:#FCE0D5; color:var(--brand); }
.filter-pills button.active .pill-count{ background:rgba(255,255,255,0.24); color:#fff; }
.filter-pills button:hover{
  border-color:var(--brand);
  color:var(--brand);
}
.filter-pills button.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 4px 12px rgba(225,91,61,0.25);
}

/* شبكة المرافق */
.amenities-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 10px;
}
.amenities-grid label{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  user-select:none;
  transition:color .15s;
}
.amenities-grid label:hover{ color:var(--ink); }
.amenities-grid input[type="checkbox"]{
  width:16px;
  height:16px;
  flex:0 0 auto;
  cursor:pointer;
  accent-color:var(--brand);
}

/* ===== رأس النتائج (العدد + الفرز) ===== */
.results-section{ flex:1; min-width:0; }
.results-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.results-header .results-count{ font-size:13.5px; color:var(--ink-faint); }
.results-header .results-count b{ color:var(--brand); font-size:15px; }
.sort-control select{
  appearance:none;
  border:1px solid var(--line);
  border-radius:100px;
  padding:9px 36px 9px 16px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  background:#fff;
  cursor:pointer;
  color:var(--ink);
  outline:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  transition:border-color .18s;
}
.sort-control select:hover{ border-color:var(--brand); }

/* شبكة النتائج جنب الشريط الجانبي: 3 أعمدة بدل 4 عشان المساحة المتبقية
   (بيكمّل تعريف .listing-grid الأصلي في styles.css بدون ما يلغيه) */
.results-section .listing-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .results-section .listing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .results-section .listing-grid{ grid-template-columns:1fr; } }

/* ===== كروت التحميل (Skeleton) — نفس نسب كارت العقار ===== */
.skeleton-card{ display:flex; flex-direction:column; gap:10px; }
.skeleton-photo{
  aspect-ratio:1/1;
  border-radius:16px;
  background:var(--bg-soft);
  animation:skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-line{
  height:13px;
  border-radius:100px;
  background:var(--bg-soft);
  animation:skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes skeleton-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.45; }
}

/* ===== حالة عدم وجود نتائج ===== */
.empty-state{
  text-align:center;
  padding:56px 20px;
  background:var(--bg-soft);
  border-radius:20px;
  color:var(--ink-faint);
}
.empty-state svg{
  width:58px;
  height:58px;
  color:var(--brand);
  opacity:0.75;
  margin:0 auto 16px;
  display:block;
}
.empty-state h3{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:10px;
}
.empty-state p{ font-size:13.5px; margin-bottom:14px; }
.suggestions{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.suggestions button{
  background:#fff;
  border:1px solid var(--ink);
  color:var(--ink);
  padding:10px 22px;
  border-radius:100px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
}
.suggestions button:hover{
  background:var(--ink);
  color:#fff;
}

/* ===== الصفحات (Pagination) ===== */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:32px;
}
.pagination:empty{ display:none; }
.pagination button,
.pagination span{
  min-width:40px;
  padding:9px 14px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:100px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
  text-align:center;
}
.pagination button:hover{
  border-color:var(--brand);
  color:var(--brand);
}
.pagination .active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  cursor:default;
  box-shadow:0 4px 12px rgba(225,91,61,0.25);
}

/* ===== زر الفلاتر العائم (موبايل فقط) ===== */
.mobile-filter-fab{
  position:fixed;
  bottom:24px;
  inset-inline-start:20px;              /* في صفحة RTL = يمين الشاشة، وزر الواتساب على الشمال */
  display:none;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:100px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(20,20,20,0.28);
  z-index:90;
  transition:transform .15s;
}
.mobile-filter-fab:active{ transform:scale(0.96); }
.mobile-filter-fab svg{ width:18px; height:18px; }
.active-count{
  min-width:20px;
  height:20px;
  padding:0 5px;
  background:var(--brand);
  border-radius:100px;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== الخلفية المعتمة (موبايل) ===== */
.filter-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .25s ease;
  z-index:99;
}
.filter-backdrop.open{
  background:rgba(0,0,0,0.4);
  pointer-events:auto;
}

/* زر الإغلاق وزر "عرض النتائج" — يظهروا في وضع الموبايل فقط */
.filter-sheet-close{ display:none; }
.filter-actions{ display:none; }

/* ===== الموبايل: الشريط الجانبي بيتحول للوحة منسدلة من الأسفل ===== */
@media (max-width:767px){
  .filters-wrapper{
    flex-direction:column;
    gap:0;
  }

  .filter-sidebar{
    position:fixed;
    inset-inline:0;
    bottom:0;
    top:auto;
    flex:none;
    width:100%;
    max-height:82vh;
    border-radius:22px 22px 0 0;
    border-bottom:none;
    box-shadow:0 -12px 34px rgba(0,0,0,0.16);
    transform:translateY(110%);
    transition:transform .3s ease-out;
    z-index:100;
    padding-bottom:14px;
  }
  .filter-sidebar.open{ transform:translateY(0); }

  .filter-sheet-close{
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:var(--bg-soft);
    border:none;
    width:32px;
    height:32px;
    border-radius:50%;
    font-size:15px;
    color:var(--ink);
    cursor:pointer;
  }

  .filter-actions{
    display:flex;
    position:sticky;
    bottom:0;
    margin:14px -22px -14px;
    padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, var(--bg) 82%, transparent);
  }
  .btn-apply{
    flex:1;
    background:var(--brand);
    color:#fff;
    border:none;
    padding:13px 20px;
    border-radius:100px;
    font-family:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(225,91,61,0.35);
    transition:background .18s;
  }
  .btn-apply:hover{ background:var(--brand-deep); }

  .mobile-filter-fab{ display:flex; }

  .quick-filters{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .quick-filters::-webkit-scrollbar{ display:none; }

  .results-header{ margin-top:4px; }
}