/* Mohaseb Global Header — design system aligned with site home */
@font-face{
  font-family:"Noto Kufi Arabic";
  src:url("../fonts/noto-kufi-arabic/NotoKufiArabic-Variable.ttf") format("truetype");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

.mgh-header{
  --mgh-blue:#2f80ed;
  --mgh-blue-d:#1c6dd0;
  --mgh-teal:#20c997;
  --mgh-ink:#0f2744;
  --mgh-muted:#5b6b7c;
  --mgh-line:#e6eef6;
  --mgh-bg:#fff;
  --mgh-radius:14px;
  --mgh-shadow:0 10px 28px rgba(15,39,68,.1);
  --mgh-shadow-sm:0 4px 14px rgba(15,39,68,.06);
  --mgh-h:58px;
  --mgh-h-m:54px;
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  color:var(--mgh-ink);
  direction:rtl;
  position:relative;
  z-index:10050;
}
.mgh-header.is-sticky{
  position:sticky;
  top:0;
}
.mgh-header *,
.mgh-header *::before,
.mgh-header *::after{box-sizing:border-box}
.mgh-header a{text-decoration:none;color:inherit}
.mgh-header button{
  font:inherit;
  background:none;
  border:0;
  cursor:pointer;
  color:inherit;
  padding:0;
}
.mgh-header a:focus-visible,
.mgh-header button:focus-visible{
  outline:3px solid rgba(47,128,237,.45);
  outline-offset:2px;
}

.mgh-bar{
  background:var(--mgh-bg);
  border-bottom:1px solid rgba(15,39,68,.06);
  min-height:var(--mgh-h);
  transition:min-height .2s ease, box-shadow .2s ease;
}
.mgh-header.is-sticky.is-scrolled .mgh-bar{
  min-height:54px;
  box-shadow:var(--mgh-shadow-sm);
}
.mgh-bar-inner{
  max-width:1480px;
  margin:0 auto;
  padding:0 14px;
  min-height:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:visible;
}
.mgh-start{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 0;
  /* no overflow:hidden here — would clip dropdowns */
}
.mgh-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.mgh-logo img{
  height:34px;
  width:auto;
  max-width:140px;
  object-fit:contain;
}
.mgh-logo .mgh-logo-desktop{display:block}
.mgh-logo .mgh-logo-mobile{display:none}

/* Desktop nav — one row; end section stays clear via spacing + compact items */
.mgh-nav{
  min-width:0;
  flex:1 1 auto;
}
.mgh-nav-list{
  list-style:none;
  margin:0;
  padding:0 4px 0 0;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:0;
}
.mgh-nav-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:40px;
  padding:4px 6px;
  border-radius:10px;
  color:var(--mgh-ink);
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
/* Icons take horizontal space — show only on wide screens */
.mgh-nav-list > .mgh-nav-item > .mgh-nav-link > .mgh-nav-ico{
  display:none;
}
.mgh-nav-item .mgh-caret svg{
  width:12px;
  height:12px;
}
@media (min-width:1280px){
  .mgh-nav-link{font-size:13px;padding:7px 8px}
}
@media (min-width:1440px){
  .mgh-nav-link{font-size:13.5px;padding:8px 9px;gap:5px}
  .mgh-nav-list > .mgh-nav-item > .mgh-nav-link > .mgh-nav-ico{
    display:inline-flex;
  }
  .mgh-nav-ico svg{width:15px;height:15px}
}
@media (min-width:1600px){
  .mgh-nav-link{font-size:14px;padding:8px 11px;gap:6px}
  .mgh-nav-ico svg{width:16px;height:16px}
}
/* Free space on typical laptops: "أحدث الوظائف" already inside وظائف dropdown */
@media (max-width:1399px){
  .mgh-nav-list > .mgh-nav-item[data-mgh-id="latest_jobs"]{
    display:none;
  }
}
.mgh-nav-link:hover{
  color:var(--mgh-blue);
  background:rgba(47,128,237,.06);
}
.mgh-nav-item.is-active > .mgh-nav-link,
.mgh-nav-item.is-active > a.mgh-nav-link{
  color:var(--mgh-blue);
  font-weight:700;
}
.mgh-nav-ico{
  display:inline-flex;
  color:var(--mgh-blue);
  opacity:.9;
}
.mgh-nav-item.is-active .mgh-nav-ico{opacity:1}
.mgh-caret{
  display:inline-flex;
  opacity:.55;
  transition:transform .15s ease;
}
.mgh-nav-item.is-open > .mgh-dd-toggle .mgh-caret,
.mgh-country.is-open > .mgh-country-btn .mgh-caret,
.mgh-user-menu.is-open > .mgh-user-btn .mgh-caret{
  transform:rotate(180deg);
}

/* Dropdowns */
.mgh-nav-item,
.mgh-country,
.mgh-user-menu{position:relative}
.mgh-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:280px;
  max-width:min(360px, calc(100vw - 24px));
  background:#fff;
  border:1px solid var(--mgh-line);
  border-radius:var(--mgh-radius);
  box-shadow:var(--mgh-shadow);
  padding:8px;
  z-index:10060;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.mgh-dropdown.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mgh-dropdown[hidden]{display:none!important}
.mgh-dd-primary{
  display:block;
  padding:10px 12px;
  font-size:13px;
  font-weight:600;
  color:var(--mgh-blue);
  border-bottom:1px solid var(--mgh-line);
  margin-bottom:4px;
}
.mgh-dd-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  transition:background .15s ease;
}
.mgh-dd-item:hover{background:rgba(47,128,237,.06)}
.mgh-dd-ico{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(47,128,237,.08);
  color:var(--mgh-blue);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mgh-dd-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mgh-dd-title{font-size:14px;font-weight:600;color:var(--mgh-ink)}
.mgh-dd-desc{font-size:12px;color:var(--mgh-muted);line-height:1.45}

/* End / auth / country */
.mgh-end{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  position:relative;
  z-index:5;
  background:var(--mgh-bg);
  padding-inline-start:6px;
  margin-inline-start:2px;
  isolation:isolate;
}
.mgh-country-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:4px 10px;
  border:1px solid var(--mgh-line);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--mgh-shadow-sm);
  font-size:12.5px;
  font-weight:600;
  max-width:150px;
}
.mgh-country-btn .mgh-country-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:72px;
}
.mgh-country-btn .flag{
  width:22px !important;
  height:16px !important;
  min-width:22px;
  border-radius:2px;
  flex-shrink:0;
  display:inline-block;
  overflow:hidden;
  background-size:cover;
}
.mgh-country-dd{
  min-width:300px;
  left:0;
  right:auto;
}
.mgh-country-current{
  margin:4px 8px 10px;
  font-size:13px;
  color:var(--mgh-muted);
}
.mgh-country-current strong{color:var(--mgh-ink)}
.mgh-country-search{padding:0 8px 8px}
.mgh-country-filter{
  width:100%;
  min-height:42px;
  border:1px solid var(--mgh-line);
  border-radius:12px;
  padding:8px 12px;
  font:inherit;
  font-size:13px;
}
.mgh-country-list{
  max-height:260px;
  overflow:auto;
  padding:0 4px;
}
.mgh-country-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 10px;
  border-radius:10px;
  font-size:14px;
}
.mgh-country-item:hover,
.mgh-country-item.is-selected{background:rgba(47,128,237,.07)}
.mgh-country-item .flag{width:22px;height:16px;flex-shrink:0}
.mgh-country-name{flex:1;min-width:0}
.mgh-country-check{color:var(--mgh-blue);font-weight:700}
.mgh-country-auto{
  display:block;
  text-align:center;
  padding:12px 8px 6px;
  font-size:13px;
  font-weight:600;
  color:var(--mgh-blue);
  border-top:1px solid var(--mgh-line);
  margin-top:6px;
}
.mgh-country-item.is-hidden{display:none}

