/* 页面整体背景 & 字体优化 */
.time-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ==============Time Card – Desktop=============== */
@media (max-width: 768px) {
  .time-page .time-card-desktop,
  .time-page .time-card-mobile {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
  }
}
/* 时间按钮区域容器 */
.time-page .time-slot-row {
  margin-top: 2px;
}

.time-page .time-slot {
  cursor: pointer;
}

/* ================== 顶部月份切换条 ================== */
/* 容器：左右箭头 + 中间月份下拉 */
.time-page .nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 12px;
}

/* 中间月份选择下拉 */
.time-page #selectId {
  appearance: none;
  -webkit-appearance: none;
  width: 70%;
  max-width: 320px;
  height: 44px;
  padding: 0 36px;
  border-radius: 999px;
  border: 1.5px solid #e2e2e2;
  background:
    #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff4f00' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 16px center;
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.time-page #selectId:focus,
.time-page #selectId:hover {
  border-color: var(--hw-orange, #ff4f00);
  box-shadow: 0 0 0 2px rgba(255, 79, 0, 0.12);
  outline: none;
}

/* 左右箭头按钮（绝对定位到两侧） */
.time-page .nav .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-46%);   /* 比 -50% 略微下移一点，看起来更居中 */

  width: 40px;
  height: 40px;
  border-radius: 999px;

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

  font-size: 20px;
  font-weight: 700;
  color: var(--hw-orange, #ff4f00);
  background: #ffffff;
  border: 1.5px solid #e2e2e2;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
  cursor: pointer;
}

/* 左箭头在左边，右箭头在右边 */
.time-page .nav #down {
  left: 0;
}

.time-page .nav #up {
  right: 0;
}

/* 用伪元素画出箭头，不用在 HTML 里写 */
.time-page .nav #down::before {
  content: '<';
}

.time-page .nav #up::before {
  content: '>';
}

