/**
 * Snow Monkey Forms のフォーム内部の見た目
 *
 * 帯・白カード・リード文・注意文といった外側はすべてブロックで組んでいる。
 * ここで補うのはフォームの内側だけ。フォームのHTMLはプラグインが持っていて
 * theme.json やブロック属性では届かないため、この1枚だけ持つ。
 *
 * プラグイン既定で足りているもの（枠線・角丸・フォーカス色・セレクトの矢印・
 * チェックボックスの見た目・項目名カラムの2カラム化・ボタンの中央寄せ）は
 * 書かない。テーマの色・幅・文字にそろえる分だけを上書きする。
 *
 * 読み込みは functions.php で Snow Monkey Form ブロックを含むページのみ。
 * 色は theme.json のプリセット変数を参照する。
 */

/* --------------------------------------------------
 * 入力欄
 * フォーム部品はフォントを継承しないので、そこだけ明示する。
 * -------------------------------------------------- */
.smf-form :is(
	.smf-text-control__control,
	.smf-select-control__control,
	.smf-textarea-control__control
) {
	background-color: var(--wp--preset--color--gray-light);
	font-family: inherit;
	font-size: 16px;
	width: 100%;
}

/* セレクトは矢印を重ねるためのラッパーが inline-block なので、そちらも伸ばす */
.smf-form .smf-select-control {
	width: 100%;
}

/* --------------------------------------------------
 * 項目名
 * 必須バッジは required バリデーションが付いた項目に自動で出す。
 * （マークアップ側に印を持たせず、設定を唯一の情報源にする）
 * -------------------------------------------------- */
.smf-item__label__text {
	font-weight: 500;
}

.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
	color: #fff;
	content: "必須";
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	margin-left: 6px;
	text-align: center;
	vertical-align: 2px;
	width: 34px;
}

/* --------------------------------------------------
 * 個人情報保護方針への同意（項目名カラムなしの行）
 * -------------------------------------------------- */
.smf-item--divider .smf-item__controls {
	text-align: center;
}

/* --------------------------------------------------
 * 送信ボタン
 * theme.json の button エレメントと同じ見た目にそろえる。
 * -------------------------------------------------- */
.smf-action .smf-button-control__control {
	background: var(--wp--preset--color--primary);
	border: none;
	border-radius: 100px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	max-width: 100%;
	padding: 14px 32px;
	width: 248px;
}

.smf-action .smf-button-control__control:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* --------------------------------------------------
 * LP（セクションスタイル is-style-section-lp-*）の中のフォーム（無料診断の申し込みフォーム・2026-10-09）
 * 送信ボタンと必須バッジを、その LP のアクセント色にそろえる（既定のオレンジ＝primary から差し替える）。
 * お問い合わせページ（LP セクションの外）のフォームには影響しない。
 * -------------------------------------------------- */
[class*="is-style-section-lp-"] .smf-action .smf-button-control__control {
	background: var(--wp--preset--color--lp-accent);
}

[class*="is-style-section-lp-"] .smf-action .smf-button-control__control:hover {
	background: var(--wp--preset--color--lp-accent-dark);
}

[class*="is-style-section-lp-"] .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
	background: var(--wp--preset--color--lp-accent);
}