/* ==========================================================================
   املاک قم (site14) — صفحه جستجوی ملک.

   نسخه ی قبلی چیدمان دیوار را داشت ولی «سفید روی سفید» بود: کارت، ستون فیلتر و
   خودِ صفحه هر سه یک رنگ بودند، پس هیچ چیز جلو نمی آمد و صفحه مثل یک فرم خام
   دیده می شد. این نسخه سه کار می کند:

     ۱. عمق — صفحه خاکستری روشن است و کارت و ستون فیلتر سطح سفیدِ بالاتر.
        کاربر بدون خواندن هم می فهمد کجا لیست است و کجا ابزار.
     ۲. سلسله مراتب داخل کارت — قیمت بزرگ ترین قلم است، بعد عنوان، بعد یک ردیف
        مشخصات آیکون دار. چشم روی «قیمت» می افتد چون همان چیزی است که در فایل
        ملکی اول از همه سنجیده می شود.
     ۳. بازخورد — چیپ فیلترهای فعال، حالت بارگذاری، ته لیست، و شیت موبایل با
        پرده و دکمه ی بستن. کاربر همیشه می داند چه چیزی اعمال شده و چه خبر است.

   رنگ ها همان پالت public.css سایت است (سرمه ای + نارنجی) تا صفحه ی جستجو با
   بقیه ی سایت یکی دیده شود.
   ========================================================================== */

.dv-page {
  --dv-ink: #101828;
  --dv-body: #344054;
  --dv-muted: #667085;
  --dv-faint: #98A2B3;

  --dv-line: #E6E9F0;
  --dv-line-2: #D3D9E4;

  --dv-accent: #F06210;
  --dv-accent-2: #FF7A2E;
  --dv-accent-soft: #FFF3EB;
  --dv-navy: #0E1729;

  --dv-surface: #fff;
  --dv-page-bg: #F4F6FA;
  --dv-sunken: #EEF1F6;

  --dv-r-sm: 10px;
  --dv-r: 14px;
  --dv-r-lg: 18px;

  --dv-sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --dv-sh-2: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 12px 28px -6px rgba(16, 24, 40, .12);
  --dv-sh-3: 0 20px 48px rgba(16, 24, 40, .16);

  --dv-side: 288px;
  --dv-bar-h: 68px;
  /* هدر سایت (layouts.header_public) fixed-top است، پس هم صفحه و هم نوار چسبان
     باید از زیرش شروع کنند. ۷۰ پیکسل min-height به اضافه ی یک پیکسل خط پایین. */
  --dv-header-h: 71px;

  padding-top: var(--dv-header-h);
  background: var(--dv-page-bg);
  color: var(--dv-body);
}

.dv-page * { box-sizing: border-box; }
.dv-page a { text-decoration: none; }

.dv-page :focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.dv-wrap {
  width: min(1280px, calc(100% - 32px));
  margin-inline: auto;
}

/* فقط برای صفحه خوان — تیتر صفحه و برچسب هایی که بصری تکراری اند */
.dv-sr {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   نوار جستجوی چسبان
   -------------------------------------------------------------------------- */

.dv-bar {
  position: sticky;
  /* زیر هدر سایت می نشیند، نه روی آن */
  top: var(--dv-header-h);
  z-index: 40;
  border-bottom: 1px solid var(--dv-line);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  transition: box-shadow .2s ease;
}

/* وقتی صفحه پایین رفت نوار از لیست جدا می شود */
.dv-bar.is-stuck { box-shadow: 0 6px 20px -8px rgba(16, 24, 40, .18); }

.dv-bar__in {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--dv-bar-h);
}

.dv-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.dv-search input {
  width: 100%;
  height: 44px;
  padding-inline: 42px 40px;
  color: var(--dv-ink);
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: var(--dv-sunken);
  font-size: 14px;
  font-family: inherit;
  outline: 0;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.dv-search input::placeholder { color: var(--dv-faint); }

/* ضربدرِ خودِ مرورگر کنار ضربدر خودمان می نشست */
.dv-search input::-webkit-search-cancel-button,
.dv-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.dv-search input:focus {
  border-color: var(--dv-accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(240, 98, 16, .12);
}

.dv-search > i {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dv-faint);
  font-size: 16px;
  pointer-events: none;
}

/* ضربدر پاک کردن؛ فقط وقتی چیزی نوشته شده دیده می شود */
.dv-search__clear {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--dv-muted);
  border: 0;
  border-radius: 50%;
  background: rgba(16, 24, 40, .06);
  font-size: 11px;
  cursor: pointer;
}

.dv-search__clear:hover { color: var(--dv-ink); background: rgba(16, 24, 40, .12); }
.dv-search.has-value .dv-search__clear { display: inline-flex; }

.dv-bar__acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* کنترل های نوار و ستون همه یک قد و یک زبان بصری دارند */
.dv-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding-inline: 16px;
  color: var(--dv-body);
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.dv-toggle i { font-size: 15px; }
.dv-toggle:hover { color: var(--dv-ink); border-color: var(--dv-line-2); background: var(--dv-sunken); }

.dv-toggle.is-on {
  color: #fff;
  border-color: var(--dv-accent);
  background: var(--dv-accent);
}

.dv-toggle.is-on:hover { background: var(--dv-accent-2); border-color: var(--dv-accent-2); }

