/* ══ 国际运费确认（第二次付款）══════════════════════════════════════
 * **深链页 ship-pay.html 与包裹详情里的付运费弹窗共用这一份。**
 * ⚠️ 它**不是收银台** —— 是「费用明细 + 协议勾选」那一步，确认之后才进收银台。
 * ══════════════════════════════════════════════════════════════════ */
/* P7 是独立的运费确认页：定稿没有账户区侧栏，桌面端使用完整交易舞台。 */
.ship-pay-stage{width:min(1120px,100%);margin:0 auto}
.ship-pay-stage > #box{width:100%}

.degrade{background:var(--panel);border:1px dashed var(--line-d);border-radius:var(--r-md);
  padding:11px 13px;font-size:11.5px;color:var(--ink3);line-height:1.8}
.pane{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 18px;margin-bottom:12px}
.pane > b{font-size:13.5px;display:block}
.pane .sub{font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.75}

.gline{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:center}
.gline img{width:46px;height:46px;object-fit:contain;background:var(--panel);border-radius:var(--r-sm);flex:none}
.gline .t{font-size:12.5px;color:var(--ink);line-height:1.5}
.gline .m{font-size:11px;color:var(--sub);margin-top:2px}
.gline .kg{margin-left:auto;font-size:12.5px;font-weight:700;white-space:nowrap}

/* 多服务商线路选择 */
/* 选线会在本页局部刷新。预留滚动条位，避免“已选”内容略高时页面宽度跟着跳一下。 */
html{scrollbar-gutter:stable}
.route-groups{display:grid;gap:11px;margin-top:11px}
.route-provider{border:1px solid var(--grid);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.route-provider.off{background:var(--panel)}
.route-provider-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;background:var(--panel);font-size:11px;color:var(--sub)}
.route-provider-hd strong{font-size:13px;color:var(--ink)}
.route{display:flex;align-items:center;gap:11px;padding:12px;min-block-size:94px;border-top:1px solid var(--hair)}
.route:first-child{border-top:0}
.route.current{background:var(--cream)}
.route input{accent-color:var(--deer);width:16px;height:16px;flex:none}
.route input:focus-visible,.route-select:focus-visible{outline:2px solid var(--deer);outline-offset:3px}
.route .main{flex:1;min-width:0}
.route .route-title{display:flex;align-items:center;gap:5px 6px;min-width:0}
.route .nm{font-size:13px;font-weight:700;color:var(--ink)}
.route .ds{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.7}
.route .rt{flex:0 0 144px;width:144px;min-width:144px;text-align:right;margin-left:auto;white-space:nowrap;
  display:grid;grid-template-rows:22px 42px;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.route .rt .fee{min-block-size:22px;display:flex;align-items:center;justify-content:flex-end;font-size:15px;font-weight:700;color:var(--ink)}
.route .rt .act{min-block-size:42px;display:flex;align-items:center;justify-content:flex-end}
.route-select,.route-action-state{box-sizing:border-box;inline-size:100%;min-block-size:42px}
.route-select{padding:8px 10px}
.route-action-state{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;
  border:1.5px solid transparent;border-radius:var(--r-pill);font-size:11.5px;color:var(--sub)}
.route-action-state.selected{border-color:var(--line-d);background:var(--panel);color:var(--ink2);font-weight:700}
.route-action-state.pending{border-color:var(--deer2);background:var(--cream);color:var(--deer-d)}
.route-chips{display:flex;flex:1 1 170px;min-width:0;gap:5px;flex-wrap:wrap;margin:0}
.route-chip{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink3);font-size:10px;font-weight:600}
.route-chip.on{border-color:var(--deer);background:var(--cream);color:var(--deer-d)}
.route-status{min-inline-size:58px;justify-content:center}
.route-status.is-empty{visibility:hidden}
.route-empty{padding:11px 12px;font-size:11.5px;color:var(--sub);line-height:1.7}
.criteria{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:9px;padding:9px 11px;
  background:var(--panel);border-radius:var(--r-md);font-size:11.5px;color:var(--ink3)}
