/**
 * Plugin Styles: Contact Form 7
 */

/* フォーム全体のコンテナ */
.wpcf7 {
  max-width: 100%;
}

.wpcf7 form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40); /* 各項目の縦余白 */
}

/* ==========================================
 * フォームの各項目グループ (SP/TB デフォルト: 縦並び)
 * ========================================== */
.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12); /* ラベルとフィールドの間のスペース */
  width: 100%;
  position: relative;
}

/* ラベルテキスト (SP/TB デフォルト) */
.contact-form-label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  font-family: var(--wp--preset--font-family--base);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.2;
  color: var(--wp--preset--color--text-primary);
  margin-bottom: 0 !important;
  width: 100%;
}

.contact-form-label .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin-top: var(--wp--preset--spacing--12);
}

/* ==========================================
 * PCサイズ表示用 (横幅 1024px 以上)
 * ========================================== */
@media screen and (min-width: 1024px) {
  /* 項目グループを横並び・上揃え・ボーダー区切りにする */
  .contact-form-group {
    flex-direction: row; /* 横並び */
    align-items: flex-start; /* 上揃え */
  }

  /* 最初の項目の上パディングをリセットし、一番上を綺麗に揃える */
  .wpcf7 form .contact-form-group:first-child {
    padding-top: 0;
  }

  /* PC表示時のラベルの幅を固定し、左側をきれいに揃える */
  .contact-form-label {
    width: 240px; /* ラベルの横幅 */
    flex-shrink: 0; /* 縮み防止 */
    padding-top: var(
      --wp--preset--spacing--16
    ); /* 入力枠（高56px・パディング16px）の文字の高さと上揃えを合わせるための調整 */
  }

  /* ネスト（閉じタグ不具合）が発生した場合でも、PC表示時は横並びをキープする */
  .contact-form-label .wpcf7-form-control-wrap {
    margin-top: 0; /* 縦並び用の余白をクリア */
    flex-grow: 1;
  }

  /* 入力フィールド側を右側の残り幅いっぱいに広げる */
  .wpcf7-form-control-wrap {
    flex-grow: 1;
  }
}

/* 必須・任意バッジ (Figma 3367:358 基準) */
.badge-required {
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--text-on-dark) !important;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1;
  padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
  border-radius: var(--wp--preset--border-radius--parts) !important;
  display: inline-block;
}

.badge-optional {
  background-color: var(--wp--preset--color--background) !important;
  color: var(--wp--preset--color--text-secondary) !important;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1;
  padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
  border-radius: var(--wp--preset--border-radius--parts) !important;
  display: inline-block;
  border: 1px solid var(--wp--preset--color--border-default);
}

/* 入力フィールド共通 (Figma 1:184 基準) */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select {
  width: 100% !important;
  background-color: var(--wp--preset--color--background) !important;
  border: 1px solid var(--wp--preset--color--border-default) !important;
  border-radius: var(--wp--preset--border-radius--parts) !important;
  padding: var(--wp--preset--spacing--16) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--wp--preset--color--text-primary) !important;
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base);
  box-sizing: border-box;
}

/* 高さの個別指定 */
.wpcf7-text {
  height: 56px !important;
}

.wpcf7-textarea {
  height: 198px !important;
  resize: vertical;
}

/* フォーカス（選択）時 */
.wpcf7-text:focus,
.wpcf7-textarea:focus {
  border-color: var(--wp--preset--color--primary) !important;
  background-color: var(--wp--preset--color--white) !important;
  outline: none !important;
}

/* プレースホルダー文字色 */
.wpcf7-text::placeholder,
.wpcf7-textarea::placeholder {
  color: var(--wp--preset--color--text-placeholder) !important;
}

/* エラー時の入力欄 */
.wpcf7-not-valid {
  border-color: var(--wp--preset--color--danger) !important;
  background-color: #fff6f6 !important;
}

/* エラーメッセージ（Figma 1:1062 基準） */
.wpcf7-not-valid-tip {
  color: var(--wp--preset--color--danger) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin-top: var(--wp--preset--spacing--8) !important;
  display: block;
}

