/* =================================================================
   شركة بيت النائف للتطوير العقاري — التنسيقات الرئيسية (style.css)
   مستخرجة ومُنظّفة من ثيم قديم. تحتوي على متغيرات الألوان،
   الخطوط، الترويسة، القائمة، السلايدر الترحيبي، والتذييل.
   ================================================================= */

/* =================================================================
   أساسيات بديلة عن Bootstrap — كل ما كان الموقع يستخدمه فعلياً
   (container / row / table-responsive + تصفير الهوامش الافتراضية)
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; color: #212529; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; }
img, svg { vertical-align: middle; }
button, input, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button { cursor: pointer; }

/* حاوية سائلة: تملأ عرض الشاشة بحواف مرنة (14px جوال → 28px تابلت)
   بلا عتبات Bootstrap المتدرجة التي كانت تخلق فراغات جانبية ضخمة؛
   التقييد الأقصى للشاشات الكبيرة فقط حيث صُمم التخطيط. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(14px, 3vw, 28px);
}
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row { display: flex; flex-wrap: wrap; }

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =================================================================
   حاويات الوسائط الثقيلة (media_slot) — معزولة تماماً عن بقية الصفحة
   contain + content-visibility: لا تشارك في حسابات التخطيط ولا الرسم
   حتى تقترب من الشاشة. أبعاد محجوزة مسبقاً = صفر إزاحة تخطيط (CLS).
   تُملأ عبر assets/js/media-loader.js عند إضافة data-media-src فقط.
   ================================================================= */
.media_slot {
  position: relative;
  overflow: hidden;
  contain: content;
  content-visibility: auto;
  background: #10190f;
  border-radius: 16px;
  aspect-ratio: var(--media-ratio, 16 / 9);
}
/* حاوية بلا مصدر = خاملة ومخفية بالكامل (صفر تكلفة) */
.media_slot:not([data-media-src]) { display: none; }

.media_slot > video,
.media_slot > iframe,
.media_slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.media_slot.media_loaded > video,
.media_slot.media_loaded > iframe,
.media_slot.media_loaded > img { opacity: 1; }

/* متغيّر الهيرو: فيديو خلفية خلف التظليل وفوق الصورة الثابتة (طبقة 2) */
.media_slot--hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 0;
  aspect-ratio: auto;
  background: transparent;
}

:root {
  --primary: #3c7d3c;
  --secondary: #dbb23d;
  --middle: #6b8d3c;
  /* تدرج الهوية الموحّد: يستهلكه اللودر والقائمة المنسدلة وأي سطح علامة قادم */
  --brand-gradient: linear-gradient(45deg, var(--primary) 0%, var(--middle) 50%, var(--secondary) 100%);
  --navy: #1a2b3c;
  --text-dark: #3a4636;
  --white: #ffffff;
  --grey-dark: #4d4d4d;
  --grey-mdium: #777777;
  --grey-light: #d7d7d7;
  --font-regular: 'Almarai', sans-serif;
  --font-medium: 'Almarai', sans-serif;
  --font-bold: 'Almarai', sans-serif;
}

/* الخط الأساسي: Almarai بثلاثة أوزان (400/700/800) — يُحمَّل عبر <link> في ترويسة الصفحات (أسرع من @import).
   نستثني الأيقونات (<i> و .fa-*) عمداً حتى لا نكسر خطوط Font Awesome. */
/* قاعدة الخط الوحيدة: Almarai لكل شيء ما عدا عناصر الأيقونات (<i> وكل
   fa-*) — الاستثناء في المحدِّد نفسه يترك Font Awesome يدير خطوطه
   (Free/Brands) بلا أي قواعد إعادة تأكيد أو صراعات !important. */
*:not(i):not([class*="fa-"]):not([class*="fab"]), body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea {
  font-family: 'Almarai', sans-serif !important;
}

/* توزيع الأوزان — نظام الثلاثة أوزان */
/* عادي (400) لنص المتن والفقرات والتسميات الصغيرة */
body, p, span, a, input, select, textarea, .stat_label, .project_location { font-weight: 400 !important; }
/* ثقيل (700) للعناوين القياسية والأزرار والبطاقات */
h3, h4, h5, h6, button, .register-btn, .project_title { font-weight: 700 !important; }
/* ثقيل جداً (800) للعلامة الرئيسية والأرقام الكبيرة وعناوين الأقسام */
h1, h2, .section_title, .stat_num { font-weight: 800 !important; }

/* تنعيم الخط لتخفيف ثِقَل الوزن الغامق البصري */
*, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* لون أفتح لنص المتن لتقليل الوزن البصري. بدون !important عمداً:
   أي عنصر ملوّن صراحةً (تذييل أبيض، هيرو، شارات، أزرار) يحتفظ بلونه. */
p, li, a, span { color: #555555; }

* { box-sizing: border-box; }

/* خلفية موحّدة راقية للموقع كله: أبيض مائل هادئ بدل الأخضر الصريح —
   الأقسام الملوّنة صراحةً (الهيرو، التذييل، شرائط CTA) تحتفظ بخلفياتها */
html, body {
  background-color: #f8f9fa;
  /* منع أي تجاوز أفقي عرضي من إزاحة الصفحة على الجوال */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-regular);
  /* تذييل ملتصق بقاع الصفحة دائماً: عمود مرن يتمدد فيه main
     فلا يطفو التذييل في منتصف الشاشة في الصفحات القصيرة.
     العناصر fixed (اللودر/القائمة/المودال) خارج التدفق فلا تتأثر */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

a { text-decoration: none !important; }

/* ===================== شاشة التحميل (Loader) ===================== */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(0%);
  visibility: visible;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  transition: 1s cubic-bezier(0.858, 0.01, 0.068, 0.99);
  background: var(--brand-gradient);
}

.loader_img {
  width: clamp(72px, 16vw, 96px);
  height: auto;
  /* الشعار أخضر — نجعله أبيض فوق خلفية اللودر الملوّنة */
  filter: brightness(0) invert(1);
}

/* إخفاء اللودر تلقائياً بـ CSS خالص — بلا JavaScript إطلاقاً */
@keyframes loaderHide {
  to { transform: translateX(110%); visibility: hidden; }
}
.loader { animation: loaderHide 1s cubic-bezier(0.858, 0.01, 0.068, 0.99) 0.7s forwards; }
@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 0.01s; animation-delay: 0.4s; }
}

/* ===================== الترويسة (Header) ===================== */
.haeder {
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  z-index: 6;
  padding: 15px 5%;
  /* احترام منطقة الأمان العلوية (الشق/النوتش) في متصفحات التطبيقات وiOS */
  padding-top: max(15px, env(safe-area-inset-top));
  box-sizing: border-box;
}

.haeder_scroll {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
  padding: 7px 5%;
  padding-top: max(7px, env(safe-area-inset-top));
  box-sizing: border-box;
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  animation: fadeInDown 0.3s ease-in both;
  z-index: 99;
}

/* !important لازم لأن قاعدة الجوال تفرض اللون الأبيض؛ نُبقي الاسم أخضر عند التمرير (خلفية بيضاء) */
.haeder_scroll .brand_text { color: var(--primary) !important; text-shadow: none; }

.header-flex-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

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

/* الهيدر بعرض الصفحة الكامل فوق الجوال: الشعار أقصى اليمين والقائمة أقصى اليسار —
   إلغاء سقف .container وحشواته داخل الهيدر فقط، وحافة جانبية مضبوطة بدل 5% المتضخمة
   على الشاشات العريضة. الجوال (≤767px) لا يتأثر بشيء */
