/* ==========================================================================
   قم املاک — استایل صفحه‌های عمومی سایت ۱۴
   --------------------------------------------------------------------------
   زمینه‌ی صفحه سفید است و رنگ‌های اعتمادساز کار را جلو می‌برند:
     • آبیِ اعتماد (--qa-trust)  رنگ اصلی تعامل: تب فعال، چیپ انتخاب‌شده، لینک
     • نارنجیِ برند (--qa-orange) فقط برای دکمه‌ی اقدام و تأکید کوتاه
     • سبز (--qa-green)          فقط نشانه‌های «بررسی‌شده / تأییدشده»
     • سرمه‌ای (--qa-navy)        فقط رنگِ متن و تیتر، نه رنگِ باندهای بزرگ
   هیرو تصویری حذف شده است؛ بالای صفحه اول، پنل جستجو (تب خرید/اجاره + نوع ملک)
   کنار نقشه می‌نشیند — کلاس‌های q-hunt / q-tabs / q-types / q-map.
   استثنا: همین باکس اول (q-hunt و هرچه درونش است، شامل نقشه و نشانگرهایش) فقط
   سرمه‌ای، نارنجی و طوسی می‌گیرد؛ آبیِ اعتماد و سبز آنجا استفاده نمی‌شود. بقیه‌ی
   صفحه دست‌نخورده مانده و همچنان --qa-trust را دارد.
   کارت ملک (qa-ecard) هم‌شکل کارت صفحه «املاک من» است.
   این فایل در صفحه اول، صفحه نمایش ملک و صفحه مشاور لود می‌شود؛ هیچ صفحه‌ای از
   پنل آن را ندارد.
   ========================================================================== */

:root {
    /* سرمه‌ای فقط رنگِ متن است، نه رنگِ باندهای بزرگ. هر جایی که قبلاً یک بلوک
       سرمه‌ای بود حالا یا سفید است یا آبیِ اعتماد. */
    --qa-navy: #14263F;
    --qa-navy-2: #1D3557;
    --qa-navy-3: #2B4570;

    /* آبیِ اعتماد: رنگ اصلی تعامل (تب فعال، چیپ انتخاب‌شده، لینک) */
    --qa-trust: #0B62B0;
    --qa-trust-2: #0A5197;
    --qa-trust-soft: #EDF5FD;
    --qa-trust-line: #C9E0F7;

    /* سبزِ اطمینان: فقط برای نشانه‌های «بررسی‌شده / تأییدشده» */
    --qa-green: #0F8A5F;
    --qa-green-soft: #E8F7F0;

    --qa-orange: #F06210;
    --qa-orange-2: #FF7A2E;
    --qa-orange-soft: #FFF1E8;
    --qa-orange-deep: #C2410C;
    --qa-orange-deep-2: #9A3208;
    --qa-orange-deep-soft: #FDEEE4;

    /* طوسی و سرمه‌ای روشن: پالت باکس اول صفحه‌ی نخست (q-hunt) تنها از سرمه‌ای،
       نارنجی و طوسی ساخته می‌شود؛ آبیِ اعتماد و سبز آنجا راه ندارند. */
    --qa-navy-soft: #EDF1F7;
    --qa-navy-line: #D3DDEA;
    --qa-navy-lite: #3C5A82;
    --qa-slate: #475569;
    --qa-slate-2: #64748B;
    --qa-slate-soft: #EFF1F5;

    --qa-ink: #101828;
    --qa-body: #3F4A5C;
    --qa-muted: #667085;
    --qa-faint: #98A2B3;
    --qa-line: #E7EBF2;
    --qa-line-soft: #F0F3F8;

    --qa-page: #fff;
    --qa-soft: #F6F9FD;
    --qa-surface: #fff;

    --qa-r-sm: 10px;
    --qa-r: 14px;
    --qa-r-lg: 18px;
    --qa-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
    --qa-shadow-lg: 0 16px 40px rgba(16, 24, 40, .1);
}

/* ── پایه ─────────────────────────────────────────────────────────────── */
.qa-page {
    background: var(--qa-page);
    color: var(--qa-ink);
}

.qa-page a {
    text-decoration: none;
}

.qa-sr {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
}

/* ── سربرگ عمومی ──────────────────────────────────────────────────────────
   مربوط به partial جدید layouts/header_public است. هدر پنل (header_v2 با
   کلاس h14) اصلاً این قواعد را نمی‌گیرد.
   ------------------------------------------------------------------------ */
.qa-header {
    min-height: 70px;
    padding: 0;
    border-bottom: 1px solid var(--qa-line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    transition: box-shadow .3s;
}

.qa-header.qa-nav-solid {
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
}

.qa-header > .container {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 70px;
}

.qa-header__brand {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
    color: var(--qa-navy) !important;
    font-size: 1rem;
    font-weight: 900;
}

.qa-header__brand img {
    border-radius: 9px;
    background: #fff;
}

/* منوی افقی */
.qa-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-end: auto;
}

.qa-nav a {
    position: relative;
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--qa-body) !important;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: .18s;
}

.qa-nav a:hover {
    color: var(--qa-trust) !important;
    background: var(--qa-trust-soft);
}

.qa-nav a.is-active {
    color: var(--qa-navy) !important;
}

.qa-nav a.is-active:after {
    position: absolute;
    right: 13px;
    bottom: 2px;
    left: 13px;
    height: 2px;
    border-radius: 2px;
    content: "";
    background: var(--qa-orange);
}

.qa-header__end {
    display: flex;
    flex: none;
    align-items: center;
    gap: 9px;
}

.qa-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline-end: 4px;
    color: var(--qa-navy) !important;
    font-size: .8rem;
    font-weight: 800;
}

.qa-header__phone i {
    color: var(--qa-orange);
}

.qa-hbtn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
    transition: .18s;
}

/* «ثبت تقاضا»ی کاربر عادی یک <button> است (مودال باز می‌کند، صفحه‌ای ندارد)
   و باید دقیقاً شبیه دکمه‌های لینکی کنارش دربیاید */
button.qa-hbtn {
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.qa-hbtn--solid {
    color: #fff !important;
    background: var(--qa-orange);
    box-shadow: 0 8px 20px rgba(240, 98, 16, .3);
}

.qa-hbtn--solid:hover {
    color: #fff !important;
    background: var(--qa-orange-2);
}

.qa-hbtn--ghost {
    border-color: var(--qa-line);
    color: var(--qa-navy) !important;
    background: #fff;
}

.qa-hbtn--ghost:hover {
    border-color: var(--qa-trust);
    color: var(--qa-trust) !important;
    background: var(--qa-trust-soft);
}

/* آواتار و منوی کاربر */
.qa-avatar {
    padding: 0;
    border: 2px solid var(--qa-line);
    border-radius: 50%;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.qa-avatar img {
    border-radius: 50%;
    object-fit: cover;
}

.qa-udrop .dropdown-menu {
    min-width: 214px;
    padding: 6px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r);
    box-shadow: var(--qa-shadow-lg);
}

.qa-udrop__head {
    padding: 9px 12px 11px;
    border-bottom: 1px solid var(--qa-line);
    margin-bottom: 5px;
}

.qa-udrop__head .name {
    color: var(--qa-ink);
    font-size: .85rem;
    font-weight: 900;
}

.qa-udrop__head .role {
    margin-top: 2px;
    color: var(--qa-muted);
    font-size: .68rem;
}

.qa-udrop .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--qa-r-sm);
    padding: 9px 12px;
    color: var(--qa-body);
    font-size: .8rem;
    font-weight: 700;
}

.qa-udrop .dropdown-item i {
    color: var(--qa-faint);
}

.qa-udrop .dropdown-item:hover {
    color: var(--qa-ink);
    background: var(--qa-soft);
}

.qa-udrop .dropdown-item.danger {
    color: #C0392B;
}

.qa-udrop .dropdown-item.danger i {
    color: #C0392B;
}

/* دکمه منوی موبایل */
.qa-burger {
    display: none;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin-inline-start: auto;
    padding: 0;
    border: 1px solid var(--qa-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.qa-burger span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: var(--qa-navy);
}

.qa-burger img {
    border-radius: 50%;
    object-fit: cover;
}

/* کشوی موبایل */
.qa-oc {
    width: 300px;
    border: 0;
    background: #fff;
    color: var(--qa-ink);
}

.qa-oc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--qa-line);
}

.qa-oc__head .btn-close {
    opacity: .55;
}

.qa-oc__user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.qa-oc__user img {
    border-radius: 50%;
    object-fit: cover;
}

.qa-oc__user .name {
    font-size: .88rem;
    font-weight: 900;
}

.qa-oc__user .role {
    margin-top: 2px;
    color: var(--qa-muted);
    font-size: .68rem;
}

.qa-oc__body {
    overflow-y: auto;
    padding: 12px;
}

.qa-oc__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 12px;
    color: var(--qa-body) !important;
    font-size: .85rem;
    font-weight: 700;
}

.qa-oc__link i {
    color: var(--qa-orange);
}

.qa-oc__link:hover,
.qa-oc__link.is-active {
    color: var(--qa-trust) !important;
    background: var(--qa-trust-soft);
}

.qa-oc__link.danger {
    color: #C0392B !important;
}

.qa-oc__link.danger i {
    color: #C0392B;
}

.qa-oc__sep {
    height: 1px;
    margin: 11px 4px;
    background: var(--qa-line);
}

.qa-oc__actions {
    display: grid;
    gap: 8px;
    margin: 14px 4px 0;
}

.qa-oc__actions .qa-hbtn {
    justify-content: center;
    min-height: 46px;
}

.qa-oc__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 12px;
    color: var(--qa-navy) !important;
    background: var(--qa-soft);
    font-size: .84rem;
    font-weight: 800;
}

.qa-oc__phone i {
    color: var(--qa-orange);
}

/* در عرض کم منو جمع می‌شود */
@media (max-width: 1099.98px) {
    .qa-nav,
    .qa-header__end {
        display: none;
    }

    .qa-burger {
        display: flex;
    }
}

/* ══ جستجوی ملک صفحه اول ══════════════════════════════════════════════════
   جای هیروِ تصویری قبلی را گرفته است و از بالا به پایین چیده می‌شود:
   تیتر → تب‌های درشت خرید/اجاره → کاشی‌های درشت نوع ملک → نوار جستجو →
   و بعد نقشه‌ی تمام‌عرض. نقشه دیگر کنار پنل نیست، کاملاً زیر آن است.
   ------------------------------------------------------------------------ */
.q-hunt {
    position: relative;
    overflow: hidden;
    /* سربرگ fixed است، پس بالای اولین بخش به اندازه‌ی ارتفاع آن فاصله می‌خواهد */
    padding: 104px 0 14px;
    background:
        linear-gradient(180deg, #F3F5F9 0%, #FBFBFD 52%, #fff 100%);
}

/* لکه‌های رنگی محو پس‌زمینه؛ زمینه روشن می‌ماند ولی مرده نیست */
.q-hunt__blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(64px);
}

.q-hunt__blob--a {
    top: -130px;
    right: -90px;
    width: 460px;
    height: 460px;
    background: rgba(29, 53, 87, .18);
}

