/* ===================================================================
   X0T — الهيدر والقائمة المنسدلة على طراز قالب Finovate
   - تبويبات على شكل كبسولة بخلفية خفيفة عند المرور/النشاط.
   - القائمة المنسدلة الطويلة تصير لوحة عريضة بعمودين، وفي أسفلها صفّ
     «كل الخدمات» بلون الهوية يمتدّ على العمودين.
   - زرّان دائريان على الطرف: بحث ولوحة شاملة.
   =================================================================== */

/* ===================================================================
   1) تبويبات الهيدر — كبسولة بدل الخطّ السفلي
   =================================================================== */
body.x0t-mg .nav > li > a{
  border-radius:999px;
  padding:11px 17px;
  font-size:1.05rem;
  font-weight:600;
  transition:background .22s var(--mg-ease),color .22s var(--mg-ease);
}
/* الخطّ السفلي كان بديل الكبسولة — يُطفأ */
body.x0t-mg .nav > li > a::after{display:none !important}

body.x0t-mg .nav > li > a:hover,
body.x0t-mg .nav > li.menu-item-has-children:hover > a,
body.x0t-mg .nav > li.menu-item-has-children:focus-within > a,
body.x0t-mg .nav > li.open > a,
body.x0t-mg .nav > li.current-menu-item > a,
body.x0t-mg .nav > li.current-menu-parent > a,
body.x0t-mg .nav > li.current_page_item > a{
  background:var(--mg-hover);
  color:var(--mg-text);
}
/* العنصر الحالي يحمل نقطة صغيرة بلون الهوية بدل التسطير */
body.x0t-mg .nav > li.current-menu-item > a,
body.x0t-mg .nav > li.current_page_item > a{color:var(--mg-soft)}

/* ===================================================================
   2) اللوحة المنسدلة
   =================================================================== */
body.x0t-mg .nav .sub-menu{
  background:var(--mg-panel);
  border:1px solid var(--mg-hair);
  border-radius:18px;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.55),0 10px 26px -12px rgba(0,0,0,.35);
  padding:10px;
  /* لا overflow هنا: الثيم يضع جسراً غير مرئي فوق اللوحة
     (‎.sub-menu::before‎ عند ‎-10px‎) ليصل إليها المؤشّر عبر الفجوة،
     وأي قصّ يبتلع الجسر فتصير القائمة عصيّة على الوصول. */
}

/* لوحة عريضة بعمودين — للقوائم الطويلة وحدها، فلا تتأثّر قائمة الوكلاء
   القصيرة ولا أي قائمة عادية.
   يوجد مساران للشرط: كلاس ‎.mgh-2col‎ تضيفه الجافاسكربت بعدّ العناصر فعلياً
   (المسار المعتمد)، و‎:has()‎ كبديل يعمل بلا جافاسكربت. الاعتماد على
   ‎:has()‎ وحدها كان هشّاً. */
body.x0t-mg .nav .menu-item-has-children:hover > .sub-menu.mgh-2col,
body.x0t-mg .nav .menu-item-has-children:focus-within > .sub-menu.mgh-2col,
body.x0t-mg .nav li.open > .sub-menu.mgh-2col,
body.x0t-mg .nav .menu-item-has-children:hover > .sub-menu:has(.x0t-svc-item:nth-child(5)),
body.x0t-mg .nav .menu-item-has-children:focus-within > .sub-menu:has(.x0t-svc-item:nth-child(5)),
body.x0t-mg .nav li.open > .sub-menu:has(.x0t-svc-item:nth-child(5)){
  display:grid;
  grid-template-columns:repeat(2,minmax(216px,1fr));
  gap:1px 4px;
  width:max-content;
  max-width:min(660px,94vw);
  padding:12px;
}

body.x0t-mg .nav .sub-menu a{
  border-radius:12px;
  padding:12px 14px;
  white-space:normal;      /* عناوين الخدمات العربية طويلة */
  line-height:1.5;
  align-items:center;
  font-weight:600;
  font-size:.95rem;
}
body.x0t-mg .nav .sub-menu a:hover{
  background:var(--mg-hover) !important;
  color:var(--mg-text);
}

