/**
 * 微信官方支付 · 收银台样式（后台测试弹窗 + 前台收银台共用）
 *
 * 为什么要单独一份文件：
 *   同一块收银台 UI 会在**三个地方**出现 —— 超管后台的「测试微信配置」弹窗、
 *   站长后台的同一个弹窗、以及客户付款时的收银台（order-detail / wallet / work）。
 *   分别写三份内联样式，改一处忘两处，二维码尺寸 / 按钮宽度迟早各长一个样。
 *   所以统一放这里，三边都用 <link rel="stylesheet" href="…/js/wxpay.css"> 引同一份。
 *
 * 类名统一 wxp- 前缀（wx pay），和项目里 ad- / pg- / ac- 那些前缀不冲突：
 *   wxp-box      外壳（居中）
 *   wxp-head     标题
 *   wxp-amount   金额
 *   wxp-qr       二维码容器（白底 + 内边距，扫码要留白）
 *   wxp-tip      说明文字
 *   wxp-wait     等待付款的提示（浅底）
 *   wxp-btn      去支付按钮
 *
 * ⚠️ 只用 CSS 变量（--brand / --text-1 …），这些变量 base.css 里都有；
 *    万一某个页面没加载 base.css，下面的兜底值也能看（var(--x, 兜底)）。
 */

.wxp-box {
  text-align: center;
  padding: 4px 0 2px;
}
.wxp-head {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #1F2937);
}
.wxp-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-1, #1F2937);
  margin-top: 6px;
  letter-spacing: .5px;
}
.wxp-qr {
  display: inline-block;
  margin: 14px auto 4px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--line, rgba(16,24,40,.08));
  border-radius: 12px;
  line-height: 0;
}
.wxp-qr canvas { display: block; }
.wxp-tip {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2, #4B5563);
  margin-top: 8px;
}
.wxp-wait {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3, #6B7280);
  background: var(--glass-weak, rgba(16,24,40,.04));
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 12px;
}
.wxp-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: #07C160;                 /* 微信绿：这一步是微信在收钱，用它的颜色最不容易看错 */
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.wxp-btn:disabled { opacity: .6; cursor: not-allowed; }
.wxp-box + .ad-field__hint { margin-top: 10px; }