@media (min-width: 768px) {
  .haeder .container,
  .haeder_scroll .container,
  .inner-header .container {
    max-width: none;
    padding-inline: 0;
  }
  .haeder,
  .haeder_scroll,
  .inner-header { padding-inline: clamp(20px, 2.5vw, 48px); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 auto;
}

.brand_logo {
  max-height: 52px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  /* لا صندوق خلف الشعار: خلفية شفافة صراحةً */
  background: transparent !important;
  border: 0;
  filter: brightness(0) invert(1);
  transition: filter 0.3s;
  /* أنيميشن خفيف وهادئ: طفو لطيف لأعلى وأسفل */
  animation: brandFloat 4.5s ease-in-out infinite;
}
.haeder_scroll .brand_logo { filter: none; }

@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.brand_text {
  /* حجم متناسب مع الشعار (52px) على الشاشات الكبيرة؛ الجوال يعيد ضبطه */
  font-size: 16px;
  white-space: nowrap;
  /* أبيض فوق هيرو الرئيسية؛ بلا !important كي تعمل حالتا
     .haeder_scroll و .inner-header (خلفية بيضاء → أخضر) */
  color: #ffffff;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* ملاحظة: قاعدة .haeder_scroll .brand_text مُعرّفة أعلاه (أُزيل التكرار) */

/* شعار القائمة الجانبية (خلفية داكنة) */
.nav-logo a img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
}
/* الاسم كتلة واحدة متناسقة: لون ووزن موحّدان مع الجزء الأول */
.brand_text span { color: inherit; font-weight: inherit; }

/* زر فتح القائمة (الهامبرغر) */
.menu-open {
  width: 40px;
  height: 30px;
  position: relative;
  cursor: pointer;
}
.hamburger,
.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 34px;
  height: 3px;
  background: var(--white);
  right: 0;
  transition: all 0.3s ease;
}
.haeder_scroll .hamburger,
.haeder_scroll .hamburger:before,
.haeder_scroll .hamburger:after { background: var(--primary); }
.hamburger { top: 14px; }
.hamburger:before { top: -10px; }
.hamburger:after { top: 10px; }

/* ===================== القسم الترحيبي (Hero / Slider) =====================
   بنية التمرير السينمائي: غلاف 200vh يمنح مسافة التمرير، وداخله
   القسم لاصق (sticky) بارتفاع الشاشة يعرض مشهدين متراكبين (نهار/ليل)
   يمزج hero-scene.js شفافيتهما حسب تقدم التمرير.
   ملاحظة: overflow-x: clip على body لا يكسر sticky (بعكس hidden). */
.hero-scroll-wrapper {
  height: 200vh;
  height: 200dvh;
  position: relative;
}

.home_slider_container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  background-color: var(--primary);
  overflow: hidden;
}

.hero-scene {
  position: absolute;
  inset: 0;
  /* المزج على المركّب (GPU) — صفر إعادة تخطيط أثناء التمرير */
  will-change: opacity;
}
/* المشهد الليلي يبدأ خفياً — JS يمزج الشفافية؛ pointer-events تُدار
   عبر scene_on كي لا يحجب زر "تفاصيل أكثر" الخفي تفاعل النهار */
.hero-scene--night {
  opacity: 0;
  pointer-events: none;
}
.hero-scene--night.scene_on { pointer-events: auto; }
.hero-scene--day.scene_off { pointer-events: none; }

.slider_background_image {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  /* صورة أفقية: تمركز بؤرة المبنى على الشاشات العمودية دون تشويه */
  object-position: center center;
  z-index: 1;
  /* تكبير طفيف يمنح هامش حركة للـ parallax دون كشف الحواف */
  transform: scale(1.06);
  will-change: transform;
}

.slider_overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  /* تدرّج فاخر داكن/أخضر: تعتيم علوي خفيف للترويسة، وسط صافٍ، وقاع أخضر عميق
     يضمن نصاعة العنوان الأبيض وزر الدعوة */
  background: linear-gradient(
    to bottom,
    rgba(10, 26, 12, 0.55) 0%,
    rgba(10, 26, 12, 0.15) 32%,
    rgba(20, 46, 24, 0.35) 68%,
    rgba(24, 58, 26, 0.92) 100%
  );
}

.slider_overlay_two {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 40, 20, 0.28);
  z-index: 3;
}

/* ============ وسوم الميزات العائمة (Hero Data Labels) ============
   طبقة معزولة بالكامل: contain يمنع مشاركة الطبقة في حسابات تخطيط
   الصفحة، والحركة كلها transforms مركّبة على GPU — صفر CLS. */
.hero_labels {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  contain: strict;
  overflow: hidden;
}

.hero_label {
  position: absolute;
  /* إحداثيات نسبية تُضبط لكل وسم عبر --x / --y — تبقى داخل الشاشة دوماً */
  right: var(--x);
  top: var(--y);
  max-width: min(46vw, 220px);
  padding: 8px 14px 8px 18px;
  font-family: var(--font-bold);
  font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  color: #ffffff;
  white-space: nowrap;
  background: rgba(14, 34, 16, 0.45);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  will-change: transform;
}

/* نقطة ذهبية مضيئة تسبق كل وسم */
.hero_label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.9);
  vertical-align: middle;
}

@media (max-width: 640px) {
  /* على الجوال: إزاحة الوسوم بعيداً عن العنوان المركزي وإبقاؤها داخل الإطار */
  .hero_label { padding: 6px 10px 6px 13px; }
  .hero_label:nth-child(1) { --x: 8%;  --y: 22%; }
  .hero_label:nth-child(2) { --x: 52%; --y: 34%; }
  .hero_label:nth-child(3) { --x: 16%; --y: 76%; }
}

/* ============ نقاط المواد التفاعلية (Materiality Hotspots) ============
   قسم "المواصفات العصرية": نقاط ذهبية نابضة فوق خامات الصورة، تكشف
   عند التحويم/اللمس وسماً زجاجياً بنفس هوية وسوم الهيرو الفاخرة. */
.specs_block { margin: 48px 0; }

.specs_figure {
  margin: 0 auto;
  max-width: 980px;
}

.specs_stage {
  position: relative;
  /* نسبة أبعاد مثبّتة مسبقاً = صفر CLS أثناء تحميل الصورة الكسول */
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(20, 46, 24, 0.18);
  contain: layout paint;
}

.specs_stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spec_hotspot {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  /* منطقة لمس مريحة ≥44px دون تضخيم النقطة بصرياً */
  outline-offset: 4px;
}
.spec_hotspot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

/* الحلقة المشعّة النابضة */
.spec_ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.9);
  animation: spec_pulse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
}
@keyframes spec_pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  70%  { transform: scale(2.6);  opacity: 0; }
  100% { transform: scale(2.6);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spec_ring { animation: none; opacity: 0.6; transform: scale(1.6); }
}

