/* الشريط السفلي - نفس نمط الرئيسية، مع عزل كامل عن CSS الأقسام */
body.ha-role-bottom-active{padding-bottom:92px!important}

body.ha-role-bottom-active .ha-bottom,
body.ha-role-bottom-active .bottom-nav,
body.ha-role-bottom-active nav.bottom,
body.ha-role-bottom-active nav.bottom-nav{
  display:none!important;
}

#haRoleBottomNav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:8px!important;
  transform:translateX(-50%)!important;
  z-index:2147482000!important;
  width:min(920px,calc(100% - 24px))!important;
  min-height:72px!important;
  padding:7px 8px max(7px,env(safe-area-inset-bottom))!important;
  margin:0!important;
  background:rgba(255,255,255,.985)!important;
  border:1px solid #e0e8ee!important;
  border-radius:23px!important;
  box-shadow:0 12px 34px rgba(31,61,83,.16)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  direction:rtl!important;
  opacity:1!important;
  filter:none!important;
}

#haRoleBottomNav .ha-rbn-inner{
  width:100%!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:repeat(var(--ha-nav-count,5),minmax(0,1fr))!important;
  gap:5px!important;
  padding:0!important;
  margin:0!important;
}

#haRoleBottomNav .ha-rbn-item{
  opacity:1!important;
  filter:none!important;
  visibility:visible!important;
  min-height:58px!important;
  min-width:0!important;
  padding:6px 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  border-radius:18px!important;
  background:transparent!important;
  color:#61758c!important;
  text-decoration:none!important;
  font:800 10px/1.1 Tahoma,Arial,sans-serif!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

#haRoleBottomNav .ha-rbn-label{
  opacity:1!important;
  filter:none!important;
  color:inherit!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#haRoleBottomNav .ha-rbn-icon{
  --c1:#198fe7;
  --c2:#0872c8;
  opacity:1!important;
  filter:none!important;
  visibility:visible!important;
  position:relative!important;
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,var(--c1),var(--c2))!important;
  border:1px solid rgba(255,255,255,.45)!important;
  box-shadow:0 4px 9px rgba(28,69,103,.18),inset 0 1px 1px rgba(255,255,255,.35)!important;
}

#haRoleBottomNav .ha-rbn-icon svg{
  opacity:1!important;
  filter:none!important;
  visibility:visible!important;
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:#fff!important;
  color:#fff!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* نفس ألوان أيقونات الرئيسية */
#haRoleBottomNav .ha-rbn-icon[data-key="home"]{--c1:#16b98b;--c2:#07845f}
#haRoleBottomNav .ha-rbn-icon[data-key="account"],
#haRoleBottomNav .ha-rbn-icon[data-key="profile"]{--c1:#248dde;--c2:#0867bc}
#haRoleBottomNav .ha-rbn-icon[data-key="notify"]{--c1:#ffb52b;--c2:#f28b00}
#haRoleBottomNav .ha-rbn-icon[data-key="orders"],
#haRoleBottomNav .ha-rbn-icon[data-key="requests"],
#haRoleBottomNav .ha-rbn-icon[data-key="rides"],
#haRoleBottomNav .ha-rbn-icon[data-key="jobs"]{--c1:#29a9e8;--c2:#087bc4}
#haRoleBottomNav .ha-rbn-icon[data-key="shop"],
#haRoleBottomNav .ha-rbn-icon[data-key="cart"],
#haRoleBottomNav .ha-rbn-icon[data-key="store"]{--c1:#17bf8b;--c2:#07865f}
#haRoleBottomNav .ha-rbn-icon[data-key="services"],
#haRoleBottomNav .ha-rbn-icon[data-key="manage"],
#haRoleBottomNav .ha-rbn-icon[data-key="track"]{--c1:#319fee;--c2:#0e73c9}
#haRoleBottomNav .ha-rbn-icon[data-key="study"],
#haRoleBottomNav .ha-rbn-icon[data-key="classes"],
#haRoleBottomNav .ha-rbn-icon[data-key="library"],
#haRoleBottomNav .ha-rbn-icon[data-key="student"]{--c1:#8b58e3;--c2:#6430bb}
#haRoleBottomNav .ha-rbn-icon[data-key="transport"],
#haRoleBottomNav .ha-rbn-icon[data-key="taxi"],
#haRoleBottomNav .ha-rbn-icon[data-key="driver"],
#haRoleBottomNav .ha-rbn-icon[data-key="delivery"],
#haRoleBottomNav .ha-rbn-icon[data-key="courier"]{--c1:#ffb728;--c2:#e98900}
#haRoleBottomNav .ha-rbn-icon[data-key="sports"],
#haRoleBottomNav .ha-rbn-icon[data-key="gyms"],
#haRoleBottomNav .ha-rbn-icon[data-key="football"]{--c1:#28bd76;--c2:#078b55}
#haRoleBottomNav .ha-rbn-icon[data-key="fun"],
#haRoleBottomNav .ha-rbn-icon[data-key="games"],
#haRoleBottomNav .ha-rbn-icon[data-key="rank"],
#haRoleBottomNav .ha-rbn-icon[data-key="add"],
#haRoleBottomNav .ha-rbn-icon[data-key="join"]{--c1:#945bea;--c2:#6932c1}
#haRoleBottomNav .ha-rbn-icon[data-key="news"],
#haRoleBottomNav .ha-rbn-icon[data-key="section"]{--c1:#2d9de8;--c2:#0878c8}
#haRoleBottomNav .ha-rbn-icon[data-key="religious"],
#haRoleBottomNav .ha-rbn-icon[data-key="quran"],
#haRoleBottomNav .ha-rbn-icon[data-key="duas"]{--c1:#19b99a;--c2:#087f69}

#haRoleBottomNav .ha-rbn-item.active{
  opacity:1!important;
  filter:none!important;
  background:linear-gradient(145deg,#e7f8eb,#d7f2df)!important;
  color:#07885f!important;
}

@media(max-width:680px){
  body.ha-role-bottom-active{padding-bottom:86px!important}
  #haRoleBottomNav{
    bottom:5px!important;
    width:calc(100% - 10px)!important;
    min-height:70px!important;
    padding:6px 5px max(6px,env(safe-area-inset-bottom))!important;
    border-radius:21px!important;
  }
  #haRoleBottomNav .ha-rbn-inner{min-height:57px!important;gap:2px!important}
  #haRoleBottomNav .ha-rbn-item{
    min-height:56px!important;
    padding:5px 1px!important;
    border-radius:17px!important;
    font-size:8.8px!important;
  }
  #haRoleBottomNav .ha-rbn-icon{
    width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important
  }
  #haRoleBottomNav .ha-rbn-icon svg{width:18px!important;height:18px!important}
}

@media(max-width:390px){
  #haRoleBottomNav .ha-rbn-item{font-size:8px!important}
  #haRoleBottomNav .ha-rbn-icon{
    width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important
  }
  #haRoleBottomNav .ha-rbn-icon svg{width:17px!important;height:17px!important}
}