/* 支付页样式 */
.pay-main { padding: 32px 20px 20px; max-width: 900px; }
.pay-title { font-size: 22px; font-weight: 600; margin: 8px 0 18px; }

.tip { border-radius: var(--bk-radius-md); padding: 14px 16px; font-size: 14px; line-height: 1.8; margin-bottom: 18px; }
.tip b { font-weight: 600; }
.tip.warn { background: #FFF4E5; border: 1px solid #FFE0B2; color: #8A4B00; }
.tip.err  { background: #FCEBEB; border: 1px solid #F7C1C1; color: #A32D2D; }
.tip.promo{ background: var(--bk-primary-bg); border: 1px solid var(--bk-primary-border); color: var(--bk-primary-dark); }
.mp-qr-mini {
  margin-top: 12px; width: 168px; height: 168px; border-radius: var(--bk-radius-md);
  background: var(--bk-bg-gray); border: 1px dashed var(--bk-border);
  display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--bk-text-3);
}

.box { background: var(--bk-bg-card); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg); padding: 24px; margin-top: 20px; box-shadow: var(--bk-shadow-card); }
.box h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }

.steps { margin: 0 0 6px 18px; font-size: 14px; color: var(--bk-text-2); line-height: 2; }
.field { margin: 16px 0 14px; }
.field input {
  width: 100%; height: 48px; border: 1.5px solid var(--bk-border); border-radius: var(--bk-radius-md);
  padding: 0 14px; font-size: 16px; outline: none; background: #fff; font-family: inherit;
}
.field input:focus { border-color: var(--bk-primary); }
.btn-pay { width: 100%; height: 50px; font-size: 16px; }
.btn-pay:disabled { opacity: .45; cursor: not-allowed; }
.fine { font-size: 12px; color: var(--bk-text-3); margin-top: 12px; line-height: 1.7; }

.result { border-color: #BBF7D0; background: #F0FDF4; }
.result .r-title { font-size: 17px; font-weight: 600; color: #166534; margin-bottom: 10px; }
.result .r-code { font-size: 26px; font-weight: 600; letter-spacing: 3px; color: var(--bk-primary-dark); }
.result .r-row { font-size: 14px; color: #166534; line-height: 2; }
.result .r-row b { font-weight: 600; }
.result.wait { border-color: var(--bk-border); background: var(--bk-bg-card); }
.result.wait .r-title, .result.wait .r-row { color: var(--bk-text-1); }

.toast {
  position: fixed; left: 50%; top: 42%; transform: translateX(-50%);
  background: rgba(0,0,0,.78); color: #fff; font-size: 14px;
  padding: 10px 18px; border-radius: 10px; display: none; z-index: 999; max-width: 80%;
}