/**
 * payment.css — 微信支付充值弹层样式（2026-09-07 创建）
 * 2026-09-10 P3-T3.4 微信化重构：对齐微信支付收银台视觉——
 *   弹层（≤768px 半屏底部弹层 / 桌面居中弹窗）、文字分段双 tab（绿激活+底部
 *   指示条，与 components.css .wx-seg 同款）、档位卡（白卡横行 + 选中绿描边
 *   + 对勾角标）、二维码区（「微信支付」标题 + 大字金额 + 白底留白码）、
 *   终态（支付结果页式大图标）、充值记录（微信账单 cell 列表，对齐
 *   config-panel.css .tp-bill-* 视觉语言）。
 * 对应 frontend/js/payment_ui.js（window.PaymentUI）。
 * 视觉数值只允许引用 tokens.css 变量（项目 UI 规约）。
 */

/* ========================================
   弹层容器：桌面居中弹窗（复用 .modal-overlay/.modal-dialog 基座）
   ======================================== */
.pay-dialog {
  position: relative;           /* 容纳右上角「✕」关闭按钮 */
  max-width: 480px;
  width: 92%;
  padding: 24px 20px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.pay-dialog-body {
  min-height: 220px;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;         /* 抵消 .modal-dialog 无底部 actions 后的贴边 */
}

/* 关闭按钮「✕」右上灰（微信弹层惯例：右上角轻量关闭，不做底部大按钮） */
.pay-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.pay-close:hover { color: var(--color-text-secondary); }
.pay-close:active { color: var(--color-text-primary); }

/* ========================================
   充值双 tab（积分充值 / VIP 充值）：微信文字分段——
   等分白底、激活绿字 + 底部 2px 圆角绿色指示条（与 .wx-seg-item 同款）
   口径收窄后常态只有 VIP 单组，不渲染 tab 条（JS 侧已处理）
   ======================================== */
.pay-tabs {
  display: flex;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.pay-tab {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.pay-tab:active { background: var(--wx-pressed); }

/* 激活：品牌绿 + 底部 2px 指示条（居中 32px 圆角短条，对齐 wx-seg 口径） */
.pay-tab.active {
  color: var(--color-brand);
  font-weight: 600;
}
.pay-tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-brand);
}

/* ========================================
   档位卡：微信支付金额选择卡——白卡横行、左时长 16px、右价格 15px 加粗；
   选中态绿描边 + 右上角绿色对勾三角角标（收银台同款）
   ======================================== */
.pay-tip {
  color: var(--color-text-muted);
  font-size: 0.8125rem;                 /* 13px */
  margin-bottom: 14px;
}

.pay-tier-grid {
  display: grid;
  grid-template-columns: 1fr;           /* 收银台金额单列整行 */
  gap: 10px;
}

.pay-tier-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pay-tier-card:hover { border-color: var(--color-border-strong); }
.pay-tier-card:active { background: var(--wx-pressed); }

/* 选中态：绿描边（角标见 ::before/::after） */
.pay-tier-card.selected { border-color: var(--color-brand); }
.pay-tier-card.selected:hover { border-color: var(--color-brand); }

/* 选中角标：右上角绿色三角 + 白色对勾 */
.pay-tier-card.selected::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 20px solid var(--color-brand);
  border-left: 20px solid transparent;
  border-top-right-radius: var(--radius-md);
}
.pay-tier-card.selected::after {
  content: '✓';
  position: absolute;
  top: -1px;
  right: 2px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}

/* 左：时长/积分主文案 16px（VIP 档「N 天 VIP」/ 积分档「N 积分」） */
.pay-tier-points {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
/* 右：价格 15px 加粗 */
.pay-tier-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* 联调标记：左上角小徽章（避开右上角选中对勾角标位置） */
.pay-tier-test {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.6875rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

/* ========================================
   二维码区：微信支付二维码弹窗式——居中「微信支付」标题 + 金额大字加粗 +
   方形白底二维码留白 + 13px muted 扫码提示 + 轮询状态（#pay-status）
   ======================================== */
.pay-qr-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.pay-amount {
  font-size: 1.5rem;                    /* 微信收银台大字金额 */
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.pay-amount-points {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brand);
}

.pay-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 12px;
}

/* 二维码：方形白底 + 四周留白 + 描边圆角（vendor qrcode 输出 svg） */
.pay-qr-wrap svg {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* vendor 缺失降级：明文 code_url 可复制（逻辑在 JS，不动） */
.pay-qr-fallback {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  word-break: break-all;
}

/* 扫码提示：13px muted（「请使用微信扫一扫扫码支付…」） */
.pay-qr-wrap ~ .pay-tip { margin: 0 0 4px; }

/* 轮询状态文案区（id=pay-status，JS 每轮轮询不改此元素） */
.pay-status {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--color-info);
}

/* ========================================
   终态：微信支付结果页式——大图标 + 文案居中
   ======================================== */
.pay-terminal {
  padding: 28px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pay-terminal-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.pay-terminal-icon svg { width: 100%; height: 100%; display: block; }
.pay-success .pay-terminal-icon { color: var(--color-success); }
.pay-failed .pay-terminal-icon { color: var(--color-danger); }
.pay-terminal-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.pay-success .pay-terminal-title { color: var(--color-text-primary); }
.pay-failed .pay-terminal-title { color: var(--color-text-primary); }
.pay-terminal-desc { color: var(--color-text-secondary); font-size: 0.875rem; }

/* ========================================
   充值记录（renderOrdersList 输出）：微信账单 cell 列表——
   对齐 config-panel.css .tp-bill-* 视觉语言（行高 48px、左信息 16px +
   时间 13px muted、右金额/状态 14px、hairline 缩进左 16px）；
   外层白卡由消费方（taskpool 我的积分页 .tp-bill-card）包裹
   ======================================== */
.pay-order-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  text-align: left;
}
/* cell 间 hairline：1px 缩进左 16px（对齐 .tp-bill-item / .wx-cell 口径） */
.pay-order-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
  transform: scaleY(0.5);
  transform-origin: bottom;
}

.pay-order-info { flex: 1; min-width: 0; }
.pay-order-title {
  font-size: 16px;
  color: var(--color-text-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-order-time {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.pay-order-right {
  flex-shrink: 0;
  text-align: right;
}
.pay-order-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.pay-order-status { font-size: 14px; margin-top: 2px; }
/* 状态色：成功绿 / 待支付橙 / 失效·关闭红（JS 白名单拼接，类名全集在此） */
.pay-order-status--paid { color: var(--color-success); }
.pay-order-status--pending { color: var(--color-warning); }
.pay-order-status--closed { color: var(--color-danger); }

/* ========================================
   ≤768px：微信支付半屏底部弹层（贴底 + 顶部圆角 + 上滑感）
   ======================================== */
@media (max-width: 768px) {
  .pay-dialog {
    align-self: flex-end;         /* 压到 .modal-overlay（flex 居中）底部 */
    width: 100%;
    max-width: none;
    max-height: 82vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 20px 16px 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: paySheetIn 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes paySheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* 充值记录列表容器（2026-09-10 P6 审计补定义：仅作分组容器，样式由 item 行自带） */
.pay-order-list { display: block; }