/* ------------------------------------------------------------------ *
 * お問い合わせフォームのボタン周り（PC / SP 共通）
 *
 * ⚠️ このファイルは PC/SP 両方で読み込むこと。
 *    custom/nav-text.css は PC 限定なので、フォームのスタイルをそちらに書くと
 *    スマホで一切効かない。
 *
 * 対象マークアップ（CF7 + contact-form-7-add-confirm）:
 *   <tr class="tl-form-actions"><td colspan="2"><p>
 *     [確認] [戻る] [送信する]  ← 非活性側は .wpcf7c-force-hide (display:none) が付く
 *   </p></td></tr>
 * ------------------------------------------------------------------ */

/* 送信ボタン行は罫線を消し、表全体の幅を基準に中央寄せする */
.iqfm-table tr.tl-form-actions > td {
  border: none !important;
  text-align: center;
  padding: 28px 0 8px !important;
}

/* 確認／戻る／送信 を中央に横並び。プラグインが display:none で片方を隠すので
   flex のままでも自動的に「残った1〜2個が中央」になる。 */
.iqfm-table tr.tl-form-actions p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}

/* CF7 のスピナーは送信ボタンの「兄弟」として常に存在し、非送信時も幅を持つ。
   flex の子になると中央寄せが実測44pxずれるため、送信中だけ表示する。
   （CF7 6.x はフォームに .submitting クラスを付ける） */
.iqfm-table tr.tl-form-actions .wpcf7-spinner {
  display: none;
}
form.submitting .tl-form-actions .wpcf7-spinner {
  display: inline-block;
}

/* 主ボタン（確認・送信する）= ブランドの緑 + 白文字。ナビのCTAと同じ #00913A。 */
.iqfm-table tr.tl-form-actions input[type="submit"] {
  min-width: 170px;
  padding: 13px 34px;
  border: 2px solid #00913A;
  border-radius: 999px;              /* ナビCTAと同じピル形 */
  background: #00913A;
  color: #fff;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 15px;                   /* 本文(15-16px)に対して大きすぎない値 */
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;          /* iOS の既定ボタン装飾を消す */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.iqfm-table tr.tl-form-actions input[type="submit"]:hover,
.iqfm-table tr.tl-form-actions input[type="submit"]:focus-visible {
  background: #007A31;               /* 送信系なので濃い緑。赤はエラーと紛らわしい */
  border-color: #007A31;
}
.iqfm-table tr.tl-form-actions input[type="submit"]:disabled {
  background: #B7D9C3;
  border-color: #B7D9C3;
  cursor: not-allowed;
}

/* 副ボタン（戻る）= 白地に緑枠。主ボタンとの主従を明確にする。 */
.iqfm-table tr.tl-form-actions input[type="button"].wpcf7-back {
  min-width: 130px;
  padding: 13px 28px;
  border: 2px solid #00913A;
  border-radius: 999px;
  background: #fff;
  color: #00913A;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.iqfm-table tr.tl-form-actions input[type="button"].wpcf7-back:hover,
.iqfm-table tr.tl-form-actions input[type="button"].wpcf7-back:focus-visible {
  background: #00913A;
  color: #fff;
}

/* スマホは横幅が狭いので縦積みにして押しやすくする */
@media screen and (max-width: 820px) {
  .iqfm-table tr.tl-form-actions p {
    flex-direction: column-reverse;   /* 主ボタン（送信）を上に置く */
    gap: 12px;
  }
  .iqfm-table tr.tl-form-actions input[type="submit"],
  .iqfm-table tr.tl-form-actions input[type="button"].wpcf7-back {
    width: 100%;
    min-width: 0;
  }
  .iqfm-table tr.tl-form-actions > td {
    padding: 24px 0 8px !important;
  }
}

/* 送信完了メッセージ。CF7既定は細い枠線だけで素っ気ないので、
   お礼の文面がきちんと読まれるよう緑基調のパネルにする。 */
.wpcf7 form.sent .wpcf7-response-output {
  margin: 24px 0 8px;
  padding: 20px 24px;
  border: 2px solid #00913A;
  border-radius: 12px;
  background: #F2FAF5;
  color: #1B4332;
  font-size: 15px;
  line-height: 1.9;
  /* 複数行の日本語は中央寄せだと行頭が揃わず読みにくいので左寄せにする。
     パネル自体は本文幅いっぱいなので、左寄せでも収まりは崩れない。 */
  text-align: left;
}

/* ------------------------------------------------------------------ *
 * 送信完了後の表示
 * 完了メッセージだけを残し、他は隠して読ませることに集中させる。
 * 対象要素はフォームの外にもあるので、JS が body に .tl-form-sent を付けて
 * ここで制御する（セレクタはいずれもページ内で一意であることを確認済み）。
 * ------------------------------------------------------------------ */

/* 導入文（株式会社とまとリビングでは…）とプライバシーポリシーを隠す */
body.tl-form-sent .post_data.text_box,
body.tl-form-sent .post-html.field_2col {
  display: none !important;
}

/* フォーム容器は2カラムの左側なので、1カラムに戻して中央に置く */
body.tl-form-sent .zc_form_content {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 入力表・Turnstile・隠しフィールドを隠す（応答欄だけ残す） */
body.tl-form-sent form.wpcf7-form > .iqfm-table,
body.tl-form-sent form.wpcf7-form > .cf-turnstile,
body.tl-form-sent form.wpcf7-form > .hidden-fields-container {
  display: none !important;
}

/* 完了メッセージを主役にする */
body.tl-form-sent .wpcf7 form.sent .wpcf7-response-output {
  max-width: 720px;
  margin: 32px auto 64px;
  padding: 36px 40px 40px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 2;
}

/* 一目で「完了した」と分かるようチェックマークを添える */
body.tl-form-sent .wpcf7 form.sent .wpcf7-response-output::before {
  content: "✓";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #00913A;
  color: #fff;
  font-size: 30px;
  line-height: 56px;
  text-align: center;
}

@media screen and (max-width: 820px) {
  body.tl-form-sent .wpcf7 form.sent .wpcf7-response-output {
    margin: 24px auto 40px;
    padding: 28px 20px 32px;
    font-size: 15px;
    line-height: 1.9;
  }
}