/* ============================================================
   Snow Monkey Forms の見た目を、プロトのフォーム（.form / .f-row / .f-lbl / .f-in）に合わせる。

   ・値は css/common.css の「---- フォーム ----」と対で持っている。
     common.css 側を触ったら、ここも合わせること。
   ・item ブロックには className で f-row を付けてあるので、
     グリッド（224px 1fr）と行の区切り線は common.css の .f-row がそのまま効く。
     ここで足すのは「SMFの内側のクラスに、プロトの .f-lbl / .f-in を当てる」部分。
   ============================================================ */

/* ---- ラベル列（.f-lbl 相当） ---- */
.smf-item__col--label{
  font-size:13.5px; font-weight:500; letter-spacing:.04em; padding-top:11px;
}
.smf-item__label label{cursor:pointer}
.smf-item__label__text{display:flex; align-items:flex-start; gap:10px}

/* ---- 入力列（.f-in 相当） ---- */
.smf-item__controls input[type=text],
.smf-item__controls input[type=tel],
.smf-item__controls input[type=email],
.smf-item__controls select,
.smf-item__controls textarea{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); padding:13px 15px; border-radius:0; line-height:1.7;
  transition:border-color .3s;
}
.smf-item__controls textarea{resize:vertical; margin-top:12px}
.smf-item__controls input:focus,
.smf-item__controls select:focus,
.smf-item__controls textarea:focus{border-color:var(--ink); outline:none}
.smf-item__controls input::placeholder,
.smf-item__controls textarea::placeholder{color:#B4B4B0}

/* セレクトの三角（プロトと同じ2枚のグラデーション） */
.smf-item__controls select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:44px;
}
/* SMFのブロックCSSが `.smf-form .smf-select-control{display:inline-block}` を当てていて、
   そのままだと幅が中身なりに縮む。同じ詳細度（0,2,0）で上書きする */
.smf-form .smf-select-control{display:block; position:relative}
.smf-form .smf-select-control__toggle{display:none}

/* 補足文（.f-help 相当） */
.smf-control-description,
.smf-item__description{font-size:11.5px; color:var(--gray); line-height:1.8; margin-top:8px}

/* ---- チェックボックス／ラジオ（.checks 相当） ---- */
.smf-checkboxes-control__control,
.smf-radio-buttons-control__control{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.smf-radio-buttons-control__control{grid-template-columns:repeat(2,1fr)}   /* ご用件の2択 */

.smf-checkboxes-control .smf-label,
.smf-radio-buttons-control .smf-label{display:block}
.smf-checkboxes-control label,
.smf-radio-buttons-control label{
  display:flex; align-items:center; gap:9px; height:100%;
  border:1px solid var(--rule); padding:11px 13px; font-size:13px; cursor:pointer;
  transition:border-color .3s,background .3s;
}
.smf-checkboxes-control label:hover,
.smf-radio-buttons-control label:hover{border-color:var(--ink)}
.smf-checkboxes-control label:has(input:checked),
.smf-radio-buttons-control label:has(input:checked){border-color:var(--ink)}

.smf-checkbox-control,
.smf-radio-button-control{display:flex; align-items:center; gap:9px}
.smf-checkbox-control__control,
.smf-radio-button-control__control{
  appearance:none; width:15px; height:15px; border:1px solid #BFBFBB; flex:none;
  position:relative; margin:0;
}
.smf-checkbox-control__control:checked,
.smf-radio-button-control__control:checked{background:var(--lux); border-color:var(--lux)}
.smf-checkbox-control__control:checked::after,
.smf-radio-button-control__control:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:5px; height:9px;
  border:solid #2A2712; border-width:0 1.5px 1.5px 0; transform:rotate(42deg);
}
.smf-radio-button-control__control{border-radius:50%}

/* ---- 同意行（.agree 相当） ---- */
.smf-item.agree{display:block; text-align:center; padding:28px 0; border-bottom:0}
.smf-item.agree .smf-item__col--label{display:none}
.smf-item.agree .smf-checkboxes-control__control{display:block}
.smf-item.agree label{
  display:inline-flex; align-items:center; gap:11px; font-size:13.5px;
  border:0; padding:0;
}
.smf-item.agree label:hover,
.smf-item.agree label:has(input:checked){border:0}
.smf-item.agree .smf-checkbox-control__control{width:16px; height:16px}
.smf-item.agree .smf-checkbox-control__control:checked::after{left:4.5px; height:10px}
.smf-item.agree .smf-control-description{margin-top:12px}
.smf-item.agree a{border-bottom:1px solid var(--rule)}
.smf-item.agree a:hover{border-bottom-color:var(--ink)}

/* ---- 送信ボタン（.f-submit .btn .btn-fill 相当） ---- */
.smf-action{text-align:center; margin-top:8px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.smf-button-control__control,
.smf-button-control__control[data-action]{
  cursor:pointer; font-family:inherit; font-size:14px; letter-spacing:.04em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:300px; padding:17px 28px; border:1px solid transparent; border-radius:6px;
  background:var(--ink); color:#fff; transition:background .3s,color .3s,border-color .3s;
}
.smf-button-control__control:hover{background:#000}
/* 「入力内容を修正する」は控えめに */
.smf-button-control__control[data-action="back"]{background:var(--paper); color:var(--ink); border-color:var(--rule)}
.smf-button-control__control[data-action="back"]:hover{background:var(--lux); border-color:var(--lux); color:var(--ink)}
.smf-sending{display:none}

/* ---- エラー表示 ---- */
.smf-error-messages{margin-top:8px}
.smf-error-message{font-size:12px; color:#C0392B; line-height:1.8; margin-top:6px}
[data-invalid="true"],
input[data-invalid="true"],
select[data-invalid="true"],
textarea[data-invalid="true"]{border-color:#C0392B !important}
.smf-system-error-content-ready{display:none}

/* ---- 確認画面・完了画面 ---- */
.snow-monkey-form[data-screen="confirm"] .smf-item__controls{font-size:14px; line-height:1.9; padding-top:11px}
.smf-complete-content{font-size:14px; line-height:2.1; text-align:center; padding:8px 0 4px}
.smf-complete-content p + p{margin-top:18px}

/* ---- 読み込み中 ---- */
.snow-monkey-form[data-screen="loading"]{opacity:.5}

@media (max-width:900px){
  .smf-item__col--label{padding-top:0}
  .smf-checkboxes-control__control{grid-template-columns:repeat(2,1fr)}
  .smf-button-control__control{min-width:0; width:100%}
}

/* 送信ボタン下の注記。フォームの外（テンプレート側）に置いてあるので、
   入力画面のときだけ見せる（確認・完了画面では消す） */
.form + .f-note{text-align:center; margin-top:16px}
.form:has(.snow-monkey-form:not([data-screen="input"])) + .f-note{display:none}

/* 確認画面では必須／任意のバッジは意味がないので消す */
.snow-monkey-form[data-screen="confirm"] .req,
.snow-monkey-form[data-screen="confirm"] .opt{display:none}