/* ==========================================================================
   商城「下单 / 付款码」两个对话框（原在 shop.css，2026-10-25 拆出来）
   --------------------------------------------------------------------------
   为什么要拆：shop.html 在 2026-10-24 15:58 重构成 `shp-*` 后**不再引 shop.css**，
   而这两个对话框的样式仍留在 shop.css 里 —— 于是已登录用户点「立即购买」时，
   弹窗被创建成一个**没有任何样式的大块**贴在文档最底部（实测 top 1913px、
   position 不是 fixed），屏幕上只看到商品详情弹窗纹丝不动。
   店主看到的「点了没反应」就是它。

   为什么不干脆让 shop.html 再引一遍 shop.css：那会把重构前的**整站旧版商城版式**
   一起带回来，和 shop-v3.css 打架（这正是当初移除它的原因）。
   所以只把这一段挪到独立文件，按需引用：shop.html + 仍在用这些样式的 5 个老页。

   z-index 700 —— 高于卡组编辑器浮层(620)与单卡弹窗(640)。
   ========================================================================== */

/* ── 预定对话框（shop.html，2026-10-19）────────────────────────────
   替掉原来的 window.prompt：数量用步进器、收货信息从「我的地址」里选。
   z-index 700 —— 高于卡组编辑器浮层(620)与单卡弹窗(640)。 */
.shop-dlg { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(10,10,11,.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.shop-dlg-card { display: flex; flex-direction: column; width: min(480px, 96vw); max-height: 90vh;
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; }
.shop-dlg-hd { display: flex; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--ink-4); }
.shop-dlg-hd b { font-size: 15px; color: var(--text); }
.shop-dlg-x { margin-left: auto; appearance: none; cursor: pointer; font: inherit;
  width: 28px; height: 28px; border-radius: 7px; font-size: 12px;
  color: var(--text-3); background: var(--ink-3); border: 1px solid var(--ink-4); }
.shop-dlg-x:hover { border-color: var(--gold); color: var(--gold-ink); }
.shop-dlg-bd { padding: 16px; overflow-y: auto; flex: 1 1 auto; }
.shop-dlg-item { display: flex; align-items: center; gap: 12px; padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-4); }
.shop-dlg-item img { width: 56px; height: 76px; object-fit: cover; border-radius: 6px; display: block; }
.shop-dlg-item .shop-ph { position: static; width: 56px; height: 76px; border-radius: 6px; font-size: 24px; }
.shop-dlg-item b { display: block; font-size: 14px; line-height: 1.4; color: var(--text); }
.shop-dlg-item span { font-size: 11.5px; color: var(--text-3); }
.shop-dlg-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.shop-dlg-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.shop-dlg-row .lbl { flex: none; width: 64px; font-size: 12.5px; color: var(--text-3); }
.shop-qty { display: flex; align-items: center; border: 1px solid var(--ink-4);
  border-radius: 8px; overflow: hidden; }
.shop-qty button { appearance: none; cursor: pointer; font: inherit; width: 34px; height: 34px;
  font-size: 15px; line-height: 1; color: var(--text-2); background: var(--ink-3); border: 0; }
.shop-qty button:hover { background: var(--ink-4); color: var(--gold-ink); }
.shop-qty b { min-width: 38px; text-align: center; font-size: 13.5px; color: var(--text); }
.shop-dlg-unit { font-size: 11px; color: var(--text-3); }

.shop-dlg-addrs { display: flex; flex-direction: column; gap: 8px; }
.addr-opt { position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--ink-4); transition: border-color .15s; }
.addr-opt:hover { border-color: rgba(255,224,0,.4); }
.addr-opt.on { border-color: var(--gold); background: rgba(255,224,0,.06); }
.addr-opt input { position: absolute; opacity: 0; pointer-events: none; }
.addr-opt-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.addr-opt-t b { font-size: 13px; color: var(--text); }
.addr-opt-t i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.addr-opt-t em { font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.7;
  padding: 0 7px; border-radius: 999px; color: var(--on-accent); background: var(--gold); }
.addr-opt-x { font-size: 11.5px; line-height: 1.55; color: var(--text-2); }
.shop-dlg-newaddr { font-size: 12px; color: var(--gold-ink); text-decoration: none; padding: 2px 0; }
.shop-dlg-newaddr:hover { text-decoration: underline; }
.shop-dlg-noaddr { font-size: 12.5px; line-height: 1.8; color: var(--text-3); }
.shop-dlg-noaddr a { color: var(--gold-ink); }

.shop-dlg-sum { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 11px 13px; border-radius: 10px; background: var(--ink-3); }
.shop-dlg-sum span { font-size: 12px; color: var(--text-2); }
.shop-dlg-sum b { font-size: 17px; font-weight: 800; color: var(--gold-ink); }
.shop-dlg-sum .muted { color: var(--text-3); }
.shop-dlg-ft { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ink-4); }
.shop-dlg-ok { flex: 1 1 auto; appearance: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 9px;
  color: var(--on-accent); background: var(--gold); border: 1px solid var(--gold); }
.shop-dlg-ok:hover:not(:disabled) { filter: brightness(1.08); }
.shop-dlg-ok:disabled { background: var(--ink-3); border-color: var(--ink-4);
  color: var(--text-3); cursor: not-allowed; }
.shop-dlg-cancel { flex: none; appearance: none; cursor: pointer; font: inherit; font-size: 13px;
  padding: 10px 18px; border-radius: 9px; color: var(--text-2);
  background: transparent; border: 1px solid var(--ink-4); }
.shop-dlg-cancel:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ── 假码支付弹窗（2026-10-22）──────────────────────────────────────
   「出示假码 → 模拟扫码 → 自动下单」这一屏。绿色底只给"已付款成功"用，
   与全站"成功 = 绿"一致；二维码白底（QR 必须有足够对比才能扫，虽然这里扫不出钱）。 */
.shop-pay-amt { font-size: 12.5px; color: var(--text-2); text-align: center; }
.shop-pay-amt b { font-size: 20px; font-weight: 800; color: var(--gold-ink); margin-left: 4px; }
.shop-pay-qr {
  display: flex; justify-content: center; align-items: center;
  margin: 12px auto; padding: 10px; width: 176px; height: 176px;
  background: #fff; border-radius: 10px;
}
.shop-pay-qr svg { width: 156px; height: 156px; display: block; }
.shop-pay-note { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-3); text-align: center; }
.shop-pay-note b { color: var(--text-2); }
.shop-pay-ok {
  margin: 6px 0 10px; text-align: center; font-size: 15px; font-weight: 800;
  color: #6FD79B;
}
/* 「查看我的单」在这里是 <a>，要按 .shop-dlg-ok 的样子居中排 */
a.shop-dlg-ok { display: flex; align-items: center; justify-content: center; text-decoration: none; }