/* public/assets/test/css/partials/footer-home-v2.css */
/* Home Footer V2 (PC black full-width + Mobile spec) + Mobile TabBar (clean final) */

#site_footer.fmhb2{
  --hb2-max: 1410px;
  --hb2-radius: 56px;
  --hb2-left-w: 420px;

  margin: 0;
  padding: 0;
  border: 0;

  background: #070a10;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#site_footer.fmhb2,
#site_footer.fmhb2 *{
  box-sizing: border-box;
}

#site_footer.fmhb2 .hb2-wrap{
  width: 100%;
  margin: 0;
  padding: 26px 0 30px;
}
#site_footer.fmhb2 .hb2-card{
  width: min(var(--hb2-max), calc(100% - 44px));
  margin: 0 auto;

  display: flex;
  overflow: hidden;
  border-radius: var(--hb2-radius);
  background:
    radial-gradient(900px 520px at 0% 45%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(90deg, #0b0f16 0%, #070a10 100%);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}

/* left */
#site_footer.fmhb2 .hb2-left{
  flex: 0 0 var(--hb2-left-w);
  padding: 34px 34px 30px;
  position: relative;
}
#site_footer.fmhb2 .hb2-left::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,.08);
}

#site_footer.fmhb2 .hb2-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  user-select: none;
}
#site_footer.fmhb2 .hb2-brand img{
  height: 67px;
  width: auto;
  display: block;
}
#site_footer.fmhb2 .hb2-brand--m{ display: none; }
#site_footer.fmhb2 .hb2-brand--pc{ display: inline-flex; }

/* sns (PC) */
#site_footer.fmhb2 .hb2-sns{
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#site_footer.fmhb2 .hb2-sns-btn{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  text-decoration: none;

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
#site_footer.fmhb2 .hb2-sns-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
#site_footer.fmhb2 .hb2-sns-btn svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
#site_footer.fmhb2 .hb2-ico-txt{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
}

/* right */
#site_footer.fmhb2 .hb2-right{
  flex: 1 1 auto;
  padding: 38px 54px 34px;
}
#site_footer.fmhb2 .hb2-nav{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  column-gap: clamp(80px, 7vw, 150px);
  row-gap: 26px;
}
#site_footer.fmhb2 .hb2-ttl{
  font-size: 20px;
  font-weight: 650;
  color: #fff;
  margin: 0 0 14px;
}
#site_footer.fmhb2 .hb2-link{
  display: block;
  text-decoration: none;
  font-size: 16px;
  line-height: 2.05;
  color: rgba(255,255,255,.42);
  transition: color .14s ease, transform .14s ease;
}
#site_footer.fmhb2 .hb2-link:hover{
  color: rgba(255,255,255,.72);
  transform: translateX(1px);
}
#site_footer.fmhb2 .hb2-copy{
  margin-top: 14px;
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,.38);
}

/* =========================
   Mobile footer spec
   ========================= */
@media (max-width: 768px){

  #site_footer.fmhb2 .hb2-brand img{
    height: 67px;
    padding-left: 0;
    margin-top: 0;
    width: auto;
    display: block;
  }

  #site_footer.fmhb2{
    padding-bottom: 70px;
    background: #fff;
    color: #000;
  }

  #site_footer.fmhb2 .hb2-wrap{ padding: 0; }

  #site_footer.fmhb2 .hb2-card{
    width: 100%;
    margin: 0;
    border-radius: 0;
    flex-direction: column;
    background: #fff;
    box-shadow: none;
  }

  #site_footer.fmhb2 .hb2-left{ order: 2; }
  #site_footer.fmhb2 .hb2-right{ order: 1; }

  #site_footer.fmhb2 .hb2-left{
    padding: 6px 16px 18px;
    flex: 0 0 auto;
    position: relative;
  }
  #site_footer.fmhb2 .hb2-left::after{ display: none; }

  #site_footer.fmhb2 .hb2-brand--pc{ display: none; }
  #site_footer.fmhb2 .hb2-brand--m{
    display: flex;
    justify-content: center;
    padding: 14px 12px 6px;
  }
  #site_footer.fmhb2 .hb2-brand--m img{
    height: 48px;
    width: auto;
    display: block;
  }

  #site_footer.fmhb2 .hb2-right{ padding: 8px 16px 4px; }

  #site_footer.fmhb2 .hb2-nav{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
  }

  #site_footer.fmhb2 .hb2-ttl{
    align-self: stretch;
    margin: 10px 0 10px;
    color: #000;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -1px;
  }

  #site_footer.fmhb2 .hb2-link{
    color: rgba(0,0,0,0.50);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.165px;

    text-decoration: none;
    transform: none;
    padding: 2px 0;
  }

  #site_footer.fmhb2 .hb2-sns{
    position: static;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  #site_footer.fmhb2 .hb2-sns-btn{
    width: 54px;
    height: 54px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.16);
    color: #111827;
    box-shadow: none;
  }

  #site_footer.fmhb2 .hb2-copy{ display: none; }
}

