/* ============================================================
 * fluxlane wallet overlay v3 — 浅色余额卡 + 独立充值 CTA + 兑换码备用
 * 仅作用于 body.flux-w2（由 wallet-v2.js 在 /wallet 路由添加）
 * 版本: 20260920-v7
 * v3 变更：余额卡改浅色；不再改造支付宝按钮（恢复紧凑原样）；
 *          新增独立固定宽度 .flux-pay-btn（点击=触发支付宝按钮）
 * ============================================================ */

/* ===== 1. 余额卡（浅色布局强化） ===== */
body.flux-w2 .grid.grid-cols-3.divide-x {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: 18px;
  padding: 20px 24px;
}
body.flux-w2 .grid.grid-cols-3.divide-x > div {
  border: 0 !important;
}
body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(1) {
  flex: 1.4;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.flux-w2 .grid.grid-cols-3 > div:nth-child(1) .font-mono {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.5px;
}
body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(2),
body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(3) {
  flex: 1;
  min-width: 130px;
  background: #f8fafc;
  border: 1px solid #e5eaf0 !important;
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dark body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(2),
[data-theme="dark"] body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(2),
.dark body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(3),
[data-theme="dark"] body.flux-w2 .grid.grid-cols-3.divide-x > div:nth-child(3) {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* ===== 2. 主卡标题徽章 ===== */
.flux-badge-main {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
}

/* ===== 3. 金额卡片选中态 + 推荐角标 ===== */
body.flux-w2 .md\:grid-cols-4 > button.border-foreground {
  border-color: #4f46e5 !important;
  background: #eef2ff !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
body.flux-w2 .md\:grid-cols-4 > button:nth-child(4) {
  position: relative;
}
body.flux-w2 .md\:grid-cols-4 > button:nth-child(4)::after {
  content: "推荐";
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.35);
  pointer-events: none;
}

/* ===== 4. 独立充值 CTA（不动支付宝按钮本身） ===== */
.flux-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.flux-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 36px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
  white-space: nowrap;
}
.flux-pay-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.4);
}
.flux-pay-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.flux-pay-hint {
  font-size: 12px;
  color: #94a3b8;
}

/* ===== 5. 兑换码 → 备用充值通道 ===== */
.flux-backup {
  background: rgba(248, 250, 252, 0.7);
  border: 1px dashed #cbd5e1 !important;
  border-radius: 12px;
  padding: 14px 16px !important;
  margin-top: 10px;
}
.dark .flux-backup,
[data-theme="dark"] .flux-backup {
  background: rgba(148, 163, 184, 0.06);
}
.flux-badge-backup {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 999px;
  flex-shrink: 0;
}
.dark .flux-badge-backup,
[data-theme="dark"] .flux-badge-backup {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.18);
}

/* 点此获取 → 购买兑换码按钮 */
p.flux-buy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
a.flux-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #4f46e5 !important;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 9px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s, transform 0.12s;
}
a.flux-buy:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
}
.dark a.flux-buy,
[data-theme="dark"] a.flux-buy {
  background: rgba(79, 70, 229, 0.15);
  border-color: rgba(129, 140, 248, 0.35);
  color: #a5b4fc !important;
}
.dark a.flux-buy:hover,
[data-theme="dark"] a.flux-buy:hover {
  background: rgba(79, 70, 229, 0.25);
}

/* 移动端：CTA 撑满 */
@media (max-width: 640px) {
  .flux-pay-btn {
    width: 100%;
  }
}