/* hover 状态（只变色，不再“跳”） */
.time-page .nav .icon:hover {
  background: #fff8f3;
  color: var(--hw-orange, #ff4f00);
}

/* ================== 日历主体 ================== */

.time-page .calendar {
  position: relative;
}

.time-page .weeks {
  width: 100%;
  min-width: 0;
  background-color: #fff;
  padding: 15px;
  border-radius: 22px;
  border-collapse: separate;
  border: 1px solid #e9e9e9;
  margin-bottom: 14px;
  box-sizing: border-box;
}

/* 星期标题行 */
.time-page .weeks th {
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
  color: #222;
}

/* 日期单元格（默认态） */
.time-page .cell {
  text-align: center;
  color: #313131;
  font-weight: 600;
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  border-top: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  border-right: 0;
  background: #fff7f1;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-radius 0.18s ease,
    transform 0.12s ease;
}

.time-page .weeks tr td:first-child{
  border-left: 0;
}

/* 不可选日期（JS 控制 .disabled） */
.time-page .cell.disabled {
  color: #dedede;
  cursor: default;
  background: #f7f7f7;
}

/* hover 态：品牌橙色块 */
.time-page .cell.active:hover {
  background-color: var(--hw-orange, #ff4f00);
  color: #ffffff;
  border-radius: 14px;
  transform: translateY(-1px);
}

/* 选中日期：淡橙色 + 深橙字体 */
.time-page .weeks .choose {
  background: var(--hw-orange-tint, #ffe7d4);
  color: var(--hw-orange, #ff4f00);
  border-radius: 14px;
  border-top-color: transparent;
  border-left-color: transparent;
  position: relative;
  z-index: 1;
}

/* ================== 时间卡片 ================== */

/* 手机时间按钮卡片 */
.time-page .mbtext {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 46%;
  float: left;
  border: 1px solid #e3e3e3;
  margin-bottom: 11px;
  margin-right: 2%;
  margin-left: 2%;
  color: #313131;
  border-radius: 16px;
  background: #fff7f1;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

/* 桌面时间按钮卡片 */
.time-page .pctext {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 23%;
  float: left;
  border: 1px solid #ffe7d4;
  margin-bottom: 11px;
  margin-right: 1%;
  margin-left: 1%;
  border-radius: 16px;
  background: #fff7f1;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

/* 时间卡片 hover（.time2 是 JS/HTML 在用的类） */
.time-page .time2:hover {
  background-color: var(--hw-orange-tint, #ffe7d4);
  color: var(--hw-orange, #ff4f00);
  border-radius: 16px;
  transform: translateY(-1px);
}

/* “Fully booked / Not available” 文案隐藏/显示用 */
.time-page .afd .fd {
  visibility: hidden;
}

.time-page .fd {
  color: #e53935;
}

.time-page .bod {
  font-weight: bold;
}

/* =====================
   Time Booking Box – 顶部价格/说明卡片
===================== */
.time-page .space {
  padding-top: 20px;
  padding-bottom: 60px;
}

.time-page .booking-box {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 22px;
  padding: 15px;
  text-align: center;
}

/* H1 标题（页面主标题） */
.time-page .booking-box.hw-card h1 {
  font-size: clamp(22px, 4vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
  color: #333;
}

/* 副标题/引导文案（比如 Select your booking date…） */
.time-page .booking-subtitle,
.time-page .time-intro {
    font-size: clamp(18px, 2.8vw, 24px);
    font-weight: 600;
    color: #004099;
    margin: 10px auto;
    text-align: center;
}

/* Price list */
.time-page .hw-clean-list {
  font-size: 15px;
  color: #222;
  margin: 8px 0;
}

.time-page .hw-clean-list li {
  margin: 8px 0;
  font-size: 20px;
  line-height: 1.6;
}

/* 提示文案 */
.time-page .booking-hint {
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 600;
  color: #004099;
  margin: 10px auto;
  text-align: center;

}

/* 价格卡片 */
.time-page .booking-price.hw-card-soft {
  padding: 10px 12px;
  margin: 10px auto 12px;
}

/* 第一条价格：锚定价格（加粗） */
.time-page .booking-price .hw-clean-list li:first-child {
  font-weight: 600;
}

.time-page .booking-price .hw-clean-list strong {
  font-weight: 700;
}

/* 限制 booking-box 内真实阅读区宽度 */
.time-page .booking-box > * {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================
   顶部菜单链接样式 – View Full Hibachi Menu
===================== */

.time-page .time-menu-link {
  display: flex;
  justify-content: center;
}

.time-page .time-menu-link p {
  font-size: 18px;
  font-weight: bold;
  color: rgba(49, 49, 49, 0.67);
  text-align: center;
  margin-bottom: 6px;
}

.time-page .time-menu-link a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 15px;
  font-weight: 500;
  color: #5f6c7b;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin: 0;
}

.time-page .time-menu-link a:hover {
  color: #004099;
}

/* =====================
   隐藏旧弹窗 continue 按钮
===================== */

.time-page #sure,
.time-page #sure2 {
  display: none !important;
}

.time-page .nav .icon.disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.time-page table {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}
@media (max-width: 768px) {
  .time-page .booking-box {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 22px;
    box-shadow: none;
    padding: 26px 18px;
    text-align: center;
    margin: 0 0 14px
  }

  .time-page .booking-box > * {
    max-width: 100%;
  }
}
/* 默认：PC 保持你现在 bootstrap/container 的样子，不加任何 max-width */
.time-page .time-flow{
  width: 100%;
  box-sizing: border-box;
}
/* ✅ Mobile 对齐补丁：放 CSS 最底下，确保覆盖 */
@media (max-width: 768px){
  .time-page .container.time-flow{
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }
  /* 三块 100% 吃满外层宽度 */
  .time-page .booking-box,
  .time-page #date-picker,
  .time-page .weeks{
    width: 100%;
    box-sizing: border-box;
  }
}
/* ✅ 最稳的“浮起感”：不使用 transform、不使用 filter、不用 transition: all */
.time-page .booking-box,
.time-page .weeks,
.time-page .pctext,
.time-page .mbtext{
  background: #fff7f1;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 18px rgba(15, 23, 42, 0.08);
}

/* hover 只加一点阴影，不要位移 */
.time-page .booking-box:hover,
.time-page .weeks:hover,
.time-page .pctext:hover,
.time-page .mbtext:hover{
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 10px 28px rgba(15, 23, 42, 0.12);
}

/* 可选：hover 过渡只针对 box-shadow（别用 all） */
.time-page .booking-box,
.time-page .weeks,
.time-page .pctext,
.time-page .mbtext{
  transition: box-shadow .14s ease;
}
.time-page .weeks,
.time-page .booking-box{
    background: #fff;
}