/* Mobile bottom navigation khusus member */
.mobile-bottom-nav{display:none}

@media (max-width:991.98px){
  .mobile-bottom-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:max(10px, env(safe-area-inset-bottom));
    z-index:1035;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:68px;
    padding:7px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:7px;
    background:rgba(12,20,37,.96);
    box-shadow:0 18px 45px rgba(12,20,37,.30);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:opacity .2s ease,transform .2s ease;
  }

  .mobile-bottom-nav a{
    position:relative;
    min-width:0;
    min-height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:5px;
    color:#94a3b8;
    font-size:.64rem;
    font-weight:800;
    line-height:1;
    text-align:center;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .16s ease,color .16s ease,transform .16s ease;
  }

  .mobile-bottom-nav a>i,
  .mobile-bottom-icon>i{
    font-size:1.18rem;
    line-height:1;
  }

  .mobile-bottom-nav a:active{transform:scale(.94)}

  .mobile-bottom-nav a.active{
    color:#fff;
    background:linear-gradient(135deg,#8065ff,#5a3ce0);
    box-shadow:0 8px 20px rgba(109,74,255,.30);
  }

  .mobile-bottom-icon{position:relative;display:inline-grid;place-items:center}

  .mobile-nav-badge{
    position:absolute;
    top:-9px;
    right:-14px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border:2px solid #0c1425;
    border-radius:999px;
    background:#dc4c64;
    color:#fff;
    font-size:.56rem;
    font-style:normal;
    line-height:1;
  }

  .mobile-bottom-nav a.active .mobile-nav-badge{border-color:#6548e7}

  .member-mobile-nav-enabled .app-content{
    padding-bottom:calc(105px + env(safe-area-inset-bottom));
  }

  .member-mobile-nav-enabled .app-footer{
    padding-bottom:calc(100px + env(safe-area-inset-bottom));
  }

  body.sidebar-open .mobile-bottom-nav{
    opacity:0;
    pointer-events:none;
    transform:translateY(18px);
  }
}

@media (max-width:374.98px){
  .mobile-bottom-nav{left:7px;right:7px;padding:6px}
  .mobile-bottom-nav a{font-size:.58rem}
  .mobile-bottom-nav a>i,.mobile-bottom-icon>i{font-size:1.08rem}
}