/* ============================================================
   家宴 · 点餐邀约 — 复古羊皮纸主题
   ------------------------------------------------------------
   图片替换说明：
   - --parchment-bg  : 整体羊皮纸底图 URL（替换 var(--parchment-bg) 的 url(...)）
   - body.mode-menu::before : 分类菜单底图（主菜单 / 甜品 / 饮品，均按 iPhone 17 Pro 原始比例等比展示；
     一级、二级文案由底图自身提供，页面仅在其上叠加透明点击热区）
   - --btn-bg / --btn-bg-active : 主按钮图片（也可保持纯色）
   - --divider-img : 分区装饰图（可选）
   ============================================================ */
:root {
  --parchment-bg:
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 226, 0.85), transparent 60%),
    radial-gradient(circle at 12% 88%, rgba(170, 120, 60, 0.18), transparent 45%),
    radial-gradient(circle at 88% 14%, rgba(120, 80, 40, 0.16), transparent 40%),
    linear-gradient(180deg, #efe2c0 0%, #e3d2a6 40%, #d9c490 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.3  0 0 0 0 0.18  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-edge: 1px solid rgba(90, 60, 30, 0.35);
  --ink: #4a3728;
  --ink-soft: #6b5238;
  --ink-muted: #8a6f4f;
  --accent: #8b2f23;
  --accent-soft: #a8503f;
  --seal: #9c2f1f;
  --card-bg: rgba(255, 248, 228, 0.62);
  --card-edge: rgba(120, 80, 40, 0.32);
  --btn-bg:
    linear-gradient(180deg, #b74234 0%, #8b2f23 100%);
  --btn-bg-active:
    linear-gradient(180deg, #8b2f23 0%, #6f2418 100%);
  --shadow: 0 6px 18px rgba(60, 40, 20, 0.18);
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  /* 参考菜单底图：中文为宋体/明朝体的横细竖粗衬线风格，英文正文使用同系衬线字。 */
  --menu-font: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 表单控件不总会继承 body 字体，显式统一为菜单同款宋体/明朝体。 */
button, input, textarea, select { font-family: var(--menu-font); }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--menu-font);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.55;
  background-color: #d8c49a;
  background-image: var(--parchment-bg);
  background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 160px 160px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 全屏菜单底图布局 ---------- */
/* 按当前底图的真实 iPhone 17 Pro 尺寸等比居中：back 为 853×1844，甜品/饮品为 852×1846。 */
body.mode-menu {
  --frame-source-w: 852;
  --frame-source-h: 1846;
  --frame-h: min(100dvh, calc(100vw * var(--frame-source-h) / var(--frame-source-w)));
  --frame-w: calc(var(--frame-h) * var(--frame-source-w) / var(--frame-source-h));
  --frame-left: calc((100vw - var(--frame-w)) / 2);
  --frame-top: calc((100dvh - var(--frame-h)) / 2);
  --menu-bg: url("assets/menu-background-main.png");
}
/* 仅保留西餐分类：直接复用主菜单底图画框。 */
body.mode-menu[data-menu-category="western"] {
  --frame-source-w: 853;
  --frame-source-h: 1844;
  --menu-bg: url("assets/menu-background-main.png");
}
/* 底图固定，只有菜品内容随页面滚动。 */
body.mode-menu::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* 仅固定显示高度，图片宽度由浏览器按原图比例自动推导，避免纵向拉伸。 */
  background: var(--menu-bg) center center / auto var(--frame-h) no-repeat;
  pointer-events: none;
}
/* 内容框紧随底图内的二级菜单之后。 */
body.mode-menu {
  --content-top: 0.35;
  --content-height: 0.578;
}
body.mode-menu #app {
  width: calc(var(--frame-w) * 0.866);
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 0 0 calc(var(--frame-left) + var(--frame-w) * 0.067);
  padding: calc(var(--frame-top) + var(--frame-h) * var(--content-top)) 0 0;
}
/* 菜品仅在底图红框所对应的内容框内滚动，不影响一级、二级菜单。 */
body.mode-menu .menu {
  flex: 0 0 auto;
  position: relative;
  height: calc(var(--frame-h) * var(--content-height));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 3px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.mode-menu .menu::-webkit-scrollbar { display: none; }
body.mode-menu .dish { padding: 8px 12px; gap: 10px; }
body.mode-menu .dish-name { font-size: 15px; }
body.mode-menu .dish-toggle { width: 29px; height: 29px; font-size: 15px; }
body.mode-menu .dish-list { gap: 9px; }
body.mode-menu .section-divider { margin-bottom: 10px; font-size: 14px; }
/* 底部餐品记录导航组件：原展示宽度的 60%，始终相对画框居中。 */
body.mode-menu .cart-bar {
  width: calc(var(--frame-w) * 0.504);
  bottom: calc(var(--frame-top) + var(--frame-h) * 0.04 + env(safe-area-inset-bottom));
}

/* iPhone 安全区适配：顶部刘海 / 底部 Home Indicator */
#app {
  max-width: 480px;   /* 同时覆盖 iPhone 17 Pro ~402px 与 Pro Max ~440px 宽 */
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 92px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- 底图内导航热区 ---------- */
/* 可见文字完全由底图提供；下方仅为依据 OCR 实测坐标定位的透明热区。 */
.background-tabs,
.background-sub-tabs {
  position: fixed;
  z-index: 10;
  display: block;
  background: transparent;
}
/* 一级菜单卡片：新底图中「西式」卡片位于纵向 y=17%~25.5%。 */
.background-tabs {
  left: var(--frame-left);
  top: calc(var(--frame-top) + var(--frame-h) * 0.165);
  width: var(--frame-w);
  height: calc(var(--frame-h) * 0.09);
}
.background-tab-hitarea,
.background-subtab-hitarea {
  position: absolute;
  top: 0;
  height: 100%;
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 单张「西式」卡片居中展示：横向 x=41%~59%。 */
.background-tab-hitarea:nth-child(1) { left: 40.0%; width: 20.0%; }
/* 主菜单的三个二级文案位于 y=28%~33%。 */
.background-sub-tabs {
  left: var(--frame-left);
  top: calc(var(--frame-top) + var(--frame-h) * 0.275);
  width: var(--frame-w);
  height: calc(var(--frame-h) * 0.06);
}
.background-subtab-hitarea:nth-child(1) { left: 15.0%; width: 22.0%; }
.background-subtab-hitarea:nth-child(2) { left: 41.0%; width: 18.0%; }
.background-subtab-hitarea:nth-child(3) { left: 65.0%; width: 18.0%; }
.background-sub-tabs[hidden] { display: none; }
.background-tab-hitarea:focus-visible,
.background-subtab-hitarea:focus-visible {
  outline: 2px solid rgba(139, 47, 35, 0.78);
  outline-offset: -3px;
}

/* ---------- 菜单 ---------- */
.menu { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
body.mode-menu .menu { min-height: 0; }
.section-anchor { scroll-margin-top: 12px; }
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ink-soft);
}
.section-divider::before,
.section-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(90, 60, 30, 0.45), transparent);
}
.dish-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 菜品.png 已裁掉透明边缘（1069×112），作为每道菜的自适应边框底图。 */
.dish {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: clamp(38px, 10vw, 50px);
  padding: 7px 14px;
  background: url("assets/dish-frame.png") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  transition: filter 0.16s, box-shadow 0.16s, transform 0.1s;
}
.dish:active { transform: scale(0.99); }
.dish.selected {
  background: url("assets/dish-frame.png") center / 100% 100% no-repeat;
  box-shadow: 0 0 0 2px rgba(139, 47, 35, 0.72);
  filter: saturate(1.16);
}
.dish-info { flex: 1 1 auto; min-width: 0; }
.dish-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