@media (max-width:700px){
  .route{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start}
  .route .main{grid-column:2;grid-row:1}
  .route .rt{grid-column:2;grid-row:2;inline-size:100%;width:100%;min-width:0;margin-left:0;
    grid-template-columns:minmax(0,1fr) 144px;grid-template-rows:42px;gap:10px;text-align:left}
  .route .rt .fee{justify-content:flex-start}
}
@media (max-width:430px){
  .route .rt{grid-template-columns:1fr;grid-template-rows:22px 42px;gap:4px}
  .route .rt .act{justify-content:stretch}
}

/* 清关状态与费用表 */
.kv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--hair)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink3)}
.warnbox{background:var(--warn-bg);border-radius:var(--r-md);padding:10px 12px;margin-top:9px;
  font-size:11.5px;color:var(--warn);line-height:1.8}
.sumtab{border:1px solid var(--grid);border-radius:var(--r-sm);overflow:hidden}
.sumtab .r{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:12.5px;
  border-bottom:1px solid var(--hair);color:var(--ink3)}
.sumtab .r b{color:var(--ink)}
.sumtab .r.tot{background:var(--cream);border-bottom:0;font-size:13px;color:var(--ink);padding:11px 12px}
.sumtab .r.tot b{font-size:17px}

/* P7：报价已锁定时只展示确认付款需要的包裹事实，不再混入选线流程。 */
.freight-card{width:100%;max-width:none;background:#fffdfb;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.freight-head{padding:22px 28px;border-bottom:1px solid var(--hair)}
.freight-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.freight-title h1{font-size:20px;margin:0}
.freight-no{font-size:12.5px;color:var(--sub);flex:1}
.freight-quote{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:5px;
  background:var(--bad-bg);color:var(--bad);font-size:11.5px;font-weight:700}
.freight-quote b{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.freight-head .sub{font-size:12px;line-height:1.7;color:var(--ink3);margin-top:6px}
.freight-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:16px;padding:20px 22px}
.freight-primary,.freight-summary{display:flex;flex-direction:column;gap:13px;min-width:0}
.freight-bottom{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:16px 28px;border-top:1px solid var(--hair)}
.freight-bottom .amount{flex:1}.freight-bottom .amount span{display:block;font-size:11.5px;color:var(--sub)}
.freight-bottom .amount b{font-family:ui-monospace,Menlo,monospace;font-size:20px}.freight-bottom .amount small{font-size:12px;font-weight:400;color:var(--ink3)}
@media (max-width:760px){.freight-body{grid-template-columns:1fr;padding:18px}.freight-head,.freight-bottom{padding-left:18px;padding-right:18px}}
@media (max-width:560px){.freight-bottom{align-items:stretch}.freight-bottom .ybtn{width:100%}}

/* 规则表（单件限制 / 禁运品 / 理赔）：说明很长要换行，所以不用 .kv 的两端对齐 */
.rule{display:grid;grid-template-columns:76px 1fr;gap:6px 12px;font-size:12px;line-height:1.8;margin-top:9px}
.rule .k{color:var(--ink3)}
.rule .v{color:var(--ink2)}
.rulehd{margin-top:13px;font-size:12.5px;font-weight:700;color:var(--ink)}

/* ── P7 定稿：发货确认 · 支付运费 ──────────────────────────────
   这一页是全流程唯一展示国内收货地址与清关实名的地方，所以主列按
   「箱内商品 → 怎么寄 → 寄到哪里 → 清关实名 → 关税」自上而下排，
   右侧只留一件事：这次要付多少、以及付款前必须勾的那一条。 */
.sp-sec{background:var(--panel);border-radius:var(--r-lg);padding:14px 16px}
.sp-sec > b{font-size:13px;display:block}
.sp-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-hd .sp-count{font-size:11.5px;color:var(--sub);font-weight:400}
.sp-lead{font-size:11.5px;color:var(--sub);line-height:1.75;margin-top:5px}
.sp-link{font-size:11.5px;font-weight:700;color:var(--deer-d);white-space:nowrap}
.sp-cs{font-size:11.5px;color:var(--sub);margin-left:auto;white-space:nowrap}

.sp-items{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sp-item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-md);padding:11px 14px;min-width:0}
.sp-item img,.sp-item .sp-thumb{width:38px;height:38px;border-radius:8px;background:var(--panel);object-fit:contain;flex:none}
.sp-item .copy{min-width:0}
.sp-item .nm{font-size:12.5px;font-weight:700;line-height:1.45;word-break:break-word}
.sp-item .no{font-size:11px;color:var(--sub);margin-top:2px}
.sp-more{grid-column:1/-1;background:none;border:1px dashed var(--line-d);border-radius:var(--r-md);
  padding:9px;font:inherit;font-size:11.5px;color:var(--ink3);cursor:pointer}
