/* ============================================================
   H5 端共享组件：底部导航（含凸起排行榜按钮）
   所有 h5/*.html 引入 ui.css + h5.css，不再各自复制样式
   ============================================================ */

/* ---------- 底部导航条 ---------- */
#tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  background: rgba(10, 15, 12, .94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--line);
  padding: 7px 0 max(7px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px -12px rgba(0, 0, 0, .9);
}

#tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 0;
  font-size: 10px;
  color: var(--txt-3);
  transition: color .18s var(--ease);
  position: relative;
}
#tabbar .tab .i { width: 22px; height: 22px; }
#tabbar .tab.on { color: var(--brand-hi); }
#tabbar .tab.on .i { filter: drop-shadow(0 0 6px rgba(63, 208, 122, .55)); }

/* 中间凸起：发光绿色圆球 */
#tabbar .tab.center {
  flex: 0 0 68px;
  justify-content: flex-end;
  padding-bottom: 0;
}
#tabbar .tab.center .orb {
  width: 54px;
  height: 54px;
  margin-top: -26px;
  margin-bottom: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 26%, #8EF7B7, var(--brand) 52%, #1E8A4E);
  color: #06210F;
  border: 2px solid rgba(10, 15, 12, .9);
  box-shadow:
    0 0 0 1px rgba(63, 208, 122, .35),
    0 0 22px rgba(63, 208, 122, .55),
    0 10px 24px -10px rgba(0, 0, 0, .95);
  transition: transform .18s var(--ease), box-shadow .22s;
}
#tabbar .tab.center .orb .i { width: 24px; height: 24px; stroke-width: 2.2; }
#tabbar .tab.center:active .orb { transform: scale(.93); }
#tabbar .tab.center .lbl { color: var(--brand-hi); font-weight: 600; }

/* ---------- 强制选桌拦截层 ---------- */
/*
 * 登录后未绑定桌号时全屏弹出，不选桌号无法关闭、无法操作页面。
 * 由 H5.requireTable() 调用。
 */
.table-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  flex-direction: column;
  background: rgba(6, 10, 8, .96);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  padding: 0;
  overflow-y: auto;
}
.table-gate.show { display: flex; animation: fadeIn .22s var(--ease); }

.table-gate .gate-inner {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
}

/* 头部：图标 + 标题 + 说明 */
.table-gate .gate-head {
  text-align: center;
  margin-bottom: 24px;
}
.table-gate .gate-orb {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 34% 26%, #8EF7B7, var(--brand) 52%, #1E8A4E);
  color: #06210F;
  border: 2px solid rgba(10, 15, 12, .9);
  box-shadow:
    0 0 0 1px rgba(63, 208, 122, .32),
    0 0 30px rgba(63, 208, 122, .5);
}
.table-gate .gate-orb .i { width: 34px; height: 34px; stroke-width: 2.1; }

.table-gate h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--txt);
}
.table-gate .gate-sub {
  font-size: 12.5px;
  color: var(--txt-2);
  line-height: 1.7;
  margin-top: 9px;
}
.table-gate .gate-sub b { color: var(--brand-hi); }

/* 提示条：扫码引导 */
.table-gate .gate-hint {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(200, 169, 106, .08);
  border: 1px solid rgba(200, 169, 106, .22);
  font-size: 11.5px;
  color: var(--amber);
  line-height: 1.65;
}
.table-gate .gate-hint .i { flex: 0 0 auto; margin-top: 1px; }

/* 区域分组 */
.table-gate .gate-area { margin-bottom: 18px; }
.table-gate .gate-area-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt-2);
  margin-bottom: 10px;
}
.table-gate .gate-area-title .i { color: var(--txt-3); }

/* 桌号网格 */
.table-gate .tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 9px;
}