/* بلا أيقونات في اللوحة — نصّ فقط كما في المرجع.
   تبقى الأيقونات في قائمة الموبايل حيث تساعد على التمييز. */
body.x0t-mg .nav .sub-menu .svc-mi-ic{display:none !important}
body.x0t-mg .nav .sub-menu .svc-mi-tx{flex:1 1 auto}

/* ===================================================================
   المرور على عنصر القائمة — خلفية الهوية وسهم في دائرة، كما في المرجع.
   السهم مرسوم بقناع SVG لا بصورة، ليأخذ لون النصّ الحالي تلقائياً.
   صفّ «كل الخدمات» مستثنى لأن له شارته الخاصّة أصلاً.
   =================================================================== */
body.x0t-mg .nav .sub-menu li:not(.x0t-svc-all) > a{
  position:relative;
  padding-inline-end:48px;
}
body.x0t-mg .nav .sub-menu li:not(.x0t-svc-all) > a:hover{
  background:var(--mg-grad) !important;
  color:#fff !important;
}

/* الدائرة */
body.x0t-mg .nav .sub-menu li:not(.x0t-svc-all) > a::after{
  content:"";position:absolute;top:50%;inset-inline-end:11px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.22);
  transform:translateY(-50%) scale(.55);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--mg-ease),transform .3s var(--mg-ease);
}
/* السهم داخلها */
body.x0t-mg .nav .sub-menu li:not(.x0t-svc-all) > a::before{
  content:"";position:absolute;top:50%;inset-inline-end:11px;
  width:28px;height:28px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17 7 7M17 7H7V17'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17 7 7M17 7H7V17'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  transform:translateY(-50%) scale(.55);
  opacity:0;pointer-events:none;z-index:1;
  transition:opacity .25s var(--mg-ease),transform .3s var(--mg-ease);
}
body.x0t-mg .nav .sub-menu li:not(.x0t-svc-all) > a:hover::after,
body.x0t-mg .nav .sub-menu li:not(.x0t-svc-all) > a:hover::before{
  opacity:1;transform:translateY(-50%) scale(1);
}

/* صفّ «كل الخدمات» — يمتدّ على العمودين بلون الهوية، كما في المرجع */
body.x0t-mg .nav .sub-menu .x0t-svc-all{grid-column:1 / -1;margin-top:6px}
body.x0t-mg .nav .sub-menu .x0t-svc-all > a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--mg-grad) !important;
  color:#fff !important;
  border-radius:13px;
  padding:14px 16px;
  font-weight:800;
}
body.x0t-mg .nav .sub-menu .x0t-svc-all > a:hover{filter:brightness(1.08)}
body.x0t-mg .nav .sub-menu .x0t-svc-all .sa-go{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.20);
}
body.x0t-mg .nav .sub-menu .x0t-svc-all .sa-go svg{width:15px;height:15px}

/* ---------- خدمات فرعية (تسويق إلكتروني): تنسدل لأسفل من بندها الأب فقط ---------- */
body.x0t-mg .nav .sub-menu .x0t-svc-item.menu-item-has-children{position:relative}
body.x0t-mg .nav .sub-menu .x0t-svc-item.menu-item-has-children > .sub-menu{
  grid-template-columns:none !important;
  min-width:210px;width:max-content;max-width:260px;gap:0;padding:8px;
  top:100%;inset-inline-start:0;inset-inline-end:auto;margin-top:6px;z-index:60;
}
body.x0t-mg .nav .sub-menu .x0t-svc-item.menu-item-has-children:hover > .sub-menu,
body.x0t-mg .nav .sub-menu .x0t-svc-item.menu-item-has-children:focus-within > .sub-menu,
body.x0t-mg .nav .sub-menu .x0t-svc-item.menu-item-has-children.open > .sub-menu{
  display:flex !important;flex-direction:column;
}
body.x0t-mg .nav .sub-menu .x0t-svc-sub > a{
  padding:10px 12px;font-size:.85rem;font-weight:500;white-space:normal;
}
body.x0t-mg .nav .sub-menu .x0t-svc-sub > a::after,
body.x0t-mg .nav .sub-menu .x0t-svc-sub > a::before{display:none !important}