.q-hunt__blob--b {
    top: -80px;
    left: -110px;
    width: 400px;
    height: 400px;
    background: rgba(240, 98, 16, .16);
}

.q-hunt__blob--c {
    top: 300px;
    left: 22%;
    width: 380px;
    height: 380px;
    background: rgba(100, 116, 139, .16);
}

.q-hunt__in {
    position: relative;
    z-index: 1;
}

/* سرصفحه‌ی داخل پنل: نشان، تیتر صفحه و یک جمله‌ی کوتاه */
.q-hunt__head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 2px 4px 18px;
}

.q-hunt__mark {
    position: relative;
    display: grid;
    width: 56px;
    height: 56px;
    flex: none;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--qa-navy-2) 0%, var(--qa-navy) 100%);
    box-shadow: 0 8px 20px rgba(29, 53, 87, .3);
    font-size: 1.6rem;
}

/* نقطه‌ی تپنده‌ی گوشه‌ی نشان: سامانه زنده است */
.q-hunt__mark:after {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 14px;
    height: 14px;
    content: "";
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--qa-orange);
    box-shadow: 0 0 0 0 rgba(240, 98, 16, .55);
    animation: qPulse 2.2s ease-out infinite;
}

@keyframes qPulse {
    0%   { box-shadow: 0 0 0 0 rgba(240, 98, 16, .5); }
    100% { box-shadow: 0 0 0 11px rgba(240, 98, 16, 0); }
}

.q-hunt__title {
    margin: 0 0 5px;
    color: var(--qa-navy);
    font-size: clamp(1.15rem, 2.3vw, 1.6rem);
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: -.4px;
}

/* خط دوم تیتر با گرادیان رنگی */
.q-grad {
    display: inline-block;
    color: var(--qa-navy-2);
    background: linear-gradient(95deg, var(--qa-navy) 0%, var(--qa-navy-lite) 42%, var(--qa-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

@supports (-webkit-text-fill-color: transparent) {
    .q-grad {
        -webkit-text-fill-color: transparent;
    }
}

.q-hunt__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--qa-body);
    font-size: .87rem;
    font-weight: 700;
    line-height: 1.9;
}

.q-hunt__lead i {
    flex: none;
    color: var(--qa-orange);
    font-size: 1rem;
}

.q-hunt__panel {
    position: relative;
    padding: 18px 20px 20px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .03), 0 22px 54px rgba(20, 38, 63, .13);
    backdrop-filter: blur(10px);
}

/* نوار رنگی بالای پنل */
.q-hunt__panel:before {
    position: absolute;
    top: 0;
    right: 26px;
    left: 26px;
    height: 4px;
    content: "";
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, var(--qa-navy) 0%, var(--qa-navy-lite) 34%, var(--qa-slate-2) 67%, var(--qa-orange) 100%);
}

/* ── تب‌ها: درشت، با آیکون و زیرنویس شمارش ─────────────────────────────── */
.q-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px;
    border-radius: 20px;
    background: linear-gradient(180deg, #EDEFF4 0%, #F8F9FB 100%);
}

.q-tab {
    /* رنگ هر تب از استایل درون‌خطی می‌آید (بلید) تا هر تب هویت رنگی خودش را داشته باشد */
    --acc: #1D3557;
    --acc-dark: #0F2440;
    --acc-soft: #EDF1F7;
    --acc-glow: rgba(29, 53, 87, .34);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 16px;
    border: 1px solid var(--qa-line);
    border-radius: 18px;
    color: var(--qa-navy);
    background: #fff;
    text-align: start;
    cursor: pointer;
    transition: .2s;
}

.q-tab__ico {
    display: grid;
    width: 58px;
    height: 58px;
    flex: none;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc-dark) 100%);
    box-shadow: 0 8px 20px var(--acc-glow);
    font-size: 1.7rem;
    transition: .2s;
}

.q-tab__txt {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.q-tab__txt b {
    font-size: 1.24rem;
    font-weight: 900;
    line-height: 1.45;
}

.q-tab__txt small {
    display: inline-flex;
    align-items: center;
    color: var(--qa-muted);
    font-size: .76rem;
    font-weight: 800;
}

/* تیک گوشه‌ی تب فعال */
.q-tab__on {
    position: absolute;
    top: 12px;
    left: 14px;
    display: none;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    font-size: .74rem;
}

.q-tab:hover {
    border-color: var(--acc);
    background: var(--acc-soft);
    transform: translateY(-2px);
}

.q-tab.is-on {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(125deg, var(--acc-dark) 0%, var(--acc) 100%);
    box-shadow: 0 16px 34px var(--acc-glow);
    transform: none;
}

.q-tab.is-on .q-tab__ico {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    box-shadow: none;
}

.q-tab.is-on .q-tab__txt small {
    color: rgba(255, 255, 255, .88);
}

.q-tab.is-on .q-tab__on {
    display: grid;
}

/* زبانه‌ی کوچک زیر تب فعال، به سمت کاشی‌های نوع ملک */
.q-tab.is-on:after {
    position: absolute;
    right: 50%;
    bottom: -14px;
    width: 15px;
    height: 15px;
    content: "";
    transform: translateX(50%) rotate(45deg);
    border-radius: 3px;
    background: var(--acc);
}

/* ── زیرمجموعه هر تب: کاشی‌های درشت نوع ملک ────────────────────────────── */
.q-pane {
    padding: 28px 0 0;
}

.q-pane__lbl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--qa-navy);
    font-size: .95rem;
    font-weight: 900;
}

.q-pane__lbl i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .82rem;
}

.q-pane__lbl em {
    color: var(--qa-faint);
    font-size: .71rem;
    font-style: normal;
    font-weight: 700;
}

.q-types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.q-type {
    /* رنگ اختصاصی هر نوع ملک از استایل درون‌خطی می‌آید */
    --acc: #1D3557;
    --acc-dark: #12233A;
    --acc-soft: #EDF1F7;
    --acc-glow: rgba(29, 53, 87, .3);
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    border: 1px solid var(--qa-line);
    border-radius: 17px;
    color: var(--qa-navy) !important;
    background: #fff;
    transition: .18s;
}

.q-type__ico {
    display: grid;
    width: 52px;
    height: 52px;
    flex: none;
    place-items: center;
    border-radius: 16px;
    color: var(--acc);
    background: var(--acc-soft);
    font-size: 1.5rem;
    transition: .18s;
}

.q-type__txt {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.q-type__txt b {
    overflow: hidden;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.55;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.q-type__txt small {
    color: var(--qa-muted);
    font-size: .72rem;
    font-weight: 800;
}

/* فلش «برو به جستجو» — کاشی یک لینک است، نه یک انتخاب درجا */
.q-type__go {
    margin-inline-start: auto;
    color: var(--qa-faint);
    font-size: .95rem;
    opacity: 0;
    transform: translateX(6px);
    transition: .18s;
}

.q-type:hover {
    border-color: var(--acc);
    color: #fff !important;
    background: linear-gradient(125deg, var(--acc-dark) 0%, var(--acc) 100%);
    box-shadow: 0 14px 30px var(--acc-glow);
    transform: translateY(-3px);
}

.q-type:hover .q-type__ico {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

.q-type:hover .q-type__txt small {
    color: rgba(255, 255, 255, .85);
}

.q-type:hover .q-type__go {
    color: #fff;
    opacity: 1;
    transform: translateX(0);
}

/* ── میان‌بر محله‌ها ────────────────────────────────────────────────────── */
.q-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--qa-line);
}

.q-quick__lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--qa-navy);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.q-quick__lbl i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 9px;
    color: var(--qa-orange-deep);
    background: var(--qa-orange-deep-soft);
    font-size: .78rem;
}

.q-quick__list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.q-quick__list a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    color: var(--qa-body) !important;
    background: var(--qa-soft);
    font-size: .74rem;
    font-weight: 700;
    transition: .16s;
}

.q-quick__list a:hover {
    border-color: var(--qa-navy-2);
    color: var(--qa-navy-2) !important;
    background: var(--qa-navy-soft);
}

.q-quick__all {
    color: var(--qa-navy-2) !important;
    background: var(--qa-navy-soft) !important;
    border-color: var(--qa-navy-line) !important;
    font-weight: 900 !important;
}

/* ── نوار جستجو ────────────────────────────────────────────────────────── */
.q-form {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--qa-line);
}

.q-field {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
}

.q-field > i {
    position: absolute;
    right: 14px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: .95rem;
    pointer-events: none;
}

.q-field input,
.q-field select {
    width: 100%;
    min-width: 0;
    height: 60px;
    padding: 0 58px 0 16px;
    border: 1px solid var(--qa-line);
    border-radius: 16px;
    color: var(--qa-ink);
    background: var(--qa-soft);
    font-size: .9rem;
    font-weight: 800;
    outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

.q-field select {
    appearance: none;
    cursor: pointer;
}

.q-field input:focus,
.q-field select:focus {
    border-color: var(--qa-navy-2);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 53, 87, .13);
}

.q-field input::placeholder {
    color: var(--qa-faint);
    font-weight: 600;
}

.q-form__go {
    display: inline-flex;
    height: 60px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 38px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(125deg, var(--qa-orange) 0%, #FF8A3D 100%);
    box-shadow: 0 12px 26px rgba(240, 98, 16, .32);
    font-size: 1.02rem;
    font-weight: 900;
    cursor: pointer;
    transition: .18s;
}

.q-form__go i {
    font-size: 1.15rem;
}

.q-form__go:hover {
    box-shadow: 0 16px 32px rgba(240, 98, 16, .42);
    transform: translateY(-2px);
}

/* ── سه تضمین، هر کدام با رنگ و آیکون خودش ─────────────────────────────── */
.q-assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.q-assure li {
    --acc: #1D3557;
    --acc-soft: #EDF1F7;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    color: var(--qa-body);
    background: var(--acc-soft);
    font-size: .77rem;
    font-weight: 800;
}

.q-assure i {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--acc);
    font-size: .72rem;
}

/* ── نقشه: تمام‌عرض، کاملاً زیر پنل جستجو ──────────────────────────────── */
.q-map {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid var(--qa-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .03), 0 18px 44px rgba(20, 38, 63, .1);
}

.q-map__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(105deg, var(--qa-navy) 0%, var(--qa-navy-2) 55%, var(--qa-navy-lite) 100%);
}

.q-map__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: .98rem;
    font-weight: 900;
}

.q-map__title i {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .2);
    font-size: .95rem;
}

.q-map__head a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 11px;
    color: var(--qa-navy) !important;
    background: #fff;
    font-size: .77rem;
    font-weight: 900;
    white-space: nowrap;
    transition: .18s;
}

.q-map__head a:hover {
    color: var(--qa-orange) !important;
    transform: translateX(-3px);
}

.q-map__short {
    display: none;
}

.q-map__canvas {
    position: relative;
    height: 470px;
    background: var(--qa-soft);
}

#qMap {
    width: 100%;
    height: 100%;
}

/* کاشی‌های Voyager کم‌رنگ‌اند؛ کمی اشباع و کنتراست، نقشه را زنده می‌کند.
   روی حالت ماهواره فیلتر برداشته می‌شود تا تصویر طبیعی بماند. */
