/* =========================================================================
   سایت املاک - استایل اصلی
   جهت: راست‌به‌چپ (فارسی) | سبک: مدرن، مینیمال
   ========================================================================= */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');

:root {
    /* پالت رنگی - سفید و طلایی (لوکس، اعتماد، حرفه‌ای) */
    --color-bg: #FFFFFF;
    --color-bg-alt: #FBF6E7;
    --color-surface: #FFFFFF;
    --color-text: #241F12;
    --color-text-muted: #7A6E4E;
    --color-border: #EADFB8;

    --color-brand: #B8860B;        /* طلایی تیره - برند اصلی */
    --color-brand-light: #D4A017;
    --color-accent: #C9A227;       /* طلایی روشن - اکسنت و امضای بصری */
    --color-accent-light: #E4C567;

    --color-success: #1A8F5E;
    --color-danger: #D14343;
    --color-warning: #C8841A;
    --color-info: #0EA5E9;

    --font-display: 'Vazirmatn', sans-serif;
    --font-body: 'Vazirmatn', sans-serif;
    --font-nastaliq: 'Noto Nastaliq Urdu', serif;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(19, 26, 43, 0.06);
    --shadow-md: 0 4px 16px rgba(19, 26, 43, 0.08);
    --shadow-lg: 0 12px 32px rgba(19, 26, 43, 0.12);

    --container-width: 1240px;

    --theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* -------------------------------------------------------------------------
   حالت تاریک (Dark Mode) - سرمه‌ای و طلایی، نوشته‌ها طلایی
   فعال‌سازی با افزودن data-theme="dark" روی تگ html (توسط main.js) و پیش‌فرض سایت
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
    --color-bg: #0B0F1F;
    --color-bg-alt: #10152B;
    --color-surface: #141A34;
    --color-text: #F0D998;
    --color-text-muted: #C9A860;
    --color-border: #2B3358;

    --color-brand: #D4AF37;
    --color-brand-light: #F0D876;
    --color-accent: #D4AF37;
    --color-accent-light: #F0D876;

    --color-success: #34C28C;
    --color-danger: #F0635F;
    --color-warning: #E0A845;
    --color-info: #38BDF8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    direction: rtl;
    line-height: 1.75;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    transition: var(--theme-transition);
}

img {
    max-width: 100%;
    display: block;
}

/* -------------------------------------------------------------------------
   آیکون‌های SVG (جایگزین استیکر/ایموجی در سراسر سایت)
   ------------------------------------------------------------------------- */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
    color: currentColor;
}

.icon-sm { width: 0.95em; height: 0.95em; }
.icon-lg { width: 1.6em; height: 1.6em; }
.icon-xl { width: 2.2em; height: 2.2em; }

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------------------------------------------------------
   عنصر امضا: خط افق - استفاده در هدر/فوتر/جداکننده‌ها به‌جای خط معمولی
   ------------------------------------------------------------------------- */
.horizon-line {
    height: 3px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-accent) 20%,
        var(--color-brand) 50%,
        var(--color-accent) 80%,
        transparent 100%
    );
    opacity: 0.85;
}

/* -------------------------------------------------------------------------
   هدر سایت
   ------------------------------------------------------------------------- */
.site-header {
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    max-width: var(--container-width);
    margin: 0 auto;
    gap: 24px;
}

/* چیدمان جدید: منو راست، لوگو دقیقاً وسط، اقدامات چپ */
.header-inner-centered {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-width: 0;
}

.header-inner-centered > * { min-width: 0; }

/* ستون هر بخش صریحاً پین می‌شود؛ در غیر این‌صورت وقتی main-nav در موبایل
   با display:none مخفی می‌شود، از چیدمان گرید حذف شده و لوگو/دکمه همبرگری
   به‌جای ستون خودشان به ستون‌های ۱ و ۲ (یعنی وسط) جابه‌جا می‌شوند. */
.main-nav-right { grid-column: 1; }
.brand-logo-center { grid-column: 2; }
.header-actions { grid-column: 3; }

.main-nav-right {
    justify-content: flex-start;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-brand);
    flex-shrink: 0;
}

.brand-logo-center {
    justify-self: center;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.brand-logo .logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg);
    font-size: 1.1rem;
}

/* جای خالی لوگو وقتی مدیر هنوز لوگو آپلود نکرده است */
.logo-mark-empty {
    width: 132px;
    height: 132px;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    border: 1.5px dashed var(--color-border);
}

.logo-mark-img {
    width: 132px;
    height: 132px;
    border-radius: var(--radius-md);
    object-fit: contain;
    background: transparent;
}

.brand-logo-center span {
    display: inline-block;
    font-family: var(--font-nastaliq);
    font-size: 1.5rem;
    font-weight: 600;
    /* Noto Nastaliq Urdu has unusually deep loops/descenders that a normal
       1.2-1.4 line-height does not account for. Because the text uses
       background-clip:text (gradient fill), anything painted outside the
       line-box becomes invisible - visually identical to clipping, even
       though no overflow:hidden is involved. 2.2 gives the glyphs enough
       vertical room without inflating the header. */
    line-height: 2.2;
    padding-block: 4px;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent-light) 45%, var(--color-brand) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-brand);
}

.brand-logo small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.header-actions {
    justify-self: end;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-self: start;
}

.main-nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    padding: 6px 0;
    transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--color-brand);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.25s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-brand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--color-brand);
}

.theme-toggle-icon {
    display: none;
    align-items: center;
}

/* در حالت روشن آیکون خورشید نمایش داده می‌شود (برای رفتن به تاریک) */
.theme-icon-sun { display: flex; }
.theme-icon-moon { display: none; }

[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: flex; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--color-brand);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
   دکمه‌ها
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-brand);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-brand-light);
}

.btn-accent {
    background: var(--color-accent);
    color: #fff;
}

.btn-accent:hover {
    background: var(--color-accent-light);
}

.btn-outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}

.btn-danger:hover {
    opacity: 0.88;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
}

/* -------------------------------------------------------------------------
   بخش آمار سریع سایت (جایگزین هیرو در صفحه اصلی)
   ------------------------------------------------------------------------- */
.stats-banner {
    padding: 40px 0 8px;
}

.stats-banner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    transition: var(--theme-transition), transform 0.15s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.stat-card .icon-lg {
    color: var(--color-accent);
}

.stat-card strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-brand);
}

.stat-card span {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .stats-banner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   نوار آمار داخل نویگیشن‌بار (navbar بلندتر)
   ------------------------------------------------------------------------- */
.header-stats-bar {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
}

.header-stats-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.header-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.header-stat-item .icon-sm {
    color: var(--color-accent);
}

.header-stat-item strong {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--color-brand);
    font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   نوار بنر تبلیغاتی زیر نویگیشن‌بار (اسلایدر خودکار هر ۵ ثانیه)
   ------------------------------------------------------------------------- */
.banner-strip {
    position: relative;
    width: 100%;
    /* افزایش جزئی ارتفاع نسبت به قبل (از ۵.۳:۱ به ۴.۷:۱) برای تعادل بصری
       بهتر زیر نویگیشن‌بار؛ همچنان responsive و متناسب با عرض صفحه است. */
    aspect-ratio: 1600 / 340;
    max-height: 250px;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    display: block;
}

.banner-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* تصویر (و هر متن/لوگوی داخل آن) همیشه دقیقاً وسط‌چین عمودی و افقی
       می‌ماند؛ با این کار در ارتفاع بزرگ‌تر جدید، محتوای مهم وسط تصویر
       هرگز از بالا/پایین بریده نمی‌شود (فقط در صورت عدم تطابق کامل نسبت
       تصویر، ممکن است کمی از لبه‌های چپ/راست کم شود). */
    object-position: center;
}

.banner-dots {
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.banner-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
}

