/* efo.css — efo.js 用スタイル。色は下の変数を変えるだけで調整できます
 * 入力中・エラー・成功の色は、サイト側のCSS（IDセレクタ等）に負けないよう !important を付けています */
:root {
  --efo-focus-bg: #fffbe6;      /* 入力時背景色 */
  --efo-focus-line: #f5b400;
  --efo-error-bg: #fff0f0;      /* エラー時背景色 */
  --efo-error: #d93025;
  --efo-ok: #2e9e44;            /* 入力成功サイン */
  --efo-btn: #f08300;           /* 送信ボタン */
  --efo-btn-hover: #d97400;
  --efo-btn-ready: #2e9e44;
}

/* ---- 入力時背景色 ---- */
.efo-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
.efo-form select:focus,
.efo-form textarea:focus {
  background-color: var(--efo-focus-bg) !important;
  border-color: var(--efo-focus-line) !important;
  outline: 2px solid var(--efo-focus-line) !important;
  outline-offset: 0 !important;
}

/* ---- エラー時背景色 ---- */
.efo-form input.is-error:not([type=checkbox]):not([type=radio]),
.efo-form select.is-error,
.efo-form textarea.is-error {
  background-color: var(--efo-error-bg) !important;
  border-color: var(--efo-error) !important;
}
.efo-form .efo-group.is-error {
  background-color: var(--efo-error-bg) !important;
  outline: 1px solid var(--efo-error);
  border-radius: 4px;
}
.efo-form input[type=checkbox].is-error,
.efo-form input[type=radio].is-error {
  outline: 2px solid var(--efo-error);
  outline-offset: 1px;
}

/* ---- 入力成功サイン ---- */
.efo-form input.is-ok:not([type=checkbox]):not([type=radio]),
.efo-form textarea.is-ok {
  border-color: var(--efo-ok) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e9e44'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 18px 18px !important;
  padding-right: 34px !important;
}
.efo-form textarea.is-ok { background-position: right 8px top 8px !important; }
.efo-form select.is-ok { border-color: var(--efo-ok) !important; }
/* セレクトボックス・チェックボックス・ラジオボタン用のチェックマーク */
.efo-sign {
  display: inline-block;
  flex: none;
  align-self: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e9e44'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
.efo-sign[hidden] { display: none !important; }

/* ---- リアルタイムアラート ---- */
.efo-msg {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  color: var(--efo-error);
}
.efo-msg:empty { display: none; }
.efo-msg::before { content: "⚠ "; }

/* ---- メアドサジェスト ---- */
.efo-suggest {
  position: absolute;
  z-index: 9999;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  font-size: 15px;
  text-align: left;
  max-width: calc(100vw - 32px);
}
.efo-suggest[hidden] { display: none; }
.efo-suggest li {
  margin: 0;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.efo-suggest li:hover,
.efo-suggest li.is-active { background: #eef4ff; }

/* ---- 送信ボタンデザイン ---- */
.efo-remaining {
  margin: 16px 0 8px !important;
  font-size: 14px;
  font-weight: bold;
  color: var(--efo-error);
  text-align: center;
}
.efo-remaining.is-ready { color: var(--efo-ok); }
.efo-form .efo-submit {
  display: block !important;
  width: 100% !important;
  max-width: 360px;
  height: auto !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--efo-btn) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
  transition: background-color .2s, transform .1s, box-shadow .1s;
  -webkit-appearance: none;
  appearance: none;
}
.efo-form .efo-submit:hover { background: var(--efo-btn-hover) !important; opacity: 1 !important; }
.efo-form .efo-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.efo-form .efo-submit.is-ready { background: var(--efo-btn-ready) !important; }

/* スマホで入力欄をタップしたときに画面が拡大されるのを防ぐ（iOSは16px未満だと拡大する） */
@media (max-width: 767px) {
  .efo-form input:not([type=checkbox]):not([type=radio]),
  .efo-form select,
  .efo-form textarea { font-size: 16px !important; }
}