/* ==========================================================================
   vip.css — PC 会员页
   套餐卡由 /api.php/user/ajax_upgrade_data 动态渲染，此处只定义呈现样式。
   ========================================================================== */

/* ---------- 当前状态条 ---------- */
.vip-status {
  display: flex;
  align-items: center;
  gap: var(--sd-s12);
  padding: var(--sd-s5) var(--sd-s6);
  margin-bottom: var(--sd-s6);
  border-radius: var(--sd-r-lg);
  background: linear-gradient(135deg,
    rgba(255, 177, 61, .10), rgba(19, 20, 28, .6) 62%);
  border: 1px solid var(--border);
}

.vip-status__item { display: flex; flex-direction: column; gap: var(--sd-s1); }
.vip-status__label { font-size: var(--sd-fs-micro); color: var(--text-3); }
.vip-status__val {
  font-size: var(--sd-fs-title);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.vip-status__val.num { color: var(--primary); }

.vip-status__act { margin-left: auto; }

/* ---------- 时长切换 ---------- */
.vip-periods {
  display: inline-flex;
  gap: var(--sd-s1);
  padding: var(--sd-s1);
  margin-bottom: var(--sd-s5);
  border-radius: var(--sd-r-full);
  background: var(--surface);
  border: 1px solid var(--border);
}

.vip-period {
  height: 36px;
  padding: 0 var(--sd-s5);
  border-radius: var(--sd-r-full);
  color: var(--text-2);
  font-size: var(--sd-fs-cap);
  white-space: nowrap;
  transition: all var(--sd-dur) var(--sd-ease);
}
.vip-period:hover { color: var(--text); }
.vip-period.is-on {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

/* ---------- 套餐卡 ---------- */
.plan-grid {
  display: grid;
  /* 自适应列数：1 个套餐时铺满整行，4 个时并排，不留大片空白 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sd-s4);
  margin-bottom: var(--sd-s8);
}

.plan {
  position: relative;
  padding: var(--sd-s6) var(--sd-s5);
  border-radius: var(--sd-r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform var(--sd-dur) var(--sd-ease), border-color var(--sd-dur) var(--sd-ease);
  opacity: 0;
  transform: translateY(16px);
}
.plan.is-in { opacity: 1; transform: none; }
.plan:hover { transform: translateY(-4px); border-color: var(--primary); }

.plan--dim { opacity: .62; }
.plan--dim:hover { transform: none; }

.plan-name {
  font-family: var(--font-display);
  font-size: var(--sd-fs-title);
  font-weight: 700;
  margin-bottom: var(--sd-s3);
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sd-s1);
  margin-bottom: var(--sd-s2);
}
.plan-price .num {
  font-family: var(--font-num);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}
.plan-price .unit { font-size: var(--sd-fs-micro); color: var(--text-3); }

.plan-need {
  font-size: var(--sd-fs-micro);
  color: var(--text-3);
  margin-bottom: var(--sd-s4);
}

.plan-sub {
  font-size: var(--sd-fs-micro);
  color: var(--text-3);
  margin-bottom: var(--sd-s4);
  min-height: 1.4em;
}

.plan-actions { display: flex; flex-direction: column; gap: var(--sd-s2); }
.plan-actions .plan-buy { width: 100%; }
.plan-actions .plan-buy[data-mode="cash"] { order: 1; }
.plan-actions .plan-buy[data-mode="point"] { order: 2; }

/* 加载骨架 */
.plan-skeleton {
  height: 190px;
  border-radius: var(--sd-r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ---------- 权益 ---------- */
.vip-benefits {
  padding: var(--sd-s6);
  border-radius: var(--sd-r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: var(--sd-s5);
}
.vip-benefits__title {
  font-family: var(--font-display);
  font-size: var(--sd-fs-title);
  font-weight: 700;
  margin-bottom: var(--sd-s4);
}
.vip-benefits__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sd-s3) var(--sd-s6);
  font-size: var(--sd-fs-cap);
  color: var(--text-2);
}
.vip-benefits__list li {
  position: relative;
  padding-left: 20px;
}
.vip-benefits__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
}

/* ---------- 说明 ---------- */
.vip-note {
  padding: var(--sd-s4) var(--sd-s5);
  border-radius: var(--sd-r-md);
  background: rgba(255, 179, 61, .08);
  border-left: 3px solid var(--primary);
  font-size: var(--sd-fs-cap);
  line-height: 1.8;
  color: var(--text-2);
}
.vip-note strong { color: var(--text); }
.vip-note em {
  font-style: normal;
  color: #d9534f;
  font-weight: 700;
}