/* ============================================================
 * cf7-confirm-step.css
 *
 * テーマ自前の Contact Form 7 確認ステップ（cf7-confirm-step.js）の見た目。
 * 廃止プラグイン「Contact Form 7 add Confirm」の代替。
 *
 * トンマナ：クールホワイト地／フラット罫線／塗りつぶし最小。
 * AIっぽい callout box（塗り背景＋全周枠線＋太い border-left＋大きな角丸 padding）は使わない。
 * 読み取り一覧は dl の上下フラット罫線と控えめな面差で構成する。
 * モバイルファースト（min-width で拡張）。タップ領域 48px。
 * ============================================================ */

/* ── 確認する/送信するボタン（CF7 が出す .wpcf7-submit を含む）─────
 * .contact-form__submit など各フォームの送信ラッパに JS が confirmBtn を差し込む。
 * 既存のボタンラッパ（.contact-form__submit / .lp-form__submit）の flex 配置に乗る。 */

.cf7c-confirm-btn,
.cf7c-back-btn {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	cursor: pointer;
}

/* 確認する：主CTAなのでフル幅で堂々と（モバイル基準） */
.cf7c-confirm-btn {
	width: 100%;
	min-height: 48px;
}

/* CF7 標準の実送信ボタンは <input type="submit"> で出力される。
 * JS が .btn .btn--primary .btn--lg を付与するため、input 固有の見た目リセットを補強し、
 * テーマボタンの体裁を全フォームページ（contact / LP / 研修）で共通に担保する。 */
input.wpcf7-submit.btn {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	cursor: pointer;
	background-clip: padding-box;
	text-transform: none;
	letter-spacing: var(--ls-tight);
}

input.wpcf7-submit.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 確認画面で表示されたときにフル幅・48px を担保する。 */
.cf7c-real-submit--active {
	width: 100%;
	min-height: 48px;
}

/* ── 確認パネル ───────────────────────────────── */

.cf7c-panel {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	/* 上の罫線1本だけで「確認領域」を区切る（box 化しない） */
	border-top: 1px solid var(--color-border-subtle);
}

.cf7c-panel[hidden] {
	display: none;
}

.cf7c-panel__heading {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
}

/* ── 読み取り一覧（dl）─────────────────────────── */

.cf7c-summary {
	margin: 0;
	/* 行間を仕切る薄い罫線。塗りつぶした box にはしない。 */
	border-top: 1px solid var(--color-border-subtle);
}

.cf7c-summary__label {
	margin: 0;
	padding: var(--space-4) 0 var(--space-1);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text-secondary);
	letter-spacing: var(--ls-tight);
}

.cf7c-summary__value {
	margin: 0;
	padding: 0 0 var(--space-4);
	border-bottom: 1px solid var(--color-border-subtle);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-primary);
	/* textContent で入れた改行を保持（XSS 安全な改行表示） */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ── 操作ボタン群（入力に戻る／この内容で送信する）────────── */

.cf7c-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

/* 「入力に戻る」は副次操作。フル幅だが控えめに。 */
.cf7c-back-btn {
	width: 100%;
	min-height: 48px;
	order: 2; /* モバイルでは送信ボタンを上に置きたい場合に備え順序指定可能に */
}

/* PC では戻る/送信を横並びにし、送信を右側（主導線）に置く */
@media (min-width: 640px) {
	.cf7c-confirm-btn {
		width: auto;
	}

	.cf7c-actions {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.cf7c-back-btn {
		width: auto;
		order: 0;
	}

	.cf7c-real-submit--active {
		width: auto;
	}
}

/* ── タッチデバイス：hover の transform を抑制 ───────────── */
@media (hover: none) {
	.cf7c-confirm-btn:hover,
	.cf7c-back-btn:hover {
		transform: none;
	}
}

/* ── モーション配慮 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cf7c-panel,
	.cf7c-confirm-btn,
	.cf7c-back-btn {
		transition: none;
	}
}