@charset "UTF-8";
/* ==========================================================================
   شركة خطاب العقارية — Khattab Real Estate
   ملف التنسيقات الرئيسي (style.css)
   --------------------------------------------------------------------------
   تحويل كامل للتصميم الأصلي (React + Tailwind) إلى HTML/CSS عادي.
   كل القيم هنا مطابقة حرفياً للتصميم الأصلي (نفس الألوان، نفس المسافات،
   نفس الخطوط، نفس الظلال، نفس نصف الأقطار).

   ملاحظة مهمة عن أسماء الكلاسات:
   كل كلاسات هذا الملف تبدأ بـ ke- (اختصار Khattab Estate) حتى لا تتعارض
   نهائياً مع أي كلاس من Bootstrap لو أضفت ملف Bootstrap CSS لاحقاً.

   فهرس الملف
   ─────────────────────────────────────────────────────────────────────────
    1) متغيرات التصميم (الألوان/الظلال/التدرجات)   ← ابدأ التعديل من هنا
    2) إعادة الضبط والأساسيات
    3) أدوات التخطيط (الحاوية/الشبكة/المسافات)
    4) الأيقونات
    5) الأزرار
    6) الشارات والوسوم
    7) البطاقات العامة والحقول
    8) الهيدر
    9) الفوتر + زر واتساب العائم
   10) عناوين الأقسام
   11) الهيرو وأغلفة الصفحات الداخلية
   12) بطاقة العقار
   13) بطاقة المجمع السكني
   14) بطاقة المشروع قيد الإنشاء
   15) بطاقة الحي السكني
   16) أقسام الصفحة الرئيسية
   17) صفحات القوائم (فلاتر/شبكات)
   18) صفحات التفاصيل
   19) الصفحات الثابتة والنماذج
   20) النوافذ المنبثقة والمعرض وشريط المقارنة
   21) دعم RTL / LTR
   22) الاستجابة (الشاشات الصغيرة)
   ========================================================================== */


/* ==========================================================================
   1) متغيرات التصميم — DESIGN TOKENS
   --------------------------------------------------------------------------
   هذا هو المكان الوحيد الذي تحتاج تعديله لتغيير هوية الموقع بالكامل.
   الألوان مكتوبة بصيغة oklch وهي نفس الصيغة المستخدمة في التصميم الأصلي
   بالضبط (مدعومة في كل المتصفحات الحديثة).
   ========================================================================== */
:root {
  /* ---- نصف قطر الحواف ---- */
  --radius: 0.875rem;                       /* 14px — الأساس */
  --radius-sm: calc(var(--radius) - 4px);   /* 10px */
  --radius-md: calc(var(--radius) - 2px);   /* 12px */
  --radius-lg: var(--radius);               /* 14px */
  --radius-xl: calc(var(--radius) + 4px);   /* 18px */
  --radius-2xl: calc(var(--radius) + 8px);  /* 22px */
  --radius-3xl: calc(var(--radius) + 12px); /* 26px */
  --radius-full: 9999px;

  /* ---- الخلفيات والنصوص ---- */
  --background: oklch(0.985 0.006 220);       /* خلفية الصفحة — لؤلؤي بارد */
  --foreground: oklch(0.16 0.04 255);         /* لون النص الأساسي */
  --card: oklch(1 0 0);                       /* خلفية البطاقات — أبيض */
  --card-foreground: oklch(0.16 0.04 255);

  /* ---- اللون الأساسي (كحلي عميق مأخوذ من اللوجو) ---- */
  --primary: oklch(0.18 0.07 258);
  --primary-foreground: oklch(0.985 0.006 220);
  --primary-soft: oklch(0.30 0.08 258);       /* كحلي أفتح — لحالة hover */

  /* ---- ألوان مساعدة ---- */
  --secondary: oklch(0.95 0.012 220);
  --secondary-foreground: oklch(0.18 0.07 258);
  --muted: oklch(0.95 0.008 220);             /* خلفيات خفيفة */
  --muted-foreground: oklch(0.46 0.025 250);  /* نص ثانوي رمادي */
  --accent: oklch(0.92 0.025 215);
  --accent-foreground: oklch(0.18 0.07 258);

  /* ---- لون الهوية المميّز ----
     الاسم "gold" محتفظ به من التصميم الأصلي للتوافق، لكن اللون فعلياً
     فضي/سماوي معدني مأخوذ من لمعة اللوجو. */
  --gold: oklch(0.78 0.06 215);
  --gold-foreground: oklch(0.16 0.05 255);

  --destructive: oklch(0.58 0.22 27);         /* أحمر — تنبيه/حذف */
  --destructive-foreground: oklch(0.985 0.006 220);

  --border: oklch(0.9 0.012 220);             /* لون الحدود */
  --input: oklch(0.9 0.012 220);              /* حدود حقول الإدخال */
  --ring: oklch(0.78 0.06 215);               /* هالة التركيز */

  /* ---- ألوان إضافية مستخدمة في الحالات ---- */
  --emerald-500: oklch(0.696 0.17 162.48);
  --emerald-600: oklch(0.596 0.145 163.225);
  --emerald-700: oklch(0.508 0.118 165.612);
  --amber-500: oklch(0.769 0.188 70.08);
  --amber-600: oklch(0.666 0.179 58.318);
  --sky-500: oklch(0.685 0.169 237.323);
  --orange-500: oklch(0.705 0.213 47.604);
  --whatsapp: #25D366;
  --whatsapp-dark: #1da851;

  /* ---- التدرجات اللونية ---- */
  --gradient-hero: linear-gradient(135deg, oklch(0.14 0.06 258) 0%, oklch(0.26 0.08 250) 60%, oklch(0.38 0.07 220) 100%);
  --gradient-gold: linear-gradient(135deg, oklch(0.88 0.04 220) 0%, oklch(0.74 0.07 215) 50%, oklch(0.60 0.08 220) 100%);
  --gradient-overlay: linear-gradient(180deg, oklch(0.14 0.06 258 / 0.25) 0%, oklch(0.14 0.06 258 / 0.88) 100%);

  /* ---- الظلال ---- */
  --shadow-soft: 0 4px 20px -4px oklch(0.18 0.07 258 / 0.18);
  --shadow-elegant: 0 24px 60px -22px oklch(0.18 0.07 258 / 0.30);
  --shadow-gold: 0 10px 30px -10px oklch(0.78 0.06 215 / 0.45);

  /* ---- الخط ---- */
  --font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- سرعة الحركات ---- */
  --t-fast: 150ms;
  --t-med: 300ms;
  --t-slow: 500ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2) إعادة الضبط والأساسيات — RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; border: 0 solid var(--border); margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; vertical-align: middle; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; background: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: inherit;
}

/* العناصر المخفية بخاصية hidden تبقى مخفية مهما كان display في الكلاس.
   (لازمة لأن بعض الكلاسات تستخدم display:flex/grid وتتغلب على hidden) */
[hidden] { display: none !important; }

/* إخفاء بصري مع إبقاء العنصر متاحاً لقارئات الشاشة */
.ke-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}


/* ==========================================================================
   3) أدوات التخطيط — LAYOUT
   --------------------------------------------------------------------------
   الحاوية هنا مطابقة لحاوية التصميم الأصلي: عرض كامل مع حد أقصى يتغيّر
   عند كل نقطة استجابة.
   ========================================================================== */
.ke-container { width: 100%; margin-inline: auto; padding-inline: 1rem; }

@media (min-width: 640px)  { .ke-container { max-width: 640px; } }
@media (min-width: 768px)  { .ke-container { max-width: 768px; } }
@media (min-width: 1024px) { .ke-container { max-width: 1024px; padding-inline: 2rem; } }
@media (min-width: 1280px) { .ke-container { max-width: 1280px; } }
@media (min-width: 1536px) { .ke-container { max-width: 1536px; } }

/* الهيدر يستخدم حشوة ثابتة 1rem على كل المقاسات (مطابق للتصميم الأصلي) */
.ke-header .ke-container { padding-inline: 1rem; }

/* الهيكل العام للصفحة: الفوتر يلتصق بالأسفل دائماً */
.ke-page { display: flex; flex-direction: column; min-height: 100vh; }
.ke-main { flex: 1 1 auto; }

/* شبكات جاهزة — تُستخدم في كل الصفحات */
.ke-grid { display: grid; }
.ke-grid-2, .ke-grid-3, .ke-grid-4, .ke-grid-5 { display: grid; grid-template-columns: 1fr; }

.ke-gap-2 { gap: 0.5rem; }
.ke-gap-3 { gap: 0.75rem; }
.ke-gap-4 { gap: 1rem; }
.ke-gap-5 { gap: 1.25rem; }
.ke-gap-6 { gap: 1.5rem; }
.ke-gap-8 { gap: 2rem; }
.ke-gap-10 { gap: 2.5rem; }

/* مسافات رأسية للأقسام — نفس قيم التصميم الأصلي */
.ke-section { padding-block: 5rem; }        /* py-20 */
.ke-section-sm { padding-block: 3.5rem; }   /* py-14 */
.ke-section-xs { padding-block: 3rem; }     /* py-12 */

/* خلفيات الأقسام */
.ke-bg-muted { background-color: color-mix(in oklab, var(--muted) 30%, transparent); }
.ke-bg-card { background-color: var(--card); }
.ke-bg-primary { background-color: var(--primary); color: var(--primary-foreground); }
.ke-bg-hero-gradient { background: var(--gradient-hero); }
.ke-bg-gold-gradient { background: var(--gradient-gold); }

/* محاذاة سريعة */
.ke-text-center { text-align: center; }
.ke-flex { display: flex; }
.ke-flex-center { display: flex; align-items: center; }
.ke-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ke-flex-wrap { flex-wrap: wrap; }
.ke-relative { position: relative; }
.ke-mt-auto { margin-top: auto; }


/* ==========================================================================
   4) الأيقونات — ICONS
   --------------------------------------------------------------------------
   كل الأيقونات SVG مضمّنة داخل الصفحة (نفس أيقونات Lucide المستخدمة في
   التصميم الأصلي بالضبط) — لا توجد أي مكتبة أيقونات خارجية.
   الحجم يُتحكم فيه بكلاس، واللون يرث من العنصر الأب تلقائياً.
   ========================================================================== */
.ke-i {
  display: inline-block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ke-i-xs { width: 0.75rem;  height: 0.75rem; }   /* w-3 */
.ke-i-sm { width: 0.875rem; height: 0.875rem; }  /* w-3.5 */
.ke-i-md { width: 1rem;     height: 1rem; }      /* w-4 */
.ke-i-lg { width: 1.25rem;  height: 1.25rem; }   /* w-5 */
.ke-i-xl { width: 1.5rem;   height: 1.5rem; }    /* w-6 */
.ke-i-2xl{ width: 1.75rem;  height: 1.75rem; }   /* w-7 */
.ke-i-3xl{ width: 3.5rem;   height: 3.5rem; }    /* w-14 */
.ke-i-gold { color: var(--gold); }
.ke-i-fill { fill: currentColor; }


/* ==========================================================================
   5) الأزرار — BUTTONS
   ========================================================================== */
.ke-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  font-size: 0.875rem; line-height: 1.25rem;
  line-height: 1.4286;
  transition: all var(--t-fast) var(--ease);
}

/* الزر الأساسي — كحلي */
.ke-btn-primary { background-color: var(--primary); color: var(--primary-foreground); }
.ke-btn-primary:hover { background-color: var(--primary-soft); }

/* الزر المميّز — تدرج فضي/ذهبي */
.ke-btn-gold {
  background: var(--gradient-gold);
  color: var(--gold-foreground);
  box-shadow: var(--shadow-gold);
}
.ke-btn-gold:hover { opacity: 0.95; }

