/* Mekkawe navigation - Stars Driving School style/layout, Mekkawe branding.
   Fully scoped to avoid legacy home/inner CSS collisions. */
nav.mk-stars-nav {
  --mk-nav-green: #72b626;
  --mk-nav-light: #c7f294;
  --mk-nav-dark: #183923;
  --mk-nav-panel: #142c1b;
  --mk-nav-tile: #25462c;
  --mk-nav-height: 76px;
  display: flex !important; flex-direction: column !important;
  direction: rtl !important;
  align-items: stretch !important;
  position: fixed !important; inset: 0 0 auto !important;
  z-index: 1050 !important; width: 100% !important;
  max-width: 100vw !important; height: auto !important; min-height: 76px;
  padding: 0 !important; margin: 0 !important;
  background: #fff !important;
  border: 0 !important; border-bottom: 3px solid var(--mk-nav-green) !important;
  border-radius: 0 !important;
  color: #232c25 !important; text-align: right !important;
  box-shadow: 0 5px 17px rgba(8, 24, 11,.18) !important;
  overflow: visible !important;
  font-family: 'Cairo',Arial,sans-serif !important;
}
nav.mk-stars-nav *, nav.mk-stars-nav *::before, nav.mk-stars-nav *::after { box-sizing: border-box; }
nav.mk-stars-nav .mk-stars-nav-inner {
  position: relative !important; display: flex !important; flex-wrap: nowrap !important;
  align-items: center !important; direction: rtl !important;
  gap: 13px; width: 100% !important; max-width: none !important;
  min-height: var(--mk-nav-height); padding: 0 18px !important; margin: 0 auto !important;
  background: transparent !important;
}
nav.mk-stars-nav .mk-stars-nav-inner::before, nav.mk-stars-nav .mk-stars-nav-inner::after {content:none !important;display:none !important;}
nav.mk-stars-nav .mk-stars-logo {
  display:flex !important; align-items:center !important; justify-content:center !important;
  float:none !important; position:relative !important; flex:0 0 auto !important;
  order: 0; margin:0 !important; padding: 0 !important; border:0 !important;
  width: 140px !important; max-width:140px !important; height: 59px !important;
  background: transparent !important; border-radius: 0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
nav.mk-stars-nav .mk-stars-logo::before {display:none !important;}
nav.mk-stars-nav .mk-stars-logo img {
  display:block !important; position:static !important;
  width: 132px !important; height: 50px !important; max-height:none !important; max-width:none !important;
  object-fit:contain !important; opacity:1 !important; filter:none !important; margin:0 !important;
}
nav.mk-stars-nav .mk-stars-toggle, nav.mk-stars-nav .mk-stars-space, nav.mk-stars-nav .mk-stars-menu-heading, nav.mk-stars-nav .mk-stars-backdrop {display:none;}
nav.mk-stars-nav .mk-stars-menu {
  display:flex !important; flex:1 1 auto !important; min-width:0 !important;
  visibility:visible !important; position:static !important; height:auto !important;
  padding:0 !important; margin:0 !important; overflow:visible !important;
  transform:none !important; background:transparent !important;
}
nav.mk-stars-nav ul.navbar-nav {
  display:flex !important; flex:1 1 auto; flex-direction:row !important; flex-wrap:nowrap !important;
  justify-content:flex-start !important; align-items:center !important;
  gap: 3px; width:100%; padding:0 !important; margin:0 !important;
  list-style:none !important;
}
nav.mk-stars-nav ul.navbar-nav > li.nav-item {
  display:block !important; flex:0 0 auto; float:none !important;
  position:relative !important; min-width:0 !important; width:auto !important;
  padding:0 !important; margin:0 !important; height:auto !important;
}
nav.mk-stars-nav ul.navbar-nav > li > .nav-link {
  appearance:none !important; -webkit-appearance:none !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:7px !important; width:auto !important; height:auto !important; min-height:45px !important;
  margin:0 !important; padding: 8px 9px !important;
  color:#263226 !important; background:transparent !important;
  font: 800 16px/1.55 'Cairo',Arial,sans-serif !important;
  text-decoration:none !important; letter-spacing:0 !important; white-space:nowrap !important;
  border:0 !important; border-radius:9px !important; cursor:pointer !important;
  transform:none !important; text-align:right !important; text-transform:none !important;
}
nav.mk-stars-nav ul.navbar-nav > li > .nav-link:hover,
nav.mk-stars-nav ul.navbar-nav > li > .nav-link:focus-visible,
nav.mk-stars-nav ul.navbar-nav > li.mk-stars-dropdown-open > .nav-link {
  background:rgba(114,182,38,.09) !important; color:#56891d !important;
}
nav.mk-stars-nav .mk-stars-icon { flex:0 0 19px; width:19px !important; text-align:center; font-size:16px !important; color:#72b626 !important; }
nav.mk-stars-nav ul.navbar-nav > li > .nav-link::before {display:none !important;}
nav.mk-stars-nav .mk-stars-dropdown-trigger.dropdown-toggle::after {
  display:inline-block !important; content:'' !important;
  border-top: .28em solid currentColor !important; border-right:.28em solid transparent !important;
  border-bottom:0 !important; border-left:.28em solid transparent !important;
  vertical-align:middle !important; opacity:.9; margin:0 3px 0 0 !important;
}
nav.mk-stars-nav .mk-stars-submenu {
  display:none !important; position:absolute !important; top:calc(100% + 6px) !important;
  right:0 !important; left:auto !important;
  float:none !important; transform:none !important; inset-inline-start:auto !important;
  width:max-content !important; min-width:292px !important; max-width:min(410px,96vw) !important;
  max-height:min(68vh,540px) !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  padding:9px !important; margin:0 !important;
  background:#fff !important; color:#223925 !important;
  border:1px solid #dbe7d6 !important; border-radius:14px !important;
  box-shadow:0 16px 36px rgba(4,26,8,.20) !important;
  text-align:right !important; direction:rtl;
  z-index:1058 !important;
}
nav.mk-stars-nav .mk-stars-dropdown-open > .mk-stars-submenu {display:block !important;}
nav.mk-stars-nav .mk-stars-submenu .dropdown-item {
  display:flex !important; align-items:center !important; gap:10px !important; width:100% !important;
  min-height:44px !important; margin:0 0 4px !important; padding:10px 11px !important;
  border:0 !important; border-radius:9px !important;
  color:#253d29 !important; background:transparent !important;
  font:800 13px/1.7 'Cairo',Arial,sans-serif !important; text-align:right !important;
  text-decoration:none !important; white-space:normal !important;
}
nav.mk-stars-nav .mk-stars-submenu .dropdown-item > i:first-child {flex:0 0 20px;text-align:center;color:#5c9b26 !important;}
nav.mk-stars-nav .mk-stars-submenu .dropdown-item > span {flex:1 1 auto;min-width:0;}
nav.mk-stars-nav .mk-stars-submenu .dropdown-item:hover,
nav.mk-stars-nav .mk-stars-submenu .dropdown-item:focus-visible {
  background:#eff9e7 !important; color:#376c1b !important;
}
nav.mk-stars-nav .mk-stars-arrow {flex:0 0 auto;color:#75a73b !important;margin-right:auto !important;font-size:12px !important;}
nav.mk-stars-nav .mk-stars-category-heading, nav.mk-stars-nav .mk-stars-category-search,
nav.mk-stars-nav .mk-stars-category-empty {display:none;}
nav.mk-stars-nav .mk-stars-category-list {display:block !important;}
nav.mk-stars-nav .mk-stars-category-list .dropdown-item:not(:last-child) {border-bottom:1px solid #eff3ec !important;}
nav.mk-stars-nav .mk-stars-category-item[hidden] {display:none !important;}
nav.mk-stars-nav ul.navbar-nav > li.mk-stars-suggestion {display:none !important;}
nav.mk-stars-nav .premium-menu-item .account-menu-link,
nav.mk-stars-nav .admin-menu-item .account-menu-link {max-width:none !important;white-space:nowrap !important;}
nav.mk-stars-nav .premium-menu-item .account-menu-link *:not(i),
nav.mk-stars-nav .admin-menu-item .account-menu-link *:not(i) {font-family:'Cairo',Arial,sans-serif !important;}

/* Tablet + mobile: actual sliding drawer, backdrop and card links, mirroring Stars. */
@media (max-width:1399.98px) {
  body.mk-stars-nav-open {overflow:hidden !important;}
  nav.mk-stars-nav .mk-stars-nav-inner {justify-content:space-between !important;padding:0 14px !important;}
  nav.mk-stars-nav .mk-stars-toggle {
    display:flex !important; align-items:center !important;justify-content:center !important;
    order:0 !important;position:relative !important;z-index:1063 !important;
    width:46px !important;height:46px !important;flex:0 0 46px !important;
    padding:0 !important;margin:0 !important;
    border:1px solid rgba(114,182,38,.5) !important; border-radius:11px !important;
    background:#fff !important;
    box-shadow:none !important;cursor:pointer !important;
  }
  nav.mk-stars-nav .mk-stars-bars {display:flex;flex-direction:column;gap:5px;width:23px;}
  nav.mk-stars-nav .mk-stars-bars span {width:100%;height:2px;display:block;background:#72b626;border-radius:2px;transition:transform .2s,opacity .2s;}
  nav.mk-stars-nav .mk-stars-toggle[aria-expanded="true"] .mk-stars-bars span:first-child {transform:translateY(7px) rotate(45deg);}
  nav.mk-stars-nav .mk-stars-toggle[aria-expanded="true"] .mk-stars-bars span:nth-child(2) {opacity:0;}
  nav.mk-stars-nav .mk-stars-toggle[aria-expanded="true"] .mk-stars-bars span:last-child {transform:translateY(-7px) rotate(-45deg);}
  nav.mk-stars-nav .mk-stars-logo {
    position:absolute !important;left:50% !important;top:50% !important;
    transform:translate(-50%,-50%) !important;order:1 !important;
    width: min(145px,calc(100vw - 160px)) !important;
    max-width: min(145px,calc(100vw - 160px)) !important;
    height:54px !important;z-index:1 !important;
  }
  nav.mk-stars-nav .mk-stars-logo img {width: min(134px,calc(100vw - 170px)) !important;height:47px !important;}
  nav.mk-stars-nav .mk-stars-space {display:block !important;order:2;width:45px;height:45px;flex:0 0 45px;pointer-events:none;}
  nav.mk-stars-nav .mk-stars-menu {
    display:block !important;position:fixed !important;
    top:var(--mk-stars-header-height,76px) !important;right:0 !important;left:auto !important;bottom:0 !important;
    width:min(355px,90vw) !important;max-width:none !important;
    height:calc(100dvh - var(--mk-stars-header-height,76px)) !important;
    padding:17px 15px 35px !important;margin:0 !important;
    background:var(--mk-nav-panel) !important;
    border-left:1px solid rgba(171,230,106,.3) !important;
    box-shadow:-10px 10px 33px rgba(0,0,0,.24) !important;
    overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:contain;
    direction:rtl;text-align:right !important;z-index:1060 !important;
    transform:translateX(105%) !important;visibility:hidden !important;pointer-events:none !important;
    transition:transform .26s ease,visibility .26s;
  }
  nav.mk-stars-nav .mk-stars-menu.mk-stars-is-open {
    transform:translateX(0) !important;visibility:visible !important;pointer-events:auto !important;
  }
  nav.mk-stars-nav .mk-stars-backdrop {
    display:block !important;position:fixed !important;
    top:var(--mk-stars-header-height,76px) !important;
    right:0 !important;left:0 !important;bottom:0 !important;
    background:rgba(4,18,8,.57) !important;z-index:1059 !important;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s,visibility .25s;
  }
  nav.mk-stars-nav .mk-stars-backdrop.mk-stars-backdrop-open {opacity:1;visibility:visible;pointer-events:auto;}
  nav.mk-stars-nav .mk-stars-menu-heading {display:block !important;margin:0 0 13px !important;padding:4px 6px 18px !important;border-bottom:1px solid rgba(255,255,255,.12);}
  nav.mk-stars-nav .mk-stars-menu-heading strong {display:block;color:var(--mk-nav-light)!important;font:900 19px/1.6 'Cairo',Arial,sans-serif !important;}
  nav.mk-stars-nav .mk-stars-menu-heading small {display:block;color:#bdcfbd!important;font:700 12px/1.6 'Cairo',Arial,sans-serif !important;}
  nav.mk-stars-nav ul.navbar-nav {display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:7px !important;width:100%;}
  nav.mk-stars-nav ul.navbar-nav > li.nav-item {display:block !important;width:100% !important;flex:0 0 auto !important;}
  nav.mk-stars-nav ul.navbar-nav > li > .nav-link {
    display:flex !important;align-items:center !important;justify-content:flex-start !important;
    width:100% !important;min-height:52px !important;
    padding:11px 13px !important;margin:0 !important;
    background:var(--mk-nav-tile) !important;color:#f5fff1 !important;
    border:1px solid rgba(255,255,255,.09) !important;border-radius:11px !important;
    font:800 15px/1.7 'Cairo',Arial,sans-serif !important;
    white-space:normal !important;text-align:right !important;
  }
  nav.mk-stars-nav ul.navbar-nav > li > .nav-link:hover,
  nav.mk-stars-nav ul.navbar-nav > li > .nav-link:focus-visible,
  nav.mk-stars-nav ul.navbar-nav > li.mk-stars-dropdown-open > .nav-link {color:var(--mk-nav-light)!important;background:#315737 !important;border-color:rgba(171,230,106,.45)!important;}
  nav.mk-stars-nav .mk-stars-icon {width:22px!important;flex-basis:22px;color:#9bda67!important;font-size:17px!important;}
  nav.mk-stars-nav .mk-stars-dropdown-trigger.dropdown-toggle::after {margin-right:auto!important;margin-left:0!important;color:var(--mk-nav-light)!important;}
  nav.mk-stars-nav .mk-stars-submenu {
    display:none !important;position:static !important;inset:auto !important;
    transform:none !important;float:none !important;
    width:100% !important;min-width:0!important;max-width:none!important;
    max-height:none !important;overflow:visible !important;
    padding:8px !important;margin:7px 0 4px !important;
    background:#102618 !important;color:#f1fff0 !important;
    border:1px solid rgba(171,230,106,.28) !important;border-radius:12px !important;
    box-shadow:none !important;
  }
  nav.mk-stars-nav .mk-stars-dropdown-open > .mk-stars-submenu {display:block !important;}
  nav.mk-stars-nav .mk-stars-submenu .dropdown-item {
    display:flex !important;align-items:center!important;gap:9px !important;
    width:100%!important;min-height:43px!important;margin:0 0 4px!important;
    padding:10px 11px!important;border-radius:9px!important;
    background:#24472c!important;color:#e9f8e7!important;
    border:1px solid rgba(255,255,255,.06)!important;border-right:3px solid #83cb40!important;
    font:800 13px/1.7 'Cairo',Arial,sans-serif!important;
  }
  nav.mk-stars-nav .mk-stars-submenu .dropdown-item:hover {color:#dcffbb!important;background:#355b3c!important;}
  nav.mk-stars-nav .mk-stars-submenu .dropdown-item > i:first-child {color:#a9e77a!important;}
  nav.mk-stars-nav .mk-stars-submenu .mk-stars-category-heading {
    display:flex !important;align-items:center;justify-content:space-between;gap:7px;
    margin:0 3px 10px;color:#d7f8be;font:900 13px/1.6 'Cairo',Arial,sans-serif;
  }
  nav.mk-stars-nav .mk-stars-category-heading strong {font-weight:900;}
  nav.mk-stars-nav .mk-stars-category-heading span {font-size:10px;white-space:nowrap;padding:3px 7px;border:1px solid rgba(255,255,255,.15);border-radius:50px;}
  nav.mk-stars-nav .mk-stars-category-search {
    display:flex !important;align-items:center;gap:8px;
    width:100%;min-height:42px;margin:0 0 10px;padding:0 12px;
    background:#f7fff6;border:1px solid rgba(171,230,106,.6);border-radius:9px;color:#527d2f;
  }
  nav.mk-stars-nav .mk-stars-category-search input {
    width:100%;min-width:0;height:39px;border:0!important;outline:0!important;background:transparent!important;
    font:700 13px 'Cairo',Arial,sans-serif!important;color:#204021!important;text-align:right!important;
  }
  nav.mk-stars-nav .mk-stars-category-list {display:block !important;max-height:37vh!important;overflow-y:auto!important;padding:5px 0 0 !important;border-top:1px solid rgba(255,255,255,.14);}
  nav.mk-stars-nav .mk-stars-category-list .dropdown-item:not(:last-child) {border-bottom:1px solid rgba(255,255,255,.10)!important;}
  nav.mk-stars-nav .mk-stars-category-empty:not([hidden]) {display:block !important;color:#eef8e8;font:700 12px 'Cairo',Arial,sans-serif;padding:7px 5px;}
  nav.mk-stars-nav ul.navbar-nav > li.mk-stars-suggestion {display:none !important;}
  /* زر اقتراح سؤال في قائمة الجوال فقط، وليس التابلت أو الكمبيوتر. */
  @media (max-width:768px) {
    nav.mk-stars-nav ul.navbar-nav > li.mk-stars-suggestion {display:block !important;}
  }
  nav.mk-stars-nav .premium-menu-item .account-menu-link,nav.mk-stars-nav .admin-menu-item .account-menu-link {white-space:normal!important;justify-content:flex-start!important;min-height:52px!important;}
  nav.mk-stars-nav .premium-menu-item .account-menu-link .account-name {max-width:120px;overflow:hidden;text-overflow:ellipsis;}
}
/* Full desktop navigation at widths that can accommodate all Mekkawe links. */
@media (min-width:1400px) {
  nav.mk-stars-nav ul.navbar-nav > li > .nav-link {font-size: 16px !important;}
}
@media (max-width:370px) {
  nav.mk-stars-nav .mk-stars-logo {left:calc(50% + 14px) !important; width: min(115px,calc(100vw - 155px)) !important;max-width: min(115px,calc(100vw - 155px)) !important;}
  nav.mk-stars-nav .mk-stars-logo img {width: min(107px,calc(100vw - 165px))!important;height:42px !important;}
}
/* Home hero offset and original floating WhatsApp only; no layout override for navbar. */
body.mk-home-unified-nav .wrapper > #mainslider {margin-top:var(--mk-stars-header-height,76px)!important;}
body.mk-home-unified-nav > a.float.mk-home-whatsapp {
  position:fixed!important;top:auto!important;bottom:40px!important;left:40px!important;right:auto!important;
  width:60px!important;height:60px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:0!important;z-index:1041!important;
  background:var(--mk-nav-green,#72b626)!important;border-radius:50%!important;color:#fff!important;
  box-shadow:2px 2px 3px #999!important;text-decoration:none!important;
}
body.mk-home-unified-nav > a.float.mk-home-whatsapp svg {display:block!important;width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;flex:0 0 34px!important;}
@media (max-width:768px) {
  body.mk-home-unified-nav > a.float.mk-home-whatsapp {
    top:calc(var(--mk-stars-header-height,136px) - 61px)!important;bottom:auto!important;left:16px!important;
    width:44px!important;height:44px!important;border-radius:11px!important;
  }
  body.mk-home-unified-nav > a.float.mk-home-whatsapp svg {width:26px!important;height:26px!important;flex-basis:26px!important;}
}
@media (prefers-reduced-motion:reduce) {
  nav.mk-stars-nav .mk-stars-menu,nav.mk-stars-nav .mk-stars-backdrop,nav.mk-stars-nav .mk-stars-bars span {transition:none!important;}
}
/* Hidden category rows must stay hidden even against older .dropdown-item display rules. */
nav.mk-stars-nav .mk-stars-submenu .mk-stars-category-list > .mk-stars-category-item[hidden] {display:none !important;}
/* Account/admin badges stay recognizable even on the dark Stars-style surface. */
nav.mk-stars-nav .premium-menu-item > .account-menu-link,
nav.mk-stars-nav .admin-menu-item > .account-menu-link {gap:7px !important;padding-inline:9px !important;}
nav.mk-stars-nav .premium-menu-item > .account-menu-link {background:rgba(251,197,51,.10)!important;border:1px solid rgba(255,221,114,.34)!important;color:#ffe394!important;}
nav.mk-stars-nav .admin-menu-item > .account-menu-link {background:rgba(133,223,119,.10)!important;border:1px solid rgba(162,229,133,.38)!important;color:#d3fac3!important;}
nav.mk-stars-nav .premium-menu-item .account-menu-text {display:inline-flex!important;flex-direction:column!important;align-items:flex-start!important;line-height:1.35!important;}
nav.mk-stars-nav .premium-menu-item .account-name {max-width:105px!important;overflow:hidden!important;text-overflow:ellipsis!important;}
nav.mk-stars-nav .premium-menu-item .premium-crown {font-size:17px!important;flex:0 0 auto!important;}
nav.mk-stars-nav .premium-menu-item .premium-title {font-size:13px!important;}
nav.mk-stars-nav .premium-menu-item .premium-subtitle {font-size:10px!important;}
nav.mk-stars-nav .admin-menu-item .admin-badge, nav.mk-stars-nav .premium-menu-item .premium-badge {flex:0 0 auto!important;}
/* Force Stars-style outlined menu button over legacy inner-page mobile .navbar-toggler rules. */
@media (max-width:1399.98px) {
  body nav.navbar.mk-stars-nav .mk-stars-nav-inner > button.mk-stars-toggle {
    background:#fff!important;
    border:1px solid rgba(114,182,38,.5)!important;
    border-radius:11px!important;
    box-shadow:none!important;
    color:#72b626!important;
  }
}
/* Preserve the approved 18px inner-page size on wide desktops; 16px at
   intermediate widths prevents Premium/Admin from forcing a second row. */
@media (min-width:1600px) {
  nav.mk-stars-nav ul.navbar-nav > li > .nav-link {font-size:18px !important;}
}

/* Strong enough to beat the legacy internal-page theme's .navbar background. */
body nav.navbar.mk-stars-nav {background:#fff !important;color:#263226 !important;}
body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item > .nav-link {color:#263226 !important;}
body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item > .nav-link:hover,
body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item.mk-stars-dropdown-open > .nav-link {color:#56891d !important;}
@media (max-width:1399.98px) {
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item > .nav-link {color:#f5fff1 !important;}
}
/* Suggest Question: menu button on phones, floating button on larger screens. */
@media (max-width:768px) {
  body #suggestionIcon { display:none !important; }
}
@media (min-width:769px) {
  body #suggestionIcon { display:flex !important; }
}
/* Desktop Premium/admin labels remain legible on the original white header. */
@media (min-width:1400px) {
  nav.mk-stars-nav .premium-menu-item > .account-menu-link {color:#805d00 !important;background:rgba(251,197,51,.10) !important;border-color:rgba(195,147,34,.27) !important;}
  nav.mk-stars-nav .admin-menu-item > .account-menu-link {color:#287b38 !important;background:rgba(114,182,38,.08) !important;border-color:rgba(82,153,32,.25) !important;}
}

/* Preserve the original Mekkawe sound button appearance and placement.
   The new unified header has z-index:1050, so raise the existing controls
   above it without editing their original dimensions, colors or handlers. */
body #soundNotifWrapper,
body #mobileSoundBtn { z-index:1066 !important; }

/* Restore the original moving highlight at the navbar bottom.
   All dimensions/colors/keyframes match navigation.css; overflow clipped so
   the traveling gradient cannot produce any sideways page scrolling. */
body nav.navbar.mk-stars-nav > .navbar-bottom-shine {
  display:block !important;
  position:absolute !important;
  inset:auto 0 0 !important;
  width:100% !important;
  height:2px !important;
  overflow:hidden !important;
  background:transparent !important;
  pointer-events:none !important;
  z-index:6 !important;
}
body nav.navbar.mk-stars-nav > .navbar-bottom-shine::after {
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-30%;
  width:30% !important;
  height:100% !important;
  background:linear-gradient(90deg,transparent,rgba(114,182,38,.25),rgba(255,255,255,.95),rgba(114,182,38,.25),transparent) !important;
  box-shadow:0 0 8px rgba(114,182,38,.45) !important;
  animation:navbarBottomShine 5s linear infinite !important;
}
@media (prefers-reduced-motion:reduce) {
  body nav.navbar.mk-stars-nav > .navbar-bottom-shine::after { animation:none !important;left:35% !important; }
}


/* Install CTA is deliberately restricted to the mobile/tablet drawer.
   On a desktop/laptop (even when a drawer layout is used) it never appears. */
body nav.navbar.mk-stars-nav ul.navbar-nav > li.mk-stars-app {
  display:none !important;
}
@media (max-width:991.98px) {
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.mk-stars-app {
    display:block !important;
  }
}
nav.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link {
  border:1px solid rgba(114,182,38,.34) !important;
  background:rgba(114,182,38,.09) !important;
  color:#346719 !important;
}
nav.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link:hover,
nav.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link:focus-visible {
  border-color:rgba(114,182,38,.65) !important;
  background:rgba(114,182,38,.17) !important;
  color:#255614 !important;
}
/* Do not show an app-install CTA inside the native application or installed PWA. */
html.mk-in-app body nav.navbar.mk-stars-nav ul.navbar-nav > li.mk-stars-app {
  display:none !important;
}
/* Keep the greeting and the member name side by side ("مرحبًا Admin").
   All other account badges and Premium actions retain their layout. */
nav.mk-stars-nav .premium-menu-item .account-menu-text {
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:5px !important;
  white-space:nowrap !important;
  min-width:0 !important;
}
nav.mk-stars-nav .premium-menu-item .account-welcome,
nav.mk-stars-nav .premium-menu-item .account-name {
  display:inline-block !important;
  white-space:nowrap !important;
}
nav.mk-stars-nav .premium-menu-item .account-name {
  min-width:0 !important;
  max-width:100px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
/* The install item is styled only for the mobile/tablet drawer. */
@media (max-width:991.98px) {
  nav.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link {
    justify-content:flex-start !important;
    background:rgba(114,182,38,.13) !important;
    border-color:rgba(183,239,123,.35) !important;
    color:#f5fff1 !important;
  }
  nav.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link:hover,
  nav.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link:focus-visible {
    background:rgba(114,182,38,.25) !important;
    color:#fff !important;
  }
}


/* === White + Mekkawe-green drawer theme (home and internal pages).
   Presentation only; do not alter dropdown, search, suggestion or install behavior. === */
@media (max-width: 1399.98px) {
  body nav.navbar.mk-stars-nav .mk-stars-menu {
    background: #ffffff !important;
    color: #243b26 !important;
    border-left: 1px solid #dcebd5 !important;
    box-shadow: -10px 9px 32px rgba(21,55,19,.15) !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-menu-heading {
    border-bottom: 1px solid #dfebd7 !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-menu-heading strong {color:#4e871c !important;}
  body nav.navbar.mk-stars-nav .mk-stars-menu-heading small {color:#66786a !important;}

  body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item > .nav-link {
    background: #f8fbf5 !important;
    color: #253d2a !important;
    border: 1px solid #e0ebda !important;
    border-radius: 11px !important;
  }
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item > .nav-link:hover,
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item > .nav-link:focus-visible,
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.nav-item.mk-stars-dropdown-open > .nav-link {
    background: #eef8e4 !important;
    color: #3f751b !important;
    border-color: #b9dca3 !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-icon { color:#6ba62b !important; }
  body nav.navbar.mk-stars-nav .mk-stars-dropdown-trigger.dropdown-toggle::after { color:#659c31 !important; }
  body nav.navbar.mk-stars-nav .mk-stars-submenu {
    background: #ffffff !important;
    color: #263d2a !important;
    border: 1px solid #dcebd3 !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 17px rgba(31,79,28,.07) !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-submenu .dropdown-item {
    background: #ffffff !important;
    color: #2b432d !important;
    border: 1px solid #e5efde !important;
    border-right: 3px solid #72b626 !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-submenu .dropdown-item:hover,
  body nav.navbar.mk-stars-nav .mk-stars-submenu .dropdown-item:focus-visible {
    background: #eef8e6 !important;
    color: #39731b !important;
    border-color: #c7e4b5 !important;
    border-right-color: #72b626 !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-submenu .dropdown-item > i:first-child {color:#6ba62b !important;}
  body nav.navbar.mk-stars-nav .mk-stars-arrow {color:#79ae3b !important;}
  body nav.navbar.mk-stars-nav .mk-stars-submenu .mk-stars-category-heading {color:#376b20 !important;}
  body nav.navbar.mk-stars-nav .mk-stars-category-heading span {
    color:#4d7a2b !important;
    background:#f2faeb !important;
    border-color:#d4e9c4 !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-category-search {
    background:#f7fbf3 !important;
    color:#4b8126 !important;
    border-color:#b8db9a !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-category-list {border-top:1px solid #e0ebd8 !important;}
  body nav.navbar.mk-stars-nav .mk-stars-category-list .dropdown-item:not(:last-child) {
    border-bottom-color:#e0ebd8 !important;
  }
  body nav.navbar.mk-stars-nav .mk-stars-category-empty:not([hidden]) {color:#667766 !important;}

  /* Admin / Premium remain readable on the light drawer. */
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.admin-menu-item > a.account-menu-link {
    color:#28733c !important;
    background:#edf8ed !important;
    border-color:#b9dcb8 !important;
  }
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.premium-menu-item > a.account-menu-link {
    color:#805d00 !important;
    background:#fffae9 !important;
    border-color:#ebd5a0 !important;
  }
  body nav.navbar.mk-stars-nav .premium-menu-item .premium-title,
  body nav.navbar.mk-stars-nav .premium-menu-item .account-welcome,
  body nav.navbar.mk-stars-nav .premium-menu-item .account-name {color:inherit !important;}
}
@media (max-width:991.98px) {
  /* Install action only in the mobile/tablet drawer; keep existing visibility rules. */
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link {
    color:#39731b !important;
    background:#e9f6de !important;
    border:1px solid #b9dca2 !important;
  }
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link:hover,
  body nav.navbar.mk-stars-nav ul.navbar-nav > li.mk-stars-app > a.mk-stars-app-link:focus-visible {
    color:#285815 !important; background:#daf0c8 !important;
  }
}


/* Home-only: navigation.css intentionally hides generic .float links.
   Restore ONLY the explicit WhatsApp contact control with original size/position.
   This avoids affecting other protected or hidden elements. */
body.mk-home-unified-nav > a.float.mk-home-whatsapp {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* === Consistent Cairo across homepage + internal pages (navbar only) ===
   Some internal templates load Tajawal and aggressive generic link/text rules.
   Restrict the override to the unified navbar; never reset FA icon fonts,
   the established 18px / 16px typography sizes, or page content. */
body nav.navbar.mk-stars-nav,
body nav.navbar.mk-stars-nav :not(i):not(svg):not(path):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
  font-family: 'Cairo', Arial, sans-serif !important;
}


/* October 2026: preserve Cairo while making the three critical action icons
   independent of Font Awesome 4/5 version conflicts on the homepage. */
body nav.navbar.mk-stars-nav .mk-stars-inline-icon {
  box-sizing: content-box !important;
  display: block !important;
  flex: 0 0 19px !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  max-width: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: none !important;
  stroke: #6ba62b !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body nav.navbar.mk-stars-nav .mk-stars-submenu .mk-stars-inline-icon {
  flex-basis: 20px !important;
  width: 20px !important;
  height: 20px !important;
}
body nav.navbar.mk-stars-nav .mk-stars-app .mk-stars-install-icon {
  stroke: #39731b !important;
}

/* Home WhatsApp was present but painted BEHIND the fixed navbar on phones.
   Place it on the top-left of the mobile toolbar (not under/inside the drawer).
   Do not affect WhatsApp on internal pages, or the desktop bottom-left control. */
@media (max-width:768px) {
  html body.mk-home-unified-nav > a.float.mk-home-whatsapp {
    display: flex !important;
    position: fixed !important;
    /* Track the actual toolbar row, not the Premium banner above it. */
    top: var(--mk-stars-mobile-controls-top, calc(var(--mk-stars-header-height, 139px) - 63px)) !important;
    left: 15px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1062 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #72b626 !important;
    border-radius: 11px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html body.mk-home-unified-nav > a.float.mk-home-whatsapp svg {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
  }
  /* Any modal should still cover/hide the floating contact button. */
  html body.mk-home-unified-nav.modal-open > a.float.mk-home-whatsapp {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* 17 Oct: put sound and WhatsApp on the SAME mobile toolbar row.
   The navigation JS tracks the real toolbar Y coordinate when the Premium
   banner/viewport changes; this prevents WhatsApp drifting into the banner. */
@media (max-width: 768px) {
  html body #mobileSoundBtn {
    display: flex !important;
    position: fixed !important;
    top: var(--mk-stars-mobile-controls-top, calc(var(--mk-stars-header-height, 139px) - 63px)) !important;
    left: 69px !important; /* WhatsApp at left:15px, width:44px, gap:10px. */
    right: auto !important;
    bottom: auto !important;
    z-index: 1066 !important;
  }
}

/* Square sound control on every page, like the WhatsApp button;
   keep existing green/red states, audio handlers and shine. */
html body #toggleSound,
html body #mobileSoundBtn {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 11px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html body #toggleSound i,
html body #mobileSoundBtn i { font-size: 18px !important; }