/* ==========================================================================
 * 网页版专属的间距微调
 *
 * 只放「网页版需要、但改小程序源码不合适」的调整。
 * 小程序是唯一事实来源，所以这类修正集中在运行时的这个文件里，
 * 不去改 wx-bar/miniprogram 下的 wxss。
 *
 * 加载顺序：index.html 里排在 mp/app.css 之后，同权重时以本文件为准。
 * ========================================================================== */

#wx-app {
  /* 顶部呼吸空间：导航栏底边到第一行内容的距离 */
  --wx-pad-top: 16px;
  /* 底部呼吸空间：最后一行内容到页面底边的距离 */
  --wx-pad-bottom: 24px;
  /* 有 tabBar 时底部弹层要让开的高度 */
  --wx-tabbar-h: 0px;
}

/* ---------- 隐藏滚动条 ---------- */
/*
 * 小程序里页面滚动是不显示滚动条的；网页版如果显示，
 * 一来不像手机，二来下面加 padding 后页面普遍会多出一点点可滚动高度，
 * 满屏都是细滚动条会很难看。
 * 范围限定在手机外壳内部，不影响网页版自己的其它元素。
 */
#wx-app,
#wx-app * {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧 Edge/IE */
}
#wx-app::-webkit-scrollbar,
#wx-app *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- 顶部呼吸空间 ---------- */
/*
 * 只作用于「系统导航栏」的页面。
 *
 * 自定义导航页（navigationStyle: custom）是自己画导航栏的，内容本来就
 * 从屏幕顶部开始，再加 padding 会双重留白 —— 运行时给这类页面不加
 * .wx-native-nav 类（见 runtime.js 的 mountPage）。
 *
 * 起因：页面盒子紧贴导航栏底边（间隙 0）。小程序真机上导航栏是
 * 44px + 状态栏，视觉上宽松得多；网页版去掉了状态栏，内容就显得
 * 顶着标题栏，筛选/标签栏尤其明显。
 */
page.wx-page.wx-native-nav > .wx-page-content {
  padding-top: var(--wx-pad-top);
}

/*
 * 我的订单：标签栏是 position: sticky，滚动时会贴到页面顶边（= 导航栏底边）。
 * 给它同样的 top 偏移，让它始终停在导航栏下方。
 * 导航栏底色和页面底色都是 #091E38，多出来的这条会自然融进导航栏。
 */
page.wx-page.pg-pages-orders-orders .tabs {
  top: var(--wx-pad-top);
}

/* ---------- 底部呼吸空间 ---------- */
/*
 * 所有页面统一多留一点，避免最后一行内容贴住页面底边。
 * 页面底部已经让开了 tabBar（见 runtime.js 的 updatePageScrollHeight），
 * 这里纯粹是额外的视觉留白。
 */
page.wx-page > .wx-page-content {
  padding-bottom: var(--wx-pad-bottom);
}

/* ---------- 底部弹层让开 tabBar ---------- */
/*
 * 网页版 tabBar 盖在屏幕最底下。小程序真机没有这层外壳，
 * 所以页面里 position:fixed; bottom:0 的登录/选座/优惠券弹层
 * 在网页版会被挡住，登录按钮点不到。
 * 有 tabBar 时把这类底部弹层整体抬高；没有 tabBar 时 --wx-tabbar-h=0。
 */
.wx-auth {
  align-items: flex-end;
  padding: 24px 16px calc(28px + var(--wx-tabbar-h));
  box-sizing: border-box;
}
.wx-auth-box {
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
  max-height: calc(var(--frame-h) - 88px - var(--wx-tabbar-h));
  padding: 24px 20px 28px;
}
.wx-auth-submit {
  margin-top: 14px;
  padding: 16px 0;
}
.wx-auth-cancel {
  padding: 16px 0 8px;
}
.wx-actionsheet,
.wx-picker-sheet {
  margin-bottom: var(--wx-tabbar-h);
}

/* 底部操作条：下单结算、购物车、充值、活动报名、订座等 */
.cart-bar,
.bottom-bar,
.footer-bar,
.detail-footer,
.submit-bar {
  bottom: calc(24px + var(--wx-tabbar-h)) !important;
}
.bottom-bar,
.footer-bar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 底部弹出层：切换榜单、登录、优惠券、选座、门票等 */
.board-picker-mask,
.auth-modal-mask,
.coupon-sheet-mask,
.coupon-modal-mask,
.ticket-modal-mask,
.kick-notice-mask,
.ticket-missing-mask,
.modal-mask {
  padding-bottom: var(--wx-tabbar-h) !important;
  box-sizing: border-box;
  z-index: 1400 !important;
}
.board-picker-sheet,
.auth-modal {
  padding-bottom: calc(28px + var(--wx-tabbar-h)) !important;
}