/* زر شفاف بحدود */
.ke-btn-outline { border: 1px solid var(--border); color: var(--foreground); background-color: var(--card); }
.ke-btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* زر زجاجي فوق الخلفيات الداكنة */
.ke-btn-glass {
  border: 1px solid rgb(255 255 255 / 0.3);
  background-color: rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.ke-btn-glass:hover { background-color: rgb(255 255 255 / 0.2); border-color: color-mix(in oklab, var(--gold) 60%, transparent); }

/* زر واتساب */
.ke-btn-wa { border: 1px solid rgb(37 211 102 / 0.4); color: var(--whatsapp-dark); }
.ke-btn-wa:hover { background-color: rgb(37 211 102 / 0.1); }

/* أحجام */
.ke-btn-lg { padding: 1rem 1.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.ke-btn-xl { padding: 1rem 2rem; }
.ke-btn-sm { padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.ke-btn-block { width: 100%; }
.ke-btn-pill { border-radius: var(--radius-full); }
.ke-btn-xl-pill { border-radius: var(--radius-full); padding: 1rem 2rem; }

/* رفع الزر عند المرور — كما في الهيرو */
.ke-btn-lift:hover { transform: translateY(-2px); }


/* ==========================================================================
   6) الشارات والوسوم — BADGES & TAGS
   ========================================================================== */
.ke-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;               /* text-[11px] */
  font-weight: 800;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
}
.ke-badge-primary { background-color: color-mix(in oklab, var(--primary) 90%, transparent); color: var(--primary-foreground); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ke-badge-gold { background: var(--gradient-gold); color: var(--gold-foreground); box-shadow: var(--shadow-gold); }
.ke-badge-accent { background-color: var(--accent); color: var(--accent-foreground); font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.625rem; }
.ke-badge-white { background-color: rgb(255 255 255 / 0.9); color: var(--primary); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ke-badge-ready { background-color: color-mix(in oklab, var(--emerald-500) 90%, transparent); color: #fff; }
.ke-badge-building { background-color: color-mix(in oklab, var(--amber-500) 90%, transparent); color: #fff; }
.ke-badge-soon { background-color: var(--gold); color: var(--gold-foreground); }
.ke-badge-phase { background-color: color-mix(in oklab, var(--primary) 90%, transparent); color: var(--primary-foreground); }

/* شارة "عين الطائر" أعلى الأقسام (eyebrow) */
.ke-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem; line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.ke-eyebrow::before,
.ke-eyebrow::after { content: ""; width: 2rem; height: 1px; background-color: var(--gold); }

/* شارة داخل الهيرو */
.ke-pill-hero {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  background-color: color-mix(in oklab, var(--primary) 40%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 0.375rem 1rem; border-radius: var(--radius-full);
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--gold);
  margin-bottom: 1.5rem;   /* mb-6 */
}


/* ==========================================================================
   7) البطاقات العامة والحقول — CARDS & FORM FIELDS
   ========================================================================== */
.ke-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}
.ke-card-soft { box-shadow: var(--shadow-soft); }
.ke-card-3xl { border-radius: var(--radius-3xl); }
.ke-card-hover { transition: all var(--t-med) var(--ease); }
.ke-card-hover:hover { box-shadow: var(--shadow-elegant); border-color: var(--gold); }
.ke-card-lift:hover { transform: translateY(-4px); }
.ke-card-body { padding: 1.25rem; }
.ke-card-body-lg { padding: 2rem; }

/* الحقول */
.ke-label { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.375rem; }
.ke-input,
.ke-select,
.ke-textarea {
  width: 100%;
  background-color: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem;
  color: var(--foreground);
  transition: border-color var(--t-fast) var(--ease);
}
.ke-input:focus,
.ke-select:focus,
.ke-textarea:focus { outline: none; border-color: var(--gold); }
.ke-textarea { resize: vertical; min-height: 5rem; }
.ke-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596273' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 1rem;
  padding-inline-end: 0.75rem;
  padding-inline-start: 2.25rem;
}
/* في الوضع الإنجليزي (LTR) يتحرك سهم القائمة لليمين تلقائياً */
[dir="ltr"] .ke-select { background-position: right 0.75rem center; }

/* حقل بحث مع أيقونة */
.ke-search { position: relative; }
.ke-search .ke-i {
  position: absolute; inset-inline-start: 0.75rem; top: 50%;
  transform: translateY(-50%); color: var(--muted-foreground);
  width: 1rem; height: 1rem; pointer-events: none;
}
.ke-search .ke-input { padding-inline-start: 2.5rem; }

.ke-checkbox { width: 1rem; height: 1rem; accent-color: var(--gold); }


/* ==========================================================================
   8) الهيدر — HEADER
   ========================================================================== */
.ke-header { position: sticky; top: 0; z-index: 50; }

.ke-header-inner {
  position: relative;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
/* الخط الذهبي الرفيع أسفل الهيدر */
.ke-header-inner::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(to left, transparent, color-mix(in oklab, var(--gold) 60%, transparent), transparent);
  pointer-events: none;
}

.ke-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 5rem;
}
@media (min-width: 768px) { .ke-header-bar { height: 6rem; } }

/* --- اللوجو --- */
.ke-brand { position: relative; display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ke-brand-mark { position: relative; display: block; flex-shrink: 0; margin-block: -0.5rem; }
@media (min-width: 768px) { .ke-brand-mark { margin-block: -0.75rem; } }

/* الهالة خلف اللوجو */
.ke-brand-mark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius-full);
  background-color: color-mix(in oklab, var(--gold) 25%, transparent);
  opacity: 0.6; filter: blur(40px);
  transition: opacity var(--t-slow) var(--ease);
}
.ke-brand:hover .ke-brand-mark::before { opacity: 0.9; }

.ke-brand-box {
  position: relative;
  display: block;
  border-radius: 18px;
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  padding: 0.5rem 0.75rem;
  box-shadow: 0 14px 36px -16px color-mix(in oklab, var(--gold) 55%, transparent),
              0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent);
  transition: box-shadow var(--t-slow) var(--ease);
}
.ke-brand:hover .ke-brand-box {
  box-shadow: 0 14px 36px -16px color-mix(in oklab, var(--gold) 55%, transparent),
              0 0 0 1px color-mix(in oklab, var(--gold) 80%, transparent);
}
.ke-brand-logo {
  height: 52px; width: auto; object-fit: contain;
  transition: transform 700ms var(--ease);
}
@media (min-width: 768px) { .ke-brand-logo { height: 64px; } }
.ke-brand:hover .ke-brand-logo { transform: scale(1.04); }

.ke-brand-text { display: none; min-width: 0; text-align: start; border-inline-start: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); padding-inline-start: 0.75rem; }
@media (min-width: 640px) { .ke-brand-text { display: block; } }
.ke-brand-name {
  font-size: 0.875rem; font-weight: 800; line-height: 1.25;
  letter-spacing: -0.01em; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 768px) { .ke-brand-name { font-size: 1rem; line-height: 1.5rem; } }
.ke-brand-sub {
  display: block; margin-top: 0.125rem; font-size: 9px; font-weight: 700;
  text-transform: uppercase; line-height: 1.25; letter-spacing: 0.22em;
  color: color-mix(in oklab, var(--gold) 85%, transparent);
}
@media (min-width: 768px) { .ke-brand-sub { font-size: 10px; } }
.ke-brand-rule {
  display: block; margin-top: 0.25rem; height: 1px; width: 3rem;
  background: linear-gradient(to left, transparent, var(--gold), transparent);
}

/* --- قائمة التنقل (سطح المكتب) --- */
.ke-nav {
  display: none; align-items: center;
  border: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.03);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--radius-full); padding: 0.25rem;
}
@media (min-width: 1024px) { .ke-nav { display: flex; } }

.ke-nav-link {
  position: relative; display: inline-flex; align-items: center;
  border-radius: var(--radius-full);
  padding: 0.5rem 0.75rem;
  font-size: 13px; font-weight: 600;
  color: rgb(255 255 255 / 0.8);
  transition: color var(--t-fast) var(--ease);
}
.ke-nav-link:hover { color: var(--gold); }
.ke-nav-link.is-active { background-color: rgb(255 255 255 / 0.1); color: var(--gold); }

/* --- أزرار الهيدر (هاتف/لغة/قائمة) --- */
.ke-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }

.ke-header-phone {
  display: none; align-items: center; gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  background-color: color-mix(in oklab, var(--gold) 10%, transparent);
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: 700; color: #fff;
  transition: all var(--t-fast) var(--ease);
}
@media (min-width: 768px) { .ke-header-phone { display: inline-flex; } }
.ke-header-phone:hover { border-color: var(--gold); color: var(--gold); }

.ke-lang-btn,
.ke-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  background-color: rgb(255 255 255 / 0.05);
  border-radius: var(--radius-full);
  color: #fff; font-size: 12px; font-weight: 700;
  transition: all var(--t-fast) var(--ease);
}
.ke-lang-btn { padding: 0.5rem 0.75rem; }
.ke-menu-btn { padding: 0.625rem; }
@media (min-width: 1024px) { .ke-menu-btn { display: none; } }
.ke-lang-btn:hover,
.ke-menu-btn:hover { background-color: rgb(255 255 255 / 0.1); border-color: color-mix(in oklab, var(--gold) 40%, transparent); }

/* --- قائمة الموبايل --- */
.ke-mobile-nav {
  display: none;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  background-color: color-mix(in oklab, var(--primary) 95%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.ke-mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .ke-mobile-nav, .ke-mobile-nav.is-open { display: none; } }

.ke-mobile-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem; padding-block: 1rem;
}
.ke-mobile-link {
  border: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.04);
  border-radius: var(--radius-xl);
  padding: 0.625rem 0.75rem;
  text-align: center; font-size: 13px; font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}
.ke-mobile-link.is-active { border-color: color-mix(in oklab, var(--gold) 50%, transparent); color: var(--gold); }
.ke-mobile-phone {
  grid-column: 1 / -1; margin-top: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid var(--gold);
  background-color: color-mix(in oklab, var(--gold) 10%, transparent);
  padding: 0.625rem 1rem; border-radius: var(--radius-full);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--gold);
}


/* ==========================================================================
   9) الفوتر + زر واتساب العائم — FOOTER & WHATSAPP FAB
   ========================================================================== */
.ke-footer { background-color: var(--primary); color: var(--primary-foreground); margin-top: 6rem; }
.ke-footer-inner { padding-block: 4rem; }
.ke-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px)  { .ke-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ke-footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
/* ⚠️ توحيد شكل صندوق اللوجو مع الهيدر - إصلاح تاني: المحاولة القديمة (خلفية
   بيضاء) كانت مبنية على افتراض غلط إن صندوق بلون --primary هيختفي فى خلفية
   الفوتر (اللي هي كمان --primary) - بس ده بالظبط اللي بيحصل فعليًا فى
   الهيدر نفسه (.ke-header-inner خلفيته color-mix(--primary 90%) بالظبط
   زي .ke-brand-box)! الصندوق مش واضح هناك بسبب تباين اللون خالص - واضح
   بسبب التوهج/الحد الذهبي (box-shadow) حواليه بس، اللي بيرسم "إطار" حوله
   حتى لو الخلفية مطابقة تقريبًا لخلفية الصفحة. العميل أكّد صراحة إنه عايز
   نفس شكل الهيدر بالظبط - فبقت .ke-footer-logo-box/.ke-footer-logo نسخة
   مطابقة حرفيًا لـ.ke-brand-box/.ke-brand-logo فوق (بدل تكرار قيم مختلفة
   يدويًا وممكن تنحرف عن بعض فى تعديل مستقبلي). كمان .ke-footer-logo كانت
   height/width ثابتين بالتساوي (4rem/4rem) بيفرضوا شكل مربع حتى لو اللوجو
   الأصلي مش مربع (تشويه/تمطيط) - width:auto زي .ke-brand-logo بيحافظ على
   نسب اللوجو الحقيقية بدل ما يتمطط. */
.ke-footer-logo-box {
    display: block;
    border-radius: 18px;
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
    padding: 0.5rem 0.75rem;
    box-shadow: 0 14px 36px -16px color-mix(in oklab, var(--gold) 55%, transparent),
                0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent);
}
.ke-footer-logo { height: 52px; width: auto; object-fit: contain; }
@media (min-width: 768px) { .ke-footer-logo { height: 64px; } }
.ke-footer-name { font-weight: 800; font-size: 1.125rem; line-height: 1.75rem; }
.ke-footer-name-en { font-size: 0.75rem; line-height: 1rem; opacity: 0.7; letter-spacing: 0.05em; }
.ke-footer-about { font-size: 0.875rem; line-height: 1.625; opacity: 0.8; }
.ke-footer-about p { margin: 0; }
.ke-footer-about p + p { margin-top: 0.5rem; }

/* أيقونات وسائل التواصل الاجتماعي فى الفوتر - راجع footer.blade.php
   ($keSocialLinks) لمصدر البيانات (settings) ومنطق الإظهار/الإخفاء. */
.ke-footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 1.25rem; }
.ke-footer-social a {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.12); display: flex; align-items: center; justify-content: center;
  color: var(--primary-foreground); transition: all var(--t-fast) var(--ease); flex-shrink: 0;
}
.ke-footer-social a:hover { background-color: var(--gold); color: var(--primary); }
.ke-footer-social .ke-i { width: 1.05rem; height: 1.05rem; }

.ke-footer-title { font-weight: 700; font-size: 1rem; line-height: 1.5rem; margin-bottom: 1rem; color: var(--gold); }
.ke-footer-links { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.9; }
.ke-footer-links a { transition: color var(--t-fast) var(--ease); }
.ke-footer-links a:hover { color: var(--gold); }

.ke-footer-contact { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.9; }
.ke-footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.ke-footer-contact .ke-i { margin-top: 0.25rem; flex-shrink: 0; color: var(--gold); width: 1rem; height: 1rem; }
.ke-footer-phones { display: flex; flex-direction: column; gap: 0.25rem; }
.ke-footer-contact a:hover { color: var(--gold); }

.ke-footer-cta-text { font-size: 0.875rem; line-height: 1.25rem; opacity: 0.8; margin-bottom: 1rem; }
.ke-footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  text-align: center; font-size: 0.75rem; line-height: 1rem; opacity: 0.6;
}

/* زر واتساب العائم — أسفل يسار في العربي، أسفل يمين في الإنجليزي */
.ke-wa-fab {
  position: fixed; bottom: 1.5rem; inset-inline-start: 1.5rem; z-index: 40;
  background-color: var(--whatsapp); color: #fff;
  border-radius: var(--radius-full); padding: 1rem;
  box-shadow: var(--shadow-elegant);
  transition: transform var(--t-fast) var(--ease);
}
.ke-wa-fab:hover { transform: scale(1.1); }


/* ==========================================================================
   10) عناوين الأقسام — SECTION HEADINGS
   ========================================================================== */
.ke-heading { margin-bottom: 3rem; text-align: center; margin-inline: auto; max-width: 42rem; }
.ke-heading-start { margin-bottom: 3rem; text-align: start; max-width: none; margin-inline: 0; }
/* أحجام العناوين وارتفاع السطر مطابقة لسلّم التصميم الأصلي:
   3xl (1.875rem/1.2) ← md: 4xl (2.25rem/1.111) ← lg: 5xl (3rem/1) */
.ke-heading-title { font-size: 1.875rem; line-height: 1.2; font-weight: 800; color: var(--primary); margin-bottom: 1rem; }
@media (min-width: 768px)  { .ke-heading-title { font-size: 2.25rem; line-height: 1.1111; } }
@media (min-width: 1024px) { .ke-heading-title { font-size: 3rem; line-height: 1; } }
.ke-heading-desc { font-size: 1rem; color: var(--muted-foreground); line-height: 1.625; }
@media (min-width: 768px) { .ke-heading-desc { font-size: 1.125rem; line-height: 1.75rem; } }

/* نسخة فاتحة فوق الخلفيات الكحلي */
.ke-heading-light .ke-heading-title { color: var(--primary-foreground); }
.ke-heading-light .ke-heading-desc { color: rgb(255 255 255 / 0.8); }


/* ==========================================================================
   11) الهيرو وأغلفة الصفحات الداخلية — HERO & PAGE COVERS
   ========================================================================== */
/* --- هيرو الصفحة الرئيسية --- */
.ke-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 90vh; display: flex; align-items: center;
}
/* نسخة أقصر من نفس الهيرو (glow/veil/orb) لصفحات داخلية عندها محتوى كتير
   تحتها (زي "من نحن") - عشان الزائر يوصل لباقي الصفحة بسرعة أكبر من
   الـ 90vh الكاملة بتاعة الصفحة الرئيسية. */
