/* PR-5b (2026-07-03): 契約・お支払い画面 全面刷新
 *
 * PR-5a (tokens.css / components.css) の .mg-* コンポーネントを主に使い、
 * 本ファイルはそれで足りない billing 固有の見た目 (プラン選択カード /
 * 数量ステッパー / オプションの許可トグル) のみを追加する。
 *
 * 旧実装 (PR-696) の GO 風 dark gradient hero + 「V」透かしロゴは撤去した。
 * 「V」は ViralForge 由来のブランド残骸で、まるごとSNS の顧客画面に出すべき
 * ものではない (過去に同種の置換漏れで顧客露出事故が起きている)。装飾も
 * 過剰グラデーション/ピル型バッジ乱用を避け、styleguide.html の .mg-card
 * パターンに揃える。
 */

/* [hidden] 属性は必ず勝たせる (display:grid/flex/flexを後で指定するブロックの保険)。
 * PR-5b QA fix: components.css の .mg-banner / .mg-card 等は author stylesheet で
 * display:flex/block を明示指定しているため、素の [hidden] 属性 (UA stylesheet 由来)
 * より優先度が高く、hidden を付けても空の枠が表示され続ける実害があった
 * (billCurrentCancelNotice で確認)。契約・お支払いタブ配下は個別クラスを都度
 * 追いかけず、この画面内の [hidden] を一括で確実に隠す。 */
#billing-account [hidden] { display: none !important; }
.bill-section[hidden] { display: none !important; }

.bill-section {
  margin: 0 0 var(--mg-space-6);
}
.bill-section:last-child { margin-bottom: 0; }

.bill-section__title {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-font-size-xl);
  font-weight: 700;
  line-height: var(--mg-line-height-tight);
  color: var(--mg-text);
}

.bill-subtitle {
  margin: 0 0 6px;
  font-size: var(--mg-font-size-lg);
  font-weight: 700;
  color: var(--mg-text);
}

.bill-hint {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-font-size-xs);
  color: var(--mg-text-muted);
  line-height: var(--mg-line-height);
}

/* ================================================================
 * ① 現在のご契約 (.mg-card 内の info rows)
 * ================================================================ */
.bill-current__list {
  margin: 0;
}
.bill-current__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mg-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--mg-border);
  font-size: var(--mg-font-size-sm);
}
.bill-current__row:last-child { border-bottom: none; }
.bill-current__row dt { margin: 0; color: var(--mg-text-secondary); }
.bill-current__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--mg-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ================================================================
 * ② プラン選択カード
 * ================================================================ */
.bill-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mg-space-4);
}
@media (min-width: 640px) {
  .bill-plan-grid { grid-template-columns: 1fr 1fr; }
}

.bill-plan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--mg-bg-surface);
  border: 2px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  padding: var(--mg-space-4);
  box-shadow: var(--mg-shadow-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bill-plan-card:hover { border-color: var(--mg-primary-soft); }
.bill-plan-card:focus-visible { outline: none; box-shadow: var(--mg-focus-ring); }
.bill-plan-card.is-selected {
  border-color: var(--mg-primary);
  box-shadow: 0 0 0 1px var(--mg-primary) inset;
}

.bill-plan-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mg-space-2);
}
.bill-plan-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mg-font-size-lg);
  font-weight: 700;
  color: var(--mg-text);
}
.bill-plan-card__radio {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--mg-border-strong);
}
.bill-plan-card.is-selected .bill-plan-card__radio { border-color: var(--mg-primary); }
.bill-plan-card.is-selected .bill-plan-card__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--mg-primary);
}
.bill-plan-card__price {
  flex-shrink: 0;
  font-size: var(--mg-font-size-2xl);
  font-weight: 800;
  color: var(--mg-primary-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bill-plan-card__price .unit {
  margin-left: 2px;
  font-size: var(--mg-font-size-xs);
  font-weight: 600;
  color: var(--mg-text-muted);
}
.bill-plan-card__desc {
  margin: 0;
  font-size: var(--mg-font-size-sm);
  color: var(--mg-text-secondary);
  line-height: var(--mg-line-height);
}
.bill-plan-card__meta {
  margin: 0;
  font-size: var(--mg-font-size-xs);
  color: var(--mg-text-muted);
  line-height: 1.7;
}
.bill-plan-card__meta strong { color: var(--mg-text-secondary); font-weight: 600; }

/* ================================================================
 * ③ 追加投稿の数量ステッパー (kling/ltx/reap パック数量でも再利用)
 * ================================================================ */
.bill-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-sm);
  background: var(--mg-bg-surface);
  overflow: hidden;
}
.bill-stepper button {
  appearance: none;
  border: none;
  background: transparent;
  width: 40px;
  height: 44px;
  font-size: 20px;
  font-weight: 600;
  color: var(--mg-primary-strong);
  cursor: pointer;
  transition: background-color 0.15s;
}
.bill-stepper button:hover:not(:disabled) { background: var(--mg-bg-subtle); }
.bill-stepper button:disabled { color: var(--mg-text-muted); cursor: not-allowed; }
.bill-stepper input {
  width: 56px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--mg-border-strong);
  border-right: 1px solid var(--mg-border-strong);
  font-size: var(--mg-font-size-lg);
  font-weight: 600;
  color: var(--mg-text);
  background: var(--mg-bg-surface);
  -moz-appearance: textfield;
}
.bill-stepper input::-webkit-outer-spin-button,
.bill-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bill-stepper input:disabled { color: var(--mg-text-muted); background: var(--mg-bg-subtle); }

