/* BizBondhu Reference Bottom Navigation V1.0
 * VISUAL ONLY: never changes hrefs, click handlers, routing, menu actions or data.
 */

body .bb4-bottom{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:10px!important;
  width:min(calc(100% - 28px),720px)!important;
  min-width:0!important;
  height:78px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:stretch!important;
  padding:0 12px max(0px,env(safe-area-inset-bottom))!important;
  background:rgba(255,255,255,.985)!important;
  border:2px solid #2f74f5!important;
  border-radius:25px!important;
  box-shadow:0 10px 26px rgba(30,94,220,.20),0 0 14px rgba(47,116,245,.16)!important;
  overflow:visible!important;
  z-index:10050!important;
  isolation:isolate!important;
}

/* Slim top blue highlight similar to approved reference. */
body .bb4-bottom:before{
  content:"";
  position:absolute;
  left:9%; right:9%; top:-2px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#397ef6 0%,#1e5fe9 38%,#265fe0 72%,#397ef6 100%);
  opacity:.95;
  pointer-events:none;
}

body .bb4-bottom>a{
  position:relative!important;
  min-width:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  padding:8px 4px 6px!important;
  margin:0!important;
  box-sizing:border-box!important;
  text-decoration:none!important;
  color:#172554!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.05!important;
  box-shadow:none!important;
  overflow:visible!important;
  -webkit-tap-highlight-color:transparent;
}

/* Vertical separators; never on last item. */
body .bb4-bottom>a:not(:last-child):after{
  content:"";
  position:absolute;
  right:0;
  top:23%;
  width:1px;
  height:54%;
  background:#d6dbea;
  pointer-events:none;
}
/* Keep the centre Post area visually open. */
body .bb4-bottom>a:nth-child(2):after,
body .bb4-bottom>a:nth-child(3):after{opacity:.72}

body .bb4-bottom>a>i{
  position:relative!important;
  width:31px!important;
  height:31px!important;
  display:block!important;
  flex:0 0 31px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  overflow:visible!important;
}
body .bb4-bottom>a>i:before{
  content:"";
  position:absolute;
  inset:1px;
  display:block;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

/* Home — blue */
body .bb4-bottom>a:nth-child(1)>i{color:#1f5be7!important}
body .bb4-bottom>a:nth-child(1)>i:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.8 12 3l9 7.8v9.1a1.1 1.1 0 0 1-1.1 1.1h-5.2v-6.1H9.3V21H4.1A1.1 1.1 0 0 1 3 19.9v-9.1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.8 12 3l9 7.8v9.1a1.1 1.1 0 0 1-1.1 1.1h-5.2v-6.1H9.3V21H4.1A1.1 1.1 0 0 1 3 19.9v-9.1Z'/%3E%3C/svg%3E");
}

/* Network/Friends — green */
body .bb4-bottom>a:nth-child(2)>i{color:#159447!important}
body .bb4-bottom>a:nth-child(2)>i:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.6-.8a3.5 3.5 0 1 0 0-6.9 3.5 3.5 0 0 0 0 6.9ZM2 20.5c0-4.1 3.1-7.1 7-7.1s7 3 7 7.1V22H2v-1.5Zm14.7-7.4c3.1.5 5.3 3.2 5.3 6.5V22h-4v-1.5c0-2.8-.9-5.3-2.5-7.1.4-.2.8-.3 1.2-.3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.6-.8a3.5 3.5 0 1 0 0-6.9 3.5 3.5 0 0 0 0 6.9ZM2 20.5c0-4.1 3.1-7.1 7-7.1s7 3 7 7.1V22H2v-1.5Zm14.7-7.4c3.1.5 5.3 3.2 5.3 6.5V22h-4v-1.5c0-2.8-.9-5.3-2.5-7.1.4-.2.8-.3 1.2-.3Z'/%3E%3C/svg%3E");
}

/* Post — raised blue/green circular action. */
body .bb4-bottom>a:nth-child(3),
body .bb4-bottom>a.plus{
  padding-top:0!important;
  color:#172554!important;
  z-index:4!important;
}
body .bb4-bottom>a:nth-child(3)>i,
body .bb4-bottom>a.plus>i{
  width:66px!important;
  height:66px!important;
  flex:0 0 66px!important;
  margin-top:-32px!important;
  margin-bottom:0!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#143de0 0%,#125ed6 52%,#11a75b 100%)!important;
  border:4px solid #fff!important;
  box-shadow:0 6px 16px rgba(25,68,215,.30),0 0 0 2px rgba(38,111,244,.22)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
}
body .bb4-bottom>a:nth-child(3)>i:before,
body .bb4-bottom>a.plus>i:before{
  inset:17px!important;
  background:#fff!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3h3v7.5H21v3h-7.5V21h-3v-7.5H3v-3h7.5V3Z'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3h3v7.5H21v3h-7.5V21h-3v-7.5H3v-3h7.5V3Z'/%3E%3C/svg%3E")!important;
}
body .bb4-bottom>a:nth-child(3)>span,
body .bb4-bottom>a.plus>span{
  margin-top:-2px!important;
  font-size:12px!important;
  font-weight:800!important;
}

/* Clips — purple video/reel */
body .bb4-bottom>a:nth-child(4)>i{color:#5a20dd!important}
body .bb4-bottom>a:nth-child(4)>i:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h14A2.5 2.5 0 0 1 21.5 6v12A2.5 2.5 0 0 1 19 20.5H5A2.5 2.5 0 0 1 2.5 18V6A2.5 2.5 0 0 1 5 3.5Zm5 4.2v8.6l7-4.3-7-4.3ZM6.2 1.5h3.2l1.4 2H7.6l-1.4-2Zm7.1 0h3.2l1.4 2h-3.2l-1.4-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h14A2.5 2.5 0 0 1 21.5 6v12A2.5 2.5 0 0 1 19 20.5H5A2.5 2.5 0 0 1 2.5 18V6A2.5 2.5 0 0 1 5 3.5Zm5 4.2v8.6l7-4.3-7-4.3ZM6.2 1.5h3.2l1.4 2H7.6l-1.4-2Zm7.1 0h3.2l1.4 2h-3.2l-1.4-2Z'/%3E%3C/svg%3E");
}

/* Menu — strong blue hamburger */
body .bb4-bottom>a:nth-child(5)>i{color:#1239ba!important}
body .bb4-bottom>a:nth-child(5)>i:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v3H3V5Zm0 5.5h18v3H3v-3ZM3 16h18v3H3v-3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v3H3V5Zm0 5.5h18v3H3v-3ZM3 16h18v3H3v-3Z'/%3E%3C/svg%3E");
}

body .bb4-bottom>a>span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#18213b!important;
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:750!important;
  white-space:nowrap!important;
}