.table-gate .tbtn {
  padding: 14px 4px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  color: var(--txt);
  transition: .16s var(--ease);
}
.table-gate .tbtn:active { transform: scale(.95); }
.table-gate .tbtn b {
  font-size: 17px;
  font-weight: 800;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  line-height: 1.2;
}
.table-gate .tbtn small { font-size: 10px; color: var(--txt-3); }
.table-gate .tbtn.on {
  background: linear-gradient(180deg, rgba(63, 208, 122, .16), rgba(63, 208, 122, .05));
  border-color: rgba(63, 208, 122, .55);
  color: var(--brand-hi);
  box-shadow: 0 0 14px -6px var(--brand-glow);
}
.table-gate .tbtn.on small { color: var(--brand); }

/* 底部当前选择 + 确认 */
.table-gate .gate-foot {
  position: sticky;
  bottom: 0;
  margin-top: 22px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(6, 10, 8, .95) 30%);
  max-width: 460px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.table-gate .gate-sel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--txt-2);
  margin-bottom: 11px;
}
.table-gate .gate-sel b {
  font-size: 20px;
  font-weight: 800;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--brand-hi);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 通用页面骨架 ---------- */
.h5-body {
  max-width: 460px;
  margin: 0 auto;
  padding-bottom: 96px;
}

/* 顶部标题栏（返回 + 标题 + 操作） */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  background: rgba(10, 15, 12, .92);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
/* 标题绝对定位横向铺满居中：
   不依赖左右两侧占位是否等宽，永远严格居中。
   pointer-events:none 让它不挡两侧按钮的点击。 */
.nav-bar .title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}
.nav-bar .back,
.nav-bar .act {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--txt);
  cursor: pointer;
  transition: background .16s;
}
.nav-bar .back:hover,
.nav-bar .act:hover { background: rgba(147, 163, 154, .12); }

/* ---------- 分段控件（积分商城 / 酒水券商城） ---------- */
.seg {
  display: flex;
  gap: 4px;
  margin: 14px 16px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  border-radius: 999px;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--txt-2);
  cursor: pointer;
  transition: .2s var(--ease);
}
.seg button.on {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: #06210F;
  box-shadow: 0 8px 18px -10px var(--brand-glow);
}

/* ---------- 分类胶囊 ---------- */
.chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 0 16px 14px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips .chip {
  flex: 0 0 auto;
  padding: 8px 17px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--txt);
  background: var(--panel);
  border: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  transition: .18s var(--ease);
}
.chips .chip.on {
  background: rgba(63, 208, 122, .1);
  color: var(--brand-hi);
  border-color: rgba(63, 208, 122, .5);
  box-shadow: 0 0 12px -4px var(--brand-glow);
}