/* ===================================================================
   3) الزرّان الدائريان
   =================================================================== */
body.x0t-mg .hdr-icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--mg-hair);
  background:var(--mg-hover);
  color:var(--mg-text);
  cursor:pointer;padding:0;
  transition:background .25s var(--mg-ease),color .25s var(--mg-ease),
             border-color .25s var(--mg-ease),transform .25s var(--mg-ease);
}
body.x0t-mg .hdr-icon svg{width:19px;height:19px}
body.x0t-mg .hdr-icon:hover{transform:translateY(-2px)}
body.x0t-mg .hdr-search:hover{border-color:var(--mg-hair2)}

/* زرّ اللوحة الشاملة يحمل لون الهوية كاملاً — نظير الزرّ الداكن في المرجع */
body.x0t-mg .hdr-apps{
  background:var(--mg-grad);
  border-color:transparent;
  color:#fff;
}
body.x0t-mg .hdr-apps:hover{box-shadow:0 12px 30px -10px rgba(var(--mg-a-rgb),.65)}

/* زرّ البرجر يحلّ محلّ القائمة عند 720px في الثيم الأصلي، لكن بين
   720 و860 يكون الشريط مزدحماً أصلاً (وثمّة تجاوز أفقي موروث عند ~768)،
   فنُخفي الزرّين تحت 860 فقط ونُبقيهما فوقها. */
/* الثيم الأصلي يبدّل إلى زرّ البرجر عند 720px فقط، لكن الشريط لا يتّسع
   للقائمة الكاملة قبل ذلك بكثير: عند 765px يزحف الهيدر أفقياً 295px مع
   إطفاء الطبقة (‎?magnet=0‎) و61px معها — وهو الباگ الموروث المعروف.
   نبدّل إلى البرجر عند 900px فيختفي الزحف في هذا النطاق كلّه. */
@media (max-width:900px){
  body.x0t-mg .site-header .nav{display:none}
  body.x0t-mg .site-header .menu-toggle{display:flex}
  body.x0t-mg .hdr-icon{display:none}
}

/* الزرّان يضيفان ~100px إلى الشريط، وهو ما كان يزحف أفقياً بين 860 و1100.
   نضغط التبويبات والزرّ الأساسي في هذا المدى بدل إخفاء أي شيء. */
@media (max-width:1100px){
  body.x0t-mg .nav > li > a{padding:10px 12px;font-size:.97rem}
  body.x0t-mg .nav{gap:0}
  body.x0t-mg .hdr-icon{width:38px;height:38px}
  body.x0t-mg .hdr-icon svg{width:17px;height:17px}
  body.x0t-mg .header-actions{gap:8px}
  body.x0t-mg .header-actions .btn-cta{padding-inline:15px;font-size:.9rem}
}
@media (max-width:960px){
  body.x0t-mg .nav > li > a{padding:9px 9px;font-size:.9rem}
  body.x0t-mg .header-actions .btn-cta{padding-inline:13px;font-size:.86rem}
}

/* ===================================================================
   4) لوحة البحث
   =================================================================== */
body.x0t-mg .hdr-search-panel{
  position:fixed;inset:0;z-index:9990;
  display:grid;place-items:start center;
  padding-top:min(22vh,220px);
  background:rgba(var(--mg-scrim-rgb),.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--mg-ease);
}
body.x0t-mg .hdr-search-panel.open{opacity:1;pointer-events:auto}

body.x0t-mg .hdr-search-panel form{
  display:flex;align-items:center;gap:10px;
  width:min(720px,92vw);
  background:var(--mg-panel);
  border:1px solid var(--mg-hair2);
  border-radius:999px;
  padding:8px 8px 8px 8px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(-14px);
  transition:transform .35s var(--mg-ease);
}
body.x0t-mg .hdr-search-panel.open form{transform:none}