.q-map .leaflet-tile-pane {
    filter: saturate(1.12) contrast(1.04);
}

.q-map.is-sat .leaflet-tile-pane {
    filter: none;
}

/* لبه‌ی داخلی نرم تا نقشه به گوشه‌های کارت نچسبد */
.q-map__canvas:after {
    position: absolute;
    z-index: 450;
    inset: 0;
    content: "";
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06), inset 0 14px 26px -18px rgba(16, 24, 40, .5);
}

/* ── کنترل‌های لیفلت، هم‌شکل بقیه‌ی صفحه ────────────────────────────────── */
.q-map .leaflet-control-zoom {
    overflow: hidden;
    border: 1px solid var(--qa-line) !important;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .14);
}

.q-map .leaflet-control-zoom a {
    width: 36px;
    height: 36px;
    border: 0;
    color: var(--qa-navy);
    background: rgba(255, 255, 255, .97);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 36px;
}

.q-map .leaflet-control-zoom a + a {
    border-top: 1px solid var(--qa-line);
}

.q-map .leaflet-control-zoom a:hover {
    color: #fff;
    background: var(--qa-navy-2);
}

.q-map .leaflet-top.leaflet-left {
    top: 14px;
    inset-inline-start: 14px;
}

.q-map .leaflet-control-attribution {
    margin: 0 !important;
    padding: 2px 8px;
    border-radius: 0 8px 0 0;
    background: rgba(255, 255, 255, .8);
    color: var(--qa-faint);
    font-size: .58rem;
    direction: ltr;
}

.q-map .leaflet-control-attribution a {
    color: var(--qa-muted);
}

/* ── انتخاب نوع نقشه ───────────────────────────────────────────────────── */
/* سمت راست می‌نشیند چون کنترل زوم لیفلت سمت چپ است */
.q-map__styles {
    position: absolute;
    z-index: 500;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--qa-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .14);
}

.q-map__styles button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 0;
    border-radius: 10px;
    color: var(--qa-body);
    background: transparent;
    font-family: inherit;
    font-size: .73rem;
    font-weight: 800;
    cursor: pointer;
    transition: .16s;
}

.q-map__styles button i {
    color: var(--qa-faint);
    font-size: .85rem;
}

.q-map__styles button:hover {
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
}

.q-map__styles button.is-on {
    color: #fff;
    background: linear-gradient(125deg, var(--qa-navy) 0%, var(--qa-navy-2) 100%);
    box-shadow: 0 6px 16px rgba(29, 53, 87, .28);
}

.q-map__styles button.is-on i {
    color: #fff;
}

/* شمارنده‌ی شناور روی نقشه */
.q-map__bar {
    position: absolute;
    z-index: 500;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .16);
    color: var(--qa-muted);
    font-size: .76rem;
    font-weight: 800;
}

.q-map__bar i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--qa-navy-2);
    font-size: .78rem;
}

.q-map__bar b {
    color: var(--qa-navy-2);
    font-size: .95rem;
    font-weight: 900;
}

/* حالت خالی نقشه */
.q-map__none {
    position: absolute;
    z-index: 520;
    top: 50%;
    left: 50%;
    display: flex;
    max-width: 320px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 22px 26px;
    border: 1px solid var(--qa-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
    text-align: center;
    transform: translate(-50%, -50%);
}

.q-map__none[hidden] {
    display: none;
}

.q-map__none i {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 5px;
    place-items: center;
    border-radius: 15px;
    color: var(--qa-navy-2);
    background: var(--qa-navy-soft);
    font-size: 1.3rem;
}

.q-map__none b {
    color: var(--qa-navy);
    font-size: .88rem;
    font-weight: 900;
}

.q-map__none span {
    color: var(--qa-muted);
    font-size: .74rem;
    line-height: 1.9;
}

.q-map__loading {
    position: absolute;
    z-index: 600;
    top: 12px;
    left: 12px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .16);
}

.q-map__loading span {
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid var(--qa-navy-line);
    border-top-color: var(--qa-navy-2);
    border-radius: 50%;
    animation: qSpin .8s linear infinite;
}

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

.q-map__off {
    padding: 24px;
    color: var(--qa-muted);
    font-size: .8rem;
    text-align: center;
}

/* ── نشانگر قیمت‌دار ────────────────────────────────────────────────────
   حباب قیمت با دُم اشاره‌گر، نه دایره‌ی ساده؛ نقطه‌ی دقیق ملک نوک دُم است. */
.q-pin {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: translate(50%, -100%);
}

.q-pin__in {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(125deg, var(--qa-navy) 0%, var(--qa-navy-2) 100%);
    box-shadow: 0 5px 14px rgba(20, 38, 63, .4);
    font-size: .7rem;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .16s, background .16s, box-shadow .16s;
}

.q-pin__in:after {
    position: absolute;
    right: 50%;
    bottom: -6px;
    width: 11px;
    height: 11px;
    content: "";
    transform: translateX(50%) rotate(45deg);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 0 0 3px 0;
    background: var(--qa-navy-2);
}

.q-pin:hover {
    z-index: 640 !important;
}

.q-pin:hover .q-pin__in,
.q-pin.is-active .q-pin__in {
    background: linear-gradient(125deg, #D24E06 0%, var(--qa-orange) 100%);
    box-shadow: 0 9px 22px rgba(240, 98, 16, .5);
    transform: translateY(-3px) scale(1.06);
}

.q-pin:hover .q-pin__in:after,
.q-pin.is-active .q-pin__in:after {
    background: var(--qa-orange);
}

/* ── خوشه‌ها: حلقه‌ی روشن دور دایره‌ی رنگی ──────────────────────────────── */
.q-cl {
    background: none;
}

.q-cl__in {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--qa-navy-2) 0%, var(--qa-navy) 100%);
    box-shadow: 0 8px 20px rgba(20, 38, 63, .38), 0 0 0 6px rgba(29, 53, 87, .16);
    font-size: .82rem;
    font-weight: 900;
    transition: box-shadow .18s, transform .18s;
}

.q-cl:hover .q-cl__in {
    box-shadow: 0 10px 24px rgba(240, 98, 16, .42), 0 0 0 8px rgba(240, 98, 16, .18);
    background: linear-gradient(135deg, var(--qa-orange) 0%, #D24E06 100%);
    transform: scale(1.06);
}

.q-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: var(--qa-r);
    box-shadow: var(--qa-shadow-lg);
}

.q-popup .leaflet-popup-content {
    width: auto !important;
    margin: 0;
}

.q-popup .leaflet-popup-tip {
    box-shadow: none;
}

.q-mc {
    display: block;
    color: inherit !important;
}

.q-mc__media {
    display: block;
    height: 118px;
    overflow: hidden;
    background: var(--qa-soft);
}

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

.q-mc__body {
    display: block;
    padding: 11px 13px 13px;
}

.q-mc__price {
    display: block;
    color: var(--qa-navy);
    font-size: .88rem;
    font-weight: 900;
}

.q-mc__price small {
    color: var(--qa-muted);
    font-size: .68rem;
    font-weight: 700;
}

.q-mc__title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--qa-body);
    font-size: .76rem;
    font-weight: 700;
}

.q-mc__place,
.q-mc__specs {
    display: block;
    margin-top: 4px;
    color: var(--qa-muted);
    font-size: .68rem;
}

.q-mc__specs span + span:before {
    content: " · ";
}

@media (max-width: 1199.98px) {
    .q-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .q-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .q-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .q-form__go {
        grid-column: 1 / -1;
    }

    .q-map__canvas {
        height: 400px;
    }
}

@media (max-width: 575.98px) {
    /* فاصله‌ی سربرگ fixed باید بماند، فقط کمتر می‌شود */
    .q-hunt {
        padding-top: 88px;
    }

    .q-hunt__panel {
        padding: 14px 12px 18px;
        border-radius: 20px;
    }

    .q-hunt__head {
        gap: 11px;
        margin: 2px 2px 15px;
    }

    .q-hunt__mark {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        font-size: 1.3rem;
    }

    .q-hunt__title {
        font-size: 1.02rem;
        line-height: 1.5;
    }

    .q-hunt__lead {
        font-size: .74rem;
        line-height: 1.75;
    }

    .q-map__none {
        max-width: 260px;
        padding: 18px;
    }

    .q-tabs {
        gap: 8px;
        padding: 7px;
        border-radius: 17px;
    }

    /* در عرض کم تب‌ها عمودی می‌شوند تا آیکون و متن هر دو درشت بمانند */
    .q-tab {
        flex-direction: column;
        gap: 9px;
        padding: 15px 6px;
        text-align: center;
    }

    .q-tab__ico {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.4rem;
    }

    .q-tab__txt {
        align-items: center;
    }

    .q-tab__txt b {
        font-size: 1rem;
    }

    .q-tab__txt small {
        font-size: .67rem;
    }

    .q-tab__on {
        top: 8px;
        left: 8px;
        width: 20px;
        height: 20px;
        font-size: .62rem;
    }

    .q-tab.is-on:after {
        bottom: -13px;
        width: 13px;
        height: 13px;
    }

    .q-pane {
        padding-top: 24px;
    }

    .q-pane__lbl {
        font-size: .86rem;
    }

    .q-types {
        gap: 8px;
    }

    .q-type {
        gap: 10px;
        padding: 10px 11px;
        border-radius: 15px;
    }

    .q-type__ico {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 1.2rem;
    }

    /* در دو ستونیِ موبایل نام‌های بلند به‌جای «…» در دو خط می‌شکنند */
    .q-type__txt b {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: .78rem;
        line-height: 1.45;
        white-space: normal;
    }

    .q-type__txt small {
        font-size: .64rem;
    }

    .q-type__on {
        top: 7px;
        left: 7px;
        width: 18px;
        height: 18px;
        font-size: .56rem;
    }

    .q-form {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 20px;
        padding-top: 20px;
    }

    .q-field input,
    .q-field select {
        height: 56px;
        padding-left: 14px;
    }

    .q-form__go {
        height: 56px;
    }

    .q-assure {
        gap: 7px;
    }

    .q-assure li {
        font-size: .71rem;
    }

    .q-map {
        margin-top: 18px;
        border-radius: 20px;
    }

    .q-map__head {
        padding: 11px 13px;
    }

    .q-map__title {
        font-size: .84rem;
    }

    .q-map__title i {
        width: 28px;
        height: 28px;
        font-size: .82rem;
    }

    .q-map__head a {
        padding: 8px 12px;
        font-size: .7rem;
    }

    .q-map__long {
        display: none;
    }

    .q-map__short {
        display: inline;
    }

    .q-map__canvas {
        height: 340px;
    }

    .q-map__styles button {
        padding: 7px 10px;
        font-size: .68rem;
    }

    .q-map .leaflet-control-zoom a {
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

    .q-quick {
        gap: 8px;
        margin-top: 15px;
        padding-top: 15px;
    }

    .q-quick__list a {
        padding: 6px 11px;
        font-size: .69rem;
    }

    .qa-agentcard {
        padding: 52px 15px 16px;
    }

    .qa-agentcard__ava,
    .qa-agentcard__ava img {
        width: 90px;
    }

    .qa-agentcard__ava img {
        height: 90px;
    }

    .qa-agentcard__acts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── سرصفحه بخش (وسط‌چین، سبک cafoo) ─────────────────────────────────── */
.qa-sec {
    padding-top: 66px;
}

.qa-sec--pad {
    padding-bottom: 66px;
}

.qa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    color: var(--qa-orange);
    background: var(--qa-orange-soft);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .4px;
}

.qa-eyebrow i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--qa-orange);
    font-size: .68rem;
    letter-spacing: 0;
}