.ke-hero-sm { min-height: 56vh; }
@media (min-width: 768px) { .ke-hero-sm { min-height: 62vh; } }
.ke-hero-sm .ke-hero-body { padding-block: 5rem; }
@media (min-width: 768px) { .ke-hero-sm .ke-hero-body { padding-block: 6rem; } }
.ke-hero-sm .ke-hero-title { font-size: 2rem; }
@media (min-width: 768px)  { .ke-hero-sm .ke-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .ke-hero-sm .ke-hero-title { font-size: 3.5rem; } }
.ke-hero-sm .ke-hero-trust { margin-top: 2.5rem; }
.ke-hero-img { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; }
/* التعتيم: أغمق أعلى وأسفل ليبقى وسط الصورة واضحاً */
.ke-hero-veil {
  position: absolute; inset: 0; z-index: -10;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--primary) 85%, transparent) 0%,
    color-mix(in oklab, var(--primary) 35%, transparent) 50%,
    color-mix(in oklab, var(--primary) 95%, transparent) 100%);
}
.ke-hero-glow {
  position: absolute; inset: 0; z-index: -10;
  background: radial-gradient(ellipse 70% 55% at 50% 55%, oklch(0.14 0.06 258 / 0.55) 0%, transparent 70%);
}
.ke-hero-orb {
  pointer-events: none; position: absolute; top: 33.333%; inset-inline-start: 50%;
  transform: translateX(-50%); height: 32rem; width: 32rem;
  border-radius: var(--radius-full);
  background-color: color-mix(in oklab, var(--gold) 10%, transparent);
  filter: blur(140px);
}
[dir="rtl"] .ke-hero-orb { transform: translateX(50%); }

.ke-hero-body { padding-block: 6rem; position: relative; }
@media (min-width: 768px) { .ke-hero-body { padding-block: 8rem; } }
.ke-hero-inner { margin-inline: auto; max-width: 56rem; text-align: center; color: var(--primary-foreground); }

.ke-hero-title {
  font-size: 2.25rem; font-weight: 800; line-height: 1.15;
  text-wrap: balance;
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.55));
}
@media (min-width: 768px)  { .ke-hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .ke-hero-title { font-size: 4.5rem; } }
.ke-hero-title .ke-gold { color: var(--gold); }

.ke-hero-rule { margin-top: 1.75rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.ke-hero-rule::before,
.ke-hero-rule::after { content: ""; height: 1px; width: 4rem; background-color: color-mix(in oklab, var(--gold) 70%, transparent); }
.ke-hero-rule span { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--gold); letter-spacing: 0.015em; }

.ke-hero-desc {
  margin-inline: auto; margin-top: 1.5rem; max-width: 42rem;
  font-size: 1rem; line-height: 2rem;   /* leading-8 */ color: rgb(255 255 255 / 0.9);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
@media (min-width: 768px) { .ke-hero-desc { font-size: 1.125rem; } }

.ke-hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }

.ke-hero-trust {
  margin-top: 3.5rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  column-gap: 2.5rem; row-gap: 1rem;
  font-size: 0.75rem; line-height: 1rem; color: rgb(255 255 255 / 0.8);
}
.ke-hero-trust > div { display: flex; align-items: center; gap: 0.5rem; }
.ke-hero-trust .ke-sep { display: none; height: 1.25rem; width: 1px; background-color: rgb(255 255 255 / 0.2); }
@media (min-width: 640px) { .ke-hero-trust .ke-sep { display: block; } }
.ke-hero-trust .ke-num { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--gold); }
.ke-hero-trust .ke-lbl { font-weight: 600; }

/* --- غلاف الصفحات الداخلية (بانر كحلي متدرج) --- */
.ke-cover { background: var(--gradient-hero); color: var(--primary-foreground); padding-block: 4rem; }
.ke-cover-eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 0.75rem; }
.ke-cover-title { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; margin-bottom: 1rem; }
@media (min-width: 768px) { .ke-cover-title { font-size: 3rem; line-height: 1; } }
.ke-cover-desc { opacity: 0.85; max-width: 42rem; }


/* ==========================================================================
   12) بطاقة العقار — PROPERTY CARD
   ========================================================================== */
.ke-prop {
  display: flex; flex-direction: column;
  background-color: var(--card);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: all var(--t-med) var(--ease);
}
.ke-prop:hover { box-shadow: var(--shadow-elegant); }

.ke-prop-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ke-prop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.ke-prop:hover .ke-prop-media img { transform: scale(1.05); }

.ke-prop-tags { position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; display: flex; gap: 0.5rem; }
.ke-prop-tags .ke-badge { font-size: 0.75rem; line-height: 1rem; }

/* زر المقارنة الدائري أعلى الصورة */
.ke-prop-compare {
  position: absolute; top: 0.75rem; inset-inline-start: 0.75rem;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background-color: rgb(255 255 255 / 0.9); color: var(--primary);
  transition: all var(--t-fast) var(--ease);
}
.ke-prop-compare:hover { background-color: #fff; }
.ke-prop-compare.is-on { background-color: var(--gold); color: var(--gold-foreground); }

/* شريط السعر أسفل الصورة */
.ke-prop-price {
  position: absolute; bottom: 0; inset-inline: 0; padding: 1rem;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--primary) 95%, transparent),
    color-mix(in oklab, var(--primary) 70%, transparent),
    transparent);
}
.ke-prop-price-lbl { display: block; color: rgb(255 255 255 / 0.8); font-size: 11px; line-height: 1.5; margin-bottom: 0.125rem; }
.ke-prop-price-val { display: block; color: #fff; font-size: 1.5rem; line-height: 2rem; font-weight: 800; }
.ke-prop-price-val span { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; }
.ke-prop-price-id { display: block; color: rgb(255 255 255 / 0.6); font-size: 11px; line-height: 1.5; margin-top: 0.125rem; }

.ke-prop-body { padding: 1.25rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.ke-prop-title {
  font-weight: 800; font-size: 1rem; line-height: 1.5rem; color: var(--primary); margin-bottom: 0.5rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease);
}
.ke-prop-title:hover { color: var(--gold); }
/* سطر الموقع: أيقونة + نص من سطر واحد يُقصّ بالنقاط عند الزيادة */
.ke-prop-loc {
  display: flex; align-items: flex-start; gap: 0.375rem;
  font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 1rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ke-prop-loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ke-prop-loc .ke-i { margin-top: 0.125rem; flex-shrink: 0; color: var(--gold); }

.ke-prop-specs {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground);
  border-top: 1px solid var(--border); padding-top: 0.75rem; margin-bottom: 1rem;
}
.ke-prop-specs span { display: flex; align-items: center; gap: 0.25rem; }
.ke-prop-specs .ke-i { color: var(--primary); }

.ke-prop-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: auto; }
.ke-prop-actions2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.ke-prop-actions .ke-btn { padding-block: 0.625rem; border-radius: var(--radius-md); }
.ke-prop-actions2 .ke-btn { padding-block: 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; border-radius: var(--radius-md); }
.ke-prop-actions2 .ke-btn-outline.is-on { background-color: color-mix(in oklab, var(--gold) 10%, transparent); border-color: var(--gold); color: var(--gold); }


/* ==========================================================================
   13) بطاقة المجمع السكني — COMPOUND CARD
   ========================================================================== */
.ke-cmp {
  position: relative; background-color: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-3xl);
  overflow: hidden; box-shadow: var(--shadow-soft);
  transition: all var(--t-slow) var(--ease);
}
.ke-cmp:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }

.ke-cmp-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.ke-cmp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-cmp:hover .ke-cmp-media img { transform: scale(1.1); }
.ke-cmp-veil {
  position: absolute; inset: 0; opacity: 0.8;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--primary) 80%, transparent),
    color-mix(in oklab, var(--primary) 10%, transparent),
    transparent);
}
.ke-cmp-status { position: absolute; top: 1rem; inset-inline-end: 1rem; }
.ke-cmp-fav {
  position: absolute; top: 1rem; inset-inline-start: 1rem;
  display: grid; place-items: center; min-height: 2.75rem; min-width: 2.75rem;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--primary); transition: all var(--t-fast) var(--ease);
}
.ke-cmp-fav:hover { background-color: #fff; }
.ke-cmp-fav.is-on .ke-i { fill: var(--destructive); color: var(--destructive); }

.ke-cmp-caption { position: absolute; bottom: 1rem; inset-inline: 1rem; color: var(--primary-foreground); }
.ke-cmp-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
.ke-cmp-name-en { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; margin-top: 0.25rem; }

.ke-cmp-body { padding: 1.25rem; }
.ke-cmp-loc { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.ke-cmp-loc .ke-i { color: var(--gold); flex-shrink: 0; }
.ke-cmp-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ثلاث خانات إحصائية داخل البطاقة */
.ke-cmp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; text-align: center; }
.ke-cmp-stat { background-color: color-mix(in oklab, var(--muted) 60%, transparent); border-radius: var(--radius-xl); padding-block: 0.625rem; }
.ke-cmp-stat .ke-i { margin-inline: auto; color: var(--gold); margin-bottom: 0.25rem; }
.ke-cmp-stat-v { font-size: 0.875rem; line-height: 1.25rem; font-weight: 800; color: var(--primary); }
.ke-cmp-stat-l { font-size: 10px; color: var(--muted-foreground); }

.ke-cmp-kinds { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.25rem; }
.ke-cmp-foot { padding-top: 1rem; border-top: 1px solid var(--border); }
.ke-cmp-foot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.ke-cmp-price-lbl { font-size: 11px; color: var(--muted-foreground); }
.ke-cmp-price { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); }
.ke-cmp-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.ke-cmp-pay > div { background-color: color-mix(in oklab, var(--muted) 60%, transparent); border-radius: var(--radius-xl); padding: 0.5rem 0.75rem; }
.ke-cmp-pay-l { font-size: 10px; color: var(--muted-foreground); }
.ke-cmp-pay-v { font-size: 0.875rem; line-height: 1.25rem; font-weight: 800; color: var(--primary); }

/* السهم يتباعد قليلاً عند المرور على البطاقة */
.ke-cmp:hover .ke-btn-primary { gap: 0.625rem; }


/* ==========================================================================
   14) بطاقة المشروع قيد الإنشاء — DEVELOPMENT CARD
   ========================================================================== */
.ke-dev { /* يرث نفس هيكل بطاقة المجمع */ }
.ke-dev:hover { transform: translateY(-6px); }
.ke-dev-type {
  position: absolute; top: 1rem; inset-inline-start: 1rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
/* شريط نسبة الإنجاز */
.ke-dev-progress { margin-top: 0.75rem; }
.ke-dev-progress-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; margin-bottom: 0.375rem; }
.ke-dev-progress-top .ke-lbl { opacity: 0.8; }
.ke-dev-progress-top .ke-val { color: var(--gold); }
.ke-dev-progress-track { height: 0.375rem; width: 100%; border-radius: var(--radius-full); background-color: rgb(255 255 255 / 0.25); overflow: hidden; }
.ke-dev-progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--gradient-gold); transition: width 1000ms var(--ease); }
.ke-dev:hover .ke-dev-progress-bar { filter: brightness(1.1); }
.ke-dev-flags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.25rem; }


/* ==========================================================================
   15) بطاقة الحي السكني — DISTRICT CARD
   ========================================================================== */
.ke-dis {
  position: relative; background-color: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-3xl);
  overflow: hidden; box-shadow: var(--shadow-soft);
  transition: all var(--t-slow) var(--ease);
}
.ke-dis:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); border-color: var(--gold); }
.ke-dis-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ke-dis-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-dis:hover .ke-dis-media img { transform: scale(1.08); }
.ke-dis-body { padding: 1.25rem; }
.ke-dis-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-block: 1rem; }
.ke-dis-stat { background-color: color-mix(in oklab, var(--muted) 60%, transparent); border-radius: var(--radius-xl); padding: 0.625rem 0.75rem; }


/* ==========================================================================
   16) أقسام الصفحة الرئيسية — HOME SECTIONS
   ========================================================================== */
/* --- بطاقتا الخدمات (اعرض عقارك / احجز استشارتك) --- */
.ke-svc-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 72rem; margin-inline: auto; }
@media (min-width: 768px) { .ke-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-svc {
  position: relative; display: block; background-color: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-3xl);
  overflow: hidden; transition: all var(--t-fast) var(--ease);
}
.ke-svc:hover { box-shadow: var(--shadow-elegant); border-color: var(--gold); }
.ke-svc-media { position: relative; height: 14rem; overflow: hidden; }
.ke-svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-svc:hover .ke-svc-media img { transform: scale(1.05); }
.ke-svc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--primary) 80%, transparent),
    color-mix(in oklab, var(--primary) 20%, transparent),
    transparent);
}
.ke-svc-body { padding: 2rem; }
.ke-svc-title { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 0.75rem; }
.ke-svc-desc { color: var(--muted-foreground); line-height: 1.625; margin-bottom: 1.5rem; }
.ke-svc-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold); font-weight: 700; transition: gap var(--t-fast) var(--ease); }
.ke-svc:hover .ke-svc-link { gap: 0.75rem; }

/* --- قسم "اطلب عقارك" --- */
.ke-request { position: relative; padding-block: 5rem; background-color: var(--background); overflow: hidden; }
.ke-request-box {
  position: relative; background: var(--gradient-hero); color: var(--primary-foreground);
  border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow-elegant);
  border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent);
}
.ke-request-orb-a { position: absolute; top: -8rem; inset-inline-start: -8rem; width: 24rem; height: 24rem; border-radius: var(--radius-full); background-color: color-mix(in oklab, var(--gold) 20%, transparent); filter: blur(64px); }
.ke-request-orb-b { position: absolute; bottom: -8rem; inset-inline-end: -8rem; width: 24rem; height: 24rem; border-radius: var(--radius-full); background-color: color-mix(in oklab, var(--gold) 10%, transparent); filter: blur(64px); }
.ke-request-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem; align-items: center; }
@media (min-width: 768px)  { .ke-request-grid { padding: 3.5rem; } }
@media (min-width: 1024px) { .ke-request-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ke-request-left { grid-column: span 3 / span 3; }
.ke-request-right { grid-column: span 2 / span 2; }
.ke-request-title { font-size: 1.875rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .ke-request-title { font-size: 3rem; line-height: 1; } }
.ke-request-desc { font-size: 1rem; opacity: 0.9; line-height: 2; margin-bottom: 1.75rem; max-width: 36rem; }
@media (min-width: 768px) { .ke-request-desc { font-size: 1.125rem; line-height: 1.75rem; } }
.ke-request-benefits { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.ke-request-benefits > div { display: flex; align-items: center; gap: 0.5rem; }
.ke-request-benefits .ke-i { color: var(--gold); }

/* البطاقة الزجاجية على اليمين */
.ke-glass-card {
  background-color: rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-2xl); padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
}
.ke-glass-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgb(255 255 255 / 0.15); }
.ke-glass-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl); background: var(--gradient-gold); color: var(--gold-foreground); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); }
.ke-glass-steps { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.ke-glass-steps li { display: flex; align-items: flex-start; gap: 0.75rem; }
.ke-glass-num {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full);
  background-color: color-mix(in oklab, var(--gold) 20%, transparent); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; line-height: 1rem;
}
.ke-glass-cta {
  margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: #fff; color: var(--primary); padding-block: 0.75rem;
  border-radius: var(--radius-xl); font-weight: 800; transition: all var(--t-fast) var(--ease);
}
.ke-glass-cta:hover { background-color: var(--gold); color: var(--gold-foreground); }

