/* =========================================================
   app.css（前端首页样式 · 去重合并修复版）
   - 菜品卡片横向扁长型 + 左侧正方形圆角图（占50%）
   - 轮播/布局/弹窗与购物车的实用修复
   ========================================================= */

/* ---------- 主题变量 ---------- */
:root{
  --primary:#6D28D9; --primary-500:#7C3AED; --primary-600:#5B21B6; --primary-700:#4C1D95;
  --blue-500:#2563EB; --blue-600:#1D4ED8;
  --grad-start:#7C3AED; --grad-end:#2563EB;
  --orange:#FF6A00; --orange-600:#E85A00;
  --yellow:#FACC15; --yellow-600:#EAB308;
  --text:#1F2937; --muted:#6B7280;
  --bg:#F3F5FA; --surface:#FFF; --surface-alt:#F6F8FE;
  --border:#E5E7EB; --border-strong:#D1D5DB;
  --shadow:0 10px 24px rgba(37,99,235,.10);
  --shadow-press:0 8px 18px rgba(37,99,235,.16);
  --card-shadow:0 6px 14px rgba(17,24,39,.08);
  --radius:12px; --radius-sm:8px; --radius-pill:999px;
  --duration:.18s; --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 全局 ---------- */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
}
body{
  background:var(--bg);
  color:var(--text);
  max-width:500px;
  margin:0 auto;
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
}
body.modal-open{
  overflow:hidden;
  position:fixed;
  width:100%;
  height:100%;
}

/* ---------- 顶部（前台） ---------- */
#home-page .header,
#address-page .header,
#payment-page .header,
#detail-page .header{
  background:var(--surface);
  padding:10px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
#home-page .time,
.page .time{
  font-size:18px;
  font-weight:700;
  color:#111827;
}
#home-page .close-btn{
  font-size:20px;
  color:#6B7280;
  transition:color var(--duration),transform var(--duration);
  cursor:pointer;
}
#home-page .close-btn:hover{
  color:var(--primary);
  transform:rotate(90deg) scale(1.05);
}
.app-title{
  background:var(--surface);
  color:#111827;
  padding:10px 15px;
  text-align:center;
  font-weight:800;
  border-bottom:1px solid var(--border);
  letter-spacing:.3px;
}

/* ---------- 轮播/横幅 ---------- */
.banner{
  position:relative;
  height:150px;
  background:linear-gradient(135deg,var(--grad-start),var(--grad-end));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  font-weight:800;
  border-radius:10px;
  box-shadow:var(--shadow);
  overflow:hidden;
  margin:12px;
}
.banner .banner-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:10px;
}

/* ---------- 商家信息 ---------- */
.restaurant-info{
  background:var(--surface);
  padding:15px;
  border-bottom:1px solid var(--border);
}
.restaurant-name{
  font-size:18px;
  font-weight:800;
  margin-bottom:6px;
  color:#0F172A;
}
.restaurant-rating{
  color:var(--orange);
  font-size:14px;
}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:44px;
  z-index:90;
  padding:0 12px;
}
.tab{
  flex:1;
  text-align:center;
  padding:12px 0;
  font-size:14px;
  color:var(--muted);
  position:relative;
  transition:color var(--duration) var(--ease),background var(--duration) var(--ease);
  cursor:pointer;
  user-select:none;
}
.tab:hover{
  background:var(--surface-alt);
  color:var(--primary);
}
.tab.active{
  color:var(--primary);
  font-weight:600;
}
.tab.active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end));
  border-radius:2px;
}

/* ---------- 菜品项（卡片化） ---------- */
.dish-item{
  display:flex;
  align-items:center;
  padding:12px 10px 12px 12px;
  margin-bottom:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease),
             border-color var(--duration);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.dish-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--card-shadow);
  border-color:rgba(124,58,237,.35);
}
.dish-image{
  width:92px;
  height:92px;
  flex:0 0 92px;
  margin-right:10px;
  background:var(--surface-alt);
  color:#9ab4ff;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dish-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dish-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.dish-name{
  font-size:16px;
  margin-bottom:2px;
  color:#111827;
  font-weight:600;
}
.dish-sales{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}