.qa-sechead {
    margin-bottom: 30px;
    text-align: center;
}

.qa-sechead h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2.05rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -.4px;
}

.qa-sechead p {
    max-width: 560px;
    margin: 12px auto 0;
    color: var(--qa-muted);
    font-size: .84rem;
    line-height: 2;
}

.qa-sechead--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    text-align: start;
}

.qa-sechead--row p {
    margin-inline: 0;
}

.qa-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    color: var(--qa-ink);
    background: var(--qa-surface);
    font-size: .76rem;
    font-weight: 800;
    transition: .2s;
}

.qa-more:hover {
    border-color: var(--qa-orange);
    color: var(--qa-orange);
}

.qa-more > i:first-child {
    color: var(--qa-trust);
    font-size: .95rem;
}

.qa-more:hover > i:first-child {
    color: var(--qa-orange);
}

/* چیپ‌های فیلتر، هرکدام با آیکون و شمار خودش */
.qa-chipbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
}

.qa-chipbar button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    color: var(--qa-body);
    background: var(--qa-surface);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;
    transition: .2s;
    cursor: pointer;
}

.qa-chipbar button i {
    color: var(--qa-trust);
    font-size: .92rem;
}

.qa-chipbar button b {
    padding: 1px 8px;
    border-radius: 999px;
    color: var(--qa-muted);
    background: var(--qa-soft);
    font-size: .66rem;
    font-weight: 900;
}

.qa-chipbar button:hover {
    border-color: var(--qa-trust);
    color: var(--qa-trust);
    background: var(--qa-trust-soft);
}

.qa-chipbar button.is-on {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(125deg, var(--qa-trust-2) 0%, var(--qa-trust) 100%);
    box-shadow: 0 8px 20px rgba(11, 98, 176, .26);
}

.qa-chipbar button.is-on i {
    color: #fff;
}

.qa-chipbar button.is-on b {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

/* ── کارت ملک (سبک cafoo) ────────────────────────────────────────────── */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.qa-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qa-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qa-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* وقتی فقط یک آیتم هست، کارت کشیده و بدقواره نشود. ترکیب دو کلاس لازم است
   وگرنه قاعده‌های تک‌کلاسیِ داخل مدیاکوئری‌ها آن را دوستونه می‌کنند */
.qa-grid.qa-grid--1 {
    max-width: 460px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
}

/* شبکه کارت‌های ملک صفحه اول — همان نسبت‌های شبکه‌ی صفحه «املاک من» */
.q-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .q-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .q-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .q-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ── کارت ملک ─────────────────────────────────────────────────────────────
   هم‌شکل کارت صفحه «املاک من» (estate/card_unified): تصویر کوتاه، بدنه فشرده،
   قیمت پایین کارت با خط جداکننده. همین کارت در صفحه نمایش ملک و صفحه مشاور
   هم استفاده می‌شود.
   ------------------------------------------------------------------------ */
.qa-ecard {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--qa-line);
    border-radius: 11px;
    background: var(--qa-surface);
    box-shadow: 0 2px 8px rgba(18, 38, 63, .06);
    transition: box-shadow .2s, transform .2s;
}

.qa-ecard:hover {
    box-shadow: 0 8px 22px rgba(16, 24, 40, .13);
    transform: translateY(-2px);
}

.qa-ecard__media {
    position: relative;
    display: block;
    height: 150px;
    flex-shrink: 0;
    overflow: hidden;
    background: #E7ECF3;
}

.qa-ecard__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.qa-ecard:hover .qa-ecard__media img {
    transform: scale(1.04);
}

.qa-tags {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: flex;
    max-width: calc(100% - 16px);
    flex-wrap: wrap;
    gap: 5px;
}

.qa-tag {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.7;
    white-space: nowrap;
}

.qa-tag--deal {
    color: #fff;
    background: var(--qa-orange);
}

.qa-tag--rent {
    color: #fff;
    background: var(--qa-trust);
}

.qa-tag--type {
    color: #fff;
    background: rgba(16, 32, 58, .62);
}

.qa-tag--vr {
    color: #06281D;
    background: #34D399;
}

/* چیپ نوع ملک، پایین تصویر — جای همان ec-type-badge */
.qa-ecard__type {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    background: rgba(16, 32, 58, .58);
    font-size: .64rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qa-ecard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    padding: 11px 12px 12px;
}

.qa-ecard__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 38px;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--qa-ink) !important;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.65;
}

.qa-ecard:hover .qa-ecard__title {
    color: var(--qa-trust) !important;
}

.qa-ecard__loc {
    display: flex;
    min-height: 20px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--qa-muted);
    font-size: .7rem;
    white-space: nowrap;
}

.qa-ecard__loc i {
    flex: none;
    color: var(--qa-trust);
    font-size: .74rem;
}

.qa-ecard__loc span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-attrs {
    display: flex;
    min-height: 22px;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
}

.qa-attr {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--qa-body);
    background: var(--qa-soft);
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
}

.qa-attr i {
    color: var(--qa-faint);
    font-size: .68rem;
}

.qa-ecard__price {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--qa-line-soft);
}

.qa-ecard__price b {
    display: block;
    color: var(--qa-navy);
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-ecard__price b small {
    color: var(--qa-muted);
    font-size: .66rem;
    font-weight: 700;
}

.qa-ecard__price b.is-soft {
    color: var(--qa-muted);
}

.qa-price__lbl {
    display: block;
    color: var(--qa-faint);
    font-size: .63rem;
    font-weight: 700;
}

.qa-ecard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px -12px -12px;
    padding: 8px 12px;
    border-top: 1px solid var(--qa-line-soft);
    background: #FAFBFD;
}

.qa-ecard__agent {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.qa-ecard__agent img {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.qa-ecard__agent span {
    overflow: hidden;
    color: var(--qa-muted);
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qa-ecard__cta {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    color: var(--qa-orange) !important;
    font-size: .7rem;
    font-weight: 900;
}

@media (max-width: 575.98px) {
    .qa-ecard {
        border-radius: 9px;
    }

    .qa-ecard__media {
        height: 118px;
    }

    .qa-ecard__body {
        padding: 8px 8px 9px;
        gap: 4px;
    }

    .qa-ecard__title {
        min-height: 34px;
        font-size: .74rem;
    }

    .qa-ecard__loc {
        min-height: 17px;
        font-size: .62rem;
    }

    .qa-attrs {
        min-height: 19px;
    }

    /* در عرض کم فقط متراژ جا می‌شود */
    .qa-attr {
        display: none;
        padding: 1px 5px;
        font-size: .6rem;
    }

    .qa-attr:nth-child(2),
    .qa-attrs .qa-attr:only-child {
        display: inline-flex;
    }

    .qa-ecard__price b {
        font-size: .74rem;
    }

    .qa-price__lbl {
        font-size: .58rem;
    }

    .qa-ecard__foot {
        margin: 6px -8px -9px;
        padding: 6px 8px;
    }

    .qa-ecard__agent span {
        font-size: .58rem;
    }

    .qa-ecard__cta {
        font-size: .62rem;
    }
}

/* ── کارت محله ────────────────────────────────────────────────────────── */
.qa-area {
    position: relative;
    display: block;
    height: 230px;
    overflow: hidden;
    border-radius: var(--qa-r-lg);
    background: var(--qa-navy);
}

.qa-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s;
}

.qa-area:hover img {
    transform: scale(1.08);
}

.qa-area:before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(14, 23, 41, 0) 34%, rgba(14, 23, 41, .88) 100%);
}

.qa-area__body {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 16px;
    left: 18px;
    color: #fff;
}

.qa-area__body h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

.qa-area__body span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    color: var(--qa-orange);
    font-size: .72rem;
    font-weight: 800;
}

/* ── کارت مشاور ───────────────────────────────────────────────────────────
   رنگ هر کارت از رتبه‌اش می‌آید (طلا/نقره/برنز) و از استایل درون‌خطی تزریق
   می‌شود؛ سربرگ رنگی، آواتار حلقه‌دار با مدال، دو آمار آیکون‌دار و دو دکمه.
   ------------------------------------------------------------------------ */
.qa-agentcard {
    --acc: #0B62B0;
    --acc-dark: #08497F;
    --acc-soft: #EAF3FC;
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: 58px 20px 20px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-lg);
    background: var(--qa-surface);
    box-shadow: var(--qa-shadow);
    text-align: center;
    transition: .22s;
}

/* باند رنگی بالای کارت */
.qa-agentcard:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 74px;
    content: "";
    background: linear-gradient(125deg, var(--acc-dark) 0%, var(--acc) 100%);
}

.qa-agentcard:hover {
    border-color: var(--acc);
    box-shadow: var(--qa-shadow-lg);
    transform: translateY(-4px);
}

.qa-agentcard__ribbon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    color: var(--acc-dark);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .16);
    font-size: .66rem;
    font-weight: 900;
}

.qa-agentcard__ribbon i {
    font-size: .78rem;
}

/* آواتار با حلقه‌ی هم‌رنگ رتبه و مدال گوشه */
.qa-agentcard__ava {
    position: relative;
    z-index: 2;
    width: 104px;
    margin: 0 auto 13px;
}

.qa-agentcard__ava img {
    display: block;
    width: 104px;
    height: 104px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--qa-soft);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .18), 0 0 0 3px var(--acc-soft);
    object-fit: cover;
}

.qa-agentcard__medal {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc-dark) 100%);
    font-size: .74rem;
}

.qa-agentcard h3 {
    margin: 0 0 6px;
    color: var(--qa-ink);
    font-size: 1rem;
    font-weight: 900;
}

.qa-agentcard__role {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    color: var(--acc-dark);
    background: var(--acc-soft);
    font-size: .7rem;
    font-weight: 800;
}

.qa-agentcard__role i {
    font-size: .78rem;
}

.qa-agentcard__stats {
    display: flex;
    margin: 16px 0 0;
    padding-top: 15px;
    border-top: 1px solid var(--qa-line);
}

.qa-agentcard__stats > div {
    flex: 1 1 0;
    padding-inline: 4px;
}

.qa-agentcard__stats > div + div {
    border-inline-start: 1px solid var(--qa-line);
}

.qa-agentcard__stats i {
    display: block;
    margin-bottom: 5px;
    color: var(--acc);
    font-size: .95rem;
}

