/* ==========================================================================
   صفحهٔ نمایش ملک (property.php) — استایل اختصاصی صفحه
   --------------------------------------------------------------------------
   این قواعد قبلاً به‌صورت دو بلوک <style> درون‌خطی داخل property.php بودند.
   به این فایل منتقل شدند تا:
     • کش شوند و در هر بازدید دوباره دانلود نشوند،
     • CSP بتواند از 'unsafe-inline' برای style-src فاصله بگیرد،
     • بازبینی و پیش‌نمایش صفحه بدون دیتابیس ممکن شود.
   این فایل «بعد از» style.css و responsive.css بارگذاری می‌شود.

   ⚠ نکتهٔ مهم برای نگهداری:
   چیدمان موبایل این صفحه از قبل و به‌طور کامل در assets/css/responsive.css
   پیاده شده است (گالری تمام‌عرض، ترتیب کارت‌ها با display:contents، اندازهٔ
   تامبیل‌ها، ارتفاع تصویر اصلی، نوار چسبان و ...). پس در این فایل عمداً هیچ
   قاعدهٔ «چیدمانی» تکراری نوشته نشده تا دو منبع حقیقتِ متضاد نسازیم؛ فقط
   چیزهایی می‌آید که قبلاً وجود نداشتند.
   ========================================================================== */

/* ==========================================================================
   ۱) چیدمان و سرصفحه
   ========================================================================== */
.pd-wrap { padding-bottom:3rem; }
.pd-crumb { font-size:.85rem; color:#64748b; margin:1.2rem 0 .6rem; }
.pd-crumb a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.pd-title { font-family:'Lalezar','Vazirmatn',sans-serif; font-weight:400; font-size:clamp(1.7rem,3.5vw,2.4rem); margin:0 0 .4rem; color:var(--ink); }
.pd-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; margin:0; }
.pd-title-row .pd-title { flex:1; min-width:0; }
.pd-sub { display:flex; flex-wrap:wrap; gap:1rem; color:#64748b; font-size:.85rem; margin-bottom:1.4rem; }
.pd-sub span { display:inline-flex; align-items:center; gap:.35rem; }
.pd-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.5rem; align-items:start; }

/* ==========================================================================
   ۲) گالری تصاویر
   ========================================================================== */
