/* =========================================================
   CoinASX V158
   全站底部导航：取消悬浮胶囊，使用贴底通栏交易所导航
   ========================================================= */

:root{
  --nav158-bg:#121416;
  --nav158-border:#24282d;
  --nav158-text:#8d929a;
  --nav158-active:#ffffff;
  --nav158-center:#1769f6;
  --nav158-center-text:#ffffff;
  --nav158-shadow:0 -1px 0 rgba(255,255,255,.025);
}

html.cx-theme-light,
html[data-theme="light"],
html[data-cx-theme="light"]{
  --nav158-bg:#ffffff;
  --nav158-border:#e6e9ed;
  --nav158-text:#858c96;
  --nav158-active:#111317;
  --nav158-center:#1769f6;
  --nav158-center-text:#ffffff;
  --nav158-shadow:0 -1px 0 rgba(0,0,0,.04);
}

/* ===== 核心：取消旧浮动/胶囊导航 ===== */
body #app .van-tabbar.van-tabbar--fixed,
body #app .bgFooter.van-tabbar,
body #app [class*="bottom-nav"].van-tabbar{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;

  width:100%!important;
  max-width:none!important;
  height:88px!important;
  min-height:88px!important;

  margin:0!important;
  padding:0 max(12px,env(safe-area-inset-right))
          env(safe-area-inset-bottom)
          max(12px,env(safe-area-inset-left))!important;

  display:flex!important;
  align-items:stretch!important;
  justify-content:space-around!important;

  transform:none!important;
  translate:none!important;

  border:0!important;
  border-top:1px solid var(--nav158-border)!important;
  border-radius:0!important;

  background:var(--nav158-bg)!important;
  box-shadow:var(--nav158-shadow)!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  overflow:visible!important;
  z-index:999!important;
}

/* 清理旧伪元素、圆角背景和阴影 */
body #app .van-tabbar.van-tabbar--fixed::before,
body #app .van-tabbar.van-tabbar--fixed::after,
body #app .bgFooter.van-tabbar::before,
body #app .bgFooter.van-tabbar::after{
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* ===== 每个导航入口 ===== */
body #app .van-tabbar.van-tabbar--fixed > .van-tabbar-item,
body #app .bgFooter.van-tabbar > .van-tabbar-item{
  position:relative!important;
  flex:1 1 20%!important;
  width:20%!important;
  min-width:0!important;
  height:100%!important;

  margin:0!important;
  padding:13px 2px 9px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;

  border:0!important;
  border-radius:0!important;

  background:transparent!important;
  box-shadow:none!important;

  color:var(--nav158-text)!important;
  overflow:visible!important;

  -webkit-tap-highlight-color:transparent!important;
}

/* 使用图片 alt 识别原功能，并按模板重新排序；
   只改变视觉顺序，不改点击路由 */
body #app .van-tabbar-item:has(img[alt="home"]){
  order:1!important;
}
body #app .van-tabbar-item:has(img[alt="perpetualContract"]){
  order:2!important;
}
body #app .van-tabbar-item:has(img[alt="trade"]){
  order:3!important;
}
body #app .van-tabbar-item:has(img[alt="Quotes"]){
  order:4!important;
}
body #app .van-tabbar-item:has(img[alt="assets"]),
body #app .van-tabbar-item:has(img[alt="Assets"]){
  order:5!important;
}

/* 图标容器 */
body #app .van-tabbar-item .van-tabbar-item__icon{
  width:28px!important;
  height:28px!important;
  margin:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

body #app .van-tabbar-item .van-tabbar-item__icon img{
  display:block!important;
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
  object-fit:contain!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:0!important;
  background:transparent!important;

  opacity:.72!important;
  filter:none!important;
}

/* 文字 */
body #app .van-tabbar-item .van-tabbar-item__text{
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  font-size:12px!important;
  line-height:17px!important;
  font-weight:650!important;
  white-space:nowrap!important;
}

body #app .van-tabbar-item .van-tabbar-item__text span{
  color:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  font-weight:inherit!important;
}

/* 激活项 */
body #app .van-tabbar-item.van-tabbar-item--active{
  color:var(--nav158-active)!important;
  background:transparent!important;
}

body #app .van-tabbar-item.van-tabbar-item--active .van-tabbar-item__icon img{
  opacity:1!important;
}

/* ===== 中央「交易」参考模板：放大圆形按钮 ===== */
body #app .van-tabbar-item:has(img[alt="trade"]){
  padding-top:9px!important;
  z-index:3!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;

  margin-top:-29px!important;
  margin-bottom:1px!important;

  border-radius:50%!important;
  background:var(--nav158-center)!important;
  border:5px solid var(--nav158-bg)!important;
  box-shadow:none!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon img{
  width:31px!important;
  height:31px!important;
  max-width:31px!important;
  max-height:31px!important;
  opacity:1!important;
  filter:brightness(0) invert(1)!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__text{
  margin-top:0!important;
  color:var(--nav158-active)!important;
}

/* 点击反馈 */
body #app .van-tabbar-item:active{
  opacity:.72!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]):active .van-tabbar-item__icon{
  transform:scale(.94)!important;
}

/* ===== 内容底部留白，防止导航压住页面 ===== */
body #app .appContent{
  padding-bottom:max(104px,calc(88px + env(safe-area-inset-bottom) + 16px))!important;
}

/* ===== 小屏 ===== */
@media(max-width:390px){
  body #app .van-tabbar.van-tabbar--fixed,
  body #app .bgFooter.van-tabbar{
    height:82px!important;
    min-height:82px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body #app .van-tabbar-item{
    gap:5px!important;
    padding-top:12px!important;
  }

  body #app .van-tabbar-item .van-tabbar-item__icon{
    width:25px!important;
    height:25px!important;
  }

  body #app .van-tabbar-item .van-tabbar-item__icon img{
    width:23px!important;
    height:23px!important;
    max-width:23px!important;
    max-height:23px!important;
  }

  body #app .van-tabbar-item .van-tabbar-item__text{
    font-size:11px!important;
  }

  body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    margin-top:-27px!important;
  }

  body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon img{
    width:29px!important;
    height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
  }

  body #app .appContent{
    padding-bottom:max(98px,calc(82px + env(safe-area-inset-bottom) + 16px))!important;
  }
}

/* ===== 横屏 / 宽屏也不恢复悬浮胶囊 ===== */
@media(min-width:600px){
  body #app .van-tabbar.van-tabbar--fixed,
  body #app .bgFooter.van-tabbar{
    width:100%!important;
    max-width:none!important;
    left:0!important;
    right:0!important;
    margin:0!important;
    border-radius:0!important;
  }
}