.qa-agentcard__stats b {
    display: block;
    overflow: hidden;
    color: var(--qa-navy);
    font-size: .92rem;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qa-agentcard__stats span {
    color: var(--qa-faint);
    font-size: .63rem;
    font-weight: 800;
}

.qa-agentcard__acts {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.qa-agentcard__acts .qa-btn {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    gap: 7px;
    font-size: .78rem;
}

.qa-agentcard__acts .qa-btn--primary {
    background: linear-gradient(125deg, var(--acc-dark) 0%, var(--acc) 100%);
}

.qa-agentcard__acts .qa-btn--primary:hover {
    filter: brightness(1.08);
    background: linear-gradient(125deg, var(--acc-dark) 0%, var(--acc) 100%);
}

.qa-agentcard__acts .qa-btn--line:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* ── مقاله ────────────────────────────────────────────────────────────── */
.qa-post {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-lg);
    background: var(--qa-surface);
    box-shadow: var(--qa-shadow);
    color: var(--qa-ink);
    transition: .22s;
}

.qa-post:hover {
    box-shadow: var(--qa-shadow-lg);
    color: var(--qa-ink);
    transform: translateY(-4px);
}

.qa-post__img {
    display: block;
    height: 186px;
    overflow: hidden;
    background: #DDE3EC;
}

.qa-post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.qa-post:hover .qa-post__img img {
    transform: scale(1.06);
}

.qa-post__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 17px 18px 18px;
}

.qa-post h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .94rem;
    font-weight: 800;
    line-height: 1.7;
}

.qa-post p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--qa-muted);
    font-size: .78rem;
    line-height: 2;
}

.qa-post time {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    color: var(--qa-faint);
    font-size: .68rem;
    font-weight: 700;
}

/* ══ اینستاگرام (با QR) و اپلیکیشن ═══════════════════════════════════════ */
.q-follow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.q-follow__card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 28px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-lg);
    background: var(--qa-surface);
    box-shadow: var(--qa-shadow);
}

.q-follow__card--ig {
    border-color: #F6D9E6;
    background: linear-gradient(125deg, #FFF4F8 0%, #FFF9F5 46%, #fff 100%);
}

.q-follow__card--app {
    border-color: var(--qa-trust-line);
    background: linear-gradient(125deg, var(--qa-trust-soft) 0%, #F7FBFF 48%, #fff 100%);
}

.q-follow__body {
    min-width: 0;
    flex: 1;
}

.q-follow__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--qa-muted);
    font-size: .7rem;
    font-weight: 900;
}

.q-follow__card--ig .q-follow__eyebrow i {
    color: #C13584;
    font-size: 1rem;
}

.q-follow__card--app .q-follow__eyebrow i {
    color: var(--qa-trust);
    font-size: 1rem;
}

.q-follow__body h2 {
    margin: 0 0 9px;
    color: var(--qa-navy);
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.75;
}

.q-follow__body p {
    margin: 0 0 16px;
    color: var(--qa-muted);
    font-size: .78rem;
    line-height: 2;
}

.q-follow__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.q-follow__hint {
    color: var(--qa-faint);
    font-size: .69rem;
    font-weight: 700;
}

.q-follow__hint.is-warn {
    color: var(--qa-orange);
}

.qa-btn--ig {
    color: #fff !important;
    background: linear-gradient(115deg, #F58529 0%, #DD2A7B 52%, #8134AF 100%);
    box-shadow: 0 10px 24px rgba(221, 42, 123, .26);
}

.qa-btn--ig:hover {
    color: #fff !important;
    filter: brightness(1.06);
    transform: translateY(-2px);
}

/* کد QR اینستاگرام */
.q-qr {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    border: 1px solid #F0DCE7;
    border-radius: var(--qa-r);
    background: #fff;
    box-shadow: 0 8px 22px rgba(193, 53, 132, .12);
    transition: .2s;
}

.q-qr:hover {
    border-color: #DD2A7B;
    transform: translateY(-3px);
}

.q-qr img {
    display: block;
    width: 132px;
    height: 132px;
}

.q-qr span {
    color: var(--qa-muted);
    font-size: .66rem;
    font-weight: 800;
}

/* فروشگاه‌های اپلیکیشن */
.q-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.q-store {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-sm);
    color: var(--qa-body) !important;
    background: #fff;
    font-size: .72rem;
    font-weight: 800;
}

.q-store i {
    color: var(--qa-trust);
    font-size: .88rem;
}

a.q-store:hover {
    border-color: var(--qa-trust);
    color: var(--qa-trust) !important;
    background: var(--qa-trust-soft);
}

.q-store.is-soon {
    color: var(--qa-faint) !important;
}

.q-store.is-soon i {
    color: var(--qa-faint);
}

.q-store small {
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--qa-muted);
    background: var(--qa-soft);
    font-size: .58rem;
    font-weight: 800;
}

/* ماکت گوشی کنار بخش اپلیکیشن */
.q-phone {
    display: grid;
    width: 132px;
    height: 224px;
    flex: none;
    place-items: center;
    padding: 9px;
    border: 3px solid var(--qa-navy);
    border-radius: 24px;
    background: var(--qa-navy);
    box-shadow: 0 16px 34px rgba(20, 38, 63, .26);
}

.q-phone__screen {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 15px;
    background: linear-gradient(180deg, #fff 0%, var(--qa-trust-soft) 100%);
    text-align: center;
}

.q-phone__screen img {
    border-radius: 11px;
}

.q-phone__screen b {
    color: var(--qa-navy);
    font-size: .8rem;
    font-weight: 900;
}

.q-phone__screen span {
    color: var(--qa-muted);
    font-size: .6rem;
    line-height: 1.8;
}

@media (max-width: 1199.98px) {
    .q-follow {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .q-follow__card {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 18px;
        padding: 20px 17px;
    }

    .q-qr {
        align-self: center;
    }

    .q-phone {
        align-self: center;
    }

    .qa-btn--ig {
        width: 100%;
    }
}

/* ══ کلمات کلیدی لینک‌دار (سئو داخلی) ════════════════════════════════════ */
.q-seo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* هر گروه یک ردیف تمام‌عرض است: عنوان در ستون راست، لینک‌ها در ادامه‌ی آن.
   ستون‌های باریک کنار هم باعث می‌شد قرص‌ها بد بشکنند و بلندی کارت‌ها یکی نباشد. */
.q-seo__col {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px 20px;
    padding: 14px 18px;
    border: 1px solid var(--qa-line);
    border-right: 3px solid var(--acc, var(--qa-orange));
    border-radius: var(--qa-r-lg);
    background: var(--qa-surface);
}

.q-seo__col h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid var(--qa-line);
    color: var(--qa-navy);
    font-size: .85rem;
    font-weight: 900;
    line-height: 1.5;
}

.q-seo__ico {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    border-radius: 11px;
    color: var(--acc, var(--qa-trust));
    background: var(--acc-soft, var(--qa-trust-soft));
    font-size: 1rem;
}

.q-seo__links {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}

.q-seo__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    color: var(--qa-body) !important;
    background: var(--qa-soft);
    font-size: .72rem;
    font-weight: 700;
    transition: .16s;
}

.q-seo__links a i {
    color: var(--qa-faint);
    font-size: .78rem;
    transition: .16s;
}

.q-seo__links a:hover {
    border-color: var(--acc, var(--qa-trust));
    color: var(--acc, var(--qa-trust)) !important;
    background: var(--acc-soft, var(--qa-trust-soft));
}

.q-seo__links a:hover i {
    color: var(--acc, var(--qa-trust));
    transform: translateX(-2px);
}

@media (max-width: 767.98px) {
    .q-seo__col {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .q-seo__col h3 {
        padding: 0 0 12px;
        border-bottom: 1px solid var(--qa-line);
        border-left: 0;
    }
}

/* ── دکمه‌ها ──────────────────────────────────────────────────────────── */
.qa-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 800;
    transition: .2s;
    cursor: pointer;
}

.qa-btn--primary {
    color: #fff;
    background: var(--qa-orange);
    box-shadow: 0 10px 24px rgba(240, 98, 16, .28);
}

.qa-btn--primary:hover {
    color: #fff;
    background: var(--qa-orange-2);
    transform: translateY(-2px);
}

.qa-btn--ink,
.qa-btn--navy {
    color: #fff;
    background: var(--qa-navy);
}

.qa-btn--ink:hover,
.qa-btn--navy:hover {
    color: #fff;
    background: var(--qa-navy-3);
}

.qa-btn--wa {
    color: #fff;
    background: #22A45D;
}

.qa-btn--wa:hover {
    color: #fff;
    background: #1C8C4F;
}

.qa-btn--ghost {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.qa-btn--ghost:hover {
    border-color: var(--qa-orange);
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

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

.qa-btn--line:hover {
    border-color: var(--qa-orange);
    color: var(--qa-orange);
}

/* ── پرسش و پاسخ ─────────────────────────────────────────────────────── */
.qa-faq {
    display: grid;
    max-width: 860px;
    gap: 12px;
    margin: 0 auto;
}

.qa-faq__item {
    overflow: hidden;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r);
    background: var(--qa-surface);
}

.qa-faq__q {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 0;
    color: var(--qa-ink);
    background: none;
    font-family: inherit;
    font-size: .87rem;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
}

.qa-faq__q > span {
    margin-inline-end: auto;
}

.qa-faq__q i {
    flex: none;
    color: var(--qa-orange);
    transition: transform .22s;
}

/* آیکون سمت راست هر پرسش */
.qa-faq__mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    color: var(--qa-trust) !important;
    background: var(--qa-trust-soft);
    font-size: .8rem;
    transition: .22s;
}

.qa-faq__item.is-open {
    border-color: rgba(240, 98, 16, .4);
}

.qa-faq__item.is-open .qa-faq__mark {
    color: #fff !important;
    background: var(--qa-orange);
}

.qa-faq__item.is-open .qa-faq__q i:last-child {
    transform: rotate(180deg);
}

.qa-faq__a {
    display: none;
    padding: 0 20px 19px;
    color: var(--qa-muted);
    font-size: .81rem;
    line-height: 2.15;
}

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

/* ── حالت خالی ────────────────────────────────────────────────────────── */
.qa-empty {
    padding: 46px 20px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-lg);
    color: var(--qa-muted);
    background: var(--qa-surface);
    font-size: .84rem;
    text-align: center;
}

.qa-empty a {
    color: var(--qa-orange);
    font-weight: 800;
}

/* ==========================================================================
   صفحه نمایش ملک
   ========================================================================== */
.qa-crumb {
    padding-top: 100px;
    color: var(--qa-muted);
    font-size: .73rem;
}

.qa-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qa-crumb a {
    color: var(--qa-muted);
}

.qa-crumb a:hover {
    color: var(--qa-orange);
}

.qa-crumb li + li:before {
    margin-inline-end: 8px;
    content: "‹";
    color: var(--qa-faint);
}

