/* ==========================================================================
   VPNPF — pricing.css
   套餐页专属样式:横向缓滚带 / 计费方式切换头 / 套餐卡补充行 /
   套餐包含清单 / 对比表 / 支付卡片 / 退款横条补充
   全部设计值引用 base.css 的 :root 令牌,不写死颜色与圆角。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 横向缓滚带(ticker-loop 配方;内容由页面写死,装饰性 aria-hidden)
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  max-width: 100%;
  margin-top: 36px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ticker-item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.ticker-item:last-child::after { background: var(--accent-light); }
.ticker.is-static { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   2. 正文主列与计费方式切换
   -------------------------------------------------------------------------- */
.plans-body { padding-top: 8px; }

.billing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 28px;
}
.billing-note {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   3. 套餐卡补充行(适合谁 / 流量包额度说明)
   -------------------------------------------------------------------------- */
.plan-fit {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   4. 套餐包含清单
   -------------------------------------------------------------------------- */
.incl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 30px;
  margin-top: 30px;
}
.incl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  min-width: 0;
}
.incl-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--success);
}
.incl-item p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  min-width: 0;
}
.incl-item strong {
  display: block;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   5. 套餐对比表(必须包在 .table-scroll 内,窄屏横滑)
   -------------------------------------------------------------------------- */
.cmp-table { font-size: 14px; }
.cmp-table caption { text-align: left; }
.cmp-table thead th {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .04em;
}
.cmp-table tbody th,
.cmp-table tbody td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  word-break: keep-all;
  vertical-align: top;
}
.cmp-table tbody th {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.cmp-table tbody td { color: var(--text-muted); }
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table .cell-price {
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. 支付方式卡片
   -------------------------------------------------------------------------- */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.pay-card {
  min-width: 0;
  padding: 24px 22px 22px;
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--hl-panel), 0 20px 38px -24px var(--shadow-indigo-2);
}
.pay-card .pay-ico {
  width: 30px;
  height: 30px;
  color: var(--text);
  flex-shrink: 0;
}
.pay-card h3 { margin-top: 16px; font-size: 17px; }
.pay-card p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. 退款横条补充(组件本体在 components.css)
   -------------------------------------------------------------------------- */
#sec-refund .refund-band { margin-top: 30px; }

/* --------------------------------------------------------------------------
   8. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .incl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .pay-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .billing-head { flex-direction: column; align-items: flex-start; }
  .billing-note { max-width: none; }
  .incl-grid { grid-template-columns: 1fr; gap: 18px; }
  .plan-fit { max-width: none; }
  .ticker { margin-top: 28px; }
  .ticker-item { font-size: 12px; gap: 16px; }
}