/* ===== 支付弹框移动端适配 (max-width: 768px) ===== */
@media (max-width: 768px) {
  /* ---- 支付弹框 #paymentModal ---- */
  #paymentModal {
    z-index: 9999999 !important;
  }
  #paymentModal > div:first-child {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }
  /* 左侧边栏 */
  #paymentModal .w-\[200px\] {
    width: 100% !important;
    height: auto !important;
    padding: 20px 16px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  #paymentModal .w-\[200px\] ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
  }
  #paymentModal .w-\[200px\] ul li {
    padding-top: 4px !important;
  }
  /* 右侧内容区 */
  #paymentModal .flex-1.p-\[24px\] {
    padding: 16px !important;
  }
  /* 支付方式切换 tab */
  #paymentModal .flex.mb-4.bg-\[\#F9FAFB\] {
    gap: 4px !important;
  }
  #paymentModal .pay-tab {
    font-size: 12px !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
  }
  #paymentModal .pay-tab span {
    font-size: 12px !important;
  }
  /* 二维码区域堆叠 */
  #paymentModal .pay-alipay-content .flex.items-start.gap-5,
  #paymentModal .pay-wechat-content .flex.items-start.gap-5,
  #paymentModal .pay-balance-content .flex.items-start.gap-5 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* 二维码框 */
  #paymentModal .w-\[170px\] {
    width: 160px !important;
    height: auto !important;
    min-height: 180px !important;
  }
  #paymentModal .w-\[170px\] #alipay-qrcode-box,
  #paymentModal .w-\[170px\] #wechat-qrcode-box {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 8px !important;
  }
  /* 订单详情行 */
  #paymentModal .bg-\[\#F9FAFB\].rounded-lg {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* 金额字号 */
  #paymentModal .text-\[40px\] {
    font-size: 28px !important;
    line-height: 40px !important;
  }
  #paymentModal .modal-price-value {
    font-size: 28px !important;
    line-height: 40px !important;
  }
  /* 余额支付 */
  #paymentModal .pay-balance-content .w-\[170px\] {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  #paymentModal .pay-balance-content .w-\[170px\] img {
    margin-bottom: 0 !important;
  }
  #paymentModal #modal-balance-pay-btn {
    width: 100% !important;
  }

  /* ---- 支付成功弹框 #paySuccessModal ---- */
  #paySuccessModal {
    z-index: 9999999 !important;
  }
  #paySuccessModal > div:first-child {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    padding: 32px 16px 24px !important;
    border-radius: 12px !important;
  }
  #paySuccessModal .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #paySuccessModal .text-\[36px\] {
    font-size: 28px !important;
    line-height: 40px !important;
  }
  #paySuccessModal .w-full.flex.justify-center.gap-\[10px\] {
    flex-direction: column !important;
    align-items: center !important;
  }
  #paySuccessModal .w-\[160px\] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 提示消息层级高于弹框 */
  .pop-message {
    z-index: 99999999 !important;
  }
}