/* ============================================================
   续费页改造 —— 闲鱼激活码模式
   ============================================================
   2026-10-13 起站内不提供支付，改成「闲鱼下单 → 发激活码 → 粘贴兑换」。

   页面由打包后的 save-app.js 渲染（Vue 组件），直接改 JS 风险大
   （前面删按钮已经把整页搞白屏过一次）。所以用 CSS 精确隐藏：

     隐藏：套餐选择网格(1天/7天/30天)、价格行、下单按钮、订单状态
     保留：会员信息表（设备 / 当前到期）
           —— 查询功能靠它，用户需要知道自己什么时候到期、
              是不是绑的这台设备。不能整个隐藏 .quote-panel。

   标题文案由 save-app.js 的字符串替换负责，这里只管视觉。
   ============================================================ */

/* ---- 1. 隐藏套餐选择网格（1天/7天/30天 三张卡）---- */
.renew-page .plan-grid {
  display: none !important;
}

/* ---- 2. 隐藏价格行（¥15.00 · 30 天 · ¥0.50/天）---- */
.renew-page .quote-price {
  display: none !important;
}

/* ---- 3. 隐藏下单按钮（去支付 ¥15.00）---- */
.renew-page .quote-panel .button.primary,
.renew-page .quote-panel .button.primary.full {
  display: none !important;
}

/* ---- 4. 隐藏订单状态面板 ---- */
.renew-page .order-panel {
  display: none !important;
}

/* ---- 5. quote-panel 保留但简化外观，做成纯信息卡 ---- */
.renew-page .quote-panel {
  background: #fff;
  border: 1px solid #dfe3e8;
  box-shadow: none;
}

/* ---- 6. 顶部提示保留（查询结果会在下面出现）---- */
.renew-page .renew-notice {
  display: block !important;
}

/* ---- 7. 隐藏第二个重复的提交按钮 ----
   页面上有两个蓝按钮：第一个「激活码充值」，第二个
   「请使用闲鱼购买的激活码充值」，都是 type:submit。
   留第一个（是真正的提交动作），把第二个说明性的藏掉。 */
.renew-page .redeem-form .button.primary.full ~ .button.primary.full {
  display: none !important;
}

/* ---- 8. 会员信息表（设备 / 当前到期）---- */
.renew-page .quote-rows {
  background: #e7eaee;
  border: 1px solid #e7eaee;
  border-radius: 8px;
  gap: 1px;
  margin: 0;
  overflow: hidden;
}

.renew-page .quote-rows dt {
  color: #7c8595;
  font-size: 12.5px;
}

.renew-page .quote-rows dd {
  color: #273241;
  font-size: 13.5px;
  font-weight: 700;
}

/* ---- 9. 闲鱼说明卡片 ---- */
.xy-guide-wrap {
  margin-bottom: 18px;
}

.xy-guide {
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 18px 20px;
}

.xy-guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #9a3412;
  margin-bottom: 4px;
}

.xy-guide-badge {
  background: #f97316;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.xy-guide-sub {
  color: #b45309;
  font-size: 13px;
  margin: 0 0 14px;
}

.xy-steps {
  list-style: none;
  counter-reset: xy;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.xy-steps li {
  counter-increment: xy;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #7c2d12;
  font-size: 13.5px;
  line-height: 1.65;
}

.xy-steps li::before {
  content: counter(xy);
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.xy-guide-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #fdba74;
  color: #b45309;
  font-size: 12.5px;
  line-height: 1.7;
}

@media (max-width: 620px) {
  .xy-guide { padding: 15px 14px; }
  .xy-guide-title { font-size: 15px; }
}