.dish-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.dish-price{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:6px;
  font-weight:800;
  color:var(--primary);
}
.dish-qty-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--orange);
  background:#fff;
  color:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
  flex-shrink:0;
}

/* 首页仅显示“+” */
#home-page .dishes-container .dish-qty,
#home-page .dishes-container .dish-qty-btn[data-act="dec"]{
  display:none !important;
}

/* ---------- 底部购物车（基础版，后面有统一皮肤补丁覆盖部分属性） ---------- */
.cart-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  max-width:500px;
  margin:0 auto;
  background:rgba(255,255,255,.92);
  padding:8px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--border);
  box-shadow:0 -12px 24px rgba(37,99,235,.10);
  z-index:1000;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  min-height:64px;
}
.cart-info{
  display:flex;
  align-items:center;
  flex:1;
  cursor:pointer;
}
.cart-icon{
  position:relative;
  margin-right:10px;
}
.cart-icon i{
  font-size:24px;
  color:#64748B;
}
.cart-count{
  position:absolute;
  top:-8px;
  right:-8px;
  background:linear-gradient(180deg,var(--grad-start),var(--grad-end));
  color:#fff;
  border-radius:50%;
  width:18px;
  height:18px;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  box-shadow:0 3px 8px rgba(37,99,235,.28);
}
.price-info{
  display:flex;
  flex-direction:column;
}
.total-price{
  font-size:16px;
  font-weight:800;
  color:var(--primary);
}
.delivery-info{
  font-size:12px;
  color:#94A3B8;
}
.checkout-btn{
  background:linear-gradient(180deg,var(--grad-start),var(--grad-end));
  color:#fff;
  border:none;
  padding:10px 25px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:14px;
  box-shadow:var(--shadow);
  transition:transform var(--duration),box-shadow var(--duration),filter var(--duration);
}
.checkout-btn:hover{
  filter:brightness(1.02);
  box-shadow:var(--shadow-press);
  transform:translateY(-1px);
}
.checkout-btn:active{
  transform:translateY(0) scale(.98);
}
.checkout-btn:disabled{
  background:#CBD5E1;
  cursor:not-allowed;
  box-shadow:none;
}

/* ---------- 页面显隐 ---------- */
.page{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  min-height:100vh;
  background:var(--surface);
  z-index:1;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  overflow:hidden;
}
.page.active{
  z-index:10;
  opacity:1;
  visibility:visible;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#home-page.active{
  position:relative;
}

/* ---------- 通用模态框 ---------- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.5);
  z-index:2000;
  justify-content:center;
  align-items:center;
  padding:14px;
}
.modal.active{
  display:flex;
}
.modal-content{
  background:linear-gradient(180deg,#fff,#F8FAFF);
  width:90%;
  max-width:400px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 24px 68px rgba(17,24,39,.28);
  animation:popIn var(--duration) var(--ease);
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
@keyframes popIn{
  from{
    transform:translateY(10px) scale(.98);
    opacity:.6;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}
.modal-header{
  padding:15px;
  text-align:center;
  font-weight:800;
  border-bottom:1px solid var(--border);
  color:#0F172A;
  background:#fff;
  flex-shrink:0;
}
.modal-body{
  padding:15px;
  background:#fff;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal-footer{
  display:flex;
  padding:15px;
  border-top:1px solid var(--border);
  background:#fff;
  gap:12px;
  flex-shrink:0;
}
.modal-btn{
  flex:1;
  padding:10px;
  border:none;
  border-radius:var(--radius-sm);
  font-weight:800;
}
.cancel-btn{
  background:#F8FAFF;
  color:#475569;
  border:1px solid var(--border);
  transition:background var(--duration),transform var(--duration);
}
.cancel-btn:hover{
  background:#EEF2FF;
}
.cancel-btn:active{
  transform:scale(.98);
}
.confirm-btn{
  background:linear-gradient(180deg,var(--grad-start),var(--grad-end));
  color:#fff;
  box-shadow:var(--shadow);
  transition:transform var(--duration),box-shadow var(--duration),filter var(--duration);
}
.confirm-btn:hover{
  filter:brightness(1.02);
  box-shadow:var(--shadow-press);
  transform:translateY(-1px);
}
.confirm-btn:active{
  transform:translateY(0) scale(.98);
}

/* ---------- 详情弹窗特别修复 ---------- */
#detail-modal .modal-content.detail-modal-content{
  width:min(520px,94vw);
  max-height:85vh;
  display:flex;
  flex-direction:column;
}
#detail-modal .detail-modal-body{
  padding:12px;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