.sp-more:hover{border-color:var(--deer);color:var(--ink)}

.sp-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:10px}
.sp-kv .r{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.6}
.sp-kv .k{color:var(--ink3);white-space:nowrap}

.sp-card{background:#fff;border-radius:var(--r-md);padding:12px 14px;margin-top:10px}
.sp-addr .who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700}
.sp-addr .full{font-size:12px;color:var(--ink2);line-height:1.7;margin-top:4px}
.sp-note{font-size:11.5px;color:var(--sub);line-height:1.75;margin-top:9px}
.sp-body{font-size:12px;color:var(--ink2);line-height:1.8;margin-top:8px}

.sp-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-id .nm{font-size:12.5px;font-weight:700}
.sp-id .lv{font-size:11.5px;color:var(--sub)}
.sp-id .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--ok);
  background:var(--ok-bg);border-radius:var(--r-pill);padding:2px 9px}
.sp-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin-top:12px}
.sp-why b{font-size:12px;display:block}
.sp-why p{font-size:12px;color:var(--ink2);line-height:1.7;margin-top:3px}

.sp-fees .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;padding:9px 0;border-bottom:1px solid var(--hair)}
.sp-fees .r .k{color:var(--ink3)}
.sp-fees .r .k em{font-style:normal;color:var(--sub);font-size:11.5px}
/* 券抵扣：负数用绿色，和站里其他折扣行同一视觉 —— 用户扫一眼就知道
   这一行是「减了钱」而不是「又收了一笔」。 */
.sp-fees .r.discount .k,.sp-fees .r.discount .mono{color:var(--ok,#3E8E5A)}
/* 「仓储费 · 已预付 08-19 → 0」。用与折扣同一档绿：两者都是「这里你不用再掏钱」。 */
.sp-fees .r.prepaid .k em,.sp-fees .r.prepaid .mono{color:var(--ok,#3E8E5A)}
.sp-fees .tot{border-bottom:0;padding-top:12px}
.sp-fees .tot .amt{font-size:22px;font-weight:700}
.sp-fees .tot .amt small{font-size:12px;font-weight:400;color:var(--ink3)}

.sp-agree{flex:1 1 100%;display:flex;align-items:flex-start;gap:9px;padding-bottom:2px;
  font-size:12px;line-height:1.7;color:var(--ink2);cursor:pointer}
.sp-agree input{width:16px;height:16px;border-radius:5px;accent-color:var(--deer);flex:none;margin-top:2px}
.sp-agree input:disabled{cursor:not-allowed}
.sp-cta[aria-disabled="true"]{background:var(--panel);color:var(--sub);cursor:not-allowed}
.sp-cta[aria-disabled="true"]:hover{background:var(--panel)}
@media (max-width:900px){.sp-why{grid-template-columns:1fr}}
@media (max-width:560px){.sp-items,.sp-kv{grid-template-columns:1fr}}

/* ── 弹窗形态下的差异 ──────────────────────────────────────────────── */
.ship-pay-sheet .freight-card{border:0;border-radius:0}
.ship-pay-sheet .freight-card > :first-child{padding-top:2px}

/* ★ C1 下游：平台改过线时，在报价上面说清楚（app.js requestedLineNoticeHtml）。
   放在数字前面 —— 用户先知道「为什么是这条」，再看金额。 */
.line-changed{background:var(--warn-bg,#fff7ed);border:1px solid var(--warn-line,#fed7aa);
  border-radius:10px;padding:10px 12px;margin:0 0 10px;font-size:12.5px;line-height:1.75}
.line-changed b{display:block;margin-bottom:2px}
.line-changed .why{color:var(--sub);margin-top:4px}
.line-changed + .criteria{margin-top:0}
.sp-sec > .line-changed{margin-bottom:12px}