/* =============================================
   Upgrade Page
   ============================================= */

.upgrade-page {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ── Hero ── */
.upgrade-hero {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
}
.upgrade-hero-icon {
  font-size: 48px;
  margin-bottom: var(--sp-2);
}
.upgrade-hero-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}
.upgrade-hero-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── Product Card ── */
.upgrade-product-card {
  background: linear-gradient(135deg, #1B2A4A 0%, #0F1C36 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-align: center;
}
.upgrade-product-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.upgrade-product-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: #EDF1FF;
}
.upgrade-product-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  background: rgba(255, 215, 0, 0.15);
  color: var(--lotto-gold);
  border: 1px solid rgba(255, 215, 0, 0.35);
  padding: 2px 10px;
  border-radius: 999px;
}
.upgrade-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.upgrade-price {
  font-size: 48px;
  font-weight: 900;
  color: var(--lotto-gold);
  line-height: 1;
  letter-spacing: -1px;
}
.upgrade-price-unit {
  font-size: var(--text-base);
  color: #8FA3CC;
}
.upgrade-price-note {
  font-size: var(--text-xs);
  color: #5A7099;
}

/* ── Features ── */
.upgrade-features-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--border-subtle);
}
.upgrade-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.upgrade-feature-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.upgrade-feature-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  margin-top: 2px;
}
.upgrade-feature-list strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 2px;
}
.upgrade-feature-list p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Terms Box ── */
.upgrade-terms-box {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.upgrade-terms-box h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.upgrade-terms-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.upgrade-terms-box li {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.7;
  padding-left: var(--sp-3);
  position: relative;
}
.upgrade-terms-box li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
.upgrade-no-refund {
  background: rgba(255, 77, 109, 0.08);
  border: 1px solid rgba(255, 77, 109, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3) !important;
  color: var(--text-secondary) !important;
  margin-top: var(--sp-1);
}
.upgrade-no-refund::before { display: none; }

/* ── 不自動扣款 Badge ── */
.upgrade-no-renew-badge {
  display: inline-block;
  margin: var(--sp-2) auto 0;
  padding: 4px 14px;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: #4ADE80;
  letter-spacing: 0.02em;
}
.upgrade-no-renew-badge strong {
  color: #6EF0A0;
}

/* ── CTA ── */
.upgrade-cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.upgrade-main-btn {
  width: 100%;
  max-width: 320px;
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, #FFD700 0%, #F59E0B 100%);
  color: #1a1a2e;
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
  transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
}
.upgrade-main-btn:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(255, 215, 0, 0.5);
}
.upgrade-main-btn:active {
  opacity: 0.85;
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}
.upgrade-linepay-btn {
  width: 100%;
  max-width: 320px;
  padding: var(--sp-3) var(--sp-4);
  background: #06C755;
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.upgrade-linepay-btn:hover  { opacity: 0.88; }
.upgrade-linepay-btn:active { opacity: 0.80; transform: scale(0.98); }

.upgrade-linepay-logo {
  display: inline-block;
  background: #fff;
  color: #06C755;
  font-size: 11px;
  font-weight: 900;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0;
  line-height: 1.6;
  flex-shrink: 0;
}

/* ── 付費成功 Modal ── */
.upgrade-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,11,23,0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.upgrade-success-box {
  background: #111827;
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 16px;
  max-width: 400px;
  width: 100%;
  padding: 32px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.upgrade-success-icon {
  font-size: 48px;
}
.upgrade-success-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--lotto-gold);
  margin: 0;
}
.upgrade-success-msg {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}
.upgrade-success-line-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.upgrade-line-oa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px var(--sp-4);
  background: #06C755;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  justify-content: center;
  transition: opacity 0.15s;
}
.upgrade-line-oa-btn:hover { opacity: 0.88; }
.upgrade-success-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-base);
}
.upgrade-success-close:hover { color: var(--text-secondary); }

.upgrade-cta-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.8;
}
.upgrade-cta-note a {
  color: var(--accent);
  text-decoration: none;
}

/* ── Comparison Table ── */
.upgrade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.upgrade-table th {
  background: var(--surface-2);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-subtle);
}
.upgrade-table th:first-child { text-align: left; }
.upgrade-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  text-align: center;
}
.upgrade-table td:first-child { text-align: left; color: var(--text-primary); }
.upgrade-table tr:last-child td { border-bottom: none; }