/* Active item: blue label + short underline, matching reference. */
body .bb4-bottom>a.on>span{color:#153ed0!important;font-weight:850!important}
body .bb4-bottom>a.on:not(.plus):before{
  content:"";
  position:absolute;
  left:50%; bottom:5px;
  width:28px; height:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#183edc;
  pointer-events:none;
}

body .bb4-bottom>a:hover{background:rgba(239,245,255,.55)!important}
body .bb4-bottom>a.plus:hover{background:transparent!important}
body .bb4-bottom>a:focus-visible{outline:2px solid #2165ed!important;outline-offset:-4px!important}

/* Keep app content clear of the floating bar. */
body .bb4-app{padding-bottom:105px!important}
body .bb4-main{padding-bottom:126px!important}

@media (max-width:560px){
  body .bb4-bottom{
    bottom:6px!important;
    width:calc(100% - 12px)!important;
    height:72px!important;
    padding-left:4px!important;
    padding-right:4px!important;
    border-radius:21px!important;
  }
  body .bb4-bottom>a{padding-left:1px!important;padding-right:1px!important;font-size:10px!important}
  body .bb4-bottom>a>i{width:27px!important;height:27px!important;flex-basis:27px!important}
  body .bb4-bottom>a>span{font-size:10px!important}
  body .bb4-bottom>a:nth-child(3)>i,
  body .bb4-bottom>a.plus>i{width:58px!important;height:58px!important;flex-basis:58px!important;margin-top:-29px!important}
  body .bb4-bottom>a:nth-child(3)>i:before,
  body .bb4-bottom>a.plus>i:before{inset:15px!important}
  body .bb4-bottom>a:not(:last-child):after{top:27%;height:46%}
  body .bb4-main{padding-bottom:116px!important}
}

@media (max-width:360px){
  body .bb4-bottom>a>span{font-size:9px!important}
  body .bb4-bottom>a>i{width:25px!important;height:25px!important;flex-basis:25px!important}
}