.banner-dot.active {
    background: var(--color-brand-light);
}

/* =============================================================================
   هاب صفحه اصلی - سه دکمه لوزی (Diamond) «مشاوران / جست‌وجوی پیشرفته /
   دسته‌بندی‌ها» به‌جای سه کارت مستطیلی قبلی.
   هر لوزی با کلیک، پنلی دقیقاً از زیر خودش با انیمیشن Rail Slide (بدون
   Bootstrap Collapse؛ فقط max-height/opacity/transform با CSS Transition و
   کنترل کلاس از طریق Vanilla JS در main.js) باز می‌شود. فقط یک پنل در هر
   لحظه باز می‌ماند. تمام رنگ‌ها از متغیرهای Theme سایت (روشن/تاریک) خوانده
   می‌شوند - هیچ رنگ Hard Code نشده است.
   نکته: محتوای داخل هر پنل (فرم جست‌وجو، لیست مشاوران، دسته‌بندی‌ها) دقیقاً
   همان فیلدها/URLها/آی‌دی‌های قبلی پروژه است؛ فقط چیدمان و ظاهر تغییر کرده.
   ============================================================================= */
.diamond-hub {
    position: relative;
    padding: 44px 0 16px;
    overflow: hidden;
    isolation: isolate;
}

.diamond-hub-no-banner {
    padding-top: 64px;
}

.diamond-hub::before,
.diamond-hub::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.diamond-hub::before {
    width: 360px;
    height: 360px;
    top: -160px;
    inset-inline-start: 8%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-brand) 32%, transparent), transparent 72%);
}

.diamond-hub::after {
    width: 320px;
    height: 320px;
    bottom: -170px;
    inset-inline-end: 10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-info) 22%, transparent), transparent 72%);
}

.diamond-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.diamond-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -------------------------------------------------------------------------
   دکمه لوزی (Diamond) - مربع چرخانده‌شده ۴۵ درجه با محتوای برگردانده‌شده
   ------------------------------------------------------------------------- */
.diamond-trigger {
    position: relative;
    width: 136px;
    height: 136px;
    margin: 0 auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    -webkit-tap-highlight-color: transparent;
}

.diamond-shape {
    position: absolute;
    inset: 16px;
    border-radius: 24px;
    transform: rotate(45deg);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-brand) 16%, var(--color-surface)),
        var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-brand) 32%, var(--color-border));
    box-shadow: var(--shadow-md);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                background 0.4s ease;
}

.diamond-trigger:hover .diamond-shape,
.diamond-trigger:focus-visible .diamond-shape,
.diamond-trigger[aria-expanded="true"] .diamond-shape {
    transform: rotate(45deg) scale(1.08);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand) 45%, transparent),
                0 0 36px -6px color-mix(in srgb, var(--color-brand) 65%, transparent),
                var(--shadow-lg);
}

.diamond-trigger[aria-expanded="true"] .diamond-shape {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-brand) 28%, var(--color-surface)),
        var(--color-surface));
}

.diamond-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 0 18px;
}

.diamond-icon {
    display: flex;
    color: var(--color-brand);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.diamond-icon svg {
    width: 30px;
    height: 30px;
}

.diamond-trigger:hover .diamond-icon,
.diamond-trigger[aria-expanded="true"] .diamond-icon {
    transform: scale(1.12) rotate(-6deg);
}

.diamond-label {
    font-weight: 800;
    font-size: 0.86rem;
    color: var(--color-text);
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .diamond-shape,
    .diamond-icon,
    .diamond-rail { transition: none !important; }
}

/* -------------------------------------------------------------------------
   پنل کشویی (Rail Slide) - دقیقاً زیر همان لوزی باز می‌شود
   ------------------------------------------------------------------------- */
.diamond-rail {
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-18px) scale(0.97);
    transform-origin: top center;
    pointer-events: none;
    padding-top: 14px;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.diamond-rail.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.diamond-panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 24px;
}

/* مثلث اتصال‌دهنده - پنل را بصری به نوک لوزی بالای خودش متصل می‌کند */
.diamond-panel::before {
    content: '';
    position: absolute;
    top: -8px;
    inset-inline-start: 50%;
    width: 15px;
    height: 15px;
    background: var(--color-surface);
    border-inline-start: 1px solid var(--color-border);
    border-block-start: 1px solid var(--color-border);
    transform: translateX(50%) rotate(45deg);
}

.diamond-panel-head {
    margin-bottom: 18px;
    text-align: center;
}

.diamond-panel-head h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 4px;
}

.diamond-panel-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: block;
}

.diamond-empty {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 24px 0;
}

/* ستون مشاوران: لیست عمودی مدیر + مشاوران با اسکرول داخلی ظریف */
.diamond-advisors-scroll {
    max-height: 340px;
    overflow-y: auto;
    padding-inline-end: 4px;
    margin-inline-end: -4px;
}

.diamond-advisors-scroll::-webkit-scrollbar { width: 5px; }
.diamond-advisors-scroll::-webkit-scrollbar-track { background: transparent; }
.diamond-advisors-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-brand) 35%, transparent);
    border-radius: 10px;
}

.diamond-advisors-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advisor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    text-align: right;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.26s ease,
                border-color 0.26s ease,
                background 0.26s ease;
}

.advisor-row:hover {
    border-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
    box-shadow: 0 10px 22px -12px rgba(19, 26, 43, 0.28),
                0 0 0 1px color-mix(in srgb, var(--color-brand) 30%, transparent);
    transform: translateY(-2px);
}

.advisor-row-manager {
    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-alt));
    border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
}

.advisor-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
}

.advisor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advisor-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.advisor-text strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advisor-row:hover .advisor-text strong {
    color: var(--color-brand);
}

.advisor-role {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.advisor-role-manager {
    color: var(--color-brand);
    font-weight: 700;
}

.advisor-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.advisor-count {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.advisor-view {
    display: flex;
    color: var(--color-brand);
}

/* ستون جست‌وجو: فرم بدون آکاردئون جداگانه (خود لوزی نقش دکمه بازکننده را دارد) */
.diamond-col[data-diamond="search"] .search-grid,
.diamond-col[data-diamond="search"] .search-grid-row2 {
    grid-template-columns: 1fr;
    gap: 12px;
}

.diamond-col[data-diamond="search"] .search-checks {
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.diamond-col[data-diamond="search"] .search-actions .btn {
    width: 100%;
}

/* ستون دسته‌بندی‌ها: گرید فشرده‌ی دو ستونه هماهنگ با عرض باریک‌تر پنل */
.diamond-col[data-diamond="categories"] .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.diamond-col[data-diamond="categories"] .category-card {
    padding: 16px 8px;
}

.category-card .cat-count {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    /* روی موبایل/تبلت هم دقیقاً همان چیدمان افقی دسکتاپ حفظ می‌شود:
       یک خط افقی پیوسته با سه لوزی، بدون شکستن به چند خط و بدون چیده‌شدن
       عمودی. فقط اندازه‌ی لوزی‌ها به‌صورت متناسب با عرض صفحه کوچک‌تر
       می‌شود تا هر سه در یک ردیف جا شوند. */
    .diamond-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .diamond-col {
        flex: 0 1 auto;
        min-width: 0;
    }
    .diamond-trigger {
        width: clamp(70px, 12vw, 136px);
        height: clamp(70px, 12vw, 136px);
    }
    .diamond-col[data-diamond="categories"] .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .diamond-col[data-diamond="search"] .search-grid,
    .diamond-col[data-diamond="search"] .search-grid-row2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -------------------------------------------------------------------------
   نسخه موبایل ردیف لوزی‌ها - Horizontal Timeline
   (مشاوران / جست‌وجوی پیشرفته / دسته‌بندی‌ها) روی یک خط افقی با فاصله مساوی.
   فقط زیر 768px فعال است؛ دسکتاپ و تبلت (بالای 768px) دست‌نخورده می‌مانند و
   همچنان از قوانین @media (max-width: 1024px) بالا استفاده می‌کنند.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .diamond-grid {
        position: relative;
        justify-content: space-between;
        padding: 0 4px;
    }

    /* خط افقی که از پشت هر سه لوزی عبور می‌کند */
    .diamond-grid::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--color-brand) 70%, transparent) 8%,
            color-mix(in srgb, var(--color-brand) 70%, transparent) 92%,
            transparent);
        z-index: 0;
    }

    .diamond-col {
        z-index: 1;
        flex: 0 0 auto;
    }

    /* اندازه‌ی لوزی مطابق پیشنهاد (~۹۰ تا ۱۱۰ پیکسل) و مقیاس‌پذیر تا
       باریک‌ترین گوشی‌ها بدون خروج از قاب یا هم‌پوشانی */
    .diamond-trigger {
        width: clamp(84px, 26vw, 108px);
        height: clamp(84px, 26vw, 108px);
    }

    .diamond-shape {
        inset: 13px;
        border-radius: 14px;
    }

    .diamond-content {
        gap: 0;
        padding: 0 10px;
    }

    /* آیکون در چیدمان فشرده‌ی موبایل حذف می‌شود تا فضای کامل لوزی برای
       متن دو خطی (بدون به‌هم‌ریختگی) در اختیار باشد */
    .diamond-icon { display: none; }

    .diamond-label {
        font-size: clamp(0.62rem, 3vw, 0.76rem);
        line-height: 1.18;
        font-weight: 800;
    }

    .diamond-hub { padding: 32px 0 12px; }
    .diamond-hub::before,
    .diamond-hub::after { display: none; }
}

