/* 百姓厨房 · My Orders（/member.html）
 * 2026-09-30 丁 · 陛下反馈 §5（P0）：「与新首页完全断层」→ 本页重做。
 *
 * 设计纪律：字体 / 圆角 / 按钮 / 颜色**不是照抄**，而是直接引用首页那张 /css/style.css，
 * 壳层（顶栏、Primary 按钮、Bottom Sheet、Toast）用的就是首页那几个类（.site-header / .brand /
 * .chip / .icon-btn / .btn-primary / .btn-ghost / .detail-* / .toast）。
 * 本文件只放**本页专有**的东西：查单表单、订单卡、订单详情里的行样式。
 * 铁律：组件内不硬编码色值，一律引用 tokens.css 的变量。 */

/* 屏幕阅读器可见、视觉不可见（详情抽屉的标题用，抽屉本身靠 × 关闭） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

body { padding-bottom: var(--space-xl); }

/* ═══════════ 布局 ═══════════ */
.mo-main {
  max-width: 720px; margin: 0 auto;
  padding: var(--space-sm);
  display: grid; gap: var(--space-sm);
}
.mo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);      /* 16px，与首页菜品卡同一档 */
  box-shadow: var(--shadow-card);
  padding: var(--space-sm);
}

/* ═══════════ 查单（My Orders / Find your order / 两行 = 一个输入框 + Find Order） ═══════════ */
.mo-title {
  font-family: var(--font-display);       /* 与首页 .menu-heading h1 完全同一套 */
  font-size: var(--text-xl);
  letter-spacing: 1px;
  line-height: 1.2;
}
.mo-sub { color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.mo-form { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.mo-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs);
}
.mo-input {
  width: 100%; min-width: 0;
  min-height: var(--h-cta);               /* 52px，与首页主按钮同高 */
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-input);     /* 12px */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: 16px;                        /* ≥16px：iOS 聚焦不放大 */
  font-weight: 700;
  letter-spacing: 0.3px;
}
.mo-input::placeholder { color: var(--muted); font-weight: 600; letter-spacing: 0.2px; }
.mo-input:focus { border-color: var(--tomato); outline: none; box-shadow: 0 0 0 3px var(--tomato-soft); }
/* Find Order：就是首页的 .btn-primary，只压一下横向内衬让它在 390px 上和输入框并排 */
.mo-go { flex: 0 0 auto; min-height: var(--h-cta); padding: 0 var(--space-sm); white-space: nowrap; }
/* —— OR —— */
.mo-or {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-2xs);
  margin: 2px 0;
}
.mo-or::before, .mo-or::after { content: ""; height: 1px; background: var(--line); }
.mo-or span { color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: 1.5px; }

/* 错误提示：与首页同色系 */
.m-error {
  background: var(--tomato-soft); color: var(--tomato-deep);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--text-sm);
}
.m-hint { color: var(--muted); font-size: var(--text-xs); }

/* ═══════════ 已查到：谁 + 退出 ═══════════ */
.mo-who { display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; }
.mo-who-name { font-family: var(--font-display); font-size: var(--text-lg); }
.mo-who-phone { color: var(--muted); font-size: var(--text-sm); font-family: var(--font-num); }
#accountCard { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); flex-wrap: wrap; }
#accountCard.hidden { display: none !important; }

/* ═══════════ 订单卡（陛下 §5 的四行：单号 / 🔥 状态 / 可取时间 / 金额 →） ═══════════ */
.mo-orders-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2xs); }
.mo-orders-title { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 1px; }
.mo-count { color: var(--muted); font-size: var(--text-xs); }
.mo-order-list { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
.mo-order {
  width: 100%; text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-xs);
  display: grid; gap: 3px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1);
}
.mo-order:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.mo-order:active { transform: translateY(0); }
.mo-order-no { font-family: var(--font-num); font-size: 14px; font-weight: 800; letter-spacing: 0.4px; color: var(--ink-soft); }
.mo-order-status { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; line-height: 1.35; }
.mo-order-status.is-new { color: var(--mustard-deep); }
.mo-order-status.is-making { color: var(--tomato-deep); }
.mo-order-status.is-ready { color: var(--herb-deep); }
.mo-order-status.is-done { color: var(--muted); }
.mo-order-eta { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.mo-order-track { font-size: 12.5px; font-weight: 800; color: var(--tomato-deep); }
/* 第四轮 §5：卡片最后一行就是 `View order →`，文字与箭头作为一个整体靠右，不再左右分家 */
.mo-order-bottom {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.mo-order-cta { font-size: 13.5px; font-weight: 800; color: var(--tomato-deep); }
.mo-order-arrow { color: var(--tomato); display: inline-flex; align-items: center; }
.mo-order-arrow svg { width: 18px; height: 18px; }
/* 非正常支付态（待付款 / 已取消 / 支付异常）才多显示一行 —— 正常单不加噪 */
.mo-order-flag {
  justify-self: start;
  border-radius: var(--radius-full); padding: 2px 9px;
  font-size: var(--text-xs); font-weight: 800;
  background: var(--mustard-soft); color: var(--mustard-deep);
}
.mo-order-flag.is-bad { background: var(--tomato-soft); color: var(--tomato-deep); }

/* ═══════════ 订单详情抽屉内部 ═══════════ */
/* .detail-card 的高度已由 style.css 统一成「贴内容长、最高 90vh」，本页无需覆盖 */
.mo-detail { padding: var(--space-sm); display: grid; gap: 10px; }
.mo-detail .btn-primary { width: 100%; }
/* 第六轮「My Orders 三处」③：进行中的订单不再放主按钮，改放一枚次级 .btn-ghost「Back to menu」。
   同宽对齐上面那颗 Primary 的历史宽度，不然换状态后按钮会忽然缩成一小颗。 */
.mo-detail .btn-ghost { width: 100%; }
.m-block { display: grid; gap: 2px; }
.m-kv { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-sm); padding: 3px 0; }
.m-kv span:first-child { color: var(--muted); }
.m-kv span:last-child { text-align: right; font-weight: 600; }
.m-items { display: grid; gap: 6px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: var(--space-2xs) 0; }
.m-item-row { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-sm); }
.m-item-row .m-item-name { display: grid; }
.m-item-row em { color: var(--muted); font-style: normal; font-size: var(--text-xs); }
/* 盒饭所选菜（2026-09-30）：明细行下面缩进一行 */
.m-item-choice { font-size: var(--text-xs); color: var(--muted); margin: -4px 0 2px; padding-left: 2px; }
.m-total-row { display: flex; justify-content: space-between; font-family: var(--font-num); font-size: var(--text-md); font-weight: 700; }
.m-empty { color: var(--muted); font-size: var(--text-sm); padding: var(--space-sm) 0; text-align: center; }

