/* Kerjaanku Mobile Navigation — shared component only. */
.bottom-nav{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:68px !important;
  padding:0 0 env(safe-area-inset-bottom) !important;
  box-sizing:content-box !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  background:rgba(15,23,42,.99) !important;
  border-top:1px solid var(--kk-border) !important;
  visibility:visible !important;
  opacity:1 !important;
}
.bottom-nav-inner{
  width:min(100%,430px) !important;
  height:68px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  margin:0 auto !important;
}
.bottom-nav a{
  min-width:0 !important;
  height:68px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  color:var(--kk-muted) !important;
  font-size:.64rem !important;
  font-weight:700 !important;
  position:relative !important;
  text-decoration:none !important;
  overflow:visible !important;
}
.bottom-nav a.active{color:var(--kk-accent) !important}
.bottom-nav a span:first-child{font-size:1.08rem !important;line-height:1 !important}
.bottom-nav a small{font-size:.64rem !important;font-weight:700 !important;line-height:1.1 !important}
.bottom-nav .cart-nav-item .cart-badge{
  display:grid !important;
  place-items:center !important;
  position:absolute !important;
  top:7px !important;
  right:calc(50% - 22px) !important;
  min-width:16px !important;
  height:16px !important;
  padding:0 4px !important;
  border-radius:999px !important;
  background:#ef4444 !important;
  color:#fff !important;
  border:2px solid #0f172a !important;
  font-size:9px !important;
  line-height:12px !important;
  font-weight:900 !important;
}
@media(max-width:360px){
  .bottom-nav-inner{width:100% !important}
  .bottom-nav .cart-nav-item .cart-badge{right:calc(50% - 20px) !important}
}


/* User profile photo in the shared mobile navigation. */
.bottom-nav .nav-avatar{
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:#6366f1 !important;
  color:#fff !important;
  font-size:.68rem !important;
  line-height:1 !important;
  font-weight:900 !important;
}
.bottom-nav .nav-avatar-photo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.bottom-nav a.active .nav-avatar{
  box-shadow:0 0 0 2px rgba(167,139,250,.35) !important;
}
.bottom-nav .message-nav-item .message-badge{
  display:grid !important;
  place-items:center !important;
  position:absolute !important;
  top:7px !important;
  right:calc(50% - 22px) !important;
  min-width:16px !important;
  height:16px !important;
  padding:0 4px !important;
  border-radius:999px !important;
  background:#ef4444 !important;
  color:#fff !important;
  border:2px solid #0f172a !important;
  font-size:9px !important;
  line-height:12px !important;
  font-weight:900 !important;
}

/* v2 hardening: explicit viewport-fixed positioning for profile and other app pages. */
.bottom-nav{
  position:fixed !important;
  inset-inline:0 !important;
  bottom:0 !important;
  top:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:2147483000 !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.bottom-nav-inner{position:relative !important;}