/**
 * Plugear Review Step for Contact Form 7 — 最小 CSS。
 *
 * 方針: **CSS が無くても機能は成立する。ここで直すのは「CSS 無しでは構造的に
 * 直せないもの」だけ。** 色・フォント・余白の趣味はテーマの領分なので触らない。
 *
 * 確認表示の見た目そのものはテーマが持つ。我々が新しく作る要素（確認ボタンの器）
 * と、確認中に意味を失う CF7 の部品だけを扱う。
 */

/*
 * 確認ボタン 2 つの間隔。
 *
 * ボタン自体は元の送信ボタンの clone なのでテーマのスタイルが乗るが、器の
 * `.plg_prscf7_actions` はテーマが知らないので、放っておくと 2 つが密着する。
 * gap だけを与え、大きさ・色・角丸には触らない。
 *
 * inline-flex にするのは、元の送信ボタン（inline-block）が置かれていた場所に
 * そのまま収まるため。親の text-align: center などがそのまま効く。
 */
.plg_prscf7_actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
}

/*
 * 「修正する」を副ボタンに見せる。
 *
 * 2 つとも元の送信ボタンの clone なので、放っておくとテーマの主ボタンが 2 つ並び、
 * どちらが送信なのか一目で分からない。
 *
 * **特定の色を持ち込まずに差を付ける**のが要点。背景を落として枠線だけにし、
 * 文字色は `inherit`、枠線は `currentColor` にしてあるので、明るいテーマでも
 * 暗いテーマでもテーマ自身の色でまとまる。枠線を `border` ではなく inset の
 * `box-shadow` で描くのは、テーマが指定した border の有無に関わらず**ボタンの
 * 大きさを変えない**ため（2 つのボタンの高さがずれない）。
 *
 * 大きさ・角丸・字面・余白はテーマのまま触らない。
 *
 * セレクタを `.wpcf7` から書いて詳細度を 0,3,0 にしてある。ボタンは**テーマの送信
 * ボタンの clone** なので、テーマが `.foo .wpcf7-submit`（0,2,0）のように 1 段スコープ
 * して当てているのが普通で、それ未満では負ける。
 *
 * ソース順にも頼れない。この CSS はフォーム描画時に enqueue するので
 * 本来フッタに出るはずだが、SEO プラグインなどが `the_content` を早回しすると
 * head 側へ回り、本文中の <style> より**前**に出る。だから詳細度で上回っておく。
 *
 * この見た目が要らなければ、テーマ側で詳細度を 0,4,0 にするか `!important` で上書きする。
 */
.wpcf7 .plg_prscf7_actions .plg_prscf7_back {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 1px currentColor;
}

/*
 * ホバー / フォーカスでもテーマの背景色を戻さない。
 *
 * 戻すと、文字色が inherit のままテーマの主ボタン色（濃い背景）が乗って
 * 判読できなくなる。手応えは枠線を太くして返す（配色に依存しない）。
 */
.wpcf7 .plg_prscf7_actions .plg_prscf7_back:hover,
.wpcf7 .plg_prscf7_actions .plg_prscf7_back:focus {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

/*
 * 確認中はスピナーを出さない。
 *
 * CF7 のスピナーは送信ボタンの隣に置かれ、送信中だけ回る。確認表示のあいだは
 * 送信していないので意味を持たない。それ自体は不可視だが、`has-spinner` に
 * margin を当てているテーマではボタンの脇に説明のつかない余白が残る。
 */
.plg_prscf7_confirming .wpcf7-spinner {
	display: none;
}