@media (max-width: 600px) {
    .diamond-col[data-diamond="categories"] .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .diamond-col[data-diamond="search"] .search-grid,
    .diamond-col[data-diamond="search"] .search-grid-row2 {
        grid-template-columns: 1fr;
    }
    .diamond-panel { padding: 18px; border-radius: 16px; }
}

/* -------------------------------------------------------------------------
   جست‌وجوی پیشرفته - نوار کلیک‌پذیر کشویی (Accordion)
   (این استایل‌ها فقط در صفحه لیست آگهی‌ها برای فیلتر موبایل استفاده می‌شوند؛
   در صفحه اصلی، خود دکمه‌ی لوزی این نقش را ایفا می‌کند - به بخش diamond-* مراجعه کنید)
   ------------------------------------------------------------------------- */
.search-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    cursor: pointer;
    padding: 32px 0 0;
    margin: 0;
    position: relative;
    z-index: 6;
    text-align: center;
    font-family: var(--font-body);
}

.search-toggle-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.search-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 12px 26px;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-brand);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.search-toggle-bar:hover .search-toggle-label {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-lg);
}

.search-toggle-chevron {
    display: flex;
    color: var(--color-text-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.search-toggle-bar[aria-expanded="true"] .search-toggle-chevron {
    transform: rotate(180deg);
}

.search-panel-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.search-panel-collapse.open {
    max-height: 900px;
}

.search-panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px;
    margin-top: 18px;
    border: 1px solid var(--color-border);
}

.search-panel-compact {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid var(--color-border);
}

.search-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--color-brand);
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.search-grid-row2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.search-checks {
    display: flex;
    gap: 24px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
}

.check-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.search-actions {
    margin-top: 22px;
    display: flex;
    gap: 12px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.form-input,
.form-select,
textarea.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-select:focus,
textarea.form-input:focus {
    outline: none;
    border-color: var(--color-brand);
    background: var(--color-surface);
}

.form-input-file {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 0.85rem;
}

select.form-select {
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   بخش‌های عمومی صفحه
   ------------------------------------------------------------------------- */
.section {
    padding: 64px 0;
}

.section-bg-alt {
    background: var(--color-bg-alt);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-text);
}

.section-head .section-eyebrow {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.82rem;
    display: block;
    margin-bottom: 6px;
}

.section-head a.see-all {
    font-weight: 600;
    color: var(--color-brand);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-brand);
    padding-bottom: 2px;
}

/* -------------------------------------------------------------------------
   دسته‌بندی‌ها (کارت‌ها در صفحه اصلی)
   ------------------------------------------------------------------------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.category-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.category-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.category-card .cat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: 1.3rem;
}

.category-card span {
    font-weight: 600;
    font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
   کارت آگهی - طراحی مدرن (الهام‌گرفته از حس‌وحال اپ‌های آگهی املاک، بدون
   کپی مستقیم از هیچ سایتی؛ رنگ‌ها و اجزا کاملاً مطابق هویت بصری همین سایت).
   نام کلاس‌ها با پیشوند pcard مشخص شده تا کاملاً مستقل و بدون تداخل با
   بخش‌های دیگر سایت باشد.
   ------------------------------------------------------------------------- */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.listing-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pcard {
    background: var(--color-surface);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(19, 26, 43, 0.04), 0 8px 20px -12px rgba(19, 26, 43, 0.14);
    display: flex;
    flex-direction: column;
    /* لود سریع‌تر: کارت‌های خارج از دید تا رسیدن اسکرول رندر نمی‌شوند */
    content-visibility: auto;
    contain-intrinsic-size: 380px;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease;
}

.pcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(19, 26, 43, 0.05), 0 22px 38px -16px rgba(19, 26, 43, 0.22),
                0 0 0 1px rgba(212, 175, 55, 0.35);
    border-color: rgba(212, 175, 55, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .pcard,
    .pcard-img { transition: none; }
}

.pcard-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-bg-alt);
    flex-shrink: 0;
}

.pcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard:hover .pcard-img {
    transform: scale(1.07);
}

/* سایه‌ی نرم پایین عکس تا بج تعداد عکس روی هر تصویری (روشن یا تیره) خوانا بماند */
.pcard-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(to top, rgba(0,0,0,0.32), rgba(0,0,0,0));
    pointer-events: none;
}

.pcard-media-top {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pcard-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}

.pcard-badge-deal {
    background: rgba(15, 19, 33, 0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}

.pcard-badge-featured {
    background: linear-gradient(120deg, var(--color-accent), var(--color-brand));
    color: #fff;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.35);
}

.pcard-badge-sold {
    background: rgba(209, 67, 67, 0.92);
    color: #fff;
}

.pcard-photos {
    position: absolute;
    z-index: 2;
    bottom: 10px;
    left: 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
}

.pcard-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* قیمت اول چیز خوانده‌شده در کارت است (مثل اپ‌های آگهی مدرن) تا کاربر
   بدون نیاز به اسکرول کردن متن، سریع بودجه‌ی ملک را تشخیص دهد. */
.pcard-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-display);
}

.pcard-price-value {
    font-weight: 800;
    font-size: 1.22rem;
    color: var(--color-brand);
    letter-spacing: -0.01em;
}

