/* ══════════════════════════════════════════════════
   Subscription Migration v1.2
   ══════════════════════════════════════════════════ */

/* ─── Page Header ─── */
.sm-page-header {
  max-width: 780px;
  margin: 0 auto 20px;
  padding: 0 16px;
}
.sm-page-title {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 8px;
}
.sm-page-note {
  font-size: 13px;
  color: #64748b;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin: 0;
  line-height: 1.7;
}
.sm-page-note strong { color: #374151; }

.sm-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif;
  color: #1a1a2e;
}

/* ─── Card ─── */
.sm-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  overflow: hidden;
  margin-bottom: 20px;
}
.sm-card--center { text-align: center; padding: 52px 24px; }
.sm-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.sm-card__header h2 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; }
.sm-card__body { padding: 24px; }

/* ─── Announcement ─── */
.sm-announcement-card .sm-card__header {
  background: #eef2ff;
}
.sm-announcement-card .sm-card__header h2 {
  font-size: 18px;
  line-height: 1.5;
  color: #312e81;
}
.sm-announcement-body {
  line-height: 1.9;
  color: #334155;
}
.sm-announcement-body p {
  margin: 0 0 12px;
}
.sm-announcement-body p:last-child {
  margin-bottom: 0;
}
.sm-announcement-signoff {
  font-weight: 700;
  color: #1e293b;
}