/* شمارنده ی فیلترهای فعال روی دکمه ی موبایل */
.dv-toggle__badge {
  display: none;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  color: #fff;
  border-radius: 999px;
  background: var(--dv-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

.dv-toggle.has-count .dv-toggle__badge { display: inline-block; }
.dv-toggle.is-on .dv-toggle__badge { color: var(--dv-accent); background: #fff; }

/* --------------------------------------------------------------------------
   چیپ فیلترهای فعال
   --------------------------------------------------------------------------
   هر فیلتری که اعمال شده یک چیپ می شود و با ضربدر خودش برداشته می شود. بدون
   این، تنها راه فهمیدن اینکه چه چیزی فعال است اسکرول کردن کل ستون فیلتر بود. */

.dv-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 14px 0;
}

.dv-active:empty { display: none; }

.dv-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding-inline: 12px;
  color: var(--dv-ink);
  border: 1px solid #F3D3BE;
  border-radius: 999px;
  background: var(--dv-accent-soft);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dv-active__chip b { font-weight: 700; }

.dv-active__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--dv-accent);
  border: 0;
  border-radius: 50%;
  background: rgba(240, 98, 16, .14);
  font-size: 9px;
  cursor: pointer;
}

.dv-active__x:hover { color: #fff; background: var(--dv-accent); }

.dv-active__reset {
  height: 32px;
  padding-inline: 12px;
  color: var(--dv-muted);
  border: 1px dashed var(--dv-line-2);
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dv-active__reset:hover { color: var(--dv-accent); border-color: var(--dv-accent); }

/* --------------------------------------------------------------------------
   ستون ها
   -------------------------------------------------------------------------- */

.dv-body {
  display: grid;
  grid-template-columns: var(--dv-side) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-block: 18px 64px;
}

.dv-side {
  position: sticky;
  top: calc(var(--dv-header-h) + var(--dv-bar-h) + 14px);
  max-height: calc(100vh - var(--dv-header-h) - var(--dv-bar-h) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 18px 18px;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-lg);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-1);
  scrollbar-width: thin;
  scrollbar-color: var(--dv-line-2) transparent;
}

.dv-side::-webkit-scrollbar { width: 6px; }
.dv-side::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--dv-line-2); }

.dv-side__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px 12px;
  border-bottom: 1px solid var(--dv-line);
  background: var(--dv-surface);
}

.dv-side__head b { color: var(--dv-ink); font-size: 15px; }

.dv-clear {
  padding: 0;
  color: var(--dv-accent);
  border: 0;
  background: none;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dv-clear:hover { text-decoration: underline; }

/* دکمه ی بستن شیت — فقط روی موبایل */
.dv-side__close { display: none; }

/* یک گروه فیلتر: عنوان، بعد کنترل ها */
.dv-group { padding: 15px 0; border-bottom: 1px solid var(--dv-line); }
.dv-group:last-of-type { border-bottom: 0; }

.dv-group > label,
.dv-group__title {
  display: block;
  margin-bottom: 9px;
  color: var(--dv-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1px;
}

.dv-group__title small,
.dv-group > label small {
  color: var(--dv-faint);
  font-size: 11.5px;
  font-weight: 500;
}

.dv-group select,
.dv-group input[type="text"],
.dv-group input[type="tel"],
.dv-group input[type="number"] {
  width: 100%;
  height: 42px;
  padding-inline: 12px;
  color: var(--dv-ink);
  border: 1px solid var(--dv-line-2);
  border-radius: var(--dv-r-sm);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* فلش پیش فرض مرورگر در RTL سمت اشتباه می افتد و بد ترسیم می شود */
.dv-group select {
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.dv-group select::-ms-expand { display: none; }

.dv-group select:hover,
.dv-group input:hover { border-color: #BFC7D6; }

.dv-group select:focus,
.dv-group input:focus {
  border-color: var(--dv-accent);
  box-shadow: 0 0 0 3px rgba(240, 98, 16, .12);
}

/* یک select که مقدار دارد باید از یک select خالی فرق داشته باشد */
.dv-group select.has-value,
.dv-group input.has-value {
  color: var(--dv-ink);
  border-color: #F0C4A6;
  background-color: var(--dv-accent-soft);
  font-weight: 600;
}

.dv-pair {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  align-items: center;
  gap: 6px;
}

.dv-pair__sep { color: var(--dv-faint); font-size: 12px; text-align: center; }

/* --------------------------------------------------------------------------
   فیلتر مبلغ — «قیمت»، «ودیعه» و «اجاره»
   --------------------------------------------------------------------------
   سه لایه ی کمک، از درشت به ریز: بازه های آماده (یک ضربه)، ورودی آزاد با فهرست
   پیشنهاد (تایپ)، و خط حروفی (تأیید چشمی). ترتیبشان همین است چون بیشتر کاربرها
   با یک بازه ی آماده کارشان راه می افتد و اصلاً به دو تای بعدی نمی رسند. */

.dv-money__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.dv-preset {
  padding: 6px 10px;
  color: var(--dv-body);
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.dv-preset:hover { border-color: #BFC7D6; background: var(--dv-sunken); }

.dv-preset.is-on {
  color: #fff;
  border-color: var(--dv-accent);
  background: var(--dv-accent);
}

.dv-money__field { position: relative; }

/* فهرست پیشنهادِ کنار ورودی؛ همان زبان بصریِ پنل چندانتخابی */
.dv-sugg {
  position: absolute;
  z-index: 32;
  inset-inline: 0;
  top: calc(100% + 6px);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 208px;
  padding: 5px;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-2);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dv-line-2) transparent;
}

.dv-sugg[hidden] { display: none; }
.dv-sugg::-webkit-scrollbar { width: 6px; }
.dv-sugg::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--dv-line-2); }

/* ورودی نصفِ عرض ستون است، پس برچسب و عدد خام روی هم می نشینند نه کنار هم؛
   کنار هم، «۳ میلیارد» دو خط می شد و پنل نوار افقی می گرفت. */
.dv-sugg__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.dv-sugg__opt:hover { background: var(--dv-accent-soft); }
.dv-sugg__opt b { color: var(--dv-ink); font-size: 12.5px; font-weight: 700; }

/* عدد خام زیر برچسب خلاصه می ماند تا کسی که «۲ میلیارد» را باور نمی کند،
   تعداد صفرها را ببیند */
.dv-sugg__opt span {
  color: var(--dv-faint);
  font-size: 10.5px;
  font-weight: 500;
  direction: ltr;
}

/* مبلغ به حروف — همان چیزی که در مبایعه نامه می نویسند، زیر خودِ ورودی */
.dv-money__word {
  margin: 8px 0 0;
  padding: 7px 9px;
  color: var(--dv-body);
  border-radius: 8px;
  background: var(--dv-sunken);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.7;
}

.dv-money__word[hidden] { display: none; }

/* --------------------------------------------------------------------------
   انتخاب چندتایی — «نوع ملک» و «محله»
   --------------------------------------------------------------------------
   دکمه اش باید دقیقاً مثل selectهای بالای همین ستون دیده شود: هم قد، هم کادر،
   هم فلش، هم همان حالتِ «پر شده». تنها فرقش این است که به جای لیست مرورگر، یک
   پنل چک باکس باز می کند. */

.dv-ms { position: relative; }

.dv-ms__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding-inline: 12px;
  color: var(--dv-ink);
  border: 1px solid var(--dv-line-2);
  border-radius: var(--dv-r-sm);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.dv-ms__val {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* تا وقتی چیزی تیک نخورده، متن دکمه یک راهنماست نه یک مقدار */
.dv-ms:not(.has-value) .dv-ms__val { color: var(--dv-muted); }

.dv-ms__btn > i {
  flex: 0 0 auto;
  color: var(--dv-faint);
  font-size: 11px;
  transition: transform .18s ease;
}

.dv-ms__btn:hover { border-color: #BFC7D6; }

.dv-ms.is-open .dv-ms__btn {
  border-color: var(--dv-accent);
  box-shadow: 0 0 0 3px rgba(240, 98, 16, .12);
}

.dv-ms.is-open .dv-ms__btn > i { transform: rotate(180deg); }

/* همان نشانه ی selectِ پرشده، تا هر دو کنترل یک زبان داشته باشند */
.dv-ms.has-value .dv-ms__btn {
  border-color: #F0C4A6;
  background: var(--dv-accent-soft);
  font-weight: 600;
}

.dv-ms__panel {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 6px);
  overflow: hidden;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-2);
}

.dv-ms__panel[hidden] { display: none; }

.dv-ms__search {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--dv-line);
}

.dv-ms__search > i {
  position: absolute;
  top: 20px;
  inset-inline-start: 19px;
  color: var(--dv-faint);
  font-size: 12px;
  pointer-events: none;
}

.dv-ms__search input {
  width: 100%;
  height: 36px;
  padding-inline: 33px 10px;
  color: var(--dv-ink);
  border: 1px solid var(--dv-line-2);
  border-radius: 8px;
  background: var(--dv-sunken);
  font-size: 12.5px;
  font-family: inherit;
  outline: 0;
}

.dv-ms__search input:focus { background: #fff; }

/* فهرست محله ها بلند است؛ پنل نباید تا ته ستون کش بیاید */
.dv-ms__list {
  overflow-y: auto;
  max-height: 232px;
  padding: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dv-line-2) transparent;
}

.dv-ms__list::-webkit-scrollbar { width: 6px; }
.dv-ms__list::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--dv-line-2); }