/* الوسم الزجاجي — نفس هوية وسوم الهيرو: أخضر داكن شفاف + حد ذهبي + blur */
.spec_label {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: max-content;
  max-width: min(300px, 55vw);
  padding: 9px 16px;
  font-family: var(--font-bold);
  font-size: clamp(0.72rem, 1.4vw, 0.92rem);
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
  background: rgba(14, 34, 16, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  pointer-events: none;
}

/* نقطة قرب حافة الصورة العليا: الوسم يُكشف أسفلها بدلاً من أعلاها */
.spec_hotspot--below .spec_label {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translate(-50%, -6px);
}

/* الكشف الأنيق: تحويم أو تركيز لوحة مفاتيح أو لمسة (فئة is-open من JS) */
.spec_hotspot:hover .spec_label,
.spec_hotspot:focus-visible .spec_label,
.spec_hotspot.is-open .spec_label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

@media (max-width: 640px) {
  .spec_hotspot { width: 18px; height: 18px; }
  .spec_label { max-width: 58vw; font-size: 0.72rem; }
}

.slider_content_outer_container {
  position: absolute;
  width: 100%;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider_content_container {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 16px 40px;
  text-align: center;
}

.main_header {
  text-align: center;
  font-family: var(--font-bold);
  color: #ffffff;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  max-width: 800px;
  line-height: 1.4;
  margin: 0 auto 20px;
  text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
}
.main_header .text-gold { color: #D4AF37; }

.slider_content {
  text-align: center;
  font-family: var(--font-regular);
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  margin-top: 15px;
  max-width: 560px;
}

.more_btn {
  /* حجم سائل: يتقلص بأناقة على الجوال بدل عرض 180px الثابت */
  width: auto;
  padding: 0 clamp(26px, 6vw, 40px);
  height: clamp(42px, 10vw, 50px);
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--secondary);
  font-family: var(--font-regular);
  font-size: clamp(15px, 3.8vw, 18px);
  transition: all 0.5s;
  color: var(--white);
  margin-top: 25px;
}
.more_btn:hover { background-color: var(--primary); }

/* ===================== التذييل (Footer) ===================== */
.footer {
  width: 100%;
  height: auto;
  overflow: hidden; /* منع أي تجاوز أفقي يسبب "شريحة" رأسية مكسورة */
  /* تدرج الهوية الموحّد (45°) — نفس اللودر والقائمة المنسدلة */
  background: var(--brand-gradient);
  /* احترام منطقة الأمان السفلية في متصفحات التطبيقات وiOS */
  padding-bottom: env(safe-area-inset-bottom);
}

/* تحييد هوامش Bootstrap السالبة على .row داخل التذييل (كانت تسبب تجاوزاً أفقياً) */
.footer .row {
  margin: 0;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.footer_logo {
  width: clamp(58px, 9vw, 110px);
  height: auto;
  display: block;
  margin: 0 auto;
  /* مسافات سائلة: تنكمش على الجوال وتتسع على الشاشات الكبيرة */
  padding: clamp(24px, 6vw, 50px) 0;
  /* الشعار أخضر — أبيض فوق خلفية التذييل المتدرّجة */
  filter: brightness(0) invert(1);
}

.footer_line {
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}

.footer_content_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 5vw, 36px) 16px clamp(14px, 3.5vw, 24px);
  gap: clamp(12px, 3vw, 20px);
  text-align: center;
}

.social_media { margin: 0; padding: 0; }
.social_media li { list-style: none; display: inline; }
.social_media li a {
  color: #ffffff;
  margin: 0 clamp(6px, 1.5vw, 8px);
  /* الحد الأدنى يحاكي مقاس المحتوى المصغّر (0.6×) على الجوال
     مع بقائه هدف لمس مقبولاً */
  font-size: clamp(14px, 3.4vw, 20px);
  transition: opacity 0.3s;
}
.social_media li a:hover { opacity: 0.7; }

.rights_container {
  color: #ffffff;
  font-family: var(--font-regular);
  font-size: clamp(11px, 2.8vw, 16px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rights_container a { color: #ffffff; }

/* شريط حقوق النشر — في المنتصف ومتناسق */
.footer_copyright {
  text-align: center;
  padding: clamp(12px, 3vw, 20px) 16px clamp(18px, 5vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 4px;
}
.footer_copyright .rights_text {
  display: block;
  color: #ffffff;
  font-family: var(--font-regular);
  font-size: clamp(10px, 2.6vw, 15px);
  line-height: 1.8;
  margin: 0;
}
.footer_policy_link {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-regular);
  font-size: clamp(9px, 2.4vw, 14px);
  transition: color 0.3s ease;
}
.footer_policy_link:hover { color: var(--secondary); }

/* ===================== نموذج عام (للاستخدام لاحقاً) ===================== */
.inputs-labels {
  width: 100%;
  font-family: var(--font-regular);
  font-size: 16px;
  color: var(--primary);
}
.form_input,
.form_text {
  width: 100%;
  font-family: var(--font-regular);
  padding: 10px;
  font-size: 14px;
  border: var(--primary) 2px solid;
  border-radius: 10px;
}
.form_btn {
  font-family: var(--font-regular);
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 10px 30px;
  transition: all 0.5s;
  border-radius: 20px;
}
.form_btn:hover {
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
}

/* ===================== أقسام المحتوى ===================== */
/* إيقاع رأسي سائل موحّد لكل الأقسام (44px جوال → 80px ديسكتوب) */
.section { padding: clamp(44px, 9vw, 80px) 0; }

.section_title {
  text-align: center;
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: clamp(21px, 4.6vw, 30px);
  margin: 0 0 16px;
  position: relative;
}
.section_title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: var(--secondary);
  margin: 14px auto 0;
  border-radius: 3px;
}

.section_lead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  color: var(--grey-mdium);
  font-size: 17px;
  line-height: 1.9;
}

/* 3 أعمدة ثابتة في كل المقاسات — التكيّف بالحشوات والخطوط السائلة لا بتكسير الشبكة */
.cards_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2.5vw, 28px);
}

/* بطاقات "من نحن" و"تواصل معنا" */
.info_card,
.contact_card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  padding: clamp(16px, 3.5vw, 36px) clamp(10px, 2.5vw, 28px);
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.4s ease, border-color 0.4s ease;
  display: block;
  color: inherit;
}
.contact_card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 40px rgba(60, 125, 60, 0.15);
  border-color: var(--secondary);
}
/* بطاقات الرؤية/الرسالة/المبادئ: نفس سطح بطاقات الإنجازات —
   بقية المعاملة (الشريط الذهبي والرفع والتوهج) مشتركة معها أدناه */
.info_card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f6f8f3 100%);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(60, 125, 60, 0.07);
  overflow: hidden;
}
/* أيقونة البطاقة برقاقة دائرية مطابقة لأيقونات الإنجازات */
.card_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  font-size: 20px;
  color: var(--secondary);
  background: rgba(219, 178, 61, 0.12);
  border-radius: 50%;
  transition: transform 0.4s ease, background 0.4s ease;
}
.info_card h3,
.contact_card h3 {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: clamp(15px, 3.2vw, 20px);
  margin: 0 0 12px;
}
.info_card p,
.contact_card p {
  color: var(--grey-dark);
  font-size: clamp(12.5px, 2.6vw, 16px);
  line-height: 1.8;
  margin: 0;
}

.about_section { background: var(--white); }

/* ===================== قسم "من نحن" — المحتوى الموسّع ===================== */
.about_subtitle {
  text-align: center;
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 23px;
  margin: 48px 0 18px;
}
.about_text {
  max-width: 900px;
  margin: 0 auto 8px;
  color: #3a4636;
  font-size: 17px;
  line-height: 2;
  text-align: justify;
  text-justify: inter-word;
}

.achievements {
  margin-top: 56px;
}
.achievements h3 {
  text-align: center;
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 25px;
  margin: 0 0 36px;
  position: relative;
}
.achievements h3::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: var(--secondary);
  margin: 14px auto 0;
  border-radius: 3px;
}
.stats_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2.5vw, 28px);
}
.stat_item {
  position: relative;
  text-align: center;
  padding: clamp(14px, 3vw, 25px) clamp(8px, 2vw, 20px);
  background: linear-gradient(160deg, #ffffff 0%, #f6f8f3 100%);
  border-radius: 20px;
  border: 1px solid var(--grey-light);
  box-shadow: 0 10px 30px rgba(60, 125, 60, 0.07);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s, border-color 0.4s;
}
.stat_item::before,
.info_card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.stat_item:hover,
.info_card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 50px rgba(60, 125, 60, 0.18);
  border-color: var(--secondary);
}
.stat_item:hover::before,
.info_card:hover::before {
  transform: scaleX(1);
}
/* أجهزة اللمس (لا hover): الشريط الذهبي يُرسم تلقائياً عند دخول
   البطاقة مجال الرؤية عبر نظام fade-up/.show القائم في main.js */