/* ─── Step Badge ─── */
.sm-step-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #4f46e5;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Hint ─── */
.sm-hint { margin: 0 0 14px; color: #64748b; font-size: 14px; }
.sm-required { color: #ef4444; }

/* ─── Input ─── */
.sm-input-row { margin-bottom: 14px; }
.sm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color .2s;
  outline: none;
  background: #fff;
}
.sm-input:focus { border-color: #4f46e5; }
.sm-input--captcha {
  width: 200px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .15em;
  padding: 10px 8px;
}

/* ─── Captcha Row ─── */
.sm-captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sm-captcha-label { font-size: 14px; color: #475569; white-space: nowrap; }
.sm-captcha-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  user-select: none;
}
#sm-captcha-code {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #1e293b;
  font-family: "Courier New", monospace;
  text-shadow: 1px 1px 0 rgba(0,0,0,.08);
  /* 視覺干擾線 */
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      rgba(100,116,139,.06) 6px,
      rgba(100,116,139,.06) 7px
    );
}
.sm-captcha-refresh {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #94a3b8;
  padding: 0 2px;
  line-height: 1;
  transition: color .2s, transform .2s;
}
.sm-captcha-refresh:hover { color: #4f46e5; transform: rotate(180deg); }

/* ─── Buttons ─── */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, opacity .2s, transform .1s, box-shadow .2s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.sm-btn:active { transform: scale(.98); }
.sm-btn:disabled { opacity: .5; cursor: not-allowed; }

.sm-btn--primary { background: #4f46e5; color: #fff; }
.sm-btn--primary:hover:not(:disabled) { background: #4338ca; box-shadow: 0 4px 12px rgba(79,70,229,.3); }

.sm-btn--ghost { background: transparent; border: 1.5px solid #cbd5e1; color: #475569; }
.sm-btn--ghost:hover { background: #f1f5f9; }

.sm-btn--sm { padding: 7px 14px; font-size: 13px; }
.sm-btn--full { width: 100%; }
.sm-btn--cta {
  margin-top: 22px;
  padding: 16px 22px;
  font-size: 16px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 4px 20px rgba(79,70,229,.35);
}
.sm-btn--cta:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(79,70,229,.45); transform: translateY(-1px); }
.sm-btn--cta:disabled { background: #94a3b8; box-shadow: none; }

/* ─── Button Group ─── */
.sm-btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ─── Alerts ─── */
.sm-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 12px;
  line-height: 1.6;
}
.sm-alert--error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.sm-alert--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.sm-alert--info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ─── Not Found ─── */
.sm-not-found-icon { font-size: 48px; margin-bottom: 12px; }
.sm-not-found-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.sm-not-found-input { color: #4f46e5; font-weight: 600; margin: 0 0 10px; font-size: 15px; }

/* ─── Form Grid ─── */
.sm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sm-form-field { display: flex; flex-direction: column; gap: 6px; }
.sm-form-field label { font-size: 13px; font-weight: 600; color: #374151; }
.sm-form-field--full { grid-column: 1 / -1; }

/* ─── Subscription Status ─── */
.sm-sub-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.sm-sub-status--none {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
}
.sm-sub-status--active {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
}
.sm-sub-status--active2026 {
  background: linear-gradient(135deg, #f0fdf4 0%, #fefce8 100%);
  border: 2px solid #4ade80;
  padding: 20px 16px;
}
.sm-sub-status--active2026 strong {
  font-size: 17px;
  color: #15803d;
}
.sm-sub-status__icon {
  font-size: 28px;
  flex-shrink: 0;
}
.sm-sub-status__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sm-sub-status__text strong {
  font-size: 15px;
  color: #1e293b;
}
.sm-sub-status__text span {
  font-size: 13px;
  color: #64748b;
}

/* ─── Subscription Items ─── */
.sm-sub-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.sm-sub-item:hover { border-color: #a5b4fc; background: #fafafe; }
.sm-sub-item--selected { border-color: #4f46e5; background: #eef2ff; }

.sm-sub-item__radio {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
  transition: border-color .2s;
}
.sm-sub-item--selected .sm-sub-item__radio { border-color: #4f46e5; }
.sm-radio-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  transition: background .2s;
}
.sm-sub-item--selected .sm-radio-dot { background: #4f46e5; }

.sm-sub-item__name { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #1e293b; }
.sm-sub-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  align-items: center;
}

/* ─── Badges ─── */
.sm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.sm-badge--active   { background: #dcfce7; color: #166534; }
.sm-badge--on-hold  { background: #fef9c3; color: #854d0e; }
.sm-badge--pending  { background: #e0f2fe; color: #0369a1; }
.sm-badge--cancelled{ background: #f1f5f9; color: #94a3b8; }

.sm-tag-ecpay {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #fecdd3;
}

/* ─── Plan List (每方案一行) ─── */
.sm-plan-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

/* 隱藏原生 radio */
.sm-plan-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.sm-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  background: #fff;
  user-select: none;
}
.sm-plan-row:hover { border-color: #a5b4fc; background: #fafafe; }
.sm-plan-row--selected { border-color: #4f46e5; background: #eef2ff; }

/* 自訂圓圈 */
.sm-plan-row__radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  position: relative;
  transition: border-color .18s;
}
.sm-plan-row__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  transition: background .18s;
}
.sm-plan-row--selected .sm-plan-row__radio { border-color: #4f46e5; }
.sm-plan-row--selected .sm-plan-row__radio::after { background: #4f46e5; }

.sm-plan-row__name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.sm-plan-row--selected .sm-plan-row__name { color: #3730a3; }

.sm-plan-row__price {
  font-size: 15px;
  font-weight: 700;
  color: #4f46e5;
  white-space: nowrap;
}
.sm-plan-row--selected .sm-plan-row__price { color: #3730a3; }
.sm-plan-row__cycle {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

.sm-no-products { color: #94a3b8; text-align: center; padding: 30px 0; }

/* ─── Spinner ─── */
.sm-spinner {
  width: 50px; height: 50px;
  border: 5px solid #e2e8f0;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: sm-spin .8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }
.sm-processing-text { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 6px; }
.sm-processing-sub  { font-size: 14px; color: #64748b; margin: 0; }

/* ─── Responsive ─── */
@media (max-width: 580px) {
  .sm-captcha-row { gap: 8px; }
  .sm-input--captcha { width: 85px; font-size: 16px; }
  .sm-plans-grid { grid-template-columns: 1fr 1fr; }
  .sm-form-grid { grid-template-columns: 1fr; }
  .sm-form-field--full { grid-column: auto; }
  .sm-card__body { padding: 16px; }
  .sm-announcement-card .sm-card__header h2 { font-size: 16px; }
  .sm-btn-group { flex-direction: column; }
}
@media (max-width: 380px) {
  .sm-plans-grid { grid-template-columns: 1fr; }
}