/*
 * 越前朝倉万灯夜 灯り人ボランティア申込フォーム
 * フォーム表示用スタイル(ダークテーマ)
 * Version: 2.0.1
 */

.mvf-wrap {
	--mvf-card: #0e1730;
	--mvf-card-border: rgba(212, 160, 74, 0.30);
	--mvf-input-bg: #16213f;
	--mvf-input-bg-focus: #1b2748;
	--mvf-input-border: #34406a;
	--mvf-ink: #eef0f6;
	--mvf-label: #f1ede2;
	--mvf-muted: #9aa3bd;
	--mvf-placeholder: #5e6a8f;
	--mvf-gold: #d4a04a;
	--mvf-gold-bright: #e7b85f;
	--mvf-req: #f1a8a0;
	--mvf-error: #f0a8a0;
	--mvf-error-bg: rgba(176, 57, 46, 0.18);
	--mvf-error-border: #a85249;
	--mvf-success: #a5d6a7;
	--mvf-success-bg: rgba(46, 125, 50, 0.16);
	--mvf-success-border: #4c8a50;

	max-width: 640px;
	margin: 0 auto;
	color: var(--mvf-ink);
	font-size: 16px;
	line-height: 1.7;
}

/* フォーム本体(夜に馴染む濃色カード + 上部に灯りの金) */
.mvf-form {
	background: var(--mvf-card);
	border: 1px solid var(--mvf-card-border);
	border-top: 3px solid var(--mvf-gold);
	border-radius: 6px;
	padding: 30px 26px 34px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.mvf-note {
	margin: 0 0 22px;
	font-size: 13px;
	color: var(--mvf-muted);
}

.mvf-field {
	margin-bottom: 22px;
}

.mvf-field > label,
.mvf-fieldset > legend {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	color: var(--mvf-label);
	letter-spacing: 0.02em;
}

.mvf-req-mark {
	color: var(--mvf-req);
	font-weight: 700;
}

/* 一行入力・複数行入力・プルダウン・ファイル */
.mvf-field input[type="text"],
.mvf-field input[type="email"],
.mvf-field input[type="tel"],
.mvf-field input[type="file"],
.mvf-field textarea,
.mvf-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 16px;
	color: var(--mvf-ink);
	background: var(--mvf-input-bg);
	border: 1px solid var(--mvf-input-border);
	border-radius: 4px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mvf-field input[type="file"] {
	padding: 9px 13px;
	color: var(--mvf-muted);
}

.mvf-field textarea {
	min-height: 110px;
	line-height: 1.6;
	resize: vertical;
}

/* プルダウンは矢印を自前で描画(ダーク背景で見やすく) */
.mvf-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 38px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%239aa3bd" d="M6 8 0 0h12z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px 8px;
}

.mvf-field input::placeholder,
.mvf-field textarea::placeholder {
	color: var(--mvf-placeholder);
}

.mvf-field input:focus,
.mvf-field textarea:focus,
.mvf-field select:focus {
	outline: none;
	background: var(--mvf-input-bg-focus);
	border-color: var(--mvf-gold);
	box-shadow: 0 0 0 3px rgba(212, 160, 74, 0.22);
}

/* 選択式(ラジオ・チェックボックス) */
.mvf-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.mvf-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	margin-bottom: 9px;
	background: var(--mvf-input-bg);
	border: 1px solid var(--mvf-input-border);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 400;
	color: var(--mvf-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mvf-radio:hover {
	border-color: var(--mvf-gold);
	background: var(--mvf-input-bg-focus);
}

.mvf-radio input[type="radio"],
.mvf-radio input[type="checkbox"] {
	margin: 0;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--mvf-gold);
}

/* 補足説明 */
.mvf-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--mvf-muted);
}

/* エラーメッセージ(フィールド単位) */
.mvf-error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	color: var(--mvf-error);
	font-weight: 600;
}

.mvf-field.mvf-has-error input,
.mvf-field.mvf-has-error textarea,
.mvf-field.mvf-has-error select {
	border-color: var(--mvf-error-border);
	box-shadow: 0 0 0 3px rgba(176, 57, 46, 0.20);
}

.mvf-field.mvf-has-error .mvf-error {
	display: block;
}

