.mick-estimate{
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;   /* 好みで 640〜860 くらい */
  margin: 40px auto;  /* 中央寄せ */
  padding: 24px;
}

/* 親要素の影響でズレる時の保険（inherit方式が安定） */
.mick-estimate *,
.mick-estimate *::before,
.mick-estimate *::after{
  box-sizing: inherit;
}

.mick-estimate h3{
  margin:0 0 .7em;
  font-size:1.4em;
  /* 下線色を変数化（未指定時はCTA色→それも無ければ#00afcc） */
  border-bottom:2px solid var(--mick-accent, var(--mick-cta-bg, #00afcc));
  padding-bottom:.3em;
}

.mick-estimate .row{margin-bottom:.9em}
.mick-estimate label{display:block;margin-bottom:.25em;font-weight:normal;font-size:1.05em}
.mick-estimate .row>label{font-weight:600}
.mick-estimate .row .choices label{font-weight:normal}

.mick-estimate input[type=text],
.mick-estimate input[type=email],
.mick-estimate input[type=tel],
.mick-estimate input[type=file],
.mick-estimate textarea,
.mick-estimate select{
  width:100%;
  padding:.6em;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
}

.mick-estimate input[type=file]{padding:.4em .6em;background:#fafafa}
.mick-estimate .small{font-size:.9em;color:#666}
.mick-estimate .actions{margin-top:1.1em}

/* ベースボタン */
.mick-estimate .btn{
  display:inline-block;
  padding:.7em 1.2em;
  border:none;
  border-radius:4px;
  cursor:pointer;
  text-decoration:none;
}

/* 送信ボタン用（横幅いっぱいにしたい場合）*/
.mick-estimate button.btn{
  display:block;
  width:100%;
  text-align:center;
  font-weight:600;
  padding:0.9em 0;
}

.mick-estimate .alert{padding:.8em 1em;border-radius:4px;margin:.8em 0}
.mick-estimate .alert-ok{background:#e8f7ef;border:1px solid #bfe6cf}
.mick-estimate .alert-ng{background:#fff0f0;border:1px solid #ffd5d5}

.mick-estimate .row .choices{display:block;margin-top:0;padding-left:1.5em}
.mick-estimate .row .choices .inline{display:flex;align-items:center;gap:.6em;margin:.2em 0}

.mick-estimate .row .choices-inline{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6em 1em;
}
.mick-estimate .row .choices-inline .inline{
  display:flex;
  align-items:flex-start;
  gap:.5em;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  margin:.15em 0;
}

@media (max-width:400px){
  .mick-estimate .row .choices-inline{grid-template-columns:1fr}
}
@media (min-width:768px){
  .mick-estimate .row .choices-inline{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 送信ボタン配色（設定で変更した色を反映） */
.mick-estimate button.btn,
.mick-estimate .btn.submit{
  background: var(--mick-cta-bg, #00afcc);
  color: var(--mick-cta-text, #ffffff);
}

/* hover / focus-visible（キーボード操作にも配慮） */
.mick-estimate .btn:hover,
.mick-cta-fixed a:hover{ filter:brightness(0.95) }

.mick-estimate input:focus-visible,
.mick-estimate textarea:focus-visible,
.mick-estimate select:focus-visible,
.mick-estimate .btn:focus-visible,
.mick-cta-fixed a:focus-visible{
  outline:2px solid var(--mick-accent, var(--mick-cta-bg, #00afcc));
  outline-offset:2px;
}

/* モーション弱め（ユーザー設定に追随） */
@media (prefers-reduced-motion: reduce){
  .mick-estimate .btn:hover,
  .mick-cta-fixed a:hover{ filter:none }
}

/* アンカー飛び先の被り（ヘッダー固定サイト向け微調整：任意）
#mick-estimate { scroll-margin-top: 80px; }
*/

/* 送信中ボタンの見た目（半透明＆カーソル禁止） */
.mick-estimate .btn.submit[disabled],
.mick-estimate button[type="submit"][disabled]{
  opacity: .6;
  cursor: not-allowed;
}

/* 成功時（送信完了） */
.mick-estimate .btn.submit.is-success{
  opacity: .9;
  filter: grayscale(10%);
}

/* ショートコードブロックの影響があれば保険 */
.wp-block-shortcode{
  width: 100%;
}

/* =========================================================
   Choice fields (radio / checkbox)
   =========================================================
   現在のHTMLは .mick-choice + (mick-inline / mick-vertical)
   旧CSS(.row .choices-inline等)とクラス名がズレる環境があるため、
   ここで確実に横並び（グリッド）を効かせる。
*/
.mick-estimate .mick-choice{
  margin-top: .2em;
}

.mick-estimate .mick-choice label{
  /* ベースの label{display:block} を上書き */
  display:flex;
  align-items:center;
  line-height:1.4;
  gap:.5em;
  margin:.15em 0;
  font-weight:normal;
  font-size:1em;
}

.mick-estimate .mick-choice input[type="checkbox"],
.mick-estimate .mick-choice input[type="radio"]{
  margin:0;
}

.mick-estimate .mick-choice label > input{
  flex:0 0 auto;
}

/* 横並び：2列→(スマホ)1列→(PC)3列 */
.mick-estimate .mick-choice.mick-inline{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6em 1em;
}

@media (max-width:400px){
  .mick-estimate .mick-choice.mick-inline{grid-template-columns:1fr}
}
@media (min-width:768px){
  .mick-estimate .mick-choice.mick-inline{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =========================================================
   Field underline (keep borders + add subtle bottom line)
   ========================================================= */
.mick-estimate input[type=text],
.mick-estimate input[type=email],
.mick-estimate input[type=tel],
.mick-estimate input[type=url],
.mick-estimate input[type=number],
.mick-estimate input[type=search],
.mick-estimate input[type=file],
.mick-estimate textarea,
.mick-estimate select{
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
}

.mick-estimate input[type=text]:focus,
.mick-estimate input[type=email]:focus,
.mick-estimate input[type=tel]:focus,
.mick-estimate input[type=url]:focus,
.mick-estimate input[type=number]:focus,
.mick-estimate input[type=search]:focus,
.mick-estimate input[type=file]:focus,
.mick-estimate textarea:focus,
.mick-estimate select:focus{
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.55);
}

/* === Spacing: field -> next label === */
/* === Spacer between fields (HTML inserted) === */
.mick-estimate .mick-spacer{
  height: 0.9em;
}


/* Field label (not choices): make bold and readable */
.mick-estimate .mick-label{
  font-weight: 700;
  margin-bottom: .35em;
}


/* === Total (calc) === */
.mick-estimate .mick-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:.55em .7em;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fafafa;
  margin-top:.2em;
}
.mick-estimate .mick-total-label{
  font-weight:700;
}
.mick-estimate .mick-total-amount{
  font-weight:700;
  font-size:1.15em;
}