/* ==========================================================================
   /artale 方案頁
   ========================================================================== */

/* --------------------------------------------------------------------------
   產品標頭
   -------------------------------------------------------------------------- */
.product-hero {
  padding-block: var(--sp-12) var(--sp-16);
}

.product-hero__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--elev-2);
  margin-bottom: var(--sp-8);
}

.product-hero__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

/* 圖片下緣淡入頁面底色，避免硬切一條邊 */
.product-hero__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--bg-surface) 2%, transparent 100%);
  pointer-events: none;
}

.product-hero__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.product-hero__head h1 {
  font-size: clamp(1.75rem, 3.4vw, var(--fs-3xl));
  margin: 0;
}

.product-hero__sub {
  color: var(--text-mid);
  font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   方案卡
   -------------------------------------------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-6);
  position: relative;
  /* .card 預設 overflow:hidden（給封面圖用），方案卡沒有封面，
     但有一個跨出卡片上緣的「最受歡迎」緞帶，會被裁掉一半。 */
  overflow: visible;
}

/* 「最受歡迎」用邊框 + 微光突顯，不換底色。
   換底色會讓旁邊兩張看起來像失效方案。 */
.plan--featured {
  border-color: var(--accent-line);
  box-shadow: var(--glow-accent);
}

.plan__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
  /* 白字必須配 --accent-solid，配 --accent 只有 3.20:1 */
  background: var(--accent-solid);
  color: #fff;
  border: none;
  font-weight: var(--fw-semi);
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}

.plan__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--text-hi);
  margin-bottom: var(--sp-1);
}

.plan__desc {
  font-size: var(--fs-sm);
  color: var(--text-lo);
  margin-bottom: var(--sp-6);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.plan__currency {
  font-size: var(--fs-base);
  color: var(--text-mid);
}

.plan__amount {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

.plan__period {
  font-size: var(--fs-sm);
  color: var(--text-lo);
}

.plan__daily {
  font-size: var(--fs-xs);
  color: var(--text-lo);
  margin-bottom: var(--sp-6);
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  flex: 1;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.plan__features .icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
  color: var(--ok);
}

.plan__features li.is-bonus {
  color: var(--accent-hi);
  font-weight: var(--fw-medium);
}

.plan__features li.is-bonus .icon { color: var(--accent); }

/* --------------------------------------------------------------------------
   對照表
   -------------------------------------------------------------------------- */
.compare th:not(:first-child),
.compare td:not(:first-child) {
  text-align: center;
  width: 18%;
}

.compare .icon {
  width: 16px;
  height: 16px;
  color: var(--ok);
}

.compare .is-featured {
  background: var(--accent-dim);
  color: var(--accent-hi);
}

/* --------------------------------------------------------------------------
   購買 modal 內的方案摘要
   -------------------------------------------------------------------------- */
.buy-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}

.buy-summary strong {
  font-size: var(--fs-base);
  color: var(--text-hi);
}

.buy-summary span { font-size: var(--fs-xs); color: var(--text-lo); }

.buy-summary b {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  white-space: nowrap;
}

/* 同意條款 */
.agree {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-mid);
  cursor: pointer;
  margin-block: var(--sp-5) var(--sp-6);
  line-height: var(--lh-normal);
}

/* 整個 label 都可點（有 for），這裡放大只是讓方塊本身也好按 */
.agree input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}

.agree.is-invalid { animation: shake 300ms var(--ease-in-out); }

/* --------------------------------------------------------------------------
   響應式
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .product-hero { padding-block: var(--sp-8) var(--sp-12); }
  .product-hero__media img { aspect-ratio: 16 / 9; }
  .plan { padding: var(--sp-6) var(--sp-5); }

  /* 「最受歡迎」的緞帶在單欄堆疊時要留出空間，否則會被上一張卡蓋住 */
  .plan-grid { gap: var(--sp-8); }
}