/* =============================================================
   Miyu Contact Form — CF7 を MW WP Form 相当の構造・デザインに合わせ込む
   既存テーマ style.css の .contact-page #form-wrap 配下スタイルを流用する
   ============================================================= */

/* --- テキスト/メール/電話/テキストエリアのラッパーをブロック化（pの中で幅100%に） --- */
.contact-page #form-wrap .input p .wpcf7-form-control-wrap {
  display: block;
}
.contact-page #form-wrap .input p .wpcf7-form-control-wrap input[type="text"],
.contact-page #form-wrap .input p .wpcf7-form-control-wrap input[type="email"],
.contact-page #form-wrap .input p .wpcf7-form-control-wrap input[type="tel"],
.contact-page #form-wrap .input p .wpcf7-form-control-wrap textarea {
  width: 100%;
}

/* tel も既存の text/email と同じ枠線スタイルに（テーマCSSは text/email のみ列挙のため補完） */
.contact-page #form-wrap input[type="tel"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  color: rgba(0, 0, 0, .7);
  font-weight: 500;
  padding: 11px 20px;
  background: #fff;
  border: 1px solid rgba(101, 101, 101, .4);
  border-radius: 2px;
  outline: none;
}

/* --- 年齢: 幅90pxの枠（MW: .age .input p input 相当） --- */
.contact-page #form-wrap .age .input p .wpcf7-form-control-wrap {
  display: inline-block;
  width: 90px;
}

/* --- ラジオ・チェックボックス: CF7のリストアイテムを horizontal-item 相当に --- */
.contact-page #form-wrap .input.radio .wpcf7-form-control-wrap,
.contact-page #form-wrap .input.checkbox .wpcf7-form-control-wrap,
.contact-page #form-wrap .input.radio .wpcf7-radio,
.contact-page #form-wrap .input.checkbox .wpcf7-checkbox,
.contact-page #form-wrap .input.checkbox .wpcf7-acceptance {
  display: inline;
}
.contact-page #form-wrap .input.radio .wpcf7-list-item,
.contact-page #form-wrap .input.checkbox .wpcf7-list-item {
  display: inline-block;
  line-height: 1;
  margin: 0 18px 13px 0;   /* CF7デフォルトの margin-left:1em を打ち消しつつ horizontal-item の間隔を再現 */
}
/* CF7 が付ける list-item-label は、既存 .input.radio label の padding-left:28px で位置決め済 */

/* --- CF7 のバリデーションエラー表示を既存 .error 風に --- */
.contact-page #form-wrap .wpcf7-not-valid-tip {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #ff0000;
  padding: 5px 0 0 5px;
  display: block;
}
.contact-page #form-wrap .wpcf7-response-output {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #ff0000;
  border: 1px solid #ff0000;
  border-radius: 2px;
  margin: 24px 0 0;
  padding: 12px 16px;
}

/* 送信中スピナー */
.contact-page #form-wrap .wpcf7-spinner {
  margin: 0 8px;
  position: absolute;
    bottom: -20px;
    right: 0;
}

/* --- 確認用メール・プライバシーは入力画面では表示（テーマの .row.hide はCSSで隠していない＝そのまま表示） --- */

/* =============================================================
   確認画面：JSで form に .mw_wp_form_confirm を付与すると
   既存テーマCSS（.mw_wp_form_confirm ...）がそのまま効く。
   ここでは「値テキスト」と「入力UIの非表示」だけ面倒を見る。
   ============================================================= */
.contact-page #form-wrap .mw_wp_form_confirm .wpcf7-form-control-wrap { display: none !important; }
.contact-page #form-wrap .mw_wp_form_confirm .miyu-confirm-val {
  display: block;
  font-weight: 500;
  word-break: break-all;
}
/* 姓名・かなは横並びの値表示（既存 .mw_wp_form_confirm .name .input p {display:inline-block} に合わせる） */
.contact-page #form-wrap .mw_wp_form_confirm .name .input p .miyu-confirm-val {
  display: inline-block;
}
.contact-page #form-wrap .mw_wp_form_confirm .age .input p .miyu-confirm-val {
  display: inline-block;
}
/* 年齢「才」は確認画面でも値の直後に（既存CSSが .add を relative 化済み） */
.contact-page #form-wrap .mw_wp_form_confirm .input.textarea .miyu-confirm-val {
  white-space: pre-wrap;
}

/* 確認・変更ボタン（<button>）も既存の送信ボタンと同じ黒ボタンに */
.contact-page #form-wrap .submit button {
  display: inline-block;
  font-size: 1.227rem;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  background: #000;
  border: none;
  width: 142px;
  height: 47px;
  margin: 0 7px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: top;
}
.contact-page #form-wrap .submit button:hover {
  opacity: .6;
}

/* 送信/変更ボタンの初期表示制御（既存 .submit input[type=submit] に詳細度で勝つよう !important） */
.contact-page #form-wrap .submit .miyu-send,
.contact-page #form-wrap .submit .miyu-back {
  display: none !important;
}
.contact-page #form-wrap.is-confirm .submit .miyu-confirm {
  display: none !important;
}
.contact-page #form-wrap.is-confirm .submit .miyu-send,
.contact-page #form-wrap.is-confirm .submit .miyu-back {
  display: inline-block !important;
      line-height: 37px;
}

/* 完了画面 */
.contact-page #form-wrap .miyu-complete .submit {
  margin-top: 40px;
}

/* datepicker のz-indexは既存 #ui-datepicker-div で担保済 */