/* 点选确认圆钮 */
.dish-toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  border: 1.4px solid rgba(90, 60, 30, 0.5);
  color: var(--accent);
  background: rgba(255, 250, 232, 0.6);
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.dish.selected .dish-toggle {
  background: var(--btn-bg);
  border-color: #6f2418;
  color: #fff7e6;
}

/* ---------- 餐品记录导航组件 ---------- */
/* navigator.png 原始比例为 2508×627，所有可见文案由图片本身提供。 */
.cart-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  width: min(92%, 444px);
  aspect-ratio: 2508 / 627;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s;
  z-index: 20;
}
.cart-bar:active { transform: translateX(-50%) scale(0.985); }
.cart-navigator-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* 图片中“已点”和“道”之间的预留区域（约 x=33.5%~42.3%）。 */
.cart-navigator-count {
  position: absolute;
  left: 37.6%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 1.2em;
  color: #21170d;
  font-family: var(--menu-font);
  font-size: clamp(11px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.cart-bar:focus-visible {
  outline: 2px solid rgba(70, 42, 20, 0.85);
  outline-offset: 3px;
}
.cart-bar[data-empty="true"] .cart-navigator-count { color: #21170d; }

/* ---------- 抽屉 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 18, 8, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.overlay[hidden] { display: none; }
/* 图片化半窗打开时覆盖页面上的所有常规浮层。 */
#cartOverlay { z-index: 120; }
.sheet {
  width: min(100%, 480px);
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--parchment-bg);
  background-color: #efe2c0;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 160px 160px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(40, 24, 10, 0.35);
  border-top: 2px solid rgba(120, 80, 40, 0.5);
}
/* 餐品记录窗口使用裁切后的 menulist.png，宽度完整覆盖当前 iPhone 17 Pro 底图画框。 */
.cart-sheet {
  width: var(--frame-w);
  height: calc(var(--frame-w) * 1268 / 1106);
  max-height: 74dvh;
  background: url("assets/cart-menulist.png") center bottom / 100% 100% no-repeat;
  background-color: #ead5a8;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cart-sheet .sheet-header {
  min-height: 16%;
  padding: 12px 8% 6px;
  border-bottom: 0;
}
.cart-sheet .sheet-header h2 { color: transparent; }
.cart-sheet .sheet-body {
  padding: 2px 9% 8px;
}
.cart-sheet .sheet-footer {
  position: relative;
  z-index: 80;
  padding: 6px 9% calc(env(safe-area-inset-bottom) + 10px);
  border-top: 0;
}
.cart-sheet .sheet-close {
  background: rgba(255, 248, 225, 0.65);
}
/* “选好了”确认图以自身比例显示，置于半窗全部内容之上。 */
.cart-confirm-button {
  position: relative;
  z-index: 100;
  display: block;
  width: 50%;
  aspect-ratio: 2172 / 539;
  margin: -40px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.16s;
}
.cart-confirm-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* 按钮文案由文字层提供（底图为无字空白按钮），方便后续改文案。 */
.cart-confirm-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, calc(var(--frame-w) * 0.042), 18px);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
}
.cart-confirm-button:active:not(:disabled) { transform: scale(0.985); }
.cart-confirm-button:disabled { cursor: not-allowed; opacity: 0.56; }
.cart-confirm-button:not(:disabled) { opacity: 1; }
.cart-confirm-button[aria-busy="true"] { opacity: 0.68; }
.cart-confirm-button:focus-visible {
  outline: 2px solid rgba(70, 42, 20, 0.85);
  outline-offset: 2px;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px dashed rgba(120, 80, 40, 0.4);
}
.sheet-header h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--ink);
}
.sheet-close {
  appearance: none;
  border: 1.4px solid rgba(90, 60, 30, 0.5);
  background: rgba(255, 250, 232, 0.6);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
}
.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px 12px;
  -webkit-overflow-scrolling: touch;
}
.sheet-footer {
  padding: 12px 18px calc(env(safe-area-inset-bottom) + 14px);
  border-top: 1px dashed rgba(120, 80, 40, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 购物车列表 */
.cart-empty {
  text-align: center;
  color: var(--ink-muted);
  padding: 40px 0;
  font-size: 14px;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  background: url("assets/dish-frame.png") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  margin-bottom: 10px;
}
.cart-item-info { flex: 1 1 auto; min-width: 0; }
.cart-item-name { margin: 0; font-size: 16px; font-weight: 700; }
.cart-remove {
  flex: 0 0 auto;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.2px solid rgba(90, 60, 30, 0.5);
  background: rgba(255, 250, 232, 0.6);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}

/* ---------- 表单 ---------- */
.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.field-input {
  width: 100%;
  appearance: none;
  background: rgba(255, 252, 240, 0.78);
  border: 1.4px solid rgba(120, 80, 40, 0.5);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  font-size: 16px; /* 避免 iOS 缩放 */
  font-family: inherit;
  color: var(--ink);
}
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(156, 47, 31, 0.18);
}
.booking-error {
  margin: 0;
  font-size: 13px;
  color: var(--seal);
  text-align: center;
}
.booking-error[hidden] { display: none; }

/* ---------- 按钮 ---------- */
.btn-primary {
  appearance: none;
  border: none;
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #fff7e6;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(70, 25, 15, 0.28);
  transition: background 0.16s, transform 0.1s;
}
.btn-primary:active:not(:disabled) {
  background: var(--btn-bg-active);
  transform: scale(0.99);
}
.btn-primary:disabled {
  background: linear-gradient(180deg, #b9a986, #998865);
  color: #f3e9d2;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- 成功页 ---------- */
/* 注意：HTML 中只有 id="successOverlay"，居中需要作用于 id 选择器。 */
#successOverlay { align-items: center; justify-content: center; }
/* 成功页使用裁掉透明边后的 menulist.png（cart-menulist.png，1106×1268），
   宽度与底图画框一致（iPhone 17 Pro 适配）；高度由内容驱动，底图拉伸适配，
   确保印章、标题、明细、备注、按钮全部在边框内。 */
.success-card {
  /* 与当前菜单背景画框使用同一宽度基准：iPhone 17 Pro 约为 402 CSS px。 */
  --success-frame-w: var(--frame-w, min(100vw, 440px));
  width: var(--success-frame-w);
  max-width: calc(100vw - 16px);
  max-height: 92dvh;
  margin: 0;
  padding: 4% 9% 5.5%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: url("assets/cart-menulist.png") center / 100% 100% no-repeat;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
  box-shadow: 0 14px 40px rgba(40, 24, 10, 0.4);
  overflow: hidden;
}
.success-seal {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff7e6;
  background: radial-gradient(circle at 50% 35%, #c0392b, #8b2f23);
  border: 3px solid #6f2418;
  box-shadow: 0 4px 14px rgba(70, 25, 15, 0.4);
}
/* 标题与订单号和虚线框共用画框半宽计算，沿同一中心轴展示。 */
.success-title {
  flex: 0 0 auto;
  align-self: center;
  width: 50%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: 0.16em;
  text-align: center;
  text-indent: 0;
  white-space: nowrap;
}
.success-order {
  flex: 0 0 auto;
  align-self: center;
  width: 50%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-align: center;
  text-indent: 0;
  white-space: nowrap;
}
/* 明细区的实际宽度由 app.js 在弹窗显示后读取背景画框并设置为其 50%。
   这里保留安全默认值，确保未执行脚本前也能居中展示。 */
.success-detail {
  flex: 0 1 auto;
  align-self: center;
  box-sizing: border-box;
  width: 50%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: 50dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: left;
  background: rgba(255, 250, 232, 0.55);
  border: 1px dashed rgba(120, 80, 40, 0.5);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
}
.success-detail::-webkit-scrollbar { display: none; }
.success-detail p { margin: 0 0 6px; word-break: break-all; }
.success-detail .label { color: var(--ink-muted); margin-right: 6px; white-space: nowrap; }
/* 与虚线框共用 app.js 的画框半宽计算，沿同一中心轴展示。 */
.success-note {
  flex: 0 0 auto;
  align-self: center;
  width: 50%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  text-align: center;
}
.success-card #againBtn { flex: 0 0 auto; width: 56%; margin: 0 auto; padding: 9px 18px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  background: rgba(46, 26, 14, 0.92);
  color: #ffe9c0;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  z-index: 99;
  max-width: 86%;
  text-align: center;
}
.toast[hidden] { display: none; }