/* ------------------------------------------------------------------
   自作 確認画面用スタイル（cf7-confirm.js とセット）
   ※ theme.css は変更しない
------------------------------------------------------------------- */

/* 確認モードで表示される「値」（<dd> 直下に置く） */
.ogw-confirm-view {
	display: block;
	padding: 10px 0;
	min-height: 1.8em;
	line-height: 1.8;
	color: #333;
	font-size: 100%;
	word-break: break-all;
}

/* 商品欄（商品名 × N箱）※レイズン・ウイッチ予約 */
.ogw-confirm-items > div {
	padding: 2px 0;
}

/* 商品欄の数量をその場で置き換える（※クリスマスケーキ予約）
   写真・商品名・価格はそのまま残し、select だけを数値に差し替えるため
   インライン表示にする。 */
.ogw-confirm-view.ogw-confirm-inline {
	display: inline;
	padding: 0 0.4em;
	font-weight: bold;
}

/* 入力モードでは確認表示を出さない（保険） */
body:not(.form_confirm) .ogw-confirm-view {
	display: none;
}

/* 確認画面での同意チェック
   （CF7のバリデーション上、非表示にできないため確認画面にも残す） */
.form_confirm .acceptance {
	margin-top: 20px;
}

/* 確認画面へ進む前のエラー表示 */
.ogw-error {
	display: block;
	margin-top: 6px;
	color: #c0392b;
	font-size: 13px;
	line-height: 1.6;
}

/* 生成ボタン */
.btn_box.form input[type=button] {
	cursor: pointer;
}
.btn_box.form input[type=button]:disabled {
	cursor: default;
}

/* ------------------------------------------------------------------
   送信中オーバーレイ
   CF7はAJAX送信完了時に成功メッセージを描画するため、
   完了ページへリダイレクトするまでの一瞬、入力画面が見えてしまう。
   それを隠すために送信ボタン押下時から画面全体を覆う。
------------------------------------------------------------------- */
.ogw-sending-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: rgba(255, 255, 255, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ogw-sending-inner {
	color: #4a3728;
	font-size: 15px;
	letter-spacing: 0.1em;
}

.ogw-sending-inner::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 14px;
	border: 2px solid #d8d0c8;
	border-top-color: #4a3728;
	border-radius: 50%;
	animation: ogw-spin 0.8s linear infinite;
}

@keyframes ogw-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
   同意チェックのエラーは同意行の【下】にブロック表示する

   theme.css L3600 に以下がある。

     .reservation_form .acceptance .wpcf7-not-valid-tip {
         position: absolute; top: 10px; left: 30px; right: 0; width: 240px;
     }

   これは CF7 5.1.9 が .wpcf7-form-control-wrap の内側にエラーを
   挿入していた時代の配置指定。cf7-confirm.js は読みやすさのため
   .acceptance の直下に append する設計なので、この絶対配置が当たると
   「プライバシーポリシーに同意して送信」の文字に重なる。

   詳細度を theme.css と同じ (0,3,0) に揃え、後から読み込まれる
   当ファイルで勝たせて絶対配置を解除する。
   （読み込み順: theme.css → contact-form-7/styles.css → 当ファイル）

   ※ font-size は theme.css L243 の
       span.wpcf7-not-valid-tip { font-size:75% !important; }
     が !important のため触らない。他項目のエラー
     （「この項目は必須です。」等）と同じ大きさで揃う。
------------------------------------------------------------------- */
.reservation_form .acceptance .ogw-error,
.contact_form .acceptance .ogw-error {
	position: static;
	display: block;
	width: auto;
	top: auto;
	left: auto;
	right: auto;
	margin: 10px 0 0;
	padding-top: 0;
	text-align: center;
}


/* ------------------------------------------------------------------
   ★ 2026-07 追加: 「確認画面に進む」ボタンの装飾

   【症状】
     本番では茶色・280px・白矢印だが、改修版では灰色・140px になる。

   【原因】
     theme.css のボタン装飾は input[type=submit] に対して書かれている。

       .btn_box.form input[type=submit].wpcf7c-elm-step1 { 茶色・矢印 }

     本番（add confirm プラグイン）は
       <input type="submit" class="wpcf7c-elm-step1" value="確認画面に進む">
     を出力していたので、この装飾が当たっていた。

     自作の cf7-confirm.js は「押しても送信されない」ようにするため
       <input type="button" class="wpcf7c-elm-step1" value="確認画面に進む">
     で生成している。設計としてはこちらが正しいが、その結果

       theme.css L222  input[type=button]{ width:140px; border:none; background:#ededed; }

     という【戻るボタン用】の装飾を拾ってしまう。

   【対処】
     type を submit に戻すと本当に送信されてしまうため、CSS で揃える。
     theme.css は変更せず、後から読み込まれる当ファイルで上書きする
     （読み込み順: theme.css → contact-form-7/styles.css → 当ファイル）。

     値は theme.css L168 / L1359 / L1369 / L1396 の複製。
------------------------------------------------------------------- */

.btn_box.form input[type=button].wpcf7c-elm-step1 {
	width: 280px;
	height: 55px;
	margin: auto;
	border: solid 1px #583c32;
	background: #583c32 url(../svg/arrow_link_w.svg) no-repeat;
	background-size: 5px auto;
	background-position: right 70px center;
	color: #fff;
	cursor: pointer;
}

/* 未入力時は reservation.js が disabled にする（theme.css L1369 と同じ） */
.btn_box.form input[type=button].wpcf7c-elm-step1:disabled {
	background: #ccc;
	border-color: #ccc;
	cursor: default;
}

/* SP（theme.css L1396 と同じ） */
@media only screen and (max-width: 768px) {
	.btn_box.form input[type=button].wpcf7c-elm-step1 {
		width: 100%;
		background-position: right 40px center;
	}
}