/* ---------- 资产总览大卡（「我的酒水券 23」） ---------- */
.balance-card {
  margin: 14px 16px;
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(520px 220px at 88% -30%, rgba(63, 208, 122, .16), transparent 68%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(63, 208, 122, .18);
  box-shadow: var(--shadow);
}
.balance-card .lbl {
  font-size: 12.5px;
  color: var(--txt-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.balance-card .val {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.05;
  margin: 10px 0 8px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.balance-card .val small {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-hi);
  margin-left: 6px;
  letter-spacing: 0;
}
.balance-card .note {
  font-size: 11.5px;
  color: var(--txt-3);
  line-height: 1.6;
}

/* ---------- 商品卡（点单 / 商城通用） ---------- */
.prod {
  display: flex;
  gap: 12px;
  padding: 13px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .18s;
}
.prod:active { border-color: var(--line-strong); }

/* 商品图：无图时用深色渐变占位 + SVG 图标；有图时直接显示图片 */
.prod .thumb {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(140deg, #1C2A22, #101713);
  border: 1px solid var(--line);
  color: var(--brand);
}
.prod .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod .thumb .i { width: 30px; height: 30px; opacity: .85; }

.prod .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prod .nm {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--txt);
}
.prod .ds {
  font-size: 11.5px;
  color: var(--txt-2);
  line-height: 1.55;
  margin-top: 4px;
}
.prod .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.prod .tags .t {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(147, 163, 154, .09);
  color: var(--txt-2);
  border: 1px solid var(--line);
}
.prod .bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.prod .price {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-hi);
}
.prod .price .cur { font-size: 13px; font-weight: 700; margin-right: 1px; }
.prod .price.pts { color: #C4B5FD; }
.prod .price.cp { color: var(--amber); }
.prod .price .unit { font-size: 12px; font-weight: 600; margin-left: 3px; }

/* 加入购物车圆按钮 */
.prod .add {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: auto;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: #06210F;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px var(--brand-glow);
  transition: transform .14s var(--ease);
}
.prod .add:active { transform: scale(.88); }
.prod .add[disabled] { background: rgba(147, 163, 154, .16); color: var(--txt-3); box-shadow: none; }

/* 步进器 */
.prod .stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(10, 15, 12, .8);
  border: 1px solid var(--line-strong);
}
.prod .stepper button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--brand-hi);
  cursor: pointer;
}
.prod .stepper button:active { background: rgba(63, 208, 122, .12); }
.prod .stepper .n {
  min-width: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prod .stock { font-size: 10.5px; color: var(--txt-3); margin-left: auto; }

/* 金色下单按钮（商城券商品） */
.prod .buy-gold {
  margin-left: auto;
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #F3D18C, var(--gold));
  color: #2A1E06;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(200, 169, 106, .7);
}
.prod .buy-gold:active { transform: scale(.96); }
.prod .buy-gold[disabled] { opacity: .4; box-shadow: none; }

/* ---------- 充值弹层：档位卡片 ----------
 * 之前 .amt-grid / .amt-card 完全没有样式，
 * 弹层里渲染出来是几行裸文字（表现为“会员充值显示不对”） */
.amt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.amt-card {
  padding: 14px 6px;
  border-radius: 13px;
  text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease);
}
.amt-card:active { transform: scale(.96); }
.amt-card .pv {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.amt-card .gv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 650;
  color: var(--amber);
}
.amt-card .dv {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--txt-3);
}
.amt-card.on {
  background: linear-gradient(180deg, rgba(63, 208, 122, .16), rgba(63, 208, 122, .05));
  border-color: rgba(63, 208, 122, .55);
}
.amt-card.on .pv { color: var(--brand-hi); }

/* ---------- 结算浮条 ---------- */
.cartbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 55;
  max-width: 460px;
  margin: 0 auto;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(19, 26, 22, .97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -14px rgba(0, 0, 0, .95);
}
.cartbar.show { display: flex; }
.cartbar .ic {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: #06210F;
  box-shadow: 0 8px 18px -8px var(--brand-glow);
  cursor: pointer;
}
.cartbar .dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(19, 26, 22, 1);
}
.cartbar .sum { flex: 1; min-width: 0; }
.cartbar .sum .l1 { font-size: 10px; color: var(--txt-3); }
.cartbar .sum .l2 {
  font-size: 20px;
  font-weight: 800;
  margin-top: 1px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.cartbar .sum .l2 small {
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-2);
  margin-left: 6px;
  letter-spacing: 0;
}
.cartbar .go {
  padding: 11px 26px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: #06210F;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px var(--brand-glow);
}

/* ---------- 门店信息列表 ---------- */
.shop-list { padding: 4px 0; }
.shop-list .item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.shop-list .item:last-child { border: none; }
.shop-list .box {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 208, 122, .08);
  border: 1px solid rgba(63, 208, 122, .18);
  color: var(--brand);
}
.shop-list .txt { flex: 1; min-width: 0; }
.shop-list .k { font-size: 11px; color: var(--txt-3); }
.shop-list .v {
  font-size: 13.5px;
  color: var(--txt);
  margin-top: 2px;
  line-height: 1.5;
  font-weight: 500;
}

/* ---------- 快捷入口格 ---------- */
.quick4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px;
}
.quick4 a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt);
  transition: .18s var(--ease);
}
.quick4 a:active { transform: scale(.97); border-color: rgba(63, 208, 122, .35); }
.quick4 a .ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 208, 122, .07);
  border: 1px solid rgba(63, 208, 122, .16);
  color: var(--brand);
}
.quick4 a .ic .i { width: 21px; height: 21px; }