/* Mailform Pro カスタムスタイル - ダークテーマ対応 */
/* このファイルは mailformpro.css の後に読み込まれるため、優先度が高い */

/* テスト用：すべての要素に赤い枠を表示（反映確認用） */
/* この行をコメントアウトすると、スタイルが反映されているか確認できます */
/* input, select, textarea, button { outline: 3px solid red !important; } */

/* フォーム全体のスタイル調整 - より具体的なセレクタで確実に適用 */
body #mailformpro,
#mailformpro,
form#mailformpro {
  color: #ffffff !important;
  background-color: transparent !important; /* 背景を透明にして親要素の背景を表示 */
  background: transparent !important;
}

/* フォーム内の特定要素の背景を透明に（入力フィールドは除外） */
#mailformpro dl,
#mailformpro dt,
#mailformpro dd,
#mailformpro .mailform,
#mailformpro .mfp,
#mailformpro .mfp_rows,
#mailformpro .mfp_col10,
form#mailformpro dl,
form#mailformpro dt,
form#mailformpro dd,
form#mailformpro .mailform,
form#mailformpro .mfp,
form#mailformpro .mfp_rows,
form#mailformpro .mfp_col10 {
  background-color: transparent !important;
  background: transparent !important;
}

/* 入力フィールドの背景色を確実に設定（より具体的なセレクタで） */
#mailformpro input[type="text"],
#mailformpro input[type="email"],
#mailformpro input[type="tel"],
#mailformpro input[type="date"],
#mailformpro input[type="time"],
#mailformpro input[type="number"],
#mailformpro textarea,
#mailformpro select,
form#mailformpro input[type="text"],
form#mailformpro input[type="email"],
form#mailformpro input[type="tel"],
form#mailformpro input[type="date"],
form#mailformpro input[type="time"],
form#mailformpro input[type="number"],
form#mailformpro textarea,
form#mailformpro select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* セクションタイトルのスタイル - より具体的なセレクタで確実に適用 */
body #mailformpro .mfp.section-title,
#mailformpro .mfp.section-title,
.mfp.section-title {
  font-size: 0.8rem !important;
  font-weight: bold !important;
  color: #fbbf24 !important; /* accent color */
  margin-top: 3rem !important; /* セクション間の余白を大きく */
  margin-bottom: 0 !important; /* 下の余白を削除 */
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  border-bottom: none !important; /* 罫線を削除 */
  border-top: none !important; /* Mailform Pro標準のborder-topを削除 */
  text-align: left !important; /* テキストを左揃えに */
  line-height: 1.5 !important; /* 行間を調整 */
  display: flex !important; /* フレックスボックスで配置 */
  align-items: center !important; /* 縦方向の中央揃え */
}

.mfp.section-title:first-of-type {
  margin-top: 2rem; /* 最初のセクションは少し余白 */
}

.section-number {
  display: inline-block;
  background-color: #fbbf24;
  color: #000000;
  width: 1.5rem !important; /* サイズを縮小 */
  height: 1.5rem !important;
  line-height: 1.5rem !important;
  text-align: center;
  border-radius: 50%;
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 0.875rem !important; /* フォントサイズを縮小 */
  flex-shrink: 0 !important; /* 縮小を防ぐ */
  vertical-align: middle !important; /* 縦方向の中央揃え */
}

.mfp.section-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-top: 0 !important; /* 上の余白を削除 */
  margin-bottom: 1rem;
  padding-top: 0 !important; /* 上のパディングを削除 */
  padding-left: 0;
  border-top: none !important; /* 上の罫線を確実に削除 */
}

/* 必須マークのスタイル - より具体的なセレクタで確実に適用 */
body #mailformpro .mfp .must,
#mailformpro .mfp .must,
.mfp .must,
.must {
  background-color: #dc2626 !important; /* べた塗りの赤 */
  background-image: none !important; /* 背景画像を削除 */
  color: #ffffff !important;
  padding: 0.15rem 0.4rem !important; /* サイズを小さく */
  border-radius: 0.25rem !important;
  font-size: 0.7rem !important; /* フォントサイズを小さく */
  font-weight: bold !important;
  margin-right: 0.5rem !important;
  box-shadow: none !important; /* 立体的な効果を削除 */
  border: none !important; /* ボーダーを削除 */
}

/* 入力フィールドのスタイル - より具体的なセレクタで確実に適用 */
body #mailformpro input[type="text"],
body #mailformpro input[type="email"],
body #mailformpro input[type="tel"],
body #mailformpro input[type="date"],
body #mailformpro input[type="time"],
body #mailformpro input[type="number"],
body #mailformpro textarea,
body #mailformpro select,
#mailformpro input[type="text"],
#mailformpro input[type="email"],
#mailformpro input[type="tel"],
#mailformpro input[type="date"],
#mailformpro input[type="time"],
#mailformpro input[type="number"],
#mailformpro textarea,
#mailformpro select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important; /* 背景画像・グラデーションを削除 */
  background: rgba(255, 255, 255, 0.1) !important; /* background shorthandで確実に上書き */
  border: 1px solid rgba(251, 191, 36, 0.3) !important; /* すべての辺の罫線を確実に表示 */
  color: #ffffff !important;
  padding: 0.5rem !important;
  border-radius: 0.25rem !important;
  box-shadow: none !important; /* 内側の影を削除 */
  -webkit-box-shadow: none !important; /* WebKit用 */
  -moz-box-shadow: none !important; /* Firefox用 */
}

