/* ==========================================================================
   قم املاک — طرح دومِ صفحه ی اصلی (نشانی /home-v2) — چیدمانِ نقشه محور
   --------------------------------------------------------------------------
   بازنویسیِ کامل. نسخه ی قبلیِ این فایل یک صفحه ی «بروشوری» بود (هیروی عکس دار ،
   بعد بخش به بخش پایین رفتن). این نسخه یک *ابزارِ جستجو* است ، مثل دیوار و کلید:

     نوارِ فیلترِ چسبان  →  ستونِ فایل ها کنارِ نقشه ی زنده  →  بخش های تکمیلی

   سه قاعده ی همیشگیِ سایت ۱۴ که اینجا هم رعایت شده اند :

     • هیچ کلاسِ بوت استرپی و هیچ شناسه ی عمومی ای به کار نمی رود ؛ همه با پیشوندِ
       nh- . ( theme14.min.css کلاسِ rounded-3 را یک کادرِ سیاهِ ۴۵۰ پیکسلی کرده و
       شناسه های map و map-container را از قبل گرفته است — روی #map یک
       height:calc(100% - 110px) و روی #map-container یک opacity:0 نشسته که
       نقشه را نامرئی می کند. شناسه ی نقشه ی این صفحه nhMap است.)

     • هر تیتر رنگش را صریح می نویسد ( قاعده ی عنصریِ h1..h6{color:#1f1b2d} در
       theme14 بر ارث بری می چربد و تیترِ روی زمینه ی تیره را نامرئی می کند ).

     • نسبتِ تصویرها با padding ساخته می شود نه با aspect-ratio ( وب ویوی ایتا ).

   پالت : سرمه ای + نارنجیِ برند ، همان دو رنگِ لوگو و بقیه ی سایت.
   نارنجیِ روشن (#F26522) فقط رنگِ نشانه و آیکون است ؛ هر جا متنِ سفید روی نارنجی
   می نشیند از --nh-cta استفاده می شود که کنتراستش از ۴٫۵ رد می شود.

   نشانگرها و پاپ آپِ نقشه عمداً از کلاس های موجودِ public.css استفاده می کنند
   ( .q-pin ، .q-cl ، .q-popup ، .q-mc ) — همان چیزی که صفحه ی اصلیِ فعلی و صفحه ی
   جستجو می سازند ، پس شکلِ پین در همه ی سایت یکی می ماند.
   ========================================================================== */

:root {
    /* کرمِ خیلی روشن ، نزدیک به سفید : زمینه فقط باید گرم *باشد* ، نه اینکه
       خودش دیده شود. کارت ها سفیدِ خالص می مانند و جدا شدنشان از زمینه را
       کادرِ نازکشان می گوید ، نه اختلافِ رنگ. */
    --nh-page: #FCFAF6;
    --nh-surface: #FFFFFF;
    --nh-surface-2: #F6F1E8;
    --nh-surface-3: #EFE8DC;

    /* خاکستری ها هم روی محورِ همین کرم چرخانده شده اند ، نه خاکستریِ آبیِ
       نسخه ی قبل : یک خاکستریِ سرد روی زمینه ی گرم «کثیف» دیده می شود و
       کنتراستش هم کم می افتد ( #667085 روی #F3E9D6 فقط ۴٫۱۳ بود ، زیر حدِ
       ۴٫۵ ). مقادیرِ تازه : muted روی کرمِ بخش ها ۴٫۸۵ و روی زمینه ۵٫۲۵ ،
       body روی زمینه ۸٫۵ و ink روی سفید ۱۷٫۲ . */
    --nh-ink: #1C1811;
    --nh-body: #4C463C;
    --nh-muted: #6C6455;

    --nh-line: #EAE2D5;
    --nh-line-2: #F5F0E7;

    /* سرمه ای : --nh-navy رنگِ متن و آیکون ، --nh-fill رنگِ سطحِ پر (دکمه ، بج) */
    --nh-navy: #1D4C9E;
    --nh-navy-d: #16305F;
    --nh-navy-dd: #0E2247;
    --nh-fill: #1D4C9E;
    /* ته رنگِ چیپ ها و دکمه های کم رنگ : شنیِ گرم ، نه آبیِ روشن.
       یک لکه ی آبیِ کم رنگ روی زمینه ی کرم سرد و ناهمرنگ می افتد ؛ اینجا
       زمینه گرم می ماند و «برند بودن» را رنگِ سرمه ایِ متن و کادر می گوید. */
    --nh-soft: #F7F2E9;
    --nh-soft-line: #E7DECD;

    /* نارنجی : --nh-orange نشانه و آیکون ، --nh-cta زمینه ی دکمه ی متنِ سفید.
       هر دو فامِ ۲۵ تا ۲۸ درجه گرفته اند (قبلاً ۱۷ تا ۱۹ بود و قرمز خوانده
       می شد). سفید روی #D2650C سه و سه چهارم به یک است ــ بالای حدِ متنِ درشت
       و زیرِ ۴٫۵ ؛ همان معامله ای که home.css هم کرد و دلیلش آنجا نوشته شده. */
    --nh-orange: #F4761F;
    --nh-cta: #D2650C;
    --nh-cta-2: #B85708;
    --nh-cta-deep: #B04A08;
    --nh-cta-ink: #9A4207;
    --nh-orange-soft: #FFF3E6;

    --nh-r-sm: 10px;
    --nh-r: 14px;
    --nh-r-lg: 20px;

    /* سایه ها هم گرم اند : سایه ی آبی روی کرم یک هاله ی خاکستریِ کثیف
       می سازد که چشم آن را «کهنه» می بیند. */
    --nh-sh-s: 0 1px 2px rgba(78, 60, 32, .04), 0 4px 12px rgba(78, 60, 32, .05);
    --nh-sh-m: 0 10px 28px rgba(78, 60, 32, .09);
    --nh-sh-l: 0 24px 56px rgba(78, 60, 32, .15);

    /* نوارِ فیلتر یک سفیدِ گرم است ، نه سفیدِ خالصِ کارت ها : این نوار بینِ
       باندِ سرمه ای و بدنه ی کرم می نشیند و سفیدِ خالص آنجا مثل یک تکه ی سردِ
       جدا افتاده دیده می شود. کارت ها سفیدِ خالص می مانند چون باید از زمینه ی
       کرم جدا شوند. */
    --nh-bar-bg: #FFFFFF;

    --nh-gap: 14px;
    --nh-sec: clamp(44px, 5.5vw, 76px);
    /* ارتفاعِ نوارِ فیلترِ چسبان ؛ نقشه و ستونِ فایل ها از همین می خوانند */
    --nh-bar-h: 62px;
}

html[data-theme="dark"] {
    --nh-page: #0B1220;
    --nh-surface: #121B2C;
    --nh-surface-2: #16223A;
    --nh-surface-3: #1D2B45;

    --nh-ink: #E9EEF7;
    --nh-body: #B7C4D8;
    --nh-muted: #8E9DB5;

    --nh-line: #26344C;
    --nh-line-2: #1C2740;

    --nh-navy: #7FA9EE;
    --nh-navy-d: #16305F;
    --nh-navy-dd: #0A1836;
    --nh-fill: #1D4C9E;
    --nh-soft: #14243F;
    --nh-soft-line: #23375A;

    --nh-orange: #FF9052;
    --nh-cta: #BB5B08;
    --nh-cta-2: #93440A;
    --nh-cta-deep: #B04A08;
    --nh-cta-ink: #FF9052;
    --nh-orange-soft: #2A1710;

    --nh-sh-s: 0 1px 2px rgba(0, 0, 0, .32), 0 4px 12px rgba(0, 0, 0, .3);
    --nh-sh-m: 0 10px 28px rgba(0, 0, 0, .42);
    --nh-sh-l: 0 24px 56px rgba(0, 0, 0, .55);

    --nh-bar-bg: var(--nh-surface);
}

/* ---------- پایه ---------- */

body.nh-page {
    background: var(--nh-page);
    color: var(--nh-body);
}

.nh {
    /* ریشه ی سند ltr است و فقط text-align:right دارد ، پس بدون این هیچ ستونِ
       گرید و هیچ خاصیتِ منطقی ای سرِ جای درستش نمی نشیند. */
    direction: rtl;
    background: var(--nh-page);
    font-size: 15px;
    line-height: 1.8;
    color: var(--nh-body);
    overflow-x: clip;
}

.nh *,
.nh *::before,
.nh *::after { box-sizing: border-box; }

.nh h1, .nh h2, .nh h3, .nh h4 {
    color: var(--nh-ink);
    margin: 0;
    line-height: 1.55;
    font-weight: 800;
    letter-spacing: -.2px;
}

.nh p { margin: 0; }
.nh ul { margin: 0; padding: 0; list-style: none; }

/* ریست لینک ها فقط برای لینکِ بی کلاس. اگر «.nh a{color:inherit}» نوشته شود ،
   اختصاصیتش از خودِ کلاس های دکمه بیشتر است و متنِ سفیدِ روی دکمه ها را می خورد. */
.nh a { text-decoration: none; transition: color .18s ease; }
.nh a:not([class]),
.nh h2 a,
.nh h3 a { color: inherit; }

.nh img { max-width: 100%; }
.nh svg { flex: none; }

/* اندازه ی پیش فرضِ آیکون ها. بدون این ، هر آیکونی که یادم برود اندازه بدهم
   ۴۴ پیکسل باز می شود و کارت را به هم می ریزد (نشانِ «فایل دفتر» دقیقاً همین
   شد). عمداً روی ناحیه هایی نوشته شده که آیکونِ خودم دارند و نه روی کلِ صفحه :
   لایه ی برداریِ لیفلت هم یک svg است و نباید ۱em شود. */
.nh-top svg,
.nh-bar svg,
.nh-list svg,
.nh-sec svg,
.nh-owner svg,
.nh-mapfab svg { width: 1em; height: 1em; }

.nh-card__agent svg { width: 15px; height: 15px; }

/* پهنای همه ی کانتینرهای این صفحه از کلاسِ container خودِ سایت می آید ــ
   همان کلاسی که سربرگ هم دارد ــ نه از یک max-width دستی. با هر تغییری در
   قالب ، لبه ی نقشه و کارت ها دقیقاً زیرِ لبه ی سربرگ می ماند.
   nh-wrap فقط یک قلاب برای فاصله هاست و خودش پهنا نمی دهد. */
.nh-wrap { width: 100%; }

.nh-sec { padding: var(--nh-sec) 0; }
.nh-sec--tight { padding: calc(var(--nh-sec) * .6) 0; }

.nh-sec--tint {
    background: var(--nh-surface-2);
    border-top: 1px solid var(--nh-line-2);
    border-bottom: 1px solid var(--nh-line-2);
}

/* ---------- سرِ بخش ---------- */

.nh-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: clamp(18px, 2.4vw, 30px);
}

.nh-head__txt { max-width: 620px; }

.nh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding: 5px 12px 5px 10px;
    border: 1px solid var(--nh-soft-line);
    border-radius: 999px;
    background: var(--nh-soft);
    color: var(--nh-navy);
    font-size: .77rem;
    font-weight: 800;
    line-height: 1;
}

.nh-eyebrow svg { width: 15px; height: 15px; }

.nh-head h2 {
    font-size: clamp(1.32rem, 2.2vw, 1.86rem);
    text-wrap: balance;
}

.nh-head p {
    margin-top: 8px;
    color: var(--nh-muted);
    font-size: .9rem;
}

.nh-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--nh-line);
    border-radius: 999px;
    background: var(--nh-surface);
    color: var(--nh-navy);
    font-size: .84rem;
    font-weight: 800;
    box-shadow: var(--nh-sh-s);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.nh-link svg { width: 16px; height: 16px; }
.nh-link:hover {
    transform: translateX(-3px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-m);
    color: var(--nh-navy);
}

/* ---------- دکمه ها ---------- */

.nh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.nh-btn svg { width: 18px; height: 18px; }

/* نارنجیِ واقعی ، نه نارنجیِ سوخته : #D2650C به قهوه ای می زد. این دو پله همان
   نارنجیِ لوگو هستند.
   نکته : سفید روی این نارنجی حدودِ ۳٫۲:۱ است و از حدِ ۴٫۵ رد نمی شود — همان
   معامله ای که خودِ سربرگِ سایت و صفحه ی اصلی هم کرده اند ، و اینجا هم
   آگاهانه پذیرفته شده چون رنگِ برند خواسته شده است. */
