/* ============================================
   Arcana Atelier — Pricing page
   2026-10-09 Stripe 合規輪：純展示價格頁
   卡片樣式沿用 1.68 設置頁框體系（暗色半透明＋blur；
   銀白主題白卡靠邊框立得住），全部走 CSS 變量。
   ============================================ */

.pricing-page { padding-top: var(--nav-height); min-height: 100vh; }
.pricing-container { max-width: 980px; margin: 0 auto; padding: 4px 24px 90px; }

/* 週期切換 */
.pricing-cycle {
  display: flex; justify-content: center; gap: 8px;
  margin: 6px 0 26px; flex-wrap: wrap;
}
.pricing-cycle-btn {
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 999px;
  padding: 10px 22px; /* 觸控 ≥44px 含邊框 */
  min-height: 44px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.pricing-cycle-btn:hover { color: var(--text-primary); border-color: rgba(var(--gold-rgb), 0.55); }
.pricing-cycle-btn.active {
  color: var(--text-primary);
  background: var(--gold-subtle);
  border-color: rgba(var(--gold-rgb), 0.65);
}

/* 三卡並列 */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; align-items: stretch;
}
.price-card {
  background: rgba(24, 24, 24, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
}
[data-theme="silver"] .price-card {
  background: #FFFFFF;
  border: 1px solid var(--card-border); /* rgba(0,0,0,.28) —— 白底靠邊框分塊 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.plan-name {
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 400;
  color: var(--text-primary); letter-spacing: 0.08em;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.25);
}

/* 價格區 */
.plan-price {
  display: flex; align-items: baseline; gap: 6px;
  min-height: 44px; /* 週期切換時數字變動不跳版 */
}
.price-num {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 1.9rem; font-weight: 600; color: var(--text-primary);
  letter-spacing: 0.02em;
}
.price-per { font-size: 0.78rem; color: var(--text-secondary); }
.price-old {
  font-size: 0.8rem; color: var(--text-muted);
  text-decoration: line-through; align-self: center;
}
.plan-total {
  font-size: 0.72rem; color: var(--text-secondary);
  margin: 4px 0 16px; min-height: 1em;
}

/* 功能列表 */
.plan-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan-features li {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 300;
  color: var(--text-secondary); line-height: 1.7;
  padding-left: 16px; position: relative; margin-bottom: 6px;
}
.plan-features li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  font-size: 0.6rem; color: rgba(var(--gold-rgb), 0.85);
}

/* CTA */
.plan-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  min-height: 44px;
  font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.06em;
  border-radius: 8px;
  text-decoration: none; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.plan-cta-free {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
}
.plan-cta-free:hover { border-color: rgba(var(--gold-rgb), 0.7); background: var(--gold-subtle); }
.plan-cta-buy {
  color: var(--text-primary);
  background: var(--gold-subtle);
  border: 1px solid rgba(var(--gold-rgb), 0.5);
}
.plan-cta-buy:hover:not(:disabled) { border-color: rgba(var(--gold-rgb), 0.8); background: rgba(var(--gold-rgb), 0.18); }
/* 禁用態 0.45 實測對比僅 2.17:1（銀白 DOM 探針）——0.7 實測 ≈3.6:1，
   「即將開放」可讀但仍明顯弱於可購態 */
.plan-cta-buy:disabled { opacity: 0.7; cursor: default; }

/* 底部說明 */
.pricing-note {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 300;
  color: var(--text-muted); line-height: 1.8;
  text-align: center; margin-top: 24px; padding: 0 12px;
}

/* ── 手機 ≤768：卡片縱向堆疊，切換鈕不換行 ── */
@media (max-width: 768px) {
  .pricing-container { padding: 4px 20px 80px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
  .price-card { padding: 22px 20px 18px; }
  .pricing-cycle { margin-bottom: 20px; }
  .pricing-cycle-btn { padding: 10px 18px; }
}