.dv-ms__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 9px;
  color: var(--dv-body);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.dv-ms__opt:hover { background: var(--dv-sunken); }

.dv-ms__opt input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--dv-accent);
  cursor: pointer;
}

.dv-ms__opt span { flex: 1 1 auto; min-width: 0; }
.dv-ms__opt input:checked + span { color: var(--dv-ink); font-weight: 700; }

.dv-ms__empty {
  padding: 16px 12px;
  color: var(--dv-muted);
  font-size: 12.5px;
  text-align: center;
}

.dv-ms__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--dv-line);
}

.dv-ms__clear,
.dv-ms__done {
  height: 34px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.dv-ms__clear {
  color: var(--dv-muted);
  border: 1px solid var(--dv-line-2);
  background: #fff;
}

.dv-ms__clear:hover:not(:disabled) { color: var(--dv-ink); border-color: #BFC7D6; }
.dv-ms__clear:disabled { opacity: .45; cursor: default; }

.dv-ms__done {
  color: #fff;
  border: 0;
  background: var(--dv-accent);
}

.dv-ms__done:hover { background: var(--dv-accent-2); }

/* --------------------------------------------------------------------------
   نوع ملک — مودال کارت های آیکون دار
   --------------------------------------------------------------------------
   همان کنترل چندانتخابی است، ولی پنلش به جای یک کشویی باریکِ کنار ستون، یک
   مودال وسط صفحه می شود. دلیلش جای بیشتر است: هفت نوع ملک هر کدام یک آیکون
   دارند و کنار هم که بنشینند، کاربر «مغازه» را از روی ویترین پیدا می کند نه از
   روی خواندن. دکمه ی بازکننده دست نخورده می ماند تا ستون فیلتر یکدست بماند. */

.dv-ms--modal .dv-ms__panel {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: rgba(14, 23, 41, .55);
  box-shadow: none;
  animation: dvModalFade .18s ease;
}

/* پرده باز است و صفحه پشتش نباید تکان بخورد */
body.dv-lock { overflow: hidden; }

/* ستون فیلتر position:sticky است و sticky — بی آنکه z-index داشته باشد — خودش
   یک stacking context می سازد. یعنی z-indexِ ۱۳۰۰ مودال فقط «داخل همان ستون»
   معنی دارد و ستون نتیجه ها که در DOM بعد از آن می آید، روی مودال می افتاد
   (مودال بود ولی کارت های ملک رویش کشیده می شدند). تا وقتی مودال باز است خودِ
   ستون جلو می آید؛ بعد از بستن، کلاس برداشته می شود تا هدر و نوار چسبان
   دوباره جای همیشگی شان را داشته باشند. */
.dv-side.is-front { z-index: 1300; }

.dv-modal__card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(600px, 90vh);
  border-radius: var(--dv-r-lg);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-3);
  animation: dvModalPop .22s cubic-bezier(.2, .8, .2, 1);
}

