/* ============================================================
   待付款订单悬浮窗（Pending dock）
   沿用 design-system.css 的设计变量，风格与全站一致：
   白底 + 细描边 + 大圆角 + 柔和投影 + 品牌蓝 #348CFF / 价格橙 #F04E23
   ============================================================ */
.pending-dock{position:fixed;right:24px;bottom:24px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-size:13px;color:var(--ink-700);}
.pending-dock.hidden,.pending-panel.hidden{display:none}

/* ---------- 悬浮按钮 ---------- */
.pending-launcher{display:flex;align-items:center;gap:10px;
  padding:10px 16px 10px 12px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 12px 30px rgba(15,23,42,.14);cursor:pointer;
  color:var(--ink-900);font:500 13px/1 inherit;letter-spacing:-.01em;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);}
.pending-launcher:hover{transform:translateY(-2px);border-color:var(--brand-100);
  box-shadow:0 18px 40px rgba(15,23,42,.20)}
.pending-launcher:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.pending-launcher-icon{position:relative;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);}
.pending-launcher-icon i{font-size:13px}
.pending-launcher-icon em{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--price);color:#fff;
  font:600 11px/18px inherit;font-style:normal;text-align:center;
  box-shadow:0 0 0 2px #fff;letter-spacing:0}
.pending-launcher-text{white-space:nowrap}
.pending-launcher-chevron{font-size:11px;color:var(--ink-400);transition:transform .22s var(--ease)}
.pending-dock.open .pending-launcher-chevron{transform:rotate(180deg)}
.pending-dock:not(.open) .pending-launcher{animation:pending-breathe 3.6s var(--ease) infinite}
@keyframes pending-breathe{0%,100%{box-shadow:0 12px 30px rgba(15,23,42,.14)}
  50%{box-shadow:0 12px 30px rgba(52,140,255,.28)}}
@media (prefers-reduced-motion:reduce){
  .pending-dock:not(.open) .pending-launcher{animation:none}
  .pending-launcher,.pending-launcher-chevron{transition:none}
}

/* ---------- 面板 ---------- */
.pending-panel{width:344px;max-width:calc(100vw - 32px);
  border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--surface);
  box-shadow:0 24px 60px rgba(15,23,42,.18);overflow:hidden;
  transform-origin:bottom right;animation:pending-rise .24s var(--ease);}
@keyframes pending-rise{from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}}
.pending-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--canvas)}
.pending-head h3{margin:0;font-size:15px;font-weight:700;color:var(--ink-900);letter-spacing:-.02em}
.pending-head p{margin:4px 0 0;font-size:12px;color:var(--ink-500);line-height:1.5}
.pending-total{flex:none;min-width:38px;padding:4px 10px;border-radius:999px;
  background:var(--brand-500);color:#fff;font:600 13px/1.4 inherit;text-align:center}
.pending-list{max-height:min(46vh,340px);overflow-y:auto;padding:10px;
  display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
.pending-item{padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.pending-item:hover{border-color:var(--brand-100);box-shadow:var(--shadow-sm)}
.pending-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pending-row b{font-size:13.5px;font-weight:500;color:var(--ink-900);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-row strong{flex:none;font:600 15px/1 inherit;color:var(--price);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pending-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:6px;font-size:11.5px;color:var(--ink-400);font-variant-numeric:tabular-nums}
.pending-bar{margin-top:8px;height:4px;border-radius:999px;background:var(--canvas);overflow:hidden}
.pending-bar i{display:block;height:100%;border-radius:999px;background:var(--brand-500);
  transition:width 1s linear,background .3s var(--ease)}
.pending-item.urgent .pending-bar i{background:var(--price)}
.pending-item.urgent .pending-left{color:var(--price)}
.pending-actions{display:flex;gap:8px;margin-top:12px}
.pending-actions button{flex:1;height:34px;border-radius:var(--r-md);
  font:500 12.5px/1 inherit;cursor:pointer;transition:.18s var(--ease);white-space:nowrap}
.pending-resume{border:1px solid var(--brand-500);background:var(--brand-500);color:#fff;
  box-shadow:0 4px 12px rgba(52,140,255,.24)}
.pending-resume:hover{background:var(--brand-600);border-color:var(--brand-600)}
.pending-cancel{flex:0 0 84px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-500)}
.pending-cancel:hover{border-color:var(--ink-400);color:var(--ink-700)}
.pending-cancel.confirming{border-color:var(--price);background:var(--price-soft);color:var(--price-deep)}
.pending-actions button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.pending-empty{padding:26px 18px;text-align:center;font-size:12.5px;color:var(--ink-400)}
.pending-empty i{display:block;margin-bottom:8px;font-size:20px;color:var(--line-strong)}

@media (max-width:640px){
  .pending-dock{right:12px;bottom:12px;gap:10px}
  .pending-launcher-text{display:none}
  .pending-launcher{padding:9px 12px}
  .pending-panel{width:calc(100vw - 24px)}
  .pending-list{max-height:52vh}
}