/* vue-cli H5: タブバー・固定フッター位置の補正 */
:root {
  --window-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  --shop-bar-height: 50px;
}

html,
body,
#app,
uni-app,
uni-page,
uni-page-wrapper,
uni-page-body {
  height: 100%;
}

/* ColorUI フォント（本番 HBuilderX に合わせる） */
body,
uni-page-body {
  font-family: Helvetica Neue, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: calc(28 * 100vw / 750) !important;
  color: #333;
  -webkit-font-smoothing: antialiased;
}

uni-text[class*="cuIcon-"],
text[class*="cuIcon-"],
[class*="cuIcon-"] {
  font-family: "cuIcon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.cu-btn.cuIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.cu-btn.cuIcon .cuIcon-add,
.cu-btn.cuIcon .cuIcon-move,
.cu-btn.cuIcon .cuIcon-search {
  font-family: "cuIcon" !important;
  font-size: calc(36 * 100vw / 750);
  line-height: 1;
}

.price {
  font-size: calc(32 * 100vw / 750) !important;
}

.quantity {
  font-size: calc(32 * 100vw / 750) !important;
}

.uni-app--showtabbar uni-page-wrapper,
uni-page-wrapper {
  height: calc(100% - var(--window-bottom)) !important;
}

.uni-tabbar-bottom .uni-tabbar {
  height: var(--window-bottom) !important;
}

.uni-tabbar .uni-tabbar__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 20%;
}

.uni-tabbar .uni-tabbar__bd {
  width: 100%;
}

/* 下单ページ: カートバーをタブバーの上に */
.pages-orderDishes-home .cu-bar.tabbar.shop,
.order-dishes-page .cu-bar.tabbar.shop {
  bottom: var(--window-bottom) !important;
  top: auto !important;
  z-index: 1024;
}

.pages-orderDishes-home .list-cont,
.order-dishes-page .list-cont {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pages-orderDishes-home .VerticalMain,
.order-dishes-page .VerticalMain {
  height: calc(100vh - 90px - var(--window-bottom) - var(--shop-bar-height));
  height: calc(100dvh - 90px - var(--window-bottom) - var(--shop-bar-height));
}

.pages-orderDishes-home .header-cont,
.order-dishes-page .header-cont {
  top: 45px !important;
  padding-top: 0 !important;
}