.pcard-price-unit {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.pcard-price-sub {
    flex-basis: 100%;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.pcard-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.pcard:hover .pcard-title {
    color: var(--color-brand);
}

.pcard-location {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pcard-location .icon-sm {
    color: var(--color-accent);
    flex-shrink: 0;
}

.pcard-specs {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
}

.pcard-specs span {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pcard:hover .pcard-specs span {
    border-color: rgba(212, 175, 55, 0.4);
}

.pcard-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
}

.pcard-agent {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   صفحه لیست آگهی‌ها (فرانت)
   ------------------------------------------------------------------------- */
.consultants-strip {
    margin-bottom: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.consultants-strip-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 12px;
}

.consultants-strip-head .icon-sm {
    color: var(--color-accent);
}

.consultants-clear {
    margin-right: auto;
    font-size: 0.78rem;
    color: var(--color-danger);
    font-weight: 600;
}

.consultants-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.consultant-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.15s ease;
    width: 84px;
    text-align: center;
}

.consultant-chip:hover,
.consultant-chip.active {
    border-color: var(--color-brand);
    background: var(--color-bg-alt);
}

.consultant-chip-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}

.consultant-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consultant-chip-name {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* -------------------------------------------------------------------------
   نمایش مشاوران، جست‌وجو و دسته‌بندی‌ها - اکنون در قالب یکپارچه‌ی «هاب صفحه
   اصلی» زیر بنر ادغام شده‌اند (به‌جای بخش‌های جداگانه‌ی قبلی).
   ------------------------------------------------------------------------- */
.consultants-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.consultant-profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: right;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.26s ease,
                background 0.26s ease;
}

.consultant-profile-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 10px 22px -12px rgba(19, 26, 43, 0.28), 0 0 0 1px rgba(212, 175, 55, 0.3);
    background: var(--color-bg-alt);
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .consultant-profile-card,
    .consultant-profile-avatar,
    .consultant-profile-avatar img { transition: none; }
}

.consultant-profile-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease;
}

.consultant-profile-card:hover .consultant-profile-avatar {
    transform: scale(1.07);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

.consultant-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consultant-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.consultant-profile-card strong {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.consultant-profile-card:hover strong {
    color: var(--color-brand);
}

.consultant-profile-role {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   صفحه پروفایل عمومی مدیر/مشاور (کلیک از هاب لوزی‌شکل صفحه اصلی)
   ------------------------------------------------------------------------- */
.pprofile-header {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 26px;
    margin-bottom: 32px;
}

.pprofile-avatar {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.pprofile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pprofile-info { min-width: 0; }

.pprofile-role {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 8px;
}

.pprofile-role-manager {
    color: var(--color-bg);
    background: var(--color-brand);
}

.pprofile-info h1 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 8px;
}

.pprofile-bio {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 10px;
    max-width: 640px;
}

.pprofile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.pprofile-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 600;
}

.pprofile-meta-item .icon { color: var(--color-brand); }

@media (max-width: 600px) {
    .pprofile-header {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }
    .pprofile-meta { justify-content: center; }
}

.listing-page-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}

.filter-toggle-mobile {
    display: none;
}

.filter-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    position: sticky;
    top: 96px;
}

.filter-sidebar .field-group {
    margin-bottom: 16px;
}

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.results-count {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.results-count strong {
    color: var(--color-brand);
}

.listing-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* -------------------------------------------------------------------------
   صفحه جزئیات آگهی
   ------------------------------------------------------------------------- */
.detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 36px;
    align-items: start;
}

.slider-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--color-bg-alt);
}

.slider-main img,
.slider-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-brand);
    box-shadow: var(--shadow-md);
}

.slider-nav-btn.prev { right: 16px; }
.slider-nav-btn.next { left: 16px; }

.slider-counter {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(11,23,48,0.7);
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
}

.slider-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.slider-thumbs img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.slider-thumbs img.active {
    opacity: 1;
    border-color: var(--color-brand);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0 16px;
    flex-wrap: wrap;
}

.detail-header h1 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.detail-header .listing-location {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.detail-price-box {
    text-align: left;
}

.detail-price-box .price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-brand);
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 24px 0;
}

.spec-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.spec-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-brand);
}

.spec-item span {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.detail-description {
    margin: 28px 0;
    line-height: 2;
}

.detail-description h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin-bottom: 14px;
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   ردیف کد آگهی / لاگ بازدید / دکمه اشتراک‌گذاری - صفحه جزئیات آگهی
   ------------------------------------------------------------------------- */
.detail-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
}

.detail-code-badge {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-brand);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 20px;
}

.detail-views-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.detail-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-brand);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    margin-right: auto;
    font-family: var(--font-body);
    transition: all 0.2s ease;
}

.detail-share-btn:hover {
    background: var(--color-brand);
    color: var(--color-bg);
}

.share-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 200px;
    z-index: 20;
}

.share-menu.open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background 0.15s ease;
}

.share-menu-item:hover {
    background: var(--color-bg-alt);
}

/* -------------------------------------------------------------------------
   لینک شبکه‌های اجتماعی اختصاصی هر آگهی (اینستاگرام/دیوار)
   ------------------------------------------------------------------------- */
.detail-social-links {
    margin: 8px 0 28px;
    padding: 18px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.detail-social-title {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.detail-social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    transition: all 0.2s ease;
}

.social-btn:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    transform: translateY(-2px);
}

.social-btn-icon-img {
    width: 26px;
    height: auto;
    display: block;
}

.social-btn-instagram:hover {
    border-color: #d6249f;
    color: #d6249f;
}

.social-btn-divar:hover {
    border-color: #c1272d;
}

/* دکمه‌های بازگشت / همه آگهی‌ها - انتهای صفحه جزئیات آگهی */
.detail-back-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
}

.detail-action-btn {
    min-width: 160px;
    box-shadow: var(--shadow-sm);
}

.detail-action-btn:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.detail-action-btn svg {
    transition: transform 0.2s ease;
}

.detail-action-btn:hover svg {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .detail-back-wrap {
        gap: 10px;
    }
}

/* کادر اطلاعات مشاور ثبت‌کننده آگهی - نیازمندی ۸ */
.consultant-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    position: sticky;
    top: 96px;
}

.consultant-card .card-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 14px;
    display: block;
}

.consultant-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.consultant-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-alt);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-weight: 800;
    font-size: 1.3rem;
}

.consultant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consultant-profile strong {
    display: block;
    font-size: 1rem;
}

.consultant-profile span {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.consultant-phone-box {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
    margin-bottom: 14px;
}

.consultant-phone-box .phone-number {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-brand);
    direction: ltr;
    display: block;
    margin-top: 4px;
}

/* -------------------------------------------------------------------------
   صفحه درباره ما
   ------------------------------------------------------------------------- */
.about-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.about-hero h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.about-hero p {
    color: var(--color-text-muted);
    font-size: 1.02rem;
}

.about-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}

.about-block:last-of-type {
    border-bottom: none;
}

.about-block.reverse {
    direction: ltr;
}

.about-block.reverse > * {
    direction: rtl;
}

.about-block img {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

.about-block .block-eyebrow {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 10px;
    display: block;
}

.about-block h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.about-block p {
    color: var(--color-text-muted);
    line-height: 1.9;
}

.consultants-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.consultant-mini-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
}

.consultant-mini-card .consultant-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    font-size: 1.8rem;
}

.consultant-mini-card strong {
    display: block;
    margin-bottom: 4px;
}

.consultant-mini-card .phone-number {
    font-size: 0.85rem;
    color: var(--color-brand);
    direction: ltr;
    display: block;
    margin-top: 6px;
}

/* -------------------------------------------------------------------------
   فوتر
   ------------------------------------------------------------------------- */
.site-footer {
    background: #0B1730;
    color: #B8C5DE;
    padding: 56px 0 24px;
    margin-top: 64px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 36px;
}

.footer-logo-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 10px;
}

.footer-brand-name {
    font-family: var(--font-nastaliq);
    font-size: 1.5rem;
    font-weight: 600;
    color: #F0D876;
}

.footer-col h4 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 1rem;
}

.footer-col p,
.footer-col a {
    color: #8B9DC3;
    font-size: 0.88rem;
    display: block;
    margin-bottom: 10px;
    line-height: 1.8;
}

.footer-col a:hover {
    color: var(--color-accent-light);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 0.82rem;
    color: #5C729B;
}

.footer-staff-link a {
    color: #8B9DC3;
    text-decoration: underline;
}

.footer-staff-link a:hover {
    color: var(--color-accent-light);
}

