/*
 * 資料請求のフォーム（Snow Monkey Forms）の見た目。/request/ だけで読み込む（inc/request-form.php）。
 *
 * 行・入力欄・選択欄・ボタンはコーディングデータの CSS（style.css の .p-request-*）の値に合わせる。
 * 行（.p-request-row）と入力欄（.p-request-input・.p-request-select・.p-request-textarea）は、
 * フォームの項目に同じ class を付けて style.css の指定をそのまま使い、ここではプラグインの HTML の違いだけを埋める。
 */

/* ---------- 画面の状態（プラグインの CSS の代わり） ---------- */
.snow-monkey-form[data-screen="loading"] {
	visibility: hidden;
}

.smf-system-error-content-ready {
	display: none !important;
}

.smf-focus-point {
	position: relative;
	top: -120px;
	visibility: hidden;
}

.p-request-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* リード文：確認画面・完了画面では隠し、確認画面だけの案内を出す */
.p-request-form:has(.snow-monkey-form:is([data-screen="confirm"], [data-screen="complete"])) .p-request-form__lead {
	display: none;
}

.p-request-form__confirm-lead {
	display: none;
	margin: 0 0 1.5rem;
}

.snow-monkey-form[data-screen="confirm"] .p-request-form__confirm-lead {
	display: block;
}

/* 確認画面だけの注意（送信ボタンの上） */
.p-request-form__confirm-note {
	display: none;
	margin: 1.5rem 0 0;
}

.snow-monkey-form[data-screen="confirm"] .p-request-form__confirm-note {
	display: block;
}

/* ---------- 枠 ---------- */
.p-request-form .smf-form {
	display: flex;
	flex-direction: column;
}

.p-request-form .smf-form > .p-request-row:first-of-type {
	border-top: 1px solid var(--color-line);
}

/* 確認画面の案内の下に線が来るように、案内は線の外 */
.snow-monkey-form[data-screen="complete"] .smf-form {
	display: block;
}

/* ---------- 見出しの列（必須・任意の印＋項目名） ---------- */
.p-request-row .smf-item__col--label {
	min-width: 0;
}

.p-request-row .smf-item__label,
.p-request-row .smf-item__label label {
	display: block;
	margin: 0;
	cursor: default;
}

.p-request-row .smf-item__label label {
	cursor: pointer;
}

.p-request-row .smf-item__label__text {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-width: 0;
	font-size: var(--text-s-base);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: var(--color-text);
}

@media (min-width: 1024px) {
	.p-request-row .smf-item__label__text {
		font-size: var(--text-base);
	}
}