.dv-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--dv-line);
}

.dv-modal__title b { display: block; color: var(--dv-ink); font-size: 15px; }

.dv-modal__title span {
  display: block;
  margin-top: 3px;
  color: var(--dv-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.dv-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--dv-muted);
  border: 0;
  border-radius: 50%;
  background: var(--dv-sunken);
  font-size: 11px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}

.dv-modal__close:hover { color: var(--dv-ink); background: var(--dv-line); }

/* سه ستون: هفت نوع در سه ردیف جا می شود و هیچ کارتی از قابِ مودال بیرون نمی زند */
.dv-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: none;
  padding: 16px 18px;
}

/* کارت نوع ملک — چک باکسش پنهان است و خودِ کارت نقش دکمه ی انتخاب را دارد */
.dv-type {
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  gap: 9px;
  padding: 15px 8px 13px;
  border: 1px solid var(--dv-line-2);
  border-radius: var(--dv-r);
  background: var(--dv-surface);
  text-align: center;
  transition: color .16s ease, border-color .16s ease, background .16s ease,
              box-shadow .16s ease, transform .16s ease;
}

.dv-type:hover {
  border-color: #F0C4A6;
  background: var(--dv-accent-soft);
  transform: translateY(-2px);
}

.dv-type input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dv-type__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--dv-navy);
  border-radius: 15px;
  background: var(--dv-sunken);
  transition: color .16s ease, background .16s ease;
}

.dv-type__svg { width: 27px; height: 27px; }

.dv-type__name {
  flex: 0 0 auto;
  color: var(--dv-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
}

/* تیک گوشه فقط در حالت انتخاب دیده می شود */
.dv-type__tick {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #fff;
  border-radius: 50%;
  background: var(--dv-accent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .16s ease, transform .16s ease;
}

.dv-type__tick svg { width: 11px; height: 11px; }

.dv-type.is-on {
  border-color: var(--dv-accent);
  background: var(--dv-accent-soft);
  box-shadow: 0 0 0 3px rgba(240, 98, 16, .12);
}

.dv-type.is-on .dv-type__ic { color: #fff; background: var(--dv-accent); }
.dv-type.is-on .dv-type__name { color: var(--dv-ink); font-weight: 700; }
.dv-type.is-on .dv-type__tick { opacity: 1; transform: none; }

@keyframes dvModalFade { from { opacity: 0; } }
@keyframes dvModalPop {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
}
@keyframes dvSheetUp {
  from { transform: translateY(100%); }
}

/* همه / خرید / اجاره به شکل یک کنترل قطعه ای. سه ستون است چون سه دکمه دارد؛
   با دو ستون، «اجاره» به خط بعد می افتاد و کنترل دو طبقه می شد. */
.dv-deal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--dv-sunken);
}

.dv-deal button {
  height: 36px;
  color: var(--dv-muted);
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.dv-deal button:hover { color: var(--dv-ink); }

.dv-deal button.is-on {
  color: var(--dv-accent);
  background: #fff;
  box-shadow: var(--dv-sh-1);
}

/* چیپ های تعداد خواب — یک ضربه به جای باز کردن یک کشویی */
.dv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dv-chip {
  min-width: 40px;
  height: 36px;
  padding-inline: 12px;
  color: var(--dv-body);
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.dv-chip:hover { border-color: #BFC7D6; background: var(--dv-sunken); }

.dv-chip.is-on {
  color: #fff;
  border-color: var(--dv-accent);
  background: var(--dv-accent);
}

/* «فرقی ندارد» یعنی هیچ فیلتری نیست. اگر نارنجی شود، کاربر فکر می کند چیزی
   اعمال شده؛ پس فقط خاکستریِ پررنگ می شود تا انتخابِ جاری معلوم باشد. */
.dv-chip[data-room=""].is-on {
  color: var(--dv-ink);
  border-color: var(--dv-line-2);
  background: var(--dv-sunken);
}

.dv-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dv-body);
  font-size: 13px;
  cursor: pointer;
}

.dv-check input { width: 17px; height: 17px; accent-color: var(--dv-accent); cursor: pointer; }
.dv-check span { font-weight: 600; }

/* کارت تماس ته ستون — فضای خالیِ زیر فیلترها را به یک راه ارتباطی تبدیل
   می کند. سایت آژانسی است و بیشتر بازدیدکننده ها ترجیح می دهند بپرسند. */
.dv-help {
  margin-top: 16px;
  padding: 16px;
  color: #E7EBF3;
  border-radius: var(--dv-r);
  background: linear-gradient(140deg, var(--dv-navy), #1E2C4A);
}

.dv-help b { display: block; margin-bottom: 5px; color: #fff; font-size: 13.5px; }
.dv-help p { margin: 0 0 12px; color: rgba(231, 235, 243, .72); font-size: 12px; line-height: 1.8; }

.dv-help a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  color: var(--dv-navy);
  border-radius: var(--dv-r-sm);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.dv-help a:hover { color: var(--dv-navy); background: var(--dv-accent-soft); }

/* --------------------------------------------------------------------------
   سربرگ نتیجه ها
   -------------------------------------------------------------------------- */

.dv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 14px;
}

.dv-head h1 {
  margin: 0 0 3px;
  color: var(--dv-ink);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.6;
}

.dv-count { color: var(--dv-muted); font-size: 13px; }
.dv-count b { color: var(--dv-accent); font-weight: 700; }

/* مرتب سازی روی دسکتاپ اینجاست، روی موبایل در نوار بالا */
.dv-sortwrap { position: relative; flex-shrink: 0; }

/* فلش سمتِ پایانیِ خط می نشیند، همان طرفی که padding برایش باز شده */
.dv-sortwrap > i {
  position: absolute;
  inset-inline-end: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dv-faint);
  font-size: 11px;
  pointer-events: none;
}

.dv-select {
  height: 40px;
  padding-inline: 14px 32px;
  color: var(--dv-body);
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.dv-select:focus { border-color: var(--dv-accent); }

/* --------------------------------------------------------------------------
   لیست نتیجه ها
   -------------------------------------------------------------------------- */

/* عرض ستون شناور است تا هر جا لیست باریک تر می شود (مثلاً کنارِ نقشه) خودِ گرید
   تعداد ستون را کم کند؛ فقط موبایل عدد ثابت دارد. */
/* stretch نه start: کارت های یک ردیف هم قد می شوند و چون بدنه ی کارت
   flex-column است با margin-top:auto، دکمه ی تماس همه شان روی یک خط می افتد.
   با start، هر کارت به اندازه ی عنوانش بلند می شد و ردیف دندانه دار می ماند. */
.dv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* حالت خالی یک پیام تمام عرض است، نه یک کارت */
.dv-list > .dv-empty { grid-column: 1 / -1; }

/* گرید بر hidden غلبه می کند، پس صریح خاموشش می کنیم (اسکلت ها) */
.dv-list[hidden] { display: none; }

/* در حین گرفتن نتیجه ی جدید، لیست قبلی محو می شود تا معلوم باشد کار در جریان
   است ولی صفحه نپرد. */
.dv-results { position: relative; transition: opacity .18s ease; }
.dv-results.is-loading { opacity: .45; pointer-events: none; }

.dv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-1);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dv-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--dv-sh-2);
}