.nh-btn--cta {
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(238, 95, 8, .3);
}

.nh-btn--cta:hover { color: #fff; transform: translateY(-2px); }

.nh-btn--navy { background: var(--nh-fill); color: #fff; }
.nh-btn--navy:hover { color: #fff; transform: translateY(-2px); }

.nh-btn--line {
    background: var(--nh-surface);
    border-color: var(--nh-line);
    color: var(--nh-ink);
}

.nh-btn--line:hover { border-color: var(--nh-navy); color: var(--nh-navy); }

.nh-btn--ghost {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.nh-btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ==========================================================================
   ۱) نوارِ معرفی — کوتاه
   ( این بلوک هنوز نسخه ی سرمه ایِ اولیه است ؛ از ۱۴۰۵/۰۶/۲۲ بندِ «ب) هیرو»ی
   پایینِ فایل رویش می نشیند و باند را کرم و وسط چین می کند. رنگ را آنجا
   عوض کن نه اینجا. )
   در چیدمانِ ابزاری ، بالای صفحه نباید یک هیروِ تمام قد باشد : کاربر آمده جستجو
   کند. ولی صفحه باز هم به یک h1 و یک جمله ی هویتی نیاز دارد ، پس همان ها در یک
   نوارِ کم ارتفاع می نشینند و بلافاصله زیرش فیلتر می آید.
   ========================================================================== */

.nh-top {
    position: relative;
    overflow: hidden;
    padding: calc(var(--qa-header-h, 84px) + 20px) 0 20px;
    background: linear-gradient(120deg, var(--nh-navy-dd) 0%, var(--nh-navy-d) 52%, #1B3D77 100%);
    color: #fff;
}

/* دو هاله و یک شبکه ی نقطه ای ؛ هیچ عکسی لازم ندارد */
.nh-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(680px 340px at 88% -30%, rgba(242, 101, 34, .30), transparent 62%),
        radial-gradient(560px 300px at 8% 120%, rgba(46, 99, 190, .45), transparent 66%);
    pointer-events: none;
}

.nh-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(to bottom left, #000, transparent 72%);
    mask-image: linear-gradient(to bottom left, #000, transparent 72%);
    opacity: .5;
    pointer-events: none;
}

.nh-top__in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 24px;
}

.nh-top__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
}

.nh-top__badge svg { width: 14px; height: 14px; color: #FFB088; }

.nh-top__copy { max-width: 760px; }

.nh-top h1 {
    color: #fff;
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
    line-height: 1.5;
    text-wrap: balance;
}

/* هلوییِ قبلی روی سرمه ای «نارنجی» خوانده نمی شد. این نارنجیِ برند است و
   کنتراستش روی سرمه ای ۴٫۷:۱ ــ هم واقعاً نارنجی است هم خواناست. */
.nh-top h1 em {
    font-style: normal;
    color: #FA7A1E;
}

.nh-top__lead {
    max-width: 560px;
    margin-top: 8px !important;
    color: #C9D8F0;
    font-size: .93rem;
    line-height: 1.9;
}

/* دو کلیدِ نوع معامله ، جایِ آمارِ قبلی. روی باندِ سرمه ای ، کلیدِ فعال سفیدِ پر
   است و آن یکی فقط یک کادرِ روشن — همان قراردادی که نوارِ فیلتر هم دارد. */
.nh-top__acts { display: flex; flex-wrap: wrap; gap: 10px; }

.nh-topbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 14px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.nh-topbtn svg { width: 18px; height: 18px; }
.nh-topbtn:hover { background: rgba(255, 255, 255, .2); color: #fff; transform: translateY(-2px); }

.nh-topbtn.is-on {
    border-color: #fff;
    background: #fff;
    color: var(--nh-navy-d);
    box-shadow: 0 10px 24px rgba(6, 18, 40, .32);
}

.nh-topbtn.is-on:hover { background: #fff; color: var(--nh-navy-d); }

/* آمار در همان نوار ، سمتِ دیگرِ سطر */
.nh-top__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nh-top__stat {
    min-width: 104px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--nh-r);
    background: rgba(255, 255, 255, .08);
}

.nh-top__stat b {
    display: block;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.5;
}

.nh-top__stat span {
    display: block;
    color: #B9CBE8;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.4;
}

/* کاشی های «نوع ملک» ــ خودِ کاشی ها استایلشان را از public.css می گیرند
   ( q-types / q-type ) و اینجا فقط جاگذاری شان در باندِ سرمه ای نوشته
   می شود : یک ردیفِ کارتِ سفید روی سرمه ای. */
.nh-kinds {
    position: relative;
    z-index: 1;
    padding-top: 22px;
    padding-bottom: 22px;
}

/* روی زمینه ی سرمه ای کادرِ روشنِ کاشی دیده نمی شود ، پس لبه اش برداشته
   می شود و به جایش یک سایه ی نرم می نشیند. */
/* ══ کاشیِ نوع ملک ═════════════════════════════════════════════════════
   کارتِ سفید با یک پلاکِ سرمه ای و آیکونِ ایزومتریکِ رنگی. یک بار عکسِ
   واقعی امتحان شد و کنار گذاشته شد : بنرهای دفتر واترمارک دارند و عکسِ
   فایل ها غیرقابلِ پیش بینی است ، در حالی که کاشی باید همیشه مرتب باشد.

   زمینه ی پلاک برای همه یکی است و رنگ فقط داخلِ خودِ آیکون است ، وگرنه
   ردیفِ ده رنگی شلوغ می شود.
   ══════════════════════════════════════════════════════════════════════ */
.nh-kinds__row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
    gap: 10px;
    max-width: calc(var(--cols, 8) * 168px + (var(--cols, 8) - 1) * 10px);
    margin-inline: auto;
}

.nh-kinds__row[hidden] { display: none; }

.nh-kind {
    /* ستونِ ساده ، نه مربعِ با فرزندانِ absolute : ارتفاع از خودِ محتوا
       می آید و همه ی کاشی های یک ردیف با گرید هم قد می شوند ، پس پلاکِ آیکون
       هیچ وقت روی نوشته نمی افتد. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 8px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(6, 18, 40, .28);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.nh-kind:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(6, 18, 40, .36); }

.nh-kind__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    flex: none;
}

/* پلاکِ روشن ، نه سرمه ای : این رندرها آبی و سفیدند و روی سرمه ای بخشِ
   ساختمان با زمینه یکی می شد. زمینه ی آبیِ کمرنگ همان لحنِ برند را نگه می دارد
   و شکل ها را جدا می کند. */
.nh-kind__ico::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(160deg, #EFF5FE 0%, #DEE9FA 55%, #CCDDF5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(29, 76, 158, .13),
        0 8px 18px -8px rgba(16, 48, 95, .32);
}

.nh-kind__ico svg { position: relative; width: 74px; height: 74px; }

/* عکسِ ۳بعدی کمی بزرگ تر از آیکونِ برداری است : خودِ فایل حاشیه ی شفاف دارد و
   با اندازه ی برابر ، کوچک تر دیده می شد. contain است نه cover ، چون نسبتِ
   شکل ها یکی نیست و بریدنِ لبه ی بام زشت است. */
.nh-kind__ico picture { position: relative; display: block; line-height: 0; }

.nh-kind__ico img {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
    filter: drop-shadow(0 5px 9px rgba(16, 48, 95, .22));
    transition: transform .22s ease;
}

.nh-kind:hover .nh-kind__ico img { transform: scale(1.07); }

.nh-kind__body { display: block; text-align: center; }

.nh-kind__body b {
    display: block;
    color: var(--nh-ink);
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.5;
}

/* کاشیِ انتخاب شده : کادرِ نارنجی ، همان رنگِ تبِ فعال */
.nh-kind.is-on {
    border-color: #FA7A1E;
    box-shadow: 0 0 0 2px #FA7A1E, 0 12px 26px rgba(238, 95, 8, .3);
}

@media (max-width: 1199.98px) {
    .nh-kinds__row { grid-template-columns: repeat(min(var(--cols, 9), 9), minmax(0, 1fr)); gap: 9px; }
    .nh-kind__ico { width: 74px; height: 74px; }
    .nh-kind__ico::before { border-radius: 20px; }
    .nh-kind__ico svg { width: 58px; height: 58px; }
    .nh-kind__ico img { width: 68px; height: 68px; }
}

@media (max-width: 991.98px) {
    .nh-kinds__row { grid-template-columns: repeat(min(var(--cols, 9), 6), minmax(0, 1fr)); gap: 8px; }
    .nh-kind__ico { width: 60px; height: 60px; }
    .nh-kind__ico::before { border-radius: 17px; }
    .nh-kind__ico svg { width: 48px; height: 48px; }
    .nh-kind__ico img { width: 55px; height: 55px; }
    .nh-kind__body b { font-size: .76rem; }
}

@media (max-width: 575.98px) {
    .nh-kinds__row { grid-template-columns: repeat(min(var(--cols, 8), 4), minmax(0, 1fr)); gap: 6px; }
    .nh-kind { border-radius: 13px; }
    .nh-kind { padding: 9px 4px 8px; gap: 6px; }
    .nh-kind__ico { width: 42px; height: 42px; }
    .nh-kind__ico::before { border-radius: 13px; }
    .nh-kind__ico svg { width: 34px; height: 34px; }
    .nh-kind__ico img { width: 39px; height: 39px; filter: drop-shadow(0 2px 5px rgba(16, 48, 95, .2)); }
    .nh-kind__body b { font-size: .6rem; line-height: 1.4; }
}

/* ==========================================================================
   ۲) نوارِ فیلترِ چسبان
   ========================================================================== */

.nh-bar {
    position: sticky;
    z-index: 30;
    top: var(--qa-header-h, 84px);
    border-bottom: 1px solid var(--nh-line);
    background: var(--nh-bar-bg);
    box-shadow: 0 2px 14px rgba(78, 60, 32, .07);
}

.nh-bar__in {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--nh-bar-h);
    padding: 9px 18px;
    overflow-x: auto;
    scrollbar-width: none;
}

.nh-bar__in::-webkit-scrollbar { display: none; }

/* دکمه ی دوحالته ی نوع معامله */
.nh-deal {
    flex: none;
    display: inline-flex;
    padding: 3px;
    border-radius: 12px;
    background: var(--nh-surface-2);
}

.nh-deal button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--nh-body);
    font-family: inherit;
    font-size: .87rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.nh-deal button svg { width: 16px; height: 16px; }

/* تبِ فعال نارنجی است ، نه سرمه ای : روی نوارِ سفید تنها چیزی که باید فوراً
   دیده شود همین است که «الان کدام معامله» انتخاب شده. */
.nh-deal button.is-on {
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(238, 95, 8, .3);
}

/* کشویی ها و کلیدها */
.nh-field {
    position: relative;
    flex: none;
    min-width: 0;
}

.nh-field > svg {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    color: var(--nh-navy);
    pointer-events: none;
}

.nh-field select {
    height: 44px;
    min-width: 132px;
    max-width: 190px;
    padding: 0 34px 0 30px;
    border: 1px solid var(--nh-line);
    border-radius: 11px;
    background: var(--nh-surface);
    color: var(--nh-ink);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    line-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .18s ease, box-shadow .18s ease;
    background-image: url("data:image/svg+xml,%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 10px center;
    background-size: 14px 14px;
}

.nh-field select:focus {
    outline: 0;
    border-color: var(--nh-navy);
    box-shadow: 0 0 0 3px var(--nh-soft);
}

/* کشویی ای که مقدار گرفته ، دیده شود */
.nh-field select.is-set {
    border-color: var(--nh-navy);
    background-color: var(--nh-soft);
    color: var(--nh-navy);
}

.nh-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--nh-line);
    border-radius: 11px;
    background: var(--nh-surface);
    color: var(--nh-body);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s ease;
}

.nh-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.nh-toggle svg { width: 16px; height: 16px; color: var(--nh-muted); }

.nh-toggle.is-on {
    border-color: var(--nh-navy);
    background: var(--nh-soft);
    color: var(--nh-navy);
}

.nh-toggle.is-on svg { color: var(--nh-navy); }