/* -------------------------------------------------------------------------
   اعتبار طراحی توسط تیم تندر استک - افکت نئونی
   ------------------------------------------------------------------------- */
.thunderstack-credit {
    margin-top: 22px;
    padding: 18px 24px;
    border-radius: var(--radius-lg);
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    text-align: center;
}

.thunderstack-logo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.55);
    flex-shrink: 0;
}

.thunderstack-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.thunderstack-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #8B9DC3;
}

.neon-text {
    color: #F7DE7A;
    font-weight: 800;
    text-shadow:
        0 0 4px rgba(247, 222, 122, 0.8),
        0 0 10px rgba(212, 175, 55, 0.7),
        0 0 20px rgba(212, 175, 55, 0.5);
    animation: neonPulse 2.4s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(247, 222, 122, 0.8),
            0 0 10px rgba(212, 175, 55, 0.7),
            0 0 20px rgba(212, 175, 55, 0.5);
    }
    50% {
        text-shadow:
            0 0 6px rgba(247, 222, 122, 1),
            0 0 16px rgba(212, 175, 55, 0.9),
            0 0 32px rgba(212, 175, 55, 0.75);
    }
}

.thunderstack-sub {
    font-size: 0.74rem;
    color: #5C729B;
}

.thunderstack-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #F7DE7A;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(212, 175, 55, 0.08);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.thunderstack-instagram:hover {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .neon-text { animation: none; }
}

@media (max-width: 700px) {
    .thunderstack-credit { flex-direction: column; text-align: center; }
}

/* -------------------------------------------------------------------------
   پنل مشاوران - استایل اختصاصی
   ------------------------------------------------------------------------- */
.panel-body {
    background: var(--color-bg-alt);
    min-height: 100vh;
    display: flex;
}

.panel-sidebar {
    width: 264px;
    background: #0B1730;
    color: #B8C5DE;
    min-height: 100vh;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.panel-brand {
    padding: 24px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.panel-brand .logo-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
}

.panel-brand strong {
    color: #fff;
    font-family: var(--font-display);
}

.panel-nav {
    padding: 16px 12px;
}

.panel-nav-section {
    font-size: 0.72rem;
    color: #5C729B;
    text-transform: uppercase;
    padding: 16px 12px 6px;
    letter-spacing: 0.04em;
}

.panel-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    color: #B8C5DE;
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 2px;
    transition: all 0.15s ease;
}

.panel-nav a:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.panel-nav a.active {
    background: var(--color-accent);
    color: #fff;
}

.panel-user-box {
    padding: 16px 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-user-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.panel-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.panel-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel-main {
    flex: 1;
    min-width: 0;
}

.panel-topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-topbar h1 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.panel-content {
    padding: 32px;
}

.panel-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.panel-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel-stat-card > .icon-sm {
    color: var(--color-accent);
    margin-bottom: 2px;
}

.panel-stat-card.accent-card > .icon-sm {
    color: #fff;
}

.panel-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    display: block;
}

.panel-stat-card .stat-value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-brand);
}

.analytics-cards {
    grid-template-columns: repeat(6, 1fr);
}

.panel-stat-card.accent-card {
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%);
    border: none;
}

.panel-stat-card.accent-card .stat-label,
.panel-stat-card.accent-card .stat-value {
    color: #fff;
}

.reset-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.reset-actions-row form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reset-by-code-form .form-input {
    width: 220px;
}

@media (max-width: 1024px) {
    .analytics-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .analytics-cards { grid-template-columns: repeat(2, 1fr); }
    .reset-by-code-form .form-input { width: 160px; }
}

/* -------------------------------------------------------------------------
   داشبورد مدیریت - نمودارها و چیدمان دو ستونه
   ------------------------------------------------------------------------- */
.dashboard-grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

.dashboard-grid-2 .panel-card {
    margin-bottom: 0;
}

.chart-wrap {
    position: relative;
    height: 260px;
}

.chart-wrap-donut {
    height: 240px;
    max-width: 320px;
    margin: 0 auto;
}

.clickable-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.clickable-table tbody tr:hover {
    background: var(--color-bg-alt);
}

@media (max-width: 900px) {
    .dashboard-grid-2 { grid-template-columns: 1fr; }
}

.growth-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 2px;
    width: fit-content;
}

.growth-chip.up { background: rgba(52, 194, 140, 0.15); color: var(--color-success); }
.growth-chip.down { background: rgba(240, 99, 95, 0.15); color: var(--color-danger); }

.dashboard-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.dashboard-filters-row .field-group {
    min-width: 180px;
}

.dashboard-filters-row label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.chart-range-switch {
    display: flex;
    gap: 4px;
    background: var(--color-bg-alt);
    border-radius: 20px;
    padding: 3px;
}

.range-btn {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 5px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.range-btn.active {
    background: var(--color-brand);
    color: var(--color-bg);
    font-weight: 700;
}

.chart-custom-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chart-custom-range span {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.form-input-sm {
    padding: 6px 10px;
    font-size: 0.8rem;
    width: auto;
}

@media (max-width: 700px) {
    .chart-custom-range { width: 100%; }
}

.best-consultant-card {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-brand);
}

.best-consultant-body {
    display: flex;
    align-items: center;
    gap: 18px;
}

@media (max-width: 600px) {
    .dashboard-filters-row { flex-direction: column; align-items: stretch; }
    .best-consultant-body { flex-direction: column; text-align: center; }
}

.panel-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.panel-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.panel-card-head h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 2px solid var(--color-border);
}

.data-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
}

.data-table tr:hover td {
    background: var(--color-bg-alt);
}

.table-thumb {
    width: 52px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
}

.badge-success { background: rgba(47, 107, 79, 0.12); color: var(--color-success); }
.badge-warning { background: rgba(181, 121, 58, 0.12); color: var(--color-warning); }
.badge-danger { background: rgba(162, 59, 59, 0.12); color: var(--color-danger); }
.badge-muted { background: var(--color-bg-alt); color: var(--color-text-muted); }

.action-icons {
    display: flex;
    gap: 8px;
}

.action-icons a,
.action-icons button {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    transition: all 0.15s ease;
}

.action-icons a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.action-icons .icon-delete:hover { border-color: var(--color-danger); color: var(--color-danger); }

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    background: var(--color-bg-alt);
    padding: 18px;
    border-radius: var(--radius-md);
    margin: 16px 0;
}

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--color-text-muted);
}

.empty-state .empty-icon {
    font-size: 2.6rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* -------------------------------------------------------------------------
   فرم‌های پنل - چیدمان عمومی
   ------------------------------------------------------------------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-grid .full-width {
    grid-column: 1 / -1;
}

.form-section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-brand);
}

.formset-row {
    display: grid;
    grid-template-columns: 1fr 100px 40px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}

.formset-row-video {
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}

.delete-checkbox-label {
    font-size: 0.78rem;
    color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   صفحه ورود
   ------------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    padding: 24px;
}

.login-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.login-box .logo-mark {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 18px;
}

.login-logo-img {
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
    margin: 0 auto 18px;
}

.login-box h1 {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.login-box p.subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin-bottom: 28px;
}

