/* AUGUSTA Form — テーマの文字・リンクの色は引き継ぎ、入力欄とボタンだけ落ち着いた共通の見た目にする。 */

/* 岩谷さんのテーマは html の文字の大きさが画面幅で変わる（clamp(4.5px, 0.52vw, 15px)）＝フォームの文字が小さくなる。フォームだけ 16px を土台に。 */
.af-iwaya .af-wrap { font-size: 16px; line-height: 1.8; background: #ffffff; padding: 1.5em; border-radius: 8px; }

.af-wrap {
	--af-accent: var(--augusta-form-accent, var(--accent, var(--wp--preset--color--primary, #2b6cb0)));
	--af-req: #c0392b;
	--af-opt: #6b7280;
	--af-line: #e3e6ea;
	--af-border: #c3c8cf;
	--af-bg: #ffffff;
	--af-ink: #222222;
	max-width: 780px;
	margin: 0 auto;
	text-align: left;
	color: inherit;
	font: inherit;
	line-height: 1.7;
}

.af-wrap *,
.af-wrap *::before,
.af-wrap *::after {
	box-sizing: border-box;
}

.af-testmode {
	margin: 0 0 1.25em;
	padding: .6em .9em;
	border: 1px dashed #b7791f;
	border-radius: 4px;
	background: #fffaf0;
	color: #7b4a12;
	font-size: .875em;
}

.af-intro {
	margin: 0 0 1.5em;
}

/* フォームの上の案内（岩谷さん：秘書課へのご案内） */
.af-intro:has(.af-notice-btn),
.af-intro:has(.af-notice__lead) {
	padding: 1.1em 1.3em;
	border: 1px solid var(--af-line);
	border-left: 4px solid var(--af-accent);
	border-radius: 4px;
	background: #f8fafc;
	color: var(--af-ink);
}

.af-wrap .af-intro p {
	margin: .5em 0 0;
	color: inherit;
}

.af-wrap .af-intro p:first-child {
	margin-top: 0;
}

.af-wrap .af-notice__list {
	margin: .4em 0 0 1.4em;
	padding: 0;
	list-style: disc;
	color: inherit;
}

.af-wrap .af-notice__action {
	margin-top: 1em;
	text-align: center;
}

.af-wrap a.af-notice-btn,
.af-wrap a.af-notice-btn:link,
.af-wrap a.af-notice-btn:visited {
	display: inline-block;
	max-width: 100%;
	padding: .8em 1.6em;
	border-radius: 4px;
	background: var(--af-accent) !important;
	color: #fff !important;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none !important;
}

.af-wrap a.af-notice-btn:hover,
.af-wrap a.af-notice-btn:focus {
	opacity: .85;
	color: #fff !important;
}

.af-alert {
	margin: 0 0 1.5em;
	padding: .9em 1.1em;
	border-left: 4px solid var(--af-req);
	background: #fdf2f1;
	color: #7a1f16;
}

.af-alert p {
	margin: 0;
}

.af-form {
	margin: 0;
	border-top: 1px solid var(--af-line);
}

/* 1行＝左に「マーク＋項目名」、右に入力欄。マークは全行で同じ幅なので、先頭の列がそろう。 */
.af-row {
	display: grid;
	grid-template-columns: 16em minmax(0, 1fr);
	column-gap: 1.25em;
	row-gap: .45em;
	align-items: start;
	margin: 0;
	padding: 1.05em 0;
	border-bottom: 1px solid var(--af-line);
}

.af-label {
	display: flex;
	align-items: flex-start;
	gap: .7em;
	padding-top: .6em;
	font-weight: 600;
	line-height: 1.5;
}

.af-label__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 600;
	cursor: default;
}

label.af-label__text {
	cursor: pointer;
}

.af-badge {
	flex: 0 0 3.4em;
	display: inline-block;
	width: 3.4em;
	margin-top: .12em;
	padding: .38em 0;
	border-radius: 3px;
	font-size: .75em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	letter-spacing: .05em;
	white-space: nowrap;
}

.af-badge--req {
	border: 1px solid var(--af-req);
	background: var(--af-req);
	color: #ffffff;
}

.af-badge--opt {
	border: 1px solid #c4c8cf;
	background: #ffffff;
	color: var(--af-opt);
}

.af-field {
	min-width: 0;
}

.af-wrap input[type="text"],
.af-wrap input[type="email"],
.af-wrap input[type="tel"],
.af-wrap textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: .7em .85em;
	border: 1px solid var(--af-border);
	border-radius: 4px;
	background: var(--af-bg);
	color: var(--af-ink);
	font: inherit;
	font-size: 16px; /* スマホで拡大されないように */
	line-height: 1.5;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.af-wrap textarea {
	min-height: 12em;
	resize: vertical;
}

.af-wrap input.af-input--zip {
	max-width: 11em;
}

.af-wrap input::placeholder,
.af-wrap textarea::placeholder {
	color: #9aa1aa;
	opacity: 1;
}

.af-wrap input:focus,
.af-wrap textarea:focus {
	outline: 2px solid var(--af-accent);
	outline-offset: 1px;
	border-color: var(--af-accent);
}

.af-row.has-error input[type="text"],
.af-row.has-error input[type="email"],
.af-row.has-error input[type="tel"],
.af-row.has-error textarea {
	border-color: var(--af-req);
	background: #fffafa;
}

.af-help,
.af-count,
.af-zip-status {
	margin: .4em 0 0;
	color: var(--af-opt);
	font-size: .85em;
	line-height: 1.5;
}

.af-zip-status:empty {
	display: none;
}

.af-count {
	text-align: right;
}

.af-count.is-over {
	color: var(--af-req);
	font-weight: 700;
}

.af-error {
	margin: .4em 0 0;
	color: var(--af-req);
	font-size: .875em;
	font-weight: 600;
	line-height: 1.5;
}

.af-check {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	padding-top: .5em;
	cursor: pointer;
	line-height: 1.6;
}

.af-wrap .af-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin: .2em 0 0;
	accent-color: var(--af-accent);
	cursor: pointer;
}

.af-turnstile {
	margin: 1.5em 0 0;
	display: flex;
	justify-content: center;
}

.af-submit {
	margin: 2em 0 0;
	text-align: center;
}

.af-wrap .af-button {
	display: inline-block;
	min-width: 15em;
	max-width: 100%;
	margin: 0;
	padding: 1em 3em;
	border: 0;
	border-radius: 999px;
	background: var(--af-accent);
	color: #ffffff;
	font: inherit;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.af-wrap .af-button:hover {
	filter: brightness(1.08);
}

.af-wrap .af-button:focus-visible {
	outline: 3px solid var(--af-accent);
	outline-offset: 3px;
}

.af-wrap .af-button[disabled] {
	cursor: wait;
	opacity: .65;
}

/* 数量（歌集の冊数など）・合計 */
.af-wrap .af-select {
	min-width: 7em;
	padding: .55em 2.2em .55em .8em;
	border: 1px solid var(--af-border);
	border-radius: 6px;
	background: #fff;
	color: var(--af-ink);
	font: inherit;
	font-size: 16px;
}
.af-wrap .af-badge--none { visibility: hidden; }
.af-wrap .af-total { margin: 0; font-size: 1.1em; color: var(--af-ink); }
.af-wrap .af-total strong { font-size: 1.3em; color: var(--af-accent); }
.af-wrap .af-order-total {
	margin: 1.25em 0 0;
	padding: 1em 1.25em;
	border-left: 4px solid var(--af-accent);
	background: #f8fafc;
	color: var(--af-ink);
}
.af-wrap .af-order-total p { margin: 0; color: var(--af-ink); }
.af-wrap .af-order-total__sum strong { font-size: 1.3em; color: var(--af-accent); }
.af-wrap .af-order-total__note { margin-top: .5em !important; font-size: .9em; }

/* 必須の欄がそろうまでは薄く（押すと足りない欄に警告が出る） */
.af-wrap .af-button.is-pending {
	opacity: .35;
	cursor: not-allowed;
	filter: grayscale(.4);
}
.af-wrap .af-button.is-pending:hover {
	filter: grayscale(.4);
}
.af-wrap .af-submit-hint {
	margin: .75em 0 0;
	font-size: .85em;
	color: var(--af-opt);
	text-align: center;
}
.af-wrap .af-submit-hint[hidden] {
	display: none;
}

/* 確認画面：行の作りは入力画面と同じ（左にマーク＋項目名、右に値）。 */
.af-confirm-head {
	margin: 0 0 1.25em;
}

.af-confirm-title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
}

.af-confirm-lead {
	margin: .4em 0 0;
	font-size: .95em;
}

.af-confirm {
	border-top: 1px solid var(--af-line);
}

.af-value {
	padding: .6em 0 0;
	line-height: 1.6;
	overflow-wrap: anywhere;
	word-break: normal;
}

.af-row--textarea .af-value {
	padding: .75em .9em;
	margin-top: .25em;
	border-radius: 4px;
	background: #f6f7f9;
	color: var(--af-ink); /* 黒い背景のテーマ（花結）でも読めるように、明るい箱の中は濃い文字 */
}

.af-empty {
	color: var(--af-opt);
	font-size: .9em;
}

.af-agreed::before {
	content: "\2713";
	display: inline-block;
	margin-right: .4em;
	color: var(--af-accent);
	font-weight: 700;
}

.af-form--confirm {
	border-top: 0;
}

.af-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	margin: 2em 0 0;
}

.af-wrap .af-actions .af-button {
	min-width: 12em;
}

.af-wrap .af-button--back {
	border: 2px solid var(--af-accent);
	background: #ffffff;
	color: var(--af-accent);
	padding-top: calc(1em - 2px);
	padding-bottom: calc(1em - 2px);
}

.af-wrap .af-button--back:hover {
	filter: none;
	background: #f6f8fa;
}

/* 見えない欄（機械よけ） */
.af-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.af-done {
	padding: 2em 1.5em;
	border: 1px solid var(--af-line);
	border-top: 4px solid var(--af-accent);
	border-radius: 4px;
	background: #f8fafc;
	color: var(--af-ink); /* 黒い背景のテーマでも読めるように */
	text-align: center;
}

.af-done:focus {
	outline: none;
}

.af-done p {
	margin: .5em 0 0;
}

/* テーマが p や見出しに直接白を付けていても、明るい箱の中は濃い文字にする */
.af-wrap .af-done p,
.af-wrap .af-done strong,
.af-wrap .af-row--textarea .af-value {
	color: var(--af-ink);
}

.af-done .af-done__title {
	margin: 0;
	font-size: 1.2em;
	font-weight: 700;
}

/* 完了のあとの「トップページに戻る」ボタン */
.af-done .af-done__home {
	margin-top: 1.5em;
}

/* テーマのリンクの色（K-MET など）に負けないよう、強めに指定する */
.af-wrap .af-done a.af-btn--home,
.af-wrap .af-done a.af-btn--home:link,
.af-wrap .af-done a.af-btn--home:visited {
	display: inline-block;
	padding: .8em 2.2em;
	border: 0;
	border-radius: 4px;
	background: var(--af-accent) !important;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	line-height: 1.4;
	box-shadow: none;
}

.af-wrap .af-done a.af-btn--home:hover,
.af-wrap .af-done a.af-btn--home:focus {
	opacity: .85;
	color: #fff !important;
}

/* スマホ：項目名の行の下に入力欄。マークは左のまま。 */
@media (max-width: 680px) {
	.af-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: .55em;
		padding: .95em 0;
	}

	.af-label {
		padding-top: 0;
	}

	.af-wrap .af-button {
		width: 100%;
		min-width: 0;
		padding: 1em 1.5em;
	}

	.af-row--confirm:not(.af-row--textarea) .af-value {
		padding-top: 0;
	}

	/* スマホ：「送信する」を上、「戻って直す」を下に。 */
	.af-actions {
		flex-direction: column-reverse;
		gap: .75em;
	}

	.af-wrap .af-actions .af-button {
		min-width: 0;
	}
}