/* ===================================================================
   Mobile Bottom TabBar - final clean version
   =================================================================== */

:root{
  --fm-mbbar-h: 52px;       /* 比你之前 56px 再低一点 */
  --fm-mbbar-side: 12px;
  --fm-mbbar-lift: 8px;     /* 整体上移 8px */
  --fm-mbbar-cols: 4;
}

@media (max-width: 900px){

  body.has-mbtabbar #page_main{
    padding-bottom: calc(var(--fm-mbbar-h) + env(safe-area-inset-bottom) + 16px);
  }

  #mobile_tabbar{
    position: fixed;
    left: var(--fm-mbbar-side);
    right: var(--fm-mbbar-side);
    bottom: calc(env(safe-area-inset-bottom) + var(--fm-mbbar-lift));
    height: var(--fm-mbbar-h);

    display: flex;
    align-items: stretch;

    padding: 2px;
    z-index: 9999;
    overflow: hidden;

    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow:
      0 8px 20px rgba(15,23,42,.09),
      0 2px 6px rgba(15,23,42,.04);

    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom-left-radius: 0;   /* 左下不要半圆 */
    border-bottom-right-radius: 0;  /* 右下不要半圆 */

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #mobile_tabbar .mb-tab{
    flex: 1 1 0;
    min-width: 0;
    height: 100%;

    margin: 0;
    padding: 0 1px 2px;   /* 整体位置更自然，轻微靠下 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;

    border-radius: 10px;
    background: transparent;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    color: #8F8F8F;
    transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
  }

  #mobile_tabbar .mb-tab:active{
    transform: scale(.985);
  }

  #mobile_tabbar .mb-tab.is-active{
    color: #090B08;
    background: rgba(9,11,8,.05);
  }

  /* icon 容器：不固定死高度，避免上方空白 */
  #mobile_tabbar .mb-tab-ico-wrap{
    width: 100%;
    height: auto;
    flex: 0 0 auto;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    line-height: 0;
    margin: 0;
    transform: none;
  }

  /* 默认 icon */
  #mobile_tabbar .mb-tab-ico{
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    transform: none;
    vertical-align: bottom;
  }

  /* 按你四个 SVG 微调 */
  #mobile_tabbar .mb-tab--home .mb-tab-ico{
    width: 17px;
    height: 16px;
  }

  #mobile_tabbar .mb-tab--orders .mb-tab-ico{
    width: 14px;
    height: 15px;
  }

  #mobile_tabbar .mb-tab--support .mb-tab-ico{
    width: 18px;
    height: 18px;
  }

  #mobile_tabbar .mb-tab--me .mb-tab-ico{
    width: 18px;
    height: 18px;
  }

  #mobile_tabbar .mb-tab em{
    display: block;
    width: 100%;
    min-width: 0;

    margin: 0;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;

    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transform: none;
  }

  #mobile_tabbar .mb-tab.is-active em::after{
    display: none !important;
  }

  #fm_chat_widget_wrap{
    display: none !important;
  }
}

@media (min-width: 901px){
  #mobile_tabbar{
    display: none !important;
  }
}

@media (max-width: 900px){

  /* 1) 去掉底部“悬空感” */
  body.has-mbtabbar #page_main{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 10px);
  }

  #mobile_tabbar{
    bottom: env(safe-area-inset-bottom); /* 去掉之前额外上抬的 8px */
    height: 48px;                        /* 再压低一点高度 */
    padding: 1px 2px;                    /* 内边距也收紧 */
  }

  /* 2) 整组内容更靠下，减少 icon 上方留白 */
  #mobile_tabbar .mb-tab{
    padding: 0 1px 1px;
    justify-content: flex-end;
    gap: 0;
  }

  /* 3) icon + 文字一起轻微下移（这次是整组，不是只动 icon） */
  #mobile_tabbar .mb-tab-ico-wrap,
  #mobile_tabbar .mb-tab em{
    transform: translateY(1px);
  }

  /* 4) 再把 icon 容器本身压实一点 */
  #mobile_tabbar .mb-tab-ico-wrap{
    line-height: 0;
  }
}


@media (max-width: 900px){

  /* 1) bar 本体往上留一点点，补回底部留白 */
  #mobile_tabbar{
    bottom: calc(env(safe-area-inset-bottom));
  }

  /* 2) 页面底部安全区同步一点，避免内容被顶住 */
  body.has-mbtabbar #page_main{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 12px);
  }

  /* 3) icon + 文字整组一起往上提 2px */
  #mobile_tabbar .mb-tab-ico-wrap,
  #mobile_tabbar .mb-tab em{
    transform: translateY(-5px);
  }
}















