/* payment.css — 深色主题支付 UI，与 chart.css 风格统一 */

/* ── 遮罩层基础 ────────────────────────────────────────────── */
.pay-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9900;
  padding: 16px;
}

/* ── 商品商城弹层 ───────────────────────────────────────────── */
.pay-shop-modal-inner {
  background: #1a130c;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 16px;
  width: min(400px, 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pay-shop-body {
  overflow-y: auto;
}

/* ── 会员商品卡片 — 全新设计 ───────────────────────────────── */
.pay-member-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

/* Hero 区域 */
.pay-member-hero {
  background: linear-gradient(160deg, #1e0f05 0%, #28180a 60%, #1a1003 100%);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
  padding: 22px 52px 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.pay-member-icon-wrap {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(201, 169, 97, 0.28) 0%, rgba(201, 169, 97, 0.06) 65%);
  border: 1.5px solid rgba(201, 169, 97, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(201, 169, 97, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pay-member-icon {
  font-size: 26px;
  color: #c9a961;
  line-height: 1;
}

.pay-member-hero-text {
  flex: 1;
  min-width: 0;
}

.pay-member-name {
  font-size: 18px;
  font-weight: 700;
  color: #f0deb0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.pay-member-tagline {
  font-size: 12px;
  color: #7a6a4a;
  margin-top: 4px;
  line-height: 1.4;
}

.pay-member-close-btn {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 50%;
  color: #c9a961;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
  flex-shrink: 0;
}
.pay-member-close-btn:hover {
  background: rgba(201, 169, 97, 0.1);
}

/* 价格展示区 */
.pay-member-price-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 24px 12px;
  gap: 1px;
}

.pay-member-currency {
  font-size: 17px;
  font-weight: 700;
  color: #c9a961;
  margin-top: 10px;
  line-height: 1;
}

.pay-member-amount {
  font-size: 48px;
  font-weight: 800;
  color: #c9a961;
  line-height: 1;
  letter-spacing: -1px;
}

.pay-member-period {
  font-size: 13px;
  color: #7a6a4a;
  align-self: flex-end;
  padding-bottom: 9px;
  padding-left: 3px;
}

/* 福利列表 */
.pay-member-perks {
  list-style: none;
  padding: 0 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.pay-member-perks li {
  font-size: 13px;
  color: #b8a57a;
  padding: 9px 0 9px 22px;
  position: relative;
  line-height: 1.4;
  border-bottom: 1px solid rgba(201, 169, 97, 0.07);
}

.pay-member-perks li:last-child {
  border-bottom: none;
}

.pay-member-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #c9a961;
  font-weight: 700;
  font-size: 13px;
}

/* 购买按钮 */
.pay-product-btn {
  margin: 16px 22px 6px;
  padding: 14px 0;
  background: linear-gradient(135deg, #7a3b2e 0%, #a05030 100%);
  border: 1px solid rgba(201, 169, 97, 0.38);
  border-radius: 10px;
  color: #fff5ec;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: calc(100% - 44px);
  letter-spacing: 0.5px;
  transition: opacity 0.2s, transform 0.15s;
  display: block;
  text-align: center;
}
.pay-product-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 底部注释 */
.pay-member-note {
  font-size: 11px;
  color: #4a3e2a;
  margin: 8px 0 20px;
  text-align: center;
}

/* ── 支付详情弹层 ───────────────────────────────────────────── */
.pay-modal-inner {
  background: #1a130c;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 16px;
  width: min(400px, 100%);
  overflow: hidden;
}

.pay-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 15px;
  background: linear-gradient(160deg, #1e1005 0%, #201408 100%);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}

.pay-modal-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #e8d5a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-modal-body {
  padding: 18px 20px 20px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── 关闭按钮 ──────────────────────────────────────────────── */
.pay-shop-close,
.pay-modal-close,
.pay-member-close-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 50%;
  color: #c9a961;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}
.pay-shop-close:hover,
.pay-modal-close:hover,
.pay-member-close-btn:hover {
  background: rgba(201, 169, 97, 0.1);
}

/* ── 订单行 ─────────────────────────────────────────────────── */
.pay-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #c8b58a;
  padding: 8px 0;
  border-bottom: 1px solid rgba(201, 169, 97, 0.06);
}
.pay-order-row:last-of-type {
  border-bottom: none;
}
.pay-order-row span:first-child {
  color: #7a6a4a;
  font-size: 13px;
  flex-shrink: 0;
}
.pay-order-row code {
  font-size: 11px;
  color: #c9a961;
  background: rgba(201, 169, 97, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
  max-width: 220px;
  text-align: right;
}
.pay-order-row strong {
  color: #e8d5a3;
  font-size: 18px;
  font-weight: 700;
}

/* ── 状态标签 ──────────────────────────────────────────────── */
.pay-state {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.pay-state-pending { background: rgba(201, 169, 97, 0.12); color: #c9a961; }
.pay-state-paid    { background: rgba(74, 160, 100, 0.18); color: #6dca8a; }
.pay-state-failed  { background: rgba(200, 60, 60, 0.18);  color: #e06060; }

/* ── 模拟标签 ──────────────────────────────────────────────── */
.pay-mock-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(220, 120, 30, 0.15);
  color: #e08040;
  border: 1px solid rgba(220, 120, 30, 0.28);
  border-radius: 999px;
}

/* ── 二维码区域 ──────────────────────────────────────────────── */
.pay-qr-area {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pay-qr-area canvas {
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}
.pay-qr-hint {
  font-size: 12px;
  color: #a89070;
}
.pay-qr-fallback {
  font-size: 12px;
  color: #c97040;
  text-align: center;
  padding: 8px;
}

/* ── H5 跳转区域 ─────────────────────────────────────────────── */
.pay-h5-area {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pay-h5-btn {
  display: inline-block;
  padding: 11px 28px;
  background: #07c160;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9px;
  text-decoration: none;
  transition: opacity .15s;
}
.pay-h5-btn:hover { opacity: .88; }

/* ── Mock 测试按钮区 ─────────────────────────────────────────── */
.pay-mock-btns {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(220, 120, 30, 0.06);
  border: 1px dashed rgba(220, 120, 30, 0.22);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pay-mock-label {
  font-size: 11px;
  font-weight: 600;
  color: #e08040;
  letter-spacing: 0.4px;
}
.pay-mock-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.15s;
  text-align: left;
}
.pay-mock-btn:disabled { opacity: 0.45; cursor: default; }

.pay-mock-success {
  background: rgba(74, 160, 100, 0.15);
  color: #6dca8a;
  border-color: rgba(74, 160, 100, 0.28);
}
.pay-mock-fail {
  background: rgba(200, 60, 60, 0.12);
  color: #e06060;
  border-color: rgba(200, 60, 60, 0.22);
}
.pay-mock-refresh {
  background: transparent;
  color: #8a7a5a;
  border-color: rgba(201, 169, 97, 0.14);
}

/* ── 提示文字 ──────────────────────────────────────────────── */
.pay-tip {
  font-size: 12px;
  color: #8a7a5a;
  line-height: 1.6;
  padding: 8px 12px;
  margin-top: 4px;
  background: rgba(201, 169, 97, 0.04);
  border-left: 2px solid rgba(201, 169, 97, 0.28);
  border-radius: 0 6px 6px 0;
}

/* ── 成功 / 失败状态 ─────────────────────────────────────────── */
.pay-success-icon,
.pay-fail-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  margin: 8px auto 10px;
}
.pay-success-icon { background: rgba(74, 160, 100, 0.18); color: #6dca8a; box-shadow: 0 0 20px rgba(74,160,100,.15); }
.pay-fail-icon    { background: rgba(200, 60, 60, 0.15);  color: #e06060; box-shadow: 0 0 20px rgba(200,60,60,.12); }

.pay-success-title { color: #6dca8a; font-size: 16px; font-weight: 600; text-align: center; }
.pay-fail-title    { color: #e06060; font-size: 16px; font-weight: 600; text-align: center; }

.pay-entitlement {
  text-align: center;
  font-size: 13px;
  color: #c9a961;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(201, 169, 97, 0.07);
  border: 1px solid rgba(201, 169, 97, 0.12);
  border-radius: 10px;
  line-height: 1.6;
}

.pay-error-msg {
  font-size: 13px;
  color: #e06060;
  background: rgba(200, 60, 60, 0.07);
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
}

/* ── 重试按钮 ──────────────────────────────────────────────── */
.pay-retry-btn {
  padding: 11px 28px;
  background: linear-gradient(135deg, #6a3226 0%, #8a4030 100%);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 9px;
  color: #fff5ec;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  align-self: center;
  margin-top: 8px;
  transition: opacity 0.2s, transform 0.15s;
}
.pay-retry-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Loading spinner ─────────────────────────────────────────── */
.pay-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(201, 169, 97, 0.12);
  border-top-color: #c9a961;
  border-radius: 50%;
  animation: pay-spin 0.75s linear infinite;
  margin: 20px auto 0;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

.pay-loading-text {
  text-align: center;
  font-size: 13px;
  color: #8a7a5a;
  margin-top: 12px;
}

/* ── 入口栏（嵌入 AI 面板）─────────────────────────────────── */
.pay-entry-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(106, 50, 38, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.13);
  border-radius: 10px;
  margin-top: 6px;
}
.pay-entry-label {
  font-size: 12px;
  color: #8a7a5a;
}
.pay-entry-btn {
  padding: 4px 14px;
  background: rgba(106, 50, 38, 0.45);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 999px;
  color: #c9a961;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.pay-entry-btn:hover {
  background: rgba(106, 50, 38, 0.75);
  color: #e8d5a3;
}

/* ── 导航栏充值按钮 ─────────────────────────────────────────── */
.nav-pay-btn {
  margin-left: 12px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #7a3b2e, #a05030);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 999px;
  color: #f5e6c8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.nav-pay-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── 配额显示栏（嵌在角色卡内）────────────────────────────── */
.chat-quota-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0 2px;
}
.chat-quota-text {
  font-size: 12px;
  color: #8a7a5a;
}
.chat-quota-text.chat-quota-member {
  color: #c9a961;
}
.chat-quota-upgrade {
  font-size: 11px;
  padding: 2px 10px;
  background: rgba(106, 50, 38, .5);
  border: 1px solid rgba(201, 169, 97, .3);
  border-radius: 999px;
  color: #c9a961;
  cursor: pointer;
  transition: background .2s;
}
.chat-quota-upgrade:hover { background: rgba(106, 50, 38, .8); }

/* ── 废弃的网格卡（保留兼容）───────────────────────────────── */
.pay-products-grid {
  display: block;
}
.pay-product-card {
  display: none;
}