/* --- أنواع العقارات --- */
.ke-type {
  display: block; background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem; text-align: center;
  transition: all var(--t-fast) var(--ease);
}
.ke-type:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.ke-type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-2xl);
  background-color: var(--primary); color: var(--gold); margin-bottom: 1rem;
  transition: all var(--t-fast) var(--ease);
}
.ke-type:hover .ke-type-icon { background: var(--gradient-gold); color: var(--gold-foreground); }
.ke-type-title { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; color: var(--primary); margin-bottom: 0.5rem; }
.ke-type-desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* --- لماذا نحن (فوق خلفية كحلي) --- */
.ke-why { position: relative; padding-block: 5rem; background-color: var(--primary); color: var(--primary-foreground); overflow: hidden; }
.ke-why-bg { position: absolute; inset: 0; opacity: 0.2; }
.ke-why-bg img { width: 100%; height: 100%; object-fit: cover; }
.ke-why-inner { position: relative; }
.ke-why-head { text-align: center; max-width: 42rem; margin-inline: auto; margin-bottom: 3.5rem; }
.ke-why-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; margin-bottom: 1rem; }
@media (min-width: 768px) { .ke-why-title { font-size: 3rem; line-height: 1; } }
.ke-why-desc { opacity: 0.8; font-size: 1.125rem; line-height: 1.75rem; }
.ke-why-card {
  background-color: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-2xl); padding: 1.5rem;
  transition: border-color var(--t-fast) var(--ease);
}
.ke-why-card:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.ke-why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-xl);
  background: var(--gradient-gold); color: var(--gold-foreground); margin-bottom: 1rem;
}
.ke-why-card h3 { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 0.5rem; }
.ke-why-card p { font-size: 0.875rem; line-height: 1.25rem; opacity: 0.8; }
.ke-why-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3.5rem; text-align: center; }
@media (min-width: 768px) { .ke-why-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ke-why-stat-v { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: var(--gold); margin-bottom: 0.25rem; }
@media (min-width: 768px) { .ke-why-stat-v { font-size: 3rem; line-height: 1; } }
.ke-why-stat-l { font-size: 0.875rem; line-height: 1.25rem; opacity: 0.8; }

/* --- ميزة السوق العراقي --- */
.ke-feat {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.75rem;
  transition: all var(--t-fast) var(--ease);
}
.ke-feat:hover { border-color: var(--gold); box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.ke-feat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-2xl);
  background-color: var(--primary); color: var(--gold);
  margin-bottom: 1.25rem; box-shadow: var(--shadow-gold);
  transition: all var(--t-fast) var(--ease);
}
.ke-feat:hover .ke-feat-icon { background: var(--gradient-gold); color: var(--gold-foreground); }
.ke-feat-title { font-weight: 800; color: var(--primary); font-size: 1.125rem; margin-bottom: 0.75rem; line-height: 1.375; }
.ke-feat-desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.625; }

.ke-trust-ribbon { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .ke-trust-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-trust-ribbon { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ke-trust-item {
  display: flex; align-items: center; gap: 0.75rem;
  background-color: color-mix(in oklab, var(--muted) 40%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1rem;
}
.ke-trust-item .ke-i { color: var(--gold); flex-shrink: 0; }
.ke-trust-item span { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: color-mix(in oklab, var(--foreground) 85%, transparent); }

/* --- ذكاء السوق (بطاقات الأحياء) --- */
.ke-mkt {
  position: relative; background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem; transition: all var(--t-fast) var(--ease);
}
.ke-mkt:hover { border-color: var(--gold); box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.ke-mkt-hot {
  position: absolute; top: 1rem; inset-inline-start: 1rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: var(--radius-full);
  background-color: color-mix(in oklab, var(--gold) 15%, transparent);
  color: var(--gold); font-size: 10px; font-weight: 800;
  padding: 0.25rem 0.625rem;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}
.ke-mkt-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.ke-mkt-name { font-weight: 800; color: var(--primary); font-size: 1.125rem; line-height: 1.2; }
.ke-mkt-en { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); letter-spacing: 0.05em; margin-top: 0.25rem; }
.ke-mkt-pin {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-xl);
  background-color: color-mix(in oklab, var(--primary) 5%, transparent); color: var(--primary);
  display: flex; align-items: center; justify-content: center; transition: all var(--t-fast) var(--ease);
}
.ke-mkt:hover .ke-mkt-pin { background: var(--gradient-gold); color: var(--gold-foreground); }
.ke-mkt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ke-mkt-k { font-size: 10px; color: var(--muted-foreground); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.ke-mkt-v { font-weight: 800; font-size: 0.875rem; line-height: 1.25rem; color: var(--primary); }
.ke-mkt-v.is-gold { color: var(--gold); }
.ke-mkt-v.is-up { color: var(--emerald-600); display: flex; align-items: center; gap: 0.125rem; }
.ke-mkt-tag { margin-top: 1rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--muted-foreground); }

/* --- كونسيرج --- */
.ke-conc {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem; transition: all var(--t-fast) var(--ease);
}
.ke-conc:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.ke-conc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-xl);
  background: var(--gradient-gold); color: var(--gold-foreground);
  margin-bottom: 1rem; box-shadow: var(--shadow-gold);
}
.ke-conc h3 { font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; line-height: 1.25; }
.ke-conc p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.625; }

/* --- رحلة التملك --- */
.ke-journey { position: relative; padding-block: 5rem; background-color: var(--primary); color: var(--primary-foreground); overflow: hidden; }
.ke-journey-orb-a { position: absolute; top: -8rem; inset-inline-end: -8rem; width: 28rem; height: 28rem; border-radius: var(--radius-full); background-color: color-mix(in oklab, var(--gold) 10%, transparent); filter: blur(64px); }
.ke-journey-orb-b { position: absolute; bottom: -8rem; inset-inline-start: -8rem; width: 28rem; height: 28rem; border-radius: var(--radius-full); background-color: color-mix(in oklab, var(--gold) 10%, transparent); filter: blur(64px); }
.ke-journey-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .ke-journey-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ke-step { position: relative; }
.ke-step-box {
  background-color: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-2xl); padding: 1.5rem; height: 100%;
  transition: border-color var(--t-fast) var(--ease);
}
.ke-step-box:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.ke-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ke-step-icon { width: 3rem; height: 3rem; border-radius: var(--radius-xl); background: var(--gradient-gold); color: var(--gold-foreground); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); }
.ke-step-num { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: color-mix(in oklab, var(--gold) 30%, transparent); }
.ke-step h3 { font-weight: 800; font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.25; }
.ke-step p { font-size: 0.75rem; opacity: 0.8; line-height: 1.625; }
.ke-step-arrow { display: none; position: absolute; top: 50%; inset-inline-start: -0.5rem; transform: translateY(-50%); z-index: 10; color: color-mix(in oklab, var(--gold) 60%, transparent); }
@media (min-width: 768px) { .ke-step-arrow { display: flex; } }

/* --- آراء العملاء --- */
.ke-testi { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-soft); }
.ke-testi-stars { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.ke-testi-stars .ke-i { fill: var(--gold); color: var(--gold); }
.ke-testi-text { color: color-mix(in oklab, var(--foreground) 80%, transparent); line-height: 1.625; margin-bottom: 1.25rem; }
.ke-testi-foot { border-top: 1px solid var(--border); padding-top: 1rem; }
.ke-testi-name { font-weight: 700; color: var(--primary); }
.ke-testi-role { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* --- CTA النهائي --- */
.ke-cta-box { position: relative; background: var(--gradient-hero); border-radius: var(--radius-3xl); overflow: hidden; padding: 2.5rem; text-align: center; }
@media (min-width: 768px) { .ke-cta-box { padding: 4rem; } }
.ke-cta-bg { position: absolute; inset: 0; opacity: 0.3; }
.ke-cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.ke-cta-inner { position: relative; max-width: 42rem; margin-inline: auto; color: var(--primary-foreground); }
.ke-cta-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; margin-bottom: 1rem; }
@media (min-width: 768px) { .ke-cta-title { font-size: 3rem; line-height: 1; } }
.ke-cta-desc { font-size: 1.125rem; line-height: 1.75rem; opacity: 0.9; margin-bottom: 2rem; }
.ke-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }


/* ==========================================================================
   17) صفحات القوائم — LISTING PAGES
   ========================================================================== */
/* لوحة الفلاتر */
.ke-filters {
  background-color: var(--card); border-radius: var(--radius-2xl);
  border: 1px solid var(--border); box-shadow: var(--shadow-soft);
  padding: 1.25rem; margin-bottom: 2.5rem;
}
.ke-filters-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .ke-filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ke-filters-grid-4 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px)  { .ke-filters-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-filters-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ke-result-count { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 1.5rem; }
.ke-empty { text-align: center; padding-block: 5rem; color: var(--muted-foreground); }

/* شبكة البطاقات — عمود على الموبايل، 2 على التابلت، 3 على الديسكتوب */
.ke-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px)  { .ke-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ke-cards-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .ke-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ke-cards-4 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px)  { .ke-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* أزرار التبويب/الفلترة السريعة */
.ke-chip {
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700;
  background-color: var(--muted); color: var(--muted-foreground);
  transition: all var(--t-fast) var(--ease);
}
.ke-chip:hover { background-color: var(--accent); }
.ke-chip.is-on { background-color: var(--primary); color: var(--primary-foreground); }


/* ==========================================================================
   18) صفحات التفاصيل — DETAIL PAGES
   ========================================================================== */
/* شريط المسار (Breadcrumb) */
.ke-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); padding-block: 1rem; }
.ke-crumb a:hover { color: var(--gold); }
.ke-crumb .ke-sep { opacity: 0.5; }

/* غلاف صفحة التفاصيل */
.ke-detail-cover { position: relative; overflow: hidden; }
.ke-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ke-detail-cover-veil { position: absolute; inset: 0; background: var(--gradient-overlay); }
.ke-detail-cover-body { position: relative; padding-block: 5rem; color: var(--primary-foreground); }
.ke-detail-title { font-size: 2.25rem; font-weight: 800; line-height: 1.15; }
@media (min-width: 768px) { .ke-detail-title { font-size: 3rem; line-height: 1; } }
.ke-detail-title-en { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; margin-top: 0.5rem; }
.ke-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.9; margin-top: 1.25rem; }
.ke-detail-meta > span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* شريط الإحصائيات المعلّق */
.ke-stats-bar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-elegant);
  overflow: hidden; margin-top: -2.5rem; position: relative; z-index: 10;
}
@media (min-width: 768px) { .ke-stats-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ke-stats-bar > div { padding: 1.25rem; text-align: center; border-inline-end: 1px solid var(--border); }
.ke-stats-bar > div:last-child { border-inline-end: 0; }
.ke-stat-v { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); }
.ke-stat-l { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* تخطيط عمودين: المحتوى + العمود الجانبي اللاصق */
.ke-detail-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .ke-detail-layout { grid-template-columns: 1fr 20rem; } }
.ke-detail-aside { position: sticky; top: 7rem; align-self: start; }

/* التبويبات */
.ke-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.ke-tab {
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700;
  background-color: var(--muted); color: var(--muted-foreground);
  transition: all var(--t-fast) var(--ease);
}
.ke-tab:hover { background-color: var(--accent); }
.ke-tab.is-on { background-color: var(--primary); color: var(--primary-foreground); }
.ke-tab-panel { display: none; }
.ke-tab-panel.is-on { display: block; }

/* عنوان فرعي داخل التفاصيل */
.ke-sub { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); margin-bottom: 1rem; }
.ke-sub .ke-i { color: var(--gold); }

/* قائمة المميزات */
.ke-feature-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .ke-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-feature-item {
  display: flex; align-items: center; gap: 0.5rem;
  background-color: color-mix(in oklab, var(--muted) 40%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem;
}
.ke-feature-item .ke-i { color: var(--gold); flex-shrink: 0; }

/* جدول الوحدات */
.ke-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-2xl); }
.ke-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.25rem; }
.ke-table th, .ke-table td { padding: 0.75rem 1rem; text-align: start; }
.ke-table thead { background-color: color-mix(in oklab, var(--muted) 60%, transparent); }
.ke-table th { font-weight: 700; color: var(--primary); font-size: 0.75rem; line-height: 1rem; }
.ke-table tbody tr { border-top: 1px solid var(--border); }
.ke-table tbody tr:hover { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }

/* خطة السداد */
.ke-pay-step { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background-color: var(--card); }
.ke-pay-pct { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl); background: var(--gradient-gold); color: var(--gold-foreground); display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: var(--shadow-gold); }

/* الجدول الزمني */
.ke-timeline { position: relative; padding-inline-start: 1.5rem; }
.ke-timeline::before { content: ""; position: absolute; inset-inline-start: 0.4375rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background-color: var(--border); }
.ke-tl-item { position: relative; padding-bottom: 1.5rem; }
.ke-tl-item:last-child { padding-bottom: 0; }
.ke-tl-dot { position: absolute; inset-inline-start: -1.5rem; top: 0.375rem; width: 1rem; height: 1rem; border-radius: var(--radius-full); background-color: var(--muted); border: 2px solid var(--border); }
.ke-tl-item.is-done .ke-tl-dot { background: var(--gradient-gold); border-color: var(--gold); }

