/*
 * 扫码付款弹窗。下载页（/downcode/{id}）和订单支付页（/MoneyPay/{number}）
 * 共用这一份 —— 两边原来只有下载页有弹窗，订单支付页一律跳外站，
 * 于是同一个网站上「买东西」有两种完全不同的样子。
 *
 * 类名一律 pay-qr- 开头（原来叫 dl-qr-，那是「下载页」的意思，
 * 搬到订单支付页之后就名不副实了）。
 */

.pay-qr-body { text-align: center; padding: 8px 20px 18px; }
.pay-qr-amount { font-size: 14px; color: #666; margin: 0 0 14px; }
.pay-qr-amount b { font-size: 24px; color: #ff5000; font-weight: 700; }

/* 固定尺寸：二维码是脚本画进来的，容器不占位的话弹窗会先塌一下再撑开 */
.pay-qr-box { width: 220px; height: 220px; margin: 0 auto; padding: 8px;
              border: 1px solid #eee; border-radius: 4px; background: #fff; }
.pay-qr-box canvas, .pay-qr-box img, .pay-qr-box table { width: 204px !important; height: 204px !important; }

.pay-qr-tabs { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px; }
.pay-qr-tab { flex: 0 0 96px; padding: 7px 0; font-size: 13px; color: #666; cursor: pointer;
              background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.pay-qr-tab:hover { border-color: #40c641; color: #40c641; }
.pay-qr-tab.active { border-color: #40c641; color: #40c641; font-weight: 700; background: #f4fcf5; }
/* 切换过程中不许再点：这一下会去支付网关下一笔新单 */
.pay-qr-tab[disabled] { opacity: .5; cursor: default; }

.pay-qr-box.is-loading { opacity: .35; }
.pay-qr-tip { margin: 14px 0 0; font-size: 14px; color: #333; }
.pay-qr-state { margin: 8px 0 0; font-size: 12px; color: #999; min-height: 18px; }
.pay-qr-state.is-paid { color: #40c641; }
.pay-qr-state.is-bad { color: #ff5000; }
.pay-qr-foot { text-align: center; border-top: 1px solid #f0f0f0; padding: 12px; }
.pay-qr-help { font-size: 12px; color: #999; }
.pay-qr-help:hover { color: #40c641; }

/* 窄屏：弹窗本体在 bootstrap 里是 380px 写死的，手机上会顶出去。
   码本身不缩（缩了扫不出来），缩的是它周围的留白。 */
@media (max-width: 420px) {
    #pay_qr_modal .modal-dialog { width: auto !important; margin: 10px; }
    .pay-qr-body { padding: 8px 10px 16px; }
    .pay-qr-tab { flex: 0 0 80px; }
}