/* すべての状態で内側の影を削除 */
#mailformpro input[type="text"]:focus,
#mailformpro input[type="email"]:focus,
#mailformpro input[type="tel"]:focus,
#mailformpro input[type="date"]:focus,
#mailformpro input[type="time"]:focus,
#mailformpro input[type="number"]:focus,
#mailformpro textarea:focus,
#mailformpro select:focus,
#mailformpro input[type="text"]:hover,
#mailformpro input[type="email"]:hover,
#mailformpro input[type="tel"]:hover,
#mailformpro input[type="date"]:hover,
#mailformpro input[type="time"]:hover,
#mailformpro input[type="number"]:hover,
#mailformpro textarea:hover,
#mailformpro select:hover,
#mailformpro input[type="text"]:active,
#mailformpro input[type="email"]:active,
#mailformpro input[type="tel"]:active,
#mailformpro input[type="date"]:active,
#mailformpro input[type="time"]:active,
#mailformpro input[type="number"]:active,
#mailformpro textarea:active,
#mailformpro select:active {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1) !important; /* フォーカス時のみ外側の影 */
  -webkit-box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1) !important;
  -moz-box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

#mailformpro input::placeholder,
#mailformpro textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* 入力欄のアイコン（時計、カレンダーなど）のスタイル */
#mailformpro input[type="time"]::-webkit-calendar-picker-indicator,
#mailformpro input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.5); /* アイコンを白/黄色に変更 */
  cursor: pointer;
  opacity: 0.8;
}

#mailformpro input[type="time"]::-webkit-calendar-picker-indicator:hover,
#mailformpro input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(1) brightness(2) sepia(1) saturate(5) hue-rotate(0deg); /* ホバー時は黄色に */
}

/* Firefox用 */
#mailformpro input[type="time"]::-moz-calendar-picker-indicator,
#mailformpro input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1) brightness(1.5);
  cursor: pointer;
  opacity: 0.8;
}

#mailformpro input[type="time"]::-moz-calendar-picker-indicator:hover,
#mailformpro input[type="date"]::-moz-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(1) brightness(2) sepia(1) saturate(5) hue-rotate(0deg);
}

/* セレクトボックスのスタイル */
#mailformpro select {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

#mailformpro select option {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* ラジオボタン・チェックボックスのスタイル */
#mailformpro input[type="radio"],
#mailformpro input[type="checkbox"] {
  accent-color: #fbbf24;
  margin-right: 0.5rem;
}

#mailformpro label {
  color: #ffffff;
  display: inline-block;
  margin-bottom: 0.5rem;
  cursor: pointer;
  border: none !important; /* ラジオボタンの選択肢の囲みを削除 */
  border-radius: 0 !important;
  box-shadow: none !important; /* ラジオボタンの選択肢の影を削除 */
  background-color: transparent !important; /* ラジオボタンの選択肢の背景を透明に */
  padding: 0 !important; /* ラジオボタンの選択肢のパディングを削除 */
}

/* ラジオボタン・チェックボックスのラベルの囲みを削除 */
#mailformpro label.mfp_checked,
#mailformpro label.mfp_not_checked,
form#mailformpro label.mfp_checked,
form#mailformpro label.mfp_not_checked {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* チェックリストのスタイル */
.mfp_checklist {
  list-style: none;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.mfp_checklist li {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.25rem;
}

/* 注釈テキストのスタイル */
.mfp_note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* 送信ボタンのスタイル */
.mfp_buttons button {
  background-color: #fbbf24;
  color: #000000;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mfp_buttons button:hover {
  background-color: #f59e0b;
}

.mfp_buttons button:active {
  background-color: #d97706;
}

/* dt/ddのスタイル調整 */
.mfp dt {
  color: #ffffff;
  margin: 0;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  padding: 10px 0;
}

/* セクション見出しは線を維持（下の説明には線を出さない） */
.mfp dt.section-title {
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  padding-top: 10px;
}

.mfp dd {
  color: #ffffff;
  margin: 0;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  padding: 10px 5px 20px 170px;
}

.mfp dd.section-description {
  border-top: none;
  padding-top: 0;
}

/* セクションタイトルの直後のdd（説明文）のスタイル */
.mfp.section-title + .mfp.section-description {
  border-top: none !important;
  margin-top: 0 !important; /* 上の余白を完全に削除 */
  padding-top: 0 !important; /* 上のパディングを完全に削除 */
  margin-bottom: 1.5rem; /* セクション説明文の下に余白 */
}

/* section-descriptionのdd要素のスタイル */
.mfp.section-description {
  border-top: none !important;
  margin-top: 0 !important; /* 上の余白を完全に削除 */
  padding-top: 0 !important; /* 上のパディングを完全に削除 */
  margin-bottom: 1.5rem; /* セクション説明文の下に余白 */
}

/* エラーメッセージのスタイル（Mailform Pro標準） */
.mfp_error {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

/* ドリルダウン（条件分岐）で非表示になった要素のスタイル */
#mailformpro [style*="display: none"],
#reservation_section[style*="display: none"] {
  display: none !important;
}

/* 初期状態でreservation_sectionを表示（ご予約がデフォルト選択のため） */
#reservation_section {
  display: block;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .mfp.section-title {
    font-size: 1.25rem;
  }
  
  .section-number {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 0.875rem;
  }
  
  #mailformpro input[type="text"],
  #mailformpro input[type="email"],
  #mailformpro input[type="tel"],
  #mailformpro input[type="date"],
  #mailformpro input[type="time"],
  #mailformpro input[type="number"],
  #mailformpro textarea,
  #mailformpro select {
    width: 100%;
    max-width: 100%;
  }
}