/* ===== Contact Form 7 のマークアップを contact.css のデザインに合わせるためのシム =====
   静的HTMLの入力欄は素の <input> と <form class="frm"> でしたが、CF7 は
   <form class="wpcf7-form"> の中を <span class="wpcf7-form-control-wrap"> などで包んだ
   独自のマークアップを出します。ここではその差だけを吸収しています。
   デザイン（色・余白・線）は contact.css の値をそのまま使い、新しい見た目は足していません。
   読み込み順は common.css → contact.css → confirm.css → cf7.css → patch.css です。 */

/* 静的HTMLの .frm に相当するのは CF7 の form 要素 */
form.wpcf7-form{display:grid;gap:26px}
form.wpcf7-form .wpcf7-form-control-wrap{display:block} /* CF7 のラッパは span なのでブロックにする */

/* テキスト系 ── contact.css の .fr input[type=...] と同じ指定 */
form.wpcf7-form input[type=text],
form.wpcf7-form input[type=email],
form.wpcf7-form input[type=tel],
form.wpcf7-form input[type=url],
form.wpcf7-form textarea{
  width:100%;margin-top:10px;border:1px solid var(--ln);background:var(--w);padding:14px 16px;
  font-family:inherit;font-size:15px;color:var(--k);transition:border-color .25s}
form.wpcf7-form input:focus,form.wpcf7-form textarea:focus{outline:none;border-color:var(--k)}
form.wpcf7-form textarea{min-height:180px;resize:vertical;line-height:1.9}
form.wpcf7-form input.big{padding:18px 18px;font-size:16px;letter-spacing:.02em}

/* ラジオ ── CF7 の list-item を contact.css の .chip と同じ見た目にする */
.chips .wpcf7-form-control.wpcf7-radio{display:flex;flex-wrap:wrap;gap:9px}
.chips .wpcf7-list-item{margin:0;position:relative}
.chips .wpcf7-list-item label{display:block;position:relative;font-weight:400}
.chips .wpcf7-list-item input{position:absolute;opacity:0;width:0;height:0}
.chips .wpcf7-list-item-label{display:block;border:1px solid var(--ln);padding:10px 17px;font-size:13px;
  cursor:pointer;transition:.25s var(--ease);background:var(--w)}
.chips .wpcf7-list-item input:checked+.wpcf7-list-item-label{background:var(--k);border-color:var(--k);color:var(--w)}
.chips .wpcf7-list-item input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--k);outline-offset:3px}

/* 送信ボタン ── contact.css の .sub と同じ */
form.wpcf7-form input.sub[type=submit]{width:100%;border:0;background:var(--k);color:var(--w);font-family:inherit;
  font-size:14.5px;font-weight:700;letter-spacing:.08em;padding:20px;cursor:pointer;transition:opacity .25s;
  -webkit-appearance:none;appearance:none;-webkit-text-fill-color:currentColor}
form.wpcf7-form input.sub[type=submit]:hover{opacity:.78}

/* CF7 のスピナー・バリデーションメッセージ */
form.wpcf7-form .wpcf7-spinner{margin:0 auto;display:block}
form.wpcf7-form .wpcf7-not-valid-tip{font-size:11.5px;color:var(--k);margin-top:8px;line-height:1.8;
  border-left:2px solid var(--k);padding-left:10px}
form.wpcf7-form .wpcf7-response-output{margin:20px 0 0;border:1px solid var(--ln);background:var(--mist);
  padding:16px 18px;font-size:13px;line-height:1.9}
form.wpcf7-form input[aria-invalid=true],form.wpcf7-form textarea[aria-invalid=true]{border-color:var(--k)}

/* ===== 確認画面（/confirm/ ・ Multi-Step Forms の2ステップ目） =====
   confirm.css の .cf / .cfa / .cfnote をそのまま使う。
   確認画面のフォームは入力欄を持たず、[multiform] が値のテキストだけを返すので、
   グリッドの間隔だけ入力フォームと分けている。 */
.lamp-page-confirm form.wpcf7-form{display:block}
/* 値が空のときの表示（[multiform] は空文字を返す） */
.cf dd:empty::before{content:"（未入力）";color:var(--g3)}
/* 「この内容で送信する」「入力内容を修正する」。common.css の .btn をそのまま使うが、
   input[type=submit] / input[type=button] なので font-family と appearance だけ補う。 */
/* CF7の出力は wpautop で <p> に包まれるため、.cfa の横並びを <p> 側に持たせる */
.cfa p{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0}
.cfa input[type=submit],.cfa input[type=button]{font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.cfa .wpcf7-spinner{align-self:center}