/* ==========================================================
   سكايوب - ملف التنسيق الوحيد لكل الصفحات
   (الأساسيات + الرئيسية + الصفحات الداخلية)
==========================================================

   ★ دليل سريع: كيف تعدّل الأشياء الشائعة ★
   (ابحث في الملف بـ Ctrl+F عن الكلمة المكتوبة بين القوسين)

   ● الألوان
     - اللون البرتقالي لكل الموقع ........ (--brand) في أول :root
     - الخلفية الفاتحة للأيقونات .......... (--brand-tint)
     - لون الكتابة الرمادي ................ (--muted)
     - لون الخطوط الفاصلة ................. (--line)
     - الأزرق في التظليل .................. rgba(10,35,85,...)
       الرقم الأخير هو قوة التظليل: 0 شفاف / 1 غامق كامل

   ● الصور (كلها في :root الثاني تحت "الصور: كمبيوتر / جوال")
     - صورة الهيرو ورا "سكايوب شريكك العقاري" .... (--img-hero-d) كمبيوتر / (--img-hero-m) جوال
     - صورة بطاقة مشاريع سكايوب ................... (--img-project-d / --img-project-m)
     - صور العقارات المميزة ....................... (--img-p1) إلى (--img-p5)، والجديدة (--img-p6)...
     - مربع التسويق الرقمي ........................ (--img-digital)
     - خلفية "ماذا نقدم" و"انضم" .................. (--img-offer / --img-join)
     - خلفية كل الصفحات ........................... (--img-page-d) كمبيوتر / (--img-page-m) جوال
     - صورة باقة الوسطاء: من index.html نفسه (premium-img)

   ● الأحجام
     - حجم عنوان "سكايوب شريكك العقاري" .... قسم 10.2 (.hero-title) غيّر 40px
     - ارتفاع اللوقو في الشريط ............. (--logo-h)
     - عرض الجانب يمين في اللاب ............ قسم 10.4 (.layout grid-template-columns)
     - خط الباقات في الجانب ................ قسم 10.4 (.pkg strong / .pkg small)
     - عدد العقارات في الصف ................ قسم 10.12 (--cols)

   ● أماكن الصور
     - ارتفاع الهيرو (كم يبان من الصورة) ... قسم 10.2 (.hero min-height)
     - قوة التظليل الأبيض على خلفية الصفحات . قسم 9 (--page-wash)
     - حجم خلفية الصفحات (أكبر / أصغر) ..... (--page-bg-size) في قسم 9

   ● الشاشات (media queries)
     - (max-width:540px)  جوال صغير
     - (max-width:760px)  جوال كبير
     - (max-width:1024px) آيباد طولي
     - (max-width:1280px) آيباد بالعرض + لاب صغير
     - أكبر من 1280px     لاب وكمبيوتر

   ● ملاحظة مهمة عن ترتيب الملف
     الملف مقسوم أجزاء، والجزء اللي تحت يغلب اللي فوق لو عدّلوا نفس الشي.
     يعني لو غيّرت شي فوق وما تغيّر، ابحث عن نفس الاسم تحت (غالبًا في قسم 10)
     وعدّله هناك.

   ● فهرس الملف
     - الأساسيات: الألوان، الخط، الأزرار، الشريط العلوي، الفوتر
     - الصفحة الرئيسية: الهيرو، البحث، التصنيفات، العقارات، الصف السفلي، الجانب
     - الصفحات الداخلية: المعرض المتحرك، تمليك/إيجار، المدونة
     - 1) إلى 9): تعديلات الشريط، الهيرو، الجانب، الفوتر، الباقات، المعلومات، الدخول، الخلفية
     - 10.1 أيقونة الحساب            - 10.9  صفحة العميل وتسجيل الخروج
     - 10.2 الهيرو والعنوان          - 10.10 خلفية كل الصفحات
     - 10.3 البحث                    - 10.11 تجاوب عام
     - 10.4 باقات العضويات (الجانب)  - 10.12 عقارات مميزة وعرض الكل
     - 10.5 باقة الوسطاء             - 10.13 مدة الاشتراك في صفحة الباقات
     - 10.6 انضم / ماذا نقدم         - 10.14 أيقونة العين في كلمة السر
     - 10.7 صفحة التسويق الرقمي      - 10.15 آخر الصفحة (تساوي العمودين)
     - 10.8 صفحة الباقات
========================================================== */

/* ==========================================================
   سكايوب - الأساسيات المشتركة (الشريط + الفوتر)
   غيّر الألوان والصور من هنا
========================================================== */
:root{
/* ===== ألوان الهوية: غيّر هذي الأرقام وكل الموقع يتغير ===== */
  --brand:#dc613e;        /* اللون الأساسي: الأزرار والعناوين والتمييز */
  --brand-d:#dc613e;      /* موحّد: نفس لون الهوية */
  --brand-l:#dc613e;      /* موحّد: نفس لون الهوية */
  --brand-tint:#fbe8e1;   /* خلفية فاتحة للأيقونات والشارات */
  --dark:#dc613e;         /* البطاقات الملونة (بنفس لون الهوية) */
  --dark-d:#dc613e;       /* موحّد: نفس لون الهوية */
  --bar-bg:#ffffff;       /* خلفية الشريط العلوي والفوتر */
  --bar-text:#dc613e;     /* كتابة الشريط العلوي والفوتر */
  --gold:#e0a93b;

  --bg:#f6f2ee;           /* خلفية الصفحة الرئيسية */
  --text:#2b2724;
  --muted:#7b726c;
  --line:#ebe4de;

  --radius:18px;
  --shadow:0 8px 24px rgba(43,39,36,.09);

  --font:"Almarai", "Segoe UI", Tahoma, Arial, sans-serif;   /* خط الموقع كله */
  --logo-h:46px;      /* ارتفاع صورة اللوقو في الشريط */
}

*{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
button,input,select,textarea{ font-family:inherit; }

.ic{
  width:1em;
  height:1em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ======================
   الأزرار
====================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:15px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  transition:.2s ease;
}

.btn-teal{
  background:linear-gradient(135deg, var(--brand), var(--brand-d));
  color:#fff;
}

.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}

.btn:hover{ filter:brightness(1.08); }
.btn-sm{ padding:7px 14px; font-size:13px; }

/* ======================
   الشريط العلوي
====================== */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(90deg, var(--dark-d), var(--dark));
  color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}

.nav-inner{
  height:68px;
  margin:0;
  padding:0 clamp(16px, 2vw, 32px);   /* الصفحة على كامل الشاشة */
  display:flex;
  align-items:center;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

.brand-mark{ width:42px; height:42px; }

.brand-text b{
  display:block;
  font-size:22px;
    font-family: "Almarai", sans-serif;
  line-height:1.1;
}

.brand-text small{
  display:block;
  font-size:10px;
    font-family: "Almarai", sans-serif;
  letter-spacing:.4em;
  opacity:.85;
}

.nav-links{
  display:flex;
  gap:28px;
  margin:0 auto;
}

.nav-links a{
  position:relative;
  padding:24px 0;
  font-size:15px;
    font-family: "Almarai", sans-serif;
  color:#ece6e1;
}

.nav-links a:hover{ color:#fff; }

.nav-links a.active{
  color:var(--brand-l);
}

.nav-links a.active::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:14px;
  height:2px;
  background:var(--brand);
}

.only-mobile{ display:none; }

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:10px;
  font-size:20px;
    font-family: "Almarai", sans-serif;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  height:2px;
  border-radius:2px;
  background:#fff;
}


/* صورة اللوقو (يمين الشريط) */
.brand img{
  display:block;
  height:var(--logo-h);
  width:auto;
}

/* ======================
   الفوتر
====================== */
.footer{
  background:linear-gradient(90deg, var(--dark-d), var(--dark));
  color:#fff;
}