.qa-crumb li[aria-current] {
    max-width: 520px;
    overflow: hidden;
    color: var(--qa-ink);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* گالری دوتکه */
.qa-gal {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

/* ستون کناری فقط وقتی ساخته می‌شود که بیش از یک عکس باشد؛ بدون این دو قاعده
   گالریِ تک‌عکس یک‌سوم عرض را خالی می‌گذارد و با بقیه صفحه هم‌تراز نمی‌ماند */
.qa-gal--side0 {
    grid-template-columns: minmax(0, 1fr);
}

.qa-gal--side1 .qa-gal__side {
    grid-template-rows: minmax(0, 1fr);
}

.qa-gal__main {
    position: relative;
    height: 470px;
    overflow: hidden;
    border-radius: var(--qa-r-lg);
    background: #DDE3EC;
}

/* عکس اصلی؛ ثابت است و با کلیک لایت‌باکس باز می‌شود */
.qa-gal__hero {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    transition: transform .5s;
}

.qa-gal__main:hover a.qa-gal__hero {
    transform: scale(1.03);
}

/* عضوهای گروه لایت‌باکس که روی صفحه جایی ندارند. display:none نیست چون
   فنسی‌باکس باید بتواند رویشان کلیک برنامه‌ای بگیرد */
.qa-gal__hidden {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.qa-gal__side {
    display: grid;
    height: 470px;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}

.qa-gal__cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--qa-r-lg);
    background: #DDE3EC;
}

.qa-gal__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.qa-gal__cell:hover img {
    transform: scale(1.06);
}

.qa-gal__count {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(14, 23, 41, .5);
    font-weight: 900;
}

.qa-gal__count b {
    display: block;
    font-size: 1.6rem;
    line-height: 1.2;
}

.qa-gal__count span {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.qa-gal__flags {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.qa-flag {
    padding: 6px 13px;
    border-radius: 999px;
    color: #fff;
    background: var(--qa-trust);
    font-size: .68rem;
    font-weight: 900;
}

.qa-flag--rent {
    background: var(--qa-orange);
}

.qa-gal__tools {
    position: absolute;
    z-index: 4;
    bottom: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
}

.qa-gtool {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: var(--qa-ink) !important;
    background: rgba(255, 255, 255, .94);
    font-size: .73rem;
    font-weight: 800;
    backdrop-filter: blur(6px);
    transition: .2s;
    cursor: pointer;
}

.qa-gtool:hover {
    color: #fff !important;
    background: var(--qa-orange);
}

.qa-gtool.is-on,
.qa-gtool.active {
    color: #fff !important;
    background: #E63757;
}

/* دکمه ی مقایسه درست کنار «نشان کردن» می نشیند؛ اگر حالت روشنش هم قرمز
   باشد از هم قابل تشخیص نیستند، پس سرمه ای برند را می گیرد */
.qa-gtool.compare-toggle.is-cmp {
    color: #fff !important;
    background: #1b2a4a;
}

/* ملک بدون عکس: کادر جایگزین گالری. نوار ابزار اینجا روی عکس شناور نیست،
   پس باید از حالت absolute در بیاید و پس‌زمینه‌ی سفیدش لبه بگیرد */
.qa-noimg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border: 1px dashed #C9D3E2;
    border-radius: var(--qa-r-lg);
    background: #F3F6FB;
}

.qa-noimg__msg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--qa-muted, #6B7A90);
    font-size: .84rem;
    font-weight: 800;
}

.qa-noimg__msg i {
    font-size: 1.15rem;
}

.qa-gal__tools--bare {
    position: static;
    flex-wrap: wrap;
}

.qa-gal__tools--bare .qa-gtool {
    border: 1px solid #DDE3EC;
    background: #fff;
}

@media (max-width: 767px) {
    .qa-noimg {
        justify-content: flex-start;
    }
}

/* فهرست بندانگشتیِ تور مجازی؛ گالری عکس دیگر نوار بندانگشتی ندارد */
.qa-page .tns-thumbnails {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.qa-page .tns-thumbnails > li {
    flex: none;
}

/* چیدمان دو ستونی */
.qa-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 26px;
    align-items: start;
    margin: 26px 0 0;
}

.qa-card {
    margin-bottom: 18px;
    padding: 26px 28px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-lg);
    background: var(--qa-surface);
    box-shadow: var(--qa-shadow);
}

.qa-cardtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 900;
}

.qa-cardtitle i {
    color: var(--qa-orange);
    font-size: 1.1rem;
}

.qa-head__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.qa-head h1 {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: -.3px;
}

.qa-head__loc {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--qa-muted);
    font-size: .83rem;
    line-height: 1.95;
}

.qa-head__loc i {
    flex: none;
    margin-top: 4px;
    color: var(--qa-orange);
}

.qa-head__loc a {
    color: var(--qa-navy);
    font-weight: 700;
}

.qa-head__loc a:hover {
    color: var(--qa-orange);
}

.qa-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 34px;
    margin: 20px 0 0;
    padding: 20px 24px;
    border-radius: var(--qa-r);
    background: linear-gradient(115deg, var(--qa-orange-soft), #fff 72%);
    border: 1px solid #FFD8C2;
}

.qa-price__label {
    margin-bottom: 5px;
    color: var(--qa-faint);
    font-size: .7rem;
    font-weight: 700;
}

.qa-price__main b {
    color: var(--qa-navy);
    font-size: clamp(1.45rem, 2.8vw, 1.95rem);
    font-weight: 900;
    letter-spacing: -.6px;
}

.qa-price__sub {
    padding-inline-start: 28px;
    border-inline-start: 1px solid #FFD8C2;
}

.qa-price__sub b {
    color: var(--qa-body);
    font-size: 1.15rem;
    font-weight: 800;
}

/* ── تبدیل رهن و اجاره ───────────────────────────────────────────────────
   زیر جعبه ی قیمت می نشیند و باید از آن آرام تر باشد: زمینه سفید، خط نازک،
   و نارنجی فقط روی خودِ لغطنده. لغزنده جهت ltr دارد چون مقدارِ کمینه باید
   همیشه سمت چپ بماند؛ در غیر این صورت مرورگرها در RTL دو سرِ آن را جابجا
   می کنند و برچسب «رهن کامل» زیر سرِ اشتباه می افتد. */
.qa-conv {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r);
    background: var(--qa-surface);
}

.qa-conv__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.qa-conv__title {
    color: var(--qa-navy);
    font-size: .92rem;
    font-weight: 800;
}

.qa-conv__rate {
    color: var(--qa-muted);
    font-size: .72rem;
    font-weight: 700;
}

.qa-conv__vals {
    display: flex;
    gap: 10px;
    margin: 12px 0 4px;
}

.qa-conv__val {
    flex: 1 1 0;
    padding: 10px 12px;
    border-radius: var(--qa-r-sm);
    background: var(--qa-soft);
    text-align: center;
}

.qa-conv__val span {
    display: block;
    margin-bottom: 4px;
    color: var(--qa-faint);
    font-size: .7rem;
    font-weight: 700;
}

.qa-conv__val b {
    color: var(--qa-navy);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -.4px;
}

.qa-conv__val i {
    margin-inline-start: 4px;
    color: var(--qa-muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
}

.qa-conv__slider {
    direction: ltr;
}

.qa-conv__range {
    --p: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    background: transparent;
    accent-color: var(--qa-orange);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.qa-conv__range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--qa-orange) calc(var(--p) * 1%), var(--qa-line) 0);
}

.qa-conv__range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 3px solid var(--qa-orange);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--qa-shadow);
    -webkit-appearance: none;
    appearance: none;
}

.qa-conv__range::-moz-range-track {
    height: 6px;
    border-radius: 99px;
    background: var(--qa-line);
}

.qa-conv__range::-moz-range-progress {
    height: 6px;
    border-radius: 99px;
    background: var(--qa-orange);
}

.qa-conv__range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--qa-orange);
    border-radius: 50%;
    background: #fff;
}

.qa-conv__range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--qa-orange-soft);
}

.qa-conv__ends {
    display: flex;
    justify-content: space-between;
    color: var(--qa-faint);
    font-size: .7rem;
    font-weight: 700;
}

.qa-conv__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.qa-conv__btn {
    padding: 6px 13px;
    border: 1px solid var(--qa-line);
    border-radius: 99px;
    background: #fff;
    color: var(--qa-body);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}

.qa-conv__btn:hover {
    border-color: var(--qa-orange);
    color: var(--qa-orange);
}

.qa-conv__btn--on {
    border-color: var(--qa-orange);
    background: var(--qa-orange-soft);
    color: var(--qa-orange);
}

.qa-conv__note {
    margin: 10px 0 0;
    color: var(--qa-faint);
    font-size: .68rem;
}

.qa-keyspecs {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--qa-line);
}

.qa-keyspecs > div {
    display: flex;
    min-width: 130px;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    padding-inline: 14px;
}

.qa-keyspecs > div + div {
    border-inline-start: 1px solid var(--qa-line);
}

.qa-keyspecs i {
    display: grid;
    width: 40px;
    height: 40px;
    flex: none;
    place-items: center;
    border-radius: var(--qa-r-sm);
    color: var(--qa-orange);
    background: var(--qa-orange-soft);
    font-size: 1.05rem;
}

.qa-keyspecs b {
    display: block;
    font-size: .97rem;
    font-weight: 900;
}

.qa-keyspecs span {
    color: var(--qa-faint);
    font-size: .64rem;
    font-weight: 800;
}

.qa-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 34px;
}

.qa-kv > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--qa-line);
    font-size: .81rem;
}

.qa-kv .qa-kv__k {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--qa-muted);
    font-weight: 600;
}

.qa-kv .qa-kv__k i {
    color: var(--qa-faint);
}

.qa-kv .qa-kv__v {
    color: var(--qa-ink);
    font-weight: 800;
    text-align: end;
}

.qa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--qa-line);
    border-radius: 999px;
    color: var(--qa-body);
    background: var(--qa-surface);
    font-size: .77rem;
    font-weight: 700;
}

.qa-chip i {
    color: #22A45D;
    font-size: .82rem;
}

.qa-chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.qa-chip--link {
    background: var(--qa-page);
}

.qa-chip--link:hover {
    border-color: var(--qa-orange);
    color: var(--qa-orange);
}

/* لینک‌های مفید ستون کنار: نام تگ ها بلندند (تا ۴۰ نویسه) و اگر آزاد
   بمانند باکس چند برابر ارتفاع صفحه می شود و ستون چسبان از کار می افتد */
.qa-chips--useful {
    gap: 7px;
}

.qa-chips--useful .qa-chip {
    max-width: 100%;
    padding: 7px 13px;
    font-size: .73rem;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.qa-useful .qa-chip--more {
    display: none;
}

.qa-useful.is-open .qa-chip--more {
    display: block;
}

.qa-usefulmore {
    margin-top: 13px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--qa-orange);
    font-size: .78rem;
    font-weight: 800;
}

.qa-usefulmore__off,
.qa-useful.is-open .qa-usefulmore__on {
    display: none;
}

.qa-useful.is-open .qa-usefulmore__off {
    display: inline;
}

.qa-desc {
    margin: 0;
    color: var(--qa-body);
    font-size: .85rem;
    line-height: 2.25;
    text-align: justify;
}

/* ستون کنار */
.qa-side {
    position: sticky;
    top: 88px;
}

.qa-sidecard {
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-lg);
    background: var(--qa-surface);
    box-shadow: var(--qa-shadow);
}

.qa-agent {
    display: flex;
    align-items: center;
    gap: 13px;
}

.qa-agent img {
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: 50%;
    background: var(--qa-page);
    object-fit: cover;
}

.qa-agent__name {
    display: block;
    color: var(--qa-ink);
    font-size: .97rem;
    font-weight: 900;
}

.qa-agent__role {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: var(--qa-muted);
    font-size: .71rem;
    font-weight: 700;
}

.qa-agent__role:before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    background: #22A45D;
}