/* خريطة/فيديو */
.ke-embed { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background-color: var(--muted); }
.ke-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* بطاقة الاتصال الجانبية */
.ke-contact-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.25rem; box-shadow: var(--shadow-soft); }
.ke-contact-price { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: var(--primary); }
.ke-contact-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-block: 1rem; }
.ke-contact-meta > div { background-color: color-mix(in oklab, var(--muted) 60%, transparent); border-radius: var(--radius-xl); padding: 0.5rem 0.75rem; }
.ke-contact-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.ke-contact-info { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ke-contact-info li { display: flex; align-items: center; gap: 0.5rem; }

/* معرض الصور (Masonry) */
.ke-gallery { columns: 1; column-gap: 1rem; }
@media (min-width: 640px)  { .ke-gallery { columns: 2; } }
@media (min-width: 1024px) { .ke-gallery { columns: 3; } }
.ke-gal-item {
  position: relative; display: block; width: 100%; margin-bottom: 1rem;
  overflow: hidden; border-radius: var(--radius-2xl); break-inside: avoid;
}
.ke-gal-item img { width: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-gal-item:hover img { transform: scale(1.05); }
.ke-gal-item::after {
  content: ""; position: absolute; inset: 0;
  background-color: color-mix(in oklab, var(--primary) 0%, transparent);
  transition: background-color var(--t-fast) var(--ease);
}
.ke-gal-item:hover::after { background-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.ke-gal-cat { position: absolute; bottom: 0.75rem; inset-inline-end: 0.75rem; z-index: 2; font-size: 11px; font-weight: 700; background-color: rgb(255 255 255 / 0.9); color: var(--primary); padding: 0.25rem 0.625rem; border-radius: var(--radius-full); }
.ke-gal-zoom { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0; transition: opacity var(--t-fast) var(--ease); color: #fff; }
.ke-gal-item:hover .ke-gal-zoom { opacity: 1; }


/* ==========================================================================
   19) الصفحات الثابتة والنماذج — STATIC PAGES & FORMS
   ========================================================================== */
.ke-prose p { color: var(--muted-foreground); line-height: 1.875; margin-bottom: 1rem; }
.ke-prose p:last-child { margin-bottom: 0; }

/* بطاقة عضو الفريق */
.ke-member { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-soft); transition: all var(--t-med) var(--ease); }
.ke-member:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.ke-member-media { position: relative; aspect-ratio: 8 / 9; overflow: hidden; }
.ke-member-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-member:hover .ke-member-media img { transform: scale(1.05); }
.ke-member-body { padding: 1.25rem; }
.ke-member-name { font-weight: 800; color: var(--primary); font-size: 1.125rem; line-height: 1.75rem; }
.ke-member-role { font-size: 0.875rem; line-height: 1.25rem; color: var(--gold); font-weight: 600; margin-top: 0.125rem; }

/* النموذج متعدد الخطوات */
.ke-steps-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.ke-step-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 0.75rem; line-height: 1rem; font-weight: 700;
  background-color: var(--muted); color: var(--muted-foreground);
}
.ke-step-pill.is-on { background-color: var(--primary); color: var(--primary-foreground); }
.ke-step-pill.is-done { background: var(--gradient-gold); color: var(--gold-foreground); }
.ke-form-step { display: none; }
.ke-form-step.is-on { display: block; }
.ke-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .ke-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* رسالة النجاح */
.ke-success { text-align: center; padding: 2rem; }
.ke-success .ke-i { color: var(--gold); margin-inline: auto; margin-bottom: 0.75rem; }
.ke-success h4 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.ke-success p { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 1.25rem; }


/* ==========================================================================
   20) النوافذ المنبثقة والمعرض وشريط المقارنة — MODAL / LIGHTBOX / TRAY
   --------------------------------------------------------------------------
   ملاحظة: هذه الكلاسات مكتوبة يدوياً ولا تعتمد على ملف Bootstrap CSS،
   لكنها متوافقة مع Bootstrap JS إن رغبت باستخدامه.
   ========================================================================== */
.ke-modal {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background-color: color-mix(in oklab, var(--primary) 60%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 1rem;
}
.ke-modal.is-open { display: flex; }
.ke-modal-box {
  background-color: var(--card); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-elegant); width: 100%; max-width: 28rem;
  max-height: 90vh; overflow: auto;
}
.ke-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-bottom: 1px solid var(--border); }
.ke-modal-eyebrow { font-size: 0.75rem; line-height: 1rem; color: var(--gold); font-weight: 700; margin-bottom: 0.25rem; }
.ke-modal-title { font-weight: 800; color: var(--primary); }
.ke-modal-close { padding: 0.375rem; border-radius: var(--radius-md); transition: background-color var(--t-fast) var(--ease); }
.ke-modal-close:hover { background-color: var(--muted); }
.ke-modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* عارض الصور */
.ke-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background-color: rgb(0 0 0 / 0.95); padding: 1rem;
}
.ke-lightbox.is-open { display: flex; }
.ke-lightbox figure { max-width: 72rem; width: 100%; }
.ke-lightbox img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-xl); }
.ke-lightbox figcaption { text-align: center; color: rgb(255 255 255 / 0.8); font-size: 0.875rem; line-height: 1.25rem; margin-top: 1rem; }
.ke-lb-btn {
  position: absolute; display: grid; place-items: center;
  min-height: 2.75rem; min-width: 2.75rem; border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.1); color: #fff;
  transition: background-color var(--t-fast) var(--ease);
}
.ke-lb-btn:hover { background-color: rgb(255 255 255 / 0.2); }
.ke-lb-close { top: 1.25rem; inset-inline-start: 1.25rem; }
.ke-lb-prev { inset-inline-end: 1rem; }
.ke-lb-next { inset-inline-start: 1rem; }

/* شريط المقارنة العائم */
/* ⚠️ باج ريسبونسيف حقيقي: bottom كان 1rem بالظبط زي زر واتساب العائم
   (.ke-wa-fab: bottom:1.5rem + ارتفاعه ~3.5rem يعني بياخد لغاية ~5rem من
   أسفل الشاشة)، والشريط ده على الموبايل بيمتد شبه العرض الكامل
   (inset-inline: 1rem على الجنبين) - يعني وقت ما الزائر يضيف عقار
   للمقارنة، الشريط كان بيغطي زر واتساب بالكامل (نفس z-index:40 لكن
   الشريط جاي بعده فى الـ DOM فبيترسم فوقه) ويمنع الوصول له خالص. رفعنا
   bottom لـ 5.5rem على الموبايل عشان يقعد فوق زر واتساب من غير أي تراكب. */
.ke-tray { position: fixed; bottom: 5.5rem; inset-inline: 1rem; z-index: 40; max-width: 28rem; display: none; }
.ke-tray.is-open { display: block; }
@media (min-width: 768px) { .ke-tray { bottom: 1.5rem; inset-inline-start: auto; inset-inline-end: 1.5rem; width: 440px; } }
.ke-tray-box { background-color: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-2xl); box-shadow: var(--shadow-elegant); border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); overflow: hidden; }
.ke-tray-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.ke-tray-items { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 14rem; overflow: auto; }
.ke-tray-item { display: flex; align-items: center; gap: 0.5rem; background-color: rgb(255 255 255 / 0.05); border-radius: var(--radius-md); padding: 0.5rem; }
.ke-tray-item img { width: 3rem; height: 3rem; border-radius: 0.25rem; object-fit: cover; }
.ke-tray-cta { width: 100%; background: var(--gradient-gold); color: var(--gold-foreground); padding-block: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.ke-tray-cta:hover { opacity: 0.95; }

/* تنبيه بسيط (toast) */
.ke-toast {
  position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 200;
  background-color: var(--primary); color: var(--primary-foreground);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elegant); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  opacity: 0; transform: translateY(0.5rem); pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.ke-toast.is-open { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   21) دعم RTL / LTR — DIRECTION SUPPORT
   --------------------------------------------------------------------------
   كل التنسيقات في هذا الملف مكتوبة بالخصائص المنطقية (Logical Properties)
   مثل margin-inline-start و inset-inline-end بدلاً من left/right الثابتة،
   لذلك ينقلب التصميم بالكامل تلقائياً عند تغيير dir على وسم <html>
   دون الحاجة لأي ملف CSS إضافي.

   ما تبقى هنا هو الحالات التي تحتاج تدخلاً يدوياً فقط.
   ========================================================================== */

/* الأسهم: في العربي السهم يشير لليسار، وفي الإنجليزي يجب أن ينعكس */
[dir="ltr"] .ke-i-flip { transform: scaleX(-1); }

/* الأرقام واللاتيني يبقى دائماً LTR داخل النص العربي */
.ke-ltr { direction: ltr; unicode-bidi: isolate; }

/* ⚠️ باج ريسبونسيف حقيقي كان هنا (اتشال دلوقتي): القاعدة القديمة كانت
   بتثبّت شريط المقارنة على inset-inline-start فى LTR = يسار فعلي على
   الشاشة. بس زر واتساب العائم (.ke-wa-fab) كمان inset-inline-start دايمًا
   من غير أي override خاص بـ LTR = يسار فعلي هو كمان فى LTR. النتيجة:
   فى نسخة الموقع الإنجليزية كان الاتنين بيقعدوا فوق بعض فى نفس الركن
   (يسار الشاشة) فى كل المقاسات مش بس الموبايل، وشريط المقارنة كان بيغطي
   زر واتساب بالكامل. الحل: من غير الـ override ده، الـ inset-inline-end
   الأساسية بتاعة الشريط (فى القاعدة اللي فوق) بترجع تلقائيًا لليمين
   الفعلي فى LTR (عكس inset-inline-start) - يعني الشريط والزر بيفضلوا فى
   جنبين مختلفين تلقائيًا فى الاتنين (RTL وLTR) من غير أي override إضافي،
   بنفس الطريقة اللي باقي عناصر الاتجاه فى الملف ده شغالة بيها أصلاً. */

/* في LTR يتحرك التدرج أسفل الهيدر للاتجاه المعاكس */
[dir="ltr"] .ke-header-inner::after { background: linear-gradient(to right, transparent, color-mix(in oklab, var(--gold) 60%, transparent), transparent); }
[dir="ltr"] .ke-brand-rule { background: linear-gradient(to right, transparent, var(--gold), transparent); }

/* محاذاة الفوتر والعناوين تتبع الاتجاه تلقائياً */
.ke-start { text-align: start; }
.ke-end { text-align: end; }


/* ==========================================================================
   22) الاستجابة — RESPONSIVE HELPERS
   --------------------------------------------------------------------------
   معظم الاستجابة مكتوبة داخل كل قسم بالأعلى. هنا فقط المساعدات العامة.
   نقاط الاستجابة: 640px / 768px / 1024px / 1280px / 1536px
   ========================================================================== */
.ke-hide-mobile { display: none; }
@media (min-width: 768px) { .ke-hide-mobile { display: block; } }

.ke-only-mobile { display: block; }
@media (min-width: 768px) { .ke-only-mobile { display: none; } }

@media (min-width: 640px) {
  .ke-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ke-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .ke-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ke-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ke-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ke-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* تقليل الحركة لمن يفضّل ذلك في إعدادات نظامه */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* عند الطباعة */
@media print {
  .ke-header, .ke-footer, .ke-wa-fab, .ke-tray { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   23) هيرو صفحات القوائم + لوحة الفلاتر العائمة + CTA
   --------------------------------------------------------------------------
   يُستخدم في: المجمعات السكنية / قيد الإنشاء / الأحياء
   ========================================================================== */
.ke-lhero { position: relative; overflow: hidden; }
.ke-lhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ke-lhero-veil { position: absolute; inset: 0; background: var(--gradient-hero); opacity: 0.92; }
.ke-lhero-body { position: relative; padding-block: 6rem; text-align: center; color: var(--primary-foreground); }
@media (min-width: 768px) { .ke-lhero-body { padding-block: 8rem; } }

.ke-lhero-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  background-color: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 0.375rem 1rem; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold);
  margin-bottom: 1.5rem;
}
.ke-lhero-title { font-size: 2.25rem; line-height: 1.25; font-weight: 800; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .ke-lhero-title { font-size: 3.75rem; } }
.ke-lhero-title .ke-gold { color: var(--gold); }
.ke-lhero-desc { max-width: 42rem; margin-inline: auto; opacity: 0.85; font-size: 1rem; line-height: 1.625; }
@media (min-width: 768px) { .ke-lhero-desc { font-size: 1.125rem; } }

.ke-lhero-stats {
  margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; max-width: 48rem; margin-inline: auto;
}
@media (min-width: 768px) { .ke-lhero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ke-lhero-stat {
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: var(--radius-2xl); padding-block: 1.25rem;
}
.ke-lhero-stat-v { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--gold); }
.ke-lhero-stat-l { font-size: 0.75rem; line-height: 1rem; opacity: 0.75; margin-top: 0.25rem; }

/* لوحة الفلاتر التي تطفو فوق الهيرو */
.ke-filter-panel {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-elegant);
  padding: 1.5rem; margin-top: -6rem; position: relative; z-index: 10;
}
.ke-filter-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 800; color: var(--primary); margin-bottom: 1.25rem;
}
.ke-filter-head .ke-i { color: var(--gold); }
.ke-filter-panel .ke-input,
.ke-filter-panel .ke-select { border-radius: var(--radius-xl); padding-block: 0.75rem; }
/* ⚠️ باج ريسبونسيف حقيقي: الصف ده بيحتوي على select(السعر) + select(الترتيب)
   + زر "بحث" + رابط "مسح الفلاتر" (لما يكون ظاهر) - 4 عناصر بعرض auto
   (راجع .ke-filter-sort .ke-select تحت) جوه flex من غير flex-wrap، يعني
   على شاشة موبايل ضيقة (320-375px) مجموع عروضهم الطبيعية كان بيعدي عرض
   الشاشة ويعمل overflow أفقي للصفحة كلها (مش بس للصف ده). مستخدم فى 4
   صفحات قوائم (عقارات/تجاري/كمبوندات/مشاريع) فكان بيأثر عليهم كلهم. */
.ke-filter-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; margin-top: 1.25rem; }
@media (min-width: 768px) { .ke-filter-sort { justify-content: flex-end; } }
.ke-filter-sort > span { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--muted-foreground); }
.ke-filter-sort .ke-select { width: auto; border-radius: var(--radius-xl); }

