/* ══ 发货申请（单独发送 / 合箱发送）══════════════════════════════════
 * **深链页 ship-request.html 与包裹列表里的发送弹窗共用这一份。**
 * 两个宿主都要引这个文件。
 * ══════════════════════════════════════════════════════════════════ */
/* ── 发货申请确认页 ────────────────────────────────────────────────
   ⚠️ 这是**独立页面**不是弹窗（PC-LAYOUT-RULES §4）：它有自己的动线、
   会被「我的包裹」直链进来、刷新之后必须还在、可以后退。
   ⚠️ 单件与多件是**同一个页面**：勾 1 个 = 单独发送，勾 2 个及以上 = 合箱发送。
      两者的区块、文案、顺序完全一样，差别只在底层调哪个接口（见提交处注释）。 */
.sr-stage{width:min(1120px,100%);margin:0 auto}
.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}

.sr-card{background:#fffdfb;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.sr-head{padding:22px 28px;border-bottom:1px solid var(--hair)}
.sr-head h1{font-size:20px;margin:0}
.sr-head .sub{font-size:12px;line-height:1.7;color:var(--ink3);margin-top:6px}
/* ⚠️ 单列，从上到下（2026-08-13 产品要求）。原来是 1.45fr + .55fr 两栏，
   右栏只放「为什么不能提交」，而同一句话「物流线路」块里已经有一份 ——
   一屏里同一段话出现两遍，读起来像两件事。 */
.sr-body{display:flex;flex-direction:column;gap:13px;padding:20px 22px;min-width:0}
.sr-main{display:flex;flex-direction:column;gap:13px;min-width:0}
/* 阻断说明紧贴提交按钮上方：它解释的是那颗按钮为什么点不动。
   ⚠️ 2026-08-14：原来是**灰底 + 虚线框 + 圆角全宽**，在这个站里那正是
      「禁用的输入框」的长相 —— 一句提示被读成一个填不了的控件。
      改成与 `cashier.css` 的 `.shipcash-unavailable` **同一形态**：
      那一条讲的也是「为什么不能继续付」，两页同一件事就该长得一样。 */
.sr-blockers{margin:0 22px;background:var(--warn-bg);
  border-radius:var(--r-lg);padding:11px 13px;font-size:12px;color:var(--warn);line-height:1.8}
/* ⚠️ `justify-content:flex-end` 把「取消 / 提交审核」推到右侧（2026-08-14 产品要求）。
   协议那一行是 `flex:1 1 100%`，独占整行、不受影响；只有换行后的按钮受它管。
   —— 这也是为什么不能改成 `.sr-foot > button{margin-left:auto}`：那样只有
   第一颗按钮被推走，两颗会被拆到两端。 */
.sr-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px 16px;flex-wrap:wrap;padding:16px 28px;border-top:1px solid var(--hair)}
.sr-foot .note{flex:1;font-size:11.5px;color:var(--sub);line-height:1.6}
@media (max-width:760px){.sr-body{padding:18px}.sr-head,.sr-foot,.sr-blockers{padding-left:18px;padding-right:18px}.sr-blockers{margin:0}}

.sr-sec{background:var(--panel);border-radius:var(--r-lg);padding:14px 16px}
.sr-sec > b{font-size:13px;display:block}
.sr-sec .lead{font-size:11.5px;color:var(--sub);line-height:1.75;margin-top:5px}
.sr-sum > b{font-size:17px;line-height:1.45}

