/* ============================================================
   مركز العقارات — أساس التصميم V2 (MA-V2-P2-P3)
   ============================================================
   ملف مستقلّ تمامًا عن styles.css: الصفحة الرئيسية V2 وحدها تربطه اليوم،
   وبقية الصفحات (العقارات، العقار، المفضّلة، الأحياء...) تبقى على
   styles.css بلا أي مساس. هذا يسمح بتحويل بصري تدريجي صفحةً صفحة بدل
   إعادة كتابة الموقع كله دفعة واحدة، ويمنع أي ارتداد بصري على الصفحات
   التي لم تُحوَّل بعد.

   الاتجاه: عقاري حديث راقٍ، خلفية بيضاء مائلة للأزرق الفاتح جدًا، طباعة
   عربية قوية (Cairo)، صور عقارات حقيقية كبيرة، ولمسات "زجاج بصري أزرق"
   شفّافة انكسارية -- لا glassmorphism عام (ضبابية بيضاء فوق كل شيء)، بل
   طبقات زجاج ملوّنة بحواف انكسار لونية خفيفة تُقرأ كعدسة لا كلوح مثلج.
   ============================================================ */

:root{
  /* ---------- عائلة الأزرق الموحَّدة ----------
     مصدر واحد لكل أزرق في V2: الأزرار، الرقائق المختارة، الأيقونات، حلقة
     التركيز، حلقة الواجهة، الروابط، حواف الزجاج، وحالات المرور. لا قيمة
     زرقاء حرفية متناثرة خارج هذه الكتلة.
     الدرجة مخفَّضة التشبّع قصدًا عن #1B4FE0 السابق: ذاك كان يُقرأ كأزرق
     "كهربائي" على مساحات واسعة، وهذه أهدأ وأقرب إلى الطابع الراقي المطلوب. */
  --blue-primary:       #2B57CE;
  --blue-primary-hover: #21449F;
  --blue-deep:          #1C3B84;
  /* سلّم اللوحة الهادئة (٢٠٢٦-٠٩-٢١، قرار صاحب المكتب): الأسطح والنصوص
     انتقلت إلى سلّم أزرق واحد متدرّج، بينما بقي --blue-primary المشبَّع
     (٦٥٪ تشبّعًا) وحده لونَ الفعل. سلّم أحادي الدرجة بلا لون فعل يجعل كل
     شيء متساويًا في جذب النظر -- أي لا شيء يجذبه، والسعر وزرّ البحث هما
     بالضبط ما يجب أن يقفز من الصفحة. */
  --blue-soft:          #9FC0E3;
  --blue-glass:         rgba(43,87,206,.13);
  --blue-border:        rgba(43,87,206,.28);
  /* RGB خام لبناء rgba() متغيّرة الشفافية من نفس اللون بالضبط -- فلا يوجد
     في الملف كله رقم لوني حرفي خارج هذه الكتلة. */
  --blue-rgb:           43,87,206;    /* = --blue-primary */
  --blue-soft-rgb:      159,192,227;  /* = --blue-soft   */
  --blue-deep-rgb:      28,59,132;    /* = --blue-deep   */
  --ink-rgb:            34,58,94;     /* = --v2-ink      */

  /* ---------- الألوان ---------- */
  /* الأرقام مقيسة على الأسطح الثلاثة: بطاقة #FFFFFF / صفحة #E6EFF9 / شريط #D0E1F2 */
  --v2-ink:        #223A5E;  /* العناوين -- ١١٫٤٤ / ٩٫٨٥ / ٨٫٥٨ */
  --v2-body:       #355982;  /* النص العادي -- ٧٫٢٣ / ٦٫٢٣ / ٥٫٤٢ (كان ٥٫٤٤ على خلفية واحدة) */
  /* V2-RELEASE-AUDIT (BLOCKER/HIGH #1، HIGH): كانت #7A8899 تعطي تباينًا
     3.45-3.61:1 على الخلفيات الفعلية (#FFFFFF/#F7FAFD) -- أقل من حدّ
     WCAG AA (4.5:1) لنص عادي. مقيس بحساب نسبة التباين الفعلية على كل
     استخدام حقيقي للمتغيّر (لا افتراضًا)، ومؤثّر بلا استثناء: فتات
     التصفّح (.v2-crumb) في 7 من 8 صفحات، وبيانات بطاقة العقار
     (.v2-card-meta) في كل بطاقة بالموقع عبر cardHTML() المشتركة. القيمة
     الجديدة #667485 (تعتيم طفيف بنفس درجة اللون) تحقّق 4.77:1 على أبيض
     و٤٫٥٥:1 على #F7FAFD -- تجاوز الحدّ بهامش على الخلفيتين الفعليتين معًا
     -- وتبقى أفتح وضوحًا من --v2-body (#58687C، 5.7:1) فلا ينهار التمايز
     البصري بين النص "الفاتر" والنص العادي. */
  /* سلّم اللوحة الهادئة (٢٠٢٦-٠٩-٠٢١): درجة اللوحة التالية (#4D79A8) تعطي
     ٤٫٢٦:١ فقط -- أي تُعيد بالضبط عطل WCAG الموصوف أعلاه بعد إصلاحه. هذه
     القيمة نقطة على نفس خطّ اللوحة بين #355982 و#4D79A8، مختارة لتمرّ على
     **أعمق** سطح يحمل نصًّا (#D0E1F2 = ٤٫٥٤:١) لا على الأفتح وحده، ومعها
     تمرّ تلقائيًا على الصفحة (٥٫٢١:١) والبطاقة (٦٫٠٥:١). تبقى أفتح من
     --v2-body بفارق ٢١ درجة RGB فلا ينهار التمايز بين النصّين. */
  --v2-faint:      #3E6590;  /* التسميات الفوقية والنص الثانوي */
  /* النصّ الإرشادي داخل الحقول (placeholder) درجة مستقلّة عن --v2-faint
     عمدًا. حين شاركا القيمة كان المثال ("مثال: حي الزهور") يُقرأ كقيمة
     مُدخَلة فعلًا فيظنّ المستخدم الحقل ممتلئًا. الفارق الآن مزدوج: اللون
     ٣٫٠٨:١ مقابل ١١٫٤٤:١ للنصّ المُدخَل، والوزن ٤٠٠ مقابل ٥٠٠. يتجاوز
     عتبة ٣:١ ولا يُستعمل أبدًا بديلًا عن <label> -- كل حقل يحمل تسميته. */
  --v2-hint:       #6797C5;
  /* أسماء V2 القديمة تبقى كأسماء مستعارة لعائلة الأزرق أعلاه، فلا تتكرّر
     قيمة لونية في مكانين ولا تنحرف إحداهما عن الأخرى لاحقًا. */
  --v2-blue:       var(--blue-primary);
  --v2-blue-deep:  var(--blue-deep);
  --v2-blue-soft:  var(--blue-soft);
  --v2-surface:    #FFFFFF;
  /* سلّم أسطح من ثلاث درجات حقيقية -- هذا هو جوهر اللوحة، لا ألوان النصّ.
     الصفحة مصبوغة فعلًا، فالبطاقة البيضاء ترتفع فوقها بفارق ٣٠ درجة RGB
     بدل ١٤ سابقًا، والشريط الغائر يفتح المدى الكلي إلى ٥٧ بدل ٢٢.
     الترتيب المنهجي مقصود: تُختار الأسطح أولًا (وهي هدف التصميم)، ثم
     تُشتقّ درجات النصّ لتمرّ على **أعمق** سطح يحمل نصًّا (#D0E1F2).
     العكس -- تثبيت النصّ ثم اشتقاق السطح -- يحبس كل الأسطح قرب الأبيض
     ويُلغي اللوحة عمليًا. كل درجة نصّ مقيسة على الأسطح الثلاثة أدناه. */
  --v2-bg:         #E6EFF9;  /* الصفحة */
  --v2-bg-2:       #D0E1F2;  /* الأشرطة الغائرة ونهايات التدرّج وإطارات الصور */
  --v2-line:       rgba(var(--blue-rgb),.24);
  --v2-line-soft:  rgba(var(--blue-rgb),.15);

  /* ---------- الطباعة ----------
     Cairo وحده لكل الواجهة العامة. الخطّان السابقان (Tajawal للعناوين +
     IBM Plex للنص) رُفضا من صاحب المكتب، ولأن كل الصفحات القديمة تستخدم
     Cairo أصلًا فإن التوحيد عليه يُغلق فجوة بصرية حقيقية بين V2 والصفحات
     التي لم تُحوَّل بعد -- لا يبقى خطّان مختلفان على موقع واحد. */
  --v2-font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v2-font-head: var(--v2-font);
  /* العنوان الرئيسي: ~64-72px على سطح المكتب، ~40-44px على الجوال */
  --v2-h1: clamp(40px, 6.2vw, 72px);
  --v2-h2: clamp(26px, 3.1vw, 40px);
  --v2-h3: clamp(18px, 1.5vw, 22px);
  --v2-lede: clamp(15px, 1.15vw, 18px);

  /* ---------- المسافات ---------- */
  --v2-gut: 22px;                 /* هامش جانبي على الجوال */
  --v2-max: 1240px;
  --v2-sec: clamp(56px, 7vw, 104px);

  /* ---------- الاستدارة والظلال ---------- */
  --v2-r-sm: 14px;
  --v2-r:    20px;
  --v2-r-lg: 28px;
  --v2-r-pill: 999px;
  --v2-shadow-sm: 0 2px 10px -4px rgba(var(--ink-rgb),.14);
  --v2-shadow:    0 18px 44px -26px rgba(var(--ink-rgb),.34);
  --v2-shadow-lg: 0 40px 80px -46px rgba(var(--ink-rgb),.46);
  --v2-shadow-blue: 0 18px 30px -16px rgba(var(--blue-rgb),.7);

  --v2-ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 760px){ :root{ --v2-gut: 40px; } }

/* ---------- الوضع الداكن: «المنارة» ----------
   لوحة صاحب المكتب (منارة في ليلة عاصفة): فحمي مائل للأزرق، أردوازي، وضوء
   فضّي -- الألوان لا الجوّ (لا غيوم ولا عتمة كئيبة). الأزرق يبقى هويةً لكنه
   فولاذي هادئ؛ وعلى الأزرار نصّ داكن لا أبيض (الأبيض على هذا الأزرق 2.9:1،
   الداكن 6.4:1). كل درجات النص مقيسة ≥ 5.3:1 على الخلفية والبطاقة.
   سكربت الرأس في كل صفحة يضع data-theme قبل أوّل رسم؛ الزر في site.js.
   الظلال والحُجُب مبنية على --ink-rgb فتصير سوداء هنا تلقائيًا. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --blue-primary:       #7B98D2;
  --blue-primary-hover: #93ADDE;
  --blue-deep:          #A9BCE3;
  --blue-soft:          #9FB2D4;
  --blue-glass:         rgba(123,152,210,.14);
  --blue-border:        rgba(123,152,210,.32);
  --blue-rgb:           123,152,210;
  --blue-soft-rgb:      176,190,214;
  --blue-deep-rgb:      169,188,227;
  --ink-rgb:            0,2,6;
  --v2-on-accent:  #0F1319;   /* نصّ فوق الأزرق الفولاذي */

  --v2-ink:        #E8ECF2;
  --v2-body:       #A4ADBA;
  --v2-faint:      #8A94A3;
  /* نفس ما كان يستعمله النصّ الإرشادي في الداكن قبل فصله عن --v2-faint --
     إبقاء لا تعديل؛ بدونه يرث الداكن درجة اللايت. */
  --v2-hint:       #8A94A3;
  --v2-surface:    #1B212B;
  --v2-bg:         #12161D;
  --v2-bg-2:       #151A22;
  --v2-line:       rgba(var(--blue-soft-rgb),.2);
  --v2-line-soft:  rgba(var(--blue-soft-rgb),.12);
  --v2-shadow-sm: 0 2px 10px -4px rgba(0,0,0,.5);
  --v2-shadow:    0 18px 44px -26px rgba(0,0,0,.8);
  --v2-shadow-lg: 0 40px 80px -46px rgba(0,0,0,.9);
  --v2-shadow-blue: 0 18px 30px -16px rgba(var(--blue-rgb),.55);
}

/* ============================================================
   الأساس
   ============================================================ */
/* الترويسة لاصقة (sticky) فوق كل شيء، فأي قفزة إلى مرساة -- رابط تخطٍّ،
   رابط داخل الصفحة، أو scrollIntoView من JS -- تضع أعلى الهدف تحتها
   فيختفي. عطل حقيقي مقيس: بعد "احسب الضريبة" على الجوال كان أوّل صفّ في
   النتيجة (مجموع الضريبة) مدفونًا 75px خلف الترويسة. الإزاحة هنا على حاوية
   التمرير نفسها فتُصلح كل المراسي في كل صفحات V2 دفعة واحدة، بلا سطر JS.
   هذا الملف لا تربطه إلا صفحات V2، فـhtml هنا تعني صفحات V2 وحدها. */
html{ scroll-padding-top: 76px; }
@media (min-width: 1000px){ html{ scroll-padding-top: 88px; } }

.v2{
  margin: 0;
  font-family: var(--v2-font);
  font-weight: 400;
  color: var(--v2-body);
  background: var(--v2-bg);
  /* لا letter-spacing على العربية إطلاقًا -- يكسر اتصال الحروف. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;         /* حارس أخير ضدّ أي تجاوز أفقي */
}
.v2 *,
.v2 *::before,
.v2 *::after{ box-sizing: border-box; }

.v2 h1, .v2 h2, .v2 h3{
  font-family: var(--v2-font-head);
  color: var(--v2-ink);
  font-weight: 800;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;        /* لفّ العنوان بسطور متقاربة الطول */
}
/* letter-spacing سالب على العربية يضرّ باتصال الحروف -- الإحكام البصري
   يأتي من line-height ووزن Cairo، لا من تضييق التباعد. */
.v2 h1{ font-size: var(--v2-h1); line-height: 1.14; }
.v2 h2{ font-size: var(--v2-h2); line-height: 1.2; }
.v2 h3{ font-size: var(--v2-h3); font-weight: 700; line-height: 1.35; }
.v2 p{ margin: 0; line-height: 1.8; }
.v2 img{ max-width: 100%; display: block; }
.v2 a{ color: inherit; text-decoration: none; }
.v2 button{ font: inherit; color: inherit; }

/* الأرقام اللاتينية داخل نصّ عربي: dir=ltr على الرقم وحده يمنع انعكاس
   فواصل الآلاف بلا قلب ترتيب السطر كله. */
.v2 [dir="ltr"]{ unicode-bidi: isolate; }

.v2-wrap{
  width: 100%;
  max-width: var(--v2-max);
  margin-inline: auto;
  padding-inline: var(--v2-gut);
}

.v2-eyebrow{
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--v2-faint);
}

/* نصّ للقارئ الشاشي وحده -- خارج الشاشة بلا إخفاء من شجرة الوصول */
.v2-sr{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* إتاحة: تركيز لوحة المفاتيح يجب أن يبقى مرئيًا دومًا على كل عنصر تفاعلي. */
.v2 :focus-visible{
  outline: 2px solid var(--v2-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.v2-skip{
  position: fixed; inset-inline-start: 50%; top: -60px; z-index: 999;
  transform: translateX(50%);
  background: var(--v2-blue); color: #fff;
  padding: 12px 22px; border-radius: 0 0 var(--v2-r-sm) var(--v2-r-sm);
  font-weight: 600;
  transition: top .2s var(--v2-ease);
}
.v2-skip:focus{ top: 0; }
/* نفس سبب HOTFIX-CTA-CONTRAST أدناه: `.v2 a{color:inherit}` (0,1,1) تغلب
   color:#fff أعلاه، فكان رابط التخطّي رماديًا فوق الأزرق (1.1:1) لحظة ظهوره. */
a.v2-skip{ color: #fff; }

/* ============================================================
   الزجاج البصري الأزرق -- اللمسة المميِّزة
   ============================================================
   ليست ضبابية بيضاء عامة: كل طبقة عدسة زرقاء شفّافة بحافة انكسار لونية
   (conic-gradient رفيع على الحدّ) وإضاءة داخلية علوية. تُستخدم بندرة --
   عنصران أو ثلاثة في الصفحة كلها -- وإلا صارت زخرفة رخيصة بدل لمسة.
   ============================================================ */
.v2-glass{
  position: relative;
  background:
    linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(233,243,255,.42) 48%, rgba(190,219,255,.30) 100%);
  border-radius: var(--v2-r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -18px 34px -26px rgba(var(--blue-rgb),.45),
    var(--v2-shadow);
}
@supports (backdrop-filter: blur(1px)){
  .v2-glass{ backdrop-filter: blur(14px) saturate(1.5); }
}
/* حافة الانكسار اللوني -- ما يجعلها تُقرأ كزجاج بصري لا كلوح مثلج. */
.v2-glass::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 210deg,
    rgba(var(--blue-soft-rgb),.0) 0deg,
    rgba(var(--blue-soft-rgb),.85) 70deg,
    rgba(255,255,255,.95) 140deg,
    rgba(var(--blue-rgb),.55) 210deg,
    rgba(var(--blue-soft-rgb),.0) 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* كُريّات الضوء الزرقاء خلف الواجهة -- عمق بلا حركة صاخبة. */
.v2-orb{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
  opacity: .55;
}
.v2-orb-a{
  inset-inline-end: -120px; top: -90px;
  width: 460px; height: 460px;
  background: radial-gradient(circle at 34% 34%, rgba(var(--blue-rgb),.42), rgba(var(--blue-soft-rgb),.14) 58%, transparent 72%);
}
.v2-orb-b{
  inset-inline-start: -160px; bottom: -180px;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 60% 40%, rgba(var(--blue-soft-rgb),.40), transparent 70%);
}

/* ============================================================
   الأزرار
   ============================================================ */
.v2-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 56px;              /* هدف لمس مريح على الجوال */
  padding-inline: 30px;
  border: 0; border-radius: var(--v2-r-pill);
  background: var(--v2-blue);
  font-weight: 700; font-size: 16px;
  box-shadow: var(--v2-shadow-blue);
  cursor: pointer;
  transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease), background .25s var(--v2-ease);
}
/* زرّا واتساب في صفحة العقار (.v2-btn#waBtn، .v2-dock a#dockWa) يحملان
   href="#" ثابتًا حتى تصل بيانات العقار الحقيقية؛ إشارة بصرية بسيطة تمنع
   إيحاء بأنهما جاهزان قبل ذلك (الحارس الفعلي في property.html JS). */
#waBtn[aria-disabled="true"], .v2-dock a[aria-disabled="true"]{
  opacity: .5; cursor: not-allowed;
}
/* HOTFIX-CTA-CONTRAST: .v2-btn هو <a> أو <button> حسب الصفحة، و`.v2 a`/
   `.v2 button` أعلى الملف (سطر 136-137) لهما خصوصية (0,1,1) -- أعلى من
   خصوصية class واحد (0,1,0) لـ`.v2-btn` وحدها. فكان `color: #fff` أعلاه
   يُكتَب لكنه **لا يُطبَّق فعليًا أبدًا**: `color: inherit` من قاعدة
   العنصر يفوز، فيرث الزرّ اللون الأساسي للصفحة (--v2-body، #58687C) فوق
   خلفية زرقاء -- تباين 1.1:1 فعليًا (مقيس عبر getComputedStyle على DOM
   حي، لا انطباعًا) بدل 6.26:1 المقصود. مؤكَّد عبر تسجيل شاشة حقيقي على
   staging: "ابدأ البحث" و"بحث" و"سجّل طلبي" و"مراسلة واتساب" جميعها
   بنص شبه معتم فوق الأزرق. الإصلاح هنا رفع الخصوصية لتعادل (0,1,1)
   فتفوز بترتيب المصدر (هذه القاعدة تأتي بعد قاعدتَي إعادة الضبط) --
   بلا !important وبلا تغيير أي مقاس أو تباعد أو منطق. */
