/* form_assist.css v4 (2026-10-10) -- 自動車保険モデル UI/UX & MAGI合議 APPROVED */

/* 1. エラー一覧 (画面上部) */
#fa-errsum{margin:12px 0;padding:12px 16px;border:2px solid #dc2626;border-radius:8px;background:#fef2f2;color:#991b1b;font-size:15px;line-height:1.6;scroll-margin-top:84px;box-shadow:0 2px 8px rgba(220,38,38,0.1)}
#fa-errsum .fa-errsum-title{font-weight:700;font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
#fa-errsum ul{margin:0;padding-left:1.2em}
#fa-errsum li{margin:3px 0}
#fa-errsum a{color:#b91c1c;text-decoration:underline;font-weight:600}

/* 2. 既存の must.gif 背景画像を非表示にし、スマートなリアルタイムバッジに置き換える */
th.must, th.must_en, dt.must, dt.must_en, .form-group.row .must, .form-group.row .must_en{background-image:none !important}

/* リアルタイム OK / 必須 バッジ (価格.comモデル: 右端に配置) */
.fa-badge{display:inline-block;float:right;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;line-height:1.2;vertical-align:middle;margin-top:1px;transition:all .2s ease;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.fa-badge-req{background:#dc2626;color:#fff}
.fa-badge-ok{background:#16a34a;color:#fff}

/* 未入力必須行の淡いピンクハイライト (価格.comモデル) */
tr.fa-row-incomplete > td, dd.fa-row-incomplete, .form-group.row.fa-row-incomplete{background:#fff8f8 !important;transition:background .2s ease}
tr.fa-row-complete > td, dd.fa-row-complete, .form-group.row.fa-row-complete{background:#ffffff !important;transition:background .2s ease}

/* 入力欄のリアルタイム枠線・背景色連動 */
tr.fa-row-incomplete input[type=text], tr.fa-row-incomplete select, tr.fa-row-incomplete textarea,
dd.fa-row-incomplete input[type=text], dd.fa-row-incomplete select, dd.fa-row-incomplete textarea{
  border-color:#fca5a5 !important;background-color:#fffbfa !important;
}
tr.fa-row-complete input[type=text], tr.fa-row-complete select, tr.fa-row-complete textarea,
dd.fa-row-complete input[type=text], dd.fa-row-complete select, dd.fa-row-complete textarea{
  border-color:#cbd5e1 !important;background-color:#ffffff !important;
}

/* 3. 送信ボタン状態連動 (価格.comモデル) */
.fa-btn-incomplete{background:#94a3b8 !important;border-color:#94a3b8 !important;color:#fff !important;opacity:.9 !important;cursor:pointer !important;box-shadow:none !important}
.fa-btn-incomplete:hover{opacity:1 !important;background:#64748b !important}

/* 4. エラー強調 */
dd.fa-err,.form-group.fa-err,tr.fa-err > td{background:#fff5f5 !important}
tr.fa-err > th,dd.fa-err,dt.fa-err,.form-group.fa-err{box-shadow:inset 4px 0 0 #dc2626}
.fa-err .error,.fa-err .alert-danger{color:#b91c1c !important;font-weight:700;font-size:14px;padding:4px 0}
.fa-err input[type=text],.fa-err input:not([type]),.fa-err select,.fa-err textarea{border:2px solid #dc2626 !important;background:#fff !important}
div.error:not(:empty){color:#b91c1c;font-weight:700}

/* 5. 安心アシスト注記 (アクサダイレクトモデル) */
.fa-note-photo, .fa-note-pr{margin:6px 0 2px 0;padding:6px 10px;border-radius:6px;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;font-size:12px;line-height:1.5;display:inline-block}

/* 6. 必須残り件数フロートピル */
.fa-pill{position:fixed;right:14px;bottom:14px;z-index:9999;border:0;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.22);cursor:pointer;transition:transform .2s ease,background .2s ease}
.fa-pill:hover{transform:translateY(-2px)}
.fa-pill.ng{background:#dc2626;color:#fff}
.fa-pill.ok{background:#16a34a;color:#fff;cursor:default}

/* 7. 文字数カウンタ */
.fa-counter{font-size:12px;color:#64748b;text-align:right;margin-top:2px}

/* 8. 下書き復元バナー */
#fa-restore{margin:10px 0;padding:10px 14px;border:1px solid #f59e0b;background:#fffbeb;border-radius:8px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#fa-restore span{color:#92400e;font-weight:600}
#fa-restore button{border:0;border-radius:6px;padding:6px 14px;font-weight:700;background:#0f766e;color:#fff;cursor:pointer}
#fa-restore button.sub{background:#e2e8f0;color:#334155}

/* 9. スマホ対応 */
@media (max-width:767px){
  form[name=form] input[type=text],form[name=form] select,form[name=form] textarea{font-size:16px}
  .fa-pill{right:8px;bottom:8px;padding:8px 14px;font-size:13px}
}

/* ---------- 12. 登録フロー ステップ プログレスバー (regist) ---------- */

/* ---- fa-step-bar モダンベクターステップフロー (6段階対応) ---- */
.fa-step-bar {
  display: flex !important;
  margin: 15px 0 25px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  border: 1px solid #cbd5e1 !important;
}
.fa-step-bar li {
  flex: 1 !important;
  text-align: center !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #f1f5f9 !important;
}
.fa-step-bar li a, .fa-step-bar li span.step-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-decoration: none !important;
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  transition: all .2s !important;
}
.fa-step-bar li:last-child a, .fa-step-bar li:last-child span.step-label {
  border-right: 0 !important;
}
.fa-step-bar li.active a, .fa-step-bar li.active span.step-label {
  background: #0284c7 !important;
  color: #ffffff !important;
}
.fa-step-bar li.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  margin-left: -6px !important;
  border-width: 6px 6px 0 !important;
  border-style: solid !important;
  border-color: #0284c7 transparent transparent transparent !important;
  z-index: 10 !important;
}
.fa-step-bar li.complete a, .fa-step-bar li.complete span.step-label {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}
.fa-step-num {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
}
.fa-step-bar li.active .fa-step-num {
  background: #ffffff !important;
  color: #0284c7 !important;
}
.fa-step-bar li.complete .fa-step-num {
  background: #0284c7 !important;
  color: #ffffff !important;
}
@media (max-width: 767px) {
  .fa-step-bar {
    flex-wrap: wrap !important;
    border-radius: 6px !important;
    margin: 10px 0 20px 0 !important;
  }
  .fa-step-bar li {
    flex: 0 0 33.333% !important;
    border-bottom: 1px solid #cbd5e1 !important;
  }
  .fa-step-bar li:nth-child(n+4) {
    border-bottom: 0 !important;
  }
  .fa-step-bar li a, .fa-step-bar li span.step-label {
    padding: 10px 2px !important;
    font-size: 12px !important;
  }
}