#detail-modal .detail-cart-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border-top:2px solid #f59e0b;
  margin-top:auto;
  border-radius:0 0 12px 12px;
  box-shadow:0 -4px 12px rgba(245,158,11,.15);
  flex-shrink:0;
}
#detail-modal .detail-cart-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#detail-modal .detail-total-price{
  font-size:20px;
  font-weight:800;
  color:#d97706;
}
#detail-modal .detail-delivery-info{
  font-size:12px;
  color:#92400e;
  font-weight:500;
}
#detail-modal .detail-checkout-btn{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;
  border:none;
  padding:12px 24px;
  border-radius:25px;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(245,158,11,.3);
  transition:all .3s ease;
  min-width:120px;
}
#detail-modal .detail-checkout-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(245,158,11,.4);
}
#detail-modal .detail-checkout-btn:active{
  transform:translateY(0);
}
.detail-image-wrapper{
  height:220px;
  background:#fafafa;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:12px;
}
.detail-image-container{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.dish-basic-info{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-top:10px !important;
  gap:10px;
}
.dish-basic-info > div:first-child{
  flex:1;
}
#detail-modal .dish-price{
  font-size:20px !important;
  font-weight:800 !important;
  color:#e53935 !important;
  white-space:nowrap;
}

/* ---------- 响应式收紧 ---------- */
@media (max-width:414px){
  .dish-item{
    padding:10px;
    gap:10px;
    min-height:95px;
  }
  .categories-sidebar{
    width:85px;
  }
}
@media (max-width:375px){
  .categories-sidebar{
    width:80px;
  }
  .dishes-container{
    padding:8px 8px 8px 4px;
  }
  .dish-item{
    padding:8px;
    gap:8px;
    min-height:90px;
  }
}
@media (max-width:320px){
  .categories-sidebar{
    width:75px;
  }
  .dishes-container{
    padding:6px 6px 6px 2px;
  }
  .dish-item{
    padding:6px;
    gap:6px;
    min-height:85px;
  }
}

/* ====== 首页分类导航排版修复 v20251114 ====== */

/* 整体左右布局：不再死死固定高度，改为最小高度 + 可滚动 */
#home-page .menu-container{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 8px 80px;          /* 底部留一点给购物车 */
  height:auto;
  min-height:calc(100vh - 240px); /* 比原来 300px 放松一点 */
  box-sizing:border-box;
}

/* 左侧分类栏：固定宽度 + 纵向滚动 + 按钮之间有间距 */
#home-page .categories-sidebar{
  flex:0 0 92px;                   /* 左列宽度（接近小程序） */
  max-height:calc(100vh - 260px);  /* 内容太多时自己滚动 */
  margin:8px 0 8px 8px;
  padding:4px 4px 4px 0;
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--card-shadow);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;                         /* 关键：分类之间的垂直间距 */
}

