/* Kerjaanku Mobile Navigation — V89 consolidated shared component. */
.bottom-nav{
  position:fixed !important;
  inset-inline:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  height:68px !important;
  padding:0 0 env(safe-area-inset-bottom) !important;
  box-sizing:content-box !important;
  margin:0 !important;
  transform:none !important;
  z-index:2147483000 !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;
  pointer-events:auto !important;
}
.bottom-nav-inner{
  position:relative !important;
  width:min(100%,430px) !important;
  height:68px !important;
  display:grid !important;
  grid-template-columns:repeat(5,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;
  position:relative !important;
  overflow:visible !important;
  color:var(--kk-muted) !important;
  font-size:.64rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !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 .top-freelancer-nav-item span:first-child{font-size:1rem !important;line-height:1 !important}
.bottom-nav .top-freelancer-nav-item.active{color:#fbbf24 !important}

/* Cart and message badges. */
.bottom-nav .cart-nav-item .cart-badge,
.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;
}

/* User profile photo / fallback initial. */
.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}

@media(max-width:360px){
  .bottom-nav-inner{width:100% !important}
  .bottom-nav a small{font-size:.58rem !important}
  .bottom-nav a span:first-child{font-size:1rem !important}
  .bottom-nav .top-freelancer-nav-item span:first-child{font-size:.96rem !important}
  .bottom-nav .cart-nav-item .cart-badge,
  .bottom-nav .message-nav-item .message-badge{right:calc(50% - 20px) !important}
}


/* V90 — force the shared mobile navigation to always render all five destinations. */
.bottom-nav{display:flex !important;}
.bottom-nav-inner{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;grid-auto-flow:row !important;width:min(100%,430px) !important;max-width:430px !important;min-width:0 !important;overflow:visible !important;}
.bottom-nav-inner>a{display:flex !important;visibility:visible !important;opacity:1 !important;min-width:0 !important;width:auto !important;}
.bottom-nav-inner>a:nth-child(1),
.bottom-nav-inner>a:nth-child(2),
.bottom-nav-inner>a:nth-child(3),
.bottom-nav-inner>a:nth-child(4),
.bottom-nav-inner>a:nth-child(5){display:flex !important;visibility:visible !important;}


/* V92 — Global five-item navigation lock. */
.bottom-nav-inner{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  width:min(100%,430px) !important;
  max-width:430px !important;
  min-width:0 !important;
  overflow:visible !important;
}
.bottom-nav-inner > a{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
}

/* V2 theme: clean white bottom navigation with blue active state */
.bottom-nav{background:rgba(255,255,255,.98)!important;border-top:1px solid #dce5f2!important;box-shadow:0 -5px 20px rgba(18,43,83,.06)!important;backdrop-filter:blur(14px)}
.bottom-nav a{color:#71809a!important}
.bottom-nav a.active{color:#2878ff!important}
.bottom-nav .top-freelancer-nav-item.active{color:#2878ff!important}
.bottom-nav .cart-nav-item .cart-badge,.bottom-nav .message-nav-item .message-badge{border-color:#fff!important}
.bottom-nav .nav-avatar{background:#2878ff!important}
.bottom-nav a.active .nav-avatar{box-shadow:0 0 0 2px rgba(40,120,255,.22)!important}


/* V7: Refine profile item in the white bottom navigation. */
.bottom-nav .nav-avatar {
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 24px !important;
  overflow:hidden !important;
  border-radius:50% !important;
  background:#2878ff !important;
  color:#fff !important;
  border:1px solid rgba(40,120,255,.22) !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
.bottom-nav a.active .nav-avatar {
  box-shadow:0 0 0 2px rgba(40,120,255,.18) !important;
}
.bottom-nav .nav-avatar-photo img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}
.bottom-nav a:last-child {gap:3px !important}