/* =========================================================================
   VPNAJ · pricing.css
   套餐页专属样式。只补充 components.css 未覆盖的部分:
   页首光晕、价格一览表修饰、计费方式 tab 居中、套餐说明块、
   共同权益网格、对比表列宽、支付与退款两栏。
   所有颜色 / 圆角 / 阴影一律引用 base.css 的 :root 令牌。
   ========================================================================= */

/* =========================================================================
   页首
   ========================================================================= */

.pricing-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
}
.pricing-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:-170px;
  transform:translateX(-50%);
  width:min(1080px,100%);
  max-width:100%;
  height:560px;
  pointer-events:none;
  background:
    radial-gradient(44% 50% at 50% 46%, var(--accent-12), transparent 70%),
    radial-gradient(38% 44% at 24% 34%, var(--halo-cyan), transparent 72%),
    radial-gradient(34% 40% at 76% 36%, var(--halo-pink), transparent 72%);
  filter:blur(6px);
}
.pricing-hero .wrap{
  position:relative;
  z-index:1;
}
.pricing-hero .sec-head{
  margin-bottom:0;
}
.pricing-hero .cta-row{
  margin-top:var(--sp-5);
}

/* =========================================================================
   价格一览表
   ========================================================================= */

.price-table-wrap{
  margin-top:var(--sp-2);
}
.price-table .cell-plan{
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}
.price-table .cell-price{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--accent-dark);
  white-space:nowrap;
}
.price-foot{
  margin-top:var(--sp-4);
  font-size:13px;
  line-height:1.8;
  color:var(--text-muted);
}

/* =========================================================================
   计费方式 tab
   ========================================================================= */

.billing-tabs{
  margin-inline:auto;
  margin-bottom:var(--sp-2);
}

/* =========================================================================
   套餐说明块(卡片下方,跟随 tab 一起显隐)
   ========================================================================= */

.plan-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:16px;
  margin-top:var(--sp-5);
}
.plan-notes > *{min-width:0}

.plan-note{
  padding:18px 20px;
  border-radius:var(--r-panel);
  background:var(--snow-55);
  box-shadow:inset 0 0 0 1px var(--border-soft), inset 0 1px 0 var(--snow-92);
}
.plan-note h3{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  line-height:1.5;
  margin-bottom:8px;
  color:var(--text);
}
.plan-note p{
  font-size:13px;
  line-height:1.8;
  color:var(--text-muted);
}

/* 流量包卡片:与月订阅卡片区分底色,强调"不按月扣费" */
.plan-card--pack{
  background:linear-gradient(180deg,var(--bg-panel) 0%,var(--inset-a) 100%);
}
.plan-card--pack .plan-price .unit{
  font-size:12.5px;
  letter-spacing:.01em;
}

/* =========================================================================
   共同权益网格
   ========================================================================= */

.included-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:14px;
}
.included-grid > *{min-width:0}

.included-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px;
  border-radius:var(--r-panel);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--border), var(--lift-soft);
}
.included-item > div{min-width:0}
.included-item h3{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  margin-bottom:4px;
  color:var(--text);
}
.included-item p{
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-muted);
}

.inc-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--r-tile);
  background:var(--accent-08);
  color:var(--accent-dark);
}
.inc-icon svg{flex:none}

/* =========================================================================
   逐项对比表
   ========================================================================= */

.compare-table{
  min-width:760px;
}
.compare-table td:first-child{
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}
.compare-table td{
  font-size:13px;
  line-height:1.6;
}

/* =========================================================================
   支付与退款两栏
   ========================================================================= */

.pay-refund{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:18px;
  align-items:stretch;
}
.pay-refund > *{min-width:0}

.pay-refund .panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pay-refund .panel h2{
  font-size:clamp(20px,2.4vw,26px);
}
.pay-refund .panel p{
  font-size:14px;
  line-height:1.85;
  color:var(--text-muted);
}

.pay-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pay-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  background:var(--snow-55);
  box-shadow:inset 0 0 0 1px var(--border);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.pay-item svg{flex:none;color:var(--ok)}

.refund-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.refund-steps li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.rs-idx{
  flex:none;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent-08);
  box-shadow:inset 0 0 0 1px var(--accent-20);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1;
  color:var(--accent-dark);
}

/* =========================================================================
   断点
   ========================================================================= */

@media (max-width:980px){
  .compare-table{min-width:700px}
}

@media (max-width:640px){
  .pricing-hero::before{
    top:-120px;
    height:420px;
  }
  .plan-notes{gap:12px}
  .plan-note{padding:16px}
  .pay-refund{gap:14px}
  .included-item{padding:16px}
  .price-foot{font-size:12.5px}
}