/* 每一个分类按钮：固定高度、圆角 pill，完全不挤 */
#home-page .categories-sidebar .category{
  flex:0 0 auto;
  margin:0;
  height:40px;
  line-height:40px;
  padding:0 10px;
  border-radius:20px;
  border:none;
  background:#f9fafb;
  text-align:center;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#home-page .categories-sidebar .category:last-child{
  margin-bottom:0;
}

/* 选中态：背景高亮，文字加粗，类似小程序左侧导航效果 */
#home-page .categories-sidebar .category.active{
  background:#e0edff;
  color:var(--primary, #2563EB);
  font-weight:700;
}

/* 右侧菜品列表：自适应宽度，自己滚动 */
#home-page .dishes-container{
  flex:1;
  margin-right:8px;
  padding:8px 0 80px;
  max-height:calc(100vh - 260px);
  overflow-y:auto;
}

/* ===== 首页轮播显示强制修复 v20251114 ===== */
/* 如果你使用 Swiper 或自带轮播图结构 */
#home-banners img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}

/* ——— 图片容器与占位层 ——— */
.dish-image{
  position:relative;
  overflow:hidden;
}
.dish-image .dish-img{
  width:100%;
  height:100%;
  display:block;            /* 避免行内元素引发的缝隙 */
  object-fit:cover;         /* 轻度裁剪，保证不变形、不留边 */
  object-position:center;
  position:relative;
  z-index:1;
}

/* 占位层默认隐藏，仅在 loading/无图/失败时显示 */
.dish-image .no-image{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#f5f5f5;
  color:#98a2b3;
  z-index:0;
  pointer-events:none;
}

/* 加载中/无图/加载失败三种状态 */
.dish-image.loading .no-image,
.dish-image.broken  .no-image,
.dish-image.empty   .no-image{
  display:flex;
}

/* 保险：一旦容器有图标记（has-img），强制把占位层关掉 */
.dish-image.has-img .no-image{
  display:none !important;
}

/* =========================
 * 视觉统一补丁（仅样式，不改布局）
 * 目标范围：
 * - 添加地址页（#address-page）
 * - 确认交易页（#payment-page）
 * - 下单成功页（#success-page）
 * - 底部购物栏（.cart-bar 统一皮肤）
 * ========================= */

/* --- 1) 全局主题与卡片基调 --- */
:root{
  --app-bg:#F5F7FB;
  --card-bg:#FFFFFF;
  --card-bg-subtle:#F8FAFF;
  --text-main:#0F172A;      /* 深蓝灰，主文字 */
  --text-sub:#64748B;       /* 次级文字 */
  --primary:#2563EB;        /* 主题蓝（覆盖上面的紫色 primary） */
  --primary-strong:#1D4ED8;
  --accent:#F59E0B;         /* 强调色（按钮/呼吸边） */
  --danger:#EF4444;
  --border:#E5E7EB;
  --shadow-card:0 6px 18px rgba(15,23,42,.06),0 1px 2px rgba(0,0,0,.03);
  --shadow-press:inset 0 1px 2px rgba(0,0,0,.15);
}

/* 细字体色统一 */
.page{
  color:var(--text-main);
  background:var(--app-bg);
}

/* 统一页面标题“外卖/信息”等的小标题视觉（不改变结构） */
.page .page-title{
  color:var(--text-main);
  letter-spacing:.02em;
}

/* --- 2) 卡片化：添加地址 & 确认交易的所有信息块 --- */
#address-page .address-section,
#payment-page .address-section,
#payment-page .checkout-footer .card,
#reviews-section > div[style*="border:1px"]{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-card);
}

/* 让添加地址页的两段上半区（选择框/时间/配送）更“成组” */
#address-page .address-section{
  padding:12px;
  margin:0 12px 12px;
}

/* 地址列表中的每条地址：信息更清晰、可点击态 */
#address-page .address-item{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:10px;
  align-items:start;
  padding:10px 8px;
  border-radius:10px;
  transition:background .15s ease,transform .05s ease;
}
#address-page .address-item:hover{
  background:var(--card-bg-subtle);
}
#address-page .address-item:active{
  transform:scale(.995);
}

