/**
 * お問い合わせページ（/contact/）+ お問い合わせ完了ページ（/thanks/）
 *
 * HTML:
 *  - themes/minolink/templates/page-contact.html
 *  - themes/minolink/templates/page-thanks.html
 * JS:   plugins/lb-user-customer/assets/lbuc-contact.js（送信・prefill・validation）
 *
 * 見出しは pattern-headings.css の `.minolink-pattern-heading--h1-normal`、
 * 必須バッジは components/required-badge.css の `[data-required]::after` を流用。
 * このファイルではコンテナとフォーム要素、サンクスページの見た目だけを担当する。
 */

/* stylelint-disable block-no-empty -- スタイルは後でユーザーが追記するスケルトン */

.minolink-contact-page {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--layout--thin);
	margin-inline: auto;
}

.minolink-contact-page__description {
	margin-block-end: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--normal);

}

.minolink-contact-page__loading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.minolink-contact-form {
	/* TODO: フォーム全体の縦並び・最大幅 */
 display: flex;
 flex-direction: column;
 gap: var(--wp--preset--spacing--50);
}

.minolink-contact-form__field {
	display: grid;
	grid-template-columns: 1fr;
}

.minolink-contact-form__label {
	padding-block-end: var(--wp--preset--spacing--20);
	/* TODO: ラベル文字サイズ・color。必須バッジは [data-required]::after を流用 */
}

.minolink-contact-form__input,
.minolink-contact-form__textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--normal);
	font-size: var(--wp--preset--font-size--normal);
	line-height: var(--wp--custom--line-height--normal);
}

.minolink-contact-form__input {
	height: 46px;
	padding-block: 0;
}

.minolink-contact-form__textarea {
	min-height: 150px;
	height: auto;
	resize: vertical;
}

.minolink-contact-form__field--property[hidden] {
	display: none !important;
}

.minolink-contact-form__property-value {
	margin: 0;
	font-size: var(--wp--preset--font-size--normal);
}

.minolink-contact-form__input:focus,
.minolink-contact-form__textarea:focus {
	outline: none;
 border: 2px solid var(--wp--preset--color--primary-light);
}

.minolink-contact-form__select {
	/* TODO: セレクトの矢印・枠線・高さ */
}

.minolink-contact-form__checkbox-group {
	display: flex;
	flex-direction: column;
 gap: var(--wp--preset--spacing--40);
}

.minolink-contact-form__checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	cursor: pointer;
}

.minolink-contact-form__field--privacy {
	display: block;
	text-align: center;
}

.minolink-contact-form__privacy {
	/* TODO: チェックボックスとテキスト間の gap、リンク色 */
}

.minolink-contact-form__error {
	margin: 0;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}

.minolink-contact-form__actions {
	/* TODO: 送信ボタン周りの余白・配置 */
 width: 240px;
 margin-inline: auto;
}

.minolink-contact-form__actions .minolink-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.minolink-contact-form__submit {
	/* TODO: 送信ボタン特有の調整（基本は .minolink-btn / .minolink-btn-contrast を継承） */
}

@media (min-width: 768px) {
	.minolink-contact-form {

	}

	.minolink-contact-form__field {
		grid-template-columns: 200px 1fr;
		align-items: center;
		column-gap: var(--wp--preset--spacing--50);
		row-gap: 0;
	}

	.minolink-contact-form__label {
		padding-block-end: 0;
	}

	.minolink-contact-form__error {
		grid-column: 2;
	}

	.minolink-contact-form__actions {
		grid-column: 1 / -1;
	}

	/* お問い合わせ内容: ラベル左・チェックボックス縦並び（PC でも一列） */
	.minolink-contact-form__field:has(.minolink-contact-form__checkbox-group) {
		align-items: start;
	}

	.minolink-contact-form__field:has(.minolink-contact-form__checkbox-group) .minolink-contact-form__label {
		padding-block-start: 0.125rem;
	}
}

/* ---------------------------------------------------------------------------
 * /thanks/（送信完了 / エラーページ）
 *
 * テンプレートに success / error 2 つの .minolink-contact-thanks__panel が並ぶ。
 * assets/js/pages/contact-thanks-page.js が URL の `?status=error` を見て
 * 該当 panel の hidden を外す（外側のレイアウトは共通）。
 * ------------------------------------------------------------------------- */

.minolink-contact-thanks__panel {
	/* TODO: パネル内要素の縦並び・上下余白 */
}

.minolink-contact-thanks__description {
	text-align: center;
	/* TODO: 文字サイズ・行高・上下余白 */
 padding-block: var(--wp--preset--spacing--50);
}

.minolink-contact-thanks__actions {
	/* TODO: ボタン周りの余白・配置 */
 width: 240px;
 margin-inline: auto;
 padding-block-start: var(--wp--preset--spacing--50);
}

.minolink-contact-thanks__home {
	/* TODO: ボタンの幅など個別調整（基本は .minolink-btn / .minolink-btn-contrast を継承） */

}