/* APP-NAV-r1 — bottom navigation aligned to the provided KARETA app references.
   Scope: #bottom-nav only. Keeps routes/API untouched. */
:root{
  --bnav-ref-h:72px;
  --bnav-ref-yellow:#ffb800;
  --bnav-ref-text:#111111;
  --bnav-ref-muted:#6f7279;
  --bnav-ref-line:#ededf0;
}
#bottom-nav{
  display:flex !important;
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:0 !important;
  width:100% !important;
  max-width:430px !important;
  min-height:calc(var(--bnav-ref-h) + env(safe-area-inset-bottom, 0px)) !important;
  height:calc(var(--bnav-ref-h) + env(safe-area-inset-bottom, 0px)) !important;
  transform:translateX(-50%) !important;
  padding:6px 8px max(7px, env(safe-area-inset-bottom, 0px)) !important;
  background:rgba(255,255,255,.97) !important;
  border-top:1px solid var(--bnav-ref-line) !important;
  box-shadow:0 -10px 30px rgba(15,23,42,.06) !important;
  backdrop-filter:blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25) !important;
  z-index:900 !important;
  box-sizing:border-box !important;
}
#bottom-nav .bnav-inner{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
#bottom-nav .bnav-item{
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:5px 2px 3px !important;
  border:0 !important;
  border-radius:14px !important;
  background:transparent !important;
  color:var(--bnav-ref-muted) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  -webkit-tap-highlight-color:transparent !important;
  box-shadow:none !important;
}
#bottom-nav .bnav-item:active{
  transform:scale(.96) !important;
  background:transparent !important;
}
#bottom-nav .bnav-item:hover{
  color:var(--bnav-ref-muted) !important;
  background:transparent !important;
}
#bottom-nav .bnav-item.active{
  color:var(--bnav-ref-yellow) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#bottom-nav .bnav-icon-wrap{
  width:30px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  position:relative !important;
  color:currentColor !important;
  background:transparent !important;
}
#bottom-nav .bnav-item.active .bnav-icon-wrap{
  color:var(--bnav-ref-yellow) !important;
  background:transparent !important;
}
#bottom-nav .bnav-item.active .bnav-icon-wrap::after,
#bottom-nav .bnav-item.active .bnav-icon-wrap::before{
  display:none !important;
  content:none !important;
}
#bottom-nav .bnav-svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:1.85 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
#bottom-nav .bnav-icon{
  font-size:20px !important;
  line-height:1 !important;
  color:currentColor !important;
  transform:none !important;
}
#bottom-nav .bnav-item.active .bnav-icon,
#bottom-nav .bnav-item.active .bnav-svg{
  transform:none !important;
}
#bottom-nav .bnav-label{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:currentColor !important;
  font-size:10.2px !important;
  line-height:1.05 !important;
  font-weight:760 !important;
  letter-spacing:0 !important;
  text-align:center !important;
}
#bottom-nav .bnav-item.active .bnav-label{
  color:var(--bnav-ref-yellow) !important;
  font-weight:900 !important;
}
#bottom-nav .bnav-badge{
  position:absolute !important;
  top:-4px !important;
  right:-6px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  background:var(--bnav-ref-yellow) !important;
  color:#111 !important;
  font-size:9px !important;
  font-weight:900 !important;
  line-height:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#bottom-nav .bnav-item--center .bnav-icon-wrap{
  width:44px !important;
  height:44px !important;
  margin-top:-18px !important;
  border-radius:50% !important;
  background:var(--bnav-ref-yellow) !important;
  color:#111 !important;
  box-shadow:0 10px 22px rgba(255,184,0,.28) !important;
}
#bottom-nav .bnav-item--center .bnav-label{
  margin-top:-2px !important;
}
body #app,
body .page,
body .spa-page,
body .kr-screen,
body .services-app-page,
body .services-lite-page{
  padding-bottom:calc(var(--bnav-ref-h) + env(safe-area-inset-bottom,0px) + 14px) !important;
}
@media (min-width:768px){
  #bottom-nav{
    border-left:1px solid var(--bnav-ref-line) !important;
    border-right:1px solid var(--bnav-ref-line) !important;
    border-radius:0 !important;
  }
}
@media (max-width:360px){
  #bottom-nav .bnav-label{font-size:9.3px !important;}
  #bottom-nav .bnav-svg{width:20px !important;height:20px !important;}
}