@media (hover: none) {
  .has-anim .stat_item.show::before,
  .has-anim .info_card.show::before { transform: scaleX(1); transition-delay: 0.5s; }
}
.stat_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
  margin-bottom: 15px;
  font-size: clamp(15px, 3.4vw, 20px);
  color: var(--secondary);
  background: rgba(219, 178, 61, 0.12);
  border-radius: 50%;
  transition: transform 0.4s ease, background 0.4s ease;
}
.stat_item:hover .stat_icon,
.info_card:hover .card_icon {
  transform: scale(1.08);
  background: rgba(219, 178, 61, 0.2);
}
.stat_num {
  display: block;
  font-family: var(--font-bold);
  /* أخضر الهوية — مطابق لعناوين بطاقات الرؤية/الرسالة/المبادئ */
  color: var(--primary);
  font-size: clamp(1.1rem, 2.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.stat_unit {
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  font-family: var(--font-medium);
  margin-inline-start: 6px;
  color: var(--primary);
  vertical-align: middle;
  letter-spacing: normal;
}
.stat_label {
  display: block;
  color: var(--grey-dark);
  font-size: clamp(12px, 2.8vw, 17px);
  font-family: var(--font-medium);
}
.contact_section { background: #f6f8f3; }

/* ============ خريطة الموقع (تواصل معنا) ============
   الخريطة تُحمَّل كسولاً عبر حاوية media_slot المعيارية —
   نسبة أبعاد مثبّتة (صفر CLS) تتحول 4:3 على الجوال */
.map_block {
  margin-top: clamp(28px, 6vw, 48px);
  text-align: center;
}
.map_title {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: clamp(17px, 3.4vw, 22px);
  margin: 0 0 6px;
}
.map_title i { color: var(--secondary); margin-inline-end: 8px; }
/* الخريطة مندمجة كجزء من الصفحة: بلا ظل ولا خلفية داكنة قبل التحميل */
.map_slot {
  --media-ratio: 16 / 9;
  max-width: 980px;
  margin: 18px auto 0;
  background: #f6f8f3;
}
.map_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--primary);
  font-family: var(--font-medium);
  font-size: clamp(12px, 2.8vw, 15px);
  transition: color 0.3s ease;
}
.map_link:hover { color: var(--secondary); }
@media only screen and (max-width: 767px) {
  .map_slot { --media-ratio: 4 / 3; }
}
/* شفافة كي تنساب مع الخلفية الموحّدة للصفحة */
.projects_section { background: transparent; }

/* ============ معرض الأكورديون المتمدد (مشاريعنا — الرئيسية) ============
   flex يتكفل بكل الرياضيات: النشطة flex:3 والبقية flex:1 — إضافة بطاقة
   رابعة أو خامسة في HTML تعيد التوزيع تلقائياً بلا أي تعديل هنا.
   ديسكتوب صف أفقي، جوال عمود رأسي بنفس المنطق. */
.projects_accordion {
  display: flex;
  gap: clamp(10px, 2vw, 18px);
  height: clamp(400px, 62vh, 540px);
}

.acc_card {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  contain: layout paint;
  transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s;
}
.acc_card.active { flex: 3; cursor: default; }
.acc_card:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }

.acc_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* البؤرة البصرية نحو اليسار عند التمدد — النص يتصدر اليمين (RTL) */
  object-position: center;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.acc_card.active .acc_bg { transform: scale(1.06); object-position: left center; }

/* الظل: تدرج قرائي دائم + تعتيم إضافي على غير النشطة يرتفع عند التنشيط */
.acc_shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10, 26, 12, 0.82) 0%,
    rgba(10, 26, 12, 0.25) 55%,
    rgba(10, 26, 12, 0.12) 100%);
  transition: background-color 0.7s ease;
  background-color: rgba(10, 26, 12, 0.45);
}
.acc_card.active .acc_shade { background-color: rgba(10, 26, 12, 0); }

.acc_badge {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 3;
}

.acc_content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(16px, 3vw, 28px);
}

.acc_title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-bold);
  font-size: clamp(17px, 2.6vw, 24px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* التفاصيل: تنبثق يمين البطاقة الممتدة (بداية السطر في RTL) */
.acc_details {
  max-width: min(420px, 82%);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.acc_card.active .acc_details {
  opacity: 1;
  transform: translateY(0);
  /* تظهر بعد أن يكاد التمدد يكتمل — إيقاع فاخر متمهل */
  transition-delay: 0.25s;
  pointer-events: auto;
}

.acc_location {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(12.5px, 2.4vw, 15px);
  margin: 10px 0 12px;
}
.acc_location i { color: var(--secondary); margin-inline-end: 6px; }

.acc_stats {
  list-style: none;
  display: flex;
  gap: clamp(12px, 3vw, 26px);
  margin: 0 0 16px;
  padding: 0;
}
.acc_stats li {
  color: #ffffff;
  font-size: clamp(12.5px, 2.4vw, 15px);
  font-family: var(--font-medium);
}
.acc_stats i { color: var(--secondary); margin-inline-end: 6px; }
.acc_stats strong { font-size: clamp(14px, 2.8vw, 18px); margin-inline-end: 4px; }

/* زر الدعوة الذهبي — يُعرض حصراً للمشاريع المتاحة (منطق data-status) */
.acc_cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary);
  color: var(--white);
  padding: clamp(9px, 2vw, 12px) clamp(18px, 4vw, 26px);
  border-radius: 50px;
  font-family: var(--font-medium);
  font-size: clamp(13px, 2.6vw, 15px);
  transition: background 0.35s ease, transform 0.35s ease;
}
.acc_cta:hover { background: var(--primary); transform: translateY(-2px); }
.acc_card:not([data-status="available"]) .acc_cta { display: none; }

/* الجوال: نفس الرياضيات بمحور رأسي */
@media only screen and (max-width: 767px) {
  .projects_accordion {
    flex-direction: column;
    height: clamp(520px, 118vw, 620px);
  }
  .acc_card.active .acc_bg { object-position: center; }
  .acc_details { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .acc_card, .acc_bg, .acc_shade, .acc_details { transition: none; }
}

/* ============ شركاء النجاح — شريط لانهائي بـ CSS خالص ============
   المسار يضم نسختين متطابقتين من الشعارات السبعة؛ الانزلاق حتى -50%
   يعيد المشهد لنقطة البداية بالضبط = حلقة مغلقة بلا فجوة ولا JS. */
.partners_section { padding: clamp(36px, 7vw, 64px) 0; }
/* عنوان القسم مصغّر 20% عن العام، وحدّه الأدنى مصغّر 20% إضافية
   للجوال (13.6px) — قيمة سائلة واحدة بلا استعلام شاشة */
.partners_section .section_title { font-size: clamp(13.6px, 3.2vw, 24px); }

.partners_marquee {
  overflow: hidden;
  /* ارتفاع صريح يضمن حجز مساحة العرض للصور */
  height: clamp(48px, 8vw, 84px);
  /* تلاشي أنيق عند حافتي الشاشة — نقاط توقف صريحة 0% و100% */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.partners_track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(28px, 6vw, 72px);
  width: max-content;
  padding-inline-start: clamp(28px, 6vw, 72px); /* يوازن فجوة نقطة الالتحام */
  animation: partners_scroll 30s linear infinite;
  will-change: transform;
}
/* إيقاف الشريط عند التحويم لتأمل شعار بعينه */
.partners_marquee:hover .partners_track { animation-play-state: paused; }

@keyframes partners_scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); } /* موجب = انسياب طبيعي مع اتجاه RTL */
}

.partners_track img {
  max-height: clamp(30px, 5vw, 60px);
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.partners_track img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}
/* شعارا 1 و6 أكبر 10% (نسبة سائلة تسري على كل الشاشات) */
.partners_track img.partner_lg { max-height: clamp(33px, 5.5vw, 66px); }

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

/* ===================== نبذة تعريفية (الرئيسية) ===================== */
/* انتقال ناعم من قاع الهيرو الأخضر الداكن إلى خلفية الصفحة الفاتحة */
.intro_section {
  background: linear-gradient(180deg, #eef2ec 0%, #f8f9fa 180px);
}
.intro_text {
  text-align: center;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto 30px;
  color: #3a4636;
  font-size: 17px;
}
.intro_cta { text-align: center; margin-bottom: 60px; }

/* ===================== شبكة بطاقات المشاريع ===================== */
/* مقاسات الشبكة والبطاقات مصغّرة 20% (بطلب اعتماد 2026-07-05) */
.projects_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 22px;
}

