@charset "UTF-8";

/*
 * CF7 送信ボタンの非活性表示（サイト共通）
 *
 * ボタンの配色はサイトごとに違うため、彩度を落として「押せない」ことを示す。
 * grayscale は背景色の指定に関係なく効くので、サイト側CSSに勝ち負けが生じない。
 * 透過は弱めにしてある（もともと淡色の :disabled を持つサイトで文字が読めなくなるため）。
 * 状態の付け外しは form-submit-state.js
 */

.wpcf7-form .wpcf7-submit:disabled {
  filter: grayscale(1);
  opacity: 0.85;
  box-shadow: none;
  cursor: not-allowed;

  /* タップを親要素で受けて理由を出すため（disabled要素自身はクリックを発火しない） */
  pointer-events: none;
}

/* サイト側が :disabled を持たない場合の既定色。詳細度は低くしてサイト側を優先させる */
.wpcf7-submit:disabled {
  background-color: #d5d5dc;
  color: #5a5a66;
  border-color: rgba(0, 0, 0, 0.08);
}

.wpcf7-form .is-locked {
  cursor: not-allowed;
}

/* 押せない理由。SPでは入力欄が画面外に出るので、非活性の間は常時出す */
.form-submit-state__hint {
  display: none;
  margin: 8px auto 0;
  padding: 6px 12px;
  max-width: 32em;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  color: #4a4a55;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.is-locked .form-submit-state__hint {
  display: block;
}

.form-submit-state__hint:before {
  content: "※";
  margin-right: 2px;
}

/* 非活性ボタンをタップしたとき。反応が無いように見えないよう理由を強調する */
.form-submit-state__hint.is-alert {
  color: #b3261e;
  border-color: rgba(179, 38, 30, 0.5);
  font-weight: 700;
  animation: form-submit-state-shake 0.4s ease;
}

@keyframes form-submit-state-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-submit-state__hint.is-alert {
    animation: none;
  }
}