/* ============================================================
   مجمع سيماي الطبي — CMAI  |  هوية الموقع
   المصدر: ملف "اللوجو والهوية والخطوط"
   الأزرق  #2b66aa  = اللون الأساسي
   الأخضر  #b0c551  = accent (تباينه على الأبيض 1.9:1 فمينفعش نص)
   ------------------------------------------------------------
   مكان اللصق: محرر الثيم ← تخصيص متقدم ← تخصيص باستخدام CSS
   (يستبدل محتوى المحرر الحالي بالكامل)
   ============================================================ */


/* ---------- 1) الخطوط ----------
   Frutiger LT Arabic خط تجاري، فلازم ملفات woff2 مرخّصة.
   ارفع الملفات من لوحة تحكم سلة ← الملفات، وبدّل الروابط تحت،
   وبعدين شيل التعليق عن البلوك ده كله.

@font-face{
  font-family:'Frutiger LT Arabic';
  src:url('PUT_YOUR_URL/FrutigerLTArabic-Roman.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Frutiger LT Arabic';
  src:url('PUT_YOUR_URL/FrutigerLTArabic-65Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Frutiger LT Arabic';
  src:url('PUT_YOUR_URL/FrutigerLTArabic-75Black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Frutiger LT';
  src:url('PUT_YOUR_URL/FrutigerLT-Roman.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Frutiger LT';
  src:url('PUT_YOUR_URL/FrutigerLT-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --font-main:'Frutiger LT Arabic','Frutiger LT',system-ui,'Segoe UI',sans-serif;
}
body, .store-footer, input, select, textarea, button{
  font-family:var(--font-main) !important;
}
*/


/* ---------- 2) توكنات الهوية ---------- */
:root{
  --brand-primary:       #2b66aa;   /* أزرق الهوية */
  --brand-primary-dark:  #1f4c81;   /* hover / pressed */
  --brand-primary-light: #589bdd;
  --brand-primary-pale:  #b5d4f4;
  --brand-primary-tint:  #eaf3fb;

  --brand-green:         #b0c551;   /* أخضر الهوية — accent */
  --brand-green-light:   #cddd72;
  --brand-green-pale:    #e3eab9;
  --brand-green-deep:    #67781f;   /* أخضر مقروء لو احتجته نص/زر */

  --brand-ink:           #0f2f4d;   /* كحلي مشتق من الأزرق */
  --brand-text:          #1f3245;
  --brand-text-light:    #526d89;
  --brand-border:        #dbe6f0;
  --brand-bg:            #f4f8fc;
  --brand-accent:        #0f2f4d;

  /* ربط ألوان الثيم الأساسية */
  --color-primary:         var(--brand-primary);
  --color-primary-dark:    var(--brand-primary-dark);
  --color-primary-light:   var(--brand-primary-light);
  --color-primary-reverse: var(--brand-primary-tint);
}


/* ---------- 3) كارت المنتج (كان موجود) ---------- */
.s-product-card-fit-height .s-product-card-image{
  height:11rem;
  max-height:20rem;
}


/* ---------- 4) قسم العيادات ---------- */
.cmcl{
  padding:40px 0;
  background:var(--brand-green-pale);

  --cmcl-primary:   var(--brand-primary);
  --cmcl-vec:       var(--brand-primary);
  --cmcl-btn:       var(--brand-primary-dark);
  --cmcl-deep:      var(--brand-ink);
  --cmcl-sky:       var(--brand-primary-light);
  --cmcl-tint:      var(--brand-primary-tint);
  --cmcl-ink:       var(--brand-ink);
  --cmcl-muted:     var(--brand-text-light);
  --cmcl-accent:    var(--brand-green);
  --cmcl-accent-lt: var(--brand-green-light);
}


/* ---------- 5) قسم ليه تختارنا ---------- */
.cmwy{
  --cmwy-primary:   var(--brand-primary);
  --cmwy-btn:       var(--brand-primary-dark);
  --cmwy-deep:      var(--brand-ink);
  --cmwy-art:       var(--brand-primary-light);
  --cmwy-bg:        var(--brand-bg);
  --cmwy-hover:     var(--brand-primary-tint);
  --cmwy-tint:      var(--brand-primary-tint);
  --cmwy-ink:       var(--brand-ink);
  --cmwy-line:      var(--brand-border);
  --cmwy-line-hv:   var(--brand-primary-pale);
  --cmwy-muted:     var(--brand-text-light);
  --cmwy-num:       var(--brand-green-light);
  --cmwy-accent:    var(--brand-green);
}


/* ---------- 6) كروت فريق الأطباء ----------
   القسم جوه Shadow DOM، بس الـ custom properties بتورَّث،
   فالتوكنات فوق بتوصله لوحدها. دول اللي متثبّتين جواه: */
.s-block--bundle-doctors-team > *{
  --cmdr-accent:    var(--brand-green);
  --cmdr-accent-lt: var(--brand-green-light);
}


/* ---------- 7) الهيرو والبانرات ---------- */
.mj-hero{
  /* البانرات الستة كلها 1440×480 (نسبة 3:1).
     الصندوق على الموبايل كان 3/2.2 مع object-fit:cover
     يعني 55% من عرض البانر كان بيتقصّ من الجنبين والعنوان بيختفي.
     خلّيناه بنفس نسبة الصورة → صفر قصّ. */
  --mj-ratio-sm: 1440 / 480;

  --mj-accent:var(--brand-primary);
  background:var(--brand-ink);
}
.mj-hero__scrim{
  background:linear-gradient(to top, rgba(15,47,77,.40) 0%, rgba(15,47,77,0) 24%);
}
.mj-band{
  background:var(--brand-bg);
}


/* ---------- 8) الفوتر ---------- */
.footer-is-light .store-footer .store-footer__inner{
  background:var(--brand-bg);
}


/* ---------- 9) نقط الهيرو على الموبايل ----------
   الهيرو بقى أقصر، فالنقط اتصغّرت عشان ما تغطّيش البانر. */
@media (max-width:768px){
  .mj-hero__dots{ inset-block-end:4px; gap:6px; }
  .mj-hero__dot{ padding-block:5px; }
  .mj-hero__bar{ height:3px; }
}