.project_card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* opacity ضمن الانتقال لخدمة الترشيح (دخول/انزلاق FLIP) — مصدر واحد */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.4s ease,
              opacity 0.45s ease;
  display: flex;
  flex-direction: column;
}
.project_card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 50px rgba(60, 125, 60, 0.2);
}

.project_img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.project_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.project_card:hover .project_img img { transform: scale(1.07); }
/* تدرّج خفيف أسفل الصورة لإبراز الشارة */
.project_img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 45%);
}

/* المشاريع غير المتاحة (مباع / قريباً) */
.card-disabled { cursor: default; pointer-events: none; }
.blurred-project { position: relative; overflow: hidden; }
.blurred-project img { filter: blur(6px) brightness(0.5); transform: scale(1.05); }

/* شارة حالة المشروع */
.project_status {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border-radius: 30px;
  color: var(--white);
  font-size: 11px;
  font-family: var(--font-medium);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.project_status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}
.status_selling { background: var(--primary); }
.status_building { background: var(--secondary); }
.status_sold { background: rgba(77, 77, 77, 0.92); }

/* النبضة على المشاريع المتاحة للبيع لجذب الانتباه */
.status_selling::before { animation: statusPulse 1.8s ease-out infinite; }
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.project_body {
  padding: 21px 19px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.project_body h3 {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 17px;
  margin: 0 0 8px;
}

.project_location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grey-mdium);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.project_location i { color: var(--secondary); flex-shrink: 0; }

/* تفاصيل أيقونية: عدد العمارات/الوحدات/الفلل */
.project_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 19px;
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--grey-light);
}
.project_meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project_meta i {
  font-size: 16px;
  color: var(--secondary);
  width: 21px;
  text-align: center;
}
.project_meta span {
  color: var(--grey-dark);
  font-size: 12px;
}
.project_meta strong {
  color: var(--primary);
  font-family: var(--font-bold);
  font-size: 14px;
  margin-inline-end: 2px;
}

/* تصغير الجوال يتولاه الآن الرافعة الموحدة zoom: 0.6 (انظر كتلة
   "الرافعة الموحدة" قرب .details_page) — حُذفت التجاوزات اليدوية */

@media (prefers-reduced-motion: reduce) {
  .project_card,
  .project_img img,
  .status_selling::before,
  .brand_logo { transition: none; animation: none; }
}

/* ===================== التجاوب (Responsive) ===================== */
@media only screen and (max-width: 767px) {
  /* تصغير جذر الصفحة على الجوال (يؤثر بشكل رئيسي على قيم rem وBootstrap) */
  html { font-size: 13px !important; }

  /* الشبكات تحافظ على 3 أعمدة في كل المقاسات (القواعد الأساسية السائلة) */
  .about_subtitle { font-size: 20px; }
  .section_lead { font-size: 16px; }

  /* الترويسة: شعار أصغر والاسم كاملاً على سطر واحد بجانبه
     (أحجام الأزرار موحّدة في كتلة "تجاوب الترويسة والمودال" أدناه) */
  .brand_logo { max-width: 34px !important; max-height: none !important; height: auto !important; }
  .haeder { padding: 12px 4%; }
  .inner-header { padding: 10px 4%; }
  .header-flex-box { gap: 10px !important; padding: 0 !important; justify-content: space-between !important; }
  .brand { gap: 8px; }
  .slider_content { padding: 0 20px; }
  .brand_text { font-size: 12px; letter-spacing: -0.3px; }
  .header-actions { gap: 8px; }

  /* بطاقات المشاريع: مضغوطة وفاخرة */
  .projects_grid { gap: 18px; }
  .project_body { padding: 18px 16px; }
  .project_body h3 { font-size: 18px; }
  .project_location { font-size: 14px; }
  .project_meta { gap: 10px 18px; margin-top: 14px; padding-top: 14px; }
  .project_meta i { font-size: 17px; width: 22px; }
  .project_meta span { font-size: 14px; }
  .project_meta strong { font-size: 16px; }

  .footer_copyright .rights_text { font-size: 14px; }
}

@media only screen and (max-width: 480px) {
  /* مساحة ضيقة: نفس السطر الواحد بحجم أصغر قليلاً */
  .brand_text { font-size: 11px; }
  .header-flex-box { gap: 8px; }
  .header-actions { gap: 8px; }
}

/* =================================================================
   النظام متعدد الصفحات (Multi-page): الترويسة الداخلية، صفحة المشاريع،
   وقالب تفاصيل المشروع. الهوية: الأخضر + الذهبي.
   ================================================================= */

/* زر "عرض كل المشاريع" أسفل شبكة الرئيسية */
.view_all_wrap { text-align: center; margin-top: 48px; }
.view_all_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary);
  color: var(--white);
  padding: clamp(11px, 2.8vw, 15px) clamp(24px, 6vw, 36px);
  border-radius: 50px;
  font-family: var(--font-medium);
  font-size: clamp(14px, 3.6vw, 17px);
  transition: background 0.4s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 8px 22px rgba(60, 125, 60, 0.22);
}
.view_all_btn i { transition: transform 0.3s; }
.view_all_btn:hover {
  background: var(--secondary);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(219, 178, 61, 0.3);
}
.view_all_btn:hover i { transform: translateX(-5px); }

/* البطاقة كرابط قابل للنقر */
a.project_card { color: inherit; }

/* الترويسة الداخلية الصلبة (للصفحات الفرعية) */
.inner-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 12px 5%;
  box-sizing: border-box;
  z-index: 50;
}
.inner-header .brand_logo { filter: none; }
.inner-header .brand_text { color: var(--primary); text-shadow: none; }

/* شريط عنوان الصفحة الفرعية */
.page_hero {
  position: relative;
  text-align: center;
  color: var(--white);
  padding: 72px 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--middle) 55%, var(--secondary) 100%);
}
.page_hero h1 {
  font-family: var(--font-bold);
  font-size: 34px;
  margin: 0 0 12px;
}
.page_hero p {
  margin: 0 auto;
  max-width: 640px;
  /* مُصغَّر 20% عن 17px الأصلية، وسائل عبر المقاسات (جوال ~12px → ديسكتوب 13.6px) */
  font-size: clamp(12px, 2.6vw, 13.6px);
  line-height: 1.8;
  opacity: 0.95;
  /* أبيض صريح: قاعدة p العامة (#555) كانت تطغى على اللون الموروث */
  color: var(--white);
}
.breadcrumb {
  margin: 0 0 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.breadcrumb a { color: var(--white); opacity: 0.9; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline !important; }
.breadcrumb span { margin: 0 6px; opacity: 0.6; }

/* متغيّر فتّاح: مسار التنقل فوق خلفية فاتحة (صفحات المحتوى الداخلية) */
.breadcrumb_light { color: var(--grey-mdium); margin-bottom: 18px; }
.breadcrumb_light a { color: var(--primary); opacity: 1; }
.breadcrumb_light span { color: var(--grey-light); opacity: 1; }

/* فقرة تمهيدية بمحاذاة بداية السطر (RTL: يمين) بدل التوسيط */
.section_lead_start { text-align: right; margin: 0 0 36px; }

/* صفحة كل المشاريع: مساحة علوية وشبكة واسعة */
.projects_page { padding: 64px 0 88px; background: #f6f8f3; }

/* ===== قالب تفاصيل المشروع ===== */
.details_page { background: var(--white); padding: 56px 0 88px; }

/* الجوال: تصغير محتوى صفحة المشروع بالكامل 40% (بطلب اعتماد 2026-07-05)
   رافعة واحدة بدل عشرات التجاوزات المتفرقة — zoom معيارية (كل المتصفحات
   الحديثة، Firefox منذ 126) وتُحجّم النصوص والحشوات والصور معاً متناسقة؛
   المواضع المئوية (نقاط الـhotspots والشبكات) تبقى ملتصقة بأماكنها،
   والمودال والـLightbox خارج الحاوية فلا يتأثران. في متصفح قديم بلا
   دعم: يبقى المقاس الطبيعي (تدهور رشيق). */
@media only screen and (max-width: 767px) {
  /* ============ الرافعة الموحدة لتصغير الجوال (0.6) ============
     مصدر واحد لكل أقسام الموقع — نصوص وحشوات وصور تصغر متناسقة.
     مستثنى عمداً: الهيرو السينمائي (لاصق ومقاساته viewport-based
     بقيم clamp)، والترويسة (أحجامها مضبوطة يدوياً لأهداف لمس ≥30px)،
     والتذييل (مضغوط أصلاً بقيم clamp سائلة). */
  .details_page > .container,
  .cta_band,
  .intro_section > .container,
  .projects_section > .container,
  .about_section > .container,
  .contact_section > .container,
  .projects_page > .container,
  .page_hero,
  .policy-container { zoom: 0.6; }

  /* التذييل: تصغير 20% (نصوصه مضبوطة مسبقاً بحدود clamp دنيا،
     فيكفيه 0.8 ليتوازن مع محتوى 0.6) */
  .footer > .container { zoom: 0.8; }

  .details_page { padding: 40px 0 56px; }
}

.detail_status_row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.detail_title {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 31px;
  margin: 0;
}
.detail_location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grey-mdium);
  font-size: 16px;
  margin: 6px 0 32px;
}
.detail_location i { color: var(--secondary); }

