/*
Theme Name: Ai Dental Child
Template: originalstyle-1column_01
Theme URI: https://aidentalclinic.com
Author: Ai Dental Clinic
Version: 1.0.9
*/

/* ---------- Global Font & Color Settings ---------- */
html, body,
h1, h2, h3, h4, h5, h6,
input, textarea, button,
.progress-container, .progress-container *,
.form-group, .form-group *,
.wpcf7-form, .wpcf7-form *,
.thanks-container, .thanks-container * {
  font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif !important;
  color: #4b2121 !important;
}
body {
  margin: 0;
  padding: 0;
  background: #fff;
}

/* ---------- Form Container ---------- */
.multi-step-form,
.wpcf7-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* ---------- Progress Bar (Pattern C) ---------- */
.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.progress-step {
  position: relative;
  flex: 1;
  text-align: center;
}
.progress-step .step-number {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  background: #ded0c2;
  color: #4b2121;
  margin-bottom: 0.5rem;
}
.progress-step.active .step-number {
  background: #4b2121;
  color: #fff;
}
/* グレーのバー */
.progress-step:not(:first-child)::before,
.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1rem;
  width: 50%;
  height: 2px;
  background: #ded0c2;
  z-index: -1;
}
.progress-step:not(:first-child)::before {
  left: 0;
}
.progress-step:not(:last-child)::after {
  right: 0;
}
/* アクティブステップの右バーだけダークに */
.progress-step.active::after {
  background: #4b2121;
}
/* 端の不要なバーを非表示 */
.progress-step:first-child::before,
.progress-step:last-child::after {
  display: none;
}

/* ---------- Section Titles (Pattern A) ---------- */
.form-group .form-title {
  font-size: 1.25rem;
  border-bottom: 2px solid #4b2121;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.form-group .form-title::after {
  content: '';
  margin-left: auto;
}

/* ---------- Form Inputs & Layout ---------- */
.form-input,
textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ded0c2;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.name-row { display: flex; gap: 1rem; }
.name-row label { flex: 1; display: flex; flex-direction: column; }

/* ---------- Radio Group (STEP2) ---------- */
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin-right: 1.5rem;
}
.wpcf7-form .wpcf7-radio input[type="radio"] {
  margin-right: 0.5rem;
}

/* Add spacing between distinct form-group elements */
.wpcf7-form .form-group + .form-group {
  margin-top: 2rem;
}

/* ---------- Checkbox Grid (STEP2) ---------- */
.wpcf7-form .checkbox-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 1rem !important;
  margin: 1rem 0 2rem !important;
}
.wpcf7-form .checkbox-grid label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem !important;
  border: 1px solid #ded0c2 !important;
  border-radius: 0.5rem !important;
  min-height: 4rem !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}
.wpcf7-form .checkbox-grid input[type="checkbox"] {
  margin-top: 0.2rem !important;
}

/* ---------- Textarea (STEP3) ---------- */
.textarea-group textarea {
  margin-bottom: 1.5rem;
}

/* ---------- Button Groups & Buttons ---------- */
.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.button-prev,
.button-next,
.button-submit,
.button-submit-final,
.btn-home,
.btn-call,
.call-button,
.thanks-btn {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.button-prev { background: #ded0c2; color: #4b2121; }
.button-next { background: #4b2121; color: #fff; }
.button-submit { background: #d08c93; color: #fff; }
.button-submit-final { background: #a26261; color: #fff; }
.btn-home { background: #d08c93; color: #fff; }
.btn-call,
.call-button { background: #4b2121; color: #fff; }

/* ---------- SVG Icon (Global & Thanks Page) ---------- */
svg.call-icon,
.thanks-buttons .btn-call svg.call-icon {
  display: inline-block !important;
  width: 1.5em !important;
  height: 1.5em !important;
  fill: currentColor !important;
  margin-right: 0.5em !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}
.thanks-buttons .btn-call {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
}

/* ──── Thanks Page: Remove auto <br> and align buttons ──── */
.thanks-container .thanks-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.thanks-container .thanks-buttons br {
  display: none !important;
}

/* ──── Thanks Page: SVGを強制白抜き ──── */
.thanks-container .btn-call svg.call-icon {
  fill: #fff !important;
}

/* ---------- Call-to-Action Container ---------- */
.form-call-cta {
  text-align: center;
  margin: 1.5rem 0;
}
.call-note {
  font-size: 0.875rem;
  color: #999;
  margin-top: 0.5rem;
}

/* ---------- Thank You Page ---------- */
.thanks-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}
.thanks-title { font-size: 1.5rem; margin-bottom: 1rem; }
.thanks-text { font-size: 1rem; margin-bottom: 1rem; }
.thanks-note { font-size: 0.875rem; color: #555; margin-bottom: 1.5rem; }
.thanks-buttons { display: flex; gap: 1rem; margin-bottom: 1rem; }
.thanks-caution { font-size: 0.875rem; color: #999; text-align: center; }

/* ---------- Mobile Adjustments ---------- */
@media (max-width: 600px) {
  .thanks-container .thanks-buttons {
    flex-direction: column;
    width: 100%;
  }
  .thanks-container .thanks-buttons a {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ──── Thank You ボタンのテキストを白に強制 ──── */
.thanks-buttons .btn-call,
.thanks-buttons .btn-home {
  color: #fff !important;
}

/* ─── Page Title ─── */
.page-title h2 {
  color: #ffffff !important;
}

/* ── マルチステップフォームのボタン文字色をリセット＆再指定 ── */
.wpcf7-form .button-prev,
.wpcf7-form .button-next,
.wpcf7-form .button-submit,
.wpcf7-form .button-submit-final {
  /* グローバルcolor指定を潰す */
  color: initial !important;
}

/* 「戻る」ボタンはダーク文字 */
.wpcf7-form .button-prev {
  color: #4b2121 !important;
}

/* 「次へ」「送信」ボタンは白文字 */
.wpcf7-form .button-next,
.wpcf7-form .button-submit,
.wpcf7-form .button-submit-final {
  color: #fff !important;
}

/* ── 進捗バー STEP ラベルの色調整 ── */
/* デフォルト（未達成・未アクティブ）はグレーに */
.progress-container .progress-step .step-label {
  color: #ded0c2 !important;
}
/* アクティブ or 完了ステップはダークに */
.progress-container .progress-step.active .step-label,
.progress-container .progress-step.complete .step-label {
  color: #4b2121 !important;
}

/* ── 進捗バー STEP 数字の色調整 ── */
/* アクティブステップの数字は白く */
.progress-container .progress-step.active .step-number {
  color: #fff !important;
}