.login-box .field-group {
    margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
   پیام‌ها (messages framework)
   ------------------------------------------------------------------------- */
.messages-wrap {
    max-width: var(--container-width);
    margin: 16px auto 0;
    padding: 0 24px;
}

.alert {
    padding: 13px 18px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin-bottom: 10px;
    border: 1px solid transparent;
}

.alert-success { background: rgba(47,107,79,0.1); color: var(--color-success); border-color: rgba(47,107,79,0.25); }
.alert-danger { background: rgba(162,59,59,0.1); color: var(--color-danger); border-color: rgba(162,59,59,0.25); }
.alert-info { background: rgba(58,107,138,0.1); color: var(--color-info); border-color: rgba(58,107,138,0.25); }
.alert-warning { background: rgba(181,121,58,0.1); color: var(--color-warning); border-color: rgba(181,121,58,0.25); }

/* -------------------------------------------------------------------------
   صفحه‌بندی (Pagination)
   ------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}

.pagination a,
.pagination span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-size: 0.88rem;
    color: var(--color-text);
}

.pagination a:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.pagination .current {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

/* -------------------------------------------------------------------------
   واکنش‌گرا (Responsive)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; }
    .listing-grid { grid-template-columns: repeat(2, 1fr); }
    .listing-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .detail-layout { grid-template-columns: 1fr; }
    .about-block { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .panel-cards { grid-template-columns: repeat(2, 1fr); }
    .consultants-grid { grid-template-columns: repeat(2, 1fr); }
    .brand-logo-center .logo-mark-img,
    .brand-logo-center .logo-mark-empty { width: 92px; height: 92px; }
    .brand-logo-center span { font-size: 1.05rem; }
    .main-nav-right { gap: 10px; }
}

@media (max-width: 768px) {
    /* منوی افقی دسکتاپ در موبایل مخفی می‌شود؛ جایگزین آن کشوی
       mobile-nav-drawer است که پایین‌تر تعریف شده. */
    .main-nav { display: none; }
    .nav-toggle { display: flex; }

    /* --------------------------------------------------------------
       هدر موبایل: از گرید به فلکس تغییر می‌کند تا بتوان همبرگری را
       سمت چپ، لوگو را دقیقاً وسط (با موقعیت‌دهی مطلق) و «درباره ما»
       را سمت راست لوگو چید - بدون هیچ همپوشانی.
       -------------------------------------------------------------- */
    .header-inner-centered {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 10px 16px;
        gap: 8px;
        min-height: 64px;
    }

    /* لوگو با موقعیت مطلق دقیقاً وسط هدر قرار می‌گیرد و از جریان فلکس
       خارج می‌شود؛ به این ترتیب اندازه‌ی متفاوت دو ستون کناری هرگز باعث
       نامتقارن شدن یا همپوشانی لوگو نمی‌شود. */
    .brand-logo-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        max-width: min(55%, 200px);
        pointer-events: auto;
    }
    .brand-logo-center .logo-mark-img,
    .brand-logo-center .logo-mark-empty { width: 48px; height: 48px; }
    .brand-logo-center span {
        font-size: 0.95rem;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    /* لینک اصلی «درباره ما» (داخل header-actions) مخصوص دسکتاپ است و در
       موبایل جای خودش را به نسخه‌ی مخصوص موبایل (سمت راست لوگو) می‌دهد. */
    .header-actions .about-link-desktop,
    .header-actions .panel-link-desktop { display: none; }

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

    /* استایل واقعی این دکمه (آیکون گرد، موقعیت مطلق بالا-چپ) در
       mobile-fixes.css تعریف شده است تا مستقل از چیدمان فلکس هدر باشد. */
    .about-link-mobile:hover,
    .about-link-mobile.active {
        color: var(--color-brand);
    }
}

@media (min-width: 769px) {
    /* در دسکتاپ نسخه‌ی موبایل لینک «درباره ما» و کل کشوی موبایل هرگز دیده
       نمی‌شوند - طراحی دسکتاپ کاملاً دست‌نخورده باقی می‌ماند. */
    .about-link-mobile,
    .mobile-nav-overlay,
    .mobile-nav-drawer { display: none !important; }
}

/* -----------------------------------------------------------------------
   کشوی منوی موبایل (Dropdown از بالا به پایین)
   ----------------------------------------------------------------------- */
.about-link-mobile { display: none; }

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 22, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 240;
}

.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-drawer {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    z-index: 241;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.32s ease, opacity 0.28s ease, visibility 0.32s ease;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
}

.mobile-nav-drawer.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav-drawer-title {
    font-weight: 700;
    color: var(--color-text);
}

.mobile-nav-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.mobile-nav-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mobile-nav-card:hover,
.mobile-nav-card.active {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-drawer,
    .mobile-nav-overlay {
        transition: none;
    }
}

@media (max-width: 768px) {
    .search-grid, .search-grid-row2 { grid-template-columns: 1fr 1fr; }
    .listing-page-layout { grid-template-columns: 1fr; }

    /* فیلتر پیشرفته در موبایل به‌صورت کشویی (accordion) */
    .filter-toggle-mobile { display: flex; }
    .filter-sidebar {
        position: static;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        border: none;
        margin-top: 14px;
        transition: max-height 0.35s ease;
    }
    .filter-sidebar.open {
        max-height: 1400px;
        padding: 22px;
        border: 1px solid var(--color-border);
    }

    /* آگهی‌ها در موبایل: لیست عمودی فشرده (عکس کنار، اطلاعات کنارش) */
    .listing-grid,
    .listing-grid-3 {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .pcard {
        flex-direction: row-reverse;
        border-radius: 16px;
        min-height: 128px;
    }
    .pcard:hover {
        transform: none;
    }
    .pcard-media {
        aspect-ratio: auto;
        width: 128px;
        min-width: 128px;
        height: auto;
    }
    .pcard-media::after { display: none; }
    .pcard-media-top { top: 8px; left: 8px; right: 8px; }
    .pcard-badge { font-size: 0.62rem; padding: 3px 8px; }
    .pcard-photos { bottom: 6px; left: 6px; font-size: 0.62rem; padding: 2px 6px; }
    .pcard-body { padding: 12px 14px; gap: 6px; justify-content: space-between; }
    .pcard-price-value { font-size: 1rem; }
    .pcard-price-unit,
    .pcard-price-sub { font-size: 0.7rem; }
    .pcard-title { font-size: 0.94rem; -webkit-line-clamp: 2; }
    .pcard-location { font-size: 0.74rem; }
    .pcard-specs { font-size: 0.7rem; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
    .pcard-specs span { padding: 3px 8px; }
    .pcard-footer { padding-top: 8px; margin-top: 2px; }
    .pcard-agent { font-size: 0.72rem; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .category-card { padding: 16px 10px; }

    .form-grid { grid-template-columns: 1fr; }
    .panel-sidebar { display: none; }
    .panel-content { padding: 18px; }
    .panel-cards { grid-template-columns: 1fr; }

    .header-stats-inner { justify-content: flex-start; overflow-x: auto; gap: 22px; }
    .stats-banner-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-meta-row { flex-direction: column; align-items: flex-start; }
    .detail-share-btn { margin-right: 0; }
    .consultants-showcase-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .consultant-profile-card { padding: 10px 12px; gap: 10px; }
    .consultant-profile-avatar { width: 40px; height: 40px; min-width: 40px; font-size: 0.95rem; }

    /* -----------------------------------------------------------------
       صفحه درباره ما در موبایل (فقط موبایل - دسکتاپ دست‌نخورده می‌ماند)
       -----------------------------------------------------------------
       در دسکتاپ برای چیدمان دو ستونه آینه‌ای، بلوک .reverse با ترفند
       direction:ltr روی خودش + direction:rtl روی فرزندان جابه‌جا می‌شود.
       این ترفند در حالت تک‌ستونه موبایل لازم نیست (با تک‌ستونه شدن گرید،
       ترتیب DOM حفظ می‌شود) و همان چیزی بود که باعث می‌شد محتوا به‌جای
       راست‌چین طبیعی صفحه، نامرتب/بیرون از قاب دیده شود؛ این‌جا خنثی
       می‌شود. علاوه بر آن، بخش متنی هر بلوک داخل یک کارت مدرن (با همان
       متغیرهای رنگ/شعاع/سایه‌ی تم سایت - بدون هیچ رنگ ثابت) قرار می‌گیرد. */
    .about-block.reverse { direction: rtl; }

    .about-block {
        padding: 28px 0;
        gap: 16px;
    }

    .about-block > div:last-child {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: 20px 18px;
        text-align: right;
        direction: rtl;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .about-block .block-eyebrow {
        margin-bottom: 8px;
    }

    .about-block h2 {
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .about-block p {
        line-height: 2;
    }

    .about-hero {
        padding: 0 4px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .about-block > div:last-child { padding: 16px 14px; }
    .about-block h2 { font-size: 1.32rem; }

    .search-grid, .search-grid-row2 { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .listing-grid,
    .listing-grid-3 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pcard-media { width: 108px; min-width: 108px; }
    .pcard-body { padding: 10px 12px; }
    .pcard-specs span { gap: 3px; padding: 3px 7px; }
    .analytics-cards { grid-template-columns: 1fr 1fr; }
    .stats-banner-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .consultant-chip { width: 68px; }
    .consultant-chip-avatar { width: 42px; height: 42px; }
    .banner-strip { max-height: 160px; }
}

/* =============================================================================
   سیستم چت آنلاین - دکمه شناور + مودال‌ها + Toast
   ============================================================================= */
.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%);
    color: var(--color-bg);
    border: none;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.6);
}

.chat-fab .icon {
    width: 26px;
    height: 26px;
}

.chat-fab-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--color-bg);
}

.chat-toast {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 210;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 12px 18px;
    font-size: 0.85rem;
    color: var(--color-text);
    display: none;
    max-width: 260px;
    animation: chatToastIn 0.3s ease;
}

.chat-toast.show { display: block; }

@keyframes chatToastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 22, 0.6);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.chat-modal-overlay.open { display: flex; }

.chat-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.chat-modal h3 {
    font-family: var(--font-display);
    color: var(--color-brand);
    margin-bottom: 8px;
}

.chat-modal-sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

.chat-modal-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 10px 0 14px;
}

