/*
 * フォーム（お問い合わせ・中途採用の応募の Snow Monkey Forms）：サイトの入力欄とボタンに合わせる。
 * どちらのページも template-parts/form-layout.php の .contact-form の中にフォームを置く。
 */
.contact-form .smf-progress-tracker {
  margin-bottom: 2.5rem;
}

.contact-form .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
.contact-form [aria-current="true"] .smf-progress-tracker__item__number {
  background: var(--color-navy-900);
}

.contact-form .smf-item {
  border-top: 1px solid var(--color-line);
  padding-block: 1.5rem;
}

.contact-form .smf-item:last-of-type {
  border-bottom: 1px solid var(--color-line);
}

.contact-form .smf-item__label {
  margin-bottom: 0.75rem;
  color: var(--color-navy-900);
  font-size: 0.875rem;
  font-weight: 700;
}

/* 必須の札：項目名の最後の「（必須）」を置き換えたもの（inc/blocks.php） */
.contact-form .rcs-required {
  display: inline-block;
  margin-left: 0.625rem;
  border-radius: var(--radius-round);
  background: var(--color-error);
  padding: 0.0625rem 0.625rem;
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  vertical-align: 0.05em;
}

.contact-form .smf-text-control,
.contact-form .smf-select-control,
.contact-form .smf-textarea-control {
  display: block;
  width: 100%;
}

/* セレクターに .smf-item を入れて、プラグイン独自の入力欄のスタイルより優先させる */
.contact-form .smf-item .smf-text-control__control,
.contact-form .smf-item .smf-select-control__control,
.contact-form .smf-item .smf-textarea-control__control {
  width: 100%;
  box-shadow: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: var(--color-white);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* 生年月日（応募フォーム）：年・月・日の選択欄を横に並べる。名前が birth- で始まる欄 */
.contact-form .smf-placeholder[data-name^="birth-"] {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
}

.contact-form .smf-placeholder[data-name^="birth-"] .smf-select-control,
.contact-form .smf-item .smf-placeholder[data-name^="birth-"] .smf-select-control__control {
  width: auto;
}

.contact-form .smf-item .smf-text-control__control:focus,
.contact-form .smf-item .smf-select-control__control:focus,
.contact-form .smf-item .smf-textarea-control__control:focus {
  border-color: var(--color-accent-600);
  outline: 2px solid var(--color-accent-50);
}

.contact-form .smf-control-description {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.75rem;
}

.contact-form .smf-error-messages {
  margin-top: 0.5rem;
  color: var(--color-error);
  font-size: 0.875rem;
  font-weight: 700;
}

.contact-form .smf-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.contact-form .smf-button-control__control {
  border: 1px solid var(--color-navy-900);
  border-radius: var(--radius-round);
  background: var(--color-navy-900);
  padding: 0.875rem 2.5rem;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background-color 0.3s;
}

.contact-form .smf-button-control__control:hover {
  border-color: var(--color-yellow-soft);
  background: var(--color-yellow-soft);
  color: var(--color-navy-900);
}

/* "修正する"：data-action は Snow Monkey Forms 3.x ではボタンに、新しい版ではその外側の要素に付く */
.contact-form [data-action="back"] .smf-button-control__control,
.contact-form .smf-button-control__control[data-action="back"] {
  background: var(--color-white);
  color: var(--color-navy-900);
}

.contact-form [data-action="back"] .smf-button-control__control:hover,
.contact-form .smf-button-control__control[data-action="back"]:hover {
  background: var(--color-accent-50);
}