/* ═══════════════════════════════════════════════════════════
   هوية المراد 2026 — طبقة فوق التصميم الأصلي (css/style.css)
   ───────────────────────────────────────────────────────────
   كل تعديلات الهوية الجديدة هنا فقط، وstyle.css لم يُمسّ. تُحمَّل بعد style.css
   في كل صفحات الموقع (ما عدا صفحات الهبوط الإعلانية).

   للرجوع للتصميم القديم بالكامل: احذف سطر
     <link rel="stylesheet" href="css/brand.css?v=…">
   من الصفحات والقوالب (index, projects, contact, privacy, project, model,
   tools/templates/*) ثم npm run build. ولرجوع جزء واحد احذف قسمه من هنا.
   النسخة الكاملة قبل التغيير: commit 9ea9ca5 على main (أكتوبر 2026).

   الألوان من دليل الهوية: الأخضر المرادي #094749، المحايد #F5F2EC، الذهبي المرادي #A8906D.
   المحدِّد body:not(.old-look) يعطي القواعد قوة تكفي لتغلب style.css بلا !important.
   ═══════════════════════════════════════════════════════════ */

body:not(.old-look) {
  /* الأخضر المرادي ودرجاته */
  --teal-950: #062F31;
  --teal-900: #073B3D;
  --teal-800: #094749;
  --teal-600: #1D5C5A;
  --teal-400: #6F928D;
  --teal-200: #CDBB9F;   /* اللمسة الفاتحة على الأخضر: ذهبي فاتح بدل السماوي */
  --teal-100: #E8E1D3;
  /* الذهبي المرادي: مساحات وخطوط على الأخضر. نص الذهبي على المحايد ممنوع في الدليل،
     فما كان «نصاً ذهبياً على فاتح» (gold-ink) صار أخضر */
  --gold: #A8906D;
  --gold-deep: #8E7754;
  --gold-ink: #74603F;  /* الأسعار والروابط على الفاتح: ذهبي مرادي غامق يُقرأ (اختيار العميل) */
  --cream: #F5F2EC;
  /* المحايد */
  --bg: #F5F2EC;
  --bg-band: #EDE7DB;
  --card: #FBFAF6;
  --card-border: #E1D9C9;
  --face-bg: #E8E1D3;
  --text: #102424;
  --text-soft: #33413F;
  --text-mute: #5D6967;
  --heading: #094749;
  --on-dark-mute: rgba(245, 242, 236, .7);
  --on-dark-soft: rgba(245, 242, 236, .86);
  background-color: var(--bg);
  background-image: none;
  color: var(--text-soft);
}
html:has(body) { background-color: #062F31; }
body:not(.old-look) ::selection { background: var(--gold); color: #fff; }
body:not(.old-look) :focus-visible { outline-color: var(--gold); }

/* ── الزوايا المشطوفة: رجعت بطلب العميل (أكتوبر 2026) — كانت مستقيمة في هذه الطبقة.
   الشطف نفسه من style.css؛ لإلغائه مجدداً: clip-path: none على المكوّنات (انظر docs/CHANGELOG.md) ── */
body:not(.old-look) .model-row::before { background: var(--card-border); }

/* ── عناوين الصفحات: أكبر بحوالي الثلث (اختيار العميل) ── */
body:not(.old-look) .page-open h1, body:not(.old-look) .projects-head h1,
body:not(.old-look) .contact-page .page-open h1, body:not(.old-look) .privacy-page .page-open h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.15; text-wrap: balance;
}
body:not(.old-look) .property-info h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.2; text-wrap: balance; }

