/* ========================================
   お問い合わせのフォームの部品 — パステル版
   - .card-head: カードの見出し（丸いアイコン＋見出し）
   - .form-stack / .form-submit / .field-req / .field-optional: フォームの並びと送信ボタン
   - #cf-status: 送信結果の表示
   入力欄そのもの（.field / .field-label / .input / .field-hint）は css/page.css
   ======================================== */

.card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 白いカードの上では丸いアイコンの地を色にして沈まないようにする */
.card-head .round-icon {
  background: var(--card-icon-bg, var(--c-pink));
}

.form-stack > * + * {
  margin-top: 20px;
}

.field-req {
  color: var(--c-berry-deep);
}

.field-optional {
  font-weight: 400;
  color: var(--c-ink-soft);
}

.form-submit {
  width: 100%;
}

/* 送信中・応募期間外は JS が disabled にする */
.form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.form-submit:disabled:hover {
  background: var(--c-berry);
}

.input:disabled {
  background: var(--c-cream-deep);
  color: var(--c-ink-soft);
  cursor: not-allowed;
}

/* 送信結果の表示。js/contact-form.js は className を丸ごと書き換える
   （エラーは text-primary、完了は text-secondary、送信中・期間外はそれ以外）ので、id で当てる。
   display は触らない（最初は hidden クラスで隠れている） */
#cf-status {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--c-cream-deep);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--c-ink);
}

#cf-status.text-primary {
  background: var(--c-pink);
  color: var(--c-pink-deep);
}

#cf-status.text-secondary {
  background: var(--c-mint);
  color: var(--c-mint-deep);
}