.chat-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.chat-link-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--color-brand);
    font-size: 0.8rem;
    margin-top: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.chat-type-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-type-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--color-bg-alt);
}

.chat-type-option:hover {
    border-color: var(--color-brand);
}

/* -----------------------------------------------------------------------
   صفحه انتخاب مشاور
   ----------------------------------------------------------------------- */
.consultant-pick-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}

.consultant-pick-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    flex-wrap: wrap;
}

.consultant-pick-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.consultant-pick-avatar img { width: 100%; height: 100%; object-fit: cover; }

.online-dot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

.online-dot.online { background: var(--color-success); }
.online-dot.offline { background: #6b7280; }

.consultant-pick-info { flex: 1; min-width: 180px; }

.consultant-pick-info strong { display: block; font-size: 1rem; }

.consultant-pick-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.consultant-pick-actions {
    display: flex;
    gap: 8px;
}

/* کارت «چت با مدیریت مجموعه» - کمی متمایز از کارت مشاوران عادی، با همان زبان طراحی سایت */
.consultant-pick-card-manager {
    border-color: var(--color-accent);
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.06), transparent 60%), var(--color-surface);
}

.consultant-pick-card-manager .consultant-pick-avatar {
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%);
}

/* -----------------------------------------------------------------------
   صفحه انتخاب آگهی
   ----------------------------------------------------------------------- */
.listing-pick-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}

.listing-pick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.listing-pick-card:hover { border-color: var(--color-brand); }

.listing-pick-card img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.listing-pick-info strong { display: block; font-size: 0.9rem; }
.listing-pick-info span { font-size: 0.76rem; color: var(--color-text-muted); }

/* -----------------------------------------------------------------------
   صفحه چت
   ----------------------------------------------------------------------- */
.chat-page {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 480px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.chat-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-header-info strong { display: block; font-size: 0.92rem; }
.chat-header-info span { font-size: 0.74rem; color: var(--color-text-muted); }

.chat-header-actions { margin-right: auto; }

.chat-listing-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8rem;
}

.chat-listing-card img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-day-separator {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin: 12px 0;
}

.chat-bubble-row {
    display: flex;
    margin-bottom: 8px;
}

.chat-bubble-row.mine { justify-content: flex-start; }
.chat-bubble-row.theirs { justify-content: flex-end; }

.chat-bubble {
    max-width: 72%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.6;
    position: relative;
}

.chat-bubble-row.mine .chat-bubble {
    background: var(--color-brand);
    color: var(--color-bg);
    border-bottom-left-radius: 4px;
}

.chat-bubble-row.theirs .chat-bubble {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-bottom-right-radius: 4px;
}

.chat-bubble-sender {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.75;
    margin-bottom: 3px;
}

.chat-bubble-reply {
    display: block;
    font-size: 0.72rem;
    opacity: 0.7;
    border-right: 2px solid currentColor;
    padding-right: 8px;
    margin-bottom: 5px;
}

.chat-bubble-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 4px;
    justify-content: flex-end;
}

.chat-bubble-img {
    max-width: 220px;
    border-radius: 10px;
    display: block;
    margin-bottom: 6px;
}

.chat-bubble-file {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
}

.chat-typing-indicator {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 0 18px 6px;
    min-height: 18px;
}

.chat-canned-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 12px;
}

.chat-canned-btn {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.76rem;
    color: var(--color-brand);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-canned-btn:hover { border-color: var(--color-brand); }

.chat-reply-preview {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    font-size: 0.78rem;
}

.chat-reply-preview.show { display: flex; }

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
}

.chat-input-row textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 10px 16px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    max-height: 100px;
}

.chat-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-send-btn {
    background: var(--color-brand);
    color: var(--color-bg);
    border: none;
}

.chat-ended-banner {
    text-align: center;
    padding: 12px;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    border-top: 1px solid var(--color-border);
}

/* رضایت مشتری */
.rating-emojis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0;
}

.rating-emoji-btn {
    flex: 1;
    background: var(--color-bg-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 4px;
    text-align: center;
    cursor: pointer;
    font-size: 1.6rem;
    transition: all 0.15s ease;
}

.rating-emoji-btn span { display: block; font-size: 0.65rem; margin-top: 4px; color: var(--color-text-muted); }
.rating-emoji-btn.selected { border-color: var(--color-brand); background: rgba(212,175,55,0.1); }

/* گفتگوهای من */
.my-conv-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }

.my-conv-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
}

