/**
 * Snow Monkey Forms Assist by Claude — フォームの見た目
 * 本番の MW WP Form（固定ページ内の <style>）の並びを元に、次のように調整している。
 *  ・広い画面：項目名 25％／入力欄 75％。説明文は 1 行目の下に、行全体の幅で表示
 *  ・狭い画面（640px 未満）：項目名 → 説明文 → 入力欄の縦並び
 */

/* 項目（広い画面） */
.smf-form .smf-item {
	display: grid;
	grid-template-columns: 25% 75%;
	align-items: start;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid #ccc;
}
/* 項目名の欄の箱は作らず、中の「項目名」と「説明文」を直接並べる */
.smf-form .smf-item__col--label {
	display: contents;
}
.smf-form .smf-item__label {
	grid-column: 1;
	grid-row: 1;
	padding: 0 1em 0 0;
	font-weight: 500;
	font-family: var(--boldFont);
}
.smf-form .smf-item__col--controls {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	max-width: none;
	padding: 0;
	margin-bottom: 4px;
}
.smf-form .smf-item__description {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	padding: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: inherit;
}

/* 項目（狭い画面）：項目名 → 説明文 → 入力欄 */
@media (max-width: 639px) {
	.smf-form .smf-item {
		grid-template-columns: 100%;
	}
	.smf-form .smf-item__label {
		grid-column: 1;
		grid-row: 1;
		padding-right: 0;
	}
	.smf-form .smf-item__description {
		grid-column: 1;
		grid-row: 2;
	}
	.smf-form .smf-item__col--controls {
		grid-column: 1;
		grid-row: 3;
	}
}

/* 1行テキスト欄・テキストエリア：欄の幅いっぱい（email / url も含む） */
.smf-form .smf-text-control__control,
.smf-form .smf-textarea-control__control {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 6px;
	margin-bottom: 16px;
}

/* プルダウン：欄の幅を超えない（選択肢の文字が長いとき、狭い画面ではみ出さないようにする） */
.smf-form .smf-select-control {
	max-width: 100%;
}
.smf-form .smf-select-control__control {
	box-sizing: border-box;
	max-width: 100%;
	text-overflow: ellipsis;
}

/* 必須・任意のバッジ（入力画面のみ） */
.smf-form .smf-item__label__text::before {
	content: "任意";
	display: inline-block;
	font-size: 80%;
	color: #fff;
	background-color: #666;
	padding: 0 0.2em;
	margin-right: 0.5em;
}
.smf-form .smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
	content: "必須";
	background-color: #f00;
}
.snow-monkey-form[data-screen="confirm"] .smf-item__label__text::before {
	display: none;
}

/* 確認画面では説明文を隠す */
.snow-monkey-form[data-screen="confirm"] .smf-item__description {
	display: none;
}

/* ボタン：中央揃え、文字は 20px */
.snow-monkey-form .smf-action {
	text-align: center;
}
.snow-monkey-form .smf-action .smf-button-control__control {
	font-size: 20px;
}