/* Bayān 7.5 — navigation mobile Mīzān, style application professionnelle. */
.nav-label-mobile{display:none}

@media (max-width:900px){
  .topbar{
    gap:10px!important;
    padding:10px 12px 11px!important;
  }
  .brand{min-height:42px}

  .main-nav{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    order:3!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(54px,1fr))!important;
    gap:2px!important;
    width:100%!important;
    height:auto!important;
    min-height:58px!important;
    padding:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border:1px solid rgba(236,207,112,.18)!important;
    border-radius:18px!important;
    background:#153f37!important;
    box-shadow:0 8px 24px rgba(4,31,26,.18),inset 0 1px 0 rgba(255,255,255,.04)!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav::-webkit-scrollbar{display:none}

  .main-nav .nav-button{
    position:relative!important;
    display:flex!important;
    min-width:0!important;
    min-height:50px!important;
    padding:6px 3px 7px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:13px!important;
    background:transparent!important;
    color:rgba(245,247,244,.72)!important;
    box-shadow:none!important;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
    text-align:center!important;
    transition:background .18s ease,color .18s ease,transform .18s ease!important;
  }

  .main-nav .nav-button .nav-icon{
    display:grid!important;
    place-items:center!important;
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    color:#e4c65f!important;
    font-size:15px!important;
    font-weight:750!important;
    line-height:1!important;
  }
  .main-nav .nav-button .nav-icon-info{
    width:17px!important;
    height:17px!important;
    border:1px solid rgba(228,198,95,.72)!important;
    border-radius:50%!important;
    font:800 10px/1 system-ui,sans-serif!important;
  }

  .main-nav .nav-button .nav-label-full{display:none!important}
  .main-nav .nav-button .nav-label-mobile{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    color:inherit!important;
    font-size:9.5px!important;
    font-weight:720!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .main-nav .nav-button.active,
  .main-nav .nav-work-button.active{
    background:rgba(232,200,93,.13)!important;
    color:#fff4c7!important;
    box-shadow:inset 0 0 0 1px rgba(232,200,93,.20)!important;
  }
  .main-nav .nav-button.active .nav-icon,
  .main-nav .nav-work-button.active .nav-icon{color:#f0d46f!important}
  .main-nav .nav-button.active::after,
  .main-nav .nav-work-button.active::after{
    content:""!important;
    position:absolute!important;
    left:28%!important;
    right:28%!important;
    bottom:3px!important;
    height:2px!important;
    border-radius:999px!important;
    background:#f0d46f!important;
    opacity:1!important;
    transform:none!important;
  }
  .main-nav .nav-button:active{transform:scale(.97)!important}
}

@media (max-width:430px){
  .topbar{padding:9px 10px 10px!important}
  .main-nav{
    grid-template-columns:repeat(6,minmax(54px,1fr))!important;
    gap:1px!important;
    padding:4px 3px!important;
    border-radius:16px!important;
  }
  .main-nav .nav-button{min-height:49px!important;padding-inline:2px!important}
  .main-nav .nav-button .nav-label-mobile{font-size:9.25px!important}
}

@media (max-width:360px){
  .main-nav{grid-template-columns:repeat(6,58px)!important;justify-content:flex-start!important;scroll-snap-type:x proximity}
  .main-nav .nav-button{scroll-snap-align:start}
}