.pd-gallery { background:#fff; border:1px solid rgba(148,163,184,.2); border-radius:20px; overflow:hidden; box-shadow:0 12px 30px rgba(15,23,42,.05); }
.pd-main { position:relative; }
.pd-main-img { width:100%; height:420px; object-fit:cover; display:block; background:#eef1f6; cursor:zoom-in; }
.pd-main-video { width:100%; height:420px; background:#0b1120; display:grid; place-items:center; }
.pd-main-video video { width:100%; height:100%; object-fit:contain; }
.pd-zoom-btn { position:absolute; bottom:.9rem; left:.9rem; border:0; border-radius:999px; padding:.5rem 1rem; background:rgba(15,23,42,.55); color:#fff; font:inherit; font-size:.8rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.watchlist-btn { position:absolute; top:.8rem; left:.8rem; z-index:5; width:42px; height:42px; border-radius:50%; border:0; background:rgba(15,23,42,.55); color:#fff; font-size:1rem; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:all .2s ease; text-decoration:none; box-shadow:0 6px 16px rgba(15,23,42,.25); }
.watchlist-btn:hover { transform:translateY(-2px) scale(1.05); background:rgba(15,23,42,.7); }
.watchlist-btn.active { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 8px 20px rgba(91,69,232,.4); }
.pd-strip { display:flex; gap:.6rem; padding:.8rem; overflow-x:auto; scroll-behavior:smooth; }
.pd-strip::-webkit-scrollbar { height:8px; }
.pd-strip::-webkit-scrollbar-thumb { background:#d3d8e2; border-radius:99px; }
.pd-tile { flex:0 0 auto; width:104px; height:78px; border-radius:12px; overflow:hidden; cursor:pointer; border:2px solid transparent; padding:0; background:#eef1f6; position:relative; transition:border-color .2s ease, transform .2s ease; }
.pd-tile:hover { transform:translateY(-2px); }
.pd-tile.active { border-color:var(--brand); }
.pd-tile img { width:100%; height:100%; object-fit:cover; }
.pd-tile .tile-video { width:100%; height:100%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#1e293b,#0f172a); }
.pd-tile .tile-video i { font-size:1.4rem; }
.pd-tile .tile-video small { position:absolute; bottom:4px; right:0; left:0; text-align:center; font-size:.62rem; }
/* جای‌نگهدار تصویر خراب گالری — به‌جای آیکن شکستهٔ مرورگر */
.pd-main-img.pd-img-broken { display:grid !important; place-items:center; background:var(--tm-input, #eef1f6); }
/* همان جانگهدار برای تامبیل‌های نوار تصاویر. قبلاً هر تامبیل با تصویر
   خراب، آیکن شکستهٔ مرورگر را وسط یک کادر تیره نشان می‌داد و نوار تصاویر
   به‌هم‌ریخته به نظر می‌رسید. کلاس با شنوندهٔ error در PDGallery اضافه می‌شود. */
.pd-tile.pd-tile-broken { background:var(--tm-input, #eef1f6); }
.pd-tile.pd-tile-broken::after {
    content:''; position:absolute; inset:0; margin:auto; width:1.6rem; height:1.6rem;
    opacity:.5;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2394a3b8' d='M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* آیکون «تصویر» به‌صورت SVG درون‌خطی (data URI): با حذف FontAwesome از CDN،
   گلیف فونتی \\f1c5 دیگر وجود ندارد و باید همین‌جا تأمین شود. */
.pd-main-img.pd-img-broken::after { content:''; width:4rem; height:4rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c3cad6' d='M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ==========================================================================
   ۳) جعبهٔ نور (lightbox)
   ========================================================================== */
.pd-lbox { display:none; position:fixed; inset:0; background:rgba(8,12,24,.92); z-index:300; align-items:center; justify-content:center; }
.pd-lbox.open { display:flex; }
.pd-lbox-stage { width:min(960px,94vw); position:relative; }
.pd-lbox-media { width:100%; max-height:82vh; display:flex; align-items:center; justify-content:center; }
.pd-lbox-media img { max-width:100%; max-height:82vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.pd-lbox-media video { max-width:100%; max-height:82vh; border-radius:14px; }
.pd-lbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:1.15rem; cursor:pointer; transition:background .2s ease; }
.pd-lbox-nav:hover { background:rgba(255,255,255,.28); }
.pd-lbox-prev { right:-58px; }
.pd-lbox-next { left:-58px; }
.pd-lbox-close { position:absolute; top:-52px; left:0; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.pd-lbox-count { color:rgba(255,255,255,.7); font-size:.85rem; text-align:center; margin-top:1rem; }
@media (max-width:1100px){ .pd-lbox-prev { right:8px; } .pd-lbox-next { left:8px; } }
/* قواعد ≤700px به property-mobile.css منتقل شد (تنها منبع حقیقت چیدمان موبایل). */

/* ==========================================================================
   ۴) کارت‌ها، توضیحات و امکانات
   ========================================================================== */
.pd-card { background:var(--tm-surface,#fff); border:1px solid var(--tm-border,rgba(148,163,184,.2)); border-radius:20px; box-shadow:0 12px 30px rgba(15,23,42,.05); padding:1.4rem 1.5rem; margin-top:1.5rem; }
.pd-card h3 { font-family:'Lalezar','Vazirmatn',sans-serif; font-weight:400; font-size:1.35rem; margin:0 0 .9rem; color:var(--ink); }
.pd-desc { color:#475569; line-height:2.1; font-size:.95rem; white-space:pre-line; margin:0; }
.pd-amen { display:flex; flex-wrap:wrap; gap:.6rem; }
.pd-amen span { border:1px solid rgba(148,163,184,.3); border-radius:999px; padding:.4rem .85rem; font-size:.82rem; color:#475569; background:#fafbff; display:inline-flex; align-items:center; gap:.4rem; }
.pd-amen i.ok { color:#0b7a43; }
.pd-amen i.no { color:#e74c3c; }
.pd-amen-empty { color:#94a3b8; font-size:.88rem; }

/* ==========================================================================
   ۵) ستون کنار: قیمت، مشخصات، مشاور، نقشه
   ========================================================================== */
.pd-aside { display:flex; flex-direction:column; gap:1.2rem; position:sticky; top:110px; }
.pd-price-box { background:#fff; border:1px solid rgba(91,69,232,.16); border-radius:20px; padding:1.4rem 1.5rem; box-shadow:0 14px 36px rgba(15,23,42,.07); position:relative; overflow:hidden; }
.pd-price-box::before { content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--brand),var(--brand-2)); }
.pd-price-box .lbl { font-size:.8rem; color:#8b5cf6; font-weight:700; display:flex; align-items:center; gap:.4rem; }
.pd-price-box .val { font-size:1.55rem; font-weight:800; margin-top:.25rem; color:var(--ink); }
.pd-price-box .val small { font-size:.85rem; color:#64748b; font-weight:500; }
.pd-install { margin-top:.85rem; display:flex; flex-direction:column; gap:.5rem; }
.pd-install .pi-row { display:flex; align-items:center; justify-content:space-between; background:#f7f5ff; border:1px solid rgba(91,69,232,.12); border-radius:12px; padding:.55rem .95rem; font-size:.9rem; color:#475569; }
.pd-install .pi-row .pi-ico { color:#8b5cf6; margin-inline-end:.4rem; }
.pd-install .pi-row b { color:var(--ink); font-size:.95rem; }
.pd-meta { list-style:none; margin:0; padding:0; }
.pd-meta li { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px dashed rgba(148,163,184,.25); font-size:.88rem; }
.pd-meta li:last-child { border-bottom:0; }
.pd-meta b { color:var(--ink); }
.pd-meta span { color:#64748b; }
#propMap { width:100%; height:250px; border-radius:14px; overflow:hidden; }
.pd-consultant { display:flex; align-items:center; gap:.9rem; }
/* بلوک «مشاور این ملک» وسط‌چین می‌شود (دسکتاپ و موبایل) — نام، سابقهٔ کار و
   امتیاز پشت سر هم و وسطِ کارت. سابقهٔ کار پس‌زمینهٔ سبز و امتیاز پس‌زمینهٔ
   طلایی می‌گیرد؛ اندازهٔ فونت هر دو دقیقاً همان اندازهٔ متن قبلی می‌ماند. */
.pd-consultant.pd-consultant--center { flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
.pd-consultant.pd-consultant--center > div { display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.pd-consultant .pc-avatar { width:60px; height:60px; border-radius:50%; object-fit:cover; background:#ede9fe; color:#6d28d9; display:grid; place-items:center; font-family:'Lalezar',sans-serif; font-size:1.4rem; }
.pd-consultant .pc-name { font-weight:800; color:var(--ink); }
.pd-consultant .pc-exp { display:inline-flex; align-items:center; gap:.35rem; background:rgba(34,197,94,.15); color:#0b7a43; font-size:.8rem; font-weight:700; border-radius:999px; padding:.2rem .7rem; }
.pd-consultant .pc-exp-rating { display:inline-flex; align-items:center; gap:.3rem; background:rgba(245,185,66,.18); color:#b45309; border-radius:999px; padding:.2rem .7rem; }
/* عنوان «مشاور این ملک» هم وسط‌چین می‌شود تا با بلوک زیرش هم‌راستا باشد */
.pd-sec-consult h3 { text-align:center; }

/* انتخاب زمان بازدید — داخل همین بلوک مشاور (قبلاً یک کارت جداگانه بود) */
.pd-visit-inline { margin-top:.9rem; display:flex; flex-direction:column; gap:.55rem; }
.pd-visit-inline .visit-hint { margin:0; }

/* ==========================================================================
   ردیف برچسبیِ مشخصات ملک — ابتدای کارت «توضیحات ملک»
   (کارت جداگانهٔ «مشخصات ملک» حذف شد و همین جا کنار توضیحات نشسته است)
   ========================================================================== */
.pd-spec-chips { list-style:none; margin:0 0 1.05rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pd-spec-chips li { display:inline-flex; align-items:center; gap:.35rem; background:var(--tm-chip,rgba(91,69,232,.07)); border:1px solid rgba(91,69,232,.14); border-radius:999px; padding:.3rem .7rem; font-size:.8rem; color:var(--tm-muted-strong,#475569); }
.pd-spec-chips li > i { color:var(--brand); font-size:.78rem; }
.pd-spec-chips .pdc-label { font-size:.72rem; color:var(--tm-muted-strong,#64748b); }
.pd-spec-chips li b { color:var(--ink); font-weight:700; }
.pd-spec-chips li b a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.pd-spec-chips .pd-spec-id { opacity:.9; }
@media (max-width:600px) {
  .pd-spec-chips { gap:.4rem; margin-bottom:.9rem; }
  .pd-spec-chips li { font-size:.74rem; padding:.26rem .6rem; }
  .pd-spec-chips .pdc-label { font-size:.68rem; }
}
.pd-request { margin-top:1rem; width:100%; border:0; border-radius:999px; padding:.7rem 1rem; font:inherit; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer; box-shadow:0 10px 22px rgba(91,69,232,.25); }
.related-title { font-family:'Lalezar','Vazirmatn',sans-serif; font-weight:400; font-size:1.7rem; margin:2.5rem 0 1.2rem; color:var(--ink); }

/* ==========================================================================
   ۶) مودال درخواست مشاوره
   ========================================================================== */
/* مودال مشاوره: ظاهر و اندازه در includes/consult_form.php تعریف شده است
   (کارت وسط‌چین با ارتفاع محدود و اسکرول داخلی، در موبایل شیت پایین‌صفحه).
   این‌جا فقط چند هم‌راستاسازی پایه گذاشته می‌شود تا با بلوک مشترک تضاد نداشته
   باشد و مودال هرگز تمام صفحه را نپوشاند. */
.consult-modal { display:none; position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.55); justify-content:center; align-items:center; overflow-y:auto; padding:1.2rem; }
.consult-card { position:relative; }
.consult-card > p { color:var(--tm-muted-strong,#64748b); font-size:.85rem; margin:0 0 1.1rem; }
.consult-submit { border:0; border-radius:999px; padding:.75rem 1.4rem; font:inherit; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer; box-shadow:0 10px 22px rgba(91,69,232,.25); }
.consult-msg { font-size:.85rem; color:#64748b; min-height:1.2em; }
.consult-msg.ok { color:#0b7a43; }
.consult-msg.err { color:#e74c3c; }

/* ==========================================================================
   ۷) عناصر شناور روی تصویر — تازه اضافه شده
   ========================================================================== */
/* شمارندهٔ تصویر (۱ / ۴) */
.pd-badge {
    position:absolute; top:.8rem; right:.8rem; z-index:5;
    background:rgba(8,12,24,.62); color:#fff;
    font-family:'Vazirmatn',sans-serif; font-size:.74rem; font-weight:700;
    padding:.28rem .6rem; border-radius:999px;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    pointer-events:none;
}
/* نقطه‌های تصویر — نشان می‌دهند چند تصویر هست و کدام‌ایم */
.pd-dots {
    position:absolute; bottom:.7rem; right:0; left:0; z-index:5;
    display:flex; gap:.3rem; justify-content:center; align-items:center;
    pointer-events:none;
}
.pd-dots i {
    width:6px; height:6px; border-radius:999px;
    background:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(8,12,24,.18);
    transition:width .2s ease, background .2s ease;
}
.pd-dots i.on { width:18px; background:#fff; }
/* «بزرگ‌نمایی» فشرده‌تر تا روی تصویر شلوغ نکند */
.pd-zoom-btn { bottom:.7rem; left:.7rem; padding:.42rem .8rem; font-size:.76rem; }

/* ==========================================================================
   ۸) نوار چسبان قیمت (موبایل) — پایه + انیمیشن پنهان/نمایان
   ========================================================================== */
/* در دسکتاپ پنهان است؛ ⚠ این قاعده باید «قبل از» media query بیاید، وگرنه
   چون بعد از آن نوشته شود، display:flex موبایل را باطل می‌کند. */
.pd-sticky-cta { display:none; }
/* جای‌گذاری نوار در موبایل (فاصله از تب‌بار و عرض) در property-mobile.css است؛
   طراحی خودِ نوار (بلاک ۹۰۰px پایین) عمداً همان طرح قبلی می‌ماند. */

@media (max-width:900px) {
    .pd-sticky-cta {
        display:flex; position:fixed; z-index:80;
        right:3%; left:3%; margin:0 auto; width:94%;
        align-items:center; justify-content:space-between; gap:.7rem;
        /* جای دقیق (bottom/عرض) در property-mobile.css تنظیم می‌شود */
        background:var(--tm-surface, #fff);
        border:1px solid var(--tm-border, rgba(148,163,184,.25)); border-radius:16px;
        padding:.5rem .55rem .5rem .9rem;
        box-shadow:0 10px 30px rgba(var(--ink-rgb, 15,23,42), .16);
        transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .22s ease;
    }
    /* کنترل با assets/js/property-sticky.js: رو به پایین پنهان می‌شود تا روی
       محتوا نباشد؛ با اسکرول به بالا و همچنین «بعد از توقف اسکرول» دوباره
       برمی‌گردد (کلاس pds-hidden برداشته می‌شود). */
    .pd-sticky-cta.pds-hidden { transform:translateY(calc(100% + 96px)); opacity:0; pointer-events:none; }
    .pd-sticky-cta .pds-price { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
    .pd-sticky-cta .pds-price small { color:var(--brand); font-size:.64rem; font-weight:700; }
    .pd-sticky-cta .pds-price b { color:var(--ink); font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pd-sticky-cta .pds-btn {
        flex-shrink:0; border:0; border-radius:999px; padding:.7rem 1.15rem; font:inherit; font-weight:700; font-size:.86rem; color:#fff;
        background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer; box-shadow:0 10px 22px rgba(91,69,232,.3);
        display:inline-flex; align-items:center; gap:.4rem; min-height:46px;
    }
    .pd-sticky-cta .pds-btn:active { transform:scale(.97); }
    /* ⚠ چیپ‌های .pd-sub و کل چیدمان موبایل این صفحه در property-mobile.css است */
}

@media (prefers-reduced-motion: reduce) {
    .pd-sticky-cta { transition:none; }
}