.my-conv-unread {
    background: var(--color-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* وضعیت گفتگو - Badge رنگی */
.conv-status-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.conv-status-active { background: rgba(52,194,140,0.15); color: var(--color-success); }
.conv-status-waiting_consultant { background: rgba(224,168,69,0.18); color: var(--color-warning); }
.conv-status-waiting_customer { background: rgba(56,189,248,0.18); color: var(--color-info); }
.conv-status-ended { background: var(--color-bg-alt); color: var(--color-text-muted); }
.conv-status-archived { background: var(--color-bg-alt); color: var(--color-text-muted); }

.msg-status.read { color: #38BDF8; }
.msg-status.delivered { opacity: 0.9; }

@media (max-width: 700px) {
    .chat-page { height: calc(100vh - 160px); border-radius: 0; }
    .consultant-pick-card, .my-conv-card { flex-direction: column; align-items: flex-start; }
    .rating-emojis { flex-wrap: wrap; }
    .rating-emoji-btn { flex: 1 1 30%; }
}

.chat-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.chat-status-tab {
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    transition: all 0.15s ease;
}

.chat-status-tab.active,
.chat-status-tab:hover {
    background: var(--color-brand);
    color: var(--color-bg);
    border-color: var(--color-brand);
}

/* =============================================================================
   بازطراحی کامل نسخه موبایل/تبلت پنل مدیریت
   نکته مهم: تمام قوانین این بخش فقط داخل Media Query های زیر ۱۰۲۵px فعال هستند
   و هیچ تأثیری روی نسخه دسکتاپ (sidebar ثابت فعلی) ندارند.
   ============================================================================= */

/* پیش‌فرض (دسکتاپ): عناصر موبایل کاملاً مخفی */
.mobile-panel-header,
.mobile-menu-overlay,
.mobile-menu-panel {
    display: none;
}

@media (max-width: 1024px) {
    /* ---------------------------------------------------------------
       هدر موبایل: خوشه آیکون‌ها (همبرگر+پروفایل+شب/روز) گوشه راست،
       لوگو وسط - ارتفاع ثابت ۶۰px
       --------------------------------------------------------------- */
    .mobile-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0; right: 0; left: 0;
        height: 60px;
        padding: 0 14px;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
        z-index: 400;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-header-icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border);
        background: var(--color-bg-alt);
        color: var(--color-text);
        flex-shrink: 0;
    }
    .mobile-header-icon-btn .panel-user-avatar { width: 100%; height: 100%; }
    .mobile-header-icon-btn.theme-toggle { position: relative; border-radius: 50%; padding: 0; }

    .mobile-panel-header-logo .logo-mark {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--color-brand);
        color: var(--color-bg);
    }

    .mobile-header-spacer {
        width: 40px;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 12px;
        border: 1px solid var(--color-border);
        background: var(--color-bg-alt);
        color: var(--color-text);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .mobile-menu-toggle .icon { width: 22px; height: 22px; }
    .mobile-menu-toggle:active { background: var(--color-border); }

    /* ---------------------------------------------------------------
       مخفی‌کردن نسخه دسکتاپ (Sidebar ثابت + Topbar) - جایگزین با هدر/منوی موبایل
       --------------------------------------------------------------- */
    .panel-sidebar { display: none; }
    .panel-topbar { display: none; }
    .panel-main { width: 100%; }
    .panel-body { display: block; padding-top: 60px; }
    .panel-content { padding: 18px 16px 90px; }

    /* ---------------------------------------------------------------
       Overlay تیره پشت منو
       --------------------------------------------------------------- */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        top: 60px;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 450;
    }
    .mobile-menu-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------------------------------------------------------------
       پنل منو - Glassmorphism، از زیر هدر به‌صورت Slide Down باز می‌شود
       --------------------------------------------------------------- */
    .mobile-menu-panel {
        display: block;
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        background: rgba(18, 18, 18, 0.55);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
        border-radius: 20px;
        padding: 10px;
        z-index: 460;
        opacity: 0;
        transform: translateY(-14px) scale(0.98);
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(.4,0,.2,1), transform 0.32s cubic-bezier(.4,0,.2,1);
    }
    .mobile-menu-panel.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .mobile-menu-user {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 6px;
    }
    .mobile-menu-user strong { display: block; color: #fff; font-size: 0.92rem; }
    .mobile-menu-user .badge { margin-top: 4px; }

    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 6px;
    }

    .mobile-menu-nav .panel-nav-section {
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.7rem;
        font-weight: 700;
        padding: 12px 12px 4px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobile-menu-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        min-height: 44px;
        border-radius: 14px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.92rem;
        text-decoration: none;
        border-right: 3px solid transparent;
        transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;

        /* انیمیشن یکی‌یکی (Fade + Slide) هنگام باز شدن منو */
        opacity: 0;
        transform: translateY(8px);
    }
    .mobile-menu-nav a .icon-sm { width: 22px; height: 22px; flex-shrink: 0; }

    .mobile-menu-panel.open .mobile-menu-nav a {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.32s ease, transform 0.32s ease, background 0.2s ease, color 0.2s ease;
    }

    /* تأخیر پلکانی برای هر گزینه (۰، ۵۰، ۱۰۰، ۱۵۰ میلی‌ثانیه و ...) */
    .mobile-menu-nav a:nth-of-type(1)  { transition-delay: 0ms; }
    .mobile-menu-nav a:nth-of-type(2)  { transition-delay: 50ms; }
    .mobile-menu-nav a:nth-of-type(3)  { transition-delay: 100ms; }
    .mobile-menu-nav a:nth-of-type(4)  { transition-delay: 150ms; }
    .mobile-menu-nav a:nth-of-type(5)  { transition-delay: 200ms; }
    .mobile-menu-nav a:nth-of-type(6)  { transition-delay: 250ms; }
    .mobile-menu-nav a:nth-of-type(7)  { transition-delay: 300ms; }
    .mobile-menu-nav a:nth-of-type(8)  { transition-delay: 350ms; }
    .mobile-menu-nav a:nth-of-type(9)  { transition-delay: 400ms; }
    .mobile-menu-nav a:nth-of-type(10) { transition-delay: 450ms; }
    .mobile-menu-nav a:nth-of-type(11) { transition-delay: 500ms; }
    .mobile-menu-nav a:nth-of-type(12) { transition-delay: 550ms; }
    .mobile-menu-nav a:nth-of-type(13) { transition-delay: 600ms; }
    .mobile-menu-nav a:nth-of-type(14) { transition-delay: 650ms; }
    .mobile-menu-nav a:nth-of-type(15) { transition-delay: 700ms; }

    .mobile-menu-nav a:hover,
    .mobile-menu-nav a:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-menu-nav a.active {
        background: rgba(212, 175, 55, 0.18);
        color: #F7DE7A;
        border-right-color: var(--color-brand, #D4AF37);
    }

    body.mobile-menu-locked {
        overflow: hidden;
    }

    /* ---------------------------------------------------------------
       کارت‌های آماری - یک کارت در هر ردیف
       --------------------------------------------------------------- */
    .panel-cards,
    .analytics-cards {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .dashboard-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .chart-wrap { height: 220px; }
    .chart-wrap-donut { height: 200px; max-width: 260px; }

    /* ---------------------------------------------------------------
       جدول‌ها → کارت (بدون اسکرول افقی)
       --------------------------------------------------------------- */
    .panel-content .data-table,
    .panel-content .data-table thead,
    .panel-content .data-table tbody,
    .panel-content .data-table th,
    .panel-content .data-table td,
    .panel-content .data-table tr {
        display: block;
        width: 100%;
    }
    .panel-content .data-table thead { display: none; }
    .panel-content .data-table tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        padding: 12px;
    }
    .panel-content .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 8px 4px;
        border: none;
        text-align: left;
        font-size: 0.85rem;
    }
    .panel-content .data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--color-text-muted);
        font-size: 0.76rem;
        flex-shrink: 0;
    }
    .panel-content .data-table img.table-thumb {
        width: 44px; height: 44px;
    }

    /* ---------------------------------------------------------------
       فرم‌ها و دکمه‌ها - عرض کامل، حداقل ارتفاع لمسی مناسب
       --------------------------------------------------------------- */
    .panel-body .form-input,
    .panel-body .form-select,
    .panel-body textarea.form-input,
    .panel-body .form-grid {
        width: 100%;
    }
    .panel-body .form-grid { grid-template-columns: 1fr; }

    .panel-body .btn {
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .panel-body .icon-sm { width: 20px; height: 20px; }

    .panel-card { padding: 16px; }
    .panel-card-head { flex-direction: column; align-items: flex-start; gap: 10px; }

    .chat-status-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .chat-status-tab { white-space: nowrap; }
}

/* رفاینمنت اضافه برای گوشی‌های خیلی کوچک (۳۲۰ تا ۴۳۰ پیکسل) */
@media (max-width: 480px) {
    .panel-content { padding: 14px 12px 90px; }
    .best-consultant-body { flex-direction: column; text-align: center; }
    .reset-actions-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-panel,
    .mobile-menu-nav a,
    .mobile-menu-overlay {
        transition: none !important;
    }
}