/* 订单页：状态分组 + 白卡表格 + 支付 / 详情弹窗 */
.order-tabs { margin-bottom: var(--section-gap); }
/* 分段轨道用共享的 6% 黑，滑块几何由 tt-tabs 负责 */
.order-tabs .tt-tabs { background: var(--segment-track); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.order-tabs .tt-tabs::-webkit-scrollbar { display: none; }

/* ---------- 白卡表格 ---------- */
.order-list { padding: 12px 16px 16px; min-height: 160px; }
.order-list .tt-table-wrap { overflow-x: auto; }
.order-table { width: 100%; }
.order-table th { white-space: nowrap; }
/* 列间距收紧：1024 宽（侧栏收成图标栏）时整张表也放得下，订单号不被截断 */
.order-table th,
.order-table td { padding-left: 10px; padding-right: 10px; }
.order-table th:first-child,
.order-table td:first-child { padding-left: 12px; }
.order-table th:last-child,
.order-table td:last-child { padding-right: 12px; }
/* 订单列：商品名（长了换行）+ 订单号（等宽、不省略）；数字列等宽右对齐 */
.cell-product { display: block; max-width: 200px; font: var(--t-body-strong); color: var(--text-1); overflow-wrap: anywhere; }
.cell-channel { font: var(--t-body); color: var(--text-2); white-space: nowrap; }
.cell-orderno {
  display: block;
  font: var(--t-caption);
  font-family: var(--font-mono);
  color: var(--text-3);
  white-space: nowrap;
}
.cell-amount { font: var(--t-body-strong); font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.cell-time { font: var(--t-caption); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.order-table td.cell-action,
.order-table th.cell-action { text-align: right; white-space: nowrap; }
.order-table td.cell-action .tt-btn + .tt-btn { margin-inline-start: 4px; }
/* 分页每页条数 */
.order-size-changer { width: auto; height: var(--control-h-sm); padding: 0 32px 0 12px; }

/* ---------- 移动端卡片 ---------- */
.order-cards { display: flex; flex-direction: column; gap: 12px; }
.mobile-pagination { display: flex; justify-content: center; margin-top: 16px; }
.order-card {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-e1);
  cursor: pointer;
}
.order-card:active { background: var(--bg-sunken); }
.oc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 0;
  box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--border);
}
.oc-product {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--t-title);
  color: var(--text-1);
}
.oc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.oc-label { flex-shrink: 0; font: var(--t-body); color: var(--text-3); }
.oc-value { font: var(--t-body); text-align: right; word-break: break-all; color: var(--text-1); }
.oc-tradeno { font-family: var(--font-mono); color: var(--text-2); }
.oc-amount { font: var(--t-body-strong); font-variant-numeric: tabular-nums; }
.oc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0;
  box-shadow: inset 0 var(--hairline) 0 var(--border);
}

/* ---------- 支付弹窗 ---------- */
.pm-body { padding-top: 4px; }
.pm-summary {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-inner);
  background: var(--bg-sunken);
}
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.pm-label { font: var(--t-body); color: var(--text-2); }
.pm-value { font: var(--t-body-strong); color: var(--text-1); text-align: right; word-break: break-all; }
.pm-amount { font: var(--t-stat); font-variant-numeric: tabular-nums; color: var(--primary-text); }
.pm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pm-section-title { font: var(--t-body-strong); color: var(--text-1); }
.pm-section-note { font: var(--t-caption); color: var(--text-3); }
.pm-methods { display: flex; flex-direction: column; gap: 8px; }
.pm-method {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  color: var(--text-1);
  font: var(--t-body);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) ease-out;
}
.pm-method:hover { background: var(--control-fill); }
.pm-method:active { transform: scale(0.98); }
.pm-method:focus-visible { outline: 1.5px solid var(--primary); outline-offset: 2px; }
.pm-method.active { background: var(--selected-fill); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pm-method-icon { width: 24px; height: 24px; object-fit: contain; border-radius: var(--radius-xs); }
.pm-method-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pm-method-name { font: var(--t-body-strong); }
.pm-method-hint { font: var(--t-caption); color: var(--text-3); }
.pm-method-check { margin-left: auto; font-size: var(--icon-18); color: var(--primary); }
.pm-balance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-inner);
  background: var(--bg-sunken);
}
.pm-balance-icon { font-size: var(--icon-28); color: var(--primary-text); }
.pm-balance-title { font: var(--t-body-strong); color: var(--text-1); }
.pm-balance-tip { margin-top: 2px; font: var(--t-caption); color: var(--text-3); }
.pm-rate { font: var(--t-caption); color: var(--text-3); }
.pm-help-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
}
.pm-help-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-help-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-full);
  color: var(--text-1);
  background: var(--primary);
  font: var(--t-label);
}
.pm-help-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-help-text strong { font: var(--t-body-strong); color: var(--text-1); }
.pm-help-text span { font: var(--t-caption); color: var(--text-2); }
.pm-help-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--primary-text);
  background: var(--bg-card);
  font: var(--t-button);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) ease-out;
}
.pm-help-link:hover { background: var(--primary-soft-hover); }
.pm-help-link:focus-visible { background: var(--primary-soft-hover); outline: 1.5px solid var(--primary); outline-offset: 2px; }
.pm-help-link:active { transform: scale(0.98); }
.pm-help-intro { margin: 0 0 16px; font: var(--t-body-secondary); color: var(--text-2); }
.pm-help-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: help; }
.pm-help-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font: var(--t-body);
  color: var(--text-1);
}
.pm-help-list li::before {
  counter-increment: help;
  content: counter(help);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: var(--text-1);
  background: var(--primary);
  font: var(--t-label);
  font-variant-numeric: tabular-nums;
}
.pm-help-footer {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: var(--bg-sunken);
  font: var(--t-body-secondary);
}
.pm-help-footer strong { color: var(--text-1); font-weight: 600; }
.pm-foot { margin-top: 20px; }

