/* ============================================================
   nquser · 支付弹窗/支付区 布局修复（全局生效）
   ------------------------------------------------------------
   父主题 pay.tpl 把 pay-body 做成 grid：
     左列标题 minmax(0,1fr) + 右列 clamp(280px,40vw,440px)，
   而右列里还有 200px 装饰占位(uc-pay-side-slot) + 200px 二维码/卡片(wrap)
   = 约 400px。支付弹窗本身只有 ~500px 宽，右列永远吃不下，
   左列被压成 0 宽 → 标题逐字竖排（移动端/桌面端都错位）。
   这里不再依赖父主题那套 grid，统一改为：标题居中一行 + 内容居中。
   （.par_balance 的图片父主题未限制尺寸，这里一并约束为 200×200。）
   作用域限定在 body.nq 与 .pay / #pay-content，不影响其它主题。
   ============================================================ */

/* 0) 弹窗容器：内容自适应，不锁死高度 */
body.nq .pay.modal .modal-content { max-height: 88vh; min-height: 0; }
body.nq .pay.modal .modal-body { padding: 14px !important; overflow-x: hidden !important; }

/* 1) 支付主体：纵向堆叠、居中 */
body.nq .pay.modal .modal-body .pay-body,
body.nq #pay-content .pay-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  column-gap: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) 标题 / 金额：取消 grid 定位，单行居中 */
body.nq .pay.modal .modal-body .pay-title,
body.nq #pay-content .pay-title,
body.nq .pay.modal .modal-body .pay-body > h2,
body.nq #pay-content .pay-body > h2 {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  text-align: center !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  white-space: normal;
}

/* 3) 支付区：占满宽度、内容居中、禁止横向溢出 */
body.nq .pay.modal .modal-body .pay-area,
body.nq #pay-content .pay-area {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 12px !important;
  overflow: hidden !important;
}
body.nq .uc-pay-with-side {
  transform: none !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* 4) 去掉左侧 200px 装饰占位与竖线 */
body.nq .uc-pay-side-slot,
body.nq .uc-pay-hline { display: none !important; }

/* 5) 二维码 / 余额卡片：固定 200×200，图片自适应不溢出 */
body.nq .uc-pay-original-wrap {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  flex: 0 0 200px !important;
  overflow: hidden !important;
}
body.nq .par_balance {
  width: 200px !important;
  height: 200px !important;
  overflow: hidden !important;
}
body.nq .par_balance img {
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}
body.nq #pay-type { width: 200px !important; height: 200px !important; }
body.nq #pay-type canvas,
body.nq #pay-type #canvas { width: 200px !important; height: 200px !important; max-width: 100% !important; }

/* 6) 底部余额 / 使用余额支付：不折字、允许换行 */
body.nq .pay.modal .modal-footer {
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}
body.nq .footer-pay-balance { flex-wrap: wrap !important; row-gap: 6px; }
body.nq .footer-pay-balance > span,
body.nq .footer-pay-balance .custom-control-label { white-space: nowrap; }

/* 7) 窄屏再收一点内边距 */
@media (max-width: 767.98px) {
  body.nq .pay.modal .modal-body { padding: 12px !important; }
}