@media (max-width: 900px){

  /* iOS 主屏启动：整块 bar 上移，而不是 bar 自己长高 */
  html.is-ios-standalone #mobile_tabbar{
    bottom: env(safe-area-inset-bottom) !important;
    
    height: 48px !important;
    padding: 1px 2px !important;
    box-sizing: border-box !important;

    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html.is-ios-standalone #mobile_tabbar .mb-tab{
    height: 100% !important;
    padding: 0 1px 1px !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  /* 清掉你前面可能残留的 transform 干扰 */
  html.is-ios-standalone #mobile_tabbar .mb-tab-ico-wrap,
  html.is-ios-standalone #mobile_tabbar .mb-tab em{
    transform: none !important;
  }

  /* 注意：你 body 原始是 mb-has-tabbar，不是只有 has-mbtabbar */
  html.is-ios-standalone body.mb-has-tabbar #page_main,
  html.is-ios-standalone body.has-mbtabbar #page_main{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 12px) !important;
  }

  /* footer 底部留白也一起重算，不然视觉还是会怪 */
  html.is-ios-standalone #site_footer.fmhb2{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 8px) !important;
  }
}






/* =========================================================
   iOS Safari 添加到桌面（standalone）专用补丁
   - 不改普通手机端
   - 不改现有 tabbar 逻辑
   - 只补齐 bar 下方透明安全区
   ========================================================= */
@media (max-width: 900px){

  /* 仅在 standalone 命中 */
  html.is-ios-standalone #mobile_tabbar{
    overflow: visible !important; /* 让补丁层能画到 bar 外面 */
  }

  /* 给 bar 下方那段 safe-area 补白底，避免透明空隙 */
  html.is-ios-standalone #mobile_tabbar::after{
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 100%;
    height: env(safe-area-inset-bottom);

    background: #fff; /* 跟 tabbar 本体一致 */

    border-left: 1px solid rgba(15,23,42,.08);
    border-right: 1px solid rgba(15,23,42,.08);

    pointer-events: none;
    z-index: -1;
  }

  /* 页面主体底部预留：兼容你两种 body class */
  html.is-ios-standalone body.mb-has-tabbar #page_main,
  html.is-ios-standalone body.has-mbtabbar #page_main{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 12px) !important;
  }

  /* footer 底部也顺带补齐，避免 footer 区域被裁切 */
  html.is-ios-standalone #site_footer.fmhb2{
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}















/* =========================================================
   Mobile footer fix
   - 只修首页 footer
   - 不动你其他手机页
   ========================================================= */
@media (max-width: 768px){

  /* 1) 首页不要把“tabbar 预留空间”加在 body 最后面
     否则空白会出现在 footer 下方 */
  body.is-home.mb-has-tabbar,
  body.home-page.mb-has-tabbar,
  body.is-home.has-mbtabbar,
  body.home-page.has-mbtabbar{
    padding-bottom: 0 !important;
  }

  /* 2) 把底部预留收回到 footer 自己内部
     这样 tabbar 不会挡住 footer，但也不会在 footer 外面多一大块空白 */
  #site_footer.fmhb2{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 8px) !important;
    background: #fff !important;
  }

  /* 3) 移动端左侧块现在是空的，直接隐藏，避免多余留白 */
  #site_footer.fmhb2 .hb2-left{
    display: none !important;
  }

  /* 4) 压紧顶部间距 */
  #site_footer.fmhb2 .hb2-right{
    padding: 8px 16px 0 !important;
  }

  /* 5) logo 不要居中，改成左对齐 */
  #site_footer.fmhb2 .hb2-brand--m{
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 0 12px !important;
  }

  #site_footer.fmhb2 .hb2-brand--m img{
    height: 42px !important;
    width: auto !important;
    display: block !important;
  }

  /* 6) 你现在只有两列，就按两列排，不要再 repeat(3) */
  #site_footer.fmhb2 .hb2-nav{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  #site_footer.fmhb2 .hb2-col{
    min-width: 0;
  }

  /* 7) 标题和链接再紧一点，避免看起来“散” */
  #site_footer.fmhb2 .hb2-ttl{
    margin: 0 0 10px !important;
    letter-spacing: -0.2px !important;
  }

  #site_footer.fmhb2 .hb2-link{
    padding: 3px 0 !important;
  }

  /* 8) 清掉底部多余的小缝 */
  #site_footer.fmhb2 .hb2-wrap,
  #site_footer.fmhb2 .hb2-card{
    margin: 0 !important;
  }

  /* 9) iOS 加桌面时，沿用同样的 footer 底部预留，不要再用你前面那个 70px */
  html.is-ios-standalone #site_footer.fmhb2{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 8px) !important;
  }
}



/* 首页专用：收掉 #page_main 底部预留，改由 footer 自己承担 */
@media (max-width: 900px){

  body.is-home.mb-has-tabbar #page_main,
  body.home-page.mb-has-tabbar #page_main,
  body.is-home.has-mbtabbar #page_main,
  body.home-page.has-mbtabbar #page_main{
    padding-bottom: 0 !important;
  }

  body.is-home.mb-has-tabbar #site_footer.fmhb2,
  body.home-page.mb-has-tabbar #site_footer.fmhb2,
  body.is-home.has-mbtabbar #site_footer.fmhb2,
  body.home-page.has-mbtabbar #site_footer.fmhb2{
    padding-bottom: calc(48px + env(safe-area-inset-bottom) + 8px) !important;
  }

}