/* شارة الحالة داخل صفحة التفاصيل (ثابتة بلا تموضع مطلق) */
.status_inline {
  position: static;
  box-shadow: none;
}

/* معرض الصور */
/* معرض فسيفسائي حيّ: مقاسات متنوعة (كبير/وسط/صغير) بنمط غير منتظم
   يتكرر كل 8 صور، وgrid-auto-flow: dense يسدّ الفراغات تلقائياً */
.gallery_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  grid-auto-flow: dense;
  gap: 16px;
  margin: 0 0 16px;
}
.gallery_grid .gallery_item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* النمط الفسيفسائي: كبير 2×2، عريض 2×1، طولي 1×2، والبقية صغيرة 1×1 */
.gallery_grid .gallery_item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
.gallery_grid .gallery_item:nth-child(8n+4) { grid-column: span 2; }
.gallery_grid .gallery_item:nth-child(8n+6) { grid-row: span 2; }
.gallery_grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery_grid .gallery_item:hover img { transform: scale(1.07); }

/* ظهور احترافي متدرّج: انزلاق + تكبير ناعم عند دخول مجال الرؤية */
.has-anim .gallery_grid .fade-up { transform: translateY(26px) scale(0.96); }
.has-anim .gallery_grid .fade-up.show { transform: translateY(0) scale(1); }
.gallery_grid .fade-up:nth-child(4n+2) { transition-delay: 0.07s; }
.gallery_grid .fade-up:nth-child(4n+3) { transition-delay: 0.14s; }
.gallery_grid .fade-up:nth-child(4n)   { transition-delay: 0.21s; }

/* نبذة "عن المشروع": فقرات بإيقاع مريح */
.about_project { margin: 0 0 40px; }
.about_project p { line-height: 2; margin: 0 0 14px; }
.about_project p:last-child { margin-bottom: 0; }
.about_lead {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 18px;
}

/* شبكة مميزات المشروع الفاخرة */
.features_grid {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.feature_item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 14px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.feature_item:hover {
  border-color: var(--secondary);
  box-shadow: 0 14px 32px rgba(60, 125, 60, 0.12);
  transform: translateY(-4px);
}
.feature_item i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 20px;
  color: var(--secondary);
  background: rgba(60, 125, 60, 0.10);
}
.feature_item span {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 16px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .features_grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .features_grid { grid-template-columns: repeat(4, 1fr); }
}

/* تخطيط التفاصيل: المخططات + بطاقة المواصفات */
.details_layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 56px;
}
.detail_block_title {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 24px;
  margin: 0 0 20px;
}

/* بطاقات أنواع الوحدات / المخططات */
.units_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.unit_card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.unit_card:hover {
  border-color: var(--secondary);
  box-shadow: 0 14px 32px rgba(60, 125, 60, 0.12);
  transform: translateY(-4px);
}
.unit_card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.unit_card .unit_body { padding: 18px 18px 22px; }
.unit_card h4 {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: 19px;
  margin: 0 0 10px;
}
.unit_card .unit_feat {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--grey-dark);
  font-size: 14px;
}
.unit_card .unit_feat span { display: inline-flex; align-items: center; gap: 6px; }
.unit_card .unit_feat i { color: var(--secondary); }

/* بطاقة المواصفات الجانبية */
.spec_card {
  background: #f6f8f3;
  border: 1px solid var(--grey-light);
  border-radius: 18px;
  padding: 28px 26px;
  position: sticky;
  top: 96px;
}
.spec_list { list-style: none; margin: 0 0 22px; padding: 0; }
.spec_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-light);
  font-size: 15px;
}
.spec_list li:last-child { border-bottom: none; }
.spec_list .label { color: var(--grey-mdium); display: flex; align-items: center; gap: 8px; }
.spec_list .label i { color: var(--secondary); width: 20px; text-align: center; }
.spec_list .value { color: var(--primary); font-family: var(--font-bold); }

/* زر "سجل اهتمامك" */
.interest_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  /* يعمل كرابط <a> أو كزر <button> يفتح المودال */
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: var(--white);
  padding: clamp(12px, 3vw, 16px) 24px;
  border-radius: 50px;
  font-family: var(--font-medium);
  font-size: clamp(15px, 3.8vw, 17px);
  transition: background 0.4s, transform 0.3s;
}
.interest_btn:hover { background: var(--secondary); transform: translateY(-2px); }
.interest_alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: clamp(10px, 2.6vw, 13px) 24px;
  border-radius: 50px;
  font-family: var(--font-medium);
  font-size: clamp(14px, 3.6vw, 16px);
  transition: all 0.4s;
}
.interest_alt:hover { background: var(--primary); color: var(--white); }

/* شريط دعوة سفلي */
/* شريط الدعوة — خلفية بيضاء (بطلب اعتماد 2026-07-05)؛ النصوص بألوان
   الهوية كي تبقى مقروءة فوق الأبيض، والزر الذهبي كما هو */
.cta_band {
  background: var(--white);
  text-align: center;
  padding: clamp(40px, 8vw, 64px) 16px;
}
.cta_band h2 {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: clamp(21px, 4.8vw, 26px);
  margin: 0 0 12px;
}
.cta_band p {
  margin: 0 auto 26px;
  max-width: 560px;
  color: var(--grey-dark);
  font-size: clamp(15px, 3.6vw, 17px);
}
.cta_band .interest_btn {
  width: auto;
  display: inline-flex;
  background: var(--secondary);
}
.cta_band .interest_btn:hover { background: var(--white); color: var(--primary); }

@media only screen and (max-width: 900px) {
  .details_layout { grid-template-columns: 1fr; }
  .spec_card { position: static; }
}

@media only screen and (max-width: 767px) {
  .page_hero { padding: 56px 16px; }
  .page_hero h1 { font-size: 26px; }
  .detail_title { font-size: 25px; }
  /* الجوال: عمودان مع الحفاظ على التنوّع الفسيفسائي وصفوف أقصر */
  .gallery_grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 12px; }
  .gallery_grid .gallery_item:nth-child(8n+4) { grid-column: span 1; }
  .cta_band h2 { font-size: 22px; }
}