/* ── الشريط العلوي: الأخضر المرادي صلباً ── */
body:not(.old-look) .site-header, body:not(.old-look) .site-header.scrolled {
  background: var(--teal-800);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
body:not(.old-look) .brand img { height: 70px; }
body:not(.old-look) .nav-links a { color: rgba(245, 242, 236, .86); font-weight: 500; }
body:not(.old-look) .nav-links a:hover { color: #fff; }
body:not(.old-look) .nav-links a[aria-current="page"] { color: var(--teal-200); font-weight: 500; }
body:not(.old-look) .nav-call { color: rgba(245, 242, 236, .92); font-weight: 500; }
body:not(.old-look) .mobile-menu { background: var(--teal-800); border-top: 0; }
body:not(.old-look) .mobile-menu a { font-family: var(--font-display); font-size: 1.4rem; color: #F5F2EC; }
body:not(.old-look) .mobile-menu a[aria-current="page"] { color: var(--teal-200); }

/* ── الأزرار: كلها باللون السابق، البرتقالي الذهبي ونص أخضر غامق (طلب العميل، أكتوبر 2026) ── */
body:not(.old-look) .btn {
  background: #E6A03A; color: #062F31;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  border: 0;
  padding: .9rem 1.6rem;
  transition: background-color .25s ease;
}
body:not(.old-look) .btn:hover { background: #F0B255; }
body:not(.old-look) .btn:active { background: #BA812D; }
body:not(.old-look) .line-action { color: var(--teal-800); }
body:not(.old-look) .line-action:hover { color: var(--teal-600); }
/* على الأخضر (قسم «مرادك يبدأ بمحادثة» وأمثاله): رقم الاتصال فاتح واضح */
body:not(.old-look) .call-band .line-action, body:not(.old-look) .on-dark .line-action { color: #F5F2EC; }
body:not(.old-look) .call-band .line-action:hover, body:not(.old-look) .on-dark .line-action:hover { color: var(--teal-200); }
body:not(.old-look) .arrow-cta { color: var(--teal-800); }
body:not(.old-look) .arrow-cta:hover { color: var(--teal-600); }
body:not(.old-look) .on-dark .arrow-cta, body:not(.old-look) .proj-card .pcard-go { color: var(--teal-200); }

/* ── بطاقات المشاريع: الصورة كاملة، والتظليل الأخضر من الأسفل فقط ── */
body:not(.old-look) .proj-card { border: 0; }
/* المشاريع المكتملة بلا صور: نمط مارك الشعار بالذهبي الخافت على الأخضر (طلب العميل)
   البلاطة assets/pattern-mark.png: مارك مرتين بإزاحة نصف بلاطة (120×160)؛
   التوسيط يضع منتصف الصندوق بين صفّين فلا يقع مارك خلف اسم المشروع */
body:not(.old-look) .proj-card.no-img,
body:not(.old-look) .gallery-main .placeholder {
  background: var(--teal-800) url("../assets/pattern-mark.png") center / 120px 160px repeat;
}
/* بلاطة «كل المشاريع» في الرئيسية: العنوان في المنتصف، والنمط يتلاشى نحوه */
body:not(.old-look) .proj-card.proj-more { background: var(--teal-800); justify-content: center; align-items: center; text-align: center; gap: 0; }
body:not(.old-look) .proj-card.proj-more::after {
  display: block; content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/pattern-mark.png") center / 120px 160px repeat;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 45%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .75) 80%, #000 100%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 45%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .75) 80%, #000 100%);
}
body:not(.old-look) .proj-more .pm-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.2; color: #F5F2EC; }
body:not(.old-look) .proj-more .pm-sub { margin-top: .7rem; font-size: 1rem; color: var(--on-dark-soft); }
body:not(.old-look) .proj-more .pcard-go { margin-top: 1.6rem; justify-content: center; }
body:not(.old-look) .gallery-main .placeholder { color: #F5F2EC !important; text-shadow: 0 2px 14px rgba(6, 47, 49, .9); }
body:not(.old-look) .proj-card:not(.no-img)::after {
  background: linear-gradient(to top, rgba(9, 71, 73, .96) 0%, rgba(9, 71, 73, .82) 16%, rgba(9, 71, 73, .45) 32%, rgba(9, 71, 73, 0) 54%);
}
body:not(.old-look) .proj-status { background: var(--teal-800); color: #F5F2EC; font-weight: 500; }
body:not(.old-look) .proj-status.current { background: var(--teal-800); color: var(--teal-200); }
body:not(.old-look) .pcard-avail { background: transparent; color: var(--teal-200); padding: 0; border: 0; }

/* ── التصفية ── */
body:not(.old-look) .filters { background: transparent; border: 0; padding-inline: 0; border-bottom: 1px solid var(--card-border); border-radius: 0; }
body:not(.old-look) .filters select { background-color: var(--card); border-color: var(--card-border); }
body:not(.old-look) .filters select:hover { border-color: var(--teal-800); }
body:not(.old-look) .seg button { background: transparent; border: 1px solid var(--card-border); color: var(--text-soft); font-weight: 500; }
body:not(.old-look) .seg button:hover { border-color: var(--teal-800); background: transparent; }
body:not(.old-look) .seg button[aria-pressed="true"] { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }
body:not(.old-look) .results-count b { color: var(--teal-800); }

/* ── صفحة المشروع ── */
body:not(.old-look) .property-page { padding-top: 7.5rem; }
body:not(.old-look) .gallery-main { background: var(--teal-800); }
body:not(.old-look) .gallery-thumbs button { border-color: transparent; }
body:not(.old-look) .gallery-thumbs button.active { border-color: var(--teal-800); }
body:not(.old-look) .gallery-nav { background: rgba(9, 71, 73, .78); color: #fff; }
body:not(.old-look) .gallery-nav:hover { background: var(--teal-800); }
body:not(.old-look) .status-badge.selling, body:not(.old-look) .status-badge.building, body:not(.old-look) .status-badge.done {
  background: var(--teal-800); color: #F5F2EC; font-weight: 500;
}
body:not(.old-look) .progress-track { background: var(--bg-band); }
body:not(.old-look) .progress-fill { background: var(--teal-800); }
body:not(.old-look) .plabel b { color: var(--teal-800); }
body:not(.old-look) .feature-list svg { color: var(--gold); }
body:not(.old-look) .proj-act { background: transparent; border: 1px solid var(--card-border); color: var(--teal-800); }
body:not(.old-look) .proj-act:hover { border-color: var(--teal-800); }
body:not(.old-look) .chev::before { color: var(--gold); }

/* لوحة التوفّر: نفس ألوان الحالات (اختيار العميل)، بلا شطف */
body:not(.old-look) .ab-cell, body:not(.old-look) .xcell { border-radius: 0; }

/* صفوف النماذج: سطح هادئ بلا إطار ثقيل */
body:not(.old-look) .model-row { background: var(--card); border-color: var(--card-border); }
body:not(.old-look) .model-row:target { box-shadow: inset 0 0 0 2px var(--gold); }
body:not(.old-look) .mr-face { background: var(--face-bg); color: var(--teal-800); }
body:not(.old-look) .mr-units li { border-radius: 0; }
body:not(.old-look) .mr-desc li::before, body:not(.old-look) .mp-notes li::before { background: var(--gold); }

/* قسم الموقع */
body:not(.old-look) .loc-access { background: var(--card); border-color: var(--card-border); }

/* المشاريع المُسلّمة */
body:not(.old-look) .mix-table th, body:not(.old-look) .mix-table td { border-color: var(--card-border); }
/* بقع خضراء بين المحايد (طلب العميل): رأس الجدول، وصندوق «هذا المشروع مكتمل» بنمط الشعار */
body:not(.old-look) .mix-table thead th { background: var(--teal-800); color: #F5F2EC; }
body:not(.old-look) .completed-note { position: relative; isolation: isolate; background: var(--teal-800); border: 0; }
/* النمط على الطرفين فقط، ويتلاشى قبل النص */
body:not(.old-look) .completed-note::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/pattern-mark.png") center / 120px 160px repeat;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .6) 14%, transparent 30%, transparent 70%, rgba(0, 0, 0, .6) 86%, #000 100%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .6) 14%, transparent 30%, transparent 70%, rgba(0, 0, 0, .6) 86%, #000 100%);
}
body:not(.old-look) .completed-note h3 { color: #F5F2EC; }
body:not(.old-look) .completed-note p { color: var(--on-dark-soft); }
body:not(.old-look) .unit-mix + .completed-note a, body:not(.old-look) .completed-note a { color: var(--teal-200); }

/* صفحة التحديثات */
body:not(.old-look) .update-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 0; box-shadow: none; }
body:not(.old-look) .update-card .status-badge { background: var(--teal-800); color: #F5F2EC; }
/* «قيد الإنشاء»: أخضر بنص فاتح عريض (كان ذهبياً باهتاً على الأخضر، لا يُقرأ) */
body:not(.old-look) .proj-card .proj-status.building, body:not(.old-look) .status-badge.building,
body:not(.old-look) .update-card .status-badge.building { background: var(--teal-800); color: #F5F2EC; font-weight: 700; }
/* «بدأ البيع» باللون السابق في كل مكان (طلب العميل): بطاقات المشاريع، صفحة المشروع، التحديثات */
body:not(.old-look) .proj-status.selling, body:not(.old-look) .proj-card .proj-status.selling, body:not(.old-look) .status-badge.selling,
body:not(.old-look) .update-card .status-badge.selling { background: #E6A03A; color: #062F31; font-weight: 700; }
body:not(.old-look) .uc-wa { border-radius: 0; }

/* صفحة الوحدات */
body:not(.old-look) .uf-row { background: var(--card); border-color: var(--card-border); }
body:not(.old-look) .uf-row:hover { background: #fff; border-color: var(--teal-800); }
body:not(.old-look) .uf-go { color: var(--gold); }

/* صفحة النموذج */
body:not(.old-look) .mp-fig a { background: #fff; }
body:not(.old-look) .model-links a { border-radius: 0; background: var(--card); border-color: var(--card-border); }

/* عارض الصور */
body:not(.old-look) .lightbox { background: rgba(6, 47, 49, .94); }
body:not(.old-look) .lb-close, body:not(.old-look) .lb-nav { border-radius: 0; background: rgba(245, 242, 236, .08); border-color: rgba(205, 187, 159, .4); color: #fff; }
body:not(.old-look) .lb-close:hover, body:not(.old-look) .lb-nav:hover { background: var(--gold); border-color: var(--gold); color: #062F31; }

/* زر واتساب العائم: نفس لون الأزرار، البرتقالي الذهبي السابق (طلب العميل) */
body:not(.old-look) .wa-float { background: #E6A03A; color: #062F31; box-shadow: 0 6px 14px -8px rgba(6, 47, 49, .5); }
body:not(.old-look) .wa-float:hover { background: #F0B255; }

/* ── التذييل: الأخضر الداكن، وخط القمم رجع بالأخضر والذهبي المرادي (طلب العميل) ── */
body:not(.old-look) .site-footer { background: #062F31; padding-top: 3.6rem; }
body:not(.old-look) .site-footer .peaks { opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18' viewBox='0 0 72 18'%3E%3Cpath d='M4 14 L18 4 L32 14' fill='none' stroke='%236F928D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40 14 L54 4 L68 14' fill='none' stroke='%23A8906D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* الشعار المائي في منتصف التذييل (طلب العميل): نفس مكانه القديم، أهدأ قليلاً على الأخضر الداكن */
body:not(.old-look) .site-footer::before { opacity: .14; background-size: min(220px, 28%); }
body:not(.old-look) .footer-brand img { height: 56px; }
body:not(.old-look) .footer-brand .slogan { color: var(--teal-200); font-size: 1.15rem; }
body:not(.old-look) .footer-col h3 { color: #F5F2EC; }
body:not(.old-look) .footer-col a:hover, body:not(.old-look) .footer-social a:hover { color: var(--teal-200); }
body:not(.old-look) .footer-contact svg { color: var(--gold); }
body:not(.old-look) .footer-floor { border-top: 0; color: rgba(245, 242, 236, .55); }
body:not(.old-look) .footer-floor .fal-lic, body:not(.old-look) .footer-floor .privacy-link { color: rgba(245, 242, 236, .55); }
body:not(.old-look) .footer-floor .fal-lic .num { color: rgba(245, 242, 236, .8); }

/* ── صفحة التواصل ── */
body:not(.old-look) .contact-card { background: var(--card); border-color: var(--card-border); border-radius: 0; }
body:not(.old-look) .contact-side { background: var(--teal-800); }
body:not(.old-look) .hours tr + tr td { border-top-color: rgba(205, 187, 159, .2); }


/* الرئيسية: الشريط شفاف فوق الصورة، ويصير أخضر بعد التمرير */
body:not(.old-look).home .site-header:not(.scrolled) { background: transparent; }

/* ── بانر الرئيسية: الصور الأربع المتبدّلة كما هي، بألوانها الطبيعية (بلا الطبقة الخضراء الكثيفة)، والنص الحالي كما هو ── */
body:not(.old-look) .hero { background: var(--teal-800); }
body:not(.old-look) .hero-photo, body:not(.old-look) .hero-media { opacity: 1; }
body:not(.old-look) .hero::after {
  background:
    linear-gradient(to left, rgba(6, 47, 49, .72) 0%, rgba(6, 47, 49, .5) 30%, rgba(6, 47, 49, .12) 56%, rgba(6, 47, 49, 0) 70%),
    linear-gradient(to top, rgba(9, 71, 73, .9) 0%, rgba(9, 71, 73, .35) 26%, rgba(9, 71, 73, 0) 48%),
    linear-gradient(to bottom, rgba(6, 47, 49, .5), rgba(6, 47, 49, 0) 18%);
}
body:not(.old-look) .hero-line { background: var(--gold); }
body:not(.old-look) .hero-tag { color: rgba(245, 242, 236, .9); }
/* النص فوق المبنى: ظل خفيف بلون الأخضر يكفي للقراءة بلا تغميق الصورة كلها */
body:not(.old-look) .hero h1, body:not(.old-look) .hero-tag, body:not(.old-look) .hero-sub { text-shadow: 0 1px 14px rgba(6, 47, 49, .85), 0 0 2px rgba(6, 47, 49, .5); }
@media (max-width: 640px) {
  body:not(.old-look) .hero::after {
    background: linear-gradient(to top, rgba(9, 71, 73, .94) 0%, rgba(9, 71, 73, .6) 34%, rgba(6, 47, 49, .5) 58%, rgba(6, 47, 49, .3) 100%);
  }
}

/* ── بقايا البرتقالي القديم #E6A03A: أيقونات الخدمات (لون مضمّن في الوسم) والشيفرون الصغير ── */
body:not(.old-look) .service svg { stroke: var(--gold); }
body:not(.old-look) .chev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M2 10 L9 3 L16 10' fill='none' stroke='%23A8906D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── صفحة المشاريع: الحالية أولاً، ثم «مشاريع سلّمناها» صفاً مستقلاً متساوي البطاقات ── */
body:not(.old-look) .done-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
body:not(.old-look) .done-group[hidden] { display: none; }
body:not(.old-look) .done-head { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--heading); margin-bottom: 1.2rem; }
/* شارة «مكتمل» واحدة الشكل على كل البطاقات المُسلّمة (بصورة أو بلا صورة) */
body:not(.old-look) .proj-grid-done .proj-card .proj-status {
  position: absolute; top: .9rem; inset-inline-end: 1rem; z-index: 2;
  background: rgba(6, 47, 49, .72); color: #F5F2EC; font-weight: 700; padding: .3rem .7rem;
}
body:not(.old-look) .proj-grid-done .proj-card { min-height: 230px; justify-content: flex-end; }
body:not(.old-look) .proj-grid-done .proj-card { padding-top: 3.4rem; }
body:not(.old-look) .proj-grid-done .pcard-go { white-space: nowrap; font-size: .92rem; }

/* ── صفحة المشروع: سطر موجز للنماذج بدل القائمة المكررة، والضمانات شبكة بعرض الصفحة ── */
body:not(.old-look) .models-jump {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  margin-top: 1.6rem; padding: .95rem 1.1rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text-soft);
  transition: border-color .25s ease;
}
body:not(.old-look) .models-jump:hover { border-color: var(--teal-800); }
body:not(.old-look) .models-jump .mj-main { font-weight: 500; }
body:not(.old-look) .models-jump .mj-main b { color: var(--gold-ink); }
body:not(.old-look) .models-jump .mj-go { display: inline-flex; align-items: center; gap: .35rem; color: var(--teal-800); font-family: var(--font-display); font-weight: 700; }
body:not(.old-look) .models-jump .mj-go svg { width: 17px; height: 17px; transition: transform .3s ease; }
body:not(.old-look) .models-jump:hover .mj-go svg { transform: translateY(3px); }
body:not(.old-look) .warranty-grid {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--wc, 4), 1fr); gap: 1px;
  background: var(--card-border); border: 1px solid var(--card-border);
}
body:not(.old-look) .warranty-grid li { background: var(--card); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
body:not(.old-look) .warranty-grid .wg-v { font-family: var(--font-display); font-size: 1.45rem; color: var(--teal-800); line-height: 1.2; }
body:not(.old-look) .warranty-grid .wg-t { color: var(--text-mute); font-size: .95rem; }
@media (max-width: 700px) { body:not(.old-look) .warranty-grid { grid-template-columns: repeat(2, 1fr); } }
body:not(.old-look) #models { scroll-margin-top: 6.5rem; }

/* ── صفحة النموذج: المعلومات وزر الاستفسار تبقى بجانب المخططات أثناء التمرير (الكمبيوتر) ── */
/* فقط على الشاشات الطويلة كفاية ليبقى زر «استفسر» ظاهراً داخل الشاشة */
@media (min-width: 861px) and (min-height: 860px) {
  body:not(.old-look) .mp-info { position: sticky; top: 6.5rem; }
}

/* ── زر اللغة: كلمة نصية بجانب رقم الاتصال (English / العربية)، بلا إطار، يتغير لونها فقط ── */
.nav-bar > nav { margin-inline: auto; }
.lang-switch {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .2rem;
  font-size: .95rem; font-weight: 500; color: rgba(245, 242, 236, .92); text-decoration: none;
  transition: color .2s ease;
}
.lang-switch:hover { color: var(--teal-200); }
.lang-switch[lang="en"] { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif; letter-spacing: .01em; }
.lang-switch[lang="ar"] { font-family: var(--font-display); font-size: 1.02rem; }
@media (max-width: 640px) {
  .lang-switch { margin-inline-start: auto; margin-inline-end: -.6rem; padding-inline: .6rem; }
}