.mgh-auth{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mgh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:5px 12px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@media (min-width:1440px){
  .mgh-btn{font-size:13px;padding:6px 14px;min-height:38px}
  .mgh-country-btn{font-size:13px;min-height:38px;padding:4px 12px}
  .mgh-country-btn .mgh-country-label{max-width:90px}
}
.mgh-header a.mgh-btn-primary,
.mgh-btn-primary{
  background:var(--mgh-blue);
  color:#fff;
  box-shadow:0 6px 16px rgba(47,128,237,.28);
}
.mgh-header a.mgh-btn-primary:hover,
.mgh-btn-primary:hover{
  background:var(--mgh-blue-d);
  color:#fff;
}
.mgh-header a.mgh-btn-primary span,
.mgh-header a.mgh-btn-primary svg{
  color:#fff;
  stroke:currentColor;
}
.mgh-btn-outline{
  background:#fff;
  color:var(--mgh-blue);
  border:1.5px solid rgba(47,128,237,.45);
}
.mgh-btn-outline:hover{background:rgba(47,128,237,.06)}
.mgh-btn-block{width:100%}

.mgh-user-area{display:flex;align-items:center;gap:6px}
.mgh-icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  color:var(--mgh-ink);
}
.mgh-icon-btn:hover{background:rgba(47,128,237,.06);color:var(--mgh-blue)}
.mgh-badge{
  position:absolute;
  top:6px;
  left:6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e53935;
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.mgh-badge-inline{
  display:inline-flex;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e53935;
  color:#fff;
  font-size:10px;
  font-weight:700;
  align-items:center;
  justify-content:center;
  margin-inline-start:6px;
}
.mgh-user-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:4px 10px 4px 4px;
  border-radius:999px;
  border:1px solid var(--mgh-line);
  background:#fff;
}
.mgh-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.mgh-user-name{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
}
.mgh-user-dd{
  min-width:240px;
  left:0;
  right:auto;
  padding:6px;
}
.mgh-user-dd a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 12px;
  border-radius:10px;
  font-size:14px;
}
.mgh-user-dd a:hover{background:rgba(47,128,237,.06)}
.mgh-user-dd .mgh-logout{color:#c62828}

.mgh-mobile-tools{display:none;align-items:center;gap:6px}
.mgh-burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  color:var(--mgh-ink);
}