/* 支付状态页（轮询 / 成功 / 失败） */
.pm-status { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 8px 8px; text-align: center; }
.pm-status-title { margin-top: 6px; font: var(--t-dialog-title); color: var(--text-1); }
.pm-status-tip { max-width: 340px; font: var(--t-body-secondary); color: var(--text-2); }
.pm-status-usdt { font: var(--t-title); font-variant-numeric: tabular-nums; color: var(--primary-text); }
.pm-status.has-iframe { padding-top: 8px; gap: 8px; }
.pm-frame-wrap {
  position: relative;
  width: 100%;
  height: min(62vh, 560px);
  height: min(62dvh, 560px);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 var(--hairline) var(--border);
  /* 允许滚动：iOS 下 iframe 会被内容撑开，由外层容器滚动 */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card);
}
.pm-frame-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 遮罩不拦截 iframe 内的点击与滚动 */
  pointer-events: none;
}
.pm-frame { width: 100%; height: 100%; min-height: 100%; border: none; display: block; }

/* 扫码支付 */
.pm-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.pm-qr-amount { font: var(--t-stat-large); font-variant-numeric: tabular-nums; color: var(--text-1); }
.pm-qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  padding: 10px;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 var(--hairline) var(--border);
  background: var(--bg-card);
}
.pm-qr-img { width: 100%; height: 100%; display: block; }
.pm-qr-scan-tip { display: inline-flex; align-items: center; gap: 6px; font: var(--t-body-secondary); color: var(--text-2); }
.pm-status-actions { display: flex; gap: 12px; margin-top: 12px; }

/* ---------- 订单详情弹窗 ---------- */
.od-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning-text);
  font: var(--t-body);
}
.od-cd-time { margin-left: auto; font-weight: 600; }
.od-section { padding: 12px 0; border-bottom: 0; box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--border); }
.od-section:first-child { padding-top: 0; }
.od-section:last-child { box-shadow: none; }
.od-section-title { margin-bottom: 8px; font: var(--t-label); color: var(--text-2); }
.od-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.od-label { flex-shrink: 0; font: var(--t-body); color: var(--text-3); }
.od-value { font: var(--t-body); color: var(--text-1); text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
.od-amount { font: var(--t-stat); font-variant-numeric: tabular-nums; color: var(--primary-text); }
.od-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .pm-method,
  .pm-help-link { transition: none; }
  .pm-method:active,
  .pm-help-link:active { transform: none; }
}

@media (max-width: 768px) {
  /* 内嵌收银台：按可视高度留出顶栏、标题与底部按钮，iOS 工具栏 / 键盘弹出时按钮仍在屏内 */
  .pm-frame-wrap {
    height: 60vh;
    height: max(320px, calc(var(--vvh, var(--vh)) - 300px - var(--safe-top) - var(--safe-bottom)));
  }
  .oc-top > :last-child { flex: none; }
  .od-row { padding: 7px 0; }
  .pm-method { min-height: 56px; }
  /* 弹层底部操作：吸附在可滚动内容区底边。sticky 偏移从滚动容器的内边距算起，
   * 所以 bottom 与 margin 都要抵消 modal-body 的底部内边距，才能贴齐弹层边缘 */
  .pm-foot,
  .od-foot,
  .pm-status-actions {
    position: sticky;
    bottom: calc(-24px - var(--safe-bottom));
    z-index: 2;
    margin: 16px -20px calc(-24px - var(--safe-bottom));
    padding: 12px 20px calc(12px + var(--safe-bottom));
    border-top: 0;
    box-shadow: inset 0 var(--hairline) 0 var(--border);
    background: var(--bg-card);
  }
  .pm-status-actions { align-self: stretch; margin-inline: -28px; margin-bottom: calc(-32px - var(--safe-bottom)); }
  .pm-status-actions > .tt-btn { flex: 1 1 0; }
  .pm-foot .tt-btn,
  .od-foot .tt-btn,
  .pm-status-actions .tt-btn { height: 40px; border-radius: var(--radius-lg); }
  .od-foot { flex-direction: row-reverse; }
  .od-foot > .tt-btn { flex: 1 1 0; }
  /* 列表：去掉外层卡片，订单项本身是白卡 */
  .order-list.tt-card { padding: 0; box-shadow: none; background: transparent; }
  .pm-help-bar { align-items: stretch; flex-direction: column; }
  .pm-help-link { width: 100%; }
}