/* =================================================================
   تفاصيل المشروع المتقدمة: نماذج المخططات، السعر، جدول الوحدات، المعرض
   ================================================================= */

/* شارة نموذج المخطط */
.plan_card .unit_body { padding: 24px 22px; }
.plan_badge {
  display: inline-block;
  background: var(--secondary);
  color: var(--white);
  font-family: var(--font-bold);
  font-size: 14px;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.plan_card h4 { font-size: 18px; }

/* صندوق السعر في بطاقة المواصفات */
.price_box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--middle) 100%);
  color: var(--white);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 22px;
}
/* أبيض صريح: قاعدة span العامة (#555) كانت تطغى على لون الصندوق الموروث */
.price_box .price_label,
.price_box .price_value,
.price_box .price_range { color: var(--white); }
.price_label { display: block; font-size: 14px; opacity: 0.9; }
.price_value {
  display: block;
  font-family: var(--font-bold);
  font-size: 27px;
  margin: 4px 0;
}
.price_value small { font-size: 16px; font-family: var(--font-regular); }
.price_range { display: block; font-size: 13px; opacity: 0.85; }

/* ملاحظات أسفل بطاقة المواصفات */
.spec_notes {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--grey-light);
}
.spec_notes li {
  position: relative;
  padding-inline-start: 20px;
  color: var(--grey-mdium);
  font-size: 13px;
  line-height: 1.9;
}
.spec_notes li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  color: var(--secondary);
  font-weight: bold;
}

/* قسم الوحدات */
.units_section { margin-top: 64px; }

.units_stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.stat_pill {
  flex: 1;
  min-width: 130px;
  background: #f6f8f3;
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
}
.stat_pill .num {
  display: block;
  font-family: var(--font-bold);
  font-size: 25px;
  color: var(--primary);
  line-height: 1.1;
}
.stat_pill .lbl { color: var(--grey-mdium); font-size: 14px; }

/* أدوات التصفية */
.units_filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.filters_label { color: var(--grey-dark); font-size: 15px; }
.filters_label i { color: var(--secondary); margin-inline-end: 4px; }
.filter_chip {
  background: var(--white);
  border: 1.5px solid var(--grey-light);
  color: var(--grey-dark);
  padding: 7px 18px;
  border-radius: 30px;
  font-family: var(--font-medium);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}
.filter_chip:hover { border-color: var(--secondary); }
.filter_chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ============ ترشيح المشاريع حسب الحالة (projects.html) ============
   الأزرار تعيد استخدام .filter_chip؛ هنا الشريط وحالات الحركة فقط.
   الانزلاق لإعادة التموضع تديره تقنية FLIP في projects-filter.js */
.projects_filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2vw, 12px);
  margin: 0 0 clamp(22px, 4.5vw, 36px);
}
.project_card.filter-hidden { display: none; }
.project_card.filter-exit {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.project_card.filter-enter {
  opacity: 0;
  transform: scale(0.9);
}
/* انتقالا الدخول والانزلاق يعتمدان transition البطاقة الأساسي (سطر 1120) */
@media (prefers-reduced-motion: reduce) {
  .project_card, .project_card.filter-exit { transition: none; }
}
.zone_select {
  margin-inline-start: auto;
  background: var(--white);
  border: 1.5px solid var(--grey-light);
  color: var(--grey-dark);
  padding: 9px 18px;
  border-radius: 30px;
  font-family: var(--font-medium);
  font-size: 15px;
  cursor: pointer;
}

/* لوحات النماذج التفصيلية */
.plan_sheets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 28px 0 8px;
}
.plan_sheet {
  display: block;
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow .25s ease, transform .25s ease;
}
.plan_sheet:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-3px); }
.plan_sheet img { width: 100%; height: auto; display: block; }

/* جدول الوحدات */
.table_wrap,
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--grey-light);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}

/* كل زون في جدول مستقل */
.table-responsive { margin-bottom: 50px; }
.zone-title {
  font-size: 1.5rem;
  color: #1A2B3C;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #D4AF37;
  display: inline-block;
}
.units_table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
  font-size: 14px;
}
.units_table thead th {
  background: var(--primary);
  color: var(--white);
  padding: 14px 12px;
  font-family: var(--font-medium);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.units_table td {
  padding: 12px;
  border-bottom: 1px solid var(--grey-light);
  text-align: center;
  white-space: nowrap;
  color: var(--grey-dark);
}
/* تظليل متبادل يفصل الوحدات بصرياً — كل الشاشات وكل جداول الزونات
   (قبل قاعدة hover عمداً: تحديدهما متساوٍ والترتيب يُبقي تمييز التحويم) */
.units_table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.035); }
.units_table tbody tr:hover td { background: #f6f8f3; }
.units_table .unit_no { font-family: var(--font-bold); color: var(--primary); }
/* عمود «الإجمالية» (التاسع) — الرقم الأهم: أغمق (strong موجود أصلاً في الخلية) */
.units_table td:nth-child(9) { color: #1a2b3c; }
.units_table .zone_row td {
  background: #eef3e8;
  color: var(--primary);
  font-family: var(--font-bold);
  text-align: right;
  font-size: 15px;
}

/* ترقيم الزونات: زون واحد معروض وأزرار (1..n) للتنقل — كل الشاشات */
.zone_pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 10px);
  margin-top: clamp(14px, 3vw, 22px);
}
.zone_page {
  width: clamp(32px, 7vw, 40px);
  height: clamp(32px, 7vw, 40px);
  border-radius: 50%;
  border: 1.5px solid var(--grey-light);
  background: var(--white);
  color: var(--grey-dark);
  font-family: var(--font-bold);
  font-size: clamp(12px, 2.8vw, 15px);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.zone_page:hover { border-color: var(--secondary); }
.zone_page.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  cursor: default;
}

/* الجوال: جداول الزونات مصغّرة 20% إضافية (بطلب اعتماد 2026-07-05) —
   تعمل فوق zoom: 0.6 العام لصفحة التفاصيل، والتمرير الأفقي محفوظ */