/* 送信ボタンの装飾 (テーマ標準ボタンとデザインを統一) */
.wpcf7-submit {
  min-width: 160px !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--wp--preset--spacing--16) !important;
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--text-on-dark) !important;
  border: 1px solid var(--wp--preset--color--primary) !important;
  border-radius: var(--wp--custom--border-radius--button) !important;
  font-size: var(--wp--preset--font-size--md) !important;
  font-weight: var(--wp--custom--typography--font-weight--ui) !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: all var(--transition-base) !important;
}

.wpcf7-submit:hover {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--primary) !important;
  border-color: var(--wp--preset--color--primary) !important;
}

/* 送信完了・エラーメッセージ枠 */
.wpcf7-response-output {
  margin: var(--wp--preset--spacing--24) 0 0 0 !important;
  padding: var(--wp--preset--spacing--16) !important;
  border-radius: var(--wp--preset--border-radius--parts) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* 送信成功時 */
.wpcf7.mail-sent-ok .wpcf7-response-output {
  border-color: var(--wp--preset--color--success) !important;
  background-color: #f2faf5 !important;
  color: var(--wp--preset--color--success) !important;
}

/* バリデーションエラー等の失敗時 */
.wpcf7.validation-failed .wpcf7-response-output,
.wpcf7.aborted .wpcf7-response-output {
  border-color: var(--wp--preset--color--danger) !important;
  background-color: #fff6f6 !important;
  color: var(--wp--preset--color--danger) !important;
}

/* ラジオボタンのレイアウト (SP/TB デフォルト: 縦積み) */
.wpcf7-radio {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  gap: var(--wp--preset--spacing--16); /* 選択肢同士の余白 */
  margin-top: var(--wp--preset--spacing--12);
}

@media screen and (min-width: 1024px) {
  .wpcf7-radio {
    flex-direction: row; /* PCでは横並びにする */
    gap: var(--wp--preset--spacing--24); /* 選択肢同士の余白 */
  }
}

.wpcf7-list-item {
  margin: 0 !important;
}

.wpcf7-list-item label {
  display: inline-flex;
  align-items: center; /* ラベル全体の縦中央揃え */
  gap: var(--wp--preset--spacing--8);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-primary);
  line-height: 1.2 !important; /* 行高による縦ズレ防止 */
}

/* 送信完了スピナー（ぐるぐる）の位置ズレ防止 */
.wpcf7-spinner {
  position: absolute !important;
  margin: 0 0 0 var(--wp--preset--spacing--8) !important; /* スピナーを絶対配置で浮かせてボタンの幅占有を防ぐ */
  left: auto !important; /* 位置を自動（ボタンのすぐ右隣）にする */
}

/* ==========================================
 * 4. 送信エリアグループのレイアウト（同意・Turnstile・送信ボタン）
 * ========================================== */

/* グループ全体の縦並び・中央寄せ */
.contact-form-submit-group {
  display: flex;
  flex-direction: column;
  align-items: center; /* 子要素をすべて中央寄せ */
  justify-content: center;
  gap: var(--wp--preset--spacing--24); /* 同意、Turnstile、ボタンの間の隙間 */
  width: 100%;
}

/* プライバシーポリシー同意チェックボックス */
.privacy-consent-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.privacy-consent-wrapper label {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--text-primary);
}

/* 同意チェックボックス의 カスタムデザイン */
.privacy-consent-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--wp--preset--color--border-default) !important;
  border-radius: 4px !important;
  appearance: none;
  background-color: var(--wp--preset--color--white) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--transition-base);
  margin: 0 !important;
}

.privacy-consent-wrapper input[type="checkbox"]:checked {
  border-color: var(--wp--preset--color--primary) !important;
  background-color: var(--wp--preset--color--primary) !important;
}

/* チェックマーク */
.privacy-consent-wrapper input[type="checkbox"]:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid var(--wp--preset--color--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block;
  margin-top: -2px;
}

/* Turnstile ラッパー */
.turnstile-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 65px; /* ロード時のガタつき防止 */
}

/* 送信ボタンラッパー */
.submit-button-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}