/**
 * SMF Extension - フロント側スタイル（Snow Monkey Forms デザイン拡張）
 *
 * 全 Snow Monkey Forms フォームに自動適用される CSS。
 *
 * Snow Monkey Forms (v12.1.2) の実 HTML 構造:
 *   <span class="smf-button-control">
 *     <button type="submit" class="smf-button-control__control" data-action="confirm|back|complete">...</button>
 *   </span>
 *
 * これらが <div class="smf-action"> 内に並ぶ。
 *
 * data-action の値（App/Controller/*.php より確定）:
 *   - "confirm"  : 「確認画面へ」（入力画面 / 入力に戻った時）
 *   - "complete" : 「送信する」（確認画面 / 確認スキップ時）
 *   - "back"     : 「戻る」（確認画面のみ）
 *
 * 本体側 CSS は `.smf-action .smf-button-control__control` のセレクタを使うため、
 * こちらは詳細度を上げるため `.smf-form .smf-action ...` で当てる。
 * 値の上書きを確実にするため、本体側で使われている `--_*` CSS変数を直接上書きする。
 */

/* ============================================
   ボタン群のレイアウト
   ============================================ */

.smf-form .smf-action {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-start;
	margin-top: 24px;
}

/* 「戻る」ボタンの親 .smf-button-control を右側に押し出す
   DOM 順は [戻る, 送信する] なので、order で送信を先頭・戻るを右端に */
.smf-form .smf-action .smf-button-control:has(> [data-action="back"]) {
	margin-left: auto;
	order: 99;
}

/* ============================================
   送信・確認ボタン（メインカラー）
   ============================================ */

.smf-form .smf-action .smf-button-control__control[data-action="confirm"],
.smf-form .smf-action .smf-button-control__control[data-action="complete"] {
	background-color: #2271b1 !important;
	background-image: none !important;
	color: #fff !important;
	font-weight: bold;
	font-size: 16px;
	padding: 14px 36px !important;
	border: 1px solid #2271b1 !important;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	min-width: 180px;
	line-height: 1.4;
}

.smf-form .smf-action .smf-button-control__control[data-action="confirm"]:hover,
.smf-form .smf-action .smf-button-control__control[data-action="complete"]:hover {
	background-color: #135e96 !important;
	background-image: none !important;
	border-color: #135e96 !important;
	color: #fff !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.smf-form .smf-action .smf-button-control__control[data-action="confirm"]:active,
.smf-form .smf-action .smf-button-control__control[data-action="complete"]:active {
	background-color: #0a4b7a !important;
	background-image: none !important;
	border-color: #0a4b7a !important;
	transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.smf-form .smf-action .smf-button-control__control[data-action="confirm"]:focus,
.smf-form .smf-action .smf-button-control__control[data-action="complete"]:focus {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.smf-form .smf-action .smf-button-control__control[data-action="confirm"]:disabled,
.smf-form .smf-action .smf-button-control__control[data-action="complete"]:disabled,
.smf-form .smf-action .smf-button-control__control[data-action="confirm"][disabled],
.smf-form .smf-action .smf-button-control__control[data-action="complete"][disabled] {
	background-color: #a0a5aa !important;
	background-image: none !important;
	border-color: #a0a5aa !important;
	color: #fff !important;
	cursor: not-allowed;
	box-shadow: none;
}

/* ============================================
   戻るボタン（控えめ）
   ============================================ */

.smf-form .smf-action .smf-button-control__control[data-action="back"] {
	background-color: transparent !important;
	background-image: none !important;
	color: #50575e !important;
	font-weight: normal;
	font-size: 15px;
	padding: 12px 28px !important;
	border: 1px solid #c3c4c7 !important;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.smf-form .smf-action .smf-button-control__control[data-action="back"]:hover {
	background-color: #f0f0f1 !important;
	background-image: none !important;
	border-color: #8c8f94 !important;
	color: #1d2327 !important;
}

.smf-form .smf-action .smf-button-control__control[data-action="back"]:focus {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* ============================================
   送信中スピナーの位置調整
   （色を変えたボタン上で見やすく）
   ============================================ */

.smf-form .smf-action .smf-button-control__control[data-action="confirm"] .smf-sending:before,
.smf-form .smf-action .smf-button-control__control[data-action="complete"] .smf-sending:before {
	border-color: rgba(255, 255, 255, 0.5);
	border-top-color: transparent;
}

/* ============================================
   モバイル対応
   ============================================ */

@media (max-width: 600px) {
	.smf-form .smf-action {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.smf-form .smf-action .smf-button-control {
		width: 100%;
		display: block;
	}

	.smf-form .smf-action .smf-button-control:has(> [data-action="back"]) {
		margin-left: 0;
		order: 99;
	}

	.smf-form .smf-action .smf-button-control__control[data-action="confirm"],
	.smf-form .smf-action .smf-button-control__control[data-action="complete"],
	.smf-form .smf-action .smf-button-control__control[data-action="back"] {
		width: 100%;
		min-width: 0;
		display: block;
	}
}

/* ============================================
   郵便番号検索ボタン（入力画面以外では非表示）
   ============================================ */

.snow-monkey-form[data-screen="confirm"] .smf-extension-postal-button,
.snow-monkey-form[data-screen="complete"] .smf-extension-postal-button {
	display: none !important;
}

.snow-monkey-form[data-screen="confirm"] .smf-extension-postal-candidates,
.snow-monkey-form[data-screen="complete"] .smf-extension-postal-candidates {
	display: none !important;
}