/* ============================================================
   oc_global.css — 前台全局样式（移动端 TabBar / 购物车角标 / 加购按钮）
   由 footer.php 引入。桌面端 TabBar 隐藏，移动端显示。
   ============================================================ */

/* 移动端底部导航（京东式：透明背景，无边框，与背景融为一体；active 状态视觉反馈） */
.oc-tabbar{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  height:56px;
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(15,23,42,0.04);
  z-index:999;
  /* 移除 box-shadow 和白底卡片感，纯透明融入 */
}
.oc-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;height:100%;
  color:#94a3b8;text-decoration:none;font-size:10px;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s;
}
.oc-tab .oc-tab-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:26px;border-radius:13px;
  margin-bottom:3px;
  transition:transform .18s ease, background-color .15s, color .15s;
}
.oc-tab .oc-tab-icon svg{display:block}
.oc-tab .oc-tab-label{font-weight:500;line-height:1;letter-spacing:0}
/* active 状态（京东/淘宝风格：图标背景圆 + 红色 + 微放大） */
.oc-tab.active{color:#dc2626}
.oc-tab.active .oc-tab-icon{background:rgba(220,38,38,0.1);color:#dc2626;transform:scale(1.06)}
.oc-tab.active .oc-tab-label{font-weight:700;color:#dc2626}
/* 点击反馈（tap 时短暂缩小） */
.oc-tab:active .oc-tab-icon{transform:scale(0.92)}
.oc-tab.active:active .oc-tab-icon{transform:scale(0.98)}
/* tabbar 购物车角标：16×16 正方形（与头部一致），width:max-content 让 flex 不撑宽 */
.oc-tab-badge{
  position:absolute;top:6px;left:calc(50% + 10px);
  background:#dc2626;color:#fff;font-size:10px;font-style:normal;font-weight:700;
  border-radius:4px;
  width:max-content;min-width:16px;max-width:24px;height:16px;
  line-height:16px;text-align:center;padding:0 4px;display:none;
  box-sizing:border-box;
}
.oc-tab.active .oc-tab-badge{background:#dc2626}

/* header 购物车角标：16×16 正方形，font-style:normal 去 em 斜体 */
.oc-cart-entry{position:relative}
.oc-cart-entry .oc-cart-badge{
  position:absolute;top:-4px;right:-8px;
  background:#dc2626;color:#fff;font-size:10px;font-weight:700;font-style:normal;
  border-radius:4px;min-width:16px;height:16px;line-height:16px;text-align:center;
  padding:0 4px;display:none;
  box-sizing:border-box;
}

/* 全局加购按钮 */
.oc-add-cart-btn{transition:opacity .15s}
.oc-add-cart-btn:disabled{opacity:.6;cursor:not-allowed}
.oc-add-cart-btn:hover{background:#1d4ed8 !important}

/* 用户入口链接 */
.oc-user-link{color:#334155;text-decoration:none;font-size:13px;font-weight:600}
.oc-user-link i{color:#2563eb}
.oc-user-link.oc-user-svg{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;color:#334155;transition:background .15s,color .15s}
.oc-user-link.oc-user-svg:hover{background:#f1f5f9;color:#1e40af}
.oc-user-link.oc-user-svg svg{width:20px;height:20px}

@media (max-width:820px){
  .oc-tabbar{display:flex}
  body{padding-bottom:64px} /* 给固定底栏留空间 */
}