/* ═══════════ 出餐进度 Stepper（2026-09-30 辛 · 第六轮「My Orders 三处」①）═══════════
   陛下原话：现在这四条像「后台状态条」，要 `●────○────○────○` 那种真正的 Stepper。
   改法（**不动 JS 结构**，只换这几行的皮 —— markup 仍是 .m-progress > 4× .m-step
   > .m-step-bar + .m-step-label，省掉一次 DOM 改动的风险）：
     · .m-step-bar 由 6px 通栏长条 → 14px 圆点；
     · 点与点的连线交给 .m-step::before：四格等宽、圆点居中，所以
       「上一格圆心 → 本格圆心」正好是 left:-50% / right:50% 这一段；
     · 首格左边没有上一格，:first-child 关掉连线。
   连线两端各缩进 11px（= 圆点半径 7 + 留白 4），这样线是**断开**的，
   不需要再拿背景色画一圈盖住 —— 详情面板底色换过也不会露馅。
   配色按陛下的口径：当前=番茄红 / 已完成=深墨 / 未来=浅灰 --line。
   沿革：上一版是「红=当前 / 绿=已完成」的色条，绿色仍留在 .m-badge 等别处，这里不再用。 */
.m-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.m-step { position: relative; display: grid; gap: 6px; justify-items: center; }
.m-step::before {
  content: ""; position: absolute; top: 6px;
  left: calc(-50% + 11px); right: calc(50% + 11px);
  height: 2px; border-radius: var(--radius-full); background: var(--line);
}
.m-step:first-child::before { display: none; }
.m-step-bar { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.m-step-label { font-size: var(--text-xs); color: var(--muted); text-align: center; line-height: 1.25; }
/* 已经走到这一格：连到它的那条线一起变深，才读得出「进度到这儿了」。
   2026-09-30 癸（第七轮 §5）：线由 --ink 改成 **--tomato（active 色）** ——
   陛下的口径是 `🔴━━🔴━━○━━○`：走过的**整段线**都要是 active 色，现在的深墨还是太浅。
   本轮**只动这一行**：圆点、标签、布局、结构一律没碰（is-done 的圆点仍是深墨，
   那是第六轮陛下定过的「当前=番茄红 / 已完成=深墨」，不越权改）。 */
.m-step.is-done::before, .m-step.is-now::before { background: var(--tomato); }
.m-step.is-done .m-step-bar { background: var(--ink); }
.m-step.is-done .m-step-label { color: var(--ink-soft); }
.m-step.is-now .m-step-bar { background: var(--tomato); }
.m-step.is-now .m-step-label { color: var(--tomato-deep); font-weight: 700; }

/* ═══════════ 支付状态徽标（只在详情里出现） ═══════════ */
.m-badge {
  border-radius: var(--radius-full); padding: 3px 10px;
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.m-badge.is-pending { background: var(--mustard-soft); color: var(--mustard-deep); border-color: var(--mustard); }
.m-badge.is-paid, .m-badge.is-confirmed { background: var(--herb-soft); color: var(--herb-deep); border-color: var(--herb); }
.m-badge.is-cancelled, .m-badge.is-payment_error { background: var(--tomato-soft); color: var(--tomato-deep); border-color: var(--tomato); }

/* ---------- Uber Direct 追踪（2026-09-28）---------- */
.m-track { color: var(--tomato-deep); font-weight: 800; text-decoration: none; }
.m-track-note { color: var(--muted); font-size: 12.5px; }

/* ═══════════ 页脚 ═══════════ */
.mo-foot { text-align: center; color: var(--muted); font-size: var(--text-xs); padding: var(--space-xs) 0 var(--space-lg); }
.mo-foot a { color: var(--tomato-deep); font-weight: 700; }

/* ═══════════ 桌面 / 平板 ═══════════ */
@media (min-width: 768px) {
  .mo-main { padding: var(--space-md); gap: var(--space-md); }
  .mo-card { padding: var(--space-md); }
  /* 详情抽屉在桌面上也照首页的规矩变成居中 Modal（style.css 已给 .detail-card 桌面宽高，
     这里只把遮罩对齐方式改回居中） */
  .detail-overlay { align-items: center; }
  .detail-card { border-radius: var(--radius-modal); }
}