/**
 * CF7 補完スタイル
 *
 * CF7 のフォームタブは sakura-theme/cf7-templates/ の
 * newgraduate-form.txt / career-form.txt を貼り付けてください。
 * それにより recruit-detail.css の .form-group/.form-label/.form-input 等が直接適用されます。
 * このファイルは CF7 固有ラッパー要素のリセット・補完のみ行います。
 */

/* ---- CF7 ラッパー -------------------------------------------- */

/* .wpcf7-form-control-wrap は block にして幅 100% を確保 */
.page-recruit-detail .entry-form--cf7-themed .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7 はデフォルトで <p> で各フィールドを囲む場合がある。
   テンプレートで <div class="form-group"> を使えば不要だが念のため残す */
.page-recruit-detail .entry-form--cf7-themed .wpcf7-form > p {
  margin: 0 0 24px;
}
.page-recruit-detail .entry-form--cf7-themed .wpcf7-form > p:last-of-type {
  margin-bottom: 0;
}

/* ---- 入力要素 --- CF7 固有クラスに recruit-detail.css と同値を当てる ---- */

.page-recruit-detail .entry-form--cf7-themed input.wpcf7-text,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-tel,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-email,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-url,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-number,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-date {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #bcd8f5;
  border-radius: 6px;
  font-family: var(--font, 'Noto Sans JP', sans-serif);
  background: #eff5ff;
  box-sizing: border-box;
  color: #333;
}

.page-recruit-detail .entry-form--cf7-themed input.wpcf7-text::placeholder,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-tel::placeholder,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-email::placeholder,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-url::placeholder {
  color: #90a4ae;
}

.page-recruit-detail .entry-form--cf7-themed input.wpcf7-text:focus,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-tel:focus,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-email:focus,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-url:focus,
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-date:focus {
  outline: none;
  border-color: var(--color-primary, #1976d2);
  background-color: #fff;
}

/* select */
.page-recruit-detail .entry-form--cf7-themed select.wpcf7-select {
  width: 100%;
  max-width: 100%;
  padding: 12px 36px 12px 16px;
  font-size: 16px;
  border: 1px solid #bcd8f5;
  border-radius: 6px;
  font-family: var(--font, 'Noto Sans JP', sans-serif);
  background: #eff5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  color: #333;
}

.page-recruit-detail .entry-form--cf7-themed select.wpcf7-select:focus {
  outline: none;
  border-color: var(--color-primary, #1976d2);
  background-color: #fff;
}

/* textarea */
.page-recruit-detail .entry-form--cf7-themed textarea.wpcf7-textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #bcd8f5;
  border-radius: 6px;
  font-family: var(--font, 'Noto Sans JP', sans-serif);
  background: #eff5ff;
  min-height: 120px;
  resize: vertical;
  box-sizing: border-box;
  color: #333;
}

.page-recruit-detail .entry-form--cf7-themed textarea.wpcf7-textarea::placeholder {
  color: #90a4ae;
}

.page-recruit-detail .entry-form--cf7-themed textarea.wpcf7-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #1976d2);
  background-color: #fff;
}

/* ---- 生年月日 3列横並び ----- */

.page-recruit-detail .form-date-row__inputs {
  display: flex;
  gap: 12px;
}

/* CF7 は select を .wpcf7-form-control-wrap で囲む */
.page-recruit-detail .form-date-row__inputs .wpcf7-form-control-wrap {
  flex: 1;
  min-width: 0;
}

.page-recruit-detail .form-date-row__inputs select.wpcf7-select {
  width: 100%;
}

/* ---- ファイル ---- */

/* CF7 [file] は native <input type="file"> を出力 */
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-file {
  width: 100%;
  max-width: 100%;
  padding: 8px 0;
  font-size: 15px;
  box-sizing: border-box;
  border: none;
  background: transparent;
}