a.v2-btn, button.v2-btn{ color: #fff; }
.v2-btn:hover{ background: var(--v2-blue-deep); transform: translateY(-2px); box-shadow: 0 22px 36px -16px rgba(var(--blue-rgb),.72); }
.v2-btn:active{ transform: translateY(0); }

.v2-btn-ghost{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 56px; padding-inline: 26px;
  border: 0; border-radius: var(--v2-r-pill);
  background: var(--v2-surface); color: var(--v2-blue);
  font-weight: 600; font-size: 16px;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow-sm);
  cursor: pointer;
  transition: box-shadow .25s var(--v2-ease), transform .25s var(--v2-ease);
}
.v2-btn-ghost:hover{ box-shadow: 0 0 0 1px rgba(var(--blue-rgb),.55), var(--v2-shadow); transform: translateY(-2px); }

.v2-link{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--v2-blue); font-weight: 600; font-size: 15px;
  min-height: 44px;
}
.v2-link svg{ width: 22px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.v2-link:hover svg{ transform: translateX(4px); }
.v2-link svg{ transition: transform .25s var(--v2-ease); }

/* ============================================================
   الترويسة
   ============================================================ */
.v2-head{
  /* أعلى من القائمة (z-index: 80) عمدًا: القائمة تغطّي الشاشة كاملة، فلو
     بقيت الترويسة تحتها لصار زرّ القائمة نفسه غير قابل للنقر وهي مفتوحة --
     ولا مخرج على الجوال عندها (لا مفتاح Escape ولا حجاب يُنقَر)، فتُحبَس
     القائمة مفتوحة ما لم ينتقل الزائر لصفحة أخرى. حشوة القائمة العلوية
     (92px) محجوزة أصلًا لهذه الترويسة، فالتصميم كان يفترض ظهورها فوقها. */
  position: sticky; top: 0; z-index: 90;
  background: rgba(247,250,254,.82);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--v2-ease), border-color .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}
@supports (backdrop-filter: blur(1px)){
  .v2-head{ backdrop-filter: blur(16px) saturate(1.4); }
}
.v2-head.stuck{
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--v2-line-soft);
  box-shadow: 0 10px 30px -24px rgba(var(--ink-rgb),.5);
}
.v2-head-in{
  display: flex; align-items: center; gap: 18px;
  min-height: 64px;          /* ترويسة مضغوطة على الجوال */
}
@media (min-width: 1000px){ .v2-head-in{ min-height: 76px; } }
.v2-brand{ display: flex; align-items: center; gap: 11px; min-height: 44px; }
.v2-brand img{ width: 36px; height: 37px; object-fit: contain; }
.v2-brand-txt{ display: flex; flex-direction: column; line-height: 1.15; }
.v2-brand-mark{ font-weight: 700; font-size: 17px; color: var(--v2-ink); }
.v2-brand-sub{ font-size: 12px; color: var(--v2-faint); }

.v2-nav{ display: none; align-items: center; gap: 4px; margin-inline-start: auto; }
.v2-nav a{
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 14px;
  border-radius: var(--v2-r-pill);
  font-size: 15px; font-weight: 500; color: var(--v2-body);
  transition: color .2s var(--v2-ease), background .2s var(--v2-ease);
}
.v2-nav a:hover{ color: var(--v2-blue); background: rgba(var(--blue-rgb),.07); }
.v2-nav a[aria-current="page"]{ color: var(--v2-ink); font-weight: 700; }

.v2-head-cta{ display: none; }
@media (min-width: 1000px){
  .v2-nav{ display: flex; }
  .v2-head-cta{
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 46px; padding-inline: 20px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-blue);
    font-size: 15px; font-weight: 700;
    box-shadow: 0 14px 24px -14px rgba(var(--blue-rgb),.7);
    transition: background .25s var(--v2-ease), transform .25s var(--v2-ease);
  }
  .v2-head-cta:hover{ background: var(--v2-blue-deep); transform: translateY(-1px); }
  /* HOTFIX-CTA-CONTRAST: نفس عطل .v2-btn أعلاه بالضبط -- عنصر <a> وحيد،
     فخصوصية class واحد لا تكفي أمام `.v2 a` (راجع التعليق فوق .v2-btn). */
  a.v2-head-cta{ color: #fff; }
}

/* زر القائمة (جوال) */
.v2-burger{
  margin-inline-start: auto;
  width: 46px; height: 46px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 0; border-radius: 13px;
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-line-soft), var(--v2-shadow-sm);
  cursor: pointer;
}
.v2-burger span{
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--v2-ink);
  transition: transform .3s var(--v2-ease), opacity .2s var(--v2-ease);
}
.v2-burger[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.v2-burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 1000px){ .v2-burger{ display: none; } }

/* زر المظهر: توأم زرّ القائمة على الجوال، ودائرة صغيرة بعد «أعلن عقارك» على
   الحاسوب. هلال في الفاتح (انتقل للداكن)، شمس في الداكن (ارجع للفاتح). */
.v2-theme{
  margin-inline-start: auto;
  width: 46px; height: 46px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 13px; padding: 0;
  /* خلفية الزرّ تتبع الأيقونة لا الصفحة (قرار صاحب المكتب ٢٠٢٦-٠٩-٢٠):
     هلال أبيض على أسود، وشمس سوداء على أبيض — ثابتان في الوضعين. الزرّ
     معكوس عن الصفحة عمدًا، وهذا ما يجعله يُلمَح فورًا بدل أن يذوب فيها. */
  box-shadow: var(--v2-shadow-sm);
  cursor: pointer;
  transition: opacity .2s var(--v2-ease);
}
/* `.v2 button{color:inherit}` (0,1,1) تغلب `.v2-theme` وحدها — نفس سبب
   HOTFIX-CTA-CONTRAST. فالخصوصية مرفوعة هنا عمدًا لا زخرفةً. */