body.x0t-mg .hdr-search-panel input[type="search"]{
  flex:1 1 auto;min-width:0;
  background:transparent;border:0;outline:0;
  color:var(--mg-text);
  font:inherit;font-size:clamp(15px,1.5vw,19px);
  padding:12px 18px;
}
body.x0t-mg .hdr-search-panel input[type="search"]::placeholder{color:var(--mg-ph)}
body.x0t-mg .hdr-search-panel button[type="submit"]{
  flex:none;border:0;cursor:pointer;
  border-radius:999px;padding:13px 26px;
  background:var(--mg-grad);color:#fff;font:inherit;font-weight:800;
}
body.x0t-mg .hdr-search-close{
  position:absolute;top:clamp(16px,3vw,32px);inset-inline-end:clamp(16px,3vw,32px);
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--mg-panel);border:1px solid var(--mg-hair2);color:var(--mg-text);
}
body.x0t-mg .hdr-search-close svg{width:20px;height:20px}

/* ===================================================================
   5) الوضع الفاتح — اللوحات تحتاج ظلاً أخفّ
   =================================================================== */
html[data-theme="light"] body.x0t-mg .nav .sub-menu{
  box-shadow:0 30px 70px -34px rgba(16,19,34,.30),0 8px 22px -12px rgba(16,19,34,.14);
}
html[data-theme="light"] body.x0t-mg .hdr-search-panel form{
  box-shadow:0 34px 80px -34px rgba(16,19,34,.35);
}

/* ===================================================================
   6) اللوحة الجانبية — بيانات التواصل (نظير لوحة Contact us في المرجع)
   تنزلق من الجهة التي يقف عندها زرّها: inset-inline-end وهو اليسار في RTL.
   =================================================================== */
body.x0t-mg .hdr-side{
  position:fixed;inset:0;z-index:9992;
  visibility:hidden;pointer-events:none;
}
body.x0t-mg .hdr-side.open{visibility:visible;pointer-events:auto}

body.x0t-mg .hdr-side__scrim{
  position:absolute;inset:0;
  background:rgba(var(--mg-scrim-rgb),.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s var(--mg-ease);
}
body.x0t-mg .hdr-side.open .hdr-side__scrim{opacity:1}

body.x0t-mg .hdr-side__panel{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:min(430px,92vw);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;
  padding:clamp(26px,3.4vw,44px);
  background:var(--mg-panel);
  border-inline-start:1px solid var(--mg-hair);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,.7);
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .48s var(--mg-ease);
}
/* RTL: اللوحة على اليسار، فالإخفاء يكون بالانزياح إلى اليسار */
html[dir="rtl"] body.x0t-mg .hdr-side__panel{transform:translateX(-100%)}
body.x0t-mg .hdr-side.open .hdr-side__panel{transform:none}