.footer-inner{
  margin:0;
  padding:22px clamp(16px, 2vw, 32px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer-brand p{ font-size:13px;
  font-family: "Almarai", sans-serif; }
  
.footer-brand small{ font-size:11px; opacity:.7;
  font-family: "Almarai", sans-serif; }

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 22px;
  font-size:13px;
    font-family: "Almarai", sans-serif;
}

.footer-links a{ color:#d9d1cb; }
.footer-links a:hover,
.footer-links a.active{ color:var(--brand-l); }

.footer-side{
  display:flex;
  align-items:center;
  gap:22px;
}

.socials{
  display:flex;
  gap:12px;
  font-size:20px;
    font-family: "Almarai", sans-serif;
}

.socials a{ color:#d9d1cb; }
.socials a:hover{ color:#fff; }

.footer-phone{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
    font-family: "Almarai", sans-serif;
  color:var(--brand-l);
}

.footer-phone small{ display:block; font-size:11px; color:#d9d1cb;   font-family: "Almarai", sans-serif; }
.footer-phone b{ display:block; font-size:16px; color:#fff;   font-family: "Almarai", sans-serif; }


.footer .brand img{ height:40px; }

/* ==========================================================
   التجاوب (الشريط + الفوتر)
========================================================== */

@media (max-width:1024px){

  .footer-inner{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
  }

  .footer-brand{ align-items:center; }

}

/* القائمة تتحول لزر */
@media (max-width:900px){

  .nav-inner{
    padding:0 16px;
    gap:12px;
  }

  .nav-actions{ margin-right:auto; }

  .nav-toggle{ display:flex; }

  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    inset-inline:0;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:8px 16px 16px;
    background:var(--dark-d);
    box-shadow:0 14px 24px rgba(0,0,0,.3);
  }

  .nav-links.open{ display:flex; }

  .nav-links a{
    padding:13px 4px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav-links a.active::after{ display:none; }

  .only-mobile{ display:block; }

}

@media (max-width:760px){

  .nav-actions .btn{ display:none; }

  :root{ --logo-h:40px; }

}

@media (max-width:540px){

  .footer-side{
    flex-direction:column;
    gap:14px;
  }

}


/* ==========================================================
   سكايوب - الصفحة الرئيسية
   (الألوان والشريط والفوتر في site.css)
========================================================== */
:root{
  /* ===== الصور: كمبيوتر / جوال (بدّلها بصورك الحقيقية بنفس الأسماء) ===== */
  --img-hero-d:url("./8.png");                  /* خلف سكايوب - كمبيوتر */
  --img-hero-m:url("./9.png");                  /* خلف سكايوب - جوال */
  --img-project-d:url("./13.png");              /* مشاريع سكايوب - كمبيوتر */
  --img-project-m:url("./13.png");              /* مشاريع سكايوب - جوال */
  --img-p1:url("./صور\ المشاريع\ -\ موقع\ سكايوب-0١.jpg.jpeg");                      /* العقارات المميزة 1 إلى 5 */
  --img-p2:url("./صور\ المشاريع\ -\ موقع\ سكايوب-0٢.jpg.jpeg");
  --img-p3:url("./صور\ المشاريع\ -\ موقع\ سكايوب-0٣.jpg.jpeg");
  --img-p4:url("./صور\ المشاريع\ -\ موقع\ سكايوب-0٥.jpg.jpeg");
  --img-p5:url("./صور\ المشاريع\ -\ موقع\ سكايوب-0٥.jpg.jpeg");
  --img-latest:url("./13.png");                 /* أحدث المشاريع (غير مستخدمة حاليًا) */
  --img-digital:url("./14.png");           /* مربع التسويق الرقمي: غيّر الاسم لصورتك */
  --img-premium:url("./Untitled-1-01.png");     /* الباقة المميزة */
  --img-offer:url("./15.png");                  /* خلفية ماذا نقدم */
  --img-join:url("./17.png");                   /* خلفية انضم إلى سكايوب */
  --img-page-d:url("./بوستات\ سكايوب.png");                /* خلفية كل الصفحات - كمبيوتر (الخريطة) */
  --img-page-m:url("./بوستات\ سكايوب.png");                /* خلفية كل الصفحات - جوال وآيباد (تقدر تحط صورة طولية) */
  --img-support:url("./skyup-support.png");              /* صورة خدمة العملاء */
}

.hero{ --img-hero:var(--img-hero-d); }
.hero-card-img{ --img:var(--img-project-d); }
.latest-img{ --img:var(--img-latest); }
.premium{ --img:var(--img-premium); }
.prop-img[data-img="p1"]{ --img:var(--img-p1); }
.prop-img[data-img="p2"]{ --img:var(--img-p2); }
.prop-img[data-img="p3"]{ --img:var(--img-p3); }
.prop-img[data-img="p4"]{ --img:var(--img-p4); }
.prop-img[data-img="p5"]{ --img:var(--img-p5); }

/* الجوال: نبدل صورتين الهيرو والبطاقة */
@media (max-width:760px){
  .hero{ --img-hero:var(--img-hero-m); }
  .hero-card-img{ --img:var(--img-project-m); }
}

/* ======================
   تقسيم الصفحة
====================== */
.layout{                        /* تقسيم الصفحة الرئيسية: الجانب يمين + المحتوى */
  margin:0;
  padding:24px clamp(14px, 2vw, 32px) 40px;     /* الصفحة على كامل الشاشة */
  display:grid;
  grid-template-columns:clamp(270px, 22vw, 380px) minmax(0, 1fr);   /* الشريط الجانبي يمين */
  gap:24px;
  align-items:start;
}

.content{ min-width:0; }

/* ======================
   الهيرو
====================== */
.hero{                          /* المربع الكبير اللي فيه "سكايوب شريكك العقاري" */
  position:relative;
  display:grid;
  grid-template-columns:1fr clamp(340px, 40%, 640px);   /* عرض بطاقة مشاريع سكايوب يكبر مع الشاشة */
  gap:28px;
  align-items:center;
  min-height:380px;               /* أقل ارتفاع للهيرو */
  padding:34px 38px 70px;         /* فوق / جنب / تحت (تحت أكبر عشان مربع البحث) */
  border-radius:22px;
  overflow:hidden;
  color:#fff;
  background-image:var(--img-hero, none);
  background-color:#e9e4df;      /* لون محايد يظهر لحظة تحميل الصورة (بدل البرتقالي) */
  background-size:cover;
  background-position:center;
}

.hero-title{
  font-size:clamp(44px, 6.4vw, 86px);
    font-family: "Almarai", sans-serif;
  font-weight:800;
  line-height:1;
}

.hero-en{
  margin:8px 0 18px;
  font-size:clamp(14px, 1.6vw, 20px);
    font-family: "Almarai", sans-serif;
  letter-spacing:.55em;
}

.hero-desc{
  max-width:430px;
  font-size:clamp(14px, 1.3vw, 17px);
    font-family: "Almarai", sans-serif;
  line-height:1.9;
}

.hero-feats{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:22px;
}

.hero-feats div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:12px;
    font-family: "Almarai", sans-serif;
  text-align:center;
}

.hero-feats .ic{
  width:34px;
  height:34px;
  padding:7px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
}

.hero-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.3);
  border-radius:22px;
  background:rgba(220,97,62,.62);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.hero-card-img,
.latest-img,
.prop-img{
  background:
    var(--img, none),
    #eee9e4;                     /* لون محايد لحظة التحميل */
  background-size:cover;
  background-position:center;
}

.hero-card-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  padding:22px 20px;
}

.hero-card-text h2{
  font-size:clamp(22px, 2.4vw, 32px);
    font-family: "Almarai", sans-serif;
  font-weight:800;
  line-height:1.2;
}

.hero-card-text p{
  font-size:13px;
    font-family: "Almarai", sans-serif;
  opacity:.9;
}

.pill{
  padding:3px 12px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:11px;
  font-weight:700;
}

.pill-green{ background:#2e9b6a; }

/* ======================
   البحث
====================== */
.search{                        /* مربع البحث الأبيض تحت الهيرو */
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  margin:-34px 22px 0;           /* -34px = يطلع فوق الهيرو شوي */
  padding:12px;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}

.field{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
}

.field + .field{ border-right:1px solid var(--line); }

.field::after{
  content:"";
  width:7px;
  height:7px;
  flex:none;
  border-left:2px solid #a89f98;
  border-bottom:2px solid #a89f98;
  transform:rotate(-45deg);
}

.field select{
  flex:1;
  min-width:0;
  padding:8px 0;
  border:0;
  outline:none;
  background:transparent;
  color:#6a615b;
  font-size:14px;
    font-family: "Almarai", sans-serif;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.btn-search{
  padding:14px 30px;
  font-size:16px;
    font-family: "Almarai", sans-serif;
}

/* ======================
   التصنيفات
====================== */
.cats{                          /* مربعات التصنيفات (الخريطة، المشاريع، شراء...) */
  display:grid;
  grid-template-columns:repeat(7, 1fr);   /* 7 في الصف */
  gap:14px;
  margin-top:22px;
}

.cat{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:20px 8px 16px;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
  text-align:center;
  transition:.2s ease;
}

.cat:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(43,39,36,.14);
}

.cat-ic{
  width:38px;
  height:38px;
  margin-bottom:6px;
  color:var(--dark);
}

.cat strong{ font-size:16px; }

.cat small{
  font-size:11.5px;
    font-family: "Almarai", sans-serif;
  color:var(--muted);
  line-height:1.5;
}

.cat-badge{
  position:absolute;
  top:-9px;
  left:14px;
  padding:1px 10px;
  border-radius:999px;
  background:#2e9b6a;
  color:#fff;
  font-size:10.5px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
}

/* ======================
   عقارات مميزة
====================== */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:28px 0 14px;
}

.section-head h3{
  font-size:22px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

.see-all{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--dark);
}

.see-all.small{ font-size:12px; }

.props{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}

.prop{
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
  transition:.2s ease;
}

.prop:hover{ transform:translateY(-3px); }

.prop-img{
  position:relative;
  height:150px;                   /* ارتفاع صورة العقار */
}

.tag{                           /* شارة "للبيع" / "للإيجار" على صورة العقار */
  position:absolute;
  top:10px;
  right:10px;
  padding:2px 12px;
  border-radius:6px;
  color:#fff;
  font-size:12px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
}

.tag-sale{ background:var(--brand); }
.tag-rent{ background:var(--dark); }

.fav{                           /* زر القلب (المفضلة) */
  position:absolute;
  top:10px;
  left:10px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#7b726c;
  font-size:15px;
    font-family: "Almarai", sans-serif;
  cursor:pointer;
}

.fav.on{ color:#dc613e; }
.fav.on .ic{ fill:currentColor; }

.prop-body{ padding:12px 12px 10px; }

.prop-body h4{
  font-size:15px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

.loc{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  font-size:12px;
    font-family: "Almarai", sans-serif;
  color:var(--muted);
}

.price{
  margin-top:6px;
  color:var(--brand-d);
  font-size:19px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

.price small{
  color:var(--muted);
  font-size:11px;
    font-family: "Almarai", sans-serif;
  font-weight:400;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:11.5px;
    font-family: "Almarai", sans-serif;
  color:var(--muted);
}

.meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* ======================
   الصف السفلي
====================== */
.bottom{
  display:grid;
  grid-template-columns:1fr 1fr 1.6fr;
  gap:16px;
  margin-top:8px;
}

.bottom .section-head{ margin-top:14px; }
.bottom .section-head h3{ font-size:18px;   font-family: "Almarai", sans-serif; }

.latest-card{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
}

.latest-img{ min-height:130px; }

.latest-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding:14px;
}

.latest-text h4{ font-size:15px; font-weight:800;   font-family: "Almarai", sans-serif; }
.latest-text p{ font-size:12px; color:var(--muted);   font-family: "Almarai", sans-serif;}
.latest-text .from b{ color:var(--brand-d); }

.join,
.offer{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  padding:22px;
  border-radius:16px;
  color:#fff;
  background:
    linear-gradient(90deg, rgba(10,35,85,.92), rgba(27,63,122,.82)),
    var(--img, none),
    linear-gradient(135deg, #0a2355, #1b3f7a);
  background-size:cover;
  background-position:center;
}

.join h3,
.offer h3{ font-size:20px; font-weight:800;   font-family: "Almarai", sans-serif;}

.join p,
.offer p{ font-size:13px; opacity:.9;  font-family: "Almarai", sans-serif; }

.offer-icons{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.offer-icons div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:12px;
    font-family: "Almarai", sans-serif;
  text-align:center;
}

.offer-icons .ic{
  width:34px;
  height:34px;
  padding:7px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:10px;
}

/* ======================
   الشريط الجانبي
====================== */
.sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.pkg-card{
  padding:18px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  background:linear-gradient(160deg, var(--dark), var(--dark-d));
  color:#fff;
  box-shadow:var(--shadow);
}

.pkg-card h3{ font-size:20px; font-weight:800;   font-family: "Almarai", sans-serif;}
.pkg-card > p{ margin:2px 0 14px; font-size:12px; opacity:.85;   font-family: "Almarai", sans-serif;}

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

.pkg{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 6px;
  border-radius:12px;
  background:#fff;
  color:var(--text);
  text-align:center;
}

.pkg .ic{
  width:34px;
  height:34px;
  padding:7px;
  border-radius:10px;
  background:var(--brand-tint);
  color:var(--dark);
}

.pkg strong{ font-size:12.5px; line-height:1.3;   font-family: "Almarai", sans-serif;}
.pkg small{ font-size:10px; color:var(--muted); line-height:1.4;   font-family: "Almarai", sans-serif;}

.premium{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:18px;
  border-radius:var(--radius);
  color:#fff;
  box-shadow:var(--shadow);
  background:
    var(--img, none),
    #fff;
  background-size:cover;
  background-position:left center;
}

.gold-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 12px;
  border-radius:6px;
  background:var(--gold);
  color:#3b2a00;
  font-size:12px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

.premium h3{ font-size:17px; font-weight:800; line-height:1.4; max-width:200px;   font-family: "Almarai", sans-serif;}
.premium-price{ font-size:13px;  font-family: "Almarai", sans-serif; }
.premium-price b{ font-size:22px;   font-family: "Almarai", sans-serif;}
.premium-ads{ font-size:13px; color:#ffd986;  font-family: "Almarai", sans-serif; }
.premium-ads b{ font-size:20px;  font-family: "Almarai", sans-serif; }

.why,                           /* "لماذا سكايوب" */
.help{                          /* "المساعدة والتواصل" */
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
}

.why{ padding:16px 14px; }
.why h3{ font-size:16px; font-weight:800; }

.why-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-top:12px;
}

.why-grid div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10.5px;
    font-family: "Almarai", sans-serif;
  text-align:center;
  color:var(--muted);
}

.why-grid .ic{
  width:34px;
  height:34px;
  padding:7px;
  border-radius:50%;
  background:var(--brand-tint);
  color:var(--dark);
}

.service{                       /* مربع رقم خدمة العملاء */
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:var(--radius);
  background:linear-gradient(160deg, var(--dark), var(--dark-d));
  color:#fff;
  box-shadow:var(--shadow);
}

.service-ic{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  font-size:30px;
    font-family: "Almarai", sans-serif;
  color:var(--brand-l);
}

.service small{ display:block; font-size:12px; color:var(--brand-l);   font-family: "Almarai", sans-serif; }
.service strong{ display:block; font-size:26px; font-weight:800; letter-spacing:.5px; line-height:1.2;   font-family: "Almarai", sans-serif;}
.service span{ font-size:11.5px; opacity:.85;  font-family: "Almarai", sans-serif; }

.help{ overflow:hidden; }

.help h3{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 16px;
  background:var(--dark);
  color:#fff;
  font-size:15px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

.help-list details{ border-top:1px solid var(--line); }
.help-list details:first-child{ border-top:0; }

.help-list summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  font-size:13.5px;
    font-family: "Almarai", sans-serif;
  cursor:pointer;
  list-style:none;
}

.help-list summary::-webkit-details-marker{ display:none; }

.help-list summary > span{ flex:1; }

.help-list summary .ic{ color:var(--dark); }

.help-list .chev{
  transform:rotate(-90deg);
  transition:transform .2s ease;
  color:var(--muted);
}

.help-list details[open] .chev{ transform:rotate(90deg); }

.help-list details p{
  padding:0 16px 14px;
  font-size:12.5px;
    font-family: "Almarai", sans-serif;
  color:var(--muted);
  line-height:1.8;
}


.featured{ scroll-margin-top:84px; }

/* ======================
   نتائج البحث
====================== */
.count{
  margin-inline-start:10px;
  padding:2px 12px;
  border-radius:999px;
  background:var(--brand-tint);
  color:var(--brand-d);
  font-size:13px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
  vertical-align:middle;
}

.count:empty{ display:none; }

.no-results{
  padding:34px 16px;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
  text-align:center;
  color:var(--muted);
}

.no-results .btn{ margin-top:12px; }

/* ==========================================================
   التجاوب
========================================================== */

/* لاب صغير */
@media (max-width:1280px){

  .cats{ grid-template-columns:repeat(4, 1fr); }
  .props{ grid-template-columns:repeat(3, 1fr); }
  .bottom{ grid-template-columns:1fr 1fr; }
  .offer{ grid-column:1 / -1; }

}

/* آيباد */
@media (max-width:1024px){

  .layout{
    grid-template-columns:1fr;
    padding:20px 18px 32px;
  }

  .content{ order:1; }

  .sidebar{
    order:2;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    align-items:start;
  }

  .pkg-card,
  .premium{ grid-column:1 / -1; }

}

/* جوال كبير */
@media (max-width:760px){

  .hero{
    grid-template-columns:1fr;
    padding:26px 20px 56px;
  }

  .hero-card{ grid-template-columns:1fr 1.2fr; }

  .search{
    flex-wrap:wrap;
    margin:-30px 12px 0;
  }

  .field{
    flex:1 1 45%;
    border:1px solid var(--line);
    border-radius:10px;
  }

  .field + .field{ border-right:1px solid var(--line); }

  .btn-search{ flex:1 1 100%; }

  .cats{ grid-template-columns:repeat(3, 1fr); }
  .props{ grid-template-columns:repeat(2, 1fr); }
  .bottom{ grid-template-columns:1fr; }
  .offer{ grid-column:auto; }

}

/* جوال صغير */
@media (max-width:540px){

  .layout{ padding:16px 12px 28px; }

  .hero{ min-height:0; }

  .hero-card{ grid-template-columns:1fr; }
  .hero-card-img{ min-height:150px; }

  .field{ flex:1 1 100%; }

  .cats{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .props{ grid-template-columns:1fr; }
  .sidebar{ grid-template-columns:1fr; }

  .latest-card{ grid-template-columns:1fr; }
  .latest-img{ min-height:150px; }

  .pkgs{ grid-template-columns:1fr; }

}


/* ==========================================================
   تنسيق الصفحات الداخلية (الأقسام، التفاصيل، المدونة)
========================================================== */
:root{

  /* شفافية الطبقة اللي على صور الأقسام */
  --tile-overlay-opacity:.35;
  --tile-overlay-color:0,0,0;     /* 0,0,0 أسود / 255,255,255 أبيض */
}

body.inner{
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}

/* المحتوى ياخذ المساحة المتبقية، فالفوتر دايمًا في آخر الصفحة */
.page{
  flex:1 0 auto;
  width:100%;
}

/* ==========================================================
   صفحة المعرض (الصور المتحركة)
========================================================== */
:root{
  --item-w:clamp(230px, 60vw, 480px);   /* عرض كل صورة: يصغر مع الشاشة */
  --gap:clamp(34px, 10vw, 96px);        /* المسافة بين الصور */
  --img-h:calc(var(--item-w) * .68);    /* الارتفاع يتبع العرض */
}

/* ======================
   الرأس
====================== */
.top{
  text-align:center;
  padding:28px 16px 6px;
}

.top h1{
  margin:0;
  font-size:clamp(30px, 5vw, 52px);
    font-family: "Almarai", sans-serif;
  font-weight:700;
  line-height:1.3;
  color:var(--brand);
}

/* ======================
   المعرض
====================== */
.carousel{
  position:relative;
  overflow:hidden;
  direction:ltr;            /* حركة المسار فقط، النصوص تبقى عربي */
  padding:30px 0 40px;
}

.track{
  display:flex;
  align-items:flex-start;
  gap:var(--gap);
  width:max-content;
  will-change:transform;
}

.slide{
  flex:0 0 var(--item-w);
  width:var(--item-w);
  direction:rtl;
  text-align:center;
  transform-origin:center top;
  transition:transform .5s ease;   /* تكبير ناعم عند الضغط على بيانات */
  will-change:transform;
}

/* الصورة + البيانات مربع واحد ملتصق */
.card-box{
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(209,213,219,.7);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.slide-img{
  display:block;
  width:100%;
  height:var(--img-h);
  object-fit:cover;
  background:#f1ede9;            /* لون محايد لحظة التحميل */
}

/* ======================
   البيانات (تنفتح تحت الصورة)
====================== */
.details{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s ease;
}

.slide.open .details{
  grid-template-rows:1fr;
}

.details-inner{
  min-height:0;
  overflow:hidden;
}

.details-body{
  padding:22px 24px 10px;
  text-align:right;
  border-top:3px solid var(--brand);
}

.details-body h3{
  margin:0 0 8px;
  font-size:20px;
    font-family: "Almarai", sans-serif;
  color:var(--brand);
}

.details-body p{
  margin:0 0 14px;
  font-size:17px;
    font-family: "Almarai", sans-serif;
  line-height:1.9;
  color:#4b5563;
}

/* ======================
   الزر تحت كل صورة
====================== */
.data-btn{
  display:block;
  margin:16px auto 0 0;     /* الزر تحت الصورة على اليسار */
  padding:11px 28px;
  border:1px solid var(--brand);
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-family:inherit;
  font-size:16px;
    font-family: "Almarai", sans-serif;
  cursor:pointer;
  transition:.2s ease;
}

.data-btn:hover{
  filter:brightness(.94);
}

.slide.open .data-btn{
  background:#fff;
  color:var(--brand);
}

/* آيباد */
@media (max-width:1024px){
  .top h1{
    font-size:42px;
      font-family: "Almarai", sans-serif;
  }
}

/* جوال */
@media (max-width:600px){
  .top h1{
    font-size:32px;
      font-family: "Almarai", sans-serif;
  }

  .details-body{
    padding:16px 16px 6px;
  }

  .details-body p{
    font-size:15px;
      font-family: "Almarai", sans-serif;
  }
}


/* ==========================================================
   صور الأقسام (تمليك / إيجار / دعاية وإعلان / المدونة)
========================================================== */
.carousel.tiles{
  padding:20px 0 30px;
}

.tile{
  position:relative;
  display:block;
  height:var(--img-h);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  cursor:pointer;
}

.tile .slide-img{
  height:100%;
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(var(--tile-overlay-color), var(--tile-overlay-opacity));
  transition:background .3s ease;
}

.tile:hover::after{
  background:rgba(var(--tile-overlay-color), calc(var(--tile-overlay-opacity) + .15));
}

.tile-text{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  color:#fff;
  font-size:clamp(24px, 3.2vw, 38px);
    font-family: "Almarai", sans-serif;
  font-weight:800;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

/* ==========================================================
   صفحة الأقسام: الخيارات (فلل / شقق / أراضي)
========================================================== */
.options{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  padding:10px 16px 20px;
}

.opt-btn{
  padding:14px 44px;
  border:2px solid var(--brand);
  border-radius:14px;
  background:#fff;
  color:var(--brand);
  font-family:inherit;
  font-size:20px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.opt-btn:hover,
.opt-btn.active{
  background:var(--brand);
  color:#fff;
}

#listSection{
  animation:fadeUp .6s ease;
}

.list-title{
  margin:20px 0 0;
  text-align:center;
  font-size:30px;
    font-family: "Almarai", sans-serif;
  color:var(--brand);
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================
   المدونة
========================================================== */
.posts{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:28px clamp(16px, 3vw, 40px) 20px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap:clamp(20px, 2.4vw, 34px);
}

.post{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(209,213,219,.6);
  border-radius:26px;
  box-shadow:0 14px 34px rgba(43,39,36,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* شريط التدرج أعلى البطاقة */
.post::before{
  content:"";
  height:8px;
  background:linear-gradient(90deg, var(--brand), var(--brand-l));
}

.post:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(43,39,36,.16);
}

.post-body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:14px;
  padding:clamp(22px, 2.4vw, 34px);
}

.post-tag{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:999px;
  background:var(--brand-tint);
  color:var(--brand-d);
  font-size:13px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
}

.post-body h3{
  margin:0;
  font-size:clamp(22px, 2vw, 28px);
    font-family: "Almarai", sans-serif;
  line-height:1.5;
  color:var(--text);
}

.post .excerpt{
  margin:0;
  font-size:clamp(16px, 1.3vw, 19px);
    font-family: "Almarai", sans-serif;
  line-height:2;
  color:#5a524d;
}

.more-btn{
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand-d));
  color:#fff;
    font-family: "Almarai", sans-serif;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.more-btn .ic{ font-size:18px; }

.more-btn:hover{
  filter:brightness(1.06);
  gap:12px;
}

/* المقالة الكاملة في نهاية الصفحة */
.article-view{
  max-width:900px;
  margin:30px auto 40px;
  padding:32px;
  background:#fff;
  border:1px solid rgba(209,213,219,.7);
  border-top:4px solid var(--brand);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.article-title{
  margin:0 0 18px;
  font-size:32px;
    font-family: "Almarai", sans-serif;
  color:var(--brand);
}

.article-body p{
  margin:0 0 16px;
  font-size:19px;
    font-family: "Almarai", sans-serif;
  line-height:2;
  color:#374151;
  text-align:justify;
}

@media (max-width:1024px){

  .tile-text{
    font-size:30px;
      font-family: "Almarai", sans-serif;
  }

}

@media (max-width:600px){

  .tile-text{
    font-size:24px;
      font-family: "Almarai", sans-serif;
  }

  .opt-btn{
    padding:12px 30px;
    font-size:18px;
      font-family: "Almarai", sans-serif;
  }

  .article-view{
    margin:40px 16px 60px;
    padding:22px;
  }

  .article-title{
    font-size:26px;
      font-family: "Almarai", sans-serif;
  }

}


/* ملاءمة الشاشات الصغيرة جدًا */
@media (max-width:400px){

  .opt-btn{
    padding:10px 22px;
    font-size:16px;
      font-family: "Almarai", sans-serif;
  }

}


/* النزول لقسم وحداتنا بنعومة، وبدون ما الشريط الثابت يغطي العنوان */
html{
  scroll-behavior:smooth;
}

#projects{
  scroll-margin-top:90px;
}


/* ==========================================================
   صفحة النص والصورة (تحت وحداتنا)
========================================================== */
.feature{
  max-width:1300px;
  margin:0 auto;
  padding:30px 24px 50px;

  display:grid;
  grid-template-columns:1fr 1fr;       /* النص يمين / الصورة يسار */
  align-items:center;
  gap:clamp(24px, 5vw, 64px);
}

.feature-text h2{
  margin:0 0 20px;
  font-size:clamp(30px, 4.6vw, 58px); 
    /* العنوان الكبير */
  line-height:1.3;
    font-family: "Almarai", sans-serif;
  color:var(--brand);
}

.feature-text p{
  margin:0;
  font-size:clamp(18px, 2vw, 26px);
    font-family: "Almarai", sans-serif;
  line-height:2;
  color:#374151;
  text-align:justify;
}

.feature-media{
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 12px 35px rgba(0,0,0,.14);
  background:#f1ede9;
}

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

/* الجوال والآيباد الطولي: النص فوق والصورة تحت */
@media (max-width:900px){

  .feature{
    grid-template-columns:1fr;
    padding:20px 16px 40px;
  }

}


/* ==========================================================
   الشريط العلوي والفوتر: خلفية بيضاء وكتابة برتقالي
========================================================== */
.nav,
.footer{
  background:var(--bar-bg);
  color:var(--bar-text);
}

.nav{
  box-shadow:0 4px 18px rgba(43,39,36,.12);
}

.footer{
  border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(43,39,36,.06);
}

.brand{ color:var(--bar-text); }

.nav-links a{ color:var(--bar-text); }
.nav-links a:hover{ color:var(--brand-d); }

.nav-links a.active{
  color:var(--brand-d);
  font-weight:700;
}

.nav-links a.active::after{ background:var(--brand); }

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

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

.nav-toggle{ border-color:var(--brand); }
.nav-toggle span{ background:var(--brand); }

/* الفوتر */
.footer-links a,
.socials a,
.footer-phone,
.footer-phone b,
.footer-phone small{
  color:var(--bar-text);
}

.footer-links a:hover,
.footer-links a.active,
.socials a:hover{
  color:var(--brand-d);
}

/* الكتابة تحت اللوقو في المنتصف */
.footer-brand{
  align-items:center;
  text-align:center;
}

.footer-brand p,
.footer-brand small{
  color:var(--bar-text);
  text-align:center;
}

.footer-brand small{ opacity:.85; }

.hero-card .pill{
  background:#fff;
  color:var(--brand-d);
}

/* الأزرار البيضاء فوق البطاقات البرتقالية */
.hero-card .btn-teal,
.premium .btn-teal,
.join .btn-teal{
  background:#fff;
  color:var(--brand-d);
}

.tag-rent{ background:var(--brand-d); }

.service small{ color:#fff3ee; }
.service-ic{ color:#fff; }

/* قائمة الجوال */
@media (max-width:900px){

  .nav-links{
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 14px 24px rgba(43,39,36,.12);
  }

  .nav-links a{ border-bottom-color:var(--line); }

}


/* ==========================================================
   باقات العضويات: أزرار عرض الباقات بنفس الحجم وعلى نفس الخط
========================================================== */
.pkg .btn{
  margin-top:auto;
  width:100%;
  padding:7px 2px;
  font-size:11.5px;
    font-family: "Almarai", sans-serif;
  white-space:nowrap;
}

.hero-card .btn{ white-space:nowrap; }

/* ==========================================================
   أحدث المشاريع: العنوان فوق، والبطاقة بنفس حجم المربعين اللي جنبها
========================================================== */
.bottom{
  grid-template-columns:1.45fr .85fr 1.7fr;
  grid-template-rows:auto 1fr;
  column-gap:16px;
  row-gap:0;
}

.latest{ display:contents; }

.latest .section-head{
  grid-column:1;
  grid-row:1;
  margin:14px 0 12px;
}

.latest-card{
  grid-column:1;
  grid-row:2;
}

.join{ grid-column:2; grid-row:2; margin-top:0; }
.offer{ grid-column:3; grid-row:2; margin-top:0; }

@media (max-width:1280px){

  .bottom{ grid-template-columns:1fr 1fr; }

  .offer{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:16px;
  }

}

@media (max-width:760px){

  .bottom{
    grid-template-columns:1fr;
    grid-template-rows:none;
    row-gap:16px;
  }

  .latest .section-head,
  .latest-card,
  .join,
  .offer{
    grid-column:auto;
    grid-row:auto;
    margin-top:0;
  }

  .latest .section-head{ margin:14px 0 0; }


}

/* الشارة البيضاء فوق بطاقة المشاريع البرتقالية */
.hero-card .pill{
  background:#fff;
  color:var(--brand-d);
}


/* ==========================================================
   صور خلفية "ماذا نقدم" و"انضم إلى سكايوب" + صورة خدمة العملاء
========================================================== */
.offer{
  background-image:
    linear-gradient(270deg, rgba(10,35,85,.95) 40%, rgba(10,35,85,.3) 100%),
    var(--img-offer, none),
    linear-gradient(135deg, #0a2355, #1b3f7a);
  background-position:left center;
}

.join{
  background-image:
    linear-gradient(180deg, rgba(10,35,85,.96) 48%, rgba(10,35,85,.3) 100%),
    var(--img-join, none),
    linear-gradient(135deg, #0a2355, #1b3f7a);
  background-position:center bottom;
}

.service-img{
  width:66px;
  height:66px;
  flex:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
}


/* ==========================================================
   الهيرو: الصورة نظيفة بدون أي مربع أو لون ورا الكتابة
========================================================== */
.hero-text{
  justify-self:start;     /* في الصفحة العربية start = أقصى اليمين */
  max-width:560px;
}

.hero-card{ align-self:stretch; }

@media (max-width:760px){

  .hero-text{
    justify-self:stretch;
    max-width:none;
  }

}

/* صورة خدمة العملاء */
.service-img{
  background:var(--img-support) center / contain no-repeat;
}


/* ==========================================================
   ===== تعديلات الدفعة الأخيرة (كل قسم له عنوان واضح) =====
   اللون البرتقالي الموحد: #dc613e  (متغير --brand في أول الملف)
========================================================== */


/* ==========================================================
   1) الشريط العلوي: لوقو يمين ويسار، والروابط + الأزرار بالمنتصف
========================================================== */
.nav-inner{ gap:16px; }

.brand-right,
.brand-left{ flex:none; }

/* المنتصف: الروابط + أزرار التسجيل + زر القائمة */
.nav-center{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 2.6vw, 44px);
}

.nav-links{ margin:0; gap:clamp(14px, 1.8vw, 28px); }
.nav-actions{ margin:0; }

/* الأقسام bold */
.nav-links a,
.nav-text{ font-weight:800; }

/* "المطورون": كتابة فقط بدون صفحة */
.nav-text{
  padding:24px 0;
  font-size:15px;
    font-family: "Almarai", sans-serif;
  color:var(--bar-text);
  cursor:default;
}

@media (max-width:1180px){
  .nav-actions .btn{ padding:8px 12px; font-size:13px;   font-family: "Almarai", sans-serif; }
  .nav-links a,
  .nav-text{ font-size:14px;   font-family: "Almarai", sans-serif;}
}

@media (max-width:900px){
  .nav-center{ gap:10px; }
  .nav-actions{ margin:0; }

  /* "المطورون" داخل قائمة الجوال بنفس شكل الروابط */
  .nav-links .nav-text{
    display:block;
    padding:13px 4px;
    border-bottom:1px solid var(--line);
  }
}

@media (max-width:760px){
  .nav-actions .btn{ display:none; }   /* الأزرار تنتقل لقائمة الجوال */
}


/* ==========================================================
   2) الهيرو: "سكايوب شريكك العقاري" + بطاقة المشاريع يسار
========================================================== */
.hero-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

/* كلمة سكايوب كبيرة */
.hero-name{
  font-size:clamp(44px, 6.4vw, 86px);
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

/* شريكك العقاري أصغر تحتها */
.hero-tag{
  margin-top:6px;
  font-size:clamp(20px, 2.8vw, 38px);
    font-family: "Almarai", sans-serif;
  font-weight:700;
}

/* تظليل أزرق خفيف ورا كلام سكايوب فقط */
.hero-text{ position:relative; isolation:isolate; }
.hero-text::before{
  content:"";
  position:absolute;
  inset:-18px -26px;
  z-index:-1;
  border-radius:36px;
  background:rgba(20,55,120,.40);
  filter:blur(22px);
  pointer-events:none;
}

/* بطاقة مشاريع سكايوب: صورة كاملة + تظليل أزرق على جهة الكلام، والكلام يسار */
.hero-card{
  --img:var(--img-project-d);
  display:flex;
  justify-content:flex-end;        /* الكلام على اليسار والصورة تظهر يمين */
  align-items:stretch;
  position:relative;
  min-height:220px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.45);
  border-radius:22px;
  background:
    linear-gradient(90deg, rgba(10,35,85,.88) 0%, rgba(10,35,85,.62) 30%, rgba(10,35,85,0) 60%),
    var(--img, none),
    #e6e2de;                     /* لون محايد لحظة التحميل */
  background-size:cover;
  background-position:center right;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:#fff;
}
.hero-card-img{ display:none; }

.hero-card-text{
  width:50%;
  text-align:start;
  padding:24px 22px;
  background:none;
  color:#fff;
}
.hero-card-text h2,
.hero-card-text p{ color:#fff; opacity:1; }
.hero-card-text p{ font-size:13px; font-weight:700;   font-family: "Almarai", sans-serif;}
.hero-card .pill{ background:var(--brand); color:#fff; }
.hero-card .btn-teal{ background:var(--brand); color:#fff; }

/* الجوال والآيباد: البطاقة تبقى يسار وما تغطي كل الصورة */
@media (max-width:760px){
  .hero-card{
    --img:var(--img-project-m);
    justify-self:end;               /* يسار */
    width:min(92%, 360px);
    min-height:230px;
  }
  .hero-card-text{ width:68%; padding:20px 12px; }
  .hero-card-text h2{ font-size:24px;   font-family: "Almarai", sans-serif;}
  .hero-card .btn{ padding:9px 12px; font-size:13.5px;   font-family: "Almarai", sans-serif;}
}


/* ==========================================================
   3) الجانب: كل المربعات بيضاء والخطوط والأيقونات برتقالي
========================================================== */
.pkg-card,
.service,
.help{
  background:#fff;
  border:1px solid var(--line);
  color:var(--brand);
}

.pkg-card h3,
.pkg-card > p{ color:var(--brand); opacity:1; }

/* باقات العضويات: ثلاث باقات (نمو / ريادة / النخبة)
   كل بطاقة 4 صفوف: أيقونة / اسم / وصف / زر، فالأيقونات والأزرار تطلع متساوية */
.pkg{
  display:grid;
  grid-template-rows:auto auto auto auto;
  justify-items:center;
  align-content:center;     /* المحتوى في وسط البطاقة */
  gap:8px;
  padding:16px 8px 14px;
  border:1px solid var(--brand-tint);
  box-shadow:0 2px 8px rgba(43,39,36,.06);
}
.pkg strong{ color:var(--brand); font-size:16px;   font-family: "Almarai", sans-serif;}
.pkg small{ font-size:12.5px; line-height:1.5; min-height:6em;  font-family: "Almarai", sans-serif; }   /* نفس الارتفاع عشان الأزرار تتساوى */
.pkg .btn{ margin-top:6px; width:100%; padding:9px 4px; font-size:13px;   font-family: "Almarai", sans-serif;}

/* الأيقونات الثلاث بنفس الحجم */
.pkg .ic{
  width:52px;
  height:52px;
  padding:13px;
  border-radius:50%;
  stroke-width:2;
}

/* لاب صغير: خط أصغر شوي عشان يسع */
@media (min-width:1025px) and (max-width:1400px){
  .pkg strong{ font-size:14.5px; }
  .pkg small{ font-size:11.5px; min-height:6.5em; }
  .pkg .ic{ width:44px; height:44px; padding:10px; }
}
.pkg-growth .ic{ background:var(--brand-tint); color:var(--brand); }   /* نمو: نبتة برتقالية */
.pkg-lead   .ic{ background:#eef0f3; color:#8b95a1; }                  /* ريادة: علامة صح فضي */
.pkg-elite  .ic{ background:#fbf1d9; color:#e0a93b; }                  /* النخبة: علامة صح ذهبي */

/* على اللاب: الجانب يمتد بنفس ارتفاع الصفحة، وبطاقة الباقات تكبر بتناسق */
@media (min-width:1025px){
  .layout{ align-items:stretch; }
  .pkg-card{ flex:1 1 auto; display:flex; flex-direction:column; }
  .pkgs{ flex:1; }
}

/* باقة مميزة للوسطاء: مربع أبيض، الكتابة يمين والصورة يسار بدون تدرج */
.premium{
  display:grid;
  grid-template-columns:fit-content(58%) 1fr;     /* العمود الأول بقد الكتابة، والصورة تلاصقه */
  align-items:stretch;      /* الصورة تملأ الارتفاع كامل */
  gap:0;
  padding:0;
  min-height:190px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
}
.premium-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;     /* يمين */
  justify-content:center;
  gap:8px;
  padding:18px 18px 18px 12px;
}
.premium-img{
  background:var(--img-premium, none) center / cover no-repeat, #fbe8e1;
}
.premium h3{ color:var(--brand); max-width:none; }
.premium-price{ color:var(--text); }
.premium-price b{ color:var(--brand); }
.premium-ads{ color:var(--text); }
.premium-ads b{ color:var(--brand); }
.premium .btn-teal{ background:var(--brand); color:#fff; }

/* خدمة العملاء: أيقونة سماعة بدون دائرة أو مربع */
.service small,
.service strong,
.service span{ color:var(--brand); opacity:1; }
.service-icon{
  width:64px;
  height:64px;
  flex:none;
  color:var(--brand);
  stroke-width:1.5;
}
.service-pic{ width:64px; height:64px; flex:none; object-fit:contain; }   /* لو حطيت صورتك */

/* المساعدة والتواصل */
.help h3{
  background:#fff;
  color:var(--brand);
  border-bottom:1px solid var(--line);
}
.help h3 .ic{ color:var(--brand); }


/* ==========================================================
   4) الصف السفلي: التسويق الرقمي + انضم إلينا + ماذا نقدم
========================================================== */
.bottom{
  grid-template-rows:auto;
  margin-top:30px;          /* مسافة بينها وبين العقارات المميزة */
  align-items:stretch;      /* المربعات الثلاثة بنفس الارتفاع */
}
.latest-promo,
.join,
.offer{ min-height:210px; }

/* مربع صورة كاملة عليها تظليل خفيف - يفتح صفحة التسويق الرقمي */
.latest-promo{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  border-radius:16px;
  overflow:hidden;
  color:#fff;
  text-align:center;
  box-shadow:var(--shadow);
  background:
    linear-gradient(rgba(10,35,85,.35), rgba(10,35,85,.35)),   /* التظليل الخفيف: غيّر .35 */
    var(--img-digital, none),
    #e6e2de;
  background-size:cover;
  background-position:center;
  transition:transform .25s ease;
}
.latest-promo:hover{ transform:translateY(-3px); }
.latest-promo span{
  padding:0 16px;
  font-size:clamp(24px, 2.4vw, 34px);
    font-family: "Almarai", sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

.join{ grid-column:2; grid-row:1; }
.offer{ grid-column:3; grid-row:1; }

@media (max-width:1280px){
  .offer{ grid-column:1 / -1; grid-row:2; margin-top:16px; }
}

@media (max-width:760px){
  .latest-promo,
  .join,
  .offer{ grid-column:auto; grid-row:auto; margin-top:0; }
}


/* ==========================================================
   5) الفوتر: لوقو يمين ويسار، والروابط والتواصل بالمنتصف
========================================================== */
.footer-inner{ justify-content:space-between; gap:20px; }
.footer-logo{ flex:none; }

.footer-center{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.footer-links{ justify-content:center; gap:8px 26px; }
.footer-links a{ font-weight:800; }       /* الأقسام bold */

/* صف التواصل: أيقونات + رقم خدمة العملاء */
.footer-row{
  width:min(100%, 560px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 32px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

/* أيقونات التواصل: صورك في images (social-x.png ...) */
.socials{ align-items:center; }
.socials a{ display:flex; }
.socials img{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
}

/* آيباد: اللوقو يبقى يمين ويسار */
@media (max-width:1024px){
  .footer-inner{ flex-wrap:nowrap; justify-content:space-between; }
}

/* جوال: اللوقو يمين ويسار فوق، وتحتهم الروابط (3 في كل صف) ثم التواصل */
@media (max-width:700px){
  .footer-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"right left" "center center";
    align-items:center;
    gap:16px 10px;
    padding:18px 16px 22px;
  }
  .footer-inner > .footer-logo:first-child{ grid-area:right; justify-self:start; }
  .footer-inner > .footer-logo:last-child{ grid-area:left; justify-self:end; }
  .footer-center{ grid-area:center; width:100%; gap:14px; }
  .footer .brand img{ height:34px; }

  .footer-links{
    display:grid;
    grid-template-columns:repeat(3, auto);
    justify-content:center;
    gap:10px 22px;
    font-size:13px;
      font-family: "Almarai", sans-serif;
  }
  .footer-row{ flex-direction:column; gap:12px; width:100%; }
  .socials{ gap:18px; justify-content:center; }
  .footer-phone{ justify-content:center; }
}


/* ==========================================================
   6) صفحة الباقات (plans.html): برتقالي وأسود
========================================================== */
.top-sub{ margin-top:8px; color:var(--muted); font-size:16px; }

.plans{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
  max-width:1100px;
  margin:24px auto 60px;
  padding:0 20px;
}

.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  scroll-margin-top:90px;
}
.plan:target{ outline:3px solid var(--brand); outline-offset:3px; }

/* رأس الباقة: أسود */
.plan-head{
  padding:26px 22px 22px;
  text-align:center;
  background:#151515;
  color:#fff;
}
.plan-icon{
  width:48px;
  height:48px;
  padding:11px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--brand);
  stroke-width:2;
}
.plan-lead  .plan-icon{ color:#c9d0d8; }    /* فضي */
.plan-elite .plan-icon{ color:#e0a93b; }    /* ذهبي */

.plan-head h2{ margin-top:10px; font-size:24px; font-weight:800;   font-family: "Almarai", sans-serif;}
.plan-head p{ margin-top:4px; font-size:13px; color:#cfc8c2;  font-family: "Almarai", sans-serif; }

.plan-price{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:16px;
}
.plan-price b{ font-size:48px; line-height:1; font-weight:800; color:var(--brand);  font-family: "Almarai", sans-serif; }
.plan-price span{ margin-top:6px; font-size:13px; color:#cfc8c2; }

/* الخدمات */
.plan-feats{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:22px;
  list-style:none;
}
.plan-feats li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
    font-family: "Almarai", sans-serif;
}
.plan-feats .ic{ margin-top:2px; font-size:20px; color:var(--brand); }

/* زر ادفع الآن */
.plan-pay{
  display:block;
  margin:0 22px 24px;
  padding:14px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  text-align:center;
  font-size:16px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
  transition:background .2s ease;
}
.plan-pay:hover{ background:#151515; }

/* الباقة المميزة (الوسطى): رأس برتقالي */
.plan-featured{ border:2px solid var(--brand); transform:translateY(-8px); }
.plan-featured .plan-head{ background:var(--brand); }
.plan-featured .plan-icon,
.plan-featured .plan-price b{ color:#fff; }
.plan-featured .plan-icon{ background:rgba(255,255,255,.18); }
.plan-featured .plan-head p,
.plan-featured .plan-price span{ color:#fff; }
.plan-featured .plan-pay{ background:#151515; }
.plan-featured .plan-pay:hover{ background:var(--brand); }

.plan-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:1;
  padding:3px 12px;
  border-radius:999px;
  background:#151515;
  color:#fff;
  font-size:12px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}

@media (max-width:900px){
  .plans{ grid-template-columns:1fr; max-width:460px; }
  .plan-featured{ transform:none; }
}


/* ==========================================================
   7) صفحة المعلومات (info.html): فقرات الفوتر
========================================================== */
.info-nav{
  position:sticky;
  top:68px;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:10px 16px;
  background:#fff;
}
.info-nav a{
  padding:8px 16px;
  border:1.5px solid var(--brand);
  border-radius:999px;
  color:var(--brand);
  font-size:14px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
  transition:.2s ease;
}
.info-nav a:hover{ background:var(--brand); color:#fff; }

.info-body{
  max-width:820px;
  margin:10px auto 60px;
  padding:0 20px;
}
.info-sec{
  padding:28px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:140px;
}
.info-sec h2{ margin-bottom:12px; font-size:26px; font-weight:800; color:var(--brand);  font-family: "Almarai", sans-serif; }
.info-sec p{ margin-bottom:8px; line-height:2; color:#3b3632; }


/* ==========================================================
   8) صفحة تسجيل الدخول (login.html)
========================================================== */
.login-page{
  display:grid;
  place-items:center;
  padding:40px 16px 70px;
}
.auth-card{
  width:100%;
  max-width:440px;
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:22px;
  padding:5px;
  border-radius:14px;
  background:#f4efeb;
}
.auth-tab{
  padding:12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:15px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
  cursor:pointer;
}
.auth-tab.active{ background:var(--brand); color:#fff; }

.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
}
.auth-form input{
  padding:13px 14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:15px;
    font-family: "Almarai", sans-serif;
  outline:none;
}
.auth-form input:focus{ border-color:var(--brand); }

.auth-submit{
  margin-top:4px;
  padding:14px;
  border:0;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-size:16px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
  cursor:pointer;
}
.auth-link{
  align-self:center;
  border:0;
  background:none;
  color:var(--brand);
  font-weight:700;
  cursor:pointer;
}
.auth-msg{ min-height:22px; margin-top:14px; text-align:center; font-size:14px; font-weight:700;   font-family: "Almarai", sans-serif;}
.auth-msg.ok{ color:#2e9b6a; }
.auth-msg.err{ color:#c0392b; }


/* ==========================================================
   9) خلفية كل الصفحات: صورة كبيرة بدون قص + تظليل أبيض
   - الصورة من --img-page-d (كمبيوتر) و --img-page-m (جوال وآيباد) في أول الملف
   - contain = الصورة كاملة بدون قص. لو تبغاها تملأ الشاشة وتنقص أطرافها غيّرها إلى cover
========================================================== */
:root{
  --page-wash:.78;                  /* قوة التظليل الأبيض: 0 بدون تظليل / 1 أبيض كامل */

  /* ★ حجم خلفية الصفحات في اللاب والآيباد بالعرض ★ غيّر القيمة هنا:
     ملاحظة: script.js يقص الفراغ الأبيض الزايد حول الخريطة تلقائيًا، فتطلع الخريطة نفسها أكبر
     contain  = الصورة كاملة بدون قص (أكبر مقاس يسعها الشاشة)  ← الحالي
     cover    = تملأ الشاشة كاملة بس ينقص من أطرافها
     90%      = عرضها 90% من الشاشة (جرّب 80% أو 95%)
     auto 90% = طولها 90% من الشاشة */
  --page-bg-size:contain;
  --img-page:var(--img-page-d);
}

@media (max-width:1024px){
  :root{ --img-page:var(--img-page-m); }
}

body::before{
  content:"";
  position:fixed;                   /* تبقى ورا الصفحة من أولها لآخرها */
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,var(--page-wash)), rgba(255,255,255,var(--page-wash))),
    var(--img-page, none) center / contain no-repeat,
    #fff;
}

/* ==========================================================
   ===== 10) تعديلات الدفعة الجديدة =====
========================================================== */

/* ----------------------------------------------------------
   10.1 الشريط العلوي: أيقونة الحساب هي الوحيدة
   - تفتح صفحة تسجيل الدخول
   - بعد تسجيل الدخول يظهر فيها أول حرف من اسم العميل
---------------------------------------------------------- */
.nav-actions{ display:flex; align-items:center; }

.account-btn{
  position:relative;
  width:42px;
  height:42px;
  border:1.5px solid var(--brand);
  border-radius:50%;
  color:var(--brand);
  font-size:21px;
    font-family: "Almarai", sans-serif;
  transition:.2s ease;
}
.account-btn:hover{ background:var(--brand-tint); }

.account-letter{
  display:none;
  font-size:19px;
  font-weight:800;
  line-height:1;
}
.account-btn.has-user{ background:var(--brand); color:#fff; }
.account-btn.has-user .ic{ display:none; }
.account-btn.has-user .account-letter{ display:block; }


/* ----------------------------------------------------------
   10.2 الهيرو: "سكايوب شريكك العقاري" جملة وحدة بحجم واحد وفي سطر واحد
   (الصورة والتظليل وترتيب البطاقة رجعت زي قبل)
---------------------------------------------------------- */
.hero-text{
  width:100%;
  container-type:inline-size;     /* حجم الجملة يتبع عرض مكان الكلام عشان تبقى سطر واحد */
}
.hero-title{
  display:block;
  white-space:nowrap;
  font-size:clamp(22px, 2.8vw, 40px);
  font-size:min(40px, 8.4cqi);      /* حجم العنوان: غيّر 40px لو تبغاه أكبر أو أصغر */
  font-weight:800;
    font-family: "Almarai", sans-serif;
  line-height:1.25;
}

/* الكلام والأيقونات تحت العنوان: bold وواضحة */
.hero-en{ font-weight:800; }
.hero-desc{ font-weight:700; }
.hero-feats div{ font-weight:800; font-size:12.5px;  font-family: "Almarai", sans-serif; }
.hero-feats .ic{ stroke-width:2.4; border-width:1.5px; }

/* صورة الهيرو: نفس ارتفاع التصميم الأصلي عشان الصورة (برج المملكة) تظهر كاملة زي قبل
   min-height = أقل ارتفاع للمربع. كبّره = تبان الصورة أكثر من فوق وتحت */
.hero{
  min-height:450px;                 /* اللاب والكمبيوتر */
  background-position:center;       /* زي الأصل: الصورة في المنتصف */
}
@media (max-width:1280px){ .hero{ min-height:425px; } }   /* آيباد بالعرض */
@media (max-width:1024px){ .hero{ min-height:400px; } }   /* آيباد طولي */
@media (max-width:760px){  .hero{ min-height:450px; } }   /* جوال كبير */
@media (max-width:540px){  .hero{ min-height:590px; } }   /* جوال */

/* بطاقة مشاريع سكايوب: مساحة كافية للكلام وزر "استعرض المشاريع" بدون قص */
.hero{ grid-template-columns:minmax(0, 1fr) clamp(340px, 40%, 640px); }
.hero-card-text{
  width:auto;
  min-width:min(240px, 100%);
  max-width:64%;
}
.hero-card .btn{
  white-space:nowrap;
  padding:10px 16px;
  font-size:14px;
    font-family: "Almarai", sans-serif;
}

@media (max-width:760px){
  .hero{ grid-template-columns:1fr; }
  .hero-title{ font-size:min(32px, 8.6cqi); }
}

/* ----------------------------------------------------------
   10.3 البحث: الكتابة ما تنقص في الآيباد والشاشات المتوسطة + نقاط الحروف واضحة
---------------------------------------------------------- */
.field select{
  min-height:38px;
  padding:6px 0 8px;
  line-height:1.8;                /* مساحة كافية تحت السطر عشان نقاط الياء (الحي) تبان */
  font-size:15px;
    font-family: "Almarai", sans-serif;
  color:#4a423d;
  overflow:visible;
}

@media (min-width:761px) and (max-width:1440px){
  .search{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }
  .field,
  .field + .field{
    border:1px solid var(--line);
    border-radius:10px;
  }
  .btn-search{ width:100%; }
}

/* ----------------------------------------------------------
   10.4 باقات العضويات (الجانب)
   - اللاب: الثلاث باقات جنب بعض (زي قبل) بالخط والأيقونات الجديدة
   - الآيباد والجوال: كل باقة تحت الثانية (أيقونة + كلام + زر)
---------------------------------------------------------- */
/* الجانب أعرض شوي على اللاب عشان تسع الباقات الثلاث بالخط الكبير
   ومربع الباقات بطوله الطبيعي (ما يتمدد لما تطول الصفحة بعد "عرض الكل") */
@media (min-width:1025px){
  .layout{ grid-template-columns:clamp(290px, 24vw, 400px) minmax(0, 1fr); }
  .pkg-card{ flex:none; }
  .pkgs{ flex:none; }
}

.pkg-card{ padding:20px 14px; }
.pkg-card h3{ font-size:22px; }
.pkg-card > p{ margin:4px 0 16px; font-size:14px; }

.pkgs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.pkg{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:16px 6px 12px;
  border-radius:14px;
  text-align:center;
}
.pkg strong{ font-size:17px; line-height:1.35; text-wrap:balance; }
.pkg small{
  flex:1;
  min-height:0;
  font-size:13.5px;
    font-family: "Almarai", sans-serif;
  line-height:1.6;
  color:var(--muted);
}
.pkg .btn{
  margin-top:auto;
  width:100%;
  padding:9px 4px;
  font-size:14px;
    font-family: "Almarai", sans-serif;
  white-space:nowrap;
}

/* الأيقونة داخل دائرة بنفس الحجم للثلاث */
.pkg-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:50%;
}
.pkg .pkg-icon .ic{
  width:36px;
  height:36px;
  padding:0;
  border-radius:0;
  background:none;
  stroke-width:2;
}

/* نمو: نبتة برتقالية */
.pkg-growth .pkg-icon{ background:var(--brand-tint); }
.pkg-growth .pkg-icon .ic{ color:var(--brand); }

/* ريادة: شارة توثيق فضية */
.pkg-lead .pkg-icon{
  background:radial-gradient(circle at 35% 30%, #ffffff, #e4e8ed 70%);
  box-shadow:inset 0 0 0 1px #d6dce3;
}
.pkg-lead .pkg-icon .ic{
  color:#8e9aa8;
  filter:drop-shadow(0 3px 5px rgba(110,125,140,.35));
}

/* النخبة: شارة توثيق ذهبية */
.pkg-elite .pkg-icon{
  background:radial-gradient(circle at 35% 30%, #fffaf0, #fbe6b0 70%);
  box-shadow:inset 0 0 0 1px #f1d58e;
}
.pkg-elite .pkg-icon .ic{
  color:#d99d22;
  filter:drop-shadow(0 3px 5px rgba(217,157,34,.4));
}

/* اللاب الصغير: الأيقونة أصغر شوي عشان تسع */
@media (min-width:1281px) and (max-width:1366px){
  .layout{ grid-template-columns:clamp(300px, 26vw, 400px) minmax(0, 1fr); }
  .pkg-card{ padding:20px 10px; }
  .pkgs{ gap:6px; }
  .pkg{ padding:14px 4px 10px; }
  .pkg-icon{ width:52px; height:52px; }
  .pkg .pkg-icon .ic{ width:31px; height:31px; }
  .pkg .btn{ padding:9px 2px; font-size:13px; }
}

/* الآيباد (طولي وعرضي) والجوال: كل باقة تحت الثانية */
@media (max-width:1280px){
  .pkgs{ grid-template-columns:1fr; }

  .pkg{
    display:grid;
    grid-template-columns:60px minmax(0, 1fr);
    grid-template-rows:auto auto auto;
    column-gap:14px;
    row-gap:4px;
    align-items:center;
    justify-items:start;
    padding:14px;
    text-align:start;
  }
  .pkg .pkg-icon{ grid-row:1 / span 3; grid-column:1; }
  .pkg strong,
  .pkg small,
  .pkg .btn{ grid-column:2; }
  .pkg small{ flex:none; }
  .pkg .btn{
    width:auto;
    margin-top:6px;
    padding:8px 20px;
  }
}

/* ----------------------------------------------------------
   10.5 باقة مميزة للوسطاء: الصورة كاملة بدون قص وبدون خلفية
   - اللاب: الصورة أكبر
   - الآيباد: الصورة ثابتة في اليسار مهما كبرت الشاشة
---------------------------------------------------------- */
.premium{
  grid-template-columns:auto minmax(110px, 1fr);
  min-height:200px;
}
.premium-body{ padding:18px 18px 18px 6px; }

.premium-img{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:12px 0 12px 12px;
  background:none;
}
.premium-img img{
  display:block;
  width:100%;
  height:100%;
  max-height:230px;
  object-fit:contain;              /* الصورة كاملة بدون قص */
  object-position:right center;
}

/* اللاب: الصورة أكبر */
@media (min-width:1281px){
  .premium{
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
    min-height:230px;
  }
  .premium-body{ padding:18px 16px 18px 4px; }
  .premium h3{ font-size:16px; }
  .premium-img{ padding:8px 0 8px 8px; }
  .premium-img img{ max-height:280px; }
}

/* الآيباد (طولي وعرضي): الصورة في أقصى اليسار */
@media (min-width:541px) and (max-width:1280px){
  .premium-img{ justify-content:flex-end; padding-left:16px; }
  .premium-img img{ max-height:240px; object-position:left center; }
}

/* ----------------------------------------------------------
   10.6 "انضم" و"ماذا نقدم": طريقة التظليل زي قبل، باللون الأزرق الجديد
---------------------------------------------------------- */
.offer{
  background-image:
    linear-gradient(270deg, rgba(10,35,85,.88) 40%, rgba(10,35,85,.25) 100%),
    var(--img-offer, none),
    linear-gradient(#e6e2de, #e6e2de);
  background-position:left center;
}
.join{
  background-image:
    linear-gradient(180deg, rgba(10,35,85,.88) 48%, rgba(10,35,85,.25) 100%),
    var(--img-join, none),
    linear-gradient(#e6e2de, #e6e2de);
  background-position:center bottom;
}

/* ----------------------------------------------------------
   10.7 صفحة التسويق الرقمي: بدون زر بيانات، مساحة بيضاء تحت الصورة للعنوان فقط
---------------------------------------------------------- */
.ads-page .top{ padding-bottom:12px; }
.ads-page .carousel{ padding-top:clamp(40px, 6vw, 76px); }   /* مسافة أكبر بين العنوان والصور */

.slide-caption{
  padding:16px 18px;
  background:#fff;
  text-align:center;
}
.slide-caption h3{
  margin:0;
  font-size:clamp(17px, 1.7vw, 22px);
    font-family: "Almarai", sans-serif;
  font-weight:800;
  color:var(--brand);
}


/* ----------------------------------------------------------
   10.8 صفحة الباقات: خلفية بيضاء وكتابة برتقالي، مستطيلات متساوية، بدون "الأكثر طلبًا"
---------------------------------------------------------- */
.plans{
  grid-auto-rows:auto;
  gap:0 24px;
  align-items:stretch;
}

/* كل بطاقة 3 صفوف (الرأس / الخدمات / الزر) ومتطابقة مع البطاقات اللي جنبها */
.plan{
  display:grid;
  grid-row:span 3;
  grid-template-rows:subgrid;
  border:1px solid var(--line);
  transform:none;
}
.plan:target{ outline:none; }

.plan-head{
  background:#fff;
  color:var(--brand);
  border-bottom:1px solid var(--line);
}
.plan-head h2,
.plan-head p,
.plan-price b,
.plan-price span{ color:var(--brand); }

.plan-icon{
  display:inline-grid;
  place-items:center;
  width:66px;
  height:66px;
  padding:0;
  border-radius:50%;
  background:var(--brand-tint);
  color:var(--brand);
}
.plan-icon .ic{ width:40px; height:40px; stroke-width:2; }
.plan-lead .plan-icon{
  background:radial-gradient(circle at 35% 30%, #ffffff, #e4e8ed 70%);
  color:#8e9aa8;
}
.plan-elite .plan-icon{
  background:radial-gradient(circle at 35% 30%, #fffaf0, #fbe6b0 70%);
  color:#d99d22;
}

.plan-feats li{ color:var(--brand); }

.plan-pay{
  align-self:end;
  background:var(--brand);
  color:#fff;
}
.plan-pay:hover{ background:#dc613e; }

.plans-msg{
  max-width:640px;
  margin:-36px auto 50px;
  padding:0 20px;
  text-align:center;
  font-weight:700;
}
.plans-msg:empty{ display:none; }
.plans-msg.ok{ color:#2e9b6a; }
.plans-msg.err{ color:var(--brand); }

@media (max-width:900px){
  .plans{ grid-template-columns:1fr; max-width:460px; }
  .plan{ margin-bottom:24px; }
  .plans-msg{ margin-top:0; }
}


/* ----------------------------------------------------------
   10.9 صفحة العميل + زر تسجيل الخروج (login.html)
---------------------------------------------------------- */
.account-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.account-avatar{
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  margin-bottom:6px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-size:34px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
}
.account-name{ font-size:22px; font-weight:800; color:var(--brand); }
.account-email{ font-size:14px; color:var(--muted); direction:ltr; }

.account-plan{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:16px 0 4px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--brand-tint);
}
.account-plan small{ color:var(--muted); font-size:13px;   font-family: "Almarai", sans-serif; }
.account-plan strong{ color:var(--brand); font-size:18px;   font-family: "Almarai", sans-serif;}
.account-plans-link{ color:var(--brand); font-size:14px; font-weight:700; text-decoration:underline;   font-family: "Almarai", sans-serif;}

.logout-btn{
  width:100%;
  margin-top:10px;
  border:1.5px solid var(--brand);
  background:#fff;
  color:var(--brand);
  transition:.2s ease;
}
.logout-btn:hover{ background:var(--brand); color:#fff; }


/* ----------------------------------------------------------
   10.10 خلفية كل الصفحات
   - الجوال والآيباد الطولي: زي ما هي
   - اللاب والآيباد بالعرض: الصورة تملأ الشاشة كاملة وثابتة ورا المربعات، بنسبتها الأصلية بدون مط
---------------------------------------------------------- */
body::before{
  background:
    linear-gradient(rgba(255,255,255,var(--page-wash)), rgba(255,255,255,var(--page-wash))),
    var(--img-page, none) center / 100% auto no-repeat,
    #fff;
}

@media (orientation:landscape) and (min-width:900px){
  /* الخلفية ثابتة ورا المربعات (المربعات تتحرك فوقها لما تنزل بالصفحة)
     حجمها من المتغير --page-bg-size (في أول قسم 9) */
  /* المحتوى ياخذ الشاشة كاملة على الأقل، فالفوتر ينزل تحت الشاشة
     وما يغطي آخر الخريطة (تبان كاملة من فوق ومن تحت، والفوتر يبان لما تنزل) */
  body > main{
    min-height:calc(100vh - 68px);
    min-height:calc(100dvh - 68px);
  }

  /* الشاشة كلها بيضاء ورا الخريطة */
  body::before{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:#fff;
  }
  /* الخريطة: في المساحة اللي تحت الشريط العلوي بالضبط (68px = ارتفاع الشريط)
     عشان تبان كاملة من فوق */
  body::after{
    content:"";
    position:fixed;
    inset:68px 0 0 0;
    z-index:-1;
    pointer-events:none;
    background:
      linear-gradient(rgba(255,255,255,var(--page-wash)), rgba(255,255,255,var(--page-wash))),   /* التظليل الأبيض: قوته من --page-wash */
      var(--img-page-d, none) center / var(--page-bg-size) no-repeat;
  }
}

/* ----------------------------------------------------------
   10.11 تجاوب عام لكل الصفحات
---------------------------------------------------------- */
img{ max-width:100%; }
html, body{ overflow-x:clip; }

@media (max-width:600px){
  .top-sub{ font-size:14px; padding:0 8px;   font-family: "Almarai", sans-serif; }
  .plan-price b{ font-size:40px;   font-family: "Almarai", sans-serif; }
  .info-nav{ top:68px; gap:6px; }
  .info-nav a{ padding:6px 12px; font-size:13px;  font-family: "Almarai", sans-serif; }
  .auth-card{ padding:22px 16px 24px; }
}


/* ----------------------------------------------------------
   10.12 عقارات مميزة: "عرض الكل" يظهر باقي العقارات (بعد أول 5) تحت الموجودة بشكل متناسق
   صور العقارات الجديدة: لما تضيف عقار سادس حط data-img="p6" وحط اسم صورتك هنا
---------------------------------------------------------- */
:root{
  --img-p6:url("./images/p6.png");
  --img-p7:url("./images/p7.png");
  --img-p8:url("./images/p8.png");
  --img-p9:url("./images/p9.png");
  --img-p10:url("./images/p10.png");
}
.prop-img[data-img="p6"]{ --img:var(--img-p6); }
.prop-img[data-img="p7"]{ --img:var(--img-p7); }
.prop-img[data-img="p8"]{ --img:var(--img-p8); }
.prop-img[data-img="p9"]{ --img:var(--img-p9); }
.prop-img[data-img="p10"]{ --img:var(--img-p10); }

/* نفس عرض البطاقات في كل الصفوف، والصف الأخير الناقص يجي في المنتصف */
.props{
  --cols:5;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.prop{ flex:0 0 calc((100% - (var(--cols) - 1) * 14px) / var(--cols)); min-width:0; }
.prop-reveal{ animation:fadeUp .5s ease both; }

@media (max-width:1280px){ .props{ --cols:3; } }
@media (max-width:760px){ .props{ --cols:2; } }
@media (max-width:540px){ .props{ --cols:1; } }

.see-all .ic{ transition:transform .25s ease; }
.see-all.open .ic{ transform:rotate(90deg); }


/* ----------------------------------------------------------
   10.13 صفحة الباقات: اختيار مدة الاشتراك (شهري / 6 شهور / 12 شهر)
---------------------------------------------------------- */
.period-switch{
  display:inline-flex;
  gap:6px;
  margin-top:16px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
}
.period-btn{
  padding:10px 22px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--brand);
  font-size:15px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.period-btn:hover{ background:var(--brand-tint); }
.period-btn.active{ background:var(--brand); color:#fff; }

.plan-save{
  min-height:1.6em;
  margin-top:6px;
  font-size:12.5px;
    font-family: "Almarai", sans-serif;
  font-weight:700;
  color:var(--brand);
}

@media (max-width:400px){
  .period-btn{ padding:9px 14px; font-size:14px; }
}


/* ----------------------------------------------------------
   10.14 تسجيل الدخول: أيقونة العين لإظهار / إخفاء كلمة السر
---------------------------------------------------------- */
.pass-wrap{
  position:relative;
  display:block;
}
.pass-wrap input{
  width:100%;
  padding-left:48px;              /* مكان أيقونة العين (يسار الخانة) */
}
.pass-toggle{
  position:absolute;
  top:50%;
  left:6px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:20px;
    font-family: "Almarai", sans-serif;
  cursor:pointer;
}
.pass-toggle:hover,
.pass-toggle[aria-pressed="true"]{ color:var(--brand); background:var(--brand-tint); }


/* ----------------------------------------------------------
   10.15 آخر الصفحة: العمودين ينتهون مع بعض بدون فراغ
---------------------------------------------------------- */

/* الآيباد بالعرض واللاب الصغير (1025 إلى 1280):
   الجانب ينزل تحت المحتوى زي الآيباد الطولي (لأنه كان أقصر بكثير ويخلي فراغ يمين) */
@media (min-width:1025px) and (max-width:1280px){
  .layout{
    grid-template-columns:1fr;           /* عمود واحد */
    padding:20px 18px 32px;
  }
  .content{ order:1; }                    /* المحتوى أول */
  .sidebar{
    order:2;                              /* الجانب تحته */
    display:grid;
    grid-template-columns:repeat(2, 1fr); /* المربعات الصغيرة 2 جنب بعض */
  }
  .pkg-card,
  .premium{ grid-column:1 / -1; }         /* الباقات والباقة المميزة بعرض كامل */
}

/* الآيباد (طولي وعرضي): المربعات متساوية من الجنبين
   "لماذا سكايوب" و"خدمة العملاء" جنب بعض بنفس الطول، و"المساعدة والتواصل" بعرض كامل تحتهم */
@media (min-width:541px) and (max-width:1280px){
  .sidebar{ align-items:stretch; }
  .help{ grid-column:1 / -1; }
}

/* اللاب (أكبر من 1280): الجانب يمين يمتد لين آخر المحتوى
   الزيادة تروح لمربع "المساعدة والتواصل" وتتوزع بين عناصره بالتساوي */
@media (min-width:1281px){
  .layout{ align-items:stretch; }
  .help{
    flex:1 0 auto;                        /* ياخذ المساحة الباقية في الجانب */
    display:flex;
    flex-direction:column;
  }
  .help-list{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;         /* يوزع العناصر بالتساوي */
  }
}



/* ----------------------------------------------------------
   10.17 صفحة المعلومات (info.html): السياسات والشروط
   - العناوين برتقالي، والنص الفرعي أسود
   - كل فقرة لها id يفتحها رابط في الفوتر:
     #about عن سكايوب / #usage سياسة الاستخدام / #terms شروط التسجيل
     #privacy سياسة الخصوصية / #conditions الشروط والأحكام
---------------------------------------------------------- */
.info-body{
  margin:20px auto 60px;           /* مسافة من فوق بعد ما شلنا العنوان والشريط */
}
.info-sec{ scroll-margin-top:84px; }   /* لما يفتح الرابط ما يغطي الشريط العلوي العنوان */

.info-sec h2{ font-size:26px; }        /* عنوان كل قسم (برتقالي) */
.info-sec h3{                          /* عناوين المواد داخل القسم */
  margin:22px 0 8px;
  font-size:18px;
    font-family: "Almarai", sans-serif;
  font-weight:800;
  color:var(--brand);
}

/* النص الفرعي: أسود */
.info-sec p,
.info-sec li{
  color:#000;
  line-height:2;
}
.info-sec strong{ color:#000; font-weight:800; }

/* القوائم (النقاط والأرقام) */
.info-sec ul,
.info-sec ol{
  margin:4px 0 12px;
  padding-inline-start:22px;
}
.info-sec li{ margin-bottom:4px; }
.info-sec li::marker{ color:var(--brand); }   /* لون النقطة / الرقم */
.info-sec li ul{ margin-top:4px; }

/* الروابط (الموقع / البريد / الأرقام) */
.info-sec a{ color:var(--brand); font-weight:700; }
.info-sec a:hover{ text-decoration:underline; }

@media (max-width:600px){
  .info-sec h2{ font-size:22px; font-family: "Almarai", sans-serif; }
  .info-sec h3{ font-size:16.5px;  font-family: "Almarai", sans-serif; }
}

/* ----------------------------------------------------------
   10.19 تعديلات: الباقات / باقة الوسطاء / ارتفاع المربعات / تمليك وإيجار / الشريط العلوي
---------------------------------------------------------- */

/* (1) باقة نمو: كلمة "مجانية" مكان السعر */
.plan-free b{ font-size:40px; }

/* (2) صورة الخريطة في "باقة مميزة للوسطاء": أكبر في اللاب فقط */
@media (min-width:1281px){
  .premium{
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.25fr);   /* عمود الصورة أعرض */
    min-height:250px;
  }
  .premium-img{ padding:4px 0 4px 4px; }
  .premium-img img{ max-height:320px; }                         /* أقصى ارتفاع للصورة */
}

/* (3) ارتفاع مربعات "التسويق الرقمي" و"انضم" و"ماذا نقدم": أعلى شوي في كل الشاشات
       (الثلاثة بنفس الارتفاع، غيّر 260px لو تبغاها أعلى أو أقل) */
.latest-promo,
.join,
.offer{ min-height:260px; }

/* صور العقارات المميزة: أعلى شوي في الجوال فقط */
@media (max-width:760px){
  .prop-img{ height:250px; }
}

/* (4) تمليك وإيجار: نشيل العنوان اللي يطلع تحت الأزرار (مثل "شقق")، ويبقى الشريط المتحرك بس */
#optTitle{ display:none; }

/* (5) الشريط العلوي: الأقسام بنفس حجم خط أقسام الفوتر (13px) */
.nav-links a,
.nav-text{ font-size:13px; }


/* ----------------------------------------------------------
   10.20 تعديلات: اللوقو / باقة نمو / عقارات مميزة / خدمة العملاء / المساعدة / تمليك / الفوتر
---------------------------------------------------------- */

/* (1) ★ حجم اللوقو في الشريط العلوي: غيّر الأرقام هنا ★
       كبّر الرقم = لوقو أكبر / صغّر الرقم = لوقو أصغر (العرض يتغير تلقائيًا بنفس النسبة)
       ملاحظة: الشريط ارتفاعه 68px، فأكبر رقم مناسب تقريبًا 60px */
:root{
  --logo-right-h:27px;     /* ارتفاع لوقو اليمين - كمبيوتر وآيباد */
  --logo-left-h:27px;      /* ارتفاع لوقو اليسار - كمبيوتر وآيباد */
}
@media (max-width:760px){
  :root{
    --logo-right-h:15px;   /* ارتفاع لوقو اليمين - جوال */
    --logo-left-h:15px;    /* ارتفاع لوقو اليسار - جوال */
  }
}
.brand-right img{ height:var(--logo-right-h); }
.brand-left  img{ height:var(--logo-left-h); }

/* (2) باقة نمو: شارة برتقالية وعلامة صح بيضاء (نفس تصميم الباقات الثانية) */
.pkg-growth .pkg-icon{
  background:radial-gradient(circle at 35% 30%, #fff, var(--brand-tint) 70%);
  box-shadow:inset 0 0 0 1px #f5c9b9;
}
.pkg-growth .pkg-icon .ic{
  color:var(--brand);
  filter:drop-shadow(0 3px 5px rgba(220,97,62,.35));
}
.plan-growth .plan-icon{
  background:radial-gradient(circle at 35% 30%, #fff, var(--brand-tint) 70%);
  color:var(--brand);
}

/* (3) عقارات مميزة: العنوان أكبر + "تحت الإنشاء" + العقار ينضغط */
.featured .section-head h3{ font-size:clamp(24px, 2.2vw, 28px); }

.prop[data-link]{ cursor:pointer; }
.prop[data-link]:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }

.prop-status{                     /* نص "تحت الإنشاء" قبل السعر */
  display:inline-block;
  margin-top:8px;
  padding:2px 10px;
  border-radius:999px;
  background:var(--brand-tint);
  color:var(--brand);
  font-size:11.5px;
  font-weight:800;
}
.prop-status + .price{ margin-top:4px; }

/* (5) خدمة العملاء: السماعة يسار والرقم والكتابة جنبها */
.service{
  justify-content:flex-end;       /* السماعة والكتابة في جهة اليسار */
  gap:16px;
}
.service-text{ display:flex; flex-direction:column; }
.service-badge{                   /* دائرة السماعة */
  flex:none;
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--brand-tint) 72%);
  box-shadow:inset 0 0 0 1px #f5c9b9, 0 6px 14px rgba(220,97,62,.18);
}
.service-headset{
  width:40px;
  height:40px;
  color:var(--brand);
}

/* (6) المساعدة والتواصل: المستطيل اللي فيه العنوان برتقالي والكتابة بيضاء (القائمة تحته زي ما هي) */
.help h3{
  background:var(--brand);
  color:#fff;
  border-bottom:0;
}
.help h3 .ic{ color:#fff; }

/* (4) تمليك: الحي والمساحة + مرافق المشروع + مميزات المشروع داخل البيانات */
.unit-info{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
}
.unit-info li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  font-weight:700;
  color:#3b3632;
}
.unit-info .ic{ font-size:18px; color:var(--brand); }

.feat-block{ margin:0 0 16px; }

.feat-block h4{                   /* العنوان: مربع غامق + خط برتقالي تحته */
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding-bottom:6px;
  border-bottom:2px solid var(--brand);
  font-size:18px;
  font-weight:800;
  color:#222;
}
.feat-block h4::before{
  content:"";
  width:12px;
  height:12px;
  background:#3a3a3a;
}

.feat-list{                       /* البنود في عمودين (عمود واحد لو المساحة ضيقة) */
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px 18px;
  margin:0;
  padding:0;
  list-style:none;
}
.feat-list li{
  position:relative;
  padding-right:30px;
  font-size:14.5px;
  font-weight:700;
  line-height:1.5;
  color:#222;
}
.feat-list li::before{            /* المسدس البرتقالي */
  content:"";
  position:absolute;
  right:0;
  top:2px;
  width:17px;
  height:19px;
  background:var(--brand);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.feat-list li::after{             /* النقطة الغامقة جنب المسدس */
  content:"";
  position:absolute;
  right:19px;
  top:10px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#2b2b2b;
}

@media (max-width:600px){
  .feat-block h4{ font-size:16px; }
  .feat-list li{ font-size:13.5px; }
}

/* (7) الفوتر: بدون لوقو
   يمين: الجملة والحقوق / الوسط: الأقسام + أيقونات التواصل / يسار: رقم فال */
.ft{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 28px;
  padding:16px clamp(16px, 2.5vw, 40px);
}

.ft-brand{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ft-brand strong{ font-size:14px; font-weight:800; color:var(--bar-text); }
.ft-brand small{ font-size:11px; color:var(--bar-text); opacity:.85; }

.ft .footer-links{
  flex:1;
  justify-content:center;
  gap:8px 22px;
  font-size:13px;
}

.ft .socials{
  flex:none;
  align-items:center;
  gap:14px;
}
.socials a{ align-items:center; }
.socials a img ~ .ic{ display:none; }          /* لو صورتك موجودة نخفي الأيقونة الجاهزة */
.socials .ic{ width:22px; height:22px; color:var(--bar-text); }

.ft-fal{                          /* رقم فال: بدون أيقونة */
  flex:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ft-fal small{ font-size:11px; color:var(--bar-text); }
.ft-fal b{ font-size:16px; font-weight:800; color:var(--bar-text); direction:ltr; }

/* الآيباد واللاب الصغير: الأقسام صف فوق، وتحتها الجملة والتواصل ورقم فال */
@media (max-width:1200px){
  .ft{ flex-wrap:wrap; }
  .ft .footer-links{ order:-1; flex:1 1 100%; }
}

/* الجوال: كل شي تحت بعض في المنتصف، ومرتب بدون ارتفاع زايد */
@media (max-width:700px){
  .ft{
    flex-direction:column;
    gap:12px;
    padding:16px 14px 18px;
    text-align:center;
  }
  .ft .footer-links{
    display:grid;
    grid-template-columns:repeat(3, auto);
    justify-content:center;
    gap:8px 18px;
    font-size:12.5px;
  }
  .ft .socials{ justify-content:center; gap:16px; }
  .ft-fal{
    flex-direction:row;
    align-items:baseline;
    gap:6px;
  }
  .ft-brand{ align-items:center; order:5; }   /* الجملة والحقوق آخر شي */
  .ft-brand strong{ font-size:13px; }
}


/* ----------------------------------------------------------
   10.21 تمليك: الوصف أول شي + تفاصيل الوحدة (غرف وحمامات) بنفس تصميم المرافق بدون عنوان
---------------------------------------------------------- */
.details-body > p:first-of-type{ margin-bottom:12px; }   /* الوصف تحت العنوان */
.feat-list.feat-plain{ margin:0 0 16px; }                 /* قائمة الغرف والحمامات */


/* ----------------------------------------------------------
   10.22 تمليك: مساحات الشقة (المباني / السطح / الإجمالي) + علامات وخط أصغر
---------------------------------------------------------- */
.unit-stats{                      /* الخانات جنب بعض بعرض متساوي (2 أو 3 خانات) */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:12px;
  margin:0 0 16px;
}
.unit-stats div{ display:flex; flex-direction:column; gap:4px; }
.unit-stats span{                 /* العنوان: مربع برتقالي صغير + خط تحته */
  display:flex;
  align-items:center;
  gap:6px;
  padding-bottom:4px;
  border-bottom:1.5px solid var(--brand);
  font-size:14px;
  font-weight:800;
  color:#222;
}
.unit-stats span::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--brand);
}
.unit-stats b{                    /* الرقم الكبير */
  font-size:26px;
  font-weight:800;
  line-height:1.2;
  color:var(--brand);
}
.unit-stats small{ margin-inline-start:2px; font-size:13px; font-weight:700; }

/* العلامات البرتقالية (المسدسات) أصغر */
.feat-list li{ padding-right:24px; }
.feat-list li::before{
  top:5px;
  width:12px;
  height:13px;
}
.feat-list li::after{
  right:15px;
  top:9px;
  width:4px;
  height:4px;
}

/* الخط البرتقالي تحت "مرافق المشروع" و"مميزات المشروع" أصغر */
.feat-block h4{
  padding-bottom:4px;
  border-bottom-width:1.5px;
  font-size:17px;
}
.feat-block h4::before{ width:10px; height:10px; }

@media (max-width:600px){
  .unit-stats b{ font-size:21px; }
  .unit-stats span{ font-size:12.5px; }
}


/* ----------------------------------------------------------
   10.23 خط المراعي لكل عناصر الموقع (الأزرار، الخانات، القوائم، الأرقام)
   الخط ينحمّل من Google Fonts (الرابط في أعلى كل صفحة)، ولو ما فيه نت يطلع خط بديل
---------------------------------------------------------- */
html, body, button, input, select, textarea, option, optgroup{
  font-family:"Almarai", "Segoe UI", Tahoma, Arial, sans-serif;
}


/* ----------------------------------------------------------
   10.24 البحث: خانة الكتابة + حالة "جاهز" بالأخضر
---------------------------------------------------------- */
.field-text{                      /* خانة الكتابة: صف تحت الخيارات مع زر ابحث */
  flex:1 1 calc(100% - 220px);
  cursor:text;
}
.field-text::after{ display:none; }   /* بدون سهم */
.field-text input{
  flex:1;
  min-width:0;
  padding:8px 0;
  border:0;
  outline:none;
  background:transparent;
  color:#4a423d;
  font-size:15px;
}
.field-text input::placeholder{ color:#9a918b; }
.search{ flex-wrap:wrap; }

/* الشاشات اللي البحث فيها 3 أعمدة: الكتابة تاخذ عمودين والزر عمود */
@media (min-width:761px) and (max-width:1440px){
  .field-text{ grid-column:span 2; }
}
@media (max-width:760px){
  .field-text{ flex:1 1 100%; }
}

.prop-status.is-ready{            /* "جاهز" */
  background:#e3f4ea;
  color:#2e9b6a;
}

/* الشاشات الكبيرة (أكبر من 1440): الخيارات الخمسة صف، وتحتها خانة الكتابة وزر ابحث */
@media (min-width:1441px){
  .search{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:8px;
  }
  .field,
  .field + .field{
    border:1px solid var(--line);
    border-radius:10px;
  }
  .field-text{ grid-column:span 4; }
  .btn-search{ width:100%; }
}










/* ===== 10.18 زر تثبيت التطبيق (يطلع تحت الشاشة) ===== */
.install-app{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:999; display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:14px; padding:10px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  width:max-content; max-width:calc(100% - 32px);
  font-family:'Almarai',sans-serif;
}
.install-app img{ width:38px; height:38px; border-radius:9px; border:1px solid #eee; }
.install-app span{ font-weight:700; font-size:14px; color:#222; }
.install-app .install-yes{
  background:#dc613e; color:#fff; border:0; border-radius:9px;
  padding:8px 16px; font:700 14px 'Almarai',sans-serif; cursor:pointer;
}
.install-app .install-no{
  background:none; border:0; font-size:22px; line-height:1; color:#888; cursor:pointer; padding:0 4px;
}