/* 单选圆点强化对比 */
#address-page .radio-btn,
#payment-page .radio-btn{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid var(--border);
  box-shadow:inset 0 0 0 4px #fff;
  transition:box-shadow .15s,border-color .15s,background .15s;
}
#address-page .radio-btn.selected,
#payment-page .radio-btn.selected{
  border-color:var(--primary);
  background:var(--primary);
  box-shadow:inset 0 0 0 3px #fff;
}

/* 输入框卡片化（保持原结构） */
#address-page .form-input{
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  background:#F8FAFC!important;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
#address-page .form-input:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* “添加新地址”按钮卡片化 */
#address-page #add-address-btn{
  background:#F8FAFF!important;
  border:1px dashed var(--border)!important;
  border-radius:12px!important;
  transition:background .15s,border-color .15s,transform .05s;
}
#address-page #add-address-btn:hover{
  background:#F1F5FF!important;
  border-color:#CCDAFF!important;
}
#address-page #add-address-btn:active{
  transform:scale(.99);
}

/* --- 3) 交易方式卡片（确认交易页） --- */
#payment-page .pay-card{
  background:var(--card-bg)!important;
}
#payment-page .payment-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#FAFCFF;
  transition:background .15s,border-color .15s,transform .05s;
}
#payment-page .payment-option:hover{
  background:#F4F8FF;
}
#payment-page .payment-option:active{
  transform:scale(.995);
}
#payment-page .payment-option .payment-name{
  font-weight:700;
  color:var(--text-main);
}
#payment-page .payment-option .payment-desc{
  color:var(--text-sub);
}

/* 订单金额汇总卡片 */
#payment-page .summary-card{
  background:var(--card-bg)!important;
}
#payment-page .summary-grid{
  display:grid;
  grid-template-columns:1fr auto;
  row-gap:10px;
}
#payment-page .sum-item .sum-label{
  color:var(--text-sub);
}
#payment-page .sum-item .sum-amount{
  font-weight:600;
}
#payment-page .sum-item.sum-total{
  border-top:1px dashed var(--border);
  padding-top:10px;
  margin-top:2px;
}
#payment-page .sum-item.sum-total .sum-amount{
  color:var(--primary);
  font-size:1.05rem;
}

/* --- 4) 胶囊按钮 + 触感反馈（首页去结算/地址确认/确认交易/详情页去结算） --- */
.checkout-btn,
#confirm-address-btn,
#submit-order-btn,
.detail-checkout-btn,
.success-btn{
  border:none;
  border-radius:9999px;
  padding:12px 18px;
  font-weight:700;
  letter-spacing:.02em;
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-strong) 100%);
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.28),0 2px 4px rgba(0,0,0,.06);
  transition:transform .06s ease,box-shadow .15s ease,filter .12s ease,opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.checkout-btn[disabled],
#confirm-address-btn[disabled],
#submit-order-btn[disabled]{
  background:linear-gradient(180deg,#C7D2FE 0%,#A5B4FC 100%);
  box-shadow:none;
  opacity:.7;
}
.checkout-btn:not([disabled]):hover,
#confirm-address-btn:not([disabled]):hover,
#submit-order-btn:not([disabled]):hover,
.detail-checkout-btn:hover,
.success-btn:hover{
  filter:brightness(1.03);
}
.checkout-btn:not([disabled]):active,
#confirm-address-btn:not([disabled]):active,
#submit-order-btn:not([disabled]):active,
.detail-checkout-btn:active,
.success-btn:active{
  transform:translateY(1px) scale(.98);
  box-shadow:var(--shadow-press);
}

