/* ===============================
   鳩環屋 お問い合わせフォーム（Contact Form 7）の並べ方
   欄・ボタン・「必須」の印の形は購入の流れと共通（forms.css）。ここは並べ方と、Contact Form 7 のお知らせの形だけ
   フォームの中身（.prs-cf の HTML）は Contact Form 7 の「フォーム」の画面に貼る（dev/content/contact-form.txt）
   しくみ：includes/contact-form.php
   =============================== */

/* ページ全体（題名もフォームも）を、購入の流れと同じ幅で真ん中に */
body.prs-form-page #content article.type-page:has(.wpcf7) {
	max-width: 820px;
	margin: 0 auto;
}

body.prs-form-page #content article.type-page:has(.wpcf7) .entry-title {
	margin: 0 0 var(--prs-s-4);
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-h1);
	font-weight: 700;
	line-height: 1.4;
}

body.prs-form-page #content .prs-cf {
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

/* Contact Form 7 は行のつなぎ目に <p> や <br> を足すので、余白を出さない */
body.prs-form-page #content .prs-cf p {
	margin: 0;
}

body.prs-form-page #content .prs-cf br {
	display: none;
}

/* 上の案内 */
body.prs-form-page #content .prs-cf .prs-cf__lead {
	margin: 0 0 var(--prs-s-4);
}

/* 1つの欄：名前・欄・例（購入の流れのお客様情報と同じ形） */
.prs-cf__row {
	padding: var(--prs-s-3) 0 var(--prs-s-4);
	border-bottom: 1px solid var(--prs-color-border);
}

.prs-cf__label {
	display: block;
	margin: 0 0 var(--prs-s-1);
	font-weight: 700;
	line-height: 1.5;
}

body.prs-form-page #content .prs-cf .wpcf7-form-control-wrap {
	display: block;
}

/* 個人情報のひとこと */
body.prs-form-page #content .prs-cf .prs-cf__note {
	margin: var(--prs-s-4) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

/* 「このフォームは Cloudflare Turnstile で守られています。」 */
body.prs-form-page #content .prs-cf .prs-cf__guard {
	margin-top: var(--prs-s-1);
}

body.prs-form-page #content .prs-cf .prs-cf__guard::before {
	content: "🔒 ";
}

/* 迷惑メール対策（Cloudflare Turnstile）。ふだんは何も出ない（appearance:interaction-only）。
   Cloudflare が「人が操作しているか確かめたい」ときだけ、［送信する］の上にチェックの箱が出る */
body.prs-form-page #content .prs-cf .wpcf7-turnstile {
	max-width: 480px;
	margin: var(--prs-s-5) auto 0;
}

body.prs-form-page #content .prs-cf .wpcf7-turnstile:empty {
	display: none;
}

/* ［送信する］：購入の流れのボタンと同じ並べ方（真ん中・最大480px） */
.prs-cf__send {
	position: relative;
	max-width: 480px;
	margin: var(--prs-s-6) auto 0;
}

/* 送っているあいだのくるくる（Contact Form 7）は、ボタンの下の真ん中に */
body.prs-form-page #content .prs-cf .wpcf7-spinner {
	display: block;
	margin: var(--prs-s-2) auto 0;
}

/* 欄の下のまちがいのお知らせ */
body.prs-form-page #content .prs-cf .wpcf7-not-valid-tip {
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-error);
	font-size: var(--prs-f-base);
	font-weight: 700;
}

/* 欄の形（forms.css）の input[type=…] より強くするため、input・textarea と書く */
body.prs-form-page #content .prs-cf input.wpcf7-not-valid,
body.prs-form-page #content .prs-cf textarea.wpcf7-not-valid {
	border-color: var(--prs-color-error);
	background-color: var(--prs-color-error-bg);
}

/* フォームの下のお知らせ（「送信しました」・「入力にまちがいがあります」など） */
body.prs-form-page #content .wpcf7 form .wpcf7-response-output {
	max-width: 820px;
	margin: var(--prs-s-5) auto 0;
	padding: var(--prs-s-3) var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.6;
}

body.prs-form-page #content .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--prs-color-ok);
	background: var(--prs-color-ok-bg);
	color: var(--prs-color-ok);
}

body.prs-form-page #content .wpcf7 form.invalid .wpcf7-response-output,
body.prs-form-page #content .wpcf7 form.unaccepted .wpcf7-response-output,
body.prs-form-page #content .wpcf7 form.failed .wpcf7-response-output,
body.prs-form-page #content .wpcf7 form.aborted .wpcf7-response-output,
body.prs-form-page #content .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
}

/* 送れたあと：フォームの代わりに出す大きな箱（contact.js） */
body.prs-form-page #content .wpcf7 form[hidden] {
	display: none;
}

.prs-cf-sent {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--prs-s-5);
	border: 2px solid var(--prs-color-ok);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-ok-bg);
	scroll-margin-top: 90px; /* 上に残るヘッダーに隠れないように */
}

body.prs-form-page #content .prs-cf-sent .prs-cf-sent__title {
	margin: 0 0 var(--prs-s-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-ok);
	font-size: var(--prs-f-h2);
	font-weight: 700;
	line-height: 1.5;
}

.prs-cf-sent__title:focus {
	outline: none;
}

body.prs-form-page #content .prs-cf-sent .prs-cf-sent__text {
	margin: 0 0 var(--prs-s-3);
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

body.prs-form-page #content .prs-cf-sent .prs-cf-sent__back {
	max-width: 480px;
	margin: var(--prs-s-5) auto 0;
	border-color: var(--prs-color-main);
	background: var(--prs-color-main);
}

body.prs-form-page #content .prs-cf-sent .prs-cf-sent__back:hover {
	border-color: var(--prs-color-main-dark);
	background: var(--prs-color-main-dark);
}