/* ==========================================================================
   forms-wp.css — MW WP Form が出すマークアップを静的版（cx-form）の見た目に合わせる
   2026-09-24 forms ユニット新設。静的版の components.css / pages/*.css は触らない。

   MW WP Form のラジオ・チェックボックスは
     <span class="mwform-radio-field horizontal-item"><label><input><span class="…-text">…</span></label></span>
   という入れ子で出る。静的版は <label class="cx-choice"><input>…</label> なので、
   ラッパを display:contents で透過させて既存CSSの効き方を揃える。
   ========================================================================== */

/* ---- MW のラッパを透過（静的版と同じ要素構成にする） ---- */
.hnk-consent > .mwform-checkbox-field,
.hnk-consent > .mwform-checkbox-field > label,
.cx-choices > .mwform-radio-field,
.cx-choices > .mwform-checkbox-field { display: contents; }

/* ---- .cx-choices の中のラベル（静的版の .cx-choice 相当） ---- */
.cx-choices .mwform-radio-field > label,
.cx-choices .mwform-checkbox-field > label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 17px;
  letter-spacing: 0.07em;
  color: var(--cx-ink);
  cursor: pointer;
}

/* ---- ラジオ／チェックボックスの見た目（components.css の .cx-choice input と同一） ---- */
.cx-choices input[type="radio"],
.cx-choices input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--cx-blue);
  cursor: pointer;
  position: relative;
}

.cx-choices input[type="radio"] { border-radius: 50%; }
.cx-choices input[type="checkbox"] { border-radius: 4px; }
.cx-choices input:checked { background: var(--cx-blue); }
.cx-choices input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

.cx-choices input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cx-choices input:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: 2px; }

/* ---- ファイル選択：MW の削除ボタン（×）は静的版に無いので隠す ---- */
.cx-upload .mwform-file-delete { display: none; }

/* ---- ハニーポット（bot 用の空欄。人には見せない） ---- */
.hnk-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---- バリデーションのエラー文言（静的版の .cx-form__error と同じ見た目） ---- */
.mw_wp_form .error {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.07em;
  color: var(--cx-error, #d33);
}

.mw_wp_form .cx-form__row .error ~ .cx-input,
.mw_wp_form .cx-form__row.is-error .cx-input { border-color: var(--cx-pink); }

/* ---- ボタン ---- */
/* 入力画面では「確認画面へ」、確認画面では「書き直す」＋「送信する」が出る */
.cx-form__submit { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.cx-form__submit .cx-btn { margin: 0; }
.cx-btn--back {
  background: #fff;
  color: var(--cx-blue);
  border: 1px solid var(--cx-blue);
  padding: 0 20px;
}

.cx-btn--back .cx-btn__text { color: var(--cx-blue); }
@media (hover: hover) { .cx-btn--back:hover { filter: none; background: #f0f6ff; } }

/* ---- 確認画面：入力値がテキストで出る行を読みやすく ---- */
.mw_wp_form_confirm .cx-form__row { font-size: 17px; line-height: 30px; letter-spacing: 0.07em; color: var(--cx-ink); }
.mw_wp_form_confirm .cx-upload { min-height: 0; border: 0; background: none; display: block; text-align: left; }
.mw_wp_form_confirm .cx-note { margin-top: 6px; }

/* ---- 完了メッセージ（お問い合わせ・写真応募はページ内に出す） ---- */
.mw_wp_form_complete .ap-thanks { text-align: center; }
.mw_wp_form_complete .ap-thanks .cx-text { margin-top: 18px; }
.mw_wp_form_complete .ap-thanks .cx-note { margin-top: 12px; }

@media (max-width: 767px) {
  .cx-choices .mwform-radio-field > label,
  .cx-choices .mwform-checkbox-field > label { font-size: 14px; }
  .mw_wp_form .error { font-size: 12px; line-height: 18px; }
  .cx-form__submit { gap: 12px; }
}