/* ================================================================
 * 料金内訳 (.mg-table を使うため見た目の追加は最小限)
 * ================================================================ */
.bill-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--mg-space-2);
  padding-top: var(--mg-space-3);
  border-top: 1px solid var(--mg-border);
}
.bill-summary__total > span:first-child {
  font-size: var(--mg-font-size-sm);
  color: var(--mg-text-secondary);
}
.bill-summary__total .amount {
  font-size: var(--mg-font-size-3xl);
  font-weight: 800;
  color: var(--mg-primary-deep);
  font-variant-numeric: tabular-nums;
}
.bill-summary__total .month-label {
  margin-left: 4px;
  font-size: var(--mg-font-size-xs);
  color: var(--mg-text-muted);
}

/* ================================================================
 * ④ オプション (kling / ltx / reap)
 * ================================================================ */
.bill-option {
  margin-bottom: var(--mg-space-3);
}
.bill-option:last-child { margin-bottom: 0; }

.bill-option__desc {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-font-size-xs);
  color: var(--mg-text-muted);
  line-height: var(--mg-line-height);
}

.bill-option__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-5);
  margin: 0 0 var(--mg-space-3);
  padding: 0;
}
.bill-option__stats dt {
  margin: 0 0 2px;
  font-size: var(--mg-font-size-xs);
  color: var(--mg-text-muted);
}
.bill-option__stats dd {
  margin: 0;
  font-size: var(--mg-font-size-lg);
  font-weight: 700;
  color: var(--mg-text);
  font-variant-numeric: tabular-nums;
}

.bill-option__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-3);
  flex-wrap: wrap;
  padding: var(--mg-space-3) 0 0;
  border-top: 1px solid var(--mg-border);
}
.bill-option__row-label {
  flex: 1 1 200px;
  font-size: var(--mg-font-size-sm);
  color: var(--mg-text-secondary);
  line-height: var(--mg-line-height);
}
.bill-option__row-label strong { color: var(--mg-text); font-weight: 600; }

/* 従量許可トグル (実体は checkbox、視覚的にスイッチ化) */
.bill-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
}
.bill-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bill-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--mg-border-strong);
  transition: background-color 0.15s;
  pointer-events: none;
}
.bill-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mg-bg-surface);
  box-shadow: 0 1px 3px rgba(46, 35, 26, 0.3);
  transition: transform 0.15s;
  pointer-events: none;
}
.bill-toggle input:checked ~ .bill-toggle__track { background: var(--mg-primary); }
.bill-toggle input:checked ~ .bill-toggle__thumb { transform: translateX(18px); }
.bill-toggle input:focus-visible ~ .bill-toggle__track { box-shadow: var(--mg-focus-ring); }
.bill-toggle input:disabled ~ .bill-toggle__track { opacity: 0.5; cursor: not-allowed; }
.bill-toggle input:disabled { cursor: not-allowed; }

/* ================================================================
 * スマホ (~375px) 調整
 * ================================================================ */
@media (max-width: 375px) {
  .bill-stepper button { width: 34px; height: 40px; font-size: 18px; }
  .bill-stepper input { width: 46px; height: 40px; font-size: var(--mg-font-size-md); }
  .bill-plan-card__price { font-size: var(--mg-font-size-xl); }
  .bill-summary__total .amount { font-size: var(--mg-font-size-2xl); }
  /* PR-5b QA fix: flex-direction を column にすると子の `flex: 1 1 200px` の
     flex-basis が主軸 (= 縦) に効き、.bill-option__row-label が高さ200pxの
     空白ブロックになってしまう (stepper/toggle との間に巨大な空白ができるバグ)。
     column 化時は basis を無効化して内容に合わせた高さにする。 */
  .bill-option__row { flex-direction: column; align-items: flex-start; }
  .bill-option__row-label { flex: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bill-plan-card,
  .bill-stepper button,
  .bill-toggle__track,
  .bill-toggle__thumb {
    transition: none;
  }
}