.qa-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
}

.qa-actions .qa-btn {
    min-height: 46px;
    padding: 0 10px;
    font-size: .78rem;
}

.qa-actions .qa-btn--full {
    grid-column: 1 / -1;
}

.qa-sidecard__mini {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qa-sidecard__mini i {
    display: grid;
    width: 44px;
    height: 44px;
    flex: none;
    place-items: center;
    border-radius: var(--qa-r-sm);
    color: var(--qa-orange);
    background: var(--qa-orange-soft);
    font-size: 1.05rem;
}

.qa-sidecard__mini b {
    display: block;
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.6;
}

.qa-sidecard__mini span {
    color: var(--qa-muted);
    font-size: .69rem;
}

.qa-inlinelink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
    padding: 12px 15px;
    border-radius: var(--qa-r-sm);
    color: var(--qa-navy);
    background: var(--qa-page);
    font-size: .76rem;
    font-weight: 800;
    transition: .2s;
}

.qa-inlinelink:hover {
    color: var(--qa-orange);
    background: var(--qa-orange-soft);
}

.qa-map {
    height: 250px;
    overflow: hidden;
    border-radius: var(--qa-r);
}

/* دقت نقطه روی نقشه ، فقط برای کارشناس ملک و مدیر */
.qa-map-accuracy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}
.qa-map-accuracy small {
    color: #7b8491;
    font-size: .71rem;
}
.qa-acc-marker-wrap { border: 0 !important; background: transparent !important; }
.qa-acc-marker {
    display: block;
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .35);
}

.qa-askbox textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-sm);
    color: var(--qa-ink);
    font-family: inherit;
    font-size: .8rem;
    resize: none;
}

.qa-askbox textarea:focus {
    border-color: var(--qa-orange);
    outline: 0;
}

.qa-report {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    color: var(--qa-faint);
    background: none;
    font-family: inherit;
    font-size: .73rem;
    font-weight: 700;
    cursor: pointer;
}

.qa-report:hover {
    color: #E63757;
}

.qa-mohr {
    height: 54px;
    width: auto;
}

/* منوی پایین صفحه اصلاً برای مهمان رندر نمی‌شود (footer_v2)، پس اینجا قاعده‌ای
   برای پنهان کردنش لازم نیست. */

.qa-callbar {
    position: fixed;
    z-index: 1046;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: none;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 28px rgba(16, 24, 40, .14);
    backdrop-filter: blur(12px);
}

.qa-callbar .qa-btn {
    min-height: 46px;
    flex: 1 1 0;
    padding: 0 8px;
    font-size: .78rem;
}

/* ==========================================================================
   صفحه نمایش مشاور
   --------------------------------------------------------------------------
   باند سرمه‌ای بالای صفحه با آواتار و آمار، و بدنه‌ای که با همان چیدمان
   دو ستونی صفحه نمایش ملک (qa-detail) روی باند می‌نشیند. هیچ کلاس تازه‌ای
   برای کارت ملک ساخته نشده؛ کارت عمومی (qa-ecard) همان است.
   ========================================================================== */
.qa-aghero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 92px;
    background: linear-gradient(140deg, var(--qa-trust-2) 0%, var(--qa-trust) 56%, #1D7EC9 100%);
    color: #fff;
}

/* نور نارنجی گوشه، همان تاکید رنگی بقیه باندهای سرمه‌ای سایت */
.qa-aghero:before {
    position: absolute;
    top: -140px;
    right: -90px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(240, 98, 16, .34), rgba(240, 98, 16, 0) 68%);
    pointer-events: none;
}

.qa-aghero > .container {
    position: relative;
    z-index: 1;
}

/* مسیر صفحه روی زمینه تیره خوانده شود */
.qa-aghero .qa-crumb {
    margin-bottom: 26px;
    padding-top: 0;
    color: rgba(255, 255, 255, .6);
}

.qa-aghero .qa-crumb a {
    color: rgba(255, 255, 255, .6);
}

.qa-aghero .qa-crumb a:hover {
    color: var(--qa-orange-2);
}

.qa-aghero .qa-crumb li + li:before {
    color: rgba(255, 255, 255, .35);
}

.qa-aghero .qa-crumb li[aria-current] {
    color: #fff;
}

.qa-aghero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px 30px;
}

.qa-aghero__ava {
    position: relative;
    flex: none;
    padding-bottom: 14px;
}

.qa-aghero__ava img {
    width: 132px;
    height: 132px;
    border: 4px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: var(--qa-navy-3);
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(6, 11, 22, .45);
}

/* نشان زیر آواتار: left فیزیکی است و در چیدمان راست‌به‌چپ هم وسط می‌ماند */
.qa-aghero__ava span {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    color: #fff;
    background: var(--qa-orange);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 8px 20px rgba(240, 98, 16, .34);
}

.qa-aghero__id {
    min-width: 0;
    flex: 1 1 340px;
}

.qa-aghero__id h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -.4px;
}

.qa-agtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.qa-agtag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #E7ECF5;
    background: rgba(255, 255, 255, .08);
    font-size: .75rem;
    font-weight: 700;
}

.qa-agtag i {
    color: var(--qa-orange-2);
    font-size: .85rem;
}

.qa-aghero__bio {
    max-width: 660px;
    margin: 0;
    color: #C7D0DF;
    font-size: .83rem;
    line-height: 2.1;
}

.qa-aghero__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.qa-agstats {
    display: grid;
    margin-top: 36px;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qa-agstats > div {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--qa-r);
    background: rgba(255, 255, 255, .06);
    text-align: center;
}

.qa-agstats b {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.5;
}

.qa-agstats span {
    color: #A9B4C7;
    font-size: .72rem;
    font-weight: 700;
}

/* بدنه کمی روی باند می‌نشیند تا صفحه دو تکه دیده نشود */
.qa-agbody {
    position: relative;
    z-index: 2;
    margin-top: -44px;
}

.qa-agbody .qa-detail {
    margin-top: 0;
}

/* چیپ‌های فروش/اجاره داخل کارت، برخلاف صفحه اصلی وسط‌چین نیستند */
.qa-chipbar--start {
    justify-content: flex-start;
}

/* ==========================================================================
   ابزارهای مدیریتی روی صفحه‌های عمومی
   --------------------------------------------------------------------------
   کارشناس و مدیر همان صفحه‌ی عمومی را می‌بینند، فقط چند جعبه‌ی مدیریتی به آن
   اضافه می‌شود. استایل این جعبه‌ها اینجاست، نه در admin14.css؛ چون آن فایل
   استایل پنل است و نباید صفحه‌ی عمومی را جابه‌جا کند.
   ========================================================================== */

/* admin14.css برای هر کاربرِ واردشده لود می‌شود و در آنجا
   `.container { max-width: 98% }` تعریف شده است. نتیجه این بود که صفحه‌ی ملک
   فقط برای کارشناس/مدیر تمام‌عرض می‌شد و چیدمانِ ستون‌ها بهم می‌ریخت. صفحه‌های
   عمومی همان عرض ثابت بوت‌استرپ را نگه می‌دارند. */
@media (min-width: 1400px) {
    .qa-page .container {
        max-width: 1320px;
    }
}

/* ── نوار وضعیت ملک (تغییر وضعیت + همکار بودن) ─────────────────────────── */
.admin-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r);
    background: var(--qa-surface);
    box-shadow: var(--qa-shadow);
}

.admin-status-bar__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--qa-muted);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-status-bar__label i {
    color: var(--qa-orange);
}

.admin-status-bar select.form-select {
    width: auto;
    min-width: 190px;
    flex: 1 1 190px;
    height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-sm);
    color: var(--qa-ink);
    font-size: .84rem;
    font-weight: 700;
}

.admin-status-bar .btn {
    height: 42px;
    flex: none;
    padding: 0 18px;
    border-radius: var(--qa-r-sm);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

/* کلید «همکار است؟»: قبلاً داخل یک .form-control گذاشته شده بود و شبیه یک
   فیلد ورودیِ خراب دیده می‌شد */
.admin-status-bar__switch {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    flex: none;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-r-sm);
    background: #F8F9FC;
    cursor: pointer;
}

.admin-status-bar__switch span {
    color: var(--qa-body);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-status-bar__switch .form-check-input {
    width: 38px;
    height: 20px;
    flex: none;
    margin: 0;
    cursor: pointer;
}

.admin-status-bar__switch .form-check-input:checked {
    border-color: var(--qa-orange);
    background-color: var(--qa-orange);
}

.admin-status-bar__hint {
    flex: 1 1 100%;
    margin: 0;
    color: var(--qa-faint);
    font-size: .74rem;
}

/* ── کارت عملکردها ─────────────────────────────────────────────────────── */
.estate-operation-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.estate-operation-section__head .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--qa-r-sm);
    font-size: .8rem;
    font-weight: 800;
}

/* پارشالِ عملکردها با ایجکس می‌آید و خودش یک .estate-operation-list دیگر
   داخل همین ظرف می‌سازد؛ margin دوباره‌ی آن حذف می‌شود تا فاصله‌ها یکسان بماند */
.estate-operation-section .estate-operation-list .estate-operation-list {
    margin-top: 0;
}

/* آیتم‌ها سفیدند و کارت هم سفید است؛ بدون این پس‌زمینه، مرز کارت و ردیف‌ها
   روی هم می‌افتد و لبه‌ی پایین کارت دیده نمی‌شود */
.estate-operation-section .estate-operation-item {
    background: #F8F9FC;
    border-color: var(--qa-line);
    box-shadow: none;
}

/* ── کارت قرار بازدیدها ────────────────────────────────────────────────── */
.qa-visits__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-inline-start: 6px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--qa-orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}

.qa-visits__empty {
    padding: 14px;
    border: 1px dashed var(--qa-line);
    border-radius: var(--qa-r-sm);
    background: #F8F9FC;
    color: var(--qa-faint);
    font-size: .82rem;
}

.qa-visits__table {
    font-size: .82rem;
    margin: 0;
}

.qa-visits__table thead th {
    background: #F8F9FC;
    color: var(--qa-body);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    border-color: var(--qa-line);
}

.qa-visits__table tbody td {
    vertical-align: middle;
    border-color: var(--qa-line);
}

.qa-visits__table a {
    color: var(--qa-body);
    font-weight: 700;
}

/* سلکت وضعیت نباید کل ستون را بکشد؛ روی موبایل هم باید خوانا بماند */
.qa-visits__table .qa-visit-status {
    min-width: 120px;
    font-size: .78rem;
    font-weight: 700;
}

/* ==========================================================================
   واکنش‌گرایی
   ========================================================================== */
@media (max-width: 1199.98px) {
    .qa-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* چهار کارت در سه ستون یک ردیف ناقص می‌سازد؛ دو ستون همیشه پر می‌شود */
    .qa-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qa-detail {
        grid-template-columns: minmax(0, 1fr) 316px;
    }
}