@media only screen and (max-width: 767px) {
  /* عرض أدنى مقلّص (525→460 بعد إخفاء عمود المبنى) — التمرير الأفقي يعوّض الباقي */
  .units_table { min-width: 460px; font-size: 11px; }
  /* إخفاء عمود «المبنى» (الثاني) — حرفه مضمّن أصلاً في رمز الوحدة (A1, B1…)،
     والتقليص يُبقي عمود «الحالة» ظاهراً دون سحب */
  .units_table th:nth-child(2),
  .units_table td:nth-child(2) { display: none; }
  /* الأعمدة الرقمية (6-9: الغرف والمساحات) — خط أصغر بأرقام ثابتة العرض */
  .units_table th:nth-child(n+6):nth-child(-n+9),
  .units_table td:nth-child(n+6):nth-child(-n+9) {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  .units_table thead th { padding: 11px 7px; }
  .units_table td { padding: 10px 7px; }
  .units_table .zone_row td { font-size: 12px; }
  .zone-title { font-size: 1.2rem; margin-bottom: 12px; }
  .table-responsive { margin-bottom: 32px; }
}

/* شارات الحالة داخل الجدول */
.st {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 30px;
  color: var(--white);
  font-size: 13px;
  font-family: var(--font-medium);
  white-space: nowrap;
}
.st-available { background: var(--primary); }
.st-sold { background: #4d4d4d; }
.st-show { background: var(--secondary); }
.st-office { background: #2f6f8f; }
.st-soon { background: #D4AF37; }
.st-reserved { background: #d97328; }


/* معرض الصور (Lightbox) */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.active { display: flex; animation: fadeIn 0.25s ease both; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 8px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
}
.lb_close, .lb_prev, .lb_next {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  border: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.lb_close:hover, .lb_prev:hover, .lb_next:hover { background: var(--secondary); }
.lb_close { top: 22px; left: 22px; }
.lb_prev { right: 22px; top: 50%; transform: translateY(-50%); }
.lb_next { left: 22px; top: 50%; transform: translateY(-50%); }
.lb_counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 18px;
  border-radius: 20px;
}
.gallery_item { cursor: pointer; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media only screen and (max-width: 767px) {

  .zone_select { margin-inline-start: 0; width: 100%; }
  .lb_close, .lb_prev, .lb_next { width: 44px; height: 44px; font-size: 17px; }
  .lb_prev { right: 12px; }
  .lb_next { left: 12px; }
  .stat_pill .num { font-size: 24px; }
}

/* ===================== أنيميشن الظهور عند التمرير ===================== */
.fade-up {
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* الإخفاء يُطبّق فقط عند تفعيل JS لتجنّب اختفاء المحتوى بدونه */
.has-anim .fade-up { opacity: 0; transform: translateY(30px); }
.has-anim .fade-up.show { opacity: 1; transform: translateY(0); }
/* ستاغر أنيق لعناصر الشبكات المتجاورة */
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .has-anim .fade-up { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   زر "سجل اهتمامك" الفاخر + المودال (نافذة التسجيل) — كحلي + ذهبي
   ===================================================================== */
.register-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  background: var(--navy);
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  border-radius: 22px;
  font-family: var(--font-medium);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(26, 43, 60, 0.25);
  transition: background 0.35s ease, color 0.35s ease,
              box-shadow 0.35s ease, transform 0.35s ease;
}
.register-btn i { font-size: 14px; }
.register-btn:hover,
.register-btn:focus-visible {
  background: var(--secondary);
  color: var(--navy);
  box-shadow: 0 0 20px rgba(219, 178, 61, 0.6);
  transform: translateY(-2px);
  outline: none;
}

/* الخلفية المعتمة مع ضبابية */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  background: rgba(26, 43, 60, 0.55);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease,
              -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* بطاقة النموذج */
.modal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0.95);
  width: min(92vw, 460px);
  max-height: 90vh;
  overflow-y: auto;
  /* لا تمرير أفقي داخل البطاقة، ومقبض تكبير النص عمودي فقط */
  overflow-x: hidden;
  background: #ffffff;
  border-radius: 22px;
  padding: 40px 32px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              opacity 0.35s ease;
}
.modal-overlay.open .modal-card {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
/* شريط ذهبي علوي أنيق */
.modal-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 5px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--secondary), var(--navy));
}

.modal-close {
  position: absolute;
  top: 14px;
  inset-inline-start: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #f1f3f5;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.modal-close:hover { background: var(--secondary); color: #fff; transform: rotate(90deg); }

.modal-title {
  margin: 4px 0 6px;
  font-family: var(--font-bold);
  color: var(--navy);
  font-size: 24px;
  text-align: center;
}
.modal-sub {
  margin: 0 0 24px;
  text-align: center;
  color: var(--grey-mdium);
  font-size: 15px;
  line-height: 1.7;
}

/* الحقول مع تسميات عائمة (Floating Labels) */
.modal-form .field { position: relative; margin-bottom: 18px; }
.modal-form input,
.modal-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 16px 8px;
  border: 1.5px solid var(--grey-light);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-family: var(--font-regular);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.modal-form textarea { resize: vertical; min-height: 70px; }
.modal-form input:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(219, 178, 61, 0.15);
}
.modal-form label {
  position: absolute;
  top: 16px;
  inset-inline-start: 14px;
  padding: 0 4px;
  background: #fff;
  color: var(--grey-mdium);
  font-size: 15px;
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
.modal-form input:focus + label,
.modal-form input:not(:placeholder-shown) + label,
.modal-form textarea:focus + label,
.modal-form textarea:not(:placeholder-shown) + label {
  top: -9px;
  font-size: 12px;
  color: var(--secondary);
}

/* حقل مصيدة الروبوتات (مخفي) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.modal-submit {
  width: 100%;
  height: 52px;
  margin-top: 6px;
  border: 1.5px solid var(--secondary);
  border-radius: 14px;
  background: var(--navy);
  color: var(--secondary);
  font-family: var(--font-medium);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.modal-submit:hover:not(:disabled) {
  background: var(--secondary);
  color: var(--navy);
  box-shadow: 0 0 20px rgba(219, 178, 61, 0.55);
}
.modal-submit:disabled { opacity: 0.7; cursor: progress; }

.modal-feedback {
  margin: 14px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  min-height: 1.2em;
}
.modal-feedback.success { color: var(--primary); font-family: var(--font-medium); }
.modal-feedback.error { color: #c0392b; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-card { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .modal-overlay.open .modal-card { transform: translate(-50%, -50%); }
}

/* تجاوب الترويسة والمودال — المصدر الوحيد لأحجام أزرار الهيدر على الجوال */
@media only screen and (max-width: 767px) {
  .register-btn { height: 32px; padding: 0 12px; font-size: 12px; gap: 6px; }
  .register-btn i { font-size: 11px; }
  /* تصغير دائرة القائمة مع الحفاظ على تمركز خطوط الهامبرغر الداخلية
     (scale يحفظ المحاذاة الموروثة من menu.css، وmargin يسترد الفراغ) */
  .menu-outline { transform: scale(0.78); margin: -5px; }
  .modal-card { padding: 34px 22px 26px; }
  .modal-title { font-size: 21px; }
}
@media only screen and (max-width: 480px) {
  .register-btn { height: 30px; padding: 0 10px; font-size: 11px; }
  .menu-outline { transform: scale(0.72); margin: -7px; }
}
@media only screen and (max-width: 360px) {
  .register-btn { padding: 0 9px; }
  .register-btn i { display: none; } /* أيقونة الجرس تُخفى في أضيق الشاشات لإبقاء الزر داخل الصف */
}

/* =====================================================================
   صفحة سياسة الخصوصية
   ===================================================================== */
.policy-container {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
}
.policy-container h1 {
  font-family: var(--font-bold);
  color: var(--primary);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.3;
  margin: 0 0 10px;
  text-align: center;
}
.policy-container h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: var(--secondary);
}
.policy-container h2 {
  font-family: var(--font-bold);
  color: var(--navy);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--grey-light);
}
.policy-container p {
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.9;
  color: var(--text-dark);
  font-size: 16px;
  margin: 0 0 16px;
}
.policy-container ul {
  margin: 0 0 20px;
  padding-inline-start: 26px;
  list-style: disc;
}
.policy-container ul li {
  color: var(--text-dark);
  line-height: 1.9;
  font-size: 16px;
  margin-bottom: 10px;
  padding-inline-start: 6px;
}
.policy-container ul li::marker { color: var(--secondary); }
.policy-intro {
  color: var(--grey-mdium) !important;
  font-size: 17px !important;
}

@media only screen and (max-width: 480px) {
  .policy-container { margin: 30px auto; padding: 16px; }
}

/* =================================================================
   لمسات تفاعلية ختامية: ضغطة ملموسة، حلقة تركيز واضحة، تقليل الحركة
   ================================================================= */
:root {
  /* منحنى الحركة الموحّد للتفاعلات الدقيقة */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ضغطة ملموسة على كل أزرار الدعوة — transform فقط (مسرّع عتادياً) */
.register-btn:active,
.more_btn:active,
.view_all_btn:active,
.interest_btn:active,
.interest_alt:active,
.modal-submit:active,
.filter_chip:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 0.1s;
  transition-timing-function: var(--ease-out-expo);
}

/* حلقة تركيز واضحة للتنقل بلوحة المفاتيح (الحقول لها أنماط تركيز خاصة) */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* تقليل الحركة: إيقاف الحركات الدائمة وتأثيرات التكبير */
@media (prefers-reduced-motion: reduce) {
  .brand_logo { animation: none; }
  .gallery_grid img { transition: none; }
  .gallery_grid .gallery_item:hover img { transform: none; }
  .register-btn, .more_btn, .view_all_btn, .interest_btn { transition: none; }
}