.ke-result-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; margin-bottom: 1.5rem; }
.ke-result-bar .ke-count { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.ke-result-bar .ke-count strong { font-weight: 800; color: var(--primary); }
.ke-result-note { display: none; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .ke-result-note { display: flex; } }
.ke-result-note .ke-i { color: var(--gold); }

/* شبكة بطاقات القوائم — فجوة 1.75rem كما في التصميم */
.ke-cards-listing { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 768px)  { .ke-cards-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-cards-listing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* لوحة CTA أسفل صفحات القوائم */
.ke-cta-panel {
  position: relative; overflow: hidden; border-radius: var(--radius-3xl);
  background: var(--gradient-hero); color: var(--primary-foreground);
  padding: 2.5rem; text-align: center;
}
@media (min-width: 768px) { .ke-cta-panel { padding: 3.5rem; } }
.ke-cta-panel > .ke-i { color: var(--gold); margin-inline: auto; margin-bottom: 1.25rem; width: 2.5rem; height: 2.5rem; }
.ke-cta-panel h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .ke-cta-panel h2 { font-size: 1.875rem; line-height: 2.25rem; } }
.ke-cta-panel > p { opacity: 0.85; max-width: 36rem; margin-inline: auto; margin-bottom: 2rem; }
.ke-cta-panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.ke-cta-panel-actions .ke-btn { padding: 0.875rem 1.75rem; border-radius: var(--radius-full); font-weight: 800; }
.ke-cta-outline { border: 1px solid rgb(255 255 255 / 0.25); color: inherit; }
.ke-cta-outline:hover { border-color: var(--gold); color: var(--gold); }
.ke-cta-addr { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 0.375rem; }

/* بطاقة ميزة (تُستخدم في "لماذا الشراء على الخارطة") */
.ke-perk {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); padding: 1.75rem;
  box-shadow: var(--shadow-soft); transition: all var(--t-fast) var(--ease);
}
.ke-perk:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.ke-perk-icon {
  width: 3rem; height: 3rem; border-radius: var(--radius-2xl);
  background: var(--gradient-gold); display: grid; place-items: center;
  margin-bottom: 1rem; color: var(--gold-foreground);
}
.ke-perk h3 { font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.ke-perk p { font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

/* ==========================================================================
   24) بطاقة الحي في صفحة الأحياء
   ========================================================================== */
.ke-dcard {
  display: block; background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); overflow: hidden;
  box-shadow: var(--shadow-soft); transition: all var(--t-fast) var(--ease);
}
.ke-dcard:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.ke-dcard-media { position: relative; height: 13rem; overflow: hidden; }
.ke-dcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-dcard:hover .ke-dcard-media img { transform: scale(1.1); }
.ke-dcard-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--primary) 90%, transparent),
    color-mix(in oklab, var(--primary) 25%, transparent),
    transparent);
}
.ke-dcard-zone {
  position: absolute; top: 1rem; inset-inline-end: 1rem;
  background-color: var(--gold); color: var(--gold-foreground);
  font-size: 11px; font-weight: 800; padding: 0.25rem 0.75rem; border-radius: var(--radius-full);
}
.ke-dcard-cap { position: absolute; bottom: 1rem; inset-inline: 1rem; color: var(--primary-foreground); }
.ke-dcard-name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; }
.ke-dcard-en { font-size: 11px; opacity: 0.75; letter-spacing: 0.1em; }
.ke-dcard-body { padding: 1.5rem; }
.ke-dcard-desc {
  font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); margin-bottom: 1.25rem;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.ke-dcard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.ke-dcard-stat { background-color: color-mix(in oklab, var(--muted) 50%, transparent); border-radius: var(--radius-xl); padding: 0.75rem; }
.ke-dcard-stat-k { font-size: 11px; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.ke-dcard-stat-v { font-weight: 800; color: var(--primary); font-size: 0.875rem; }
.ke-dcard-stat-v.is-gold { color: var(--gold); display: flex; align-items: center; gap: 0.25rem; }
.ke-dcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground);
  border-top: 1px solid var(--border); padding-top: 1rem;
}
.ke-dcard-foot .ke-counts { display: flex; align-items: center; gap: 0.75rem; }
.ke-dcard-foot .ke-counts span { display: flex; align-items: center; gap: 0.25rem; }
.ke-dcard-foot .ke-i { color: var(--gold); }
.ke-dcard-more { font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 0.25rem; transition: color var(--t-fast) var(--ease); }
.ke-dcard:hover .ke-dcard-more { color: var(--gold); }

/* ==========================================================================
   25) بطاقة المشروع (صفحة مشاريعنا) + جدول المقارنة
   ========================================================================== */
.ke-proj {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-soft); transition: box-shadow var(--t-fast) var(--ease);
}
.ke-proj:hover { box-shadow: var(--shadow-elegant); }
.ke-proj-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ke-proj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.ke-proj:hover .ke-proj-media img { transform: scale(1.05); }
.ke-proj-units {
  position: absolute; top: 0.75rem; inset-inline-end: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  background-color: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--primary); font-size: 0.75rem; font-weight: 700;
  padding: 0.375rem 0.75rem; border-radius: var(--radius-full);
}
.ke-proj-units .ke-i { color: var(--gold); }
.ke-proj-body { padding: 1.25rem; }
.ke-proj-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.ke-proj-desc {
  font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 1rem;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.ke-proj-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--gold); font-weight: 700; font-size: 0.875rem;
  transition: gap var(--t-fast) var(--ease);
}
.ke-proj-link:hover { gap: 0.5rem; }

/* --- صفحة المقارنة --- */
.ke-cmp-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background-color: color-mix(in oklab, var(--gold) 20%, transparent);
  color: var(--gold); font-size: 0.75rem; font-weight: 700;
  padding: 0.375rem 1rem; border-radius: var(--radius-full); margin-bottom: 1rem;
}
.ke-cmp-empty {
  background-color: var(--card); border: 2px dashed var(--border);
  border-radius: var(--radius-2xl); padding: 3rem; text-align: center;
  max-width: 42rem; margin-inline: auto;
}
.ke-cmp-empty-icon {
  width: 4rem; height: 4rem; border-radius: var(--radius-2xl);
  background-color: color-mix(in oklab, var(--gold) 10%, transparent);
  margin-inline: auto; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; color: var(--gold);
}
.ke-cmp-empty h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.ke-cmp-empty p { color: var(--muted-foreground); margin-bottom: 1.5rem; }

/* ⚠️ حالة التحميل (#cmpLoading فى compare.blade.php) - عشان نمنع "اللاج
   الواضح" اللي كان بيحصل أول ما تفتح /compare: كان HTML الأساسي بيعرض
   صندوق "لا توجد عقارات للمقارنة" (cmpEmpty) بشكل افتراضي حتى لو المستخدم
   عنده عقارات فعليًا فى المقارنة (localStorage)، وبعدين لما الجافاسكربت
   يشتغل ويجيب بيانات العقارات من السيرفر، الصفحة كانت "تقفز" فجأة من
   رسالة "فاضية" غلط لجدول المقارنة الحقيقي - ده اللي حاسس إنه لاج/فلاش.
   دلوقتي: cmpEmpty يبدأ hidden زي cmpWrap بالظبط، وcmpLoading (سبينر بسيط)
   هو اللي يظهر فورًا كحالة محايدة لحد ما الجافاسكربت يقرر الحالة الصح. */
.ke-cmp-loading { text-align: center; padding: 4rem 1rem; color: var(--muted-foreground); }
.ke-cmp-spinner {
  width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--gold) 25%, transparent);
  border-inline-start-color: var(--gold); animation: ke-cmp-spin 0.7s linear infinite;
}
@keyframes ke-cmp-spin { to { transform: rotate(360deg); } }

.ke-cmp-table {
  /* ⚠️ table-layout:fixed هنا هو التصليح الفعلي لمشكلة "مقاسات الصور مش
     ثابتة" فى صفحة المقارنة: من غيرها، كل عمود (عقار) كان بياخد عرضه من
     أطول محتوى فيه (زي قائمة المميزات) - يعني عمود عقار مواصفاته أطول
     كان بيبقى أعرض من عمود عقار تاني، وبما إن الصورة width:100% من عرض
     العمود، كانت الصور بتطلع بمقاسات مختلفة بصريًا رغم إن aspect-ratio
     واحد. table-layout:fixed بيخلي كل الأعمدة تاخد نفس العرض المحدد فى
     td تحت بالظبط - فكل الصور بتبقى نفس المقاس فعليًا. */
  width: 100%; table-layout: fixed; background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-soft);
  border-collapse: collapse;
}
.ke-cmp-table tr { border-bottom: 1px solid var(--border); }
.ke-cmp-table tr:last-child { border-bottom: 0; }
.ke-cmp-table th {
  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  text-align: start; padding: 0.75rem 1rem;
  font-size: 0.75rem; font-weight: 700; color: var(--muted-foreground); width: 8rem;
}
.ke-cmp-table td { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--foreground); width: 260px; vertical-align: top; }
.ke-cmp-table td.is-head { padding: 1rem; }
.ke-cmp-table img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 0.75rem; }
.ke-cmp-table h3 {
  font-weight: 800; color: var(--primary); font-size: 0.875rem;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.ke-cmp-table h3:hover { color: var(--gold); }
.ke-cmp-remove {
  position: absolute; top: 0.25rem; inset-inline-start: 0.25rem; z-index: 10;
  padding: 0.25rem; background-color: rgb(255 255 255 / 0.95);
  border-radius: var(--radius-full); box-shadow: var(--shadow-soft);
}
.ke-cmp-remove:hover { background-color: var(--destructive); color: #fff; }
.ke-cmp-price { color: var(--gold); font-weight: 800; }
.ke-cmp-feats { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; }
.ke-cmp-feats li { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.ke-cmp-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.ke-cmp-actions a {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding-block: 0.5rem; border-radius: var(--radius-md); font-size: 0.75rem; font-weight: 700;
}
.ke-cmp-call { background-color: var(--primary); color: var(--primary-foreground); }
.ke-cmp-wa { background-color: var(--whatsapp); color: #fff; }

/* ==========================================================================
   26) الصفحات الثابتة: من نحن / تواصل / الفريق
   ========================================================================== */
/* غلاف بصورة خلفية باهتة */
.ke-cover-img { position: relative; overflow: hidden; padding-block: 5rem; }
.ke-cover-img-bg { position: absolute; inset: 0; opacity: 0.2; }
.ke-cover-img-bg img { width: 100%; height: 100%; object-fit: cover; }
.ke-cover-img > .ke-container { position: relative; }
.ke-cover-h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; margin-bottom: 1.25rem; max-width: 48rem; }
@media (min-width: 768px) { .ke-cover-h1 { font-size: 3.75rem; line-height: 1; } }
.ke-cover-lead { opacity: 0.85; font-size: 1.125rem; line-height: 1.75rem; max-width: 42rem; }

/* بطاقة قيمة (رسالتنا/رؤيتنا/قيمنا) */
.ke-value {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.75rem; transition: all var(--t-fast) var(--ease);
}
.ke-value:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.ke-value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-2xl);
  background: var(--gradient-gold); color: var(--gold-foreground); margin-bottom: 1rem;
}
.ke-value h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); margin-bottom: 0.75rem; }
.ke-value p { color: var(--muted-foreground); line-height: 1.625; }

.ke-value-center { text-align: center; padding: 1.75rem; }
.ke-value-center .ke-value-icon { background: var(--primary); color: var(--gold); }
.ke-value-center h3 { font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 0.5rem; }
.ke-value-center p { font-size: 0.875rem; line-height: 1.25rem; }