/* عکس بالای کارت؛ نسبت ثابت تا ردیف کارت ها یک خط بالایی مرتب داشته باشد */
.dv-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dv-sunken);
}

.dv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.dv-card:hover .dv-card__media img { transform: scale(1.05); }

/* سایه ی نرم پایین عکس تا نشان های روی عکس همیشه خوانا بمانند */
.dv-card__media::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(14, 23, 41, .55), transparent);
  pointer-events: none;
}

.dv-card__tags {
  position: absolute;
  inset-inline-start: 10px;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 60px);
}

.dv-tag {
  padding: 3px 9px;
  color: #fff;
  border-radius: 7px;
  background: rgba(14, 23, 41, .74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
}

.dv-tag--rent { background: rgba(21, 94, 117, .82); }
.dv-tag--sale { background: rgba(14, 23, 41, .74); }
.dv-tag--offplan { background: rgba(240, 98, 16, .92); }
.dv-tag--new { background: rgba(21, 128, 61, .88); }

/* قلب علاقه مندی: دایره ی شیشه ای گوشه ی عکس */
.dv-fav {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 23, 41, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 14px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.dv-fav:hover { background: rgba(14, 23, 41, .78); transform: scale(1.08); }
.dv-fav.is-on { color: #FF4D4F; background: #fff; }

/* دکمه ی مقایسه: همان دایره ، درست زیر قلب. حالت روشنش سرمه ای است نه قرمز تا
   با علاقه مندی که بالای سرش نشسته اشتباه نشود. */
.dv-cmp { top: 48px; }
.dv-cmp.is-on { color: #0E1729; background: #fff; }

/* تعداد عکس ها؛ به کاربر می گوید ورق زدن ارزش دارد */
.dv-shots {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  color: #fff;
  border-radius: 7px;
  background: rgba(14, 23, 41, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 10.5px;
  font-weight: 600;
}

.dv-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 13px 13px 12px;
}

/* قیمت اول و بزرگ: در فایل ملکی همین اول از همه سنجیده می شود */
.dv-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--dv-ink);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.6;
}

.dv-card__price small {
  color: var(--dv-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.dv-card__price .dv-agreed { color: var(--dv-muted); font-size: 14px; font-weight: 700; }

/* عنوان تا دو خط؛ بیشتر از آن، کارت ها ناهم قد می شوند.
   dir=auto در مارک آپ لازم است چون عنوان ها گاهی لاتین اند و در RTL جا به جا
   رندر می شدند («۶ bedroom Villa» به «bedroom Villa ۶» می افتاد). */
.dv-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* همیشه به قد دو خط، حتی وقتی عنوان یک خطی است — وگرنه ردیف مشخصات و پاورقی
     کارت های یک ردیف روی خط های متفاوتی می افتادند. */
  min-height: 3.5em;
  margin-top: 5px;
  overflow: hidden;
  color: var(--dv-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.75;
  transition: color .16s ease;
}

.dv-card:hover .dv-card__title { color: var(--dv-accent); }

/* ردیف مشخصات با آیکون — خواندنش از یک جمله ی طولانی سریع تر است */
.dv-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 9px;
  color: var(--dv-body);
  font-size: 12px;
}

.dv-specs span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dv-specs i { color: var(--dv-faint); font-size: 13px; }

/* margin-top:auto ته کارت را می چسباند پایین، پس دکمه های تماسِ همه ی
   کارت های یک ردیف هم تراز می مانند. */
.dv-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--dv-faint);
  font-size: 11.5px;
}

.dv-card__foot span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dv-card__foot .dv-place { color: var(--dv-muted); font-weight: 600; }
.dv-card__foot span + span::before { content: '·'; margin-inline-end: 4px; color: var(--dv-line-2); }

/* دکمه های تماس — سایت آژانسی است، پس تماس مستقیم از لیست معنی دارد */
.dv-card__acts {
  display: flex;
  gap: 6px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--dv-line);
}