body.x0t-mg .hdr-side__close{
  position:absolute;top:clamp(18px,2.4vw,26px);inset-inline-start:clamp(18px,2.4vw,26px);
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--mg-hover);border:1px solid var(--mg-hair);color:var(--mg-text);
  transition:background .25s var(--mg-ease),transform .25s var(--mg-ease);
}
body.x0t-mg .hdr-side__close:hover{background:var(--mg-grad);border-color:transparent;color:#fff;transform:rotate(90deg)}
body.x0t-mg .hdr-side__close svg{width:19px;height:19px}

/* الشعار المرفوع هنا صورة فوتوغرافية لا علامة شفافة، فتُعرض ملء الشكل
   العضوي كما في المرجع بدل وضعها فوق تدرّج.
   ملاحظة: display:grid مع place-items:center كان يقلّص الصورة إلى 25px —
   نفس فخّ صندوق الهيرو. هنا الشكل كتلة والصورة تملؤها بـobject-fit. */
body.x0t-mg .hdr-side__art{
  width:clamp(132px,38%,182px);aspect-ratio:1;
  margin:clamp(34px,5vw,54px) 0 clamp(22px,3vw,34px);
  display:block;overflow:hidden;
  border-radius:28% 72% 30% 70% / 62% 30% 70% 38%;
  background:var(--mg-grad);
}
body.x0t-mg .hdr-side__art img{
  width:100% !important;height:100% !important;max-width:none !important;
  object-fit:cover;display:block;
}

body.x0t-mg .hdr-side__title{
  font-size:clamp(1.5rem,2.4vw,2rem);font-weight:900;letter-spacing:-.02em;
  margin:0 0 clamp(16px,2.2vw,24px);color:var(--mg-text);
}

body.x0t-mg .hdr-side__list{
  list-style:none;margin:0 0 clamp(22px,3vw,32px);padding:0;
  display:flex;flex-direction:column;gap:14px;width:100%;
}
body.x0t-mg .hdr-side__list li{color:var(--mg-text-2);font-size:15.5px;line-height:1.6}
body.x0t-mg .hdr-side__list a{color:var(--mg-text-2);text-decoration:none;transition:color .2s var(--mg-ease)}
body.x0t-mg .hdr-side__list a:hover{color:var(--mg-soft)}

body.x0t-mg .hdr-side__cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--mg-grad);color:#fff;text-decoration:none;
  border-radius:999px;padding:6px 6px 6px 22px;
  font-weight:800;font-size:15px;
  transition:filter .25s var(--mg-ease),transform .25s var(--mg-ease);
}
body.x0t-mg .hdr-side__cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
body.x0t-mg .hdr-side__cta .sa-go{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
body.x0t-mg .hdr-side__cta .sa-go svg{width:16px;height:16px}

body.x0t-mg .hdr-side__wa{
  margin-top:14px;color:var(--mg-muted);font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--mg-hair2);padding-bottom:2px;
}
body.x0t-mg .hdr-side__wa:hover{color:var(--mg-soft)}

body.x0t-mg .hdr-side__social{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:clamp(24px,3vw,36px);
}

@media (prefers-reduced-motion: reduce){
  body.x0t-mg .hdr-side__panel{transition:none}
  body.x0t-mg .hdr-side__scrim{transition:none}
}


/* ===================================================================
   7) أسهم السلايدر — كانت معكوسة الاتجاه.
   في RTL يتقدّم المحتوى نحو اليسار: فزرّ «التالي» مكانه اليسار وسهمه
   يشير يساراً، و«السابق» مكانه اليمين وسهمه يشير يميناً. الثيم كان
   يضع prev على اليسار وnext على اليمين — أي العكس تماماً.
   =================================================================== */
body.x0t-mg .hero-nav.prev{
  inset-inline-end:auto;
  inset-inline-start:clamp(10px,1.6vw,26px);
}
body.x0t-mg .hero-nav.next{
  inset-inline-start:auto;
  inset-inline-end:clamp(10px,1.6vw,26px);
}


/* زرّ الدعوة يتبع القائمة في الحجم حتى لا يبدو الشريط متفاوتاً */
body.x0t-mg .header-actions .btn-cta{font-size:.97rem}

/* ===================================================================
   5) الموبايل — توازن الشريط
   الشعار كان 64px والزرّ 143px بنصّ مقصوص («احجز عرضاً توض…»)، فالشريط
   كان يقرأ كزرّ ضخم بجانب علامة صغيرة. نكبّر الشعار ونضغط الزرّ حتى
   يظهر نصّه كاملاً.
   =================================================================== */
@media (max-width:640px){
  body.x0t-mg .site-header .brand img.mark{width:76px;height:76px}
  /* الشعار كبر، فنقلّل حشو الشريط حتى يفضل ارتفاعه أقصر من الأصل (88px) */
  body.x0t-mg .site-header .header-inner{padding-block:4px}
  body.x0t-mg .header-actions{gap:7px}
  body.x0t-mg .header-actions .btn-cta{font-size:.72rem;padding:7px 11px;border-radius:999px}
  body.x0t-mg .site-header .mode-toggle,
  body.x0t-mg .site-header .menu-toggle{width:36px;height:36px}
}