/* Drawer */
.mgh-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,39,68,.45);
  z-index:10070;
}
.mgh-drawer{
  position:fixed;
  inset:0;
  z-index:10080;
  pointer-events:none;
}
.mgh-drawer.is-open{pointer-events:auto}
.mgh-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  width:var(--mgh-drawer-w,88%);
  max-width:420px;
  height:100%;
  background:#fff;
  box-shadow:var(--mgh-shadow);
  display:flex;
  flex-direction:column;
  transform:translateX(105%);
  transition:transform .22s ease;
  overflow:hidden;
}
.mgh-drawer.is-open .mgh-drawer-panel{transform:translateX(0)}
.mgh-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--mgh-line);
  min-height:62px;
}
.mgh-drawer-close{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
}
.mgh-drawer-body{
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 14px 24px;
}
.mgh-m-auth{display:grid;gap:10px;margin-bottom:16px}
.mgh-m-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(47,128,237,.06);
  margin-bottom:10px;
}
.mgh-m-user .mgh-avatar{width:48px;height:48px}
.mgh-m-user-name{font-weight:700;font-size:15px}
.mgh-m-user a{font-size:13px;color:var(--mgh-blue);font-weight:600}
.mgh-m-user-links{
  display:grid;
  gap:2px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--mgh-line);
}
.mgh-m-user-links a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 10px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
}
.mgh-m-user-links a:hover{background:rgba(47,128,237,.06)}
.mgh-m-nav{display:grid;gap:2px}
.mgh-m-link{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:10px 12px;
  border-radius:14px;
  font-size:15px;
  font-weight:600;
  text-align:right;
}
.mgh-m-link:hover,
.mgh-m-item.is-active > .mgh-m-link{background:rgba(47,128,237,.07);color:var(--mgh-blue)}
.mgh-m-ico{
  width:36px;height:36px;border-radius:10px;
  background:rgba(47,128,237,.08);color:var(--mgh-blue);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mgh-m-label{flex:1;min-width:0}
.mgh-m-chevron{opacity:.5;display:inline-flex;transition:transform .15s ease}
.mgh-m-item.is-open > .mgh-acc-toggle .mgh-m-chevron{transform:rotate(180deg)}
.mgh-m-sub{
  padding:4px 8px 10px 12px;
  display:grid;
  gap:2px;
}
.mgh-m-sub a{
  display:block;
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--mgh-muted);
}
.mgh-m-sub a:hover{background:rgba(47,128,237,.06);color:var(--mgh-blue)}
.mgh-m-country-trigger{
  width:100%;
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 14px;
  border:1px solid var(--mgh-line);
  border-radius:14px;
  font-weight:600;
  background:#f8fbff;
}
.mgh-m-country-trigger .flag{width:22px;height:16px}
.mgh-m-country-trigger .mgh-m-chevron{margin-inline-start:auto}
.mgh-country-screen-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.mgh-back-btn{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  transform:scaleX(-1);
}
.mgh-drawer-view[hidden]{display:none!important}

/* Hide classic mmenu chrome when new header is active */
body.mgh-active .mmenu-trigger,
body.mgh-active nav.mmenu-init,
body.mgh-active #header-container:not(.mgh-legacy){
  /* legacy container replaced */
}
body.mgh-active{
  overflow-x:hidden;
}
/* Compensate old theme transparent header padding when new header used */
body.mgh-active #wrapper,
body.mgh-active #wrapper.wrapper-with-transparent-header{
  padding-top:0!important;
}
body.mgh-active .mgh-header{
  margin:0;
  padding:0;
}
body.mgh-active .mgh-bar{
  padding-top:0;
  padding-bottom:0;
}

@media (max-width:1024px){
  .mgh-nav,
  .mgh-auth,
  .mgh-user-area,
  .mgh-country-desktop{display:none!important}
  .mgh-mobile-tools{display:flex}
  .mgh-logo .mgh-logo-desktop{display:none}
  .mgh-logo .mgh-logo-mobile{display:block;height:36px}
  .mgh-bar{min-height:var(--mgh-h-m)}
  .mgh-header.is-sticky.is-scrolled .mgh-bar{min-height:50px}
  .mgh-bar-inner{padding:0 12px}
  .mgh-logo .mgh-logo-mobile{height:30px}
  .mgh-country-btn-mobile{
    padding:6px 10px;
    max-width:42vw;
  }
  .mgh-country-btn-mobile .mgh-country-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:18vw;
  }
}

@media (max-width:360px){
  .mgh-country-btn-mobile .mgh-country-label{display:none}
}

/* Prevent classic header CSS fighting new header height */
body.mgh-active #wrapper > .clearfix:first-of-type{height:0;margin:0;padding:0}