/* ==========================================================================
   塗装・防水 — ツールのフォームの欄（カラーシミュレーションの相談・写真で無料診断）
   Figma 60:2018（p-color-sim__form）・64:2450（p-photo-check__form）／ SP 243:20850・244:27401
   - マークアップは inc/forms/render.php の truss_form_field()（c-form-field・c-checkbox）。選択肢は c-chip-paint（共通の部品）
   - このファイルは2つのフォームの中だけに効かせる（:is(.p-color-sim__form, .p-photo-check__form)）
   - SP はフォームを幅いっぱいの面にする（角丸 0。Figma SP の注記）
   ========================================================================== */

:is(.p-color-sim__form, .p-photo-check__form) {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-card);
	width: 100%;
	max-width: 880px;
	padding: var(--space-3xl) var(--space-paint-wide);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
	font-family: var(--font-paint);
	color: var(--color-text-primary);
}

.p-color-sim__form-title {
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
}

/* ---------- 入力エラーのまとめ（フォームの先頭。/paint/contact/ の形にそろえる：project-contact.css） ---------- */
:is(.p-color-sim__form, .p-photo-check__form) .c-form-errors {
	padding: 20px var(--space-lg);
	border: 2px solid var(--color-action-cta);
	border-radius: var(--radius-xl); /* お問い合わせの箱と同じ 24（SP 20） */
	background: var(--color-bg-canvas);
	color: var(--color-text-cta);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-errors__title {
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-errors__list {
	margin: var(--space-xs) 0 0;
	padding-left: 1.2em;
	font: var(--text-paint-body-s);
	list-style: disc; /* 赤い点の箇条書き */
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-errors__item a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- 1項目 ---------- */
:is(.p-color-sim__form, .p-photo-check__form) .c-form-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__label-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* fieldset の legend を、ほかの欄の見出しと同じ並びにする */
:is(.p-color-sim__form, .p-photo-check__form) legend.c-form-field__label-row {
	float: left;
	width: 100%;
}

:is(.p-color-sim__form, .p-photo-check__form) legend.c-form-field__label-row + * {
	clear: both;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__label {
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-full);
	font: var(--text-paint-label-m);
	white-space: nowrap;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__badge--required {
	background: var(--color-action-cta);
	color: var(--color-text-on-brand);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__badge--optional {
	background: var(--neutral-200);
	color: var(--color-text-secondary);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__field {
	width: 100%;
	min-height: 64px;
	padding: var(--space-md) 20px;
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	background: var(--color-bg-canvas);
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
	transition: border-color 0.15s ease;
}

:is(.p-color-sim__form, .p-photo-check__form) textarea.c-form-field__field {
	height: 160px;
	resize: vertical;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__field::placeholder {
	color: var(--color-text-tertiary);
	opacity: 1;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__field:hover {
	border-color: var(--color-border-strong);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__field:focus-visible {
	border-color: var(--color-border-brand);
	outline: 3px solid var(--blue-200);
	outline-offset: 0;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__note,
:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__meta {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

/* エラー（欄の枠を赤に・下に理由） */
:is(.p-color-sim__form, .p-photo-check__form) .is-error .c-form-field__field {
	border-color: var(--color-action-cta);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__error {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
	margin: 0;
	font: var(--text-paint-body-s);
	font-weight: 700;
	color: var(--color-text-cta);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__error[hidden] {
	display: none;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-field__error-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	border-radius: 50%;
	background: var(--color-action-cta);
	font-size: var(--fs-paint-mark);
	line-height: 1;
	color: var(--color-text-on-brand);
}

/* ---------- 同意（Figma c-form-agree。押せる範囲は高さ 44 以上） ---------- */
/* 同意の文と「必須」の札は同じ行に（幅が足りないときは文の方を折り返す。/paint/contact/ と同じ）。エラーはその下 */
:is(.p-color-sim__form, .p-photo-check__form) .c-form-agree {
	display: grid;
	grid-template-columns: minmax(0, max-content) max-content;
	gap: 0 var(--space-sm);
	align-items: center;
	justify-content: start;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox {
	position: relative;
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__box {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--color-border-strong);
	border-radius: var(--radius-paint-check);
	background: var(--color-bg-canvas);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__input:checked + .c-checkbox__box {
	border-color: var(--color-border-brand);
	background: var(--color-bg-brand);
}

/* チェックの印（CSS で描く） */
:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__input:checked + .c-checkbox__box::after {
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--color-text-on-brand);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	content: "";
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__input:focus-visible + .c-checkbox__box {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

:is(.p-color-sim__form, .p-photo-check__form) .is-error .c-checkbox__box {
	border-color: var(--color-action-cta);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__label {
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
}

:is(.p-color-sim__form, .p-photo-check__form) .c-checkbox__label a {
	color: var(--color-text-brand);
	text-decoration: underline;
	white-space: nowrap; /* 「プライバシーポリシー」は途中で折り返さない */
}

:is(.p-color-sim__form, .p-photo-check__form) .c-form-agree .c-form-field__error,
:is(.p-color-sim__form, .p-photo-check__form) .c-form-agree .c-form-field__note {
	grid-column: 1 / -1;
	contain: inline-size; /* エラーの文の幅で列が広がり、「必須」の札が横に長い赤い帯になるのを防ぐ（2026-10-02 監視役） */
}

/* 送信のボタンは幅いっぱい */
:is(.p-color-sim__form, .p-photo-check__form) > button[type="submit"],
:is(.p-color-sim__form, .p-photo-check__form) > .c-button-paint {
	width: 100%;
}

/* ==========================================================================
   SP：幅いっぱいの面（角丸 0）
   ========================================================================== */
@media (max-width: 767px) {
	:is(.p-color-sim__form, .p-photo-check__form) {
		align-self: stretch;
		gap: var(--space-xl);
		width: auto;
		max-width: none;
		margin-inline: -20px;
		padding: var(--space-3xl) var(--space-lg) var(--space-paint-section);
		border-radius: 0;
	}

	:is(.p-color-sim__form, .p-photo-check__form) .c-form-errors {
		border-radius: var(--radius-paint-box); /* お問い合わせの SP と同じ */
	}

	/* カラーシミュレーションの「ご希望」は縦に並べて幅いっぱい（写真で無料診断の症状は折り返しのまま） */
	.p-color-sim__form .c-form-field__choices {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.p-color-sim__form .c-form-field__choices .c-chip-paint {
		width: 100%;
	}
}