/* 送信ボタン(灯りの金) */
.mvf-submit {
	margin-top: 30px;
}

.mvf-button {
	display: inline-block;
	width: 100%;
	padding: 15px 24px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.10em;
	color: #0a1430;
	background: var(--mvf-gold);
	border: 1px solid var(--mvf-gold);
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.mvf-button:hover {
	background: var(--mvf-gold-bright);
	box-shadow: 0 4px 16px rgba(212, 160, 74, 0.30);
}

.mvf-button:focus-visible {
	outline: 3px solid var(--mvf-gold-bright);
	outline-offset: 2px;
}

/* 結果メッセージ */
.mvf-message {
	margin-bottom: 26px;
	padding: 16px 18px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.7;
}

.mvf-message--success {
	background: var(--mvf-success-bg);
	border: 1px solid var(--mvf-success-border);
	color: var(--mvf-success);
}

.mvf-message--error {
	background: var(--mvf-error-bg);
	border: 1px solid var(--mvf-error-border);
	color: var(--mvf-error);
}

/* 送信完了画面 */

/* 完了時はカードより広い最大幅で表示 */
.mvf-wrap--complete {
	max-width: 780px;
}

.mvf-complete {
	background: var(--mvf-card);
	border: 1px solid var(--mvf-card-border);
	border-top: 3px solid var(--mvf-gold);
	border-radius: 8px;
	padding: 56px 48px 52px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	text-align: center;
}

.mvf-complete-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

.mvf-complete-title {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 700;
	color: var(--mvf-gold);
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.mvf-complete-msg {
	margin: 0 auto 0;
	max-width: 560px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--mvf-ink);
}

/* 受付番号バッジ */
.mvf-complete-refno {
	display: inline-block;
	margin: 20px auto 0;
	padding: 7px 24px;
	background: rgba(212, 160, 74, 0.10);
	border: 1px solid rgba(212, 160, 74, 0.40);
	border-radius: 4px;
	font-size: 13px;
	color: var(--mvf-muted);
	letter-spacing: 0.04em;
}

.mvf-complete-refno strong {
	color: var(--mvf-gold);
	font-size: 16px;
	margin-left: 6px;
}

/* 申込内容の確認テーブル */
.mvf-complete-summary {
	margin-top: 40px;
	text-align: left;
}

.mvf-complete-summary-title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mvf-muted);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(212, 160, 74, 0.18);
	padding-bottom: 9px;
}

.mvf-complete-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.mvf-complete-table tr + tr {
	border-top: 1px solid rgba(52, 64, 106, 0.55);
}

.mvf-complete-table th {
	padding: 10px 16px 10px 0;
	width: 36%;
	font-weight: 600;
	color: var(--mvf-label);
	vertical-align: top;
}

.mvf-complete-table td {
	padding: 10px 0;
	color: var(--mvf-ink);
	vertical-align: top;
	line-height: 1.65;
	word-break: break-word;
}

/* 戻るボタン */
.mvf-complete-actions {
	margin-top: 44px;
}

.mvf-complete-button {
	display: inline-block;
	padding: 14px 44px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #0a1430;
	background: var(--mvf-gold);
	border: 1px solid var(--mvf-gold);
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.mvf-complete-button:hover {
	background: var(--mvf-gold-bright);
	box-shadow: 0 4px 16px rgba(212, 160, 74, 0.30);
	color: #0a1430;
}

.mvf-complete-button:focus-visible {
	outline: 3px solid var(--mvf-gold-bright);
	outline-offset: 2px;
}

/* スパム対策(画面に表示しない) */
.mvf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* スマートフォン */
@media (max-width: 600px) {
	.mvf-form {
		padding: 24px 17px 28px;
	}

	.mvf-complete {
		padding: 38px 18px 36px;
	}

	.mvf-complete-title {
		font-size: 20px;
	}

	.mvf-complete-table th {
		width: 42%;
	}
}

/* モーション軽減設定の尊重 */
@media (prefers-reduced-motion: reduce) {
	.mvf-field input,
	.mvf-field textarea,
	.mvf-field select,
	.mvf-radio,
	.mvf-button,
	.mvf-complete-button {
		transition: none;
	}
}