/* صفحة التواصل */
.ke-contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) { .ke-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-contact-list { display: flex; flex-direction: column; gap: 1rem; }
.ke-contact-box { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.25rem; }
.ke-contact-box-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.ke-contact-ico-sm {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-xl);
  background: var(--gradient-gold); color: var(--gold-foreground);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ke-contact-phones { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 640px) { .ke-contact-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-contact-phones a {
  font-size: 0.875rem; font-weight: 600; color: var(--primary);
  background-color: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.5rem 0.75rem; text-align: center;
  transition: background-color var(--t-fast) var(--ease);
}
.ke-contact-phones a:hover { background-color: color-mix(in oklab, var(--gold) 10%, transparent); }
.ke-contact-row {
  display: flex; align-items: center; gap: 1rem;
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.25rem;
  transition: all var(--t-fast) var(--ease);
}
.ke-contact-row:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.ke-contact-ico {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl);
  background: var(--gradient-gold); color: var(--gold-foreground);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ke-contact-k { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.ke-contact-v { font-weight: 700; color: var(--primary); }

.ke-form-card {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.75rem;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 1rem;
}
.ke-form-card h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.ke-form-card .ke-input,
.ke-form-card .ke-textarea { padding: 0.75rem 1rem; border-radius: var(--radius-md); }

/* صفحة الفريق */
.ke-team-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .ke-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ke-member-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.ke-member-contact { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ke-member-contact a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding-block: 0.5rem; border-radius: var(--radius-md);
  font-size: 0.75rem; font-weight: 700;
}

/* ==========================================================================
   27) صفحة فريق العمل
   ========================================================================== */
.ke-dept-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
.ke-dept {
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 0.875rem; font-weight: 700; border: 1px solid var(--border);
  background-color: var(--card); color: var(--muted-foreground);
  transition: all var(--t-fast) var(--ease);
}
.ke-dept:hover { border-color: var(--gold); color: var(--primary); }
.ke-dept.is-on { background-color: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.ke-mem {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); overflow: hidden;
  box-shadow: var(--shadow-soft); transition: all var(--t-slow) var(--ease);
}
.ke-mem:hover { box-shadow: var(--shadow-elegant); transform: translateY(-6px); }
.ke-mem-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ke-mem-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ke-mem:hover .ke-mem-media img { transform: scale(1.05); }
.ke-mem-dept {
  position: absolute; top: 1rem; inset-inline-start: 1rem;
  font-size: 11px; font-weight: 800; padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  color: var(--gold);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ke-mem-veil {
  position: absolute; inset-inline: 0; bottom: 0; height: 50%;
  background: linear-gradient(to top, color-mix(in oklab, var(--primary) 85%, transparent), transparent);
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.ke-mem:hover .ke-mem-veil { opacity: 1; }
.ke-mem-bio {
  position: absolute; inset-inline: 1.25rem; bottom: 1.25rem;
  font-size: 0.875rem; line-height: 1.625; color: var(--primary-foreground);
  opacity: 0; transform: translateY(0.75rem);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.ke-mem:hover .ke-mem-bio { opacity: 1; transform: translateY(0); }
.ke-mem-body { padding: 1.25rem; text-align: center; }
.ke-mem-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); }
.ke-mem-role { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.ke-mem-social { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.ke-mem-social a {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  background-color: var(--muted); display: flex; align-items: center; justify-content: center;
  color: var(--primary); transition: all var(--t-fast) var(--ease);
}
.ke-mem-social a:hover { background-color: var(--primary); color: var(--gold); }

/* ==========================================================================
   28) صفحات النماذج: استشارة / أضف عقارك / اطلب عقار
   ========================================================================== */
.ke-form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 72rem; margin-inline: auto; }
@media (min-width: 1024px) { .ke-form-layout { grid-template-columns: 2fr 1fr; } }

.ke-form-panel {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
  display: flex; flex-direction: column; gap: 1.25rem;
}
@media (min-width: 768px) { .ke-form-panel { padding: 2rem; } }
.ke-form-panel h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); margin-bottom: 0.25rem; }
.ke-form-panel .ke-sub-note { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* شريط اختيارات (أزرار اختيار واحد) */
.ke-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ke-choice {
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease); background: transparent; color: inherit;
}
.ke-choice:hover { border-color: var(--gold); }
.ke-choice.is-on { background-color: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* العمود الجانبي */
.ke-aside { display: flex; flex-direction: column; gap: 1rem; }
.ke-aside-dark {
  background-color: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-elegant);
}
.ke-aside-dark h3 { font-weight: 800; font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 1rem; }
.ke-aside-link {
  display: flex; align-items: center; gap: 0.75rem;
  background-color: rgb(255 255 255 / 0.1); border-radius: var(--radius-xl);
  padding: 0.75rem; margin-bottom: 0.5rem; transition: background-color var(--t-fast) var(--ease);
}
.ke-aside-link:hover { background-color: rgb(255 255 255 / 0.15); }
.ke-aside-link .ke-i { color: var(--gold); }
.ke-aside-k { font-size: 0.75rem; line-height: 1rem; opacity: 0.8; }
.ke-aside-v { font-weight: 700; }
.ke-aside-wa { background-color: var(--whatsapp); margin-bottom: 0; }
.ke-aside-wa:hover { opacity: 0.95; background-color: var(--whatsapp); }
.ke-aside-wa .ke-i { color: #fff; }

.ke-aside-card {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-soft);
}
.ke-aside-card h3 { font-weight: 800; color: var(--primary); margin-bottom: 1rem; }
.ke-checklist { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; }
.ke-checklist li { display: flex; align-items: flex-start; gap: 0.5rem; }
.ke-checklist .ke-i { color: var(--gold); margin-top: 0.125rem; flex-shrink: 0; }

/* هيرو صفحات النماذج */
.ke-fhero { background: var(--gradient-hero); color: var(--primary-foreground); padding-block: 4rem; text-align: center; }
.ke-fhero-icon {
  display: inline-flex; width: 4rem; height: 4rem; border-radius: var(--radius-2xl);
  background-color: color-mix(in oklab, var(--gold) 20%, transparent);
  align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--gold);
}
.ke-fhero h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .ke-fhero h1 { font-size: 3rem; line-height: 1; } }
.ke-fhero p { opacity: 0.85; max-width: 42rem; margin-inline: auto; }
.ke-fhero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; font-size: 0.875rem; }
.ke-fhero-stats .ke-v { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--gold); }
.ke-fhero-stats .ke-l { opacity: 0.8; font-size: 0.75rem; }

/* --- أقسام النموذج الطويل (أضف عقارك / اطلب عقار) --- */
.ke-form-wrap { max-width: 56rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.ke-fsec {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) { .ke-fsec { padding: 1.75rem; } }
.ke-fsec-head { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.ke-fsec-head h2 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); }
.ke-fsec-head p { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.ke-fgrid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ke-fgrid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ke-fgrid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
  .ke-fgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ke-fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ke-fgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* وسوم المميزات القابلة للاختيار المتعدد */
.ke-tagbtn {
  padding: 0.375rem 0.875rem; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease); background: transparent; color: inherit;
}
.ke-tagbtn:hover { border-color: var(--gold); }
.ke-tagbtn.is-on { background-color: var(--gold); color: var(--gold-foreground); border-color: var(--gold); }

.ke-dropzone {
  background-color: color-mix(in oklab, var(--muted) 40%, transparent);
  border: 2px dashed var(--border); border-radius: var(--radius-xl);
  padding: 1.5rem; text-align: center;
  font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 1rem;
}
.ke-dropzone .ke-i { margin-inline: auto; margin-bottom: 0.5rem; color: var(--gold); width: 2rem; height: 2rem; }

.ke-agree { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); cursor: pointer; }
.ke-agree input { margin-top: 0.25rem; accent-color: var(--gold); }
.ke-form-note { text-align: center; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ke-form-note a { color: var(--gold); font-weight: 700; }

/* تنويه "اختياري" جنب لابل أي حقل غير إجباري في النماذج */
.ke-optional-tag { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }

/* بطاقات المميزات (خطوة الوسائط والمميزات في "أضف عقارك") - كل قسم
   مميزات (تفاصيل العقار/كهرباء وتدفئة/تفاصيل المبنى/أماكن قريبة/خدمات)
   في بطاقة مستقلة بعنوان واضح، بدل قائمة مسطحة. */
.ke-features-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .ke-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-feature-card {
  background-color: color-mix(in oklab, var(--muted) 30%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 1rem 1.125rem;
}
.ke-feature-card-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--primary);
  margin-bottom: 0.75rem; padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border);
}
.ke-feature-card .ke-choices { gap: 0.5rem; }

/* زر حذف صورة من معاينة الصور قبل الإرسال (خطوة الوسائط) */
.ke-img-remove-btn {
  position: absolute; top: 0.375rem; inset-inline-end: 0.375rem;
  width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); border: none;
  background-color: rgba(220, 38, 38, 0.92); color: #fff;
  font-size: 0.9375rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--t-fast) var(--ease);
}
.ke-img-remove-btn:hover { background-color: #dc2626; }

/* --- نموذج "اطلب عقارك" متعدد الخطوات --- */
.ke-wiz {
  max-width: 64rem; margin-inline: auto;
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-elegant); overflow: hidden;
}
.ke-wiz-steps {
  display: flex; align-items: center; justify-content: space-between;
  background-color: var(--primary); color: var(--primary-foreground);
  padding: 1.25rem 1.5rem;
}
@media (min-width: 768px) { .ke-wiz-steps { padding-inline: 2.5rem; } }
.ke-wiz-step { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.ke-wiz-num {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.875rem;
  background-color: rgb(255 255 255 / 0.1);
  transition: all var(--t-fast) var(--ease); flex-shrink: 0;
}
.ke-wiz-step.is-on .ke-wiz-num,
.ke-wiz-step.is-done .ke-wiz-num { background: var(--gradient-gold); color: var(--gold-foreground); box-shadow: var(--shadow-gold); }
.ke-wiz-label { display: none; }
@media (min-width: 768px) { .ke-wiz-label { display: block; } }
.ke-wiz-label .ke-k { font-size: 0.75rem; line-height: 1rem; opacity: 0.7; }
.ke-wiz-label .ke-v { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.ke-wiz-line { flex: 1; height: 1px; margin-inline: 0.5rem; background-color: rgb(255 255 255 / 0.2); }
.ke-wiz-step.is-done .ke-wiz-line { background-color: var(--gold); }

.ke-wiz-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .ke-wiz-body { padding: 2.5rem; } }
.ke-wiz-pane { display: none; flex-direction: column; gap: 1.5rem; }
.ke-wiz-pane.is-on { display: flex; }
.ke-group > label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; }
.ke-group .ke-i { color: var(--gold); display: inline; vertical-align: -0.15em; }

/* بطاقات اختيار نوع العقار */
.ke-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px)  { .ke-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-pick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ke-pick {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1rem; border-radius: var(--radius-xl);
  border: 2px solid var(--border); transition: all var(--t-fast) var(--ease);
  background: transparent; color: inherit;
}
.ke-pick:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.ke-pick .ke-i { color: var(--muted-foreground); }
.ke-pick span { font-size: 0.875rem; font-weight: 700; }
.ke-pick.is-on { border-color: var(--gold); background-color: color-mix(in oklab, var(--gold) 10%, transparent); color: var(--primary); }
.ke-pick.is-on .ke-i { color: var(--gold); }

.ke-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ke-sum { background-color: color-mix(in oklab, var(--muted) 40%, transparent); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.25rem; }
.ke-sum-t { font-size: 0.75rem; font-weight: 700; color: var(--gold); text-transform: uppercase; margin-bottom: 0.75rem; }
.ke-sum-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; font-size: 0.875rem; }
@media (min-width: 640px) { .ke-sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-sum-row { display: flex; gap: 0.5rem; }
.ke-sum-row .ke-k { color: var(--muted-foreground); }
.ke-sum-row .ke-v { font-weight: 700; color: var(--primary); }
.ke-wiz-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .ke-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   29) صفحات التفاصيل (مجمع / مشروع / حي / عقار)
   ========================================================================== */
.ke-bc { background-color: color-mix(in oklab, var(--muted) 40%, transparent); border-bottom: 1px solid var(--border); }
.ke-bc-inner { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ke-bc-inner a:hover { color: var(--primary); }
.ke-bc-cur { color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* هيرو صفحة التفاصيل */
.ke-dhero { position: relative; }
.ke-dhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ke-dhero-veil { position: absolute; inset: 0; background: var(--gradient-overlay); }
.ke-dhero-body { position: relative; padding-block: 6rem; color: var(--primary-foreground); }
@media (min-width: 768px) { .ke-dhero-body { padding-block: 8rem; } }
.ke-dhero-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  background-color: var(--gold); color: var(--gold-foreground);
  padding: 0.375rem 0.75rem; border-radius: var(--radius-full); margin-bottom: 1.25rem;
}
.ke-dhero h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .ke-dhero h1 { font-size: 3.75rem; line-height: 1; } }
.ke-dhero-en { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1rem; }
.ke-dhero-tag { font-size: 1.125rem; line-height: 1.75rem; opacity: 0.9; max-width: 42rem; margin-bottom: 1.5rem; }
.ke-dhero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.85; }
.ke-dhero-meta > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.ke-dhero-meta .ke-i { color: var(--gold); }

/* شريط الحقائق */
.ke-facts {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-elegant);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: -3rem; position: relative; z-index: 10;
}
@media (min-width: 1024px) { .ke-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ke-fact { padding: 1.5rem; text-align: center; border-inline-end: 1px solid var(--border); }
.ke-fact:nth-child(2n) { border-inline-end: 0; }
@media (min-width: 1024px) {
  .ke-fact { border-inline-end: 1px solid var(--border); }
  .ke-fact:nth-child(2n) { border-inline-end: 1px solid var(--border); }
  .ke-fact:last-child { border-inline-end: 0; }
}
.ke-fact .ke-i { color: var(--gold); margin-inline: auto; margin-bottom: 0.5rem; }
.ke-fact-v { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); }
.ke-fact-l { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* تخطيط المحتوى + الشريط الجانبي */
.ke-dlayout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .ke-dlayout { grid-template-columns: 2fr 1fr; } }
.ke-dmain { min-width: 0; }
.ke-daside { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .ke-daside { position: sticky; top: 7rem; } }

/* التبويبات */
.ke-tabbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.ke-tabbtn {
  padding: 0.625rem 1rem; border-radius: var(--radius-full);
  font-size: 0.875rem; font-weight: 700;
  background-color: var(--muted); color: var(--muted-foreground);
  transition: all var(--t-fast) var(--ease);
}
.ke-tabbtn:hover { background-color: var(--accent); }
.ke-tabbtn.is-on { background-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-soft); }
.ke-pane { display: none; flex-direction: column; gap: 2.5rem; }
.ke-pane.is-on { display: flex; }

.ke-h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.ke-h2 .ke-i { color: var(--gold); }
.ke-lead { color: var(--muted-foreground); line-height: 2; }

/* أبرز المميزات */
.ke-hl-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .ke-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-hl {
  display: flex; align-items: flex-start; gap: 0.625rem;
  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  border-radius: var(--radius-2xl); padding: 1rem;
}
.ke-hl .ke-i { color: var(--gold); flex-shrink: 0; margin-top: 0.125rem; }
.ke-hl span { font-size: 0.875rem; font-weight: 600; color: var(--primary); }

/* بطاقات المساحات */
.ke-abucket-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .ke-abucket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-abucket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ke-abucket { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.25rem; box-shadow: var(--shadow-soft); transition: box-shadow var(--t-fast) var(--ease); }
.ke-abucket:hover { box-shadow: var(--shadow-elegant); }
.ke-abucket-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.ke-abucket-kind { font-size: 0.875rem; font-weight: 800; color: var(--primary); }
.ke-pill-ok { font-size: 11px; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background-color: color-mix(in oklab, var(--emerald-500) 15%, transparent); color: var(--emerald-700); }
.ke-pill-req { font-size: 11px; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background-color: var(--muted); color: var(--muted-foreground); }
.ke-abucket-area { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--primary); }
.ke-abucket-area span { font-size: 0.875rem; font-weight: 700; color: var(--muted-foreground); }
.ke-abucket-foot { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; }
.ke-abucket-foot .ke-k { color: var(--muted-foreground); }
.ke-abucket-foot .ke-v { font-weight: 800; color: var(--primary); }

.ke-link-gold { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--gold); transition: gap var(--t-fast) var(--ease); }
.ke-link-gold:hover { gap: 0.75rem; }