.dv-act {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding-inline: 8px;
  color: var(--dv-body);
  border: 1px solid var(--dv-line-2);
  border-radius: var(--dv-r-sm);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.dv-act:hover { color: var(--dv-accent); border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-act--wa:hover { color: #128C4B; border-color: #128C4B; background: #EAF7F0; }

/* دکمه ی «بازدید» یک button است نه a، پس پیش فرض های دکمه ی مرورگر را می گیرد
   و بدون این دو خط هم قدِ دو دکمه ی کناری اش نمی ماند. */
button.dv-act {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

/* ملکی که در همین مرورگر برایش بازدید خواسته شده */
.dv-act.is-booked { color: #fff; }

/* --------------------------------------------------------------------------
   ته لیست، حالت خالی و اسکلت بارگذاری
   -------------------------------------------------------------------------- */

.dv-end {
  padding: 26px 0 4px;
  color: var(--dv-faint);
  font-size: 12.5px;
  text-align: center;
}

.dv-end::before,
.dv-end::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-inline: 10px;
  vertical-align: middle;
  background: var(--dv-line-2);
}

.dv-empty {
  padding: 56px 24px;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r);
  background: var(--dv-surface);
  color: var(--dv-muted);
  text-align: center;
}

/* فقط آیکونِ خودِ حالت خالی بزرگ است — نه آیکون دکمه های زیرش، که با یک
   انتخابگر بازتر ۴۰ پیکسلی می شدند و روی متن دکمه می افتادند. */
.dv-empty > i { display: block; margin-bottom: 12px; color: var(--dv-line-2); font-size: 40px; }
.dv-empty strong { display: block; margin-bottom: 6px; color: var(--dv-ink); font-size: 16.5px; }
.dv-empty p { margin: 0 auto 18px; max-width: 420px; font-size: 13.5px; line-height: 1.9; }

.dv-empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* اسکلت هم کارت است تا لحظه ی جایگزین شدنش پرش نداشته باشد */
.dv-skel {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r);
  background: var(--dv-surface);
}

.dv-skel > div { padding: 13px; }

.dv-skel span,
.dv-skel i {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #EEF1F6 25%, #E3E8F0 37%, #EEF1F6 63%);
  background-size: 400% 100%;
  animation: dvShimmer 1.4s ease infinite;
}

.dv-skel i { aspect-ratio: 4 / 3; border-radius: 0; }
.dv-skel span { height: 13px; margin-bottom: 10px; }
.dv-skel span:nth-child(1) { width: 55%; height: 17px; }
.dv-skel span:nth-child(2) { width: 92%; }
.dv-skel span:nth-child(3) { width: 45%; margin-bottom: 0; }

@keyframes dvShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --------------------------------------------------------------------------
   نقشه
   -------------------------------------------------------------------------- */

.dv-map {
  position: sticky;
  top: calc(var(--dv-header-h) + var(--dv-bar-h) + 14px);
  height: calc(100vh - var(--dv-header-h) - var(--dv-bar-h) - 28px);
  overflow: hidden;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-lg);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-1);
}

.dv-map > div { width: 100%; height: 100%; }

/* در حالت نقشه، لیست باریک می شود و نقشه کنارش می نشیند */
.dv-body[data-view="2"] { grid-template-columns: var(--dv-side) minmax(0, 400px) minmax(0, 1fr); }
.dv-body[data-view="1"] .dv-map { display: none; }

/* --------------------------------------------------------------------------
   پین ها و خوشه ها

   پین با divIcon و بدون iconSize ساخته می شود، پس خودِ عنصرِ نشانگر یک نقطه ی
   بی اندازه است و لیفلت با transform جایش می گذارد. هر transform دیگری روی همان
   عنصر جای نشانگر را خراب می کند؛ به همین دلیل حباب قیمت یک span داخلی است که
   نسبت به آن نقطه absolute می نشیند.
   -------------------------------------------------------------------------- */

.dv-pin { width: 0; height: 0; }

.dv-pin__in {
  position: absolute;
  bottom: 4px;
  /* وسط چین کردن باید فیزیکی باشد: translateX به راست/چپ سند کاری ندارد */
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
  color: var(--dv-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.dv-pin__in::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border: inherit;
  border-width: 0 1px 1px 0;
  background: inherit;
  transform: rotate(45deg);
}

.dv-pin:hover .dv-pin__in,
.dv-pin.is-active .dv-pin__in {
  border-color: var(--dv-accent);
  background: var(--dv-accent);
  color: #fff;
}

/* پینِ باز یا فعال باید روی بقیه بیاید؛ z-index را خود لیفلت inline می گذارد */
.dv-pin.is-active { z-index: 1000 !important; }

.dv-cl { background: none; }

.dv-cl__in {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dv-navy);
  box-shadow: 0 0 0 5px rgba(14, 23, 41, .18), 0 4px 10px rgba(16, 24, 40, .25);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.dv-cl--md .dv-cl__in { font-size: 14px; }
.dv-cl--lg .dv-cl__in { font-size: 15px; }

.dv-cl:hover .dv-cl__in {
  background: var(--dv-accent);
  box-shadow: 0 0 0 5px rgba(240, 98, 16, .22), 0 4px 10px rgba(16, 24, 40, .25);
}

/* --------------------------------------------------------------------------
   کارت پیش نمایش ملک روی نقشه (هم داخل پاپ آپ دسکتاپ، هم شیت موبایل)
   -------------------------------------------------------------------------- */

.dv-popup .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: var(--dv-r);
  box-shadow: var(--dv-sh-2);
}