.sr-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sr-thumb{width:52px;height:52px;display:grid;place-items:center;overflow:hidden;
  border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.sr-thumb img,.sr-thumb .img-missing{width:100%;height:100%;object-fit:contain;border-radius:0}
/* 🔴 没有图的那一档：把**商品名**排进去（`ship-request.js` 的 `srItemsHtml`）。
   由来：名字原来只挂在 `title=` 上，而**手机上没有 hover** —— 用户看到的是一个
   52px 灰方块，认不出自己正要寄走的是什么。
   ⚠️ 但只给类名不给样式更糟：52px 的方块 + `overflow:hidden` + 继承的 16px 字号，
      实测「ちいかわ ハチワレ うちわ」只露出「ちいか / わ ハ」，内容实高 326px 被裁进 52px。
      所以这一条必须跟着走：**放宽 + 缩字号 + 截断到两行**。
   ⚠️ `max-width` 不能省 —— 不设上限时长名字会把整行撑破（一件就占满一行）。 */
.sr-thumb-text{width:auto;max-width:210px;padding:0 10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-size:12px;line-height:1.35;text-align:center;color:var(--ink);
  white-space:normal;word-break:break-word}
.img-missing{display:grid;place-items:center;font-size:10px;color:var(--sub);background:var(--panel)}

/* 线路：日本邮政按服务端 available 渲染；一鹿专线永远是「筹备中·不可选」。 */
.sr-line{display:flex;align-items:center;gap:11px;margin-top:9px;padding:11px 12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.sr-line.pick{cursor:pointer}
.sr-line.pick:hover{border-color:var(--deer2)}
.sr-line.on{border-color:var(--deer);background:var(--cream)}
.sr-line.off{background:var(--panel);border-style:dashed;color:var(--ink3)}
.sr-line input{accent-color:var(--deer);width:16px;height:16px;flex:none}
.sr-line .main{flex:1;min-width:0}
.sr-line .nm{font-size:12.5px;font-weight:700;color:var(--ink)}
.sr-line.off .nm{color:var(--ink3)}
.sr-line .meta{font-size:11px;line-height:1.65;color:var(--sub);margin-top:3px}
/* 线路的硬约束（尺寸上限 / 赔付 / 税费）—— 拿不到的那条整条不渲染，见 srLineLimits */
.sr-line .lim{display:flex;flex-direction:column;gap:2px;margin-top:5px}
.sr-line .lim i{font-style:normal;font-size:10.5px;line-height:1.6;color:var(--ink3)}
.sr-line .lim em{font-style:normal;display:inline-block;min-width:52px;color:var(--sub)}
.sr-line .fee{text-align:right;white-space:nowrap;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums}
.sr-status{display:inline-flex;align-items:center;margin-top:10px;padding:3px 8px;border-radius:999px;
  background:var(--cream);color:var(--deer-d);font-size:10.5px;font-weight:700}

.sr-kv{display:flex;align-items:baseline;gap:8px;margin-top:9px;font-size:12.5px;line-height:1.55}
.sr-kv span{color:var(--sub);font-size:11.5px;flex:none}
.sr-kv strong{min-width:0;word-break:break-word}
.sr-kv .chg{margin-left:auto;border:0;background:transparent;color:var(--deer-d);font:inherit;
  font-size:12px;font-weight:700;cursor:pointer;padding:0;flex:none}
/* 🔴 手机上把点击区撑到 32px（2026-08-14 实测 375×812 只有 **19px**）。
   `.chg` 承载「添加地址」「去实名管理」—— 这一屏上**仅有的两个出口**：
   地址补不了就提交不了，而这一页正是分享链接/微信内会被打开的那一屏。
   ⚠️ 只在 ≤760 生效，PC 视觉不动。
   ⚠️ 用 `padding` + 等量负 `margin` 撑热区，不让行高跟着变 ——
      直接加 padding 会把 `.sr-kv` 这一行整体撑高，和旁边的键值对不齐。 */
@media (max-width:760px){
  .sr-kv .chg{padding:7px 6px;margin-top:-7px;margin-bottom:-7px;min-height:32px}
  /* 375 下「标签 + 值 + 动作」挤一行放不下：实名号会折成三行，最后单独掉一个
     「9」（实测截图）。改成「标签 + 动作」一行、值独占一行 —— 值有整行可用，
     不再从中间断开。⚠️ 只在窄屏；PC 那一行本来就够宽。 */
  .sr-kv{flex-wrap:wrap}
  .sr-kv strong{flex:1 1 100%;order:3}
}


.sr-agree{flex:1 1 100%;display:flex;align-items:flex-start;gap:9px;font-size:12px;
  line-height:1.7;color:var(--ink2);cursor:pointer}
.sr-agree input{width:16px;height:16px;border-radius:5px;accent-color:var(--deer);flex:none;margin-top:2px}
.sr-agree input:disabled{cursor:not-allowed}
.sr-cta[aria-disabled="true"],.sr-cta:disabled{background:var(--panel);color:var(--sub);cursor:not-allowed}

/* ── 弹窗形态下的差异 ────────────────────────────────────────────────
   ⚠️ 弹窗里**不再画一层卡片边框**：ylSheet 本身就是卡片，再套一层
      就是「盒子里套盒子」，边框贴边框。只保留内部分区。 */
.ship-request-sheet .sr-card{background:transparent;border:0;border-radius:0}
.ship-request-sheet .sr-head{display:none}   /* 标题由弹窗头部给，不重复一遍 */
.ship-request-sheet .sr-body{padding:2px 0 0}
.ship-request-sheet .sr-blockers{margin:0}
.ship-request-sheet .sr-foot{padding:16px 0 2px}

/* ══ 线路参考报价行（2026-08-15）════════════════════════════════
   产品指出：这一屏原来只有两个服务商名，用户在按「提交审核」之前
   **不知道要花多少钱、多久到** —— 而那正是他要做的决定。
   ⚠️ 只读，不是选择器：后端 consolidate 没有 lineCode 入参，
      硬口径也是「入仓复称后才确定最终线路」。
      摆一排点不了的单选框，是这一页当天上午刚踩过的坑。 */
.sr-quote { display: flex; align-items: flex-start; gap: 12px; }
.sr-quote .main { flex: 1; min-width: 0; }
.sr-qnote { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; }
.sr-qnote i { font-style: normal; font-size: 11px; color: var(--ink3); }
.sr-qfee { flex: none; text-align: right; line-height: 1.3; }
.sr-qfee b { font-size: 16px; font-weight: 700; color: var(--ink); }
.sr-qfee span { display: block; font-size: 10.5px; color: var(--sub); }

/* 线路可选（C1，2026-08-15 后端交付 routeCode 后接上）。
   ⚠️ 选中态用边框+底色，不用「✓ 已选定」字样 —— 后端落的是
      `requestedLine`（第一意愿），核价后才有正式 selection。
      写「已选定」就是把意愿说成了结论。 */
.sr-line.pick { cursor: pointer; }
.sr-line.pick input { position: absolute; opacity: 0; pointer-events: none; }
.sr-line.pick.on { border-color: var(--deer); background: var(--cream); }
.sr-line.pick:hover:not(.on) { border-color: var(--line-d); }

/* ══════════ 分箱预警 + 分箱意愿（2026-08-17）══════════
   ⚠️ 令牌全部用 style.css 已有的（--warn / --line / --deer / --sub / --panel），
      不新造颜色。金额一律墨色（不用错误色/品牌色强调对用户不利的数字）。 */

/* ⚠️ `.sr-intent` / `.sr-opt(s)` / `.sr-pack` / `.sr-chip(s)` 已随分箱意愿一起删除
   （2026-08-18 重做稿）。留着不会报错、也不会显示成什么 —— 正因为如此，
   下一个人会以为那几块 UI 还在，照着样式去找对应的渲染代码。 */
.sr-note { display: block; margin-top: 10px; }
.sr-note span { display: block; font-size: 11.5px; color: var(--sub, #8B7C83); margin-bottom: 5px; }
.sr-note textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px;
  padding: 9px 11px; border: 1px solid var(--line, #E6DFE2); border-radius: 6px; resize: vertical; }
.sr-note textarea:focus { outline: 0; border-color: var(--deer2, #A63A56); }

/* ⛔ 预警卡与「费用对比」弹层的样式已随那块 UI 一起删（2026-08-18）。
   留着不报错也不显示什么 —— 正因如此，下一个人会以为那块 UI 还在。 */


/* ── 提交前提醒层（2026-08-18 重做稿）────────────────────────────── */
.sr-confirm { display: flex; flex-direction: column; gap: 11px; }
.sr-hard { border: 1px solid #EFC8C0; border-radius: 10px; background: #FBEDEA; padding: 12px 14px; }
.sr-hard b { font-size: 13px; color: #8E2A20; }
.sr-hard p { margin: 6px 0 0; font-size: 12px; line-height: 1.75; color: var(--ink2, #5C4F55); }
.sr-rem { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 0; }
.sr-rem li { padding: 10px 0; border-bottom: 1px solid var(--line-l, #F0EBED);
  font-size: 12px; line-height: 1.7; color: var(--ink2, #5C4F55); }
.sr-rem li:last-child { border-bottom: 0; }
.sr-note i { font-style: normal; margin-left: 5px; color: var(--sub, #8B7C83); font-weight: 400; }
.sr-note-hint { font-size: 11px; line-height: 1.6; color: var(--sub, #8B7C83); }