.nh-bar__reset {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    margin-right: auto;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--nh-muted);
    font-family: inherit;
    font-size: .83rem;
    font-weight: 700;
    cursor: pointer;
}

.nh-bar__reset svg { width: 15px; height: 15px; }
.nh-bar__reset:hover { color: var(--nh-cta); }

/* ==========================================================================
   ۳) ستونِ فایل ها کنارِ نقشه
   ========================================================================== */

.nh-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
}

.nh-list {
    padding: 18px 0 18px 16px;
    min-width: 0;
}

.nh-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.nh-list__count {
    color: var(--nh-ink);
    font-size: 1.02rem;
    font-weight: 800;
}

.nh-list__count b { color: var(--nh-navy); }

.nh-list__count span {
    display: block;
    color: var(--nh-muted);
    font-size: .78rem;
    font-weight: 700;
}

.nh-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.nh-sort span {
    color: var(--nh-muted);
    font-size: .8rem;
    font-weight: 700;
}

.nh-sort select {
    height: 38px;
    padding: 0 12px 0 26px;
    border: 1px solid var(--nh-line);
    border-radius: 10px;
    background: var(--nh-surface);
    color: var(--nh-ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 800;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%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 8px center;
    background-size: 13px 13px;
}

/* ══ شبکه ی کارت ها ══════════════════════════════════════════════════
   کارت ها همان کارتِ صفحه ی جستجو هستند ( .ec از card_unified ) و استایلِ
   خودشان را با خودشان می آورند ؛ اینجا فقط شبکه ی دو ستونی و حالتِ
   «در حالِ بارگذاری» نوشته می شود.

   کلاسِ estate-grid هم روی همین عنصر هست (چهار ستونه) ، پس این قاعده باید
   بعد از آن بیاید و می آید : فایلِ کارت استایلش را داخلِ <style> صفحه
   می گذارد و home-v2.css در <head> بعد از آن لود می شود... نه — برعکس ،
   استایلِ درون صفحه همیشه بعد از فایل های head می آید. پس اینجا از
   اختصاصیتِ بالاتر استفاده می شود ، نه از ترتیب. */
.nh-list .nh-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nh-gap);
}

/* هنگام آمدنِ نتیجه ی تازه ، فهرستِ قبلی محو می شود نه اینکه ناپدید شود :
   صفحه نمی پرد و کاربر می فهمد چیزی در راه است. */
.nh-cards.is-loading { opacity: .45; pointer-events: none; }

/* دکمه ی «تماس» کارتِ ملک نارنجی می شود ، ولی فقط زیرِ body.nh-page :
   همین کارت در صفحه ی جستجو و پنل هم رندر می شود و آنجا باید سرمه ای بماند. */
body.nh-page .nh-cards .ec-call {
    border-color: #EE5F08;
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
}

body.nh-page .nh-cards .ec-call:hover {
    border-color: #D95206;
    background: #D95206;
}

/* کارتِ ملکِ متناظر با پینی که روی نقشه انتخاب شده */
.nh-cards .ec.is-active {
    border-color: var(--nh-navy);
    box-shadow: 0 0 0 3px var(--nh-soft), var(--nh-sh-m);
}

/* کارتِ اختصاصیِ این صفحه حذف شد : فهرست حالا همان کارتِ صفحه ی جستجو را
   رندر می کند ( .ec ) و آن کارت استایلش را خودش همراه می آورد. */

.nh-more {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.nh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    border: 1px dashed var(--nh-line);
    border-radius: var(--nh-r-lg);
    background: var(--nh-surface);
    color: var(--nh-muted);
    font-weight: 700;
    text-align: center;
}

.nh-empty img { width: 104px; height: auto; opacity: .75; }

/* ==========================================================================
   ۴) نقشه
   ========================================================================== */

.nh-mapcol { position: relative; }

/* نوارِ دستگیره و دکمه ی «نقشه» ی سربرگِ فهرست فقط روی گوشی معنی دارند ؛ روی
   دسکتاپ نقشه ستونِ همیشه بازِ کنارِ فهرست است. */
.nh-sheet__bar,
.nh-list__map { display: none; }

.nh-mapbox {
    position: sticky;
    /* ارتفاع با clamp بسته شده ، نه با یک calc(100vh) ی باز : در قابِ بلندِ
       اسکرین شات (و هر جای دیگری که ارتفاعِ پنجره غیرعادی است) یک calc باز
       نقشه را چند هزار پیکسل می کند. */
    top: calc(var(--qa-header-h, 84px) + var(--nh-bar-h) + 14px);
    height: clamp(460px, calc(100vh - var(--qa-header-h, 84px) - var(--nh-bar-h) - 28px), 780px);
    margin: 18px 0;
    overflow: hidden;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r-lg);
    background: var(--nh-surface-3);
    box-shadow: var(--nh-sh-s);
}

/* شناسه ی nhMap : روی #map یک قاعده ی شناسه ای در theme14.min.css نشسته
   (height: calc(100% - 110px)) که نقشه را جمع می کند. */
#nhMap {
    width: 100%;
    height: 100%;
    background: var(--nh-surface-3);
}

.nh-map__tools {
    position: absolute;
    z-index: 500;
    top: 12px;
    right: 12px;
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--nh-sh-s);
}

.nh-map__tools button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4C463C;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.nh-map__tools button svg { width: 14px; height: 14px; }
.nh-map__tools button.is-on { background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%); color: #fff; }

/* «جستجو در این محدوده» ــ فقط بعد از جابه جا شدنِ نقشه دیده می شود.
   یک ردیف پایین ترِ کلیدهای «نقشه / ماهواره» می نشیند ، نه هم ردیفشان : از
   وقتی ستونِ نقشه باریک شد ( ۴۶۰ پیکسل ) این دکمه ی وسط چین با آن کلیدها که
   از راست می آیند برخورد می کرد و رویشان می افتاد. */
.nh-map__area {
    position: absolute;
    z-index: 500;
    top: 58px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
    color: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(238, 95, 8, .34);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.nh-map__area svg { width: 15px; height: 15px; }

.nh-map__area.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nh-map__count {
    position: absolute;
    z-index: 500;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    /* روی نقشه ، در هر دو تم ، زمینه سفید است */
    color: #1C1811;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: var(--nh-sh-s);
}

.nh-map__count img { width: 54px; height: auto; }
.nh-map__count b { color: #E05A06; }

.nh-map__none {
    position: absolute;
    z-index: 600;
    top: 50%;
    left: 50%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(280px, 80%);
    padding: 18px;
    transform: translate(-50%, -50%);
    border-radius: var(--nh-r);
    background: rgba(255, 255, 255, .96);
    color: #6C6455;
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    box-shadow: var(--nh-sh-m);
}

.nh-map__none.is-on { display: flex; }
.nh-map__none b { color: #1C1811; }

.nh-map__loading {
    position: absolute;
    z-index: 600;
    top: 12px;
    left: 12px;
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--nh-sh-s);
}

.nh-map__loading.is-on { display: block; }

.nh-map__loading::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 2px solid var(--nh-soft-line);
    border-top-color: var(--nh-navy);
    border-radius: 50%;
    animation: nh-spin .8s linear infinite;
}

@keyframes nh-spin { to { transform: rotate(360deg); } }

/* پین و خوشه ی نقشه در این صفحه نارنجی اند ، نه سرمه ای : روی کاشی های خاکستریِ
   نقشه رنگِ گرم بیشتر دیده می شود. دامنه ی قاعده عمداً .nh است تا پینِ صفحه ی
   جستجو و صفحه ی اصلی دست نخورده بماند. */
.nh .q-pin__in {
    background: linear-gradient(125deg, #FA7A1E 0%, #E85D04 100%);
}

.nh .q-cl__in {
    background: linear-gradient(140deg, #FA7A1E 0%, #E05A06 60%, #C74C03 100%);
}

/* پینِ ملکی که ماوس روی کارتش است ــ همان پیوندِ کارت و نقشه که کاربر از
   اپ های ملک انتظار دارد. خودِ شکلِ پین از public.css می آید (q-pin) و اینجا
   فقط رنگش عوض می شود. */
.q-pin.nh-hot { z-index: 1000 !important; }

.nh .q-pin.nh-hot .q-pin__in {
    background: linear-gradient(125deg, #2A5FA8 0%, #16305F 100%);
    transform: scale(1.08);
}

/* دکمه ی شناورِ «نقشه» روی گوشی */
.nh-mapfab { display: none; }

/* ==========================================================================
   ۵) بخش های پایینِ صفحه
   ========================================================================== */

/* ---------- محله ها ---------- */

.nh-areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* کارتِ محله عکس دار شد : عکس از مقاله ی همان محله می آید و اگر نبود ، همان
   قابِ سرمه ای با نشانِ محل می نشیند. نسبتِ عکس با padding ساخته می شود نه با
   aspect-ratio (وب ویوی ایتا). */
/* کارتِ محله یک ردیفِ کوتاه است : بندانگشتیِ عکس ، بعد نام و قیمتِ متری ، و
   آخر شمارِ فایل. قابِ تمام عرضِ قبلی این بخش را به یک گالریِ عکس تبدیل
   می کرد ، در حالی که کارش میان بُر است. */
.nh-area {
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r);
    background: var(--nh-surface);
    transition: all .2s ease;
}

.nh-area__thumb {
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(150deg, #24589F 0%, #16305F 70%);
    color: rgba(255, 255, 255, .6);
}

.nh-area__thumb svg { width: 21px; height: 21px; }

.nh-area__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.nh-area__foot {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nh-area:hover {
    transform: translateY(-3px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-m);
}

.nh-area__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: var(--nh-soft);
    color: var(--nh-navy);
    transition: background .2s ease, color .2s ease;
}

.nh-area__pin svg { width: 19px; height: 19px; }
.nh-area:hover .nh-area__pin { background: var(--nh-fill); color: #fff; }

.nh-area__txt { display: block; flex: 1; min-width: 0; }

.nh-area__txt b {
    display: block;
    overflow: hidden;
    color: var(--nh-ink);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nh-area__txt span {
    display: block;
    color: var(--nh-muted);
    font-size: .76rem;
    font-weight: 700;
}

/* بازه ی قیمتِ متریِ آپارتمان ؛ سرمه ایِ پررنگ و ضخیم می گیرد تا از برچسبِ
   خنثای «محله قم» جدا باشد و اولین چیزی باشد که در کارت خوانده می شود.
   --nh-navy (#1D4C9E) آبیِ متوسط است و کم رنگ دیده می شد ؛ سرمه ایِ واقعی
   --nh-navy-d است. در حالتِ شب همان توکن روی زمینه ی تیره گم می شود ، پس
   پایین تر با --nh-navy (که در شب روشن است) جایگزین می شود. */
.nh-area__price {
    color: var(--nh-navy-d) !important;
    font-size: .78rem;
    font-weight: 900;
}

html[data-theme="dark"] .nh-area__price { color: var(--nh-navy) !important; }

.nh-area__count {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--nh-soft);
    color: var(--nh-navy);
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

/* ---------- بندِ ثبت ملک ---------- */

.nh-owner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    padding: clamp(24px, 3.4vw, 44px);
    border-radius: 24px;
    background: linear-gradient(120deg, var(--nh-navy-dd) 0%, var(--nh-navy-d) 60%, #1B3D77 100%);
    box-shadow: var(--nh-sh-l);
}

.nh-owner::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -6%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, .34), transparent 62%);
    pointer-events: none;
}

.nh-owner > * { position: relative; z-index: 1; }

.nh-owner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.nh-owner__eyebrow svg { width: 15px; height: 15px; }

.nh-owner h2 {
    margin-top: 12px;
    color: #fff;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    text-wrap: balance;
}

.nh-owner p {
    margin-top: 9px !important;
    max-width: 540px;
    color: #C4D5EE;
    font-size: .92rem;
    line-height: 1.95;
}

.nh-owner__points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-top: 15px;
}

.nh-owner__points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.nh-owner__points svg { width: 16px; height: 16px; color: #FFB088; }

.nh-owner__acts { display: flex; flex-direction: column; gap: 9px; }
.nh-owner__acts .nh-btn { width: 100%; }

.nh-owner__note {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #C4D5EE;
    font-size: .79rem;
    font-weight: 700;
}

.nh-owner__note svg { width: 15px; height: 15px; }

/* ---------- مشاوران ---------- */

.nh-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nh-gap);
}

.nh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nh-grid--2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
.nh-grid--1 { grid-template-columns: minmax(0, 320px); justify-content: center; }

/* شش کارت در یک ردیف : هر کارت حدود ۲۰۰ پیکسل عرض دارد ، پس همه چیز یک پله
   کوچک تر است و فقط یک چیپِ آمار می ماند. */
.nh-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

.nh-agent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 20px 10px 16px;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r-lg);
    background: var(--nh-surface);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* نشانِ «برتر» / «تلاش ماه» ، روی لبه ی بالای کارت */