.page-recruit-detail .entry-form--cf7-themed input.wpcf7-file::file-selector-button {
  margin-right: 12px;
  padding: 10px 24px;
  font-size: 16px;
  font-family: var(--font, 'Noto Sans JP', sans-serif);
  color: #555;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
}

.page-recruit-detail .entry-form--cf7-themed input.wpcf7-file:hover::file-selector-button {
  background: #eee;
  border-color: #ccc;
}

/* ---- 同意チェックボックス (acceptance) ---- */
/*
 * CF7 [acceptance* privacy]...[/acceptance] の出力:
 *   <span class="wpcf7-form-control wpcf7-acceptance">
 *     <span class="wpcf7-list-item">
 *       <label>
 *         <input type="checkbox">
 *         <span class="wpcf7-list-item-label">...</span>
 *       </label>
 *     </span>
 *   </span>
 */
.page-recruit-detail .form-group--checkbox .wpcf7-acceptance {
  display: block;
  margin: 0;
}

.page-recruit-detail .form-group--checkbox .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.page-recruit-detail .form-group--checkbox .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
}

.page-recruit-detail .form-group--checkbox .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}

/* ---- required-pill / optional-pill ---- */
/* recruit-detail.css と同一値。フォーム内 span にも確実に適用 */
.page-recruit-detail .entry-form--cf7-themed .required-pill {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  background: #fff;
  color: #1976d2;
  border: 1px solid #1976d2;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.page-recruit-detail-career .entry-form--cf7-themed .optional-pill {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  background: #fff;
  color: #666;
  border: 1px solid #999;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ---- 送信ボタン ---- */
/*
 * CF7 [submit class:btn-submit "..."] は <input type="submit" class="btn-submit"> を出力。
 * recruit-detail.css の .btn-submit は button 想定なので input にも補完。
 */
.page-recruit-detail .entry-form--cf7-themed input[type="submit"].btn-submit {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 18px 48px;
  background: var(--gradient-blue, linear-gradient(180deg, #0d47a1 0%, #42a5f5 100%));
  color: var(--color-white, #fff);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: opacity 0.3s, transform 0.2s;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.3);
  box-sizing: border-box;
  font-family: var(--font, 'Noto Sans JP', sans-serif);
}

.page-recruit-detail .entry-form--cf7-themed input[type="submit"].btn-submit:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* CF7 のデフォルト submit クラスでもフォールバック */
.page-recruit-detail .entry-form--cf7-themed input.wpcf7-submit {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 18px 48px;
  background: var(--gradient-blue, linear-gradient(180deg, #0d47a1 0%, #42a5f5 100%));
  color: var(--color-white, #fff);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: opacity 0.3s, transform 0.2s;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.3);
  box-sizing: border-box;
  font-family: var(--font, 'Noto Sans JP', sans-serif);
}

.page-recruit-detail .entry-form--cf7-themed input.wpcf7-submit:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* .form-submit の中央寄せ */
.page-recruit-detail .entry-form--cf7-themed .form-submit {
  margin-top: 36px;
  text-align: center;
}

/* ---- バリデーション ---- */

.page-recruit-detail .entry-form--cf7-themed .wpcf7-not-valid-tip {
  display: block;
  font-size: 14px;
  margin-top: 6px;
  color: #e53935;
}

.page-recruit-detail .entry-form--cf7-themed .wpcf7-not-valid {
  border-color: #e53935 !important;
  background-color: #ffebee !important;
}

/* ---- レスポンス出力 ---- */

.page-recruit-detail .entry-form--cf7-themed .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* ---- スピナー ---- */

.page-recruit-detail .entry-form--cf7-themed .wpcf7-spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* ---- プライバシーリンク ---- */

.page-recruit-detail .entry-form--cf7-themed .form-privacy-link {
  color: var(--color-primary, #1976d2);
  text-decoration: underline;
}

.page-recruit-detail .entry-form--cf7-themed .form-privacy-link:hover {
  opacity: 0.85;
}