/* 長い項目名（現在通っている学校区分）は <wbr> の位置だけで折り返す */
.p-request-row__label-text {
	min-width: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* ---------- 入力の列 ---------- */
.p-request-row .smf-item__col--controls,
.p-request-row .smf-item__controls,
.p-request-row .smf-placeholder {
	min-width: 0;
}

.p-request-row .smf-text-control,
.p-request-row .smf-textarea-control {
	line-height: normal;
}

.p-request-row .smf-select-control__toggle {
	display: none;
}

/* 郵便番号の「〒」 */
.p-request-row--zip .smf-text-control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.p-request-row--zip .smf-text-control::before {
	content: "〒";
	flex: 0 0 auto;
	font-size: var(--text-s-base);
	letter-spacing: 0.05em;
	color: var(--color-text);
}

.p-request-row--zip .p-request-input {
	max-width: 12rem;
}

/* 学年の「年生」 */
.p-request-row--grade .smf-select-control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.p-request-row--grade .smf-select-control::after {
	content: "年生";
	flex: 0 0 auto;
	font-size: var(--text-s-base);
	letter-spacing: 0.05em;
	color: var(--color-text);
}

.p-request-row--grade .p-request-select {
	max-width: 12rem;
}

/* ---------- ラジオボタン・チェックボックス ---------- */
.p-request-form .smf-control-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.p-request-form .smf-radio-buttons-control__control,
.p-request-form .smf-checkboxes-control__control {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}

.p-request-form .smf-label {
	display: flex;
}

.p-request-form .smf-label label {
	display: inline-flex;
	cursor: pointer;
}

.p-request-form .smf-radio-button-control,
.p-request-form .smf-checkbox-control {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.p-request-form .smf-radio-button-control__control,
.p-request-form .smf-checkbox-control__control {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	border: 1px solid var(--color-theme-1);
	border-radius: 50%;
	background: #fff;
	appearance: none;
	cursor: pointer;
}

.p-request-form .smf-checkbox-control__control {
	border-radius: 3px;
}

.p-request-form .smf-radio-button-control__control:focus-visible,
.p-request-form .smf-checkbox-control__control:focus-visible {
	outline: 2px solid var(--color-theme-1);
	outline-offset: 2px;
}

.p-request-form .smf-radio-button-control__control:checked {
	box-shadow: inset 0 0 0 4px var(--color-theme-1);
}

.p-request-form .smf-checkbox-control__control:checked {
	background: var(--color-theme-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E") no-repeat center / 10px 8px;
}

.p-request-form .smf-radio-button-control__label,
.p-request-form .smf-checkbox-control__label {
	font-size: var(--text-s-base);
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: var(--color-text);
}

@media (min-width: 1024px) {
	.p-request-form .smf-radio-button-control__label,
	.p-request-form .smf-checkbox-control__label {
		font-size: var(--text-base);
	}
}

/* 同意欄（行の線の外。コーディングデータの .p-request-agree） */
.p-request-form .p-request-agree .smf-label {
	display: block;
}

.p-request-form .p-request-agree .smf-item__col--controls {
	min-width: 0;
}

/* 同意のチェックのすぐ上の個人情報の案内（コーディングデータの .p-request-agree__note と同じ値） */
.p-request-agree__note {
	margin: 1.5rem 0 0;
}

.p-request-agree__note + .p-request-agree {
	padding-top: 1rem;
}

.p-request-agree__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.p-request-agree__note a:hover,
.p-request-agree__note a:focus-visible {
	text-decoration: none;
}

/* 入力欄の下の説明（備考。コーディングデータの .p-request-row__desc と同じ値） */
.p-request-row .smf-control-description {
	margin-top: 0.5rem;
	font-size: var(--text-s-base);
	letter-spacing: 0.05em;
	line-height: 1.75;
	color: var(--color-text);
}

@media (min-width: 1024px) {
	.p-request-row .smf-control-description {
		font-size: var(--text-sm);
	}
}

/* ---------- 確認画面の入力内容 ---------- */
.snow-monkey-form[data-screen="confirm"] .p-request-row .smf-placeholder {
	font-size: var(--text-s-base);
	letter-spacing: 0.05em;
	line-height: 1.75;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.snow-monkey-form[data-screen="confirm"] .p-request-row--grade .smf-placeholder > div::after {
	content: "年生";
}

.snow-monkey-form[data-screen="confirm"] .p-request-agree .smf-placeholder {
	font-size: var(--text-s-base);
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: var(--color-text);
}

@media (min-width: 1024px) {
	.snow-monkey-form[data-screen="confirm"] .p-request-row .smf-placeholder,
	.snow-monkey-form[data-screen="confirm"] .p-request-agree .smf-placeholder {
		font-size: var(--text-base);
	}
}

/* ---------- 入力エラー ---------- */
/* エラーの欄にフォーカスが移ったとき、固定ヘッダーの下に隠れないように */
.p-request-form :is(input, select, textarea) {
	scroll-margin-top: 120px;
}

.p-request-form [data-invalid="1"] {
	border-color: var(--color-error);
}

.p-request-form .smf-error-messages {
	margin-top: 0.5rem;
	font-size: var(--text-s-base);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: var(--color-error);
}

/* ---------- ボタン（コーディングデータの .p-request-submit__btn） ---------- */
.p-request-form .smf-action {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem 0 0;
}

.p-request-form .smf-action:empty {
	display: none;
}

.p-request-form .smf-button-control__control {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 12rem;
	min-height: 3.25rem;
	padding: 0.75rem 2.5rem;
	border: 0;
	border-radius: 40px;
	background: var(--color-theme-1);
	color: #fff;
	font-size: var(--text-s-lg);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.p-request-form .smf-button-control__control[data-action="back"] {
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--color-theme-1);
	color: var(--color-text);
}

@media (min-width: 1024px) {
	.p-request-form .smf-button-control__control {
		min-width: 16rem;
		font-size: var(--text-lg);
	}
}

.p-request-form .smf-button-control__control:hover,
.p-request-form .smf-button-control__control:focus {
	transform: translateY(2px);
}

.p-request-form .smf-button-control__control:focus-visible {
	outline: 2px solid var(--color-theme-1);
	outline-offset: 3px;
}

.p-request-form .smf-button-control__control[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* 送信中の印 */
.p-request-form .smf-sending {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}

.p-request-form .smf-sending[aria-hidden="true"] {
	visibility: hidden;
}

.p-request-form .smf-sending::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: p-request-sending 1s linear infinite;
}

@keyframes p-request-sending {
	to {
		transform: rotate(1turn);
	}
}

/* ---------- 完了画面・エラー画面 ---------- */
.snow-monkey-form[data-screen="complete"] .smf-form,
.p-request-form .smf-system-error-content {
	padding: 2rem 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}

.snow-monkey-form[data-screen="complete"] .smf-form > * + * {
	margin-top: 1rem;
}

.snow-monkey-form[data-screen="complete"] .smf-form a {
	color: inherit;
	text-decoration: underline;
}

.p-request-form .smf-system-error-content {
	font-size: var(--text-s-base);
	line-height: 1.75;
	color: var(--color-error);
}

/* Cloudflare Turnstile の確認（キーを入れたときだけ出る）：送信ボタンの上の中央。完了画面では出さない */
.p-request-form .snow-monkey-form:has(> .snow-monkey-forms-turnstile) {
	display: flex;
	flex-direction: column;
}

.p-request-form .snow-monkey-form > .snow-monkey-forms-turnstile {
	order: 1;
	display: flex;
	justify-content: center;
	margin: 1.5rem 0 0;
}

.p-request-form .snow-monkey-form:has(> .snow-monkey-forms-turnstile) > :is(.smf-action, .smf-system-error-content-ready, .smf-system-error-content) {
	order: 2;
}

.snow-monkey-form[data-screen="complete"] > .snow-monkey-forms-turnstile {
	display: none;
}

/* 罠の入力欄（inc/request-form.php） */
.p-request-trap {
	display: none !important;
}