.nh-agent__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--nh-fill);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(29, 76, 158, .28);
}

.nh-agent__badge svg { width: 12px; height: 12px; }

/* کارتِ «تلاش» رنگِ اقدام را می گیرد تا در ردیف از چهار کارتِ برتر جدا شود */
.nh-agent--try .nh-agent__badge {
    background: var(--nh-cta-deep);
    box-shadow: 0 4px 10px rgba(194, 65, 12, .26);
}

.nh-agent--try .nh-agent__ava {
    background: linear-gradient(135deg, var(--nh-cta) 0%, var(--nh-orange) 100%);
}

.nh-agent--try .nh-agent__stats span {
    background: var(--nh-orange-soft);
    color: var(--nh-cta-ink);
}

.nh-agent:hover {
    transform: translateY(-4px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-m);
}

.nh-agent__ava {
    display: block;
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 9px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nh-fill) 0%, var(--nh-orange) 100%);
}

.nh-agent__ava img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nh-surface-3);
    border: 3px solid var(--nh-surface);
}

.nh-agent h3 { font-size: .9rem; line-height: 1.5; }

.nh-agent__role {
    color: var(--nh-muted);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.6;
}

/* مدادِ ویرایشِ عنوان — فقط برای مدیر رندر می شود ؛ گوشه ی بالا (سمتِ پایانِ
   خط ، یعنی چپ در RTL) تا با نشانِ وسطِ لبه و آواتار برخورد نکند. کم رنگ است
   و با hover روی کارت پررنگ می شود تا ظاهرِ عمومیِ کارت را به هم نزند. */
.nh .nh-agent__edit {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--nh-line);
    border-radius: 50%;
    background: var(--nh-surface);
    color: var(--nh-muted);
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.nh .nh-agent__edit svg { width: 13px; height: 13px; }
.nh .nh-agent:hover .nh-agent__edit,
.nh .nh-agent__edit:focus-visible { opacity: 1; }
.nh .nh-agent__edit:hover { color: var(--nh-cta); border-color: var(--nh-cta); }
.nh .nh-agent__edit:disabled { opacity: .3; cursor: default; }

.nh-agent__stats {
    display: flex;
    gap: 5px;
    margin: 9px 0 11px;
    flex-wrap: wrap;
    justify-content: center;
}

.nh-agent__stats span {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--nh-soft);
    color: var(--nh-navy);
    font-size: .74rem;
    font-weight: 800;
}

.nh-agent__acts { display: flex; gap: 7px; width: 100%; margin-top: auto; padding-top: 14px; }

.nh-agent__acts { gap: 6px; }

.nh-agent__acts .nh-btn {
    flex: 1 1 0;
    height: 36px;
    padding: 0 6px;
    gap: 5px;
    font-size: .76rem;
}

.nh-agent__acts .nh-btn svg { width: 14px; height: 14px; }

/* ---------- چرا ما ---------- */

.nh-why {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nh-gap);
}

.nh-feat {
    padding: 20px 18px;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r-lg);
    background: var(--nh-surface);
    transition: transform .2s ease, box-shadow .2s ease;
}

.nh-feat:hover { transform: translateY(-3px); box-shadow: var(--nh-sh-m); }

.nh-feat__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--nh-soft);
    color: var(--nh-navy);
}

.nh-feat__ico svg { width: 23px; height: 23px; }
.nh-feat:nth-child(2) .nh-feat__ico { background: var(--nh-orange-soft); color: var(--nh-cta); }

.nh-feat h3 { font-size: .96rem; }

.nh-feat p {
    margin-top: 6px !important;
    color: var(--nh-muted);
    font-size: .85rem;
    line-height: 1.9;
}

/* ---------- لینک های مفید ---------- */

.nh-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.nh-linkcard {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r);
    background: var(--nh-surface);
    color: var(--nh-ink);
    font-weight: 800;
    transition: all .2s ease;
}

.nh-linkcard b { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nh-linkcard__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: var(--nh-soft);
    color: var(--nh-navy);
    transition: background .2s ease, color .2s ease;
}

.nh-linkcard__ico svg { width: 19px; height: 19px; }

/* لینکِ عکس دار : عکس تمامِ پلاک را می گیرد ، پس نه زمینه ی آبی لازم دارد و نه
   رنگ عوض کردنِ آن روی hover. */
.nh-linkcard__ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.nh-linkcard.has-img .nh-linkcard__ico,
.nh-linkcard.has-img:hover .nh-linkcard__ico { background: var(--nh-surface-2); }
.nh-linkcard > svg { width: 16px; height: 16px; color: var(--nh-muted); transition: transform .2s ease; }

.nh-linkcard:hover {
    transform: translateY(-3px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-m);
    color: var(--nh-navy);
}

.nh-linkcard:hover .nh-linkcard__ico { background: var(--nh-fill); color: #fff; }
.nh-linkcard:hover > svg { transform: translateX(-3px); color: var(--nh-navy); }

/* ---------- پرسش و پاسخ ---------- */

.nh-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.nh-faq__item {
    overflow: hidden;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r);
    background: var(--nh-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nh-faq__item.is-open { border-color: var(--nh-soft-line); box-shadow: var(--nh-sh-s); }

.nh-faq__q {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 15px;
    border: 0;
    background: transparent;
    color: var(--nh-ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.7;
    text-align: right;
    cursor: pointer;
}

.nh-faq__q > svg:first-child { flex: none; width: 19px; height: 19px; color: var(--nh-navy); }
.nh-faq__q span { flex: 1; }

.nh-faq__chev {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--nh-muted);
    transition: transform .25s ease;
}

.nh-faq__item.is-open .nh-faq__chev { transform: rotate(180deg); }

.nh-faq__a {
    display: none;
    padding: 0 15px 15px 42px;
    color: var(--nh-body);
    font-size: .87rem;
    line-height: 2;
}

.nh-faq__item.is-open .nh-faq__a { display: block; }

/* ---------- جستجوهای پرتکرار ---------- */

.nh-seo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nh-gap);
}

.nh-seo__col {
    padding: 18px 18px 12px;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-r-lg);
    background: var(--nh-surface);
}

.nh-seo__col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    font-size: .92rem;
}

.nh-seo__col h3 svg { width: 17px; height: 17px; color: var(--nh-navy); }

.nh-seo__links { display: flex; flex-wrap: wrap; gap: 6px; }

.nh-seo__links a {
    padding: 5px 11px;
    border: 1px solid var(--nh-line-2);
    border-radius: 999px;
    background: var(--nh-surface-2);
    color: var(--nh-body);
    font-size: .78rem;
    font-weight: 700;
    transition: all .16s ease;
}

.nh-seo__links a:hover {
    border-color: var(--nh-soft-line);
    background: var(--nh-soft);
    color: var(--nh-navy);
}

.nh-seo__more { margin-top: 9px; }

.nh-seo__more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nh-navy);
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.nh-seo__more summary::-webkit-details-marker { display: none; }
.nh-seo__more[open] summary { margin-bottom: 9px; }

/* ==========================================================================
   هماهنگ کردنِ پاورقیِ مشترک با این صفحه
   پاورقی فایلِ مشترکِ سایت است و دست نخورده ؛ این قاعده ها فقط زیر
   body.nh-page می نشینند و آن کلاس را هیچ صفحه ی دیگری ندارد.
   ========================================================================== */

/* پاورقی یک پله پررنگ تر از بدنه است تا ته صفحه بسته به نظر برسد ، نه اینکه
   در زمینه حل شود. */