.dv-popup .leaflet-popup-content { width: auto !important; margin: 0; }
.dv-popup .leaflet-popup-tip { box-shadow: none; }

.dv-popup .leaflet-popup-close-button {
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--dv-ink) !important;
  font: 700 16px/26px tahoma, sans-serif;
  text-align: center;
}

.dv-mc {
  display: flex;
  overflow: hidden;
  border-radius: var(--dv-r);
  background: var(--dv-surface);
  color: var(--dv-body);
}

.dv-mc__media {
  position: relative;
  flex: 0 0 104px;
  height: 104px;
  background: var(--dv-sunken);
}

.dv-mc__media img { width: 100%; height: 100%; object-fit: cover; }

.dv-mc__tag {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(14, 23, 41, .82);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.dv-mc__tag--off { top: 28px; background: var(--dv-accent); }

.dv-mc__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
}

.dv-mc__price { color: var(--dv-ink); font-size: 15px; font-weight: 800; }
.dv-mc__price small { color: var(--dv-muted); font-size: 11px; font-weight: 600; }

.dv-mc__title,
.dv-mc__place {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv-mc__title { color: var(--dv-body); font-weight: 600; }
.dv-mc__place { color: var(--dv-muted); }
.dv-mc__place i { margin-inline-end: 3px; }

.dv-mc__specs { display: flex; gap: 10px; color: var(--dv-muted); font-size: 11px; }
.dv-mc__specs i { margin-inline-end: 3px; }

.dv-mc__cta { margin-top: auto; color: var(--dv-accent); font-size: 12px; font-weight: 700; }

/* --------------------------------------------------------------------------
   نوار و ابزارهای روی نقشه
   -------------------------------------------------------------------------- */

.dv-mapbar,
.dv-maptools,
.dv-mapcard,
.dv-maploading { position: absolute; z-index: 900; }

.dv-mapbar {
  top: 12px;
  inset-inline-start: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dv-mapcount {
  padding: 6px 11px;
  border: 1px solid var(--dv-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--dv-sh-1);
  color: var(--dv-body);
  font-size: 12px;
}

.dv-mapcount b { color: var(--dv-ink); font-weight: 800; }

.dv-mapstyle {
  display: flex;
  padding: 3px;
  border: 1px solid var(--dv-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--dv-sh-1);
}

.dv-mapstyle button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dv-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.dv-mapstyle button.is-on { background: var(--dv-navy); color: #fff; font-weight: 700; }

.dv-maptools {
  top: 12px;
  inset-inline-end: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dv-maptool {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--dv-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--dv-sh-1);
  color: var(--dv-body);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dv-maptool.is-on { border-color: var(--dv-accent); background: var(--dv-accent); color: #fff; }

.dv-mapcard {
  bottom: 12px;
  inset-inline: 12px;
  padding: 6px;
  border-radius: var(--dv-r-lg);
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-3);
  opacity: 0;
  transform: translateY(120%);
  transition: transform .24s ease, opacity .24s ease;
  visibility: hidden;
}

.dv-mapcard.is-open { opacity: 1; transform: none; visibility: visible; }

.dv-mapcard__close {
  position: absolute;
  top: -14px;
  inset-inline-end: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--dv-line);
  border-radius: 50%;
  background: var(--dv-surface);
  box-shadow: var(--dv-sh-1);
  color: var(--dv-body);
  cursor: pointer;
}

.dv-maploading {
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -14px;
}

.dv-maploading span {
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(14, 23, 41, .15);
  border-top-color: var(--dv-accent);
  border-radius: 50%;
  animation: dvSpin .8s linear infinite;
}

@keyframes dvSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   پرده ی شیت موبایل
   -------------------------------------------------------------------------- */

.dv-scrim {
  position: fixed;
  inset: 0;
  z-index: 1190;
  opacity: 0;
  background: rgba(14, 23, 41, .5);
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}

.dv-scrim.is-open { opacity: 1; visibility: visible; }

/* این دو فقط ته شیت موبایل معنی دارند */
.dv-side__apply,
.dv-filterbtn { display: none; }

/* --------------------------------------------------------------------------
   موبایل
   --------------------------------------------------------------------------
   ستون فیلتر از جریان صفحه بیرون می رود و با دکمه ی «فیلترها» به شکل یک شیت
   از پایین بالا می آید. */

@media (max-width: 991px) {
  .dv-page { --dv-bar-h: 62px; }

  .dv-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dv-body[data-view="2"] { grid-template-columns: minmax(0, 1fr); }

  .dv-filterbtn { display: inline-flex; }

  /* روی موبایل مرتب سازی در نوار بالا کافی است */
  .dv-head .dv-sortwrap { display: none; }
  .dv-head h1 { font-size: 18px; }

  .dv-side {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1200;
    max-height: 88vh;
    padding: 0 16px 92px;
    border: 0;
    border-radius: var(--dv-r-lg) var(--dv-r-lg) 0 0;
    box-shadow: var(--dv-sh-3);
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    visibility: hidden;
  }

  /* transform: none و نه translateY(0) — هر transformی روی شیت، خودش قابِ
     position:fixed فرزندانش می شود و مودالِ نوع ملک به جای وسط صفحه، داخل همین
     شیت حبس می شد. مقدار none هم مثل translateY(0) نرم انیمیت می شود. */
  .dv-side.is-open { transform: none; visibility: visible; }

  /* دستگیره ی بالای شیت — علامت قراردادی «این را می شود کشید/بست» */
  .dv-side__head::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 8px;
    width: 40px;
    height: 4px;
    margin-inline: auto;
    border-radius: 999px;
    background: var(--dv-line-2);
  }

  .dv-side__head { padding-block: 22px 12px; }

  .dv-side__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--dv-muted);
    border: 0;
    border-radius: 50%;
    background: var(--dv-sunken);
    font-size: 11px;
    cursor: pointer;
  }

  .dv-side__close:hover { color: var(--dv-ink); }

  /* روی موبایل «حذف فیلترها» جای دکمه ی بستن را می گیرد؛ متن کوتاه تر */
  .dv-side__head .dv-clear { margin-inline-start: auto; margin-inline-end: 12px; }

  /* یک دکمه ی «نمایش نتیجه ها» ته شیت، تا انگشت مجبور نباشد برگردد بالا */
  .dv-side__apply {
    position: fixed;
    inset-inline: 16px;
    bottom: 16px;
    z-index: 1210;
    height: 50px;
    color: #fff;
    border: 0;
    border-radius: var(--dv-r-sm);
    background: var(--dv-accent);
    box-shadow: 0 10px 24px -8px rgba(240, 98, 16, .7);
    font-size: 14.5px;
    font-family: inherit;
    font-weight: 700;
    display: none;
  }

  .dv-side.is-open ~ .dv-side__apply,
  .dv-side.is-open .dv-side__apply { display: block; }

  /* داخل شیت ارتفاع کم است؛ پنل کوتاه تر می شود تا دکمه های ته پنل زیر دکمه ی
     «نمایش نتیجه ها» گم نشوند */
  .dv-ms__list { max-height: 176px; }

  /* مودال نوع ملک بیرونِ شیت نشسته و ارتفاع خودش را دارد؛ سقفِ بالا مالِ
     کشویی محله است، نه او. */
  .dv-types { max-height: none; }

  /* روی موبایل مودال از پایین بالا می آید — همان حرکتی که خودِ شیت فیلتر دارد،
     پس دو لایه ی روی هم با یک زبان بسته و باز می شوند. */
  .dv-ms--modal .dv-ms__panel { align-items: flex-end; padding: 0; }

  .dv-modal__card {
    width: 100%;
    max-height: 82vh;
    border-radius: var(--dv-r-lg) var(--dv-r-lg) 0 0;
    animation: dvSheetUp .26s cubic-bezier(.2, .8, .2, 1);
  }

  .dv-modal__head { padding-block: 15px 12px; }

  .dv-ms--modal .dv-ms__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }

  .dv-help { display: none; }

  .dv-map { position: static; height: 62vh; margin-bottom: 18px; }

  /* نوار پایینِ ثابتِ سایت روی آخرین کارت می افتاد */
  .dv-body { padding-bottom: 96px; }

  /* ستون فیلتر که رفت، عرض آزاد می شود؛ سه ستون سقف است تا کارت خیلی
     باریک نشود. */
  .dv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .dv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-bar__in { gap: 8px; }
  .dv-toggle { padding-inline: 13px; }

  /* روی گوشی سه ستون، کارت را آنقدر باریک می کرد که «مغازه و اداری و تجاری»
     چهار خط می شد */
  .dv-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px 16px; }
  .dv-type { padding: 13px 6px 11px; }
  .dv-type__ic { width: 44px; height: 44px; border-radius: 14px; }
  .dv-type__svg { width: 25px; height: 25px; }
}