@media (max-width: 991.98px) {
    .qa-grid,
    .qa-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qa-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-side {
        position: static;
    }

    .qa-gal {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-gal__main {
        height: 320px;
    }

    .qa-gal__side {
        height: auto;
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* با دو عکس فقط یک خانه کناری هست؛ نصف عرض را خالی نگذارد */
    .qa-gal--side1 .qa-gal__side {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-gal__cell {
        height: 150px;
    }

    .qa-aghero {
        padding: 96px 0 84px;
    }

    .qa-aghero__ava img {
        width: 108px;
        height: 108px;
    }
}

@media (max-width: 767.98px) {
    .qa-sechead--row {
        flex-direction: column;
        align-items: flex-start;
    }

    .qa-kv {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .qa-card {
        padding: 18px 16px;
    }

    .qa-callbar {
        display: flex;
    }

    .qa-auth .qa-callbar {
        bottom: 88px;
    }

    .qa-detail {
        padding-bottom: 78px;
    }
}

@media (max-width: 575.98px) {
    .qa-sec {
        padding-top: 44px;
    }

    /* نوار مدیریتی روی موبایل تک‌ستونه می‌شود تا سلکت و دکمه له نشوند */
    .admin-status-bar {
        padding: 12px;
    }

    .admin-status-bar select.form-select,
    .admin-status-bar .btn,
    .admin-status-bar__switch {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .admin-status-bar__switch {
        justify-content: space-between;
    }

    .qa-grid,
    .qa-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-price {
        gap: 14px;
        padding: 16px;
    }

    .qa-price__sub {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .qa-keyspecs > div {
        min-width: 0;
        flex-basis: 50%;
        padding: 8px;
    }

    .qa-keyspecs > div + div {
        border-inline-start: 0;
    }

    /* سه کاشی آمار مشاور در عرض موبایل هم کنار هم می‌مانند، فقط جمع‌تر */
    .qa-agstats {
        margin-top: 26px;
        gap: 8px;
    }

    .qa-agstats > div {
        padding: 14px 6px;
    }

    .qa-agstats b {
        font-size: 1.2rem;
    }

    .qa-agstats span {
        font-size: .64rem;
    }

    .qa-aghero__acts .qa-btn {
        flex: 1 1 100%;
    }
}

/* ─────────────────────────────────────────────────────────────
   منوی کاربر: باز شدن فقط با کلیک

   قالب پایه در عرض دسکتاپ عمداً باز شدن با کلیک را خاموش و به‌جایش
   باز شدن با هاور را روشن می‌کند:

       .navbar-expand-lg .dropdown-menu.show        { display: none  }
       .navbar-expand-lg .dropdown:hover > .dropdown-menu { display: block }

   هدر ما هم کلاس navbar-expand-lg دارد، پس منوی کاربر گرفتار همین رفتار
   می‌شد. مشکل اینجاست که جایگذاری منو در بوت‌استرپ ۵ کار Popper است و
   فقط وقتی انجام می‌شود که منو با کلیک باز شود. در حالت هاور، Popper
   اجرا نشده بود و منو سرِ جای استاتیک خودش می‌افتاد و از لبه‌ی صفحه
   بیرون می‌زد. کاربر «با کلیک درست باز می‌شود» را هم به همین دلیل
   می‌دید: برای کلیک کردن ناچار روی دکمه هاور می‌کرد و آن هاور منو را
   نمایان نگه می‌داشت، ولی این بار Popper هم جایش را درست کرده بود.

   پس هر دو قاعده باید فقط برای همین منو خنثی شوند.
   ───────────────────────────────────────────────────────────── */

/* ۱) هاور دیگر منو را باز نمی‌کند */
.qa-udrop.dropdown .dropdown-menu:not(.show) {
    display: none;
}

/* ۲) کلیک دوباره کار می‌کند (قالب display:none را تحمیل کرده بود) */
.qa-udrop.dropdown .dropdown-menu.show {
    display: block;
}

/* ۳) جای منو با CSS تعیین می‌شود.
   بوت‌استرپ ۵ برای dropdownهای داخل .navbar عمداً Popper را بی‌اثر می‌کند
   (modifier مربوط به applyStyles خاموش می‌شود) و انتظار دارد خود قالب جای
   منو را با CSS بدهد. چون آواتار در این هدر سمت چپ صفحه است و قاعده‌ی
   پیش‌فرض .dropdown-menu-end منو را از لبه‌ی راستِ دکمه به سمت چپ باز
   می‌کند، منو از کنار صفحه بیرون می‌زد. اینجا برعکسش می‌کنیم تا به داخل
   صفحه باز شود. */
.qa-udrop.dropdown {
    position: relative;
}

.qa-udrop.dropdown .dropdown-menu,
.qa-udrop.dropdown .dropdown-menu[data-bs-popper] {
    top: 100%;
    right: auto;
    left: 0;
    margin-top: 10px;
    transform: none;
}

/* انیمیشن قالب باعث پریدن جای منو می‌شد */
.qa-udrop.dropdown .dropdown-menu {
    animation: none;
}

/* ==========================================================================
   لایه‌ی رنگ و حال — فقط دسکتاپ

   نسخه‌ی موبایل خوب است و دست نمی‌خورد. در دسکتاپ صفحه از هیرو به بعد
   یکدست سفید/خاکستری می‌شد و تنها رنگ، نارنجی برند بود. اینجا با همان دو
   رنگ برند (سرمه‌ای + نارنجی) و چند ته‌رنگ کمکی، بخش‌ها از هم جدا و
   صفحه سرزنده‌تر می‌شود. هیچ رنگ جدیدی به هویت برند اضافه نشده.
   ========================================================================== */

:root {
    --qa-tint-warm: #FFF7F1;
    --qa-tint-cool: #F1F5FC;
    --qa-teal: #0E9384;
    --qa-violet: #6941C6;
}

@media (min-width: 992px) {

    /* ── بخش‌ها یک‌درمیان ته‌رنگ می‌گیرند تا مرزشان دیده شود ────────────── */
    .qa-page .qa-sec {
        position: relative;
    }

    .qa-page .qa-sec::before {
        content: '';
        position: absolute;
        z-index: 0;
        inset-block: -28px 0;
        inset-inline: calc(50% - 50vw);
        pointer-events: none;
    }

    .qa-page .qa-sec:nth-of-type(even)::before {
        background: linear-gradient(180deg, var(--qa-tint-cool), rgba(241, 245, 252, 0));
    }

    .qa-page .qa-sec:nth-of-type(odd)::before {
        background: linear-gradient(180deg, var(--qa-tint-warm), rgba(255, 247, 241, 0));
    }

    .qa-page .qa-sec > * {
        position: relative;
        z-index: 1;
    }

    /* ── تیتر بخش‌ها: خط رنگی زیر عنوان ──────────────────────────────────── */
    .qa-sechead h2 {
        position: relative;
        display: inline-block;
        padding-bottom: 14px;
    }

    .qa-sechead h2::after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 0;
        width: 64px;
        height: 4px;
        border-radius: 4px;
        transform: translateX(50%);
        background: linear-gradient(90deg, var(--qa-orange), var(--qa-navy-3));
    }

    .qa-sechead--row h2 {
        display: inline-block;
    }

    .qa-sechead--row h2::after {
        right: 0;
        transform: none;
        width: 48px;
    }

    /* eyebrow و کارت مشاور استایل خودشان را دارند (بالاتر در همین فایل) و
       دیگر اینجا بازنویسی نمی‌شوند؛ رنگ کارت مشاور از رتبه‌اش می‌آید. */

    /* ── کارت ملک: کمی جان در حالت هاور ─────────────────────────────────── */
    .qa-page .qa-card:hover,
    .qa-page .qa-estatecard:hover {
        border-color: color-mix(in srgb, var(--qa-orange) 40%, var(--qa-line));
    }

    /* ── دکمه‌ی «مشاهده همه» پررنگ‌تر ────────────────────────────────────── */
    .qa-more:hover {
        border-color: var(--qa-orange);
        background: var(--qa-orange-soft);
        color: var(--qa-orange);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qa-agentcard {
        transition: none;
    }
}

/* ==========================================================================
   نشان برند در صفحه اول
   --------------------------------------------------------------------------
   دو فایل لوگو داریم و هرکدام جای خودش را دارد:
     • watermark.png  لوگوی افقی با زمینه‌ی شفاف — روی هر زمینه‌ای می‌نشیند،
                      برای نشانِ بالای تیتر بخش‌ها، حالت‌های خالی و نوار نقشه.
     • logo.png       لوگوی مربع با زمینه‌ی سفید (JPEG) — فقط جایی که قاب زیرش
                      سفید است، وگرنه مربع سفیدش روی رنگ دیده می‌شود.
   ========================================================================== */

/* نشان بالای پنل جستجو: قاب سفیدِ لوگو به‌جای مربع گرادیانِ آیکون.
   نقطه‌ی تپنده‌ی q-hunt__mark:after سر جایش می‌ماند. */
/* لوگو افقی است، پس قاب هم به‌جای مربع ۵۶ پیکسلی یک پلاکِ کشیده می‌شود
   وگرنه نوشته‌ی لوگو داخل مربع خیلی ریز می‌افتد */
.q-hunt__mark--brand {
    width: auto;
    height: auto;
    padding: 11px 16px;
    border: 1px solid #FBD9C4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(240, 98, 16, .2);
}

.q-hunt__mark--brand img {
    display: block;
    width: auto;
    height: 34px;
}

/* لوگوی افقی؛ اندازه‌اش را هر جایی که می‌نشیند تعیین می‌کند */
.qa-brandmark {
    display: block;
    width: auto;
    height: 42px;
    margin-inline: auto;
    margin-bottom: 14px;
}

.qa-sechead .qa-brandmark {
    height: 44px;
    margin-bottom: 12px;
}

.qa-empty .qa-brandmark {
    height: 34px;
    opacity: .8;
}

.q-map__none .qa-brandmark {
    height: 32px;
    margin-bottom: 4px;
}

/* لوگو داخل نوار شمارنده‌ی روی نقشه، به‌جای آیکون گرد */
.q-map__bar {
    padding: 8px 14px;
}

.q-brandchip {
    width: auto;
    height: 20px;
    flex: none;
}

/* نشانگر بارگذاری نقشه: حلقه دور لوگو می‌چرخد.
   بالا-وسط می‌نشیند نه بالا-چپ، چون گوشه‌ی چپ جای کنترل زوم لیفلت است و
   نشانگر زیر آن گم می‌شد. */
.q-map__loading {
    top: 14px;
    left: 50%;
    width: 34px;
    height: 34px;
    margin-inline-start: -17px;
}

.q-map__loading span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    /* با margin وسط‌چین می‌شود نه با transform، چون transform جای انیمیشن چرخش است */
    margin: -13px 0 0 -13px;
}

.q-map__loading img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

/* لوگو بالای کد QR؛ اندازه‌ی 132px مخصوص خودِ کد است و نباید به لوگو برسد */
.q-qr .q-qr__brand {
    width: 86px;
    height: auto;
    margin-bottom: 2px;
}

@media (max-width: 767.98px) {
    .qa-sechead .qa-brandmark {
        height: 36px;
    }

    .q-map__bar .q-brandchip {
        height: 17px;
    }
}

@media (max-width: 575.98px) {
    .q-hunt__mark--brand {
        padding: 8px 12px;
        border-radius: 13px;
    }

    .q-hunt__mark--brand img {
        height: 26px;
    }
}