/*
 * form-patch.css
 * mailformpro (Perl CGI) 撤去後、ラベル前後の `.mfp_element_hidden` <span> が
 * 挿入されなくなったため、live site (caraquri.com/lp-app-01) と同じ見た目に
 * 戻すための上書き。live の `common/css/style.css` にあるラジオ／チェック関連
 * ルールを「現行 HTML マークアップに必要な部分だけ」抜粋して再現する。
 *
 * 設計メモ:
 *   - プラットフォーム checkbox: live は wrap が 654px / 上の <select> が 683px と
 *     29px 細く、ラベル左側に `::before { left: -29px }` でチェック印を置くことで
 *     上下の入力と縦線が揃うようにしている。padding-left を足してしまうと
 *     チェック印が wrap 内に押し戻されて 29px ズレるので、ここでは label に
 *     padding を持たせない。
 *   - あり / なし ラジオ: live の `nth-of-type(2) { margin-left: -30px }` は
 *     mailformpro が挿入していた hidden span 分を打ち消すためのものなので、
 *     hidden span が無くなった現環境では適用しない。
 *   - 個人情報保護方針 checkbox: 視覚的に整列させるため flex + gap で素直に
 *     並べる (live は negative-left でやっていたが、見た目だけ合わせれば良い)。
 */

/* ------------ ラジオ: あり / なし ------------ */

.radio_wrap {
  margin-left: 30px;
}

.radio-input {
  display: none;
}

.radio-input + label {
  padding-left: 20px;
  position: relative;
  margin-right: 20px;
  cursor: pointer;
}

.radio-input + label::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}

.radio-input:checked + .radio_text::after {
  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 2px;
  width: 11px;
  height: 11px;
  background: #F14A00;
  border-radius: 50%;
}

/* style.css 側に残っている legacy mailformpro 用の補正:
 *
 *     label.radio_text:nth-of-type(2) { margin-left: -30px; }
 *
 * これは mfp_element_hidden span が間に挟まる前提で「なし」ラベルを
 * 30px 左に引き戻す指定だった。mailformpro 撤去後は span が無いので、
 * このルールが効くと「なし」が「あり」に被ってしまう (#99 でも一度
 * 直したが style.css 本体の rule は残っていた)。reset で打ち消す。
 */
label.radio_text:nth-of-type(2) {
  margin-left: 0;
}

/* ------------ プラットフォーム: checkbox ------------ */

.checkbox_wrap {
  width: 654px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /*
   * Column gap must clear the icon's -29px protrusion (each label's
   * `::before` hangs 29px to the left of its own box). With gap=28px the
   * next label's icon lands ON the previous label's text. 50px leaves
   * ~21px breathing room before the next icon and ~11px between the icon
   * and the next label's text.
   */
  gap: 12px 50px;
}

.checkbox_wrap label {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.checkbox {
  display: none;
}

.checkbox + .checkbox-icon {
  position: relative;
  vertical-align: middle;
}

.checkbox + .checkbox-icon::before {
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  bottom: 0;
  left: -29px;
  width: 18px;
  height: 18px;
  margin: auto;
  background: #fff;
  border: 1px solid #F14A00;
}

.checkbox:checked + .checkbox-icon::after {
  content: "";
  display: block;
  position: absolute;
  top: -9px;
  bottom: 0;
  left: -23px;
  width: 7px;
  height: 14px;
  margin: auto;
  transform: rotate(40deg);
  border-bottom: 3px solid #ef5924;
  border-right: 3px solid #ef5924;
}

/* ------------ 個人情報保護方針 ------------ */

.checkbox_input {
  display: none;
}

.privacy_wrap {
  margin: 70px auto 0;
  text-align: center;
}

.privacy_wrap label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.privacy_txt {
  position: relative;
  display: inline-block;
  padding-left: 26px;
  line-height: 1.5;
  color: #333333;
}

.privacy_txt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid #F14A00;
}

.checkbox_input:checked + .privacy_txt::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-65%) rotate(40deg);
  width: 6px;
  height: 12px;
  border-bottom: 3px solid #ef5924;
  border-right: 3px solid #ef5924;
}

/* ------------ 送信ボタン: privacy 同意前は非活性 ------------ */

.contact_btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.4);
  box-shadow: none;
}

/* ------------ フィールドごとのインラインバリデーション ------------ */

.caraquri-field-error {
  display: block;
  margin: 6px 0 0;
  color: #D32D26;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
}

[aria-invalid="true"].contact_input,
[aria-invalid="true"].radio-input,
[aria-invalid="true"].checkbox,
[aria-invalid="true"].checkbox_input {
  border-color: #D32D26;
}

/* ------------ レスポンシブ ------------ */

@media (max-width: 830px) {
  .radio_wrap {
    margin-left: 0;
  }
  .checkbox_wrap {
    width: 100%;
    flex-direction: column;
    margin-left: 30px;
  }
}