.v2 button.v2-theme{ background: #33383D; color: #FFFFFF; }
:root[data-theme="dark"] .v2 button.v2-theme{ background: #FFFFFF; color: #23282D; }
.v2-theme:hover{ opacity: .86; }
.v2-theme + .v2-burger{ margin-inline-start: -8px; }
.v2-theme-sun{ display: none; }
[data-theme="dark"] .v2-theme-sun{ display: block; }
[data-theme="dark"] .v2-theme-moon{ display: none; }
@media (min-width: 1000px){
  .v2-theme{ margin-inline-start: -6px; width: 42px; height: 42px; border-radius: 999px; }
}

/* قائمة الجوال */
.v2-menu{
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  padding: 92px var(--v2-gut) 32px;
  background: linear-gradient(170deg, #FFFFFF 0%, var(--v2-bg-2) 100%);
  overflow-y: auto;
}
.v2-menu[hidden]{ display: none; }
.v2-menu nav{ display: flex; flex-direction: column; gap: 2px; }
.v2-menu nav a{
  display: flex; align-items: center; gap: 14px;
  min-height: 58px;
  border-bottom: 1px solid var(--v2-line-soft);
  font-size: 20px; font-weight: 600; color: var(--v2-ink);
}
.v2-menu nav a em{
  font-style: normal; font-size: 12px; font-weight: 500;
  color: var(--v2-blue-soft);
}
.v2-menu-foot{ margin-top: auto; padding-top: 28px; }
.v2-menu-foot .v2-btn{ width: 100%; }

/* ============================================================
   الواجهة (Hero)
   ============================================================ */
.v2-hero{
  position: relative;
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(30px, 4vw, 60px);
  background: linear-gradient(178deg, var(--v2-bg) 0%, var(--v2-bg-2) 100%);
  overflow: hidden;
}
.v2-hero-in{
  position: relative; z-index: 2;
  display: grid; gap: clamp(26px, 3.4vw, 54px);
  align-items: center;
}
@media (min-width: 960px){
  .v2-hero-in{ grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); }
}
/* ترتيب الجوال المقصود: ترويسة صغيرة ← العنوان ← النصّ المساند ← صورة
   العقار المهيمنة ← "ابدأ البحث". الزرّ بعد الصورة لا قبلها -- الزائر يرى
   العرض الحقيقي أولًا ثم يُدعى للبحث. display:contents يرفع أبناء كتلة
   النصّ إلى نفس سياق الترتيب بلا تكرار العناصر في HTML. */
@media (max-width: 959px){
  /* align-items: stretch صراحةً: القاعدة الأساس تضع center لتوسيط عمودي
     في شبكة سطح المكتب، وهي في عمود flex تعني توسيطًا أفقيًا يقلّص النصّ
     ويكسر المحاذاة إلى اليمين. */
  .v2-hero-in{ display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .v2-hero-text{ display: contents; }
  .v2-hero-text .v2-eyebrow{ order: 1; margin-bottom: 0; }
  .v2-hero-text h1{ order: 2; margin-bottom: 0; }
  .v2-hero-lede{ order: 3; margin-bottom: 0; max-width: none; }
  .v2-stage{ order: 4; }
  .v2-hero-acts{ order: 5; }
  .v2-hero-acts .v2-btn{ flex: 1 1 auto; }

  /* تركيب جوال مستقلّ، لا مشهد سطح مكتب مصغَّرًا: ميل أخفّ (الدوران
     الحادّ يقصّ الحواف على 390px)، مشهد أقصر فلا يبتلع الشاشة ويبقى زرّ
     البحث ظاهرًا مبكرًا، وألواح جانبية أضيق تحافظ على الإحساس بالعمق. */
  .v2-stage{ aspect-ratio: 16 / 11; perspective: 900px; }
  .v2-stage-3d{ --stage-rx: 5deg; --stage-ry: -10deg; }
  .v2-stage-card{ width: 80%; }
  .v2-ring-back{ width: 92%; --rw: 12px; }
  .v2-stage-card-ph, .v2-stage-blank{ aspect-ratio: 16 / 11; }
}
.v2-hero h1{ margin-bottom: 16px; }
.v2-hero h1 .hl{ color: var(--v2-blue); }
.v2-hero-lede{
  margin-bottom: 26px;
  font-size: var(--v2-lede);
  color: var(--v2-body);
  max-width: 34ch;
}
.v2-hero-acts{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   مشهد الواجهة ثلاثي الأبعاد
   ============================================================
   CSS transforms خالصة: لا WebGL، ولا Three.js، ولا حلقة رسم على canvas.
   العمق حقيقي (preserve-3d + translateZ) لا محاكاة بالظلال وحدها، فتتحرّك
   الطبقات فعليًا بالنسبة لبعضها مع أي ميل.
   القيم مأخوذة من نموذج التصميم المعتمَد: perspective 1400px بأصل 50% 44%،
   ميل المشهد rotateX(6deg)، وطبقات على ±64px و46px و74px.
   ============================================================ */
.v2-stage{
  position: relative;
  margin: 0;
  perspective: 1400px;
  perspective-origin: 50% 44%;
  aspect-ratio: 4 / 3;
  /* pan-y وحدها تحلّ تعارض السحب الأفقي مع تمرير الصفحة العمودي: المتصفّح
     يحتفظ بالتمرير العمودي أصلاً ويسلّمنا الحركة الأفقية، فلا حاجة إلى
     preventDefault على كل حركة إصبع (وهو ما يقتل التمرير العمودي). */
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 960px){ .v2-stage{ aspect-ratio: 5 / 4; max-height: 560px; } }

.v2-stage-3d{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* الاتجاه معكوس عن النموذج (rotateY سالبة): مشهدنا يقع يسار النصّ في
     تخطيط RTL، فيجب أن "يواجه" العنوان لا أن يستدير عنه.

     الميل مركَّب من رموز لا من قيمة واحدة: --stage-* هي وضعية الراحة (تتغيّر
     بالـhover وبمقاس الشاشة)، و--par-* هي إزاحة المؤشّر الحيّة التي يكتبها
     JS على .v2-stage فترث هنا. بلا هذا الفصل كان أيّهما يكتب في transform
     يمحو الآخر بالكامل. */
  --stage-rx: 6deg;
  --stage-ry: -17deg;
  --stage-tz: 0px;
  transform:
    rotateX(calc(var(--stage-rx) + var(--par-rx, 0deg)))
    rotateY(calc(var(--stage-ry) + var(--par-ry, 0deg)))
    translateZ(var(--stage-tz));
  transition: transform 1.1s var(--v2-ease);
}
.v2-stage:hover .v2-stage-3d{ --stage-rx: 3deg; --stage-ry: -8deg; --stage-tz: 20px; }

/* أثناء تتبّع المؤشّر فعليًا: انتقال قصير جدًا ليلحق باليد بلا تقطيع. عند
   مغادرة المؤشّر تُمسح الرموز ويعود الانتقال الطويل أعلاه فيستقرّ المشهد
   بهدوء إلى وضع الراحة. */
.v2-stage.is-tracking .v2-stage-3d{ transition: transform .13s linear; }

/* وهج خلفي ناعم -- الإضاءة التي تفصل المشهد عن الخلفية */
.v2-stage-bloom{
  position: absolute; left: 50%; top: 46%;
  width: 82%; aspect-ratio: 1;
  transform: translate3d(-50%, -50%, -120px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(var(--blue-rgb),.30), rgba(var(--blue-soft-rgb),.16) 46%, transparent 70%);
  filter: blur(34px);
  pointer-events: none;
}

/* الحلقات البصرية (أنابيب زجاج أزرق) -- الحافة الملوّنة تأتي من
   conic-gradient مقنّع، فتُقرأ كزجاج منكسر لا كدائرة مرسومة. */
.v2-ring{
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.v2-ring::before{
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  padding: var(--rw, 14px);
  background: conic-gradient(from 126deg,
    rgba(var(--blue-deep-rgb),.06) 0deg,
    rgba(var(--blue-deep-rgb),.92) 58deg,
    rgba(var(--blue-rgb),.85) 118deg,
    rgba(var(--blue-soft-rgb),.95) 168deg,
    rgba(255,255,255,1) 198deg,
    rgba(var(--blue-rgb),.55) 246deg,
    rgba(var(--blue-deep-rgb),.10) 300deg,
    rgba(var(--blue-deep-rgb),.06) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* لمعة زجاجية داخلية على حافة الأنبوب -- ما يفرّق بين "أنبوب زجاج" و
   "دائرة ملوّنة مرسومة". */
.v2-ring::after{
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  padding: calc(var(--rw, 14px) * .34);
  background: conic-gradient(from 150deg,
    transparent 0deg, rgba(255,255,255,.9) 40deg, transparent 120deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.v2-ring-back{
  width: 88%; aspect-ratio: 1; --rw: 18px;
  transform: translate3d(-50%, -50%, -64px) rotateZ(-7deg) rotateX(7deg);
  filter: drop-shadow(0 22px 28px rgba(var(--blue-deep-rgb),.28));
}
/* ============================================================
   سطح البطاقات: مسرح واحد ثابت، والعقار وحده هو ما يتبدّل
   ============================================================
   الحاوية لا تحمل أي transform خاصّ بها (preserve-3d فقط) حتى تبقى إحداثيات
   البطاقات كما هي بالنسبة للمشهد، ويبقى ترتيب الطبقات مضمونًا: الحلقة
   الأمامية بعدها في الـDOM فتمرّ أمامها دائمًا. */
.v2-stage-deck{ position: absolute; inset: 0; transform-style: preserve-3d; }
/* أثناء السحب: JS يكتب transform مباشرة على البطاقتين المعنيّتين كلَّ إطار،
   فأي انتقال هنا يعني تأخّرًا عن الإصبع. يُرفع فور انتهاء الإيماءة. */
/* will-change أثناء السحب وحده: تركها دائمة تحجز طبقة GPU لكل بطاقة طوال
   عمر الصفحة بلا مقابل. */
.v2-stage-deck.is-dragging .v2-stage-card{ transition: none; will-change: transform, opacity; }
/* إشارة لمسك البطاقة أثناء السحب وحده -- خارجه تبقى البطاقة رابطًا بمؤشّر
   الرابط المعتاد، فلا ندّعي إمكان سحب قبل أن يبدأ فعلًا. */
.v2-stage-deck.is-dragging, .v2-stage-deck.is-dragging .v2-stage-card{ cursor: grabbing; }

/* البطاقة الرئيسية -- تحمل العقار الحقيقي حين يوجد */
.v2-stage-card{
  position: absolute; left: 50%; top: 50%;
  width: 74%; margin: 0;
  /* وضعية كل بطاقة رموزٌ لا قيمة جاهزة: الأصناف أدناه تضبط الرموز، و JS
     أثناء السحب يكتب transform كاملًا فوقها ثم يمسحه -- فتعود البطاقة إلى
     وضع صنفها بانتقال طبيعي بلا أي قفزة. */
  --cx: 0px; --cz: 46px; --cry: 0deg; --csc: 1; --cop: 1;
  --park-x: 64px;
  transform: translate3d(calc(-50% + var(--cx)), -50%, var(--cz)) rotateY(var(--cry)) scale(var(--csc));
  opacity: var(--cop);
  /* سريع بما يكفي ليُحسّ استجابةً، وبطيء بما يكفي ليُقرأ حركةً مقصودة --
     ويقصّر نافذة الإمساك بالبطاقة وهي وسط انتقالها. */
  transition: transform .68s var(--v2-ease), opacity .44s var(--v2-ease);
  border-radius: var(--v2-r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #EAF2FD, #DCE8F8);
  box-shadow: 0 46px 70px -40px rgba(var(--ink-rgb),.62), 0 0 0 1px rgba(255,255,255,.7) inset;
  /* البطاقة الحاملة لعقار حقيقي عنصر <a> -- بلا أي أثر بصري للرابط */
  display: block; color: inherit; text-decoration: none;
}
.v2-stage-card.is-current{ z-index: 2; }
/* البطاقات غير النشطة تنتظر خارج الإطار وأعمق في محور Z -- لا تختفي من
   الـDOM (فلا إعادة بناء ولا وميض)، بل تُبعَد وتُخفت. */
.v2-stage-card.park-l,
.v2-stage-card.park-r{
  --cz: -26px; --csc: .92; --cop: 0;
  z-index: 1; pointer-events: none;
}
.v2-stage-card.park-l{ --cx: calc(var(--park-x) * -1); --cry: 9deg; }
.v2-stage-card.park-r{ --cx: var(--park-x);            --cry: -9deg; }

/* مؤشّرات الموضع -- أصغر ما يؤدّي المعنى، ولا تظهر أصلًا لعقار واحد */
.v2-stage-dots{
  position: absolute; inset-inline: 0; bottom: 1%;
  z-index: 4;
  display: flex; justify-content: center; gap: 8px;
}
.v2-stage-dots button{
  position: relative;
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(var(--blue-deep-rgb), .28);
  cursor: pointer;
  transition: width .45s var(--v2-ease), background-color .45s var(--v2-ease);
}
/* هدف لمس حقيقي بلا تكبير النقطة بصريًا. V2-RC-HARDENING (RC-2): كانت
   -7px أفقيًا تعطي عرضًا فعليًا 21px -- أقل من حدّ WCAG 2.5.8 الأدنى
   (24px) رغم أن الارتفاع (35px) كان كافيًا أصلًا. -10px تكفي وحدها
   (27×35px)، فالارتفاع لم يُلمَس. .closest(".v2-stage-dots") في site.js
   يستثني هذه المنطقة من معالجة السحب بحسب انتماء DOM لا الهندسة، فتوسيع
   الهدف هنا لا يخاطر بخطف إيماءة السحب.
   تراكب الحدّ بين نقطتين متجاورتين موجود أصلًا في هذا التصميم (فجوة 8px
   فقط بين نقاط 7-20px) ولم يُستحدَث بهذا التغيير -- تحقَّق تجريبيًا: نفس
   اختبار حدّي عند -7px القديمة يُنتج نفس نوع التذبذب عند أقصى الحافة
   المشتركة بالضبط، والنقر الواقعي (قرب مركز أي نقطة، لا حافتها القصوى
   المشتركة مع الجارة) يصيب الزرّ الصحيح دومًا في الحالتين. لا مجال آمن
   لتوسيع أكبر بلا زيادة الفجوة بينها (تغيير تخطيط مرئي مرفوض هنا). */
.v2-stage-dots button::after{ content: ""; position: absolute; inset: -14px -10px; }
.v2-stage-dots button[aria-current="true"]{
  width: 20px; border-radius: 4px;
  background: var(--v2-blue);
}

/* تعديلات الجوال للمعرض -- موضعها هنا بعد التعريفات الأساسية عمدًا لا في
   كتلة الجوال أعلى الملف: تلك الكتلة تسبق هذه القواعد في ترتيب المصدر
   وبنفس الأولوية، فأي تخصيص فيها يُلغى بالقاعدة الأساسية اللاحقة. */
@media (max-width: 959px){
  /* البطاقة أطول من صندوق المشهد على الجوال فتتجاوز حافته السفلى بنحو
     9px، فكانت النقاط تقع فوق سطر السعر داخل البطاقة (عطل رُصد بصريًا).
     هنا تُفتح لها مساحتها الخاصة تحت البطاقة بلا لمس المشهد. */
  .v2-stage{ margin-bottom: 38px; }
  /* النقاط تتبع البطاقة لا الأزرار: بعد تقصير سطر البيانات صار بينها وبين
     البطاقة فراغ أوسع مما بينها وبين أزرار الواجهة، فصارت تُقرأ كأنها تخصّهما
     لا المعرض. تُرفَع لتقترب من بطاقتها ويبقى تحتها متنفَّس قبل الأزرار. */
  .v2-stage-dots{ bottom: -20px; }

  /* تعديلات سطر البيانات على الجوال ليست هنا بل بعد تعريفاته الأساسية
     أدناه -- تلك القواعد تأتي لاحقًا في ترتيب المصدر وبنفس الأولوية،
     فأي تخصيص هنا يُلغى بها (نفس الفخّ الموثَّق أعلى هذه الكتلة). */
  /* مسافة انتظار أقصر: المشهد أضيق، فنفس الإزاحة تُخرج البطاقة عن الإطار
     بدل أن تنزلق خارجه بهدوء. */
  .v2-stage-card{ --park-x: 44px; }
}
.v2-stage-card-ph{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.v2-stage-card-ph img{ width: 100%; height: 100%; object-fit: cover; }
.v2-stage-card-body{
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 13px 16px;
  background: rgba(255,255,255,.92);
}
.v2-stage-card-body b{ color: var(--v2-ink); font-size: 15px; font-weight: 700; }
.v2-stage-card-body span{ color: var(--v2-body); font-size: 13px; }
.v2-stage-price{
  margin-inline-start: auto;
  color: var(--v2-blue); font-weight: 700; font-size: 15px; white-space: nowrap;
}

/* سطر البيانات على 390px: النوع + المساحة + الواجهة + الحي + السعر كانت
   تتكسّر على ثلاثة أسطر، فيبتلع الشريط ثلث البطاقة وتتقلّص الصورة. هنا
   تُجمَع القيمتان الأهم (النوع والسعر) على سطر واحد وتنزل التفاصيل تحتهما:
   سطران بدل ثلاثة، فالبطاقة أقصر لا أطول، وبلا حذف أي معلومة.
   order وحدها هي ما ينقل التفاصيل بصريًا بعد السعر -- ترتيب الـDOM (وقراءة
   القارئ الشاشي) يبقى كما هو.
   موضع الكتلة بعد التعريفات الأساسية عمدًا لا في كتلة الجوال أعلى الملف. */
@media (max-width: 959px){
  .v2-stage-card-body{ gap: 3px 10px; padding: 11px 14px; }
  .v2-stage-card-body b,
  .v2-stage-price{ font-size: 14.5px; }
  .v2-stage-card-body span:not(.v2-stage-price){
    order: 1; flex-basis: 100%;
    font-size: 12.5px;
  }
}

/* ---------- الحالة الفارغة: نفس المشهد، بلا بيانات ملفّقة ----------
   لا مستطيل مسطّح فارغ: البطاقة تصير واجهة معمارية زجاجية مجرّدة (شرائح
   طوابق + فتحات) بنفس عمق المشهد -- شكل عقاري محايد لا يدّعي عقارًا
   بعينه، ولا سعرًا، ولا عنوانًا. */
.v2-stage-blank{
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(165deg, #F2F7FE 0%, #DFEAF8 100%);
  overflow: hidden;
}
/* كتلتان زجاجيتان صمّاوان بارتفاعين مختلفين -- كتلة معمارية مجرّدة، لا
   شبكة نوافذ. التخطيط بشرائح متكرّرة رفيعة كان يُقرأ كورق رسم بياني
   (ملاحظة صاحب المكتب)، فالعمق هنا يأتي من التدرّج والحافة المضيئة
   والظلّ وحدها. */
.v2-stage-blank::before{
  content: "";
  position: absolute; inset-inline-start: 15%; width: 32%; top: 30%; bottom: 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(162deg, rgba(255,255,255,.97) 0%, rgba(213,230,250,.92) 62%, rgba(var(--blue-soft-rgb),.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset -14px 0 22px -20px rgba(var(--blue-deep-rgb),.55),
    0 20px 30px -22px rgba(var(--ink-rgb),.55);
}
.v2-stage-blank::after{
  content: "";
  position: absolute; inset-inline-end: 17%; width: 38%; top: 14%; bottom: 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(162deg, rgba(255,255,255,.92) 0%, rgba(197,219,246,.90) 58%, rgba(var(--blue-soft-rgb),.68) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 16px 0 26px -22px rgba(var(--blue-deep-rgb),.5),
    0 24px 34px -24px rgba(var(--ink-rgb),.5);
}
/* ---------- عقار حقيقي بلا صورة بعد ----------
   لا يُسقَط من المعرض ولا يُزاح عن ترتيبه (عقد الشبكة نفسه في هذه الصفحة:
   نائب معتمَد لا حذف). يُعاد استعمال الواجهة المعمارية نفسها بدل مستطيل
   رمادي، بنفس رمز اللون الخافت المستخدَم في نائب الشبكة. */
.v2-stage-card-noimg{ display: block; }
.v2-stage-card-noimg .v2-stage-blank{ position: absolute; inset: 0; aspect-ratio: auto; }
.v2-stage-noimg-note{
  position: absolute; inset-inline: 0; bottom: 8%;
  text-align: center;
  color: var(--v2-faint); font-size: 13px;
}

/* حركة مقيَّدة: طفو بطيء جدًا للمشهد كاملًا ودوران أبطأ للحلقة الخلفية.
   لا حلقة JS، لا rAF -- CSS وحدها، فلا كلفة على الخيط الرئيسي. */
@keyframes v2float{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(0, -12px, 0); }
}
@keyframes v2spin{
  from{ transform: translate3d(-50%, -50%, -64px) rotateZ(-7deg) rotateX(7deg); }
  to  { transform: translate3d(-50%, -50%, -64px) rotateZ(353deg) rotateX(7deg); }
}
/* الطفو على الحاوية الخارجية عمدًا لا على .v2-stage-3d: كلاهما يكتب في
   خاصية transform نفسها، فوضعهما على عنصر واحد يجعل الحركة تمحو دوران
   المشهد بالكامل ويعود المنظر مسطّحًا (عطل حقيقي وقع وأُصلح هنا). */
.v2-stage-float{ animation: v2float 9s ease-in-out infinite; }
.v2-ring-back{ animation: v2spin 90s linear infinite; }

/* ============================================================
   الواجهة — «العدسة الكريستالية» (data-hero-lens على .v2-hero)
   ============================================================
   قرار صاحب المكتب النهائي (٢٠٢٦-٠٩-١٩) بعد جولات مقارنة كثيرة: عدسة
   كريستالية دائرية تحمل صورة العقار، داخل حلقة زجاجية سميكة، وكبسولة زجاجية
   فيها السعر فوق النوع. تحلّ محلّ تكوين البطاقة المستطيلة والألواح الجانبية
   والحلقة الأمامية أعلاه (القواعد الأساسية أعلاه تبقى لبنية المشهد والحركة).

   ما رُفض صراحةً — لا يُعاد:
   - أي عنصر على جانبي العدسة (عدسات أو ألواح جانبية تُقرأ "أذنين").
   - الدوران عند التبديل، والضبابية، والانزلاق داخل إطار ثابت (لا يُشعِر
     بتغيّر العقار)، والخروج المندفع السريع الذي يشدّ العين.
   - أنبوب أزرق مشبع وكبسولة معتمة فوق الصورة ("رخيص/كرتوني").

   الأعماق: العدسة على z = 0 عمدًا (أي رفع نحو الناظر يكبّرها بعد الرسم فتفقد
   الصورة حدّتها)؛ كل ما خلفها يُدفع للخلف. */

/* ---------------------------------------------------------------- الخلفية */
.v2-hero[data-hero-lens]{ background: linear-gradient(178deg, #EEF3FC 0%, #E2EBF9 55%, #E9F0FB 100%); }
/* أشعّة ضوء ناعمة وومضات صغيرة — تُرى على الخلفية الزرقاء الفاتحة لا البيضاء */
.v2-hero[data-hero-lens]::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 33%, rgba(255,255,255,.8) 40%, rgba(255,255,255,0) 47%),
    linear-gradient(118deg, rgba(255,255,255,0) 51%, rgba(255,255,255,.6) 56%, rgba(255,255,255,0) 61%),
    linear-gradient(118deg, rgba(255,255,255,0) 65%, rgba(255,255,255,.5) 69%, rgba(255,255,255,0) 73%),
    radial-gradient(3px 3px at 12% 58%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2px 2px at 86% 66%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(2.5px 2.5px at 22% 80%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(60% 40% at 50% 64%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
}

/* ---------------------------------------------------------------- المشهد */
[data-hero-lens] .v2-stage{
  /* وضعية الانتظار التي يقرؤها JS أثناء السحب (dragPose) — تطابق park-* أدناه */
  --dp-park-z: -80; --dp-park-s: .84; --dp-park-ry: 0; --dp-park-op: 0; --dp-park-xr: 1.2;
}
/* بركة ضوء بيضاء على "الأرض" تحت العدسة (خارج المشهد ثلاثي الأبعاد) */
[data-hero-lens] .v2-stage::before{
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 22%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 72%);
  filter: blur(6px);
}
/* الميلان: أثناء التتبّع يقوده نابض JS كل إطار (--par-rx/ry والانضغاط --par-z)
   فلا انتقال CSS إطلاقًا — إعادة تشغيل انتقال قصير مع كل حركة إصبع كانت تجعل
   الحركة سريعة خشنة على آيفون. عند الإفلات: عودة هادئة إلى الراحة بلا ارتداد. */
[data-hero-lens] .v2-stage-3d{
  transform:
    rotateX(calc(var(--stage-rx) + var(--par-rx, 0deg)))
    rotateY(calc(var(--stage-ry) + var(--par-ry, 0deg)))
    translateZ(calc(var(--stage-tz) + var(--par-z, 0px)));
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
[data-hero-lens] .v2-stage.is-tracking .v2-stage-3d{ transition: none; }
/* لا وضعية "مرور" منفصلة: آيفون يعامل اللمس كمرور (:hover)، فكانت وضعية المرور
   الأساسية (ميل مختلف + اقتراب 20px) تُطبَّق فورًا في إطار واحد لحظة اللمس —
   لأن الانتقالات مطفأة أثناء التتبّع — فتقفز العدسة قفزة قاسية (رُصدت في
   تسجيل شاشة آيفون: قفزة بإطار واحد عند كل لمسة). الميل كله للنابض وحده. */
/* القيم = وضعية الراحة الفعلية على كل المقاسات (قاعدة الجوال 5/-10 تغلبها
   القاعدة الأساسية اللاحقة 6/-17 بنفس الخصوصية — مقيس، لا مفترض). */
[data-hero-lens] .v2-stage:hover .v2-stage-3d{ --stage-rx: 6deg; --stage-ry: -17deg; --stage-tz: 0px; }
/* الحاويات شفّافة للّمس؛ العدسة الحالية وحدها تستقبل النقر. بدونها كان سطح
   الحاوية (z = 0) يلتقط النقرة بعد سحب مكتمل فلا يُفتح العقار (مغطّى باختبار). */
[data-hero-lens] .v2-stage-3d,
[data-hero-lens] .v2-stage-deck{ pointer-events: none; }
[data-hero-lens] .v2-stage-card{ pointer-events: auto; }

[data-hero-lens] .v2-stage-bloom{
  width: 104%;
  transform: translate3d(-50%, -50%, -166px);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.92), rgba(var(--blue-soft-rgb),.28) 42%, rgba(var(--blue-soft-rgb),0) 70%);
  filter: blur(30px);
}

/* ---------------------------------------------------------------- الحلقة
   أنبوب زجاج سميك شفاف: مقطعه أبيض في الوسط وأزرق عند حافّتيه، في مستوى
   العدسة نفسه (لا ميل خاص — كان يُقرأ "ينظر لجهة أخرى")، وبلا دوران.
   --ring-x يعيد توسيطها: على عمق -110px تنزاح يمينًا بميل المشهد. */
[data-hero-lens] .v2-ring-back{
  --rw: 22px; --ring-x: -32px;
  width: 94%;
  transform: translate3d(calc(-50% + var(--ring-x)), -50%, -110px);
  /* الظلّ box-shadow لا filter: drop-shadow — المشهد يطفو باستمرار، وdrop-shadow على
     طبقة ثلاثية الأبعاد داخله يُعاد رسمه كل إطار (≈40 إطارًا/ث على جوال متوسط مُحاكًى
     بإبطاء 4×). box-shadow يُرسَم مرّة واحدة: 60 إطارًا/ث بمظهر شبه مطابق. */
  filter: none;
  border-radius: 50%;
  box-shadow: 0 28px 34px rgba(var(--blue-rgb),.26), 0 4px 6px rgba(var(--blue-rgb),.12);
  animation: v2ringIn 1.4s cubic-bezier(.2, .8, .2, 1) .1s backwards;
}
/* الطفو الدائم على المُركِّب (GPU) لا على الخيط الرئيسي */
[data-hero-lens] .v2-stage-float{ will-change: transform; }
[data-hero-lens] .v2-ring-back::before{
  background:
    radial-gradient(closest-side,
      transparent calc(100% - var(--rw)),
      rgba(70,120,220,.75) calc(100% - var(--rw) + 1px),
      rgba(170,200,250,.6) calc(100% - var(--rw) * .82),
      rgba(255,255,255,.95) calc(100% - var(--rw) * .55),
      rgba(200,222,255,.7) calc(100% - var(--rw) * .28),
      rgba(60,110,215,.8) calc(100% - 1.5px),
      transparent 100%),
    conic-gradient(from 150deg, rgba(255,255,255,.5), rgba(120,165,245,.35) 90deg, rgba(255,255,255,.6) 190deg, rgba(90,140,235,.45) 280deg, rgba(255,255,255,.5));
}
[data-hero-lens] .v2-ring-back::after{
  padding: calc(var(--rw) * .2);
  background: conic-gradient(from 130deg,
    transparent 0deg, #fff 22deg, rgba(255,255,255,.4) 48deg, transparent 80deg,
    transparent 170deg, rgba(255,255,255,.95) 200deg, rgba(255,255,255,.2) 228deg, transparent 250deg,
    transparent 300deg, rgba(255,255,255,.7) 322deg, transparent 340deg);
}
@keyframes v2ringIn{
  from{ opacity: 0; transform: translate3d(calc(-50% + var(--ring-x)), -50%, -110px) scale(.9); }
  to  { opacity: 1; transform: translate3d(calc(-50% + var(--ring-x)), -50%, -110px) scale(1); }
}

/* ---------------------------------------------------------------- العدسة */
[data-hero-lens] .v2-stage-card{
  --cz: 0px;
  width: 70%; padding: 14px; border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,1),
    inset 0 0 0 4px rgba(140,180,245,.32),
    inset 0 0 0 5.5px rgba(255,255,255,.85),
    inset 0 0 0 10px rgba(255,255,255,.28),
    inset 0 0 24px 3px rgba(255,255,255,.95),
    inset 0 -12px 20px -8px rgba(70,120,225,.3),
    0 0 0 1px rgba(110,155,235,.5),
    /* السماكة: شرائح صلبة متدرّجة إلى الأسفل مباشرة (الضوء من الأعلى) */
    0 2px 0 0 rgba(240,247,255,.98),
    0 4px 0 0 rgba(212,229,253,.96),
    0 6px 0 0 rgba(180,207,249,.92),
    0 8px 0 0 rgba(140,178,240,.6),
    0 30px 44px -20px rgba(var(--ink-rgb),.3),
    0 54px 84px -40px rgba(var(--blue-rgb),.5);
}
/* مادّة الإطار الكريستالي: حلقة بعرض الحشوة وحدها، ومركز العدسة شفّاف (كانت
   الخلفية تغطّي الدائرة كلها فتُبهت الصورة القادمة المارّة تحتها) */
[data-hero-lens] .v2-stage-card::before{
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 14px;
  background: radial-gradient(circle at 34% 26%, #fff 0%, rgba(240,246,255,.9) 30%, rgba(206,225,252,.78) 66%, rgba(255,255,255,.96) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* قوس ضوء رفيع يتبع الحافة + نقطتا لمعان — ما يحوّل "صورة في دائرة" إلى عدسة */
[data-hero-lens] .v2-stage-card::after{
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 46%, rgba(255,255,255,.75) 47.3%, rgba(255,255,255,0) 48.6%),
    radial-gradient(12px 12px at 21% 15%, #fff, rgba(255,255,255,0) 70%),
    radial-gradient(7px 7px at 85% 81%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
  -webkit-mask: conic-gradient(from 250deg, #000 0deg, #000 92deg, transparent 108deg, transparent 165deg, rgba(0,0,0,.5) 180deg, rgba(0,0,0,.5) 222deg, transparent 238deg);
          mask: conic-gradient(from 250deg, #000 0deg, #000 92deg, transparent 108deg, transparent 165deg, rgba(0,0,0,.5) 180deg, rgba(0,0,0,.5) 222deg, transparent 238deg);
}

[data-hero-lens] .v2-stage-card-ph,
[data-hero-lens] .v2-stage-card > .v2-stage-blank{ aspect-ratio: 1; border-radius: 50%; }
[data-hero-lens] .v2-stage-card-ph{
  box-shadow: 0 0 0 1px rgba(80,125,215,.35), 0 0 0 2.5px rgba(255,255,255,.75), 0 6px 14px -6px rgba(30,60,140,.4);
}
[data-hero-lens] .v2-stage-card-ph img{ object-position: 50% 56%; }
/* تحدّب الزجاج فوق الصورة: انعكاس بيضوي علوي + تعتيم ناعم عند الحافة */
[data-hero-lens] .v2-stage-card-ph::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 64% 34% at 40% 14%, rgba(255,255,255,.34), rgba(255,255,255,0) 72%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 64%, rgba(20,45,100,.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 22px rgba(255,255,255,.3);
}
/* لمعة عابرة: شريط ضوء يعبر الزجاج مرّة كل بضع ثوانٍ (transform فقط) */
[data-hero-lens] .v2-stage-card-ph::before{
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 38%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 45%, rgba(255,255,255,.08) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(0) skewX(-14deg);
  animation: v2glint 7.5s cubic-bezier(.45, 0, .2, 1) 2.2s infinite;
}
@keyframes v2glint{
  0%   { transform: translateX(0) skewX(-14deg); }
  22%  { transform: translateX(460%) skewX(-14deg); }
  100% { transform: translateX(460%) skewX(-14deg); }
}

/* ---------------------------------------------------------------- الكبسولة
   زجاج مصنفر: السعر فوق بالأزرق، والنوع تحته بالكحلي. بقية التفاصيل (المساحة،
   الحي) في صفحة العقار — العدسة تعرض ما يُقرأ من نظرة. */
[data-hero-lens] .v2-stage-card-body{
  position: absolute; left: 20%; right: 20%; bottom: 13%; z-index: 2;
  flex-direction: column; align-items: center; gap: 1px; text-align: center;
  border-radius: 999px; padding: 8px 18px 7px;
  background: rgba(255,255,255,.7);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.95),
    inset 0 -8px 14px -10px rgba(70,120,225,.35),
    inset 0 8px 12px -10px rgba(255,255,255,1),
    0 0 0 1px rgba(110,155,235,.32),
    0 12px 26px -14px rgba(var(--ink-rgb),.45);
  transition: transform 1.3s cubic-bezier(.22, .61, .36, 1) .5s, opacity 1.1s cubic-bezier(.22, .61, .36, 1) .5s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  [data-hero-lens] .v2-stage-card-body{
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(240,246,255,.56));
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
            backdrop-filter: blur(16px) saturate(1.5);
  }
}
[data-hero-lens] .v2-stage-card-body .v2-stage-price{
  margin: 0; order: -1;
  color: var(--v2-blue); font-size: 15.5px; font-weight: 800; line-height: 1.35;
}
[data-hero-lens] .v2-stage-card-body b{ color: var(--v2-ink); font-size: 17px; font-weight: 800; line-height: 1.3; }
[data-hero-lens] .v2-stage-card-body span:not(.v2-stage-price){ display: none; }
/* بلا عقارات: وعد صادق على الكبسولة نفسها — لا عقار مخترع ولا إحصاء. يظهر
   فقط بعد تحميل ناجح فارغ فعلًا: أثناء التحميل وعند فشله تبقى العدسة الزجاجية
   بلا نصّ (الوعد هناك كذب: العروض موجودة أو لم تُقرأ بعد). */
[data-hero-lens] .v2-stage-soon{
  margin: 0; justify-content: center;
  color: var(--v2-ink); font-size: 14px; font-weight: 600;
}
/* الظهور تلاشٍ وصعود هادئ لا قفزة (صاحب المكتب: "النص يظهر بشكل سريع").
   visibility بلا مدّة: تصير visible فورًا ويتولّى opacity الانسياب. */
[data-hero-lens] .v2-stage-card-body.v2-stage-soon{
  transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1) .35s, transform 1.6s cubic-bezier(.22, .61, .36, 1) .35s, visibility 0s;
}
[data-hero-lens] .v2-stage:not([data-hero-ready]) .v2-stage-soon,
[data-hero-lens] .v2-stage[data-hero-error] .v2-stage-soon{
  visibility: hidden; opacity: 0; transform: translateY(12px);
  transition-duration: 0s; transition-delay: 0s;
}

/* ---------------------------------------------------------------- الحركة
   الوصول: حين تصل العقارات فعلًا (لا عند فتح الصفحة — البيانات تتأخّر ثانية أو
   أكثر، فكانت حركة الدخول تُصرَف على عدسة فارغة ثم تظهر الصورة فجأة)، يضع JS
   صنف is-arriving مؤقّتًا: العدسة تستقرّ في مكانها بتكبير هادئ، والكبسولة تصعد
   بعدها. الصورة ظاهرة كاملةً من أوّل إطار (لا شفافية عليها) فلا يتأخّر قياس
   جوجل لأكبر عنصر مرئي (LCP). الحلقة وحدها تدخل عند فتح الصفحة. */
[data-hero-lens] .v2-stage.is-arriving .v2-stage-card.is-current{ animation: v2lensSettle 1.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes v2lensSettle{
  from{ scale: .93; }
  to  { scale: 1; }
}
[data-hero-lens] .v2-stage.is-arriving .v2-stage-card.is-current .v2-stage-card-body{ animation: v2capIn 1.4s cubic-bezier(.22, .61, .36, 1) .45s backwards; }
@keyframes v2capIn{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: none; }
}

/* التبديل: العدسة كلها تُستبدَل بعدسة أخرى. المنحنى يؤخذ من حالة الوصول:
   - القادمة (is-current): انسياب متباطئ هادئ إلى داخل الحلقة وظهور تدريجي.
   - المغادِرة (park-*): تبدأ ببطء وتنجرف إلى العمق وتتلاشى خلال نصف ثانية.
   في الراحة تنتظر الأخرى خارج الشاشة تمامًا وشفّافة. */
[data-hero-lens] .v2-stage-card.is-current{
  transition: transform 1s cubic-bezier(.25, .85, .3, 1), opacity .7s ease;
}
[data-hero-lens] .v2-stage-card.park-l,
[data-hero-lens] .v2-stage-card.park-r{
  --cz: -80px; --csc: .84; --cry: 0deg; --cop: 0;
  pointer-events: none;
  /* المغادِرة تبتعد وتتلاشى معًا على طول الحركة (صاحب المكتب: كانت "تختفي
     بصورة مفاجئة" — تلاشٍ 0.55 ث مع بداية بطيئة للحركة = تختفي في مكانها) */
  transition: transform 1.2s cubic-bezier(.3, .5, .35, 1), opacity 1.05s cubic-bezier(.45, 0, .55, 1);
}
[data-hero-lens] .v2-stage-card.park-l{ --cx: -120%; }
[data-hero-lens] .v2-stage-card.park-r{ --cx: 120%; }
/* أثناء السحب: العدسة تحت الإصبع مع تنعيم خفيف جدًا (0.12 ث). بدون هذه القاعدة
   كانت انتقالات الوصول أعلاه (1–1.2 ث، نفس الخصوصية ولاحقة) تغلب "بلا انتقال
   أثناء السحب" الأساسية، فتلحق العدسة بالإصبع متأخّرة نحو ثانية. */
[data-hero-lens] .v2-stage-deck.is-dragging .v2-stage-card{
  transition: transform .12s cubic-bezier(.2, .8, .2, 1), opacity .12s linear;
}
/* الكبسولة تختفي مع المغادِرة وتصعد مع الجديدة بعد استقرارها */
[data-hero-lens] .v2-stage-card.park-l .v2-stage-card-body,
[data-hero-lens] .v2-stage-card.park-r .v2-stage-card-body{
  transform: translateY(14px); opacity: 0;
  transition-delay: 0s, 0s;
}
/* لحظة التبديل (صنف مؤقّت من JS): نبضة الحلقة تستقبل العدسة، وومضة ضوء.
   النبضة على خاصية scale المستقلّة ومضافة إلى قائمة الحركات لا بدلًا منها —
   استبدال القائمة يعيد تشغيل حركة الدخول فتختفي الحلقة لحظيًا. */
[data-hero-lens] .v2-stage.is-switching .v2-ring-back{
  animation: v2ringIn 1.4s cubic-bezier(.2, .8, .2, 1) .1s backwards, v2ringLand .9s cubic-bezier(.3, 1.4, .5, 1) .45s;
}
@keyframes v2ringLand{
  0%  { scale: 1; }
  40% { scale: 1.035; }
  100%{ scale: 1; }
}
[data-hero-lens] .v2-stage.is-switching .v2-stage-card.is-current .v2-stage-card-ph::before{
  animation: v2glintOnce 1.1s cubic-bezier(.45, 0, .2, 1) .55s both;
}
@keyframes v2glintOnce{
  from{ transform: translateX(0) skewX(-14deg); }
  to  { transform: translateX(460%) skewX(-14deg); }
}

/* ---------------------------------------------------------------- الجوال */
@media (max-width: 959px){
  [data-hero-lens] .v2-stage{ aspect-ratio: 1 / 1.06; margin-bottom: 52px; }
  [data-hero-lens] .v2-stage-dots{ bottom: -42px; }
  [data-hero-lens] .v2-ring-back{ width: 106%; --ring-x: -19px; }
  [data-hero-lens] .v2-stage-card{ width: 84%; padding: 12px; }
  [data-hero-lens] .v2-stage-card::before{ padding: 12px; }
  [data-hero-lens] .v2-stage-card-body{ left: 16%; right: 16%; bottom: 12%; }
}

/* ---------------------------------------------------------------- حركة مقيَّدة
   (القاعدة العامة تُلغي مدد الحركات؛ هنا: لا انزلاق — المنتظرة في المركز مخفاة
   بالشفافية، فالتبديل تلاشٍ) */
/* خصوصية أعلى (.v2-hero) عمدًا: قاعدة الحركة المقيَّدة الأساسية
   (.v2 .v2-stage-card.park-*، --cz: 46px) تأتي لاحقًا في الملف بنفس الخصوصية. */
@media (prefers-reduced-motion: reduce){
  .v2-hero[data-hero-lens] .v2-stage-card.park-l,
  .v2-hero[data-hero-lens] .v2-stage-card.park-r{ --cop: 0; --cx: 0px; --cz: 0px; --csc: 1; }
}

/* ============================================================
   لوحة البحث
   ============================================================ */
.v2-search{
  position: relative; z-index: 3;
  margin-top: clamp(26px, 3.2vw, 44px);
  padding: 18px;
}
.v2-search-row{
  display: grid; gap: 12px;
}
@media (min-width: 860px){
  .v2-search-row{ grid-template-columns: repeat(3, minmax(0,1fr)) auto; align-items: end; }
}
.v2-field{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.v2-field label{
  font-size: 12.5px; font-weight: 600; color: var(--v2-faint);
}
/* نفس مظهر .v2-ctrl حرفيًا -- حقول الرئيسية وحقول صفحة العقارات عنصر
   واحد بصريًا، فلا يبقى في الموقع شكلان مختلفان للقائمة المنسدلة. */
.v2-field select,
.v2-field input{
  width: 100%;
  min-height: 52px;
  padding-inline: 14px;
  border: 0; border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  box-shadow: inset 0 0 0 1px var(--v2-line-soft);
  color: var(--v2-ink); font-size: 15px; font-weight: 500; font-family: inherit;
  transition: box-shadow .2s var(--v2-ease);
}
.v2-field input::placeholder,
.v2-field textarea::placeholder{ color: var(--v2-hint); font-weight: 400; }
.v2-field select:hover,
.v2-field input:hover{ box-shadow: inset 0 0 0 1px var(--blue-border); }
.v2-field select:focus,
.v2-field input:focus{ box-shadow: inset 0 0 0 2px var(--blue-primary); outline: none; }
.v2-field select{
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232B57CE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left 15px center;
}
.v2-search .v2-btn{ min-height: 52px; }

.v2-search-more{
  margin-top: 12px;
  display: grid; gap: 12px;
}
@media (min-width: 860px){ .v2-search-more{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.v2-search-more[hidden]{ display: none; }
.v2-search-toggle{
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  background: none; border: 0;
  color: var(--v2-blue); font-size: 14px; font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   الأقسام
   ============================================================ */
.v2-sec{ padding-block: var(--v2-sec); }
.v2-sec-tight{ padding-block: clamp(40px, 5vw, 72px); }
.v2-sec-alt{ background: linear-gradient(178deg, #FFFFFF 0%, var(--v2-bg) 100%); }
.v2-sec-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

/* الرقائق (فلاتر سريعة) */
.v2-chips{
  display: flex; gap: 9px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* يسمح للرقائق بالوصول لحافة الشاشة على الجوال بلا قصّ. */
  margin-inline: calc(var(--v2-gut) * -1);
  padding-inline: var(--v2-gut);
}
.v2-chips::-webkit-scrollbar{ display: none; }
.v2-chip{
  flex: 0 0 auto;
  min-height: 44px; padding-inline: 18px;
  border: 0; border-radius: var(--v2-r-pill);
  background: var(--v2-surface); color: var(--v2-body);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--v2-line-soft);
  cursor: pointer;
  transition: color .2s var(--v2-ease), box-shadow .2s var(--v2-ease), background .2s var(--v2-ease);
}
.v2-chip:hover{ color: var(--v2-blue); box-shadow: 0 0 0 1px var(--v2-blue-soft); }
.v2-chip.active{
  background: var(--v2-ink); color: #fff;
  box-shadow: 0 12px 22px -14px rgba(var(--ink-rgb),.7);
}

/* ============================================================
   بطاقات العقارات
   ============================================================
   إيقاع غير متماثل عمدًا: البطاقة الأولى أعرض على سطح المكتب، فلا تبدو
   الصفحة شبكة ثلاثية مكرّرة كأي قالب عقاري جاهز.
   ============================================================ */
.v2-grid{
  display: grid; gap: clamp(16px, 1.6vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 680px){ .v2-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px){
  /* إيقاع يتكرّر كل ٦ بطاقات (4+2 / 2+4 / 3+3) -- نفس مبدأ الشبكة غير
     المتماثلة في styles.css: لا ينكسر مهما طالت القائمة، ولا يترك بطاقة
     يتيمة في صفّ وحدها، ولا يبدو كشبكة ثلاثية مكرّرة جاهزة. */
  .v2-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .v2-grid > *{ grid-column: span 2; }
  .v2-grid > *:nth-child(6n+1){ grid-column: span 4; }
  .v2-grid > *:nth-child(6n+2){ grid-column: span 2; }
  .v2-grid > *:nth-child(6n+3){ grid-column: span 2; }
  .v2-grid > *:nth-child(6n+4){ grid-column: span 4; }
  .v2-grid > *:nth-child(6n+5){ grid-column: span 3; }
  .v2-grid > *:nth-child(6n)  { grid-column: span 3; }
}

.v2-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--v2-surface);
  border-radius: var(--v2-r);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--v2-line-soft), var(--v2-shadow-sm);
  transition: transform .4s var(--v2-ease), box-shadow .4s var(--v2-ease);
}
.v2-card:hover{ transform: translateY(-4px); box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.v2-card-ph{
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #E9F1FB, #DCE8F7);
  overflow: hidden;
}
@media (min-width: 1040px){
  /* البطاقات العريضة (span 4) تأخذ نسبة أعرض فيبقى ارتفاع الصفّ متناسقًا. */
  .v2-grid > *:nth-child(6n+1) .v2-card-ph,
  .v2-grid > *:nth-child(6n+4) .v2-card-ph{ aspect-ratio: 16 / 9; }
}
.v2-card-ph img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--v2-ease); }
.v2-card:hover .v2-card-ph img{ transform: scale(1.04); }
.v2-card-empty{
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--v2-faint); font-size: 13px;
}
.v2-tag{
  position: absolute; z-index: 3;
  inset-inline-start: 12px; top: 12px;
  padding: 6px 13px;
  border-radius: var(--v2-r-pill);
  background: rgba(255,255,255,.92);
  color: var(--v2-ink); font-size: 12.5px; font-weight: 700;
  box-shadow: var(--v2-shadow-sm);
}
.v2-tag.rent{ background: var(--v2-blue); color: #fff; }
.v2-fav{
  position: absolute; z-index: 4;
  inset-inline-end: 10px; top: 10px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: var(--v2-shadow-sm);
  cursor: pointer;
  transition: transform .25s var(--v2-ease);
}
.v2-fav svg{ width: 19px; height: 19px; fill: none; stroke: var(--v2-ink); stroke-width: 1.7; }
.v2-fav:hover{ transform: scale(1.08); }
.v2-fav.on svg{ fill: var(--v2-blue); stroke: var(--v2-blue); }

.v2-card-body{ display: flex; flex-direction: column; gap: 9px; padding: 16px 17px 17px; }
.v2-card-meta{ font-size: 13px; color: var(--v2-faint); }
.v2-card-title{ font-size: 17px; font-weight: 700; color: var(--v2-ink); line-height: 1.4; }
/* الرابط نفسه يبقى في مكانه داخل العنوان؛ ::after وحده يمتدّ على البطاقة
   كلها (z-index 2: فوق الصورة، تحت الشارة 3 والمفضّلة 4). */
.v2-card-title a::after{ content: ""; position: absolute; inset: 0; z-index: 2; }
.v2-specs{
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--v2-body);
}
.v2-card-foot{
  margin-top: auto;
  display: flex; align-items: baseline; gap: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--v2-line-soft);
}
.v2-price b{ color: var(--v2-ink); font-size: 19px; font-weight: 700; }
.v2-price .cur{ color: var(--v2-faint); font-size: 13px; }

/* هيكل تحميل */
.v2-skel{ background: var(--v2-surface); border-radius: var(--v2-r); overflow: hidden; box-shadow: 0 0 0 1px var(--v2-line-soft); }
.v2-skel-ph{ aspect-ratio: 4/3; background: linear-gradient(100deg, #EEF4FB 30%, #F7FAFE 50%, #EEF4FB 70%); background-size: 220% 100%; animation: v2sk 1.5s linear infinite; }
.v2-skel-body{ padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.v2-skel-line{ height: 12px; border-radius: 6px; background: linear-gradient(100deg, #EEF4FB 30%, #F7FAFE 50%, #EEF4FB 70%); background-size: 220% 100%; animation: v2sk 1.5s linear infinite; }
.v2-skel-line.s{ width: 52%; }
@keyframes v2sk{ from{ background-position: 100% 0; } to{ background-position: -100% 0; } }

.v2-empty{
  padding: 40px 22px; text-align: center;
  border-radius: var(--v2-r);
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
  color: var(--v2-body);
}
.v2-empty b{ display: block; margin-bottom: 6px; color: var(--v2-ink); font-size: 17px; }

/* ============================================================
   المناطق
   ============================================================ */
/* شبكة أعمدة متساوية لا صفّ ملتفّ: أسماء الأحياء متفاوتة الطول، فالالتفاف
   الحرّ كان يُنتج أسطرًا بأعداد وأطراف مختلفة تبدو غير منظّمة (صاحب المكتب). */
.v2-areas{
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 599px){
  .v2-areas{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.v2-areas a{
  display: flex; align-items: center; justify-content: center;
  height: 100%; text-align: center; line-height: 1.35;
  min-height: 46px; padding: 6px 12px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-surface); color: var(--v2-ink);
  font-size: 15px; font-weight: 600;
  box-shadow: 0 0 0 1px var(--v2-line-soft);
  transition: color .2s var(--v2-ease), box-shadow .2s var(--v2-ease), transform .2s var(--v2-ease);
}
.v2-areas a:hover{ color: var(--v2-blue); box-shadow: 0 0 0 1px var(--v2-blue-soft); transform: translateY(-2px); }

/* ============================================================
   شريط "أعلن معنا"
   ============================================================ */
.v2-cta-band{
  position: relative; overflow: hidden;
  padding: clamp(34px, 4vw, 58px);
  border-radius: var(--v2-r-lg);
  background: linear-gradient(140deg, var(--v2-ink) 0%, var(--blue-deep) 62%, var(--blue-primary-hover) 100%);
  color: #fff;
}
.v2-cta-band h2{ color: #fff; margin-bottom: 12px; }
.v2-cta-band p{ color: rgba(255,255,255,.76); max-width: 54ch; margin-bottom: 24px; }
.v2-cta-band .v2-eyebrow{ color: var(--v2-blue-soft); }
.v2-cta-band .v2-btn{ background: #fff; color: var(--v2-blue); box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); }
.v2-cta-band .v2-btn:hover{ background: #EAF1FF; }

/* ============================================================
   عن المكتب — استعادة (regression)
   القسم كان موجودًا قبل V2 (id="about"، نفس النص، نفس الروابط) وسقط سهوًا
   أثناء إعادة بناء الواجهة الرئيسية (a51acbb) رغم بقائه موثَّقًا في
   CLAUDE.md/AGENTS.md. أُعيد بأقل تعديل ممكن: نفس النص، بعناصر V2 القائمة
   أصلًا (.v2-card-ph لصناديق الصور، وشبكة عمودين على غرار
   .v2-contact-grid أدناه) لا بتصميم بصري جديد.
   ============================================================ */
.v2-about-grid{ display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (min-width: 940px){ .v2-about-grid{ grid-template-columns: minmax(0,1.14fr) minmax(0,.86fr); } }
.v2-about-figs{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-about-figs .v2-card-ph{ border-radius: var(--v2-r); box-shadow: 0 0 0 1px var(--v2-line-soft), var(--v2-shadow-sm); }
.v2-about-figs .v2-about-ph-b{ margin-top: clamp(28px, 5vw, 56px); }
/* لكل صورة نسبة أصلها، لا نسبة موحّدة: الواجهة 3:4 والداخل 9:16، وفرضُ
   إطار واحد كان سيقصّ إحداهما — واللافتة تحديدًا لا يجوز قصّها. الإزاحة
   في ph-b تجعل اختلاف الارتفاعين يبدو مقصودًا لا عشوائيًا. */
.v2-about-figs .v2-about-ph-a{ aspect-ratio: 3 / 4; }
.v2-about-figs .v2-about-ph-b{ aspect-ratio: 9 / 16; }
.v2-about-figs figure{ margin: 0; }
.v2-about-figs img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   التواصل
   ============================================================ */
.v2-contact-grid{ display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 940px){ .v2-contact-grid{ grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); } }
.v2-phones{ display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.v2-phones a{
  display: flex; align-items: center; gap: 13px;
  min-height: 62px; padding-inline: 17px;
  border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
  transition: box-shadow .2s var(--v2-ease);
}
.v2-phones a:hover{ box-shadow: 0 0 0 1px var(--v2-blue-soft); }
.v2-phones svg{ width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--v2-blue); stroke-width: 1.6; }
.v2-ph-lbl{ display: block; font-size: 12px; color: var(--v2-faint); }
.v2-ph-num{ display: block; font-size: 16px; font-weight: 700; color: var(--v2-ink); }
.v2-socials{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.v2-socials a{
  min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px;
  border-radius: var(--v2-r-pill); font-size: 14px; font-weight: 600; color: var(--v2-body);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
}
.v2-socials a:hover{ color: var(--v2-blue); }
.v2-socials a[hidden]{ display: none; }
/* ---------- قسم التواصل: طريقان (صاحب عقار / باحث) ----------
   قرار صاحب المكتب: النموذج الواحد كان محيّرًا (مشترٍ وبائع في نموذج واحد،
   واسم وهاتف بلا سبب ظاهر). بطاقتان كبيرتان، كل واحدة تفتح نموذجها. */
.v2-contact .v2-sec-head{ margin-bottom: 22px; }
.v2-paths{ display: grid; gap: 12px; }
@media (min-width: 720px){ .v2-paths{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-path{
  display: flex; align-items: center; gap: 15px;
  width: 100%; min-height: 92px; padding: 16px 18px;
  border: 0; border-radius: var(--v2-r);
  background: var(--v2-surface); color: var(--v2-ink);
  font-family: inherit; text-align: start; cursor: pointer;
  box-shadow: 0 0 0 1px var(--v2-line-soft), var(--v2-shadow-sm);
  transition: box-shadow .25s var(--v2-ease), transform .25s var(--v2-ease);
}
.v2-path:hover{ box-shadow: 0 0 0 1px var(--blue-border), var(--v2-shadow); transform: translateY(-2px); }
.v2-path > svg{
  flex: 0 0 auto; width: 46px; height: 46px; padding: 11px;
  border-radius: 14px; background: var(--blue-glass);
  fill: none; stroke: var(--v2-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.v2-path > span{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v2-path b{ font-size: 17px; font-weight: 800; color: inherit; }
.v2-path b + span{ font-size: 13.5px; color: var(--v2-body); line-height: 1.5; }
.v2-path::after{
  content: ""; flex: 0 0 auto; margin-inline-start: auto;
  width: 9px; height: 9px; border: solid var(--v2-faint); border-width: 0 0 2px 2px;
  transform: rotate(-45deg); transition: transform .3s var(--v2-ease);
}
.v2-path[aria-expanded="true"]{ box-shadow: 0 0 0 2px var(--v2-blue), var(--v2-shadow); }
.v2-path[aria-expanded="true"]::after{ transform: rotate(-45deg) scale(-1, -1); }
/* صاحب العقار: البطاقة الأبرز -- لون الهوية كاملًا */
.v2-path-sell{ background: var(--v2-blue); color: #fff; box-shadow: var(--v2-shadow-blue); }
.v2-path-sell b + span{ color: rgba(255,255,255,.82); }
.v2-path-sell > svg{ background: rgba(255,255,255,.16); stroke: #fff; }
.v2-path-sell::after{ border-color: rgba(255,255,255,.85); }
.v2-path-sell:hover{ box-shadow: var(--v2-shadow-blue); }
.v2-path-sell[aria-expanded="true"]{ box-shadow: 0 0 0 3px var(--blue-border), var(--v2-shadow-blue); }
/* `.v2 button{color:inherit}` (0,1,1) تغلب .v2-path وحدها -- نفس سبب HOTFIX-CTA-CONTRAST */
button.v2-path{ color: var(--v2-ink); }
button.v2-path-sell{ color: #fff; }
[data-theme="dark"] .v2-path-sell{ color: var(--v2-on-accent); }
[data-theme="dark"] .v2-path-sell b + span{ color: rgba(15,19,25,.78); }
[data-theme="dark"] .v2-path-sell > svg{ background: rgba(15,19,25,.12); stroke: var(--v2-on-accent); }
[data-theme="dark"] .v2-path-sell::after{ border-color: rgba(15,19,25,.7); }

.v2-path-form{ margin-top: 12px; animation: v2formIn .45s var(--v2-ease); }
@keyframes v2formIn{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
/* رقمان قصيران (المساحة والواجهة) جنبًا إلى جنب حتى على الجوال */
.v2-form-row.pair{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* حقول تُخفى حسب النوع/الغرض: display في .v2-field يغلب [hidden] الافتراضي */
.v2-path-form [hidden]{ display: none; }
.v2-form-row.pair:has(> [hidden]){ grid-template-columns: minmax(0, 1fr); }
.v2-path-form[hidden]{ display: none; }
.v2-form-lead{ margin: 0 0 16px; font-size: 14px; color: var(--v2-body); line-height: 1.7; }
.v2-form-why{
  margin: 6px 0 12px; padding-top: 14px;
  border-top: 1px solid var(--v2-line-soft);
  font-size: 14px; font-weight: 600; color: var(--v2-ink);
}
.v2-field label small{ font-weight: 400; }

/* اختيار بضغطة (أزرار) بدل القائمة المنسدلة */
.v2-choice{ margin: 0 0 14px; padding: 0; border: 0; }
.v2-choice legend{ padding: 0; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--v2-faint); }
/* عرض كل زر على قدر نصّه ويتمدّد ليملأ السطر (عقار تجاري أعرض من دار) */
.v2-choice-row{ display: flex; flex-wrap: wrap; gap: 7px; }
.v2-choice-row label{ flex: 1 1 auto; }
.v2-choice-row.v2-choice-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-choice legend small{ font-weight: 400; }
.v2-choice-row label{ position: relative; cursor: pointer; }
.v2-choice-row input{
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  margin: 0; opacity: 0; cursor: pointer;
}
.v2-choice-row span{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding-inline: 12px; white-space: nowrap;
  border-radius: var(--v2-r-pill);
  background: var(--v2-surface); color: var(--v2-ink);
  font-size: 14.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--v2-line-soft);
  transition: background .2s var(--v2-ease), color .2s var(--v2-ease), box-shadow .2s var(--v2-ease);
}
.v2-choice-row input:checked + span{ background: var(--v2-blue); color: #fff; box-shadow: none; }
[data-theme="dark"] .v2-choice-row input:checked + span{ color: var(--v2-on-accent); }
.v2-choice-row input:focus-visible + span{ outline: 2px solid var(--v2-blue); outline-offset: 2px; }

.v2-btn-wa svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.v2-path-form .v2-btn{ width: 100%; }

/* التواصل المباشر: بطاقتا الرقمين بنفس الشكل، جنبًا إلى جنب على الشاشات الأوسع */
.v2-direct{ margin-top: 28px; }
.v2-direct-lbl{ margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--v2-faint); }
.v2-direct .v2-phones{ margin-top: 0; }
@media (min-width: 720px){ .v2-direct .v2-phones{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.v2-form{ padding: clamp(20px, 2.4vw, 30px); }
.v2-form-row{ display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 620px){ .v2-form-row.two{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.v2-form textarea{
  width: 100%; padding: 13px 14px;
  border: 0; border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  box-shadow: inset 0 0 0 1px var(--v2-line-soft);
  color: var(--v2-ink); font-size: 15px; font-family: inherit; resize: vertical;
}
.v2-form textarea:focus{ box-shadow: inset 0 0 0 2px var(--v2-blue); outline: none; }
.v2-field input.bad,
.v2-field select.bad{ box-shadow: inset 0 0 0 2px #E05252; }
/* مجموعة اختيار ناقصة: الحدّ الأحمر لا ينطبق على fieldset، فالتسمية هي ما يُعلَّم. */
.v2-choice.bad legend{ color: #C33; }
.v2-form .v2-btn{ width: 100%; }
.v2-note{ margin-top: 12px; font-size: 13px; color: var(--v2-faint); }
.v2-note.err{ color: #C33; }
.v2-consent{ margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--v2-faint); }

/* ============================================================
   التذييل
   ============================================================ */
/* تذييل أخفّ: كان طويلًا ثقيلًا على صفحات قليلة المحتوى فيبتلع نهايتها.
   الكثافة أعلى (فجوات أصغر، روابط أقرب)، والتدرّج الطباعي أوضح. */
.v2-foot{
  padding-block: clamp(30px, 3.2vw, 46px) 20px;
  background: var(--v2-ink); color: rgba(255,255,255,.66);
}
.v2-foot-in{ display: grid; gap: 22px; }
@media (min-width: 780px){ .v2-foot-in{ grid-template-columns: 1.7fr 1fr 1fr; gap: 28px; } }
.v2-foot-mark{ display: block; color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 7px; }
.v2-foot p{ font-size: 13.5px; line-height: 1.7; max-width: 40ch; }
.v2-foot nav{ display: flex; flex-direction: column; }
.v2-foot nav b{
  color: rgba(255,255,255,.5); font-size: 12px; font-weight: 600;
  margin-bottom: 6px;
}
/* 44px حدّ أدنى لكل هدف لمس على الجوال؛ على سطح المكتب (مؤشّر لا إصبع)
   الارتفاع أصغر فلا يتمدّد التذييل بلا داعٍ. */
.v2-foot nav a{ min-height: 44px; display: inline-flex; align-items: center; font-size: 13.5px; }
@media (min-width: 780px){ .v2-foot nav a{ min-height: 30px; } }
.v2-foot nav a:hover{ color: #fff; }
.v2-foot-c{
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; color: rgba(255,255,255,.48);
}

/* ============================================================
   الجوال: الورقة السفلية للبحث (Bottom Sheet)
   ============================================================ */
.v2-sheet-open{ display: none; }
.v2-sheet{
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-end;
}
.v2-sheet[hidden]{ display: none; }
.v2-sheet-scrim{
  position: absolute; inset: 0;
  background: rgba(var(--ink-rgb),.44);
  animation: v2fade .25s var(--v2-ease);
}
@supports (backdrop-filter: blur(1px)){ .v2-sheet-scrim{ backdrop-filter: blur(3px); } }
.v2-sheet-panel{
  position: relative; z-index: 2;
  width: 100%;
  max-height: 86vh; overflow-y: auto;
  padding: 10px var(--v2-gut) calc(24px + env(safe-area-inset-bottom));
  border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0;
  background: #fff;
  box-shadow: 0 -20px 50px -30px rgba(var(--ink-rgb),.6);
  animation: v2up .32s var(--v2-ease);
}
.v2-sheet-grip{
  width: 42px; height: 4px; margin: 0 auto 16px;
  border-radius: 999px; background: var(--v2-line);
}
.v2-sheet-panel h2{ font-size: 21px; margin-bottom: 16px; }
.v2-sheet-panel .v2-field{ margin-bottom: 13px; }
.v2-sheet-panel .v2-btn{ width: 100%; margin-top: 4px; }
@keyframes v2up{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@keyframes v2fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* زرّ "ابدأ البحث": على سطح المكتب ينزلق إلى لوحة البحث المدمجة، وعلى
   الجوال يفتح الورقة السفلية. زرّان منفصلان لأن السلوكين مختلفان فعليًا،
   وCSS يُظهر الصحيح لكل مقاس -- لا زرّ واحد يتظاهر بالسلوكين. */
.v2-search-jump{ display: inline-flex; }

@media (max-width: 859px){
  /* على الجوال: لوحة البحث المدمجة تُستبدل بزرّ يفتح الورقة السفلية --
     نموذج تفاعل الجوال الصحيح، لا لوحة سطح مكتب مصغّرة. */
  .v2-search{ display: none; }
  .v2-search-jump{ display: none; }
  .v2-sheet-open{ display: inline-flex; }
}

/* ============================================================
   الظهور التدريجي -- حركة مقيَّدة ومحترمة لتفضيل تقليل الحركة
   ============================================================ */
.v2 .reveal{ opacity: 0; transform: translateY(16px); }
.v2 .reveal.in{
  opacity: 1; transform: none;
  transition: opacity .7s var(--v2-ease) var(--d, 0ms), transform .7s var(--v2-ease) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce){
  .v2 *, .v2 *::before, .v2 *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .v2 .reveal{ opacity: 1; transform: none; }

  /* المعرض يبقى مفهومًا لا مبتورًا: القاعدة أعلاه تجعل تبديل العقار قفزة
     فورية بلا أي إشارة إلى أن شيئًا تغيّر. البديل هنا تلاشٍ قصير محترم بدل
     السفر ثلاثي الأبعاد -- البطاقات تنتظر في المركز نفسه (بلا إزاحة ولا
     دوران ولا تغيّر عمق) فيصير التبديل تعتيمًا/إظهارًا نظيفًا.
     الميلان مع المؤشّر معطَّل أصلًا في JS تحت هذا الإعداد. */
  .v2 .v2-stage-card{
    transition-property: opacity !important;
    transition-duration: .2s !important;
  }
  .v2 .v2-stage-card.park-l,
  .v2 .v2-stage-card.park-r{ --cx: 0px; --cry: 0deg; --cz: 46px; --csc: 1; }
}

/* ============================================================
   أوزان Cairo -- تدرّج صريح بدل الاعتماد على الافتراضيات
   ============================================================ */
.v2-nav a,
.v2-head-cta,
.v2-btn,
.v2-btn-ghost,
.v2-link,
.v2-chip,
.v2-menu nav a{ font-weight: 600; }
.v2-field label,
.v2-eyebrow,
.v2-card-meta{ font-weight: 500; }
.v2 p{ font-weight: 400; }

/* الأرقام اللاتينية داخل نصّ عربي: أرقام جدولية بعرض ثابت تمنع "رقص"
   خانات السعر بين بطاقة وأخرى، وتُحاذي أعمدة الأسعار رأسيًا. */
.v2 [dir="ltr"],
.v2-price b,
.v2-stage-price,
.v2-count b{ font-variant-numeric: tabular-nums lining-nums; }

/* ============================================================
   نظام عناصر الإدخال المشترك (V2)
   ============================================================
   قوائم مخصّصة بالكامل: appearance:none يزيل شكل المتصفح الأصلي، والسهم
   يُرسم كخلفية SVG بلون عائلة الأزرق نفسها -- فلا يبقى أي عنصر يبدو
   "نظام تشغيل" وسط واجهة مصمّمة (اعتراض صاحب المكتب الأساسي على صفحة
   العقارات القديمة).
   ============================================================ */
.v2-ctrl{
  width: 100%;
  min-height: 52px;
  padding-inline: 14px;
  border: 0;
  border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  box-shadow: inset 0 0 0 1px var(--v2-line-soft);
  color: var(--v2-ink);
  font-family: inherit; font-size: 15px; font-weight: 500;
  transition: box-shadow .2s var(--v2-ease);
}
.v2-ctrl::placeholder{ color: var(--v2-hint); font-weight: 400; }
.v2-ctrl:hover{ box-shadow: inset 0 0 0 1px var(--blue-border); }
.v2-ctrl:focus{ box-shadow: inset 0 0 0 2px var(--blue-primary); outline: none; }

select.v2-ctrl{
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 40px;
  cursor: pointer;
  /* السهم بلون --blue-primary حرفيًا (2B57CE) -- الأيقونة جزء من عائلة
     اللون لا لون مستقلّ. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232B57CE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left 15px center;
}

/* ============================================================
   صفحة العقارات -- ترويسة الصفحة
   ============================================================ */
.v2-page-head{
  padding-block: clamp(22px, 3vw, 40px) clamp(18px, 2.2vw, 28px);
  background: linear-gradient(178deg, var(--v2-bg) 0%, var(--v2-bg-2) 100%);
}
.v2-crumb{ font-size: 13px; font-weight: 500; color: var(--v2-faint); margin-bottom: 10px; }
.v2-crumb a{ color: var(--blue-primary); display: inline-flex; align-items: center; min-height: 44px; }
.v2-crumb a:hover{ color: var(--blue-primary-hover); }
.v2-page-head h1{ font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 8px; }
.v2-page-lede{ font-size: 15px; color: var(--v2-body); max-width: 60ch; }

/* ============================================================
   سطح الفلاتر
   ============================================================
   نفس عناصر الإدخال بالضبط على المقاسين: على سطح المكتب لوحة مدمجة، وعلى
   الجوال تتحوّل الحاوية نفسها إلى ورقة سفلية بـCSS فقط -- بلا نسخة ثانية
   من الحقول، فلا يوجد مصدران لحالة الفلتر الواحد أبدًا.
   ============================================================ */
.v2-filterbar{
  position: relative; z-index: 4;
  padding: 18px;
}
.v2-filter-grid{ display: grid; gap: 12px; }
@media (min-width: 720px){ .v2-filter-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px){ .v2-filter-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.v2-filter-more{ display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 720px){ .v2-filter-more{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px){ .v2-filter-more{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.v2-filter-more[hidden]{ display: none; }

.v2-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.v2-filter-foot{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.v2-filter-foot .v2-btn{ min-height: 50px; }
.v2-textbtn{
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding-inline: 12px;
  background: none; border: 0; border-radius: var(--v2-r-pill);
  color: var(--blue-primary); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--v2-ease);
}
.v2-textbtn:hover{ background: var(--blue-glass); }
.v2-textbtn[hidden]{ display: none; }

/* الفلاتر الفعّالة -- ما هو مطبَّق الآن، ظاهر بلا فتح أي لوحة */
.v2-activefilters{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px;
}
.v2-activefilters:empty{ display: none; }
.v2-pill{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding-inline: 13px;
  border-radius: var(--v2-r-pill);
  background: var(--blue-glass);
  color: var(--blue-deep); font-size: 13px; font-weight: 600;
}

/* شريط النتائج */
.v2-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-block: clamp(22px, 2.6vw, 34px) 18px;
}
.v2-count{ font-size: 15px; color: var(--v2-body); font-weight: 500; }
.v2-count b{ color: var(--v2-ink); font-size: 19px; font-weight: 800; }
.v2-sort{ display: flex; align-items: center; gap: 9px; }
.v2-sort label{ font-size: 13px; font-weight: 500; color: var(--v2-faint); white-space: nowrap; }
.v2-sort .v2-ctrl{ min-height: 46px; width: auto; min-width: 190px; }

/* زر فتح فلاتر الجوال */
.v2-filter-open{ display: none; }
.v2-filter-open .v2-badge[hidden]{ display: none; }
.v2-filter-open .v2-badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding-inline: 6px;
  border-radius: var(--v2-r-pill);
  background: #fff; color: var(--blue-primary);
  font-size: 12px; font-weight: 800;
}

/* ============================================================
   شبكة نتائج العقارات
   ============================================================
   عمودان إلى ثلاثة حسب العرض، بمقاس واحد لكل البطاقات: الإيقاع غير
   المتماثل مناسب لواجهة "مختارات" في الرئيسية، أما هنا فالمقارنة بين
   النتائج أهمّ من الزخرفة -- بطاقات متساوية تُقارَن بلمحة واحدة.
   ============================================================ */
.v2-results{ display: grid; gap: clamp(16px, 1.6vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 680px){ .v2-results{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px){ .v2-results{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* بطاقة site.js المشتركة (cardHTML) داخل صفحات V2 -- نفس شكل بطاقة
   الرئيسية بلا تعديل site.js نفسها (تستخدمها صفحات لم تُحوَّل بعد). */
.v2 .card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--v2-surface);
  border-radius: var(--v2-r);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--v2-line-soft), var(--v2-shadow-sm);
  transition: transform .4s var(--v2-ease), box-shadow .4s var(--v2-ease);
}
.v2 .card:hover{ transform: translateY(-4px); box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.v2 .card .ph,
.v2 .card-ph{
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #E9F1FB, #DCE8F7);
  overflow: hidden;
}
.v2 .card .ph img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--v2-ease); }
.v2 .card:hover .ph img{ transform: scale(1.04); }
.v2 .ph-empty{
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--v2-faint); font-size: 13px;
}
.v2 .card-link{ position: absolute; inset: 0; z-index: 2; }
.v2 .tags{ position: absolute; z-index: 3; inset-inline-start: 12px; top: 12px; display: flex; gap: 6px; }
.v2 .tag{
  padding: 6px 13px; border-radius: var(--v2-r-pill);
  background: rgba(255,255,255,.93); color: var(--v2-ink);
  font-size: 12.5px; font-weight: 700;
  box-shadow: var(--v2-shadow-sm);
}
.v2 .tag.rent{ background: var(--blue-primary); color: #fff; }
.v2 .fav-btn{
  position: absolute; z-index: 4; inset-inline-end: 10px; top: 10px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.93);
  box-shadow: var(--v2-shadow-sm);
  cursor: pointer;
  transition: transform .25s var(--v2-ease);
}
.v2 .fav-btn svg{ width: 19px; height: 19px; fill: none; stroke: var(--v2-ink); stroke-width: 1.7; }
.v2 .fav-btn:hover{ transform: scale(1.08); }
.v2 .fav-btn.on svg{ fill: var(--blue-primary); stroke: var(--blue-primary); }
.v2 .card-body{ display: flex; flex-direction: column; gap: 9px; padding: 16px 17px 14px; }
.v2 .card-meta{ font-size: 13px; font-weight: 500; color: var(--v2-faint); }
.v2 .card-promo{ font-size: 12.5px; font-weight: 700; color: #7A611F; }
.v2 .card-title{ font-size: 17px; font-weight: 700; line-height: 1.4; }
.v2 .card-title a{ color: var(--v2-ink); }
.v2 .card-title a::after{ content: ""; position: absolute; inset: 0; }
.v2 .specs{
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--v2-body);
}
.v2 .card-foot{
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 17px 16px;
  border-top: 1px solid var(--v2-line-soft);
}
.v2 .card-foot .price b{ color: var(--v2-ink); font-size: 19px; font-weight: 800; }
.v2 .card-foot .price .cur{ color: var(--v2-faint); font-size: 13px; }
.v2 .card-foot .wa{
  display: inline-flex; align-items: center;
  min-height: 40px; padding-inline: 16px;
  border-radius: var(--v2-r-pill);
  background: var(--blue-glass); color: var(--blue-deep);
  font-size: 13.5px; font-weight: 600;
  position: relative; z-index: 3;
}
.v2 .card-foot .wa:hover{ background: var(--blue-primary); color: #fff; }
.v2 .card.featured{ box-shadow: 0 0 0 1px #C9A24B, var(--v2-shadow-sm); }

/* ============================================================
   الحالة الفارغة لصفحة العقارات
   ============================================================ */
.v2-noresults{
  display: grid; gap: clamp(20px, 2.6vw, 38px);
  align-items: center;
  padding: clamp(24px, 3vw, 42px);
}
@media (min-width: 860px){ .v2-noresults{ grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr); } }
.v2-noresults[hidden]{ display: none; }
.v2-noresults h2{ font-size: clamp(21px, 2.2vw, 28px); margin-bottom: 10px; }
.v2-noresults p{ font-size: 14.5px; color: var(--v2-body); }
.v2-noresults-acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.v2-noresults-acts > span{ font-size: 13px; color: var(--v2-faint); }
.v2-noresults-acts .v2-btn,
.v2-noresults-acts .v2-btn-ghost{ min-height: 50px; }

/* اللوحة الزجاجية المعمارية -- نفس لغة الواجهة، بلا أي عقار وهمي */
.v2-noresults-art{
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--v2-r);
  background: linear-gradient(168deg, #F3F8FE 0%, #DFEAF8 100%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.v2-noresults-art::before,
.v2-noresults-art::after{
  content: "";
  position: absolute; bottom: 0;
  border-radius: 9px 9px 0 0;
}
.v2-noresults-art::before{
  inset-inline-start: 17%; width: 28%; top: 36%;
  background: linear-gradient(162deg, rgba(255,255,255,.97), rgba(213,230,250,.92) 64%, rgba(var(--blue-soft-rgb),.55));
  box-shadow: inset 0 1px 0 #fff, 0 18px 26px -20px rgba(var(--ink-rgb),.5);
}
.v2-noresults-art::after{
  inset-inline-end: 19%; width: 34%; top: 20%;
  background: linear-gradient(162deg, rgba(255,255,255,.92), rgba(197,219,246,.9) 58%, rgba(var(--blue-soft-rgb),.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 22px 30px -22px rgba(var(--ink-rgb),.45);
}
.v2-noresults-ring{
  position: absolute; left: 50%; top: 40%;
  width: 46%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-7deg);
  border-radius: 50%;
  pointer-events: none;
}
.v2-noresults-ring::before{
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; padding: 9px;
  background: conic-gradient(from 126deg,
    rgba(var(--blue-deep-rgb),.06) 0deg,
    rgba(var(--blue-deep-rgb),.8) 58deg,
    rgba(var(--blue-rgb),.75) 118deg,
    rgba(var(--blue-soft-rgb),.9) 168deg,
    rgba(255,255,255,1) 198deg,
    rgba(var(--blue-rgb),.45) 246deg,
    rgba(var(--blue-deep-rgb),.06) 330deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* نموذج تسجيل الطلب داخل الحالة الفارغة */
/* نموذج «بلّغني» بعد بحث بلا نتائج: نفس ترتيب نموذج الطلب في الرئيسية --
   تسميات فوق الحقول، ملخّص لما سيُحفَظ، وزر كامل العرض (صاحب المكتب: الاسم
   والهاتف كانا غير منظّمين، والخيارات غير مفهومة). */
.v2-want{ display: block; margin-top: 4px; }
.v2-want-fields{ display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 560px){ .v2-want-fields{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-want .v2-btn{ width: 100%; }
.v2-noresults .v2-want-sum{
  margin: 14px 0 6px; padding: 12px 14px;
  border-radius: var(--v2-r-sm);
  background: var(--blue-glass); color: var(--v2-ink);
  font-size: 14px; font-weight: 700; line-height: 1.6;
}
@media (max-width: 859px){ .v2-noresults-art{ display: none; } }
.v2-want[hidden]{ display: none; }
.v2-want .v2-btn{ min-height: 52px; }

/* ============================================================
   الورقة السفلية للفلاتر (الجوال)
   ============================================================ */
@media (max-width: 859px){
  .v2-filter-open{
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 50px; padding-inline: 20px;
    border: 0; border-radius: var(--v2-r-pill);
    background: var(--blue-primary); color: #fff;
    font-size: 15px; font-weight: 600;
    box-shadow: var(--v2-shadow-blue);
    cursor: pointer;
  }
  /* نفس سبب HOTFIX-CTA-CONTRAST: `.v2 button{color:inherit}` (0,1,1) كانت
     تغلب color:#fff أعلاه -- "الفلاتر" رمادي فوق الأزرق (1.1:1). */
  button.v2-filter-open{ color: #fff; }
  .v2-filterbar{
    position: fixed; inset: auto 0 0 0; z-index: 95;
    max-height: 88vh; overflow-y: auto;
    margin: 0;
    padding: 10px var(--v2-gut) calc(22px + env(safe-area-inset-bottom));
    border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0;
    background: #fff;
    box-shadow: 0 -20px 50px -30px rgba(var(--ink-rgb),.6);
    transform: translateY(101%);
    transition: transform .32s var(--v2-ease);
    visibility: hidden;
  }
  .v2-filterbar::after{ display: none; }   /* حافة الزجاج لا معنى لها كورقة */
  body.filters-open .v2-filterbar{ transform: translateY(0); visibility: visible; }
  .v2-filter-scrim{
    position: fixed; inset: 0; z-index: 94;
    background: rgba(var(--ink-rgb),.44);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--v2-ease), visibility .25s var(--v2-ease);
  }
  body.filters-open .v2-filter-scrim{ opacity: 1; visibility: visible; }
  body.filters-open{ overflow: hidden; }
  .v2-sheet-grip{ width: 42px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: var(--v2-line); }
  .v2-filter-foot{ position: sticky; bottom: 0; background: #fff; padding-block: 12px 4px; }
  .v2-filter-foot .v2-btn{ flex: 1 1 auto; }
  .v2-sort{ margin-inline-start: auto; }
  .v2-sort .v2-ctrl{ min-width: 0; }
}
@media (min-width: 860px){
  .v2-filter-scrim, .v2-filterbar .v2-sheet-grip{ display: none; }
}

/* ============================================================
   الصفحات الداخلية العامة (المقيّم، الضريبة، المفضّلة، الخصوصية)
   ============================================================
   هذه الصفحات كانت آخر ما بقي على styles.css القديم بلا body.v2 -- لا فرق
   "مسافات" بل نظامان تصميميان مختلفان على موقع واحد. ما يلي هو المفردات
   الصغيرة التي تحتاجها لتتكلّم لغة V2 نفسها، بلا نظام جديد: كل قيمة هنا
   من الرموز القائمة (--v2- و --blue-)، وكل ما أمكن إعادة استعماله
   (.v2-glass/.v2-field/.v2-ctrl/.v2-btn/.v2-empty/.v2-page-head) أُعيد
   استعماله كما هو بدل تكرار شكله.
   ============================================================ */

/* هياكل التحميل داخل V2 -- بطاقة site.js المشتركة لها أصلًا شكل V2
   (.v2 .card أعلاه)، لكن هيكلها المؤقّت لم يكن له أي شكل فيبدو مستطيلات
   بيضاء عمياء. نفس نبض styles.css بالضبط، بألوان V2. */
.v2 .skel{
  background-color: var(--v2-wash, rgba(var(--blue-rgb), .07));
  background-image: linear-gradient(90deg,
    rgba(var(--blue-rgb), .07) 8%, rgba(255,255,255,.85) 22%, rgba(var(--blue-rgb), .07) 36%);
  background-size: 468px 100%;
  animation: v2-skel 1.5s linear infinite;
}
@keyframes v2-skel{ from{ background-position: 468px 0 } to{ background-position: -468px 0 } }
.v2 .skel-card{ pointer-events: none; }
.v2 .skel-card .ph{ background: rgba(var(--blue-rgb), .07); }
.v2 .skel-card .ph::before, .v2 .skel-card .ph::after{ display: none; }
.v2 .skel-line{ display: block; border-radius: 6px; }
@media (prefers-reduced-motion: reduce){ .v2 .skel{ animation: none } }

/* ---------- أداة صفحة داخلية: نموذج + نتيجة ---------- */
.v2-tool{
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
}
@media (min-width: 900px){
  .v2-tool{ grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
.v2-tool-panel{ padding: clamp(18px, 2.2vw, 26px); }
.v2-tool-panel .v2-btn{ width: 100%; margin-top: 16px; }
/* الرقم هو بطل هذه الصفحة: أكبر وأوضح من أي حقل آخر، وبأرقام جدولية
   فلا "ترقص" الخانات بين إدخال وآخر. */
.v2-tool-panel .v2-ctrl{
  font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  min-height: 58px;
}

/* ---------- بطاقة النتيجة ---------- */
/* .show/.pulse يبدّلهما JS القائم -- الأسماء كما هي عمدًا فلا يُمسّ المنطق. */
.v2-result{
  padding: clamp(20px, 2.4vw, 30px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--v2-ease), transform .45s var(--v2-ease);
  pointer-events: none;
}
.v2-result.show{ opacity: 1; transform: none; pointer-events: auto; }
.v2-result.pulse{ animation: v2-result-pulse .6s var(--v2-ease); }
@keyframes v2-result-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--blue-rgb), .34) }
  100%{ box-shadow: 0 0 0 16px rgba(var(--blue-rgb), 0) }
}
@media (prefers-reduced-motion: reduce){
  .v2-result{ transition: none; transform: none; }
  .v2-result.pulse{ animation: none; }
}
.v2-result-eyebrow{
  margin-bottom: 14px;
  color: var(--v2-faint); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
/* صفّ قيمة: التسمية يمين والرقم يسار، والرقم دومًا LTR بأرقام جدولية */
.v2-row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-block: 11px;
  border-bottom: 1px solid var(--v2-line-soft);
}
.v2-row .lbl{ color: var(--v2-body); font-size: 14px; }
.v2-row .val{
  color: var(--v2-ink); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
/* الإجمالي هو ما يبحث عنه الزبون فعلًا -- يُفصَل بصريًا لا بحجم الخطّ وحده */
.v2-row.grand{
  margin-top: 6px; border-bottom: 0;
  padding-top: 16px; border-top: 2px solid rgba(var(--blue-rgb), .22);
}
.v2-row.grand .lbl{ color: var(--v2-ink); font-weight: 600; font-size: 15px; }
.v2-row.grand .val{ color: var(--v2-blue); font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; }

.v2-disclaimer{ margin-top: 14px; font-size: 12.5px; line-height: 1.75; color: var(--v2-faint); }

/* طيّة التفاصيل -- مغلقة افتراضيًا: الرقم يكفي أغلب الزبائن */
.v2-details{ margin-top: 18px; border-top: 1px solid var(--v2-line-soft); padding-top: 14px; }
.v2-details summary{
  cursor: pointer; list-style: none;
  color: var(--v2-blue); font-size: 14px; font-weight: 600;
  padding-block: 6px; min-height: 30px;
}
.v2-details summary::-webkit-details-marker{ display: none; }
.v2-details summary::before{ content: "▾ "; display: inline-block; transition: transform .3s var(--v2-ease); }
.v2-details[open] summary::before{ transform: rotate(180deg); }
.v2-table{ width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.v2-table th, .v2-table td{ padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--v2-line-soft); }
.v2-table th{ color: var(--v2-faint); font-weight: 600; font-size: 12.5px; }
.v2-table td{ color: var(--v2-body); font-variant-numeric: tabular-nums lining-nums; }
.v2-table-scroll{ overflow-x: auto; }

/* ---------- حالة "قيد التطوير" ----------
   ليست حالة خطأ ولا صفحة فارغة: قرار منتج معلن. تُعرَض بلغة المشهد نفسها
   (زجاج + حلقة بصرية مصغّرة) فتبدو مقصودة لا ناقصة، وبلا أي نتيجة ملفّقة. */
.v2-soon{
  display: grid; gap: clamp(20px, 2.6vw, 34px); align-items: center;
  padding: clamp(24px, 3.2vw, 44px);
  text-align: center;
}
@media (min-width: 820px){
  .v2-soon{ grid-template-columns: auto minmax(0, 1fr); text-align: start; }
}
.v2-soon-art{
  position: relative;
  width: clamp(104px, 16vw, 148px); aspect-ratio: 1;
  margin-inline: auto;
}
.v2-soon-art::before,
.v2-soon-art::after{
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
}
.v2-soon-art::before{
  background: conic-gradient(from 126deg,
    rgba(var(--blue-deep-rgb),.05) 0deg, rgba(var(--blue-deep-rgb),.55) 58deg,
    rgba(var(--blue-rgb),.5) 118deg, rgba(var(--blue-soft-rgb),.6) 168deg,
    rgba(255,255,255,.95) 198deg, rgba(var(--blue-rgb),.32) 246deg,
    rgba(var(--blue-deep-rgb),.06) 300deg, rgba(var(--blue-deep-rgb),.05) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 11px;
}
.v2-soon-art::after{
  inset: 26%;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(var(--blue-soft-rgb),.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.v2-soon h2{ font-size: clamp(19px, 2.2vw, 25px); margin-bottom: 10px; }
.v2-soon p{ color: var(--v2-body); font-size: 15px; line-height: 1.85; max-width: 56ch; }
.v2-soon-acts{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }
@media (min-width: 820px){ .v2-soon-acts{ justify-content: flex-start; } }
.v2-soon-acts .v2-btn, .v2-soon-acts .v2-btn-ghost{ min-height: 50px; }

/* ---------- نصّ قانوني طويل (الخصوصية) ----------
   عرض القراءة محدود بالمحارف لا بالبكسل: سطر عربي طويل جدًا يُتعب العين
   مهما اتّسعت الشاشة. */
.v2-prose{ max-width: 68ch; }
.v2-prose h2{
  margin-top: clamp(28px, 3.2vw, 42px); margin-bottom: 10px;
  font-size: clamp(18px, 2vw, 22px);
}
.v2-prose h2:first-child{ margin-top: 0; }
.v2-prose h3{ margin-top: 22px; margin-bottom: 8px; font-size: 16px; }
.v2-prose p, .v2-prose li{ color: var(--v2-body); font-size: 15px; line-height: 1.95; }
.v2-prose p{ margin-bottom: 12px; }
.v2-prose ul, .v2-prose ol{ margin: 0 0 14px; padding-inline-start: 20px; }
.v2-prose li{ margin-bottom: 7px; }
.v2-prose a{ color: var(--v2-blue); text-decoration: underline; text-underline-offset: 3px; }
.v2-prose strong, .v2-prose b{ color: var(--v2-ink); font-weight: 700; }

/* الحالة الفارغة التي يبدّلها JS بصنف .show (المفضّلة) -- صنف منفصل عمدًا:
   .v2-empty نفسها تُخفى بسمة hidden في الرئيسية، فجعلها display:none
   افتراضيًا هنا كان سيكسر تلك الصفحة. */
.v2-empty-toggle{ display: none; }
.v2-empty-toggle.show{ display: block; }

/* ============================================================
   صفحة العقار (property.html)
   ============================================================
   آخر صفحة عامة كانت باقية على styles.css. التحويل بصري بحت: كل معرّفات
   DOM وكل منطق السكربت كما هو بالحرف، وما تغيّر هنا أسماء أصناف العرض
   فقط. البنية: عمود محتوى واسع (معرض + عنوان + مواصفات + وصف + فيديو +
   خريطة) وبطاقة تواصل جانبية لاصقة على سطح المكتب، وشريط سفلي على
   الجوال حيث لا مكان للبطاقة اللاصقة -- نفس سلوك .dock القديم بالضبط.
   ============================================================ */
.v2-detail-top{ padding-block: clamp(14px, 2vw, 24px) 0; }

.v2-detail{
  display: grid; gap: clamp(24px, 3vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
  padding-bottom: var(--v2-sec);
}
.v2-detail-main{ min-width: 0; }

/* ---------- المعرض ---------- */
.v2-gallery{ margin: 0; }
/* الإطار هو ما يحدّد القصّ لا ملف الصورة: صور المكتب ملتقطة بهواتف مختلفة
   بنِسَب مختلفة، ونسبة ثابتة تجعلها تُقرأ كمجموعة واحدة. */
.v2-gallery-main{
  position: relative; display: block; width: 100%;
  margin: 0; padding: 0; border: 0; appearance: none;
  font: inherit; color: inherit; text-align: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--v2-r);
  background: var(--v2-bg-2);
  box-shadow: var(--v2-shadow);
  cursor: zoom-in;
}
.v2-gallery-main img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-gallery-main img[hidden]{ display: none; }
.v2-gallery-empty{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--v2-faint); font-size: 14px;
}
.v2-gallery-empty[hidden]{ display: none; }
/* تلميح التكبير: علامة صغيرة تكفي لفهم أن الصورة قابلة للنقر، بلا لافتة
   نصّية تغطّي العقار نفسه. */
.v2-zoom{
  position: absolute; z-index: 3;
  inset-block-end: 12px; inset-inline-end: 12px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: var(--v2-shadow-sm);
}
.v2-zoom svg{ width: 16px; height: 16px; fill: none; stroke: var(--v2-ink); stroke-width: 1.6; }

/* شبكة ملتفّة لا شريط تمرير أفقي: التمرير الأفقي داخل صفحة RTL طويلة هو
   أكثر ما يُربك، والالتفاف يُظهر كل الصور دفعة واحدة. */
.v2-thumbs{
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  margin-top: 12px;
}
.v2-thumbs:empty{ display: none; }
.v2-thumb{
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1;
  border-radius: var(--v2-r-sm);
  background: var(--v2-bg-2);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
  transition: box-shadow .2s var(--v2-ease), transform .2s var(--v2-ease);
}
.v2-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-thumb:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px var(--v2-blue-soft); }
.v2-thumb.on{ box-shadow: 0 0 0 2px var(--blue-primary); }

/* ---------- العنوان والسعر ---------- */
.v2-phead{
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 22px;
  margin-top: clamp(20px, 2.4vw, 30px);
}
.v2-phead-txt{ min-width: 0; }
.v2-phead h1{ font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 6px; }
.v2-ploc{ font-size: 14px; color: var(--v2-faint); }
.v2-pprice b{ font-size: clamp(22px, 2.4vw, 30px); }

/* حالة توفّر حقيقية -- تحذير لا زخرفة، فلا تُخفَّف حتى لا تُقرأ كوسم عادي. */
.v2-availability{
  display: none;               /* يُظهرها السكربت بـstyle.display لعقار غير متاح */
  margin-top: 14px; padding: 12px 16px;
  border-radius: var(--v2-r-sm);
  background: #FDECEC;
  color: #9B1C1C; font-weight: 700; font-size: 14.5px;
}

/* ---------- الشريط المواصفاتي ---------- */
.v2-specstrip{
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: clamp(18px, 2vw, 26px);
}
.v2-spec{
  padding: 14px 16px;
  border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
}
.v2-spec-l{ font-size: 12.5px; color: var(--v2-faint); margin-bottom: 4px; }
.v2-spec-v{ font-size: 16px; font-weight: 700; color: var(--v2-ink); }

/* ---------- كتل المحتوى ---------- */
.v2-block{ margin-top: clamp(28px, 3.2vw, 44px); }
.v2-block h2{ font-size: clamp(19px, 1.9vw, 24px); margin-bottom: 12px; }
.v2-block p{ font-size: 15px; line-height: 1.95; color: var(--v2-body); white-space: pre-line; }
.v2-block .v2-btn{ margin-top: 12px; }
.v2-media{
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--v2-r);
  background: var(--v2-bg-2);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
}
.v2-media iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- بطاقة التواصل الجانبية ---------- */
.v2-side{
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--v2-r);
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-line-soft), var(--v2-shadow);
}
.v2-side h3{ font-size: 19px; margin-bottom: 8px; }
.v2-side p{ font-size: 14.5px; line-height: 1.85; color: var(--v2-body); margin-bottom: 16px; }
.v2-side .v2-btn{ width: 100%; }
.v2-side-alt{
  width: 100%; margin-top: 10px;
  min-height: 50px; padding-inline: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--v2-r-pill);
  background: transparent; color: var(--v2-ink);
  box-shadow: inset 0 0 0 1px var(--v2-line);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: color .2s var(--v2-ease), box-shadow .2s var(--v2-ease);
}
.v2-side-alt:hover{ color: var(--blue-primary); box-shadow: inset 0 0 0 1px var(--blue-primary); }
.v2-side-alt.on{ color: var(--blue-primary); box-shadow: inset 0 0 0 2px var(--blue-primary); }

/* ---------- الشريط السفلي على الجوال ---------- */
.v2-dock{ display: none; }

/* ---------- العارض ملء الشاشة ----------
   المعرّفات التي يربطها initLightbox() في site.js عقد مشترك مع كل صفحة
   تستعمله -- ما نُقل إلى V2 هنا هو الشكل وحده. */
.v2-lightbox{
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  /* الحشوة العلوية تترك مكان زرّ الإغلاق، والسفلية تحترم شريط الإيماءات
     على الهواتف ذات الحافة المنحنية -- كما كانت في styles.css بالضبط. */
  padding: calc(64px + env(safe-area-inset-top, 0px)) 14px calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 18, 34, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.v2-lightbox[hidden]{ display: none; }
.v2-lightbox-stage{
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.v2-lightbox-stage img{
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--v2-r-sm);
  -webkit-user-select: none; user-select: none;
}
.v2-lightbox-spin{
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: v2lbspin .8s linear infinite;
}
@keyframes v2lbspin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .v2-lightbox-spin{ animation-duration: 2.4s; } }
.v2-lightbox-close, .v2-lightbox-nav{
  position: absolute; z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.34); border-radius: 50%;
  background: rgba(255,255,255,.06); color: #fff;
  cursor: pointer;
  transition: background .2s var(--v2-ease), border-color .2s var(--v2-ease);
}
.v2-lightbox-close svg, .v2-lightbox-nav svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.v2-lightbox-close:hover, .v2-lightbox-nav:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.62); }
/* مواضع فيزيائية لا منطقية عمدًا -- قرار موثَّق في التصميم السابق: يمين =
   السابقة، يسار = التالية، والإغلاق يسارًا، بغضّ النظر عن اتجاه نص
   الصفحة. الصور تسلسل بصري لا نص، وسحب الإصبع في site.js يتبع المنطق
   الفيزيائي نفسه -- عكس أحدهما دون الآخر يجعل الزرّ والسحب متناقضين. */
.v2-lightbox-close{ top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; }
.v2-lightbox-nav{ top: 50%; transform: translateY(-50%); }
.v2-lightbox-nav[hidden]{ display: none; }
.v2-lightbox-prev{ right: 14px; }
.v2-lightbox-next{ left: 14px; }
@media (max-width: 640px){
  .v2-lightbox-prev{ right: 8px; }
  .v2-lightbox-next{ left: 8px; }
}

/* ---------- توافق: حالة تعذّر التحميل المشتركة ----------
   renderLoadError() في site.js تبني .empty-state/.btn بأسماء styles.css --
   دالة واحدة تخدم كل الصفحات فلا يمكن تغيير مخرجها لصفحة بعينها. بلا هذه
   الكتلة كانت الحالة تظهر في كل صفحات V2 (الرئيسية، العقارات، المفضّلة،
   والعقار) بلا أي تنسيق: نصّ عارٍ وزرّ متصفّح خام بارتفاع 25px -- عطل
   مقيس فعليًا لا افتراض. */
.v2 .empty-state{
  padding: 40px 22px; text-align: center;
  border-radius: var(--v2-r);
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-line-soft);
  color: var(--v2-body);
}
.v2 .empty-state b{ display: block; margin-bottom: 6px; color: var(--v2-ink); font-size: 17px; }
.v2 .empty-state p{ margin-bottom: 16px; }
.v2 .btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding-inline: 26px;
  border: 0; border-radius: var(--v2-r-pill);
  background: var(--blue-primary); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--v2-shadow-blue);
  transition: background .2s var(--v2-ease), transform .2s var(--v2-ease);
}
.v2 .btn:hover{ background: var(--blue-primary-hover); transform: translateY(-1px); }

/* ============================================================
   تجاوزات المقاس -- بعد القواعد الأساسية عمدًا
   ============================================================
   كتلة @media بنفس الخصوصية موضوعة *قبل* القاعدة الأساسية تخسر بترتيب
   المصدر وتُلغى صامتة. وقع هذا مرّتين في هذا الملف سابقًا، فكل تجاوز
   مقاس لصفحة العقار يعيش هنا في الأسفل.
   ============================================================ */
/* تلميح التكبير: يظهر بالمرور على الأجهزة التي تملك مؤشّرًا (كما كان في
   styles.css بالضبط)، ويبقى ظاهرًا دائمًا على اللمس -- هناك لا مرور
   أصلًا، فإخفاؤه كان يعني ألّا يعرف زائر الجوال أن الصورة تُفتح بملء
   الشاشة. */
@media (hover: hover) and (pointer: fine){
  .v2-zoom{
    opacity: 0; transform: translateY(4px);
    transition: opacity .4s var(--v2-ease), transform .4s var(--v2-ease);
  }
  .v2-gallery-main:hover .v2-zoom{ opacity: 1; transform: none; }
}

@media (min-width: 760px){
  .v2-gallery-main{ aspect-ratio: 16 / 10; }
  .v2-thumbs{ grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media (min-width: 1000px){
  .v2-detail{ grid-template-columns: minmax(0, 1fr) 340px; }
  /* 88px = ارتفاع الترويسة اللاصقة على سطح المكتب + هامش تنفّس، نفس الرقم
     المستعمل في scroll-padding-top أعلى الملف. */
  .v2-side{ position: sticky; top: 100px; }
}

/* الشريط السفلي يظهر فقط حيث تختفي البطاقة الجانبية اللاصقة (دون 1000px)،
   فلا يبقى الزائر على صفحة طويلة بلا وسيلة تواصل ظاهرة. */
@media (max-width: 999.98px){
  .v2-has-dock{ padding-bottom: 62px; }
  .v2-dock{
    display: grid; grid-template-columns: 1.6fr 1fr;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
    border-top: 1px solid var(--v2-line-soft);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .v2-dock a{
    display: flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 8px 10px;
    font-size: 14.5px; font-weight: 700;
    background: var(--blue-primary); color: #fff;
  }
  .v2-dock .v2-dock-alt{ background: transparent; color: var(--v2-ink); font-weight: 600; }
}

/* ============================================================
   الوضع الداكن «المنارة» -- ما لا تغطّيه الرموز
   ============================================================
   الرموز في :root[data-theme="dark"] أعلاه تقلب أغلب الموقع وحدها. هنا
   المواضع التي كُتبت بألوان حرفية فاتحة (زجاج أبيض، تدرّجات خلفية، رقائق
   فوق الصور)، أو التي تستعمل --v2-ink خلفيةً (يصير فاتحًا في الداكن)، أو
   تضع نصًّا أبيض فوق الأزرق (يصير فولاذيًا فاتحًا هنا فيحمل نصًّا داكنًا).
   الواجهة: العدسة الكريستالية هي ضوء المنارة -- زجاج فضّي مضيء على ليل
   فحمي، والهالة خلفها ضوء فضّي أبيض لا أزرق. الحلقة والإطار فضّيان بدل
   الأزرق المشبع (اللوحة شبه خالية من اللون). */
[data-theme="dark"] .v2-head{ background: rgba(18,22,29,.8); }
[data-theme="dark"] .v2-head.stuck{ background: rgba(18,22,29,.94); }
[data-theme="dark"] .v2-menu{ background: linear-gradient(170deg, #1A1F28 0%, var(--v2-bg-2) 100%); }
[data-theme="dark"] .v2-glass{
  background: linear-gradient(150deg, rgba(44,52,66,.72) 0%, rgba(30,36,46,.58) 48%, rgba(38,46,60,.5) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--v2-line-soft), var(--v2-shadow);
}
[data-theme="dark"] .v2-glass::after{ opacity: .2; }

/* نصّ داكن فوق الأزرق الفولاذي (الأزرار والشارات والرقائق المختارة) */
[data-theme="dark"] a.v2-btn,
[data-theme="dark"] button.v2-btn,
[data-theme="dark"] a.v2-head-cta,
[data-theme="dark"] a.v2-skip,
[data-theme="dark"] .v2 .btn,
[data-theme="dark"] button.v2-filter-open,
[data-theme="dark"] .v2 .card-foot .wa:hover{ color: var(--v2-on-accent); }
[data-theme="dark"] .v2-chip.active{ background: var(--v2-blue); color: var(--v2-on-accent); }
[data-theme="dark"] .v2-tag.rent,
[data-theme="dark"] .v2 .tag.rent{ background: var(--v2-blue); color: var(--v2-on-accent); }
@media (max-width: 999px){
  [data-theme="dark"] .v2-dock a{ color: var(--v2-on-accent); }
  [data-theme="dark"] .v2-dock .v2-dock-alt{ color: var(--v2-ink); }
  [data-theme="dark"] .v2-dock{ background: rgba(20,24,31,.95); }
}

/* الواجهة */
[data-theme="dark"] .v2-hero[data-hero-lens]{
  background:
    radial-gradient(70% 45% at 50% 62%, rgba(214,222,236,.09), rgba(214,222,236,0) 70%),
    linear-gradient(178deg, #171C24 0%, #12161D 55%, #14181F 100%);
}
[data-theme="dark"] .v2-hero[data-hero-lens]::before{ opacity: .2; }
[data-theme="dark"] [data-hero-lens] .v2-stage::before{
  background: radial-gradient(50% 50% at 50% 50%, rgba(226,232,242,.26), rgba(200,210,226,.09) 45%, rgba(200,210,226,0) 72%);
}
[data-theme="dark"] [data-hero-lens] .v2-stage-bloom{
  background: radial-gradient(circle at 50% 50%, rgba(236,240,247,.34), rgba(190,202,222,.12) 42%, rgba(190,202,222,0) 70%);
}
[data-theme="dark"] [data-hero-lens] .v2-ring-back{
  box-shadow: 0 28px 34px rgba(0,0,0,.45), 0 0 46px rgba(214,222,236,.1);
}
[data-theme="dark"] [data-hero-lens] .v2-ring-back::before{
  background:
    radial-gradient(closest-side,
      transparent calc(100% - var(--rw)),
      rgba(120,136,164,.75) calc(100% - var(--rw) + 1px),
      rgba(192,202,220,.6) calc(100% - var(--rw) * .82),
      rgba(246,248,252,.95) calc(100% - var(--rw) * .55),
      rgba(214,222,236,.7) calc(100% - var(--rw) * .28),
      rgba(104,120,150,.8) calc(100% - 1.5px),
      transparent 100%),
    conic-gradient(from 150deg, rgba(255,255,255,.5), rgba(170,182,204,.35) 90deg, rgba(255,255,255,.6) 190deg, rgba(150,164,190,.45) 280deg, rgba(255,255,255,.5));
}
[data-theme="dark"] [data-hero-lens] .v2-stage-card{
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,1),
    inset 0 0 0 4px rgba(190,200,218,.3),
    inset 0 0 0 5.5px rgba(255,255,255,.85),
    inset 0 0 0 10px rgba(255,255,255,.26),
    inset 0 0 24px 3px rgba(255,255,255,.9),
    inset 0 -12px 20px -8px rgba(120,136,164,.3),
    0 0 0 1px rgba(170,182,204,.5),
    0 2px 0 0 rgba(238,241,246,.98),
    0 4px 0 0 rgba(208,215,227,.96),
    0 6px 0 0 rgba(172,183,202,.92),
    0 8px 0 0 rgba(122,136,160,.6),
    0 30px 44px -20px rgba(0,0,0,.55),
    0 54px 84px -40px rgba(214,222,236,.16);
}
[data-theme="dark"] [data-hero-lens] .v2-stage-card::before{
  background: radial-gradient(circle at 34% 26%, #fff 0%, rgba(240,243,248,.9) 30%, rgba(200,208,222,.78) 66%, rgba(255,255,255,.96) 100%);
}
[data-theme="dark"] [data-hero-lens] .v2-stage-card-body{
  background: rgba(20,25,33,.74);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 8px 12px -10px rgba(255,255,255,.32),
    0 0 0 1px rgba(170,182,204,.28),
    0 12px 26px -14px rgba(0,0,0,.75);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  [data-theme="dark"] [data-hero-lens] .v2-stage-card-body{
    background: linear-gradient(180deg, rgba(34,40,51,.72), rgba(18,22,29,.64));
  }
}
[data-theme="dark"] [data-hero-lens] .v2-stage-card-body .v2-stage-price{ color: #A9BCE3; }
/* رسم «لا صورة بعد» (برجان زجاجيان): زجاج أردوازي بدل الأبيض */
[data-theme="dark"] .v2-stage-blank::before{
  background: linear-gradient(162deg, rgba(150,162,184,.5) 0%, rgba(62,72,90,.62) 62%, rgba(var(--blue-rgb),.28) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 34px -24px rgba(0,0,0,.8);
}
[data-theme="dark"] .v2-stage-blank::after{
  background: linear-gradient(162deg, rgba(136,148,170,.46) 0%, rgba(54,64,82,.62) 58%, rgba(var(--blue-rgb),.32) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 22px 30px -22px rgba(0,0,0,.8);
}

/* الأقسام والبطاقات */
[data-theme="dark"] .v2-sec-alt{ background: linear-gradient(178deg, #171B23 0%, var(--v2-bg) 100%); }
[data-theme="dark"] .v2-card-ph,
[data-theme="dark"] .v2 .card .ph,
[data-theme="dark"] .v2-stage-blank{ background: linear-gradient(160deg, #222933, #1A1F28); }
[data-theme="dark"] .v2-tag,
[data-theme="dark"] .v2-fav,
[data-theme="dark"] .v2 .tag,
[data-theme="dark"] .v2 .fav-btn,
[data-theme="dark"] .v2-zoom{ background: rgba(18,22,29,.82); color: var(--v2-ink); }
[data-theme="dark"] .v2 .card-promo{ color: #D9B45A; }
[data-theme="dark"] .v2-skel-ph,
[data-theme="dark"] .v2-skel-line{ background-image: linear-gradient(100deg, #1C222B 30%, #242B36 50%, #1C222B 70%); }
[data-theme="dark"] .v2 .skel{ background-image: linear-gradient(100deg, rgba(255,255,255,.03) 8%, rgba(255,255,255,.08) 22%, rgba(255,255,255,.03) 36%); }

/* النماذج واللوحات */
[data-theme="dark"] .v2-sheet-panel,
[data-theme="dark"] .v2-filterbar,
[data-theme="dark"] .v2-filter-foot{ background: var(--v2-surface); }
[data-theme="dark"] .v2-filter-open .v2-badge{ background: var(--v2-ink); color: var(--v2-bg); }
[data-theme="dark"] .v2-note.err{ color: #FF8A8A; }
[data-theme="dark"] .v2-field input.bad,
[data-theme="dark"] .v2-field select.bad{ box-shadow: inset 0 0 0 2px #FF7070; }
[data-theme="dark"] .v2-availability{ background: rgba(220,70,70,.14); color: #FFB0B0; }

/* رسوم الحالات الفارغة */
/* .v2-soon-art بلا خلفية أصلًا (حلقة حرّة فوق البطاقة) -- لا يُعطى مربّعًا هنا */
[data-theme="dark"] .v2-noresults-art{ background: linear-gradient(168deg, #1E242E 0%, #171B23 100%); }
[data-theme="dark"] .v2-noresults-art::before,
[data-theme="dark"] .v2-noresults-art::after,
[data-theme="dark"] .v2-soon-art::after{
  background: linear-gradient(162deg, rgba(120,132,154,.5), rgba(58,66,82,.5) 60%, rgba(var(--blue-rgb),.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 30px -22px rgba(0,0,0,.7);
}

/* التذييل: كان --v2-ink خلفيةً (يصير فاتحًا هنا) */
[data-theme="dark"] .v2-foot{ background: #0C0F14; box-shadow: inset 0 1px 0 var(--v2-line-soft); }

/* شريط «أعلن معنا»: أردوازي عميق بدل تدرّج الكحلي (مبنيّ على رموز تنقلب هنا) */
[data-theme="dark"] .v2-cta-band{ background: linear-gradient(140deg, #222A37 0%, #2C3A52 62%, #3A4C6A 100%); }
[data-theme="dark"] .v2-cta-band .v2-btn{ background: #E8ECF2; color: #12161D; }
[data-theme="dark"] .v2-cta-band .v2-btn:hover{ background: #FFFFFF; }

/* ستار تبديل المظهر (site.js: switchTheme) -- يعتم بلون الوجهة ثم ينقشع */
.v2-theme-veil{
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none; opacity: 0;
  transition: opacity .32s cubic-bezier(.4, 0, .2, 1);
}
.v2-theme-veil.is-in{ opacity: 1; }
.v2-theme-veil.is-out{ opacity: 0; transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }
html.theme-swap *,
html.theme-swap *::before,
html.theme-swap *::after{ transition: none !important; }