/* プラン系ページ（申込・解約）共通スタイル（legal.css のトークン・レイアウトを流用） */

.lite-main { display: flex; flex-direction: column; gap: 24px; }

.lite-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
}
.lite-card h2 { margin-top: 0; }

.lite-price { font-size: 1.4rem; margin: 0.6em 0 1em; }
.lite-price strong { color: var(--primary); }

.lite-form { display: flex; flex-direction: column; gap: 6px; margin-top: 1.2em; }
.lite-form label { font-size: 0.85rem; font-weight: 700; margin-top: 10px; }
.lite-form input {
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.lite-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 61, 87, 0.15);
}
.lite-form button {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 16px;
  padding: 12px 20px;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.lite-form button:hover { background: var(--accent); }
.lite-form button:disabled { opacity: 0.6; cursor: not-allowed; }

.lite-error {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--accent);
  background: #fdecef;
  border: 1px solid var(--accent);
  border-radius: 8px;
}

/* hidden 属性が指す display: none は UA スタイル由来で、下の display 指定に負ける。
   出し分けを hidden 属性で行うため、打ち消されないように明示する。 */
[hidden] { display: none !important; }

/* 解約ページ: 契約状態の提示 */
.lite-status { margin: 0.4em 0; }
.lite-status strong { color: var(--primary); }

/* 解約ページ: 明示的な確認操作のチェックボックス（label をラベル列でなく横並びで使う） */
.lite-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 18px;
}
.lite-check input { padding: 0; }

/* 解約ページ: 解約の確定は主要動線ではないので、輪郭だけのボタンにする */
.lite-form button.lite-button--secondary {
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
}
.lite-form button.lite-button--secondary:hover {
  color: #fff;
  background: var(--accent);
}

@media (max-width: 600px) {
  .lite-card { padding: 20px; }
  .lite-price { font-size: 1.2rem; }
}