/* 成对按钮风格：primary / ghost（供成功页复用） */
.success-btn.primary{
  background:linear-gradient(180deg,var(--accent) 0%,#EA580C 100%);
  box-shadow:0 6px 14px rgba(245,158,11,.28),0 2px 4px rgba(0,0,0,.06);
  color:#111;
}
.success-btn.ghost{
  background:#fff;
  color:var(--text-main);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}

/* --- 5) 统一底部购物栏样式（所有页面同皮肤） --- */
.cart-bar{
  background:#0B1220; /* 深色底，突出主按钮 */
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -6px 20px rgba(2,6,23,.35);
}
.cart-bar .total-price{
  font-weight:800;
}
.cart-bar .delivery-info{
  color:rgba(255,255,255,.7)!important;
}
.cart-bar .cart-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cart-bar .cart-count{
  background:var(--danger)!important;
  color:#fff!important;
  border-radius:999px!important;
}

/* --- 6) 详情弹窗底部条配色（与底部栏统一） --- */
.detail-cart-bar{
  background:#0B1220;
  border-top:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.detail-cart-bar .detail-total-price{
  font-weight:800;
}
.detail-cart-bar .detail-delivery-info{
  color:rgba(255,255,255,.7);
}

/* --- 7) 下单成功页（补齐视觉） --- */
#success-page{
  background:
    radial-gradient(1200px 400px at 50% -10%,rgba(37,99,235,.08),transparent 60%),
    var(--app-bg);
}
#success-page .success-wrap{
  min-height:calc(100vh - env(safe-area-inset-bottom,0px));
  display:grid;
  place-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
}
#success-page .success-card{
  width:min(520px,92vw);
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  padding:18px 16px 16px;
}

/* 成功图标圆徽 */
#success-page .success-icon{
  width:72px;
  height:72px;
  border-radius:999px;
  margin:8px auto 10px;
  display:grid;
  place-items:center;
  color:#065F46;
  background:#D1FAE5;
  border:2px solid #10B981;
  font-size:30px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(16,185,129,.25),
             inset 0 0 0 6px #ECFDF5;
}

/* 标题与副标题 */
#success-page .success-title{
  text-align:center;
  font-weight:800;
  font-size:20px;
  letter-spacing:.02em;
  margin-top:2px;
}
#success-page .success-sub{
  text-align:center;
  color:var(--text-sub);
  margin-top:6px;
}

/* 订单摘要 */
#success-page .order-brief{
  margin:14px 8px 12px;
  padding:12px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#FCFEFF;
}
#success-page .order-brief .row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:10px;
  align-items:center;
  padding:6px 0;
}
#success-page .order-brief .row span{
  color:var(--text-sub);
}
#success-page .order-brief .row strong{
  font-weight:700;
}

/* 成功页按钮组 */
#success-page .success-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
#success-page .success-btns .success-btn{
  width:100%;
}

/* --- 8) 小的细节加强：Tabs、分隔、文本层级 --- */
.tabs .tab{
  font-weight:600;
  color:#475569;
}
.tabs .tab.active{
  color:var(--primary);
  border-bottom:2px solid var(--primary);
}

/* 卡片内部分隔线弱化为虚线，避免“割裂感”过强 */
.detail-divider{
  background:none!important;
  border-bottom:1px dashed var(--border);
}

/* --- 9) 顶部时间条的返回“胶囊”与全局呼吸动画，保留你的 JS 注入 --- */
.page .header .hz-back-btn{
  border-color:#0EA5E9!important;
  background:linear-gradient(180deg,#FDE68A 0%,#F59E0B 100%)!important;
}
@keyframes hz-breathe{
  0%{
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 0 rgba(14,165,233,.45);
  }
  50%{
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 10px rgba(14,165,233,0);
  }
  100%{
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 0 rgba(14,165,233,.45);
  }
}

/* --- 10) 安全区底部填充（与 cart-bar 协同） --- */
.page{
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}

/* --- 11) 轻触反馈（任何按钮都更像“按下”） --- */
button,
.add-address,
.payment-option,
.address-item{
  will-change:transform;
  transition:transform .06s ease,filter .15s ease;
}
button:active,
.add-address:active,
.payment-option:active,
.address-item:active{
  transform:translateY(1px);
}

/* --- 12) 评价卡片（不动 DOM）统一视觉 --- */
#reviews-section #reviews-list > div[style*="border:1px"]{
  padding:12px!important;
  border-radius:12px!important;
  background:var(--card-bg);
}