body.nh-page .qom-footer { border-top-color: var(--nh-line); background: #F5EFE3; }
body.nh-page .qf-bottom { border-top-color: var(--nh-line); background: #EFE7D8; }

/* بلوکِ نشانیِ دفتر در پاورقی آبیِ روشن بود (#EDF5FD) و روی زمینه ی کرم مثل یک
   وصله ی سرد دیده می شد ؛ حالا همان ته رنگِ گرمِ بقیه ی صفحه را دارد. */
body.nh-page .qf-links a.qf-map {
    border-color: var(--nh-soft-line) !important;
    background: var(--nh-soft) !important;
}

body.nh-page .qf-links a.qf-map:hover { border-color: var(--nh-navy) !important; }
body.nh-page .qf-map small,
body.nh-page .qf-links i,
body.nh-page .qf-social a { color: var(--nh-navy) !important; }
body.nh-page .qf-links a:hover { color: var(--nh-navy) !important; }
body.nh-page .qf-social a { border-color: var(--nh-line); background: var(--nh-surface); }
body.nh-page .qf-links a:before { background: var(--nh-cta); }
body.nh-page .qf-cta { border-color: var(--nh-soft-line); background: linear-gradient(115deg, var(--nh-soft) 0%, var(--nh-surface) 62%); }
body.nh-page .qf-cta h2 { color: var(--nh-ink) !important; }
body.nh-page .qf-cta p, body.nh-page .qf-about { color: var(--nh-muted); }
body.nh-page .qf-title, body.nh-page .qf-brand { color: var(--nh-ink) !important; }
body.nh-page .qf-links a, body.nh-page .qf-links span { color: var(--nh-body) !important; }
body.nh-page .qf-trust span { color: var(--nh-body); background: var(--nh-surface); border-color: var(--nh-line); }
body.nh-page .qf-bottom p { color: var(--nh-muted); }

/* ==========================================================================
   ظاهر شدنِ نرمِ بخش ها
   کلاسِ nh-rv را جاوااسکریپت می گذارد ، نه HTML : اگر اسکریپت نیامد صفحه کامل
   دیده می شود.
   ========================================================================== */

.nh-rv { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.nh-rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .nh-rv { opacity: 1; transform: none; transition: none; }
    .nh * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   واکنش گرایی
   ========================================================================== */

@media (max-width: 1200px) {
    .nh-split { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
    .nh-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    /* زیر این عرض نقشه و فهرست کنار هم جا نمی شوند : فهرست تمام عرض می شود و
       نقشه با دکمه ی شناور تمام صفحه باز می شود — همان الگویی که کاربر از
       اپ های ملک انتظار دارد. */
    .nh-split { grid-template-columns: minmax(0, 1fr); }
    .nh-list { padding: 16px 0; }
    .nh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* نقشه روی گوشی یک «برگه ی پایینی» است ، نه یک صفحه ی تمام قدِ پنهان.
       سه حالت دارد و حالتِ پیش فرضش نیمه باز است :

         • نیمه باز (بی کلاس)  ــ ۴۶٪ ارتفاعِ پنجره ، فهرست بالایش می ماند
         • تمام صفحه (is-mapfull) ــ با ضربه به دستگیره
         • بسته (is-mapoff)     ــ با ضربدر ؛ دکمه ی شناور برش می گرداند

       حالتِ چهارمی هم هست که کاربر نمی سازدش : is-mapaway. وقتی صفحه از بخشِ
       نقشه و فهرست رد شد ، برگه پایین می رود تا روی محله ها و پاورقی ننشیند. */
    /* روی .nh-split می نشیند ، نه :root — جاوااسکریپت همین را برای هر
       ایستگاه عوض می کند و چون فهرست هم فرزندِ همین است ، فاصله ی ته فهرست
       خودبه خود با ارتفاعِ برگه جابجا می شود. */
    .nh-split { --nh-sheet-h: 46vh; }

    /* bottom برگه همان ارتفاعِ منوی پایینِ صفحه است (--s14-dock از footer_v2) ،
       وگرنه منو روی کنترل های نقشه می افتد. ارتفاعِ برگه عوض نمی شود ، فقط
       کلِ آن بالا می رود ؛ پس فاصله ی ته فهرست و جابجاییِ «پنهان» هم همین
       مقدار را می گیرند. */
    .nh-mapcol {
        position: fixed;
        z-index: 1200;
        top: auto;
        right: 0;
        bottom: var(--s14-dock, 0px);
        left: 0;
        display: block;
        overflow: hidden;
        height: var(--nh-sheet-h);
        border-radius: 20px 20px 0 0;
        background: var(--nh-page);
        box-shadow: 0 -10px 30px rgba(14, 34, 71, .26);
        transition: height .28s ease, transform .28s ease;
    }

    .nh-split.is-mapfull .nh-mapcol { height: 100%; border-radius: 0; }
    .nh-split.is-mapoff .nh-mapcol,
    .nh-split.is-mapaway .nh-mapcol { transform: translateY(calc(101% + var(--s14-dock, 0px))); }

    /* برگه بی انیمیشن باز می شود اگر کاربر حرکت را خاموش کرده باشد */
    .nh-sheet__bar {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        background: var(--nh-page);
    }

    .nh-sheet__grip {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        cursor: grab;
        /* بدونِ این ، مرورگر کشیدنِ عمودی را «اسکرولِ صفحه» می فهمد و دستگیره
           هیچ وقت حرکت نمی کند. */
        touch-action: none;
    }

    .nh-sheet__grip:active { cursor: grabbing; }

    /* حین کشیدن ارتفاع را جاوااسکریپت فریم به فریم می نویسد ؛ انیمیشنِ CSS
       اینجا فقط برگه را از انگشت عقب می اندازد. */
    .nh-split.is-mapdrag .nh-mapcol { transition: none; }

    .nh-sheet__grip span {
        display: block;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: var(--nh-soft-line);
        transition: background .18s ease;
    }

    .nh-sheet__grip:active span { background: var(--nh-navy); }

    /* ضربدر + واژه ی «بستن» : یک ضربدرِ خالی روی گوشی برای خیلی ها گویا نبود. */
    .nh-sheet__close {
        position: absolute;
        top: 50%;
        left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 28px;
        margin-top: -14px;
        padding: 0 11px 0 9px;
        border: 1px solid var(--nh-line);
        border-radius: 999px;
        background: var(--nh-surface);
        color: var(--nh-body);
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }

    .nh-sheet__close svg { width: 14px; height: 14px; flex: none; }

    .nh-mapbox {
        position: absolute;
        top: 34px;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    /* فهرست باید به اندازه ی برگه فضای خالی ته خودش داشته باشد ، وگرنه آخرین
       کارت ها زیرِ نقشه می مانند و کاربر فکر می کند فهرست همان جا تمام شده. */
    .nh-list { padding-bottom: calc(var(--nh-sheet-h) + 16px + var(--s14-dock, 0px)); }
    .nh-split.is-mapoff .nh-list { padding-bottom: 16px; }

    /* دکمه ی شناور فقط وقتی هست که کاربر نقشه را بسته باشد */
    .nh-mapfab {
        position: fixed;
        z-index: 1100;
        bottom: calc(18px + var(--s14-dock, 0px));
        left: 50%;
        transform: translateX(-50%);
        display: none;
        align-items: center;
        gap: 7px;
        height: 44px;
        padding: 0 20px;
        border: 0;
        border-radius: 999px;
        background: var(--nh-cta);
        color: #fff;
        font-family: inherit;
        font-size: .88rem;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(40, 30, 16, .36);
    }

    .nh-split.is-mapoff:not(.is-mapaway) ~ .nh-mapfab { display: inline-flex; }
    .nh-mapfab svg { width: 17px; height: 17px; }

    /* دکمه ی همیشگیِ نقشه در سربرگِ فهرست. دکمه ی شناور وقتی نقشه بسته است و
       چشمِ کاربر روی همین بخش است می آید و می رود ؛ این یکی داخلِ خودِ صفحه
       است و همیشه همان جاست. */
    .nh-list__map {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 5px;
        height: 34px;
        padding: 0 12px;
        border: 1px solid var(--nh-soft-line);
        border-radius: 10px;
        background: var(--nh-surface);
        color: var(--nh-navy);
        font-family: inherit;
        font-size: .78rem;
        font-weight: 800;
        cursor: pointer;
    }

    .nh-list__map svg { width: 15px; height: 15px; }
    .nh-split:not(.is-mapoff) .nh-list__map { border-color: var(--nh-navy); background: var(--nh-soft); }

    .nh-owner { grid-template-columns: minmax(0, 1fr); }
    .nh-seo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nh-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .nh-faq { grid-template-columns: minmax(0, 1fr); }
    .nh-seo { grid-template-columns: minmax(0, 1fr); }
    .nh-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .nh-top__in { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
    .nh-top__stat { min-width: 92px; padding: 7px 11px; }
}

@media (max-width: 575px) {
    .nh { font-size: 14px; }
    .nh-wrap { padding: 0 14px; }
    .nh-top { padding: calc(var(--qa-header-h, 74px) + 20px) 0 20px; }
    .nh-top h1 { font-size: 1.32rem; line-height: 1.6; }
    .nh-top__lead { font-size: .87rem; }
    .nh-top__stats { gap: 6px; }
    .nh-top__stat { flex: 1 1 calc(50% - 3px); min-width: 0; }
    .nh-bar__in { padding: 8px 14px; gap: 6px; }
    .nh-field select { min-width: 118px; height: 40px; line-height: 40px; font-size: .81rem; }
    .nh-toggle { height: 40px; font-size: .79rem; }
    .nh-deal button { height: 34px; padding: 0 11px; font-size: .82rem; }
    .nh-list__count { font-size: .92rem; }
    .nh-cards { gap: 10px; }
    .nh-card { border-radius: 15px; }
    .nh-card__body { padding: 10px 11px 4px; gap: 5px; }
    .nh-card__price { font-size: .92rem; }
    .nh-card__body h3 { font-size: .84rem; }
    .nh-card__loc { font-size: .74rem; }
    .nh-card__specs li { font-size: .69rem; padding: 2px 6px; }
    .nh-card__foot { padding: 8px 10px; gap: 6px; }
    /* در کارتِ ۱۷۰ پیکسلیِ گوشی جا برای نامِ مشاور/نوع ملک نیست و باقی مانده اش
       یک آیکونِ بی معنی می شود ؛ کلِ ردیف به دکمه ی بازدید می رسد. */
    .nh-card__agent { display: none; }
    .nh-card__visit { flex: 1; }
    .nh-card__fav { top: 8px; left: 8px; width: 29px; height: 29px; }
    .nh-card__visit { height: 30px; padding: 0 10px; font-size: .71rem; }
    .nh-areas { grid-template-columns: minmax(0, 1fr); }
    .nh-why { grid-template-columns: minmax(0, 1fr); }
    .nh-owner { border-radius: 18px; }
    .nh-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-agent__ava { width: 68px; height: 68px; }

    /* «پروفایل» و «تماس» کنارِ هم می مانند ، نه زیرِ هم : دو دکمه ی تمام عرضِ
       روی هم ، کارتِ مشاور را بلند و شبیهِ فرم می کرد. در کارتِ ~۲۰۰ پیکسلیِ
       گوشی هر دو با این اندازه ها جا می شوند. */
    .nh-agent__acts { flex-direction: row; gap: 5px; }
    .nh-agent__acts .nh-btn { width: auto; flex: 1; min-width: 0; height: 34px; padding: 0 6px; font-size: .72rem; gap: 4px; }
    .nh-agent__acts .nh-btn svg { width: 13px; height: 13px; flex: none; }
}

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

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

/* ── الف) هدرِ مشترک ────────────────────────────────────────────────────────
   فایلِ هدر مشترکِ کلِ سایت است و دست نخورده ؛ این قاعده ها فقط زیر
   body.nh-page می نشینند. ارتفاعِ هدر عمداً دست نخورده چون نوارِ فیلترِ چسبان و
   بالای هیرو هر دو از --qa-header-h می خوانند. */

body.nh-page .qa-header {
    border-bottom: 1px solid rgba(20, 38, 63, .07);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

/* نشانِ برند : عکس بزرگ تر و بی قابِ سنگین ، شعارِ زیرش خاکستریِ همین صفحه. */
/* اندازه ی نشان اینجا نوشته نمی شود : خودِ public.css دو اندازه دارد ( مربع
   کنارِ نام روی دسکتاپ ، پهن و بی نام زیرِ ۱۱۰۰ پیکسل ) و این قاعده با
   اختصاصیتِ بالاترش هر دو را به یک مربعِ ۴۸ پیکسلی برمی گرداند. فقط قابش
   اینجا با رنگ های همین صفحه هماهنگ می شود. */
body.nh-page .qa-header__brand img {
    border-radius: 13px;
    border: 1px solid var(--nh-line);
    background: #fff;
}

body.nh-page .qa-header__brandtxt { color: var(--nh-muted); }

/* منو : فاصله ی یکسان ، و حالتِ ماوس به جای تغییرِ رنگِ تنها ، یک زمینه ی نرم.
   خطِ زیرِ آیتمِ فعال کوتاه و نارنجی است تا «کجا هستم» یک نگاهی باشد. */
body.nh-page .qa-nav { gap: 2px; }

body.nh-page .qa-nav a {
    position: relative;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 700;
    transition: background .18s ease, color .18s ease;
}

body.nh-page .qa-nav a:hover { background: var(--nh-soft); color: var(--nh-navy); }

body.nh-page .qa-nav a.is-on::after {
    content: '';
    position: absolute;
    right: 12px;
    left: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--nh-orange);
}

/* کلیدهای سمتِ چپ : تا امروز «ثبت تقاضا» و «ثبت ملک» دو کلیدِ همشکلِ کم رنگ
   بودند و «ورود» تنها کلیدِ نارنجی — یعنی پررنگ ترین چیزِ هدر کاری بود که
   کمترین کاربر می خواهد بکند. حالا «ثبت ملک» کلیدِ اصلیِ نارنجی است ، «ثبت
   تقاضا» کادردارِ سرمه ای ، و «ورود» ساده ترینشان. */
body.nh-page .qa-hbtn {
    height: 40px;
    gap: 7px;
    padding: 0 15px;
    border-radius: 11px;
    font-size: .8rem;
    font-weight: 800;
}

body.nh-page .qa-hbtn i { font-size: 15px; }

body.nh-page .qa-hbtn--ghost {
    border-color: var(--nh-soft-line);
    color: var(--nh-navy);
    background: var(--nh-surface);
}

body.nh-page .qa-hbtn--ghost:hover { border-color: var(--nh-navy); background: var(--nh-soft); }

/* رنگِ متنِ هر دو کلاسِ پایه با !important نوشته شده ، پس این دو قاعده هم
   ناچار !important اند ــ بدونش «ورود» یک کادرِ سفیدِ خالی می شد ( متنِ سفید
   روی زمینه ی سفید ) . */
body.nh-page .qa-hbtn[href="/add"] {
    border-color: transparent;
    color: #fff !important;
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
    box-shadow: 0 6px 16px rgba(238, 95, 8, .26);
}

body.nh-page .qa-hbtn[href="/add"]:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #FF8A33 0%, #F26A0D 100%);
    transform: translateY(-1px);
}

body.nh-page .qa-hbtn--solid[href="/login"] {
    border: 1px solid var(--nh-soft-line);
    color: var(--nh-navy) !important;
    background: var(--nh-surface);
    box-shadow: none;
}

body.nh-page .qa-hbtn--solid[href="/login"]:hover { border-color: var(--nh-navy); background: var(--nh-soft); color: var(--nh-navy) !important; }

/* شماره ی تماس و کلیدِ شب و روز : هم قدِ بقیه و بی سر و صدا */
body.nh-page .qa-header__phone {
    height: 40px;
    padding: 0 12px;
    border-radius: 11px;
    color: var(--nh-body);
    font-size: .78rem;
    font-weight: 800;
    transition: background .18s ease, color .18s ease;
}

body.nh-page .qa-header__phone:hover { background: var(--nh-soft); color: var(--nh-navy); }
body.nh-page .qa-header__phone i { font-size: 15px; color: var(--nh-orange); }

body.nh-page .qa-themebtn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--nh-muted);
}

body.nh-page .qa-themebtn:hover { background: var(--nh-soft); color: var(--nh-navy); }
body.nh-page .qa-header__end { gap: 7px; }

/* ── ب) هیرو ───────────────────────────────────────────────────────────────
   از ۱۴۰۵/۰۶/۲۲ به خواستِ دفتر : زمینه کرم (نه سرمه ای). چیدمانِ ۱۴۰۵/۰۶/۲۳
   روی دسکتاپ سه طبقه ی وسط چین است : تیتر با یک نشانِ نارنجی کنارش ← کلیدِ
   دوحالته ی معامله (نارنجی) ← کاشی های نوع ملک. «ثبت ملک» / «ثبت تقاضا» روی
   دسکتاپ نیستند (هدر دارد) و فقط روی گوشی زیرِ تیتر می آیند. چند چیدمانِ
   پیش از این ( همه چیز زیرِ هم ؛ همه در یک ردیف ؛ باندِ کرمِ پررنگ با کلیدها
   زیر یا بالای کاشی ها ) رد شدند. .nh-top__foot دیگر «باند» نیست ، فقط ظرفِ
   تیتر است ؛ نامش برای اینکه قاعده های گوشی سرِ جایشان بمانند نگه داشته شد.

   قاعده های پایه ی بالای فایل هنوز سرمه ای اند و اینجا همه ی رنگ ها بازنویسی
   می شود — رنگی که اینجا ننویسی ، سرمه ای یا سفیدِ روی سرمه ای می ماند
   (مثلاً h1 سفید روی کرم ، نامرئی).

   قاعده ی رنگ : روی کرم ، نوشته سرمه ای است و نارنجی فقط یک جا — کلیدِ فعالِ
   معامله (و کلمه ی تأکیدیِ تیتر). «ثبت ملک» سرمه ایِ پر است نه نارنجی ، وگرنه
   دو نارنجی روی یک باند می نشست و معلوم نبود کدام «کارِ اصلی» است. */

.nh-top {
    padding: var(--qa-header-h, 84px) 0 24px;
    border-bottom: 1px solid #EFE5D2;
    background: linear-gradient(180deg, #F6EDDC 0%, #FAF4E8 100%);
    color: var(--nh-ink);
}

/* دو هاله ی خیلی ملایم ( نارنجی بالا-راست ، آبی پایین-چپ ) تا کرم تخت نباشد ؛
   شبکه ی نقطه ایِ قبلی که سفید بود روی کرم دیده نمی شود و خاموش است. */
.nh-top::before {
    background:
        radial-gradient(720px 340px at 85% -20%, rgba(250, 122, 30, .13), transparent 62%),
        radial-gradient(560px 300px at 10% 120%, rgba(29, 76, 158, .09), transparent 66%);
}

.nh-top::after { content: none; }

/* طبقه ی ۲ : فقط کلیدِ معامله ، وسط. */
.nh-top__in { justify-content: center; gap: 0; padding-top: 22px; }

/* کلیدِ دوحالته ی معامله : یک قرصِ سفید ، و حالتِ فعال نارنجیِ برند — همان
   قراردادی که نوارِ فیلترِ زیرش (.nh-deal) دارد ، پس دو کلید هم رنگ و
   هم معنی اند. */
.nh-top__acts {
    flex: none;
    gap: 4px;
    padding: 4px;
    border: 1px solid #EADFCB;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(78, 60, 32, .09);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.nh-topbtn {
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--nh-navy-d);
    font-size: .92rem;
}

.nh-topbtn:hover { background: var(--nh-soft); color: var(--nh-navy-d); transform: none; }

.nh-topbtn.is-on {
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(238, 95, 8, .3);
}

.nh-topbtn.is-on:hover { background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%); color: #fff; }
.nh-topbtn svg { width: 17px; height: 17px; }
.nh-topbtn.is-on svg { color: #fff; }

/* طبقه ی ۳ : کاشی ها */
.nh-kinds { padding-top: 20px; padding-bottom: 0; }

/* طبقه ی ۱ : تیتر ، وسط ، با یک نشانِ نارنجیِ کوچک کنارش. زمینه همان کرمِ
   هیروست — نسخه ی «باندِ کرمِ پررنگ با خطِ جداکننده» رد شد. */
.nh-top__foot {
    position: relative;
    z-index: 1;
}

/* نشانِ «بانک اطلاعات املاک» فقط روی گوشی ؛ روی دسکتاپ زیرِ لوگوی هدر هست. */
.nh-top__badge { display: none; }

.nh-top__foot-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 24px;
    padding-top: 22px;
    padding-bottom: 4px;
}

.nh-top__copy {
    display: flex;
    flex: none;
    align-items: center;
    gap: 14px;
    max-width: none;
    text-align: start;
}

.nh-top__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FA7A1E 0%, #EE5F08 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(238, 95, 8, .28);
}

.nh-top__mark svg { width: 22px; height: 22px; }

.nh-top h1 {
    margin: 0;
    color: var(--nh-navy-d);
    font-size: clamp(1.1rem, 1.6vw, 1.38rem);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* نارنجیِ برند روی کرم کم رنگ می شد ؛ این یک پله تیره تر است و برای تیترِ
   درشت به حدِ ۳:۱ می رسد. */
.nh-top h1 em { color: var(--nh-cta); }

/* دو کلیدِ ثبت : سرمه ایِ پر برای ملک ، سفیدِ کادردار برای تقاضا. روی دسکتاپ
   پنهان اند — همان دو کلید در هدر هست ؛ فقط روی گوشی (که هدر منویش را جمع
   می کند) زیرِ تیتر می آیند. */
.nh-top__cta {
    display: flex;
    flex: none;
    gap: 8px;
}

@media (min-width: 768px) {
    .nh-top__cta { display: none; }
}

.nh-top__cta .nh-btn { height: 46px; padding: 0 20px; border-radius: 13px; }
.nh-top__cta .nh-btn--navy { box-shadow: 0 8px 18px rgba(22, 48, 95, .22); }
.nh-top__cta .nh-btn--line { border-color: #E0D3BA; box-shadow: 0 4px 12px rgba(78, 60, 32, .07); }
.nh-top__cta .nh-btn--line:hover { transform: translateY(-2px); }

/* حالتِ شب : همان باند ، تیره. رنگ ها عدد اند نه توکن ، چون --nh-navy در شب
   روشن می شود و باندی که از آن بسازی سفید از آب درمی آید. */
html[data-theme="dark"] .nh-top {
    border-bottom-color: #26344C;
    background: linear-gradient(180deg, #0E1830 0%, #121B2C 100%);
}

html[data-theme="dark"] .nh-top::before {
    background:
        radial-gradient(720px 340px at 85% -20%, rgba(250, 122, 30, .12), transparent 62%),
        radial-gradient(560px 300px at 10% 120%, rgba(122, 167, 247, .12), transparent 66%);
}

html[data-theme="dark"] .nh-top__badge { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .85); }
html[data-theme="dark"] .nh-top h1 { color: #E9EEF7; }
html[data-theme="dark"] .nh-top h1 em { color: var(--nh-orange); }
html[data-theme="dark"] .nh-top__cta .nh-btn--line { border-color: #26344C; box-shadow: none; }
html[data-theme="dark"] .nh-top__acts { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); box-shadow: none; }
html[data-theme="dark"] .nh-topbtn { color: rgba(255, 255, 255, .84); }
html[data-theme="dark"] .nh-topbtn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ── پ) کاشیِ نوع ملک ──────────────────────────────────────────────────────
   کارتِ سفید حالا روی کرم می نشیند نه سرمه ای : سایه ی سنگینِ سرمه ای جایش را
   به یک کادرِ کرمِ نازک و سایه ی گرمِ سبک می دهد. حالتِ ماوس : بالا آمدن +
   کادرِ نارنجی. */

.nh-kind {
    gap: 11px;
    padding: 16px 8px 13px;
    border-radius: 16px;
    border-color: #EFE5D2;
    box-shadow: 0 6px 16px rgba(78, 60, 32, .08);
}

.nh-kind:hover {
    transform: translateY(-4px);
    border-color: rgba(250, 122, 30, .55);
    box-shadow: 0 14px 26px rgba(78, 60, 32, .14);
}

html[data-theme="dark"] .nh-kind { border-color: rgba(255, 255, 255, .08); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .nh-kind:hover { border-color: rgba(250, 122, 30, .55); box-shadow: 0 14px 26px rgba(0, 0, 0, .4); }

.nh-kind__ico::before { border-radius: 22px; }

/* رنگ عدد است نه متغیر : کاشیِ نوع ملک همیشه سفید است و در حالتِ شب متغیرِ
   ink روشن می شود ــ یعنی نوشته ی روشن روی کارتِ سفید. */
.nh-kind__body b {
    color: #1C1811;
    font-size: .87rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.nh-kind.is-on { border-color: #FA7A1E; box-shadow: 0 0 0 2px #FA7A1E, 0 10px 22px rgba(238, 95, 8, .22); }

@media (max-width: 991.98px) {
    .nh-kind { padding: 12px 6px 10px; gap: 8px; }
    /* تبلت : همان دسکتاپ ، تیتر کوچک تر. */
    .nh-top__copy { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* گوشی : همان ستونِ وسط چینِ ۱۴۰۵/۰۶/۲۲ ــ نشان ، تیتر ، دو کلیدِ ثبت ، کلیدِ
   معامله ، کاشی ها. باند شکلِ باندی اش (خط و کرمِ پررنگ) را از دست می دهد. */
@media (max-width: 767.98px) {
    .nh-top { padding: calc(var(--qa-header-h, 84px) + 20px) 0 22px; }
    /* کلیدِ معامله عمداً از دو کلیدِ ثبت دورتر است (۲۶ در برابرِ ۱۴) : سه
       قرصِ هم اندازه زیرِ هم ، «تب» و «کار» را یکی نشان می داد و کاربر گیج
       می شد. کلیدهای ثبت هم یک پله کوچک تر و بی سایه اند تا با تبِ نارنجی
       رقابت نکنند. */
    .nh-top__in { padding-top: 26px; }
    .nh-kinds { padding-top: 16px; }

    .nh-top__copy { flex-direction: column; gap: 0; }
    /* نشانِ نارنجی فقط دسکتاپ/تبلت است ؛ روی گوشی نشانِ «بانک اطلاعات» بالای تیتر
       همان نقش را دارد. */
    .nh-top__mark { display: none; }

    .nh-top__badge {
        display: inline-flex;
        margin-bottom: 14px;
        padding: 5px 11px;
        border-color: #EADFCB;
        background: #fff;
        color: var(--nh-navy-d);
        font-size: .69rem;
        font-weight: 700;
        letter-spacing: .01em;
    }

    .nh-top__badge svg { color: var(--nh-orange); }
    /* فقط بالا و پایین ؛ padding: 0 حاشیه ی افقیِ خودِ container را هم می برد
       و کلیدها به لبه ی صفحه می چسبند. */
    .nh-top__foot-in { flex-direction: column; gap: 14px; padding-top: 0; padding-bottom: 0; }
    .nh-top__copy { flex: none; max-width: 820px; }
    .nh-top h1 { font-size: clamp(1.45rem, 5.2vw, 1.8rem); line-height: 1.85; }
    .nh-top__cta { flex-wrap: wrap; justify-content: center; }
    .nh-top__cta .nh-btn { height: 40px; padding: 0 16px; border-radius: 11px; font-size: .84rem; }
    .nh-top__cta .nh-btn svg { width: 16px; height: 16px; }
    .nh-top__cta .nh-btn--navy { box-shadow: none; }
    .nh-top__cta .nh-btn--line { box-shadow: none; }
}

@media (max-width: 575.98px) {
    .nh-top__acts { width: 100%; }
    .nh-topbtn { flex: 1; justify-content: center; height: 42px; padding: 0 10px; font-size: .84rem; }
    .nh-kind { padding: 9px 4px 8px; gap: 6px; }
}

/* ── ت) نوارِ فیلتر ────────────────────────────────────────────────────────
   کشویی ها کمی باریک تر و کوتاه تر شدند ( ۴۴ ← ۴۲ ) و فضای هدررفته ی داخلشان
   کم شد ؛ نوار هم سایه اش را از دست داد و فقط یک خطِ نازک زیرش ماند تا وقتی
   می چسبد از صفحه جدا شود ، نه اینکه همیشه یک نوارِ سنگین باشد. */

/* سایه ی نوار سبک تر شد ولی حذف نشد : این نوار می چسبد و وقتی روی فهرست
   می ایستد باید یک لبه ی محسوس داشته باشد ، وگرنه کارت ها از زیرش رد می شوند و
   معلوم نیست کجا تمام می شود. */
.nh-bar { box-shadow: 0 2px 10px rgba(78, 60, 32, .05); }
.nh-bar__in { gap: 7px; padding: 8px 18px; }

.nh-field select {
    height: 42px;
    min-width: 116px;
    max-width: 176px;
    padding: 0 32px 0 26px;
    border-radius: 11px;
    font-size: .84rem;
    line-height: 42px;
}

.nh-field > svg { right: 10px; width: 15px; height: 15px; margin-top: -7.5px; color: var(--nh-muted); }
.nh-field select.is-set ~ svg, .nh-field select.is-set + svg { color: var(--nh-navy); }
.nh-toggle { height: 42px; border-radius: 11px; font-size: .82rem; }
.nh-bar__reset { height: 42px; font-size: .8rem; }

.nh-deal { padding: 3px; border-radius: 12px; background: var(--nh-surface-2); }
.nh-deal button { height: 36px; padding: 0 15px; border-radius: 9px; font-size: .84rem; }
.nh-deal button.is-on { box-shadow: 0 4px 12px rgba(238, 95, 8, .26); }

/* ── ث) کارتِ فایل ─────────────────────────────────────────────────────────
   کارت همان کارتِ صفحه ی جستجوست و فایلش مشترک ؛ این قاعده ها زیرِ .nh می نشینند
   پس صفحه ی جستجو ذره ای عوض نمی شود. کاری که اینجا شد فقط سلسله مراتب است :
   قیمت درشت ترین چیزِ کارت ، عنوان دومی ، و بقیه ( تاریخ ، متریِ قیمت ) خاکستریِ
   خوانا. قبلاً «متری» نارنجی بود و با خودِ قیمت رقابت می کرد. */

.nh .ec {
    border: 1px solid var(--nh-line);
    border-radius: 16px;
    box-shadow: var(--nh-sh-s);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.nh .ec:hover {
    transform: translateY(-3px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-m);
}

.nh .ec-img { overflow: hidden; }
.nh .ec-img img { transition: transform .45s ease; }
.nh .ec:hover .ec-img img { transform: scale(1.04); }

.nh .ec-type-badge {
    border-radius: 8px;
    background: rgba(14, 34, 71, .88);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.nh .ec-body { padding: 12px; gap: 5px; }

.nh .ec-title { font-size: .9rem; font-weight: 900; color: var(--nh-ink); letter-spacing: -.01em; }
.nh .ec-location { font-size: .73rem; color: var(--nh-muted); }
.nh .ec-attrs .attr { background: var(--nh-soft); border-radius: 8px; padding: 3px 7px; color: var(--nh-body); font-size: .68rem; font-weight: 700; }

.nh .ec-price { padding-top: 9px; border-top-color: var(--nh-line-2); }
.nh .ec-price .price-val { font-size: 1rem; font-weight: 900; color: var(--nh-ink); letter-spacing: -.01em; }
.nh .ec-price .price-meter { margin-top: 3px; color: var(--nh-muted); font-size: .68rem; font-weight: 600; }
.nh .ec-date { color: #A9A294; font-size: .61rem; }
.nh .ec-footer { margin-top: 9px; gap: 6px; }

/* «درخواست بازدید» آبیِ بوت استرپ بود و تنها لکه ی سردِ صفحه ؛ حالا خنثی است و
   تنها رنگِ کارت همان «تماس» می ماند. */
.nh .ec-visit {
    height: 34px;
    border-radius: 10px;
    border-color: var(--nh-line);
    background: var(--nh-soft);
    color: var(--nh-navy);
    font-size: .72rem;
}

.nh .ec-visit:hover { border-color: var(--nh-navy); background: var(--nh-surface-2); color: var(--nh-navy); }
.nh .ec-call { border-radius: 10px; }

/* ── ج) عنوانِ بخش ها ──────────────────────────────────────────────────────
   یک ریتمِ واحد برای هر هفت بخشِ پایینِ صفحه : نشانِ ریز ، تیترِ درشت ، و فاصله ی
   یکسان تا محتوا. */

.nh-head { margin-bottom: clamp(20px, 2.6vw, 32px); }

.nh-eyebrow {
    margin-bottom: 11px;
    padding: 4px 11px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.nh-sec h2 {
    margin: 0;
    font-size: clamp(1.18rem, 2.1vw, 1.62rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -.015em;
}

/* ── چ) محله ها ────────────────────────────────────────────────────────────
   کارتِ محله سه چیز دارد و هر سه باید در یک نگاه خوانده شوند ؛ قبلاً نام و قیمت
   کنارِ هم چسبیده بودند و شمارِ فایل آن سرِ کارت ، با یک دره ی خالی وسط. حالا
   نام و قیمت زیرِ هم اند و کارت از سه ستون به چهار رفت تا این دره بسته شود. */

.nh-area {
    padding: 11px 12px;
    border-radius: 14px;
    gap: 10px;
}

.nh-area:hover {
    transform: translateY(-2px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-s);
}

.nh-area__thumb { width: 44px; height: 44px; border-radius: 12px; }
.nh-area__foot { justify-content: flex-start; gap: 8px; }
.nh-area__txt { min-width: 0; }
.nh-area__txt b { font-size: .85rem; font-weight: 900; color: var(--nh-ink); }

.nh-area__price {
    display: block;
    margin-top: 2px;
    color: var(--nh-navy-d);
    font-size: .74rem;
    font-weight: 900;
}

.nh-area__count {
    flex: none;
    margin-inline-start: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--nh-soft);
    color: var(--nh-muted);
    font-size: .66rem;
    font-weight: 800;
}

@media (min-width: 1200px) {
    .nh-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── ح) بنرِ ثبت ملک ───────────────────────────────────────────────────────
   دکمه ها تمامِ عرضِ ستون را می گرفتند و یک دکمه ی ۴۸۰ پیکسلی نه «مهم» که
   «کشیده» دیده می شود. حالا عرضشان محدود است و خودِ بنر یک لبه ی نارنجی گرفت. */

.nh-owner { border-radius: 26px; }

.nh-owner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--nh-orange), transparent);
}

.nh-owner h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.45; }
.nh-owner__acts { gap: 10px; max-width: 330px; }
.nh-owner__acts .nh-btn { width: 100%; height: 52px; border-radius: 14px; font-size: .92rem; }
.nh-owner__points { gap: 8px 16px; }

/* ── خ) مشاوران ───────────────────────────────────────────────────────────── */

.nh-agent { padding: 22px 12px 16px; border-radius: 18px; gap: 4px; }

.nh-agent:hover {
    transform: translateY(-4px);
    border-color: var(--nh-soft-line);
    box-shadow: var(--nh-sh-m);
}

.nh-agent h3 { margin: 8px 0 0; font-size: .93rem; font-weight: 900; }
.nh-agent__role { color: var(--nh-muted); font-size: .72rem; font-weight: 700; }
.nh-agent__acts { gap: 7px; width: 100%; margin-top: 14px; }
.nh-agent__acts .nh-btn { flex: 1; height: 36px; border-radius: 10px; font-size: .78rem; }

/* ── د) لینک های مفید ─────────────────────────────────────────────────────
   کارت ها کوتاه تر شدند : هشت کارتِ بلند یک دیوارِ سفید می ساخت. */

.nh-linkcard { padding: 12px 13px; border-radius: 14px; gap: 10px; }
.nh-linkcard b { font-size: .85rem; font-weight: 800; }
.nh-linkcard__ico { width: 34px; height: 34px; border-radius: 11px; }
.nh-linkcard__ico svg { width: 17px; height: 17px; }
.nh-linkcard > svg { width: 15px; height: 15px; }

/* ── ذ) پرسش و پاسخ ────────────────────────────────────────────────────────
   آکاردئون سبک شد : بی سایه ، با یک کادرِ نازک ، و چوبِ نشانه در یک دایره ی
   کوچک تا دکمه بودنش دیده شود. */

.nh-faq { gap: 9px; }
.nh-faq__item { border-radius: 14px; box-shadow: none; }
.nh-faq__item:hover { border-color: var(--nh-soft-line); }
.nh-faq__item.is-open { border-color: var(--nh-navy); box-shadow: 0 6px 18px rgba(29, 76, 158, .07); }
.nh-faq__q { padding: 15px 16px; font-size: .88rem; font-weight: 800; }

/* چوبِ نشانه یک قرصِ رنگی گرفت و بعد پس گرفته شد : این عنصر خودش <svg> است ،
   نه یک پوششِ دورِ آیکون ، و padding روی svg محتوای viewBox را تو نمی برد —
   نتیجه یک نقطه ی توپرِ سرمه ای شد به جای فلش. پس فقط بزرگ تر و پررنگ تر شد. */
.nh-faq__chev { width: 19px; height: 19px; color: var(--nh-muted); }
.nh-faq__item.is-open .nh-faq__chev { color: var(--nh-navy); }
.nh-faq__a p { color: var(--nh-body); font-size: .81rem; line-height: 2.05; }

/* ── ر) جستجوهای پرتکرار ──────────────────────────────────────────────────── */

.nh-seo__col { padding: 18px; border-radius: 16px; }
.nh-seo__col > h3 { margin: 0 0 13px; font-size: .88rem; font-weight: 900; }
.nh-seo__links { gap: 7px; }

.nh-seo__links a {
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--nh-soft);
    border: 1px solid transparent;
    color: var(--nh-body);
    font-size: .72rem;
    font-weight: 700;
    transition: all .16s ease;
}

.nh-seo__links a:hover { border-color: var(--nh-soft-line); background: var(--nh-surface); color: var(--nh-navy); }
.nh-seo__more { font-size: .74rem; font-weight: 800; color: var(--nh-navy); }

/* ── ز) پاورقی ─────────────────────────────────────────────────────────────
   ساختارِ پاورقی فایلِ مشترک است و دست نخورده ؛ اینجا فقط فاصله ها و وزنِ
   نوشته ها مرتب می شوند تا با بقیه ی صفحه یک ریتم داشته باشد. */

body.nh-page .qf-main { padding: 46px 0 34px; }
body.nh-page .qf-brand img { width: 56px; height: 56px; border-radius: 15px; }
body.nh-page .qf-brand strong { font-size: 1.06rem; font-weight: 900; }
body.nh-page .qf-title { margin: 4px 0 18px; font-size: .86rem; }
body.nh-page .qf-title:after { width: 24px; height: 2.5px; }
body.nh-page .qf-links { gap: 11px; }
body.nh-page .qf-links a { font-size: .77rem; font-weight: 700; transition: transform .16s ease, color .16s ease; }
body.nh-page .qf-links a:hover { transform: translateX(-3px); }
body.nh-page .qf-about { font-size: .76rem; line-height: 2.05; }
body.nh-page .qf-cta { padding: 22px 26px; border-radius: 18px; }
body.nh-page .qf-cta h2 { font-size: 1.12rem; }

/* ── ژ) گوشی ───────────────────────────────────────────────────────────────
   سه اصلاح که فقط زیرِ عرضِ گوشی دیده می شوند. */

/* «لینک های مفید» هیچ قاعده ی واکنش گرایی نداشت و روی هر عرضی چهار ستون
   می ماند : روی گوشی هر کارت ~۸۵ پیکسل می شد و چون عنوانش nowrap و ellipsis
   است ، عملاً فقط آیکون و فلش دیده می شد. */
@media (max-width: 991.98px) {
    .nh-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .nh-links { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    /* قاعده های گوشیِ هیرو دیگر اینجا نیستند ؛ همه در بندِ «ب) هیرو» اند. */
}

/* ── س) نقشه ی دسکتاپ : باریک تر ، تغییرپذیر ، و تمام صفحه ────────────────
   نقشه از «نصفِ عرض» به یک ستونِ باریک ترِ قابلِ تنظیم رفت. دلیلش جای کارت هاست :
   با ۴۶۰ پیکسل نقشه ، ستونِ فهرست سه کارت در هر ردیف جا می دهد به جای دو تا.

   عرض یک متغیر است ( --nh-mapw ) و از سه راه عوض می شود : کشیدنِ دستگیره ی بینِ
   دو ستون ، کلیدِ تمام صفحه ی گوشه ی نقشه ، و دوبار کلیک روی همان دستگیره که به
   عرضِ پیش فرض برمی گرداندش. */

@media (min-width: 992px) {
    /* پیش فرض یک چهارمِ عرض : نقشه ۲۵٪ ، کارت ها ۷۵٪. ( جاوااسکریپت هم با همین
       نسبت به پیش فرض برمی گردد ، پس MAPW_HOME_RATIO آنجا باید همین عدد بماند. ) */
    .nh-split {
        --nh-mapw: 25%;
        grid-template-columns: minmax(0, 1fr) var(--nh-mapw);
    }

    .nh-mapcol { position: relative; }

    /* ستونِ فهرست حالا جا دارد ، پس سه کارت در هر ردیف */
    .nh-list .nh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* دستگیره ی عرض روی لبه ی بینِ نقشه و فهرست می نشیند. در RTL فهرست سمتِ
       راست است ، پس این لبه ی راستِ ستونِ نقشه است. */
    .nh-mapresize {
        position: absolute;
        /* بالای پنل های خودِ لیفلت ( ۲۰۰ تا ۷۰۰ ) ؛ با z-index کوچک دستگیره پشتِ
           نقشه می ماند و اصلاً دیده نمی شود. */
        z-index: 700;
        top: 0;
        bottom: 0;
        right: -7px;
        width: 14px;
        cursor: col-resize;
        touch-action: none;
    }

    /* رنگِ اولیه عمداً محسوس است : دستگیره ای که تا ماوس رویش نرود دیده نشود ،
       عملاً وجود ندارد. */
    /* خودِ دستگیره تمامِ قدِ ستون است ( ~۱۸۰۰ پیکسل ) ولی میله اش چسبان است و
       وسطِ پنجره می ماند ، همان طور که خودِ نقشه چسبان است. با place-items
       میله وسطِ *ستون* می نشست ، یعنی ۱۴۵۰ پیکسل پایین تر از دیدرس. */
    .nh-mapresize span {
        display: block;
        position: sticky;
        top: calc(50vh - 29px);
        margin: 0 auto;
        width: 5px;
        height: 58px;
        border-radius: 999px;
        background: var(--nh-soft-line);
        box-shadow: inset 0 0 0 1px rgba(29, 76, 158, .14);
        transition: background .18s ease, height .18s ease;
    }

    .nh-mapresize:hover span,
    .nh-mapresize:focus-visible span { background: var(--nh-navy); height: 74px; }
    .nh-split.is-mapresize .nh-mapresize span { background: var(--nh-navy); height: 74px; }

    /* حین کشیدن هیچ چیزی نباید انتخاب شود و نشانگر همه جا col-resize بماند */
    .nh-split.is-mapresize { user-select: none; }
    .nh-split.is-mapresize * { cursor: col-resize !important; }

    /* کلیدِ تمام صفحه ، کنارِ ابزارِ نقشه */
    /* پایین ـ چپ ، نه بالا ـ راست : بالا ـ راست جای کلیدهای «نقشه / ماهواره»
       است و این کلید رویشان می افتاد. گوشه ی پایینِ چپ تنها گوشه ی آزادِ نقشه
       است ( بزرگ نمایی بالا ـ چپ ، شمارِ فایل ها پایین ـ راست ). */
    .nh-map__full {
        position: absolute;
        z-index: 500;
        bottom: 14px;
        left: 14px;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--nh-line);
        border-radius: 10px;
        background: var(--nh-surface);
        color: var(--nh-navy);
        cursor: pointer;
        box-shadow: var(--nh-sh-s);
        transition: background .18s ease, color .18s ease;
    }

    .nh-map__full:hover { background: var(--nh-soft); }
    .nh-map__full svg { width: 17px; height: 17px; }

    /* تمام صفحه : ستونِ نقشه از شبکه بیرون می آید و کلِ پنجره را می گیرد.
       دستگیره ی عرض آنجا معنی ندارد. */
    .nh-split.is-mapfull .nh-mapcol {
        position: fixed;
        z-index: 1300;
        inset: 0;
        background: var(--nh-page);
    }

    .nh-split.is-mapfull .nh-mapbox {
        position: absolute;
        inset: 0;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .nh-split.is-mapfull .nh-mapresize { display: none; }
    .nh-split.is-mapfull .nh-map__full { background: var(--nh-navy); color: #fff; border-color: var(--nh-navy); }
}

/* روی گوشی این دو تازه وارد جایی ندارند : آنجا خودِ برگه با دستگیره بالا و پایین
   می رود و ضربدرش می بندد. */
@media (max-width: 991.98px) {
    .nh-mapresize { display: none; }
    .nh-map__full { display: none; }
}

/* ── ش) بستنِ نقشه روی دسکتاپ ─────────────────────────────────────────────
   تا امروز بستنِ نقشه فقط روی گوشی بود. روی دسکتاپ هم گاهی کاربر فقط فهرست را
   می خواهد ــ آن وقت ستونِ نقشه می رود و فهرست تمامِ عرض را می گیرد ، یعنی چهار
   کارت در هر ردیف به جای سه تا.

   راهِ برگشت دکمه ی «نقشه» ی سربرگِ فهرست است ، همان دکمه ای که روی گوشی هم
   هست ؛ اینجا فقط وقتی دیده می شود که نقشه بسته باشد. */

@media (min-width: 992px) {
    .nh-map__hide {
        position: absolute;
        z-index: 700;
        bottom: 14px;
        left: 60px;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--nh-line);
        border-radius: 10px;
        background: var(--nh-surface);
        color: var(--nh-body);
        cursor: pointer;
        box-shadow: var(--nh-sh-s);
        transition: background .18s ease, color .18s ease, border-color .18s ease;
    }

    .nh-map__hide:hover { border-color: var(--nh-cta); background: var(--nh-orange-soft); color: var(--nh-cta-ink); }
    .nh-map__hide svg { width: 16px; height: 16px; }

    .nh-split.is-mapoff { grid-template-columns: minmax(0, 1fr); }
    .nh-split.is-mapoff .nh-mapcol { display: none; }
    .nh-split.is-mapoff .nh-list { padding-left: 0; }
    .nh-split.is-mapoff .nh-list .nh-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* دکمه ی برگرداندنِ نقشه ، فقط وقتی نقشه بسته است */
    .nh-split.is-mapoff .nh-list__map {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 14px;
        border: 1px solid var(--nh-navy);
        border-radius: 10px;
        background: var(--nh-soft);
        color: var(--nh-navy);
        font-family: inherit;
        font-size: .82rem;
        font-weight: 800;
        cursor: pointer;
    }

    .nh-split.is-mapoff .nh-list__map svg { width: 16px; height: 16px; }
    .nh-split.is-mapoff .nh-list__map:hover { background: var(--nh-surface-2); }
}

@media (max-width: 991.98px) {
    .nh-map__hide { display: none; }
}

/* ── ج) دکمه ی «از / تا»ی مبلغ و پنجره اش ───────────────────────────────────
   قیمت و ودیعه از ۱۴۰۵/۰۶/۲۲ به جای کشوییِ «تا فلان مبلغ» یک دکمه اند که با
   کلیک ، پنجره ی کوچکِ «از / تا» (#nhPop) را باز می کند. دکمه دقیقاً هم قد و
   هم شکلِ کشویی های کناری است تا نوار یک دست بماند ؛ حالتِ is-set همان رنگی
   را می گیرد که کشوییِ پرشده می گیرد. پنجره فرزندِ خودِ فرم است (نه
   nh-bar__in که overflow دارد) و NHRange جایش را با اندازه ی دکمه می دهد. */
.nh-page .nh-range {
    display: inline-flex;
    align-items: center;
    height: 42px;
    min-width: 138px;
    max-width: 210px;
    padding: 0 32px 0 26px;
    border: 1px solid var(--nh-line);
    border-radius: 11px;
    background: var(--nh-surface);
    color: var(--nh-ink);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .18s, background-color .18s, color .18s;
}

/* همان فلشِ کشویی ها ، تا معلوم باشد این هم باز می شود */
.nh-page .nh-field--range::after {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--nh-muted);
    border-bottom: 2px solid var(--nh-muted);
    content: "";
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform .18s;
}

.nh-page .nh-field--range:has(.nh-range[aria-expanded="true"])::after { transform: rotate(225deg); margin-top: -1px; }

.nh-page .nh-range:hover { border-color: var(--nh-navy); }

.nh-page .nh-range:focus-visible {
    outline: 0;
    border-color: var(--nh-navy);
    box-shadow: 0 0 0 3px var(--nh-soft);
}

.nh-page .nh-range.is-set,
.nh-page .nh-range[aria-expanded="true"] {
    border-color: var(--nh-navy);
    background: var(--nh-soft);
    color: var(--nh-navy);
}

.nh-page .nh-range.is-set ~ svg,
.nh-page .nh-range.is-set + svg { color: var(--nh-navy); }

/* تا پنجره باز است نوار از دستگیره ی نقشه (۷۰۰) و برگه ی نقشه ی گوشی (۱۲۰۰)
   بالاتر می نشیند ؛ NHRange این کلاس را می گذارد و برمی دارد. */
.nh-page .nh-bar.is-popopen { z-index: 1250; }

.nh-page .nh-pop {
    position: absolute;
    z-index: 40;
    width: min(360px, calc(100vw - 16px));
    padding: 14px 14px 12px;
    border: 1px solid var(--nh-line);
    border-radius: 14px;
    background: var(--nh-surface);
    box-shadow: 0 18px 44px rgba(28, 24, 17, .16);
}

.nh-page .nh-pop__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.nh-page .nh-pop__head b { color: var(--nh-ink); font-size: .92rem; font-weight: 900; }
.nh-page .nh-pop__head span { color: var(--nh-muted); font-size: .76rem; font-weight: 700; }

.nh-page .nh-pop__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.nh-page .nh-pop__f {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--nh-line);
    border-radius: 11px;
    background: var(--nh-surface);
    cursor: text;
}

.nh-page .nh-pop__f:focus-within {
    border-color: var(--nh-navy);
    box-shadow: 0 0 0 3px var(--nh-soft);
}

.nh-page .nh-pop__f span {
    flex: none;
    color: var(--nh-muted);
    font-size: .78rem;
    font-weight: 800;
}

.nh-page .nh-pop__f input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--nh-ink);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    direction: ltr;
    text-align: right;
    outline: 0;
}

.nh-page .nh-pop__f input::placeholder { color: var(--nh-muted); font-weight: 600; }

/* مبلغ به حروف : یک خط ثابت (min-height) تا پنجره با تایپ بالا و پایین نپرد */
.nh-page .nh-pop__words {
    min-height: 1.7em;
    margin-top: 8px;
    color: var(--nh-navy);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.7;
}

.nh-page .nh-pop__words.is-err { color: #C0392B; }

.nh-page .nh-pop__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.nh-page .nh-pop__chips button {
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--nh-line);
    border-radius: 999px;
    background: var(--nh-surface-2);
    color: var(--nh-body);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
}

.nh-page .nh-pop__chips button:hover {
    border-color: var(--nh-navy);
    background: var(--nh-soft);
    color: var(--nh-navy);
}

.nh-page .nh-pop__acts {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.nh-page .nh-pop__clear,
.nh-page .nh-pop__ok {
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
}

.nh-page .nh-pop__clear { background: transparent; color: var(--nh-muted); }
.nh-page .nh-pop__clear:hover { color: var(--nh-cta); }

.nh-page .nh-pop__ok {
    flex: 1;
    max-width: 180px;
    background: var(--nh-fill);
    color: #fff;
    box-shadow: 0 6px 14px rgba(29, 76, 158, .25);
}

.nh-page .nh-pop__ok:hover { filter: brightness(1.06); }

@media (max-width: 767.98px) {
    .nh-page .nh-range { height: 40px; min-width: 124px; font-size: .81rem; }
    /* روی گوشی پنجره تمام عرضِ نوار می شود ؛ right ای که JS می دهد بی اثر است */
    .nh-page .nh-pop { right: 8px !important; left: 8px; width: auto; }
}