/* موبایل: دو کارت در هر ردیف — پس همه چیز یک پله کوچک تر می شود تا متن
   داخل ستونِ حدوداً ۱۶۰ پیکسلی جا شود. */
@media (max-width: 575px) {
  .dv-wrap { width: calc(100% - 24px); }

  .dv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .dv-head { padding-bottom: 10px; }
  .dv-head h1 { font-size: 16.5px; }

  /* روی این عرض، متن دکمه ها جا نمی شود؛ فقط آیکون می ماند. شمارنده ی فیلتر
     استثناست — همان چیزی است که باید دیده شود. */
  .dv-bar__acts .dv-toggle > span:not(.dv-toggle__badge) { display: none; }
  .dv-search input { height: 42px; font-size: 13.5px; }

  /* select متن لازم دارد و نمی شود آیکونی اش کرد، پس فقط جمع تر می شود تا
     کادر جستجو خفه نشود */
  .dv-select { padding-inline: 10px 26px; font-size: 12px; }
  .dv-sortwrap > i { inset-inline-end: 9px; }

  .dv-card__body { padding: 10px; }
  .dv-card__price { font-size: 14px; }
  .dv-card__price small { font-size: 10.5px; }
  .dv-card__title { font-size: 12.5px; line-height: 1.7; }
  .dv-specs { gap: 3px 9px; font-size: 11px; }
  .dv-card__foot { gap: 2px 6px; font-size: 10.5px; }
  .dv-fav { width: 29px; height: 29px; font-size: 12.5px; }
  .dv-cmp { top: 44px; }

  /* واتساپ و تماس کنار هم در این عرض جا نمی شوند */
  .dv-card__acts { flex-direction: column; gap: 5px; margin-top: 9px; padding-top: 9px; }
  .dv-act { height: 31px; font-size: 11.5px; }

  .dv-skel > div { padding: 10px; }
}

/* کسانی که انیمیشن برایشان آزاردهنده است */
@media (prefers-reduced-motion: reduce) {
  .dv-page *,
  .dv-page *::before,
  .dv-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .dv-card:hover { transform: none; }
  .dv-card:hover .dv-card__media img { transform: none; }
}