/* ==========================================================================
   ZaraVPN — pricing.css
   套餐页专属：价格一览条 / 套餐卡适配说明 / 流量包卡片与规则 / 统一包含清单 /
   支付方式卡 / 退款承诺面板 / 六档对比表列宽 / 收尾 CTA
   颜色、字体、圆角、投影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ============================ 价格一览 ============================ */
.pricing-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  padding:18px 20px;
  margin-bottom:20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--indigo);
  border-radius:var(--r-md);
  box-shadow:var(--sh-panel);
}
.pricing-summary p{
  flex:1 1 320px;
  min-width:0;
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
}
.pricing-summary strong{
  color:var(--indigo);
  font-weight:600;
}
.pricing-summary-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.pricing-summary-meta li{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  max-width:100%;
  margin:0;
  padding:0 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--panel-2);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pricing-table-head{
  margin:0 0 12px;
  font-size:clamp(20px,2.2vw,25px);
  letter-spacing:-.015em;
}

/* ============================ 套餐卡里的说明文字 ============================ */
.pricing-fit{
  margin:0;
  font-size:13.5px;
  line-height:1.68;
  color:var(--ink-2);
}

/* ============================ 流量包卡片 ============================ */
.pricing-pack-card{
  border-color:var(--sage-30);
  background-image:linear-gradient(180deg,var(--sage-08) 0%,var(--sage-00) 52%);
}
.pricing-pack-card .plan-badge{
  background:var(--sage);
  color:var(--panel);
}

/* ============================ 流量包规则块 ============================ */
.pricing-rules{
  margin-top:20px;
}
.pricing-rules strong{
  color:var(--ink);
}
.pricing-rules ul{
  margin:8px 0 0;
  padding-left:1.2em;
}
.pricing-rules li{
  margin:.35em 0;
  line-height:1.7;
}

/* ============================ 所有套餐均包含 ============================ */
.pricing-includes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.pricing-include{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-panel);
}
.pricing-include svg{
  flex:0 0 auto;
  margin-top:3px;
  color:var(--sage);
}
.pricing-include h3{
  margin:0 0 5px;
  font-size:15px;
  letter-spacing:-.01em;
}
.pricing-include p{
  margin:0;
  font-size:13.5px;
  line-height:1.68;
  color:var(--ink-2);
}

/* ============================ 支付方式 ============================ */
.pricing-pay{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:26px;
}
.pricing-pay-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-panel);
}
.pricing-pay-card b{
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
}
.pricing-pay-card span{
  font-size:13px;
  line-height:1.65;
  color:var(--ink-2);
}

/* ============================ 退款承诺面板 ============================ */
.pricing-refund{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px 26px;
  padding:26px;
  background-image:linear-gradient(120deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-device);
}
.pricing-refund h2{
  margin:0 0 8px;
  font-size:clamp(22px,2.4vw,28px);
}
.pricing-refund p{
  margin:0;
  max-width:62ch;
  font-size:14.5px;
  line-height:1.72;
  color:var(--ink-2);
}
.pricing-refund p a{
  color:var(--indigo);
  text-decoration:underline;
  text-underline-offset:2px;
}
.pricing-refund-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.pricing-refund-actions .btn{
  flex-shrink:0;
  white-space:nowrap;
}

/* ============================ 六档对比表 ============================ */
.pricing-compare{
  min-width:820px;
}

/* ============================ 小字注脚 / 收尾 ============================ */
.pricing-note{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-2);
}
.pricing-closing{
  text-align:center;
}
.pricing-closing .cta-row{
  margin-top:0;
}
.pricing-closing .pricing-note{
  margin-top:12px;
}

/* ============================ 自适应 ============================ */
@media (max-width:1180px){
  .pricing-compare{min-width:780px}
}
@media (max-width:980px){
  .pricing-includes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-pay{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .pricing-summary{padding:16px 16px}
  .pricing-summary p{font-size:14.5px}
  .pricing-includes{grid-template-columns:1fr}
  .pricing-pay{grid-template-columns:1fr}
  .pricing-refund{grid-template-columns:1fr;padding:22px}
  .pricing-refund-actions{justify-content:flex-start}
  .pricing-rules{margin-top:16px}
}
@media (max-width:640px){
  .pricing-summary{gap:10px 14px}
  .pricing-summary p{flex:1 1 100%}
  .pricing-table-head{font-size:19px}
  .pricing-include{padding:16px}
  .pricing-pay-card{padding:16px}
}