/* الخرائط والفيديو */
.ke-map { border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.ke-map iframe { width: 100%; height: 380px; border: 0; display: block; }
.ke-map-lg iframe { height: 420px; }
.ke-video { aspect-ratio: 16 / 9; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.ke-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ke-map-foot { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ke-map-foot > span { font-size: 0.875rem; color: var(--muted-foreground); display: flex; align-items: center; gap: 0.375rem; }
.ke-map-foot .ke-i { color: var(--gold); }

/* المخطط الزمني */
.ke-tl { position: relative; border-inline-end: 2px solid var(--border); padding-inline-end: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.ke-tl li { position: relative; }
.ke-tl-dot {
  position: absolute; inset-inline-end: -31px; top: 0.25rem;
  width: 1rem; height: 1rem; border-radius: var(--radius-full);
  background-color: var(--background); border: 2px solid var(--border);
}
.ke-tl li.is-done .ke-tl-dot { background-color: var(--gold); border-color: var(--gold); }
.ke-tl-t { font-size: 0.875rem; font-weight: 800; color: var(--primary); }
.ke-tl-d { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }

/* بطاقة نوع الوحدة */
.ke-unit-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .ke-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ke-unit { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-soft); }
.ke-unit > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ke-unit-body { padding: 1.25rem; }
.ke-unit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.ke-unit-name { font-weight: 800; color: var(--primary); }
.ke-unit-specs { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.ke-unit-specs span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ke-unit-specs .ke-i { color: var(--gold); }
.ke-unit-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.ke-unit-foot .ke-k { font-size: 0.75rem; color: var(--muted-foreground); }
.ke-unit-foot .ke-v { font-size: 1.125rem; font-weight: 800; color: var(--primary); }

/* حالة الوحدة */
.ke-st-av { background-color: color-mix(in oklab, var(--emerald-500) 15%, transparent); color: var(--emerald-700); }
.ke-st-rs { background-color: color-mix(in oklab, var(--amber-500) 18%, transparent); color: var(--amber-600); }
.ke-st-sl { background-color: var(--muted); color: var(--muted-foreground); }
.ke-st { font-size: 11px; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); }

/* جدول الوحدات */
.ke-utable-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-2xl); }
.ke-utable { width: 100%; font-size: 0.875rem; text-align: start; border-collapse: collapse; }
.ke-utable thead { background-color: color-mix(in oklab, var(--muted) 70%, transparent); color: var(--primary); }
.ke-utable th { padding: 0.75rem; font-weight: 800; text-align: start; }
.ke-utable td { padding: 0.75rem; }
.ke-utable tbody tr { border-top: 1px solid var(--border); }
.ke-utable tbody tr:hover { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.ke-utable .ke-no { font-weight: 700; color: var(--primary); }
.ke-utable .ke-price { font-weight: 800; color: var(--primary); }

/* المخططات */
.ke-plan { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-soft); }
.ke-plan > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ke-plan-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ke-plan-facts > div { padding: 1rem; text-align: center; border-inline-end: 1px solid var(--border); }
.ke-plan-facts > div:last-child { border-inline-end: 0; }
.ke-plan-facts .ke-v { font-weight: 800; color: var(--primary); }
.ke-plan-facts .ke-k { font-size: 0.75rem; color: var(--muted-foreground); }
.ke-planbtn { padding: 0.5rem 1rem; border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 700; background-color: var(--muted); color: var(--muted-foreground); transition: all var(--t-fast) var(--ease); }
.ke-planbtn:hover { background-color: var(--accent); }
.ke-planbtn.is-on { background-color: var(--gold); color: var(--gold-foreground); }

/* المرافق */
.ke-amen-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px)  { .ke-amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ke-amen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ke-amen { display: flex; align-items: center; gap: 0.625rem; background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1rem; transition: box-shadow var(--t-fast) var(--ease); }
.ke-amen:hover { box-shadow: var(--shadow-soft); }
.ke-amen .ke-i { color: var(--gold); flex-shrink: 0; }
.ke-amen span { font-size: 0.875rem; font-weight: 600; color: var(--primary); }

/* القريب من */
.ke-near { display: flex; align-items: center; justify-content: space-between; background-color: color-mix(in oklab, var(--muted) 50%, transparent); border-radius: var(--radius-2xl); padding: 1rem; }
.ke-near .ke-n { font-size: 0.875rem; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; }
.ke-near .ke-i { color: var(--gold); }
.ke-near .ke-d { font-size: 0.75rem; color: var(--muted-foreground); }

/* خطة السداد */
.ke-pay { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.25rem; box-shadow: var(--shadow-soft); }
.ke-pay-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ke-pay-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background-color: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 800; }
.ke-pay-label { font-weight: 800; color: var(--primary); }
.ke-pay-pct { font-size: 1.125rem; font-weight: 800; color: var(--gold); }
.ke-pay-track { height: 0.5rem; border-radius: var(--radius-full); background-color: var(--muted); overflow: hidden; margin-bottom: 0.75rem; }
.ke-pay-bar { height: 100%; background: var(--gradient-gold); }
.ke-pay-note { font-size: 0.75rem; color: var(--muted-foreground); }
.ke-notice { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.75rem; color: var(--muted-foreground); background-color: color-mix(in oklab, var(--muted) 50%, transparent); border-radius: var(--radius-2xl); padding: 1rem; }
.ke-notice .ke-i { color: var(--gold); flex-shrink: 0; margin-top: 0.125rem; }

/* بطاقة السعر الجانبية */
.ke-pricecard { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); box-shadow: var(--shadow-elegant); padding: 1.5rem; }
.ke-pricecard-k { font-size: 0.75rem; color: var(--muted-foreground); }
.ke-pricecard-v { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: var(--primary); margin-bottom: 1rem; }
.ke-pricecard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; }
.ke-pricecard-cell { background-color: color-mix(in oklab, var(--muted) 60%, transparent); border-radius: var(--radius-xl); padding: 0.625rem 0.75rem; }
.ke-pricecard-cell .ke-k { font-size: 10px; color: var(--muted-foreground); }
.ke-pricecard-cell .ke-v { font-size: 0.875rem; font-weight: 800; color: var(--primary); }
.ke-pricecard-wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.ke-pricecard-actions { display: flex; flex-direction: column; gap: 0.625rem; }
.ke-pricecard-actions .ke-btn { padding-block: 0.875rem; border-radius: var(--radius-xl); font-weight: 800; font-size: 0.875rem; }
.ke-pricecard-info { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 0.5rem; }
.ke-pricecard-info > div { display: flex; align-items: center; gap: 0.5rem; }
.ke-pricecard-info .ke-i { color: var(--gold); }
.ke-back-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--muted-foreground); transition: color var(--t-fast) var(--ease); }
.ke-back-link:hover { color: var(--primary); }
/* نسب أبعاد صور المعرض (تتناوب لإعطاء شكل Masonry) */
.ke-ar-45 { aspect-ratio: 4 / 5; }
.ke-ar-43 { aspect-ratio: 4 / 3; }
.ke-ar-11 { aspect-ratio: 1 / 1; }

/* معرض صفحة المشروع قيد الإنشاء (صورة كبيرة + مصغّرات) */
.ke-devgal { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .ke-devgal { grid-template-columns: 3fr 1fr; } }
.ke-devgal-main { border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-elegant); }
.ke-devgal-main img { width: 100%; height: 420px; object-fit: cover; }
.ke-devgal-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 1024px) { .ke-devgal-thumbs { grid-template-columns: 1fr; } }
.ke-devthumb { border-radius: var(--radius-2xl); overflow: hidden; border: 2px solid transparent; opacity: 0.7; transition: all var(--t-fast) var(--ease); }
.ke-devthumb:hover { opacity: 1; }
.ke-devthumb.is-on { border-color: var(--gold); opacity: 1; }
.ke-devthumb img { width: 100%; height: 6rem; object-fit: cover; }
@media (min-width: 1024px) { .ke-devthumb img { height: 7rem; } }

/* شبكات التقسيم في صفحة المشروع */
@media (min-width: 768px)  { #devFacts { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) {
  #devOverview { grid-template-columns: 3fr 2fr !important; }
  #devSplit { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* ⚠️ لو عمود واحد بس من الاتنين له محتوى فعلي (مفيش خريطة، أو Timeline
     من غير خطة سداد أو العكس)، بيقفل الشبكة لعمود واحد بدل ما يسيب مساحة
     العمود التاني فاضية تمامًا جنب المحتوى - راجع تعليق development-details
     .blade.php. الترتيب فى الملف بعد #devOverview/#devSplit فوق (specificity
     ID+class أعلى من ID لوحده) يضمن إنه بياخد الأولوية دايمًا. */
  #devOverview.ke-grid-1col, #devSplit.ke-grid-1col { grid-template-columns: 1fr !important; }
}
@media (min-width: 1024px) { #disSplit { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* ==========================================================================
   30) صفحة تفاصيل العقار
   ========================================================================== */
.ke-pgal-main { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-2xl); overflow: hidden; background-color: var(--muted); box-shadow: var(--shadow-elegant); }
.ke-pgal-main img { width: 100%; height: 100%; object-fit: cover; }
.ke-pgal-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ke-pthumb { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; opacity: 0.7; transition: all var(--t-fast) var(--ease); }
.ke-pthumb:hover { opacity: 1; }
.ke-pthumb.is-on { border-color: var(--gold); opacity: 1; }
.ke-pthumb img { width: 100%; height: 100%; object-fit: cover; }

.ke-priceband {
  display: flex; align-items: flex-end; justify-content: space-between;
  background: var(--gradient-hero); border-radius: var(--radius-2xl);
  padding: 1.5rem; color: var(--primary-foreground);
}
.ke-priceband .ke-k { font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.25rem; }
.ke-priceband .ke-total { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: var(--gold); }
@media (min-width: 768px) { .ke-priceband .ke-total { font-size: 3rem; line-height: 1; } }
.ke-priceband .ke-total span { font-size: 1rem; font-weight: 400; color: #fff; }
.ke-priceband .ke-perm { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }

.ke-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px) { .ke-spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ke-spec { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.25rem; text-align: center; }
.ke-spec-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-xl); background-color: color-mix(in oklab, var(--gold) 12%, transparent); color: var(--gold); margin-bottom: 0.5rem; }
.ke-spec-v { font-weight: 800; color: var(--primary); }
.ke-spec-l { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }

.ke-block { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.5rem; }
@media (min-width: 768px) { .ke-block { padding: 2rem; } }
.ke-block-h { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 1rem; }
.ke-feat-row { display: flex; align-items: center; gap: 0.5rem; background-color: color-mix(in oklab, var(--muted) 50%, transparent); border-radius: var(--radius-md); padding: 0.625rem 0.75rem; }
.ke-feat-row .ke-i { color: var(--gold); flex-shrink: 0; }
.ke-feat-row span { font-size: 0.875rem; font-weight: 500; }

/* ==========================================================================
   31) صفحة "من نحن" — الأسئلة الشائعة (FAQ)
   ========================================================================== */
/* <details>/<summary> عمدًا بدل أكورديون بـ JS: مدعومة أصلًا فى كل
   المتصفحات الحديثة، متاحة (accessible) افتراضيًا، وميحتاجش أي سكريبت
   إضافي فى public/site/assets/js/script.js. */
.ke-faq { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; margin-inline: auto; }
.ke-faq-item { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: border-color var(--t-fast) var(--ease); }
.ke-faq-item[open] { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.ke-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; font-weight: 700; color: var(--primary); cursor: pointer; list-style: none; }
.ke-faq-item summary::-webkit-details-marker { display: none; }
.ke-faq-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background-color: color-mix(in oklab, var(--gold) 12%, transparent); color: var(--gold); transition: transform var(--t-fast) var(--ease); }
.ke-faq-item[open] .ke-faq-icon { transform: rotate(45deg); }
.ke-faq-body { padding: 0 1.5rem 1.25rem; color: var(--muted-foreground); line-height: 1.75; }

/* بطاقة "قصتنا" — تعرض محتوى Quill (about_ar/about_en) داخل بطاقة بدل نص
   عائم بلا حدود، عشان يبقى متّسق بصريًا مع باقي بطاقات الصفحة. */
.ke-story-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 2rem; box-shadow: var(--shadow-soft); }

/* قسم "قصتنا" بتصميم منقسم (نص + لوحة "وعدنا لك" التسويقية) بدل بطاقة نص
   عائمة لوحدها. ⚠️ كان هنا فى الأصل عمود صورة (consultant-iraqi.jpg) -
   اتشالت بطلب صريح من العميل واستُبدلت بلوحة .ke-promise-panel تسويقية
   قابلة للتحكم الكامل من dashboard/settings (تاب "صفحة من نحن"). */
.ke-story-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .ke-story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }

/* لوحة "وعدنا لك" - بطاقة داكنة بنفس تدرّج الهيرو (var(--gradient-hero))
   عشان تدّي القسم وزن بصري قوي (بديل الصورة اللي اتشالت) بدل نص تسويقي عائم. */
.ke-promise-panel {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gradient-hero); color: var(--primary-foreground);
  border-radius: var(--radius-3xl); padding: 2.25rem; box-shadow: var(--shadow-elegant);
}
@media (min-width: 768px) { .ke-promise-panel { padding: 2.75rem; } }
.ke-promise-panel::after {
  content: ""; position: absolute; z-index: -1; top: -30%; inset-inline-end: -20%;
  width: 18rem; height: 18rem; border-radius: var(--radius-full);
  background-color: color-mix(in oklab, var(--gold) 14%, transparent); filter: blur(90px);
}
.ke-promise-panel .ke-eyebrow { color: var(--gold); }
.ke-promise-title { font-size: 1.5rem; line-height: 1.3; font-weight: 800; margin-bottom: 1rem; }
@media (min-width: 768px) { .ke-promise-title { font-size: 1.75rem; } }
.ke-promise-text { opacity: 0.85; line-height: 1.75; margin-bottom: 1.75rem; }
.ke-promise-list { display: flex; flex-direction: column; gap: 1rem; }
.ke-promise-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; }
.ke-promise-list .ke-i { color: var(--gold); flex-shrink: 0; margin-top: 0.125rem; }

/* ترقيم تحريري خفيف لبطاقات "ما يميّزنا" (01/02/03) - لمسة تصميم مجلات
   بريميوم بدل ما تكون البطاقات الثلاث متطابقة الشكل تمامًا. */
.ke-why-num { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 0.5rem; }

/* تشويقة الفريق - صور دائرية حقيقية لأعضاء الفريق (App\Models\TeamMember)
   بدل نص مجرد بدون وجوه، مأخوذة من نفس accessor الصورة المستخدم فى
   resources/views/site/pages/team.blade.php (getImageAttribute). */
.ke-team-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
.ke-team-avatar { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; width: 6.5rem; }
.ke-team-avatar img {
  width: 5rem; height: 5rem; border-radius: var(--radius-full); object-fit: cover;
  border: 3px solid var(--card); box-shadow: var(--shadow-soft); transition: all var(--t-fast) var(--ease);
}
.ke-team-avatar:hover img { border-color: var(--gold); transform: translateY(-3px); }
.ke-team-avatar span { font-size: 0.75rem; font-weight: 700; color: var(--primary); text-align: center; line-height: 1.3; }