/* === 统一底部购物栏“单价/金额”为浅黄色 === */
:root{
  /* 全局浅黄，可按需微调 */
  --price-accent:#FDE68A;  /* 也可用 #FFF4C2 / #FFEFB0 */
}

/* 首页/地址页/支付页底部购物栏里的金额文本 */
.cart-bar .total-price,
.cart-bar [data-role="cart-total"]{
  color:var(--price-accent) !important;
  font-weight:800;
}

/* ======= 首页：紧凑头部 + 英雄轮播 ======= */
.header--compact{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 12px;
  background:#fff;
  border-bottom:1px solid #e5e7eb; /* 顶部时间行底部分隔线 */
}
.header--compact .close-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
}
.header--compact .topline{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-weight:700;
  color:#0f172a; /* 深色对比更清晰 */
  line-height:1;
}
.header--compact .topline-time{
  font-size:15px;
  color:#334155;
}
.header--compact .topline-dot{
  opacity:.6;
}
.header--compact .topline-name{
  font-size:16px;
}

/* 英雄轮播：更高、更大可视区 */
.banner--hero{
  position:relative;
  background:#fff;
  /* 让轮播的上边线与头部底线“重叠”一条线（视觉上只有1px） */
  border-top:1px solid #e5e7eb;
  margin-top:-1px; /* 关键：把自身上边线抬上去压住 header 的底线 */
  /* 固定高度（放大），底部不跟随内容跳动 */
  height:clamp(220px,42vh,420px);
  min-height:220px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 轮播媒体占满容器，底部不抖动 */
.banner--hero .banner-media{
  width:100%;
  height:100%;
  object-fit:cover;       /* 图像/视频裁切铺满 */
  display:block;
}

/* =========================================
 * 首页底部购物车叠加 & 列表底部安全距离补丁 v20251114-2
 * 目标：
 *  - cart-bar 永远压在导航/菜品卡片之上
 *  - 右侧最后一张菜品卡片不会被购物车遮住，留出安全距离
 * ========================================= */

/* 1) 底部购物车：绝对固定在视口底部 + 最高层级 */
.cart-bar{
  position: fixed;           /* 防止被后续样式意外覆盖语义 */
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 500px;
  margin: 0 auto;
  z-index: 3000;             /* 提高层级，确保盖在所有内容之上 */
}

/* 2) 首页左右布局：把“底部留空”的职责交给右侧列表，不在整块外面留太大 padding */
#home-page .menu-container{
  padding-bottom: 0;         /* 原来有 80px，这里交给右侧列表来留 */
}

/* 3) 右侧菜品列表：底部留出“购物车高度 + 安全距离” */
#home-page .dishes-container{
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  /*
   * 说明：
   *  - 购物车 min-height ≈ 64px
   *  - 再加 ~24px 安全距离（卡片底边不会紧贴购物车）
   *  - env(safe-area-inset-bottom) 兼容 iOS 底部小黑条
   */
}

/* 4) 左侧分类栏也稍微抬高一点底部，避免滚到底时靠得太死 */
#home-page .categories-sidebar{
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* ====== HERO 轮播媒体强制铺满 ====== */
#home-banners img,
#home-banners video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ====== 首页轮播滑动结构 ====== */
#home-banners {
  position: relative;
  overflow: hidden;
}

#home-banners .slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease;
}

#home-banners .slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}

#home-banners img,
#home-banners video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* 底部指示点 */
#home-banners .dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

#home-banners .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: rgba(255,255,255,.6);
  border-radius: 50%;
  transition: background .3s;
}

#home-banners .dot.active {
  background: #fff;
}