/* ==========================================
   contact-form-7.css - Contact Form 7専用スタイル
   - オリジナルデザインを維持しながらCF7を統合
========================================== */

/* Contact Form 7 のラッパー */
.wpcf7 {
  margin-top: 22px;
}

.wpcf7-form {
  display: grid;
  gap: 16px;
}

/* ========== フォームグループ ========== */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ========== ラベル ========== */
.wpcf7 label {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  display: inline-block;
}

/* 必須マーク */
.wpcf7 .required {
  color: #0a7bff;
}

/* ========== 入力フィールド ========== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #0b0b0b;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: #0a7bff;
}

/* テキストエリア */
.wpcf7 textarea {
  min-height: 130px;
  resize: vertical;
}

/* ========== セレクトボックス ========== */
.wpcf7 .select-wrapper {
  position: relative;
}

.wpcf7 select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 14px 40px 14px 14px;
  height: auto;
  min-height: 48px;
  cursor: pointer;
  line-height: 1.4;
}

/* ドロップダウンアイコン用ラッパー */
.wpcf7-form-control-wrap[data-name] {
  position: relative;
  display: block;
}

/* ドロップダウンアイコン */
.wpcf7-form-control-wrap[data-name] select + .wpcf7-not-valid-tip,
.wpcf7 .select-wrapper::after {
  /* 既存のアイコンスタイルは維持 */
}

/* セレクトボックスの矢印アイコン（カスタム） */
.wpcf7 select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* select-wrapperがない場合でも対応 */
.wpcf7 .select-wrapper::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  pointer-events: none;
}

/* ========== ラジオボタン・チェックボックス（標準スタイル） ========== */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
  display: grid;
  gap: 12px;
}

.wpcf7 .wpcf7-list-item {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  cursor: pointer !important;
}

/* ラジオボタンとチェックボックスを標準表示に */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: #0a7bff !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
  border: 1px solid #9ca3af !important;
  background: #fff !important;
}

.wpcf7 input[type="radio"] {
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
  appearance: radio !important;
  border-radius: 50% !important;
}

/* ラベル全体をクリック可能に - labelタグとして扱う */
.wpcf7 .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  width: 100% !important;
}

.wpcf7 .wpcf7-list-item-label {
  display: inline !important;
  font-size: 14px !important;
  color: #111 !important;
  cursor: pointer !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  user-select: none !important;
}

/* 擬似要素を完全にリセット（親テーマ上書き用） */
.wpcf7 .wpcf7-list-item-label::before,
.wpcf7 .wpcf7-list-item-label::after,
.wpcf7 .wpcf7-list-item::before,
.wpcf7 .wpcf7-list-item::after,
.wpcf7 input[type="radio"]::before,
.wpcf7 input[type="radio"]::after,
.wpcf7 input[type="checkbox"]::before,
.wpcf7 input[type="checkbox"]::after,
.wpcf7 .wpcf7-radio::before,
.wpcf7 .wpcf7-radio::after,
.wpcf7 .wpcf7-checkbox::before,
.wpcf7 .wpcf7-checkbox::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
  position: static !important;
}

/* ========== 送信ボタン ========== */
.wpcf7 input[type="submit"] {
  margin-top: 10px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  background: linear-gradient(90deg, #4c22ff 0%, #0a7bff 50%, #00d6c6 100%);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wpcf7 input[type="submit"]:active {
  transform: translateY(0);
}

/* ========== バリデーションメッセージ ========== */
.wpcf7-not-valid-tip {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.wpcf7-validation-errors {
  border: 1px solid #ef4444;
  background: #fef2f2;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

.wpcf7-mail-sent-ok {
  border: 1px solid #10b981;
  background: #d1fae5;
  color: #065f46;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}

/* 送信完了メッセージを非表示（カスタムダイアログを使用） */
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-response-output[aria-hidden="true"] {
  display: none !important;
}

/* スクリーンリーダー用メッセージを非表示 */
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wpcf7 .screen-reader-response ul {
  display: none !important;
}

/* ========== スピナー ========== */
.wpcf7 .ajax-loader {
  display: none;
}

.wpcf7-spinner {
  display: none;
}

/* 送信中の状態 */
.wpcf7 form.submitting input[type="submit"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========== 生年月日フィールド ========== */
.wpcf7 input[type="date"] {
  width: 100%;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #0b0b0b;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}

.wpcf7 input[type="date"]:focus {
  outline: none;
  border-color: #0a7bff;
}

/* ========== プライバシーポリシー同意チェックボックス ========== */
.privacy-policy-field {
  margin-top: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.privacy-policy-field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.privacy-policy-field .wpcf7-acceptance {
  display: block;
}

.privacy-policy-field .wpcf7-list-item {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.privacy-policy-field .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.privacy-policy-field input[type="checkbox"] {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

.privacy-policy-field .wpcf7-list-item-label {
  display: inline !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #111 !important;
}

.privacy-policy-field a.privacy-policy-link {
  color: #0a7bff;
  text-decoration: underline;
  font-weight: 500;
}

.privacy-policy-field a.privacy-policy-link:hover {
  text-decoration: none;
}

/* プライバシーポリシー未チェック時のエラーメッセージ */
.privacy-policy-field .wpcf7-not-valid-tip,
.wpcf7-acceptance .wpcf7-not-valid-tip,
.privacy-error-message {
  display: block !important;
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
}

/* エラー状態のフィールド */
.privacy-policy-field.has-error {
  border-color: #fecaca;
  background: #fff5f5;
}

/* 必須フィールドのエラー */
.wpcf7-not-valid {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}

/* ========== 任意ラベル ========== */
.optional {
  color: #6b7280;
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
}