/*
 * お問い合わせフォーム（Snow Monkey Forms）の見た目。
 * お問い合わせページだけで読み込む（includes/contact-help.php）。
 * 色とボタンは、サイトのほかのページ（「ご相談・お問い合わせ」ボタンなど）に合わせる。
 */

.snow-monkey-form {
	--iisa-cf-line: var(--wp--preset--color--unitone-light-gray, #e5e7eb);
	--iisa-cf-border: #c9ced6;
	--iisa-cf-primary: var(--wp--preset--color--iisa-primary, #1b3d6e);
	--iisa-cf-accent: var(--wp--preset--color--iisa-accent, #c8362c);
	--iisa-cf-paper: var(--wp--preset--color--iisa-paper, #f8f6f0);
}

/* 項目ごとに罫線で区切り、項目名の列は幅を固定する */
.snow-monkey-form .smf-form--simple-table .smf-item {
	display: flex;
	gap: 24px;
	margin: 0;
	padding-block: 20px;
	border-top: 1px solid var(--iisa-cf-line);
}

.snow-monkey-form .smf-form--simple-table .smf-item:last-of-type {
	border-bottom: 1px solid var(--iisa-cf-line);
}

.snow-monkey-form .smf-form--simple-table .smf-item__col--label {
	flex: 0 0 220px;
	width: 220px;
	max-width: none;
	padding-top: 10px;
}

.snow-monkey-form .smf-form--simple-table .smf-item__col--controls {
	flex: 1;
	min-width: 0;
}

.snow-monkey-form .smf-item__label__text {
	color: var(--iisa-cf-primary);
	font-weight: 700;
	line-height: 1.6;
}

/* 項目名の中のリンク（個人情報保護方針）はリンクと分かるように下線 */
.snow-monkey-form .smf-item__label__text a {
	color: inherit;
	text-decoration: underline;
}

/* 「(必須)」を小さな赤いラベルにする */
.snow-monkey-form .tb-smf-mandatory-mark {
	font-size: 0;
}

.snow-monkey-form .tb-smf-mandatory-mark::after {
	content: "必須";
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--iisa-cf-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 2px;
}

/* 入力欄：全幅・細い枠・角丸。入力中は紺の枠 */
.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-textarea-control__control {
	width: 100%;
	max-width: none;
	padding: 10px 12px;
	border: 1px solid var(--iisa-cf-border);
	border-radius: 4px;
	background: #fff;
	font-size: 1rem;
	line-height: 1.6;
	box-shadow: none;
}

.snow-monkey-form .smf-textarea-control__control {
	min-height: 180px;
}

.snow-monkey-form .smf-text-control__control:focus,
.snow-monkey-form .smf-textarea-control__control:focus {
	outline: none;
	border-color: var(--iisa-cf-primary);
	box-shadow: 0 0 0 3px rgba(27, 61, 110, 0.15);
}

/* ラジオ・チェック：形は標準のまま、選んだときの色を紺にする */
.snow-monkey-form .smf-radio-button-control__control,
.snow-monkey-form .smf-checkbox-control__control {
	accent-color: var(--iisa-cf-primary);
}

.snow-monkey-form .smf-item:has(.smf-radio-buttons-control) .smf-item__col--label,
.snow-monkey-form .smf-item:has(.smf-checkboxes-control) .smf-item__col--label {
	padding-top: 2px;
}

.snow-monkey-form .smf-radio-buttons-control__control .smf-label + .smf-label {
	margin-top: 6px;
}

/* 同意の欄：項目名の列を固定幅にせず、1行で中央にまとめる（項目名が折れ曲がらないように） */
.snow-monkey-form .smf-form--simple-table .smf-item:has([data-name="agree"]) {
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.snow-monkey-form .smf-form--simple-table .smf-item:has([data-name="agree"]) .smf-item__col--label {
	flex: none;
	width: auto;
	padding-top: 0;
}

.snow-monkey-form .smf-form--simple-table .smf-item:has([data-name="agree"]) .smf-item__col--controls {
	flex: none;
}

/* 送信ボタン：サイトの紺のボタン（「ITコーディネータとは」など）と同じ色 */
.snow-monkey-form .smf-action {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.snow-monkey-form .smf-action .smf-button-control__control {
	min-width: 260px;
	padding: 14px 48px;
	border: none;
	border-radius: 4px;
	background: var(--iisa-cf-primary);
	background-image: none;
	color: var(--iisa-cf-paper);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.snow-monkey-form .smf-action .smf-button-control__control:hover,
.snow-monkey-form .smf-action .smf-button-control__control:focus-visible {
	opacity: 0.85;
}

.snow-monkey-form .smf-action .smf-button-control__control:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* いたずら送信対策（Cloudflare Turnstile）の表示を、送信ボタンの上の中央に置く
   （同意する → 確認 → 送信する の順に並べる。HTML の順は変えず、表示の順だけ入れ替える） */
.snow-monkey-form {
	display: flex;
	flex-direction: column;
}

.snow-monkey-form .snow-monkey-forms-turnstile {
	display: flex;
	order: 1;
	justify-content: center;
	margin-top: 24px;
}

.snow-monkey-form .smf-action {
	order: 2;
}

.snow-monkey-form .smf-system-error-content-ready {
	order: 3;
}

/* スマホ：項目名を入力欄の上に置く */
@media (max-width: 640px) {
	.snow-monkey-form .smf-form--simple-table .smf-item {
		flex-direction: column;
		gap: 8px;
		padding-block: 16px;
	}

	.snow-monkey-form .smf-form--simple-table .smf-item__col--label {
		flex: none;
		width: auto;
		padding-top: 0;
	}

	.snow-monkey-form .smf-form--simple-table .smf-item:has([data-name="agree"]) {
		align-items: center;
		text-align: center;
	}

	.snow-monkey-form .smf-action .smf-button-control {
		display: block;
		width: 100%;
	}

	.snow-monkey-form .smf-action .smf-button-control__control {
		width: 100%;
		min-width: 0;
	}
}