/* ══ 收银台 ═══════════════════════════════════════════════════════
 * **深链页 cashier.html 与订单/包裹弹窗里的付款弹窗共用这一份。**
 * 两个宿主都要引。
 * ══════════════════════════════════════════════════════════════════ */
/* ── 合并支付 ─────────────────────────────────────── */
.tip{margin:12px 0 0;padding:9px 11px;border-radius:6px;font-size:12.5px;line-height:1.6;
     background:var(--soft,#f5f6f8);color:var(--sub)}
/* ── 金额头 ───────────────────────────────────────── */
.payhd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.payhd .lbl{font-size:11.5px;color:var(--sub)}
.payhd .amt{font-family:ui-monospace,Menlo,monospace;font-size:32px;font-weight:700;margin-top:4px;
  font-variant-numeric:tabular-nums}
.payhd .amt small{font-size:14px;font-weight:400;color:var(--ink2);margin-left:4px}
.payhd .cny{font-size:12.5px;color:var(--sub)}
.closein{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--bad-bg);
  color:var(--bad);font-size:12.5px;padding:8px 15px;border-radius:var(--r-pill)}
.closein b{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ── P3 收银台：宽屏舞台只留给已退役的历史合并支付页 ─────────────
   新的单笔收银台（.solo）只有单号、应付金额、支付方式三块，撑满宽屏
   只会在右边留一大片空白，所以内容区收窄居中。 */
.cashier-stage{max-width:1120px;padding-top:26px}
.cashier-stage.solo{max-width:840px}
/* 标题居中（2026-08-13 产品口述）。 */
.cashier-stage h1{text-align:center}
/* 单笔收银台：一张竖着排的卡（.card 自带 1px 描边），区块之间只用发丝线分隔。
   ⚠️ 顶边曾是 4px 主色重色条，2026-08-21 产品拍板去掉（同 order-detail.css
   的 .detail-status：压在卡片顶上的重色条不要）。 */
.cashier-sec{padding:22px 28px;border-top:1px solid var(--hair)}
.cashier-sec:first-child{border-top:0}
.cashier-sec .lbl{font-size:11.5px;color:var(--sub)}
.cashier-sec .seclabel{margin:0 0 11px;font-size:13px;font-weight:700;color:var(--ink)}
.cash-amt{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-top:7px;
  font-family:ui-monospace,Menlo,monospace;font-size:42px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums}
.cash-amt small{font-family:inherit;font-size:16px;font-weight:400;color:var(--ink2)}
/* ⚠️ 倒计时已挪到卡片右上角，样式见下面的 .cashier-top / .cash-deadline。 */
.cash-deadline .closein{margin:0;font-weight:700}
.cash-no{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px}
.cash-no+.cash-no{margin-top:9px}
.cash-no span:first-child{color:var(--ink2)}
/* 发起后渠道被后端锁死（一张付款单只允许一个 activeAttempt），说明这件事 */
.cash-lock{margin-top:11px;padding:10px 12px;border-radius:var(--r-lg);background:var(--panel);
  font-size:12px;line-height:1.75;color:var(--ink2)}
/* 锁定说明的第二行：光说「不能换」是把用户堵死，必须带一条真能走的出路。 */
.cash-lock-out{display:block;margin-top:6px;color:var(--ink3)}
.linkbtn{border:0;background:transparent;padding:0;font:inherit;color:var(--deer-d);
  text-decoration:underline;cursor:pointer}
.cash-go{display:flex;align-items:center;gap:11px;margin-top:16px}
.cash-go .hint{flex:1;font-size:11.5px;color:var(--sub);line-height:1.6}
.cash-help{margin-top:14px;text-align:center}
.cash-help button{border:0;background:transparent;font:inherit;font-size:12px;color:var(--sub);
  cursor:pointer;text-decoration:underline;padding:0}
.payhelp{display:flex;flex-direction:column;gap:12px;line-height:1.7}
@media (max-width:520px){.cash-go{align-items:stretch;flex-direction:column}.cash-go .btn{width:100%}}
.cashier-card{width:100%;max-width:none;margin:0;padding:0;overflow:hidden}
.cashier-head{display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;
  padding:26px 30px;border-bottom:1px solid var(--hair)}
.cashier-head .amt{font-size:36px;line-height:1;margin-top:6px}
.cashier-head .cny{margin-top:7px}
.cashier-head .closein{margin:0 0 0 auto;flex:none}
.cashier-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);align-items:stretch}
.cashier-payment-panel{min-width:0;padding:24px 30px}
.cashier-payment-panel .cashier-payment{padding:0}
.cashier-payment .seclabel{margin:0 0 11px;font-size:13px;font-weight:700;color:var(--ink)}
.cashier-summary{display:flex;flex-direction:column;gap:13px;padding:24px;background:var(--panel);border-left:1px solid var(--hair)}
.cashier-summary .payfacts,.cashier-summary .shipcash-bill{margin:0;background:#fff;border:1px solid var(--line)}
@media (max-width:1000px){
  .cashier-body{grid-template-columns:1fr}.cashier-summary{border-left:0;border-top:1px solid var(--hair);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cashier-stage{padding-top:20px;padding-bottom:54px}.cashier-head{align-items:flex-start;padding:20px 18px;gap:14px}
  .cashier-head .closein{margin-top:2px}.cashier-payment-panel,.cashier-summary{padding:18px}
  .cashier-summary{display:flex}.cashier-sec{padding:18px}.cash-amt{font-size:34px}
}
/* ⚠️ 支付方式卡片的样式已移到 style.css —— 确认订单页也要用同一套
   （设计稿 03 给确认订单页加了支付方式选择）。两页各写一份必然分叉。 */
/* 「已带入上一步选的 X，可以改」 */
.pmcarry{font-size:11.5px;color:var(--ink3);margin-bottom:9px}
/* 多笔订单提示：放在整页最上面 —— 它要回答的是「我这一笔付完就完了吗」 */
.batchnote{background:var(--warn-bg);color:#8A5A16;border-radius:var(--r-lg);
  padding:11px 15px;font-size:12.5px;line-height:1.75;margin-bottom:14px}
.batchnote b{font-weight:700}
.batchnote a{font-weight:700;color:inherit;text-decoration:underline}

.qrbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px 16px;text-align:center}
.qrimg{width:150px;height:150px;border-radius:var(--r-lg);background:var(--cream);
  border:1px dashed var(--deer2);display:grid;place-items:center;font-size:11px;color:var(--sub);
  margin:0 auto;line-height:1.6;overflow:hidden;padding:8px}
.qrimg img{width:100%;height:100%;object-fit:contain}
.qrimg svg{width:100%;height:100%;display:block}
.qrtip{font-size:11.5px;color:var(--ink2);margin-top:9px;line-height:1.7}
.qrbox.degraded .qrimg{border-style:solid;border-color:var(--line);background:var(--hair)}
/* ── 付不了的时候说人话 ─────────────────────────────────────────
   ⚠️ 这一块原来复用 .qrbox.degraded，于是「支付通道尚未开通」被画进一个
      150×150 的灰方块里 —— 那个形状就是个「码位」，用户第一反应是二维码没加载
      出来（产品原话：「阴影的部分去掉」）。它不是码，是一段说明，就该长成说明的样子。
   这里只改表达方式：**不放开任何可点性**，通道能不能用仍由服务端的 usable 决定。 */
.paystop{border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 18px;background:var(--panel)}
.paystop .t{font-size:14px;font-weight:700;color:var(--ink);line-height:1.5}
.paystop .d{margin-top:8px;font-size:12.5px;line-height:1.85;color:var(--ink2)}
.paystop .acts{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.paystop .acts .btn{flex:1;min-width:132px}
.qr-again{margin-top:12px}
.qr-again .btn{width:100%}
.qrbox .btn.block{margin-top:12px}
.qrbox .qractions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.payfacts{display:flex;flex-direction:column;gap:8px;background:var(--cream);border-radius:var(--r-lg);padding:12px 14px;margin-top:14px}
.payfacts div{display:flex;justify-content:space-between;gap:14px;font-size:12px}
.payfacts span:first-child{color:var(--sub)}
/* ── 支付方式与付款位（2026-08-13 产品口述重排）─────────────────────
   四条要求：标题居中、渠道左右并排、**页面预留二维码位置**、倒计时进右上角。
   页面级的「立即支付」已按产品要求删掉，动作跟着渠道走（见 paymentSlotHtml）。
   🔴 预留位是重点：原来选完渠道才把码撑出来，页面高度当场跳一下。现在这块
      一进页面就在，占位、真码、跳转说明三种内容都装在同一个盒子里。
   ⚠️ 占位**不画灰色码框** —— 一个灰方块加二维码轮廓，用户只会以为码没加载出来
      （这正是产品说的「阴影」）。占位就写清楚它在等什么。 */
.pmlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.payslot{display:flex;align-items:center;justify-content:center;min-height:286px;margin-top:14px;
  padding:16px;border:1px dashed var(--line);border-radius:var(--r-xl);background:var(--panel)}
.payslot-hint{max-width:290px;text-align:center;font-size:12.5px;line-height:1.85;color:var(--sub)}
.payslot-hint b{display:block;color:var(--ink2);font-size:13px;margin-bottom:4px}
.payslot .qrbox{border:0;padding:0;background:transparent;width:100%}
.payslot .qrimg{width:196px;height:196px;border:0;background:transparent;padding:0}
.payslot .qrbox.degraded .qrimg{border:0;background:transparent}
/* 演示码的标签：**必须比码本身更显眼**，不然就是一张长得跟真码一样的假码。 */
.qrdemo{display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--warn-bg);color:#8A5A16;font-size:11.5px;font-weight:700}
/* 动作按钮跟着渠道走，长在付款位里（不再有页面级的「立即支付」）。 */
.payslot-hint .btn{display:block;margin:15px auto 0;min-width:186px}
/* 倒计时挪到卡片右上角（产品口述）。⚠️ 位置换了但**分量不能降** ——
   它是「再不付就作废」的唯一提示，所以仍用 .closein 那颗醒目药丸，不缩小。 */
.cashier-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.cash-deadline{flex:none;text-align:right}
.cash-deadline em{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:var(--sub)}
@media (max-width:560px){
  .pmlist{grid-template-columns:1fr}
  .cashier-top{display:block}.cash-deadline{margin-top:14px;text-align:left}
}

/* ⚠️ 整页扫码屏（`.qr-scene*`）已随「码就地出在预留位里」一起退役，样式全部删除。
   要找它的话：二维码现在由 renderQrScene 填进 `.payslot`，见上面那段。 */

.paidbox{background:var(--ok-bg);border-radius:var(--r-lg);padding:14px 16px;
  font-size:13px;color:var(--ok);line-height:1.8}
.payacts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ── 包裹级国际运费收银台 ──────────────────────────────
   第二笔真实落在一个 billing order 上只是支付网关的原子锚点；用户支付的
   对象始终是一整个包裹。这里不能复用首款的商品卡，避免把某一件商品误画成
   整箱费用。 */
.shipcash-head{display:flex;justify-content:space-between;gap:24px;padding:2px 0 18px;
  border-bottom:1px solid var(--hair);align-items:flex-start}
.shipcash-eyebrow{font-size:11.5px;font-weight:700;color:var(--deer-d);letter-spacing:.04em}
.shipcash-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:5px}
.shipcash-title h2{margin:0;font-size:21px;line-height:1.3}
.shipcash-count{font-size:12px;color:var(--sub);padding:3px 8px;border-radius:999px;background:var(--cream)}
.shipcash-copy{margin:7px 0 0;font-size:12px;color:var(--ink3);line-height:1.7}
.shipcash-total{min-width:170px;text-align:right;flex:none}
.shipcash-total .k{display:block;font-size:11.5px;color:var(--sub)}
.shipcash-total .v{display:block;margin-top:4px;font-family:ui-monospace,Menlo,monospace;
  font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.shipcash-total .v small{font-family:inherit;font-size:12px;font-weight:500;color:var(--ink2);margin-left:4px}
.shipcash-total .cny{margin-top:5px}
.shipcash-facts{display:grid;grid-template-columns:minmax(170px,1.5fr) minmax(110px,.8fr) minmax(150px,1fr);
  gap:0;margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.shipcash-fact{min-height:76px;padding:13px 15px;border-left:1px solid var(--line)}
.shipcash-fact:first-child{border-left:0}
.shipcash-fact .k{display:block;font-size:11.5px;color:var(--sub)}
.shipcash-fact .v{display:block;margin-top:7px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.45}
.shipcash-fact .v.muted{font-weight:400;color:var(--ink3)}
.shipcash-fact .v b{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.shipcash-bill{margin-top:13px;padding:12px 14px;border-radius:var(--r-lg);background:var(--panel)}
.shipcash-bill .t{font-size:12px;font-weight:700;color:var(--ink)}
.shipcash-bill .r{display:flex;justify-content:space-between;gap:16px;padding-top:7px;font-size:12px;color:var(--ink3)}
.shipcash-bill .r b{font-family:ui-monospace,Menlo,monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.shipcash-bill .r.total{margin-top:7px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink);font-weight:700}
.shipcash-bill .r.total b{font-size:14px}
.shipcash-unavailable{margin-top:13px;padding:11px 13px;border-radius:var(--r-lg);background:var(--warn-bg);
  color:var(--warn);font-size:12px;line-height:1.7}
@media (max-width:640px){
  .shipcash-head{display:block}.shipcash-total{text-align:left;margin-top:16px}
  .shipcash-facts{grid-template-columns:1fr}.shipcash-fact{min-height:auto;border-left:0;border-top:1px solid var(--line)}
  .shipcash-fact:first-child{border-top:0}
}

/* ── 弹窗形态下的差异 ────────────────────────────────────────────────
   ⚠️ 弹窗里不再画外层卡片：ylSheet 本身就是卡片，再套一层就是盒里套盒。
   ⚠️ 也不要那条「收银台」大标题 —— 弹窗头部已经写了。 */
.cashier-sheet .cashier-card{border:0;border-radius:0}
/* 第一段的上内边距归零：弹窗头部已经给了标题与留白，再留一段就空得突兀。 */
.cashier-sheet .cashier-sec:first-child{padding-top:2px}
.cashier-sheet .cashier-sec{padding-left:0;padding-right:0}