/**
 * 予約フォーム(お問い合わせフォーム / WPForms ID:6563)専用スタイル
 * -------------------------------------------------------------------
 * 背景が濃紺(#001120)・本文が明色のページのため、WPForms 既定の
 * 黒系ラベル/確認テーブルが背景と同化して読めない問題を解消する。
 * 入力ページ・確認ページ(Entry Preview)の 2 ステップ共通で適用。
 *
 * 実装方針(WPForms 公式ドキュメント準拠):
 *  - フォーム単位にスコープするため全セレクタを #wpforms-6563 で限定
 *    （他フォーム・サイト全体には影響させない）
 *  - モダンマークアップは CSS カスタムプロパティで制御されるため、
 *    まず変数を上書きし、併せて実セレクタでも明示指定(二重の保険)
 *  参考: WPForms「Styling WPForms With Custom CSS (Beginner's Guide)」
 *        「Customizing the Style of Individual Form Fields」
 */

/* === モダンフォームの CSS 変数を上書き(ラベル/入力/枠線/ボタンへ一括反映) === */
#wpforms-6563.wpforms-container-full {
	--wpforms-label-color: #fff5e6;          /* メインラベル */
	--wpforms-label-sublabel-color: #e6d8c4; /* サブラベル */
	--wpforms-label-error-color: #ff9b9b;    /* エラー文言 */
	--wpforms-field-text-color: #1a1a1a;     /* 入力文字(白背景上) */
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-border-color: #cfa15a;   /* 入力欄の枠線(金茶) */
	--wpforms-button-background-color: #e65e00;
	--wpforms-button-text-color: #ffffff;
}

/* === ラベル・必須マーク・サブラベル・説明文 === */
#wpforms-6563 .wpforms-field-label,
#wpforms-6563 .wpforms-field-label-inline {
	color: #fff5e6;
}
#wpforms-6563 .wpforms-required-label {
	color: #ff9b9b; /* 必須(*)を明赤に */
}
#wpforms-6563 .wpforms-field-sublabel,
#wpforms-6563 .wpforms-field-description,
#wpforms-6563 .wpforms-field-description-after {
	color: #e6d8c4;
}

/* === 入力欄:白背景・濃色文字で可読性を確保 === */
#wpforms-6563 .wpforms-field input[type="text"],
#wpforms-6563 .wpforms-field input[type="email"],
#wpforms-6563 .wpforms-field input[type="tel"],
#wpforms-6563 .wpforms-field input[type="number"],
#wpforms-6563 .wpforms-field textarea,
#wpforms-6563 .wpforms-field select {
	background-color: #ffffff;
	color: #1a1a1a;
}
#wpforms-6563 .wpforms-field input::placeholder,
#wpforms-6563 .wpforms-field textarea::placeholder {
	color: #9aa0a6;
	opacity: 1;
}

/* === ステップ表示(進行インジケーター) === */
#wpforms-6563 .wpforms-page-indicator,
#wpforms-6563 .wpforms-page-indicator-page-title,
#wpforms-6563 .wpforms-page-indicator-page-title-sep,
#wpforms-6563 .wpforms-page-indicator-steps {
	color: #fff5e6;
}
#wpforms-6563 .wpforms-page-indicator-page-progress-wrap {
	background-color: rgba(255, 255, 255, 0.25);
}
#wpforms-6563 .wpforms-page-indicator-page-progress {
	/* バーの色はフォーム設定(indicator_color)がインライン指定されるため !important で上書き */
	background-color: #e65e00 !important;
}

/* === ページ送り/送信ボタン(サイトのアクセントカラーに統一) === */
#wpforms-6563 .wpforms-page-button,
#wpforms-6563 button.wpforms-submit {
	background-color: #e65e00 !important;
	border-color: #e65e00 !important;
	color: #ffffff !important;
}
#wpforms-6563 .wpforms-page-button:hover,
#wpforms-6563 button.wpforms-submit:hover {
	background-color: #c95100 !important;
	border-color: #c95100 !important;
}

/* === 確認ページ(Entry Preview):テーブル形式を白背景で見やすく === */
/* 注意文は WPForms 既定で淡いアンバーの警告ボックス。文字は濃色にして可読性確保 */
#wpforms-6563 .wpforms-entry-preview-notice {
	color: #6b4e00;
	margin-bottom: 16px;
}
#wpforms-6563 .wpforms-entry-preview-notice strong {
	color: #4a3600;
}
#wpforms-6563 .wpforms-entry-preview-table {
	background-color: #ffffff;
	border: 1px solid #cfa15a;
	border-radius: 4px;
	overflow: hidden;
}
#wpforms-6563 .wpforms-entry-preview-table > div:not(:empty) {
	border-color: #e3d6c2 !important;
}
#wpforms-6563 .wpforms-entry-preview-table > div:last-of-type {
	border-bottom-color: #e3d6c2 !important;
}
#wpforms-6563 .wpforms-entry-preview-label {
	color: #333333;
	font-weight: 700;
	background-color: #f7f1e7; /* ラベル列に淡い背景 */
}
#wpforms-6563 .wpforms-entry-preview-value {
	color: #1a1a1a;
}