/*
 * Snow Monkey Forms カスタムスタイル
 * わんこフェスタテーマ用
 * assets/css/snow-monkey-forms.css
 *
 * functions.php の wp_enqueue_style で読み込んでください：
 * wp_enqueue_style( 'smf-custom', get_template_directory_uri() . '/assets/css/snow-monkey-forms.css', [], '1.0.0' );
 */

/* ===========================
   フォーム全体
=========================== */
.snow-monkey-form {
  max-width: 640px;
  margin: 0 auto;
}

/* ===========================
   ラベル
=========================== */
.smf-item__label {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #333;
}

/* 必須バッジ */
.smf-item__label [data-validations~="required"] ~ .smf-item__label-required,
.smf-item__label-required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #e05c5c;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 3px;
  vertical-align: middle;
}

/* ===========================
   入力フィールド
=========================== */
.smf-text-control__control,
.smf-textarea-control__control,
.smf-select-control__control {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1rem;
  color: #333;
  background: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.smf-text-control__control:focus,
.smf-textarea-control__control:focus,
.smf-select-control__control:focus {
  outline: none;
  border-color: #f4a460;
}

.smf-textarea-control__control {
  min-height: 160px;
  resize: vertical;
}

/* ===========================
   送信・戻るボタン
=========================== */
.smf-form__submit .smf-button-control,
.smf-form__back .smf-button-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  border: none;
  border-radius: 999px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.smf-form__submit .smf-button-control {
  background: #f4a460;
  color: #fff;
}

.smf-form__back .smf-button-control {
  background: #eee;
  color: #666;
}

.smf-form__submit .smf-button-control:hover,
.smf-form__back .smf-button-control:hover {
  opacity: 0.8;
}

/* ===========================
   確認画面・完了画面
=========================== */
/* 確認画面の入力値 */
[data-screen="confirm"] .smf-item__body {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  color: #333;
}

/* 完了メッセージ */
[data-screen="complete"] .smf-done {
  text-align: center;
  padding: 40px 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #555;
  line-height: 1.8;
}

/* ===========================
   プログレストラッカー
=========================== */
.smf-progress-tracker {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  counter-reset: step;
}

.smf-progress-tracker__item {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.8rem;
  color: #aaa;
}

.smf-progress-tracker__item[aria-current="step"] {
  color: #f4a460;
  font-weight: 700;
}

/* ===========================
   エラーメッセージ
=========================== */
.smf-error-messages,
.smf-item__error {
  color: #e05c5c;
  font-size: 0.85rem;
  margin-top: 4px;
}