/* ============================================================
   VK Filter Search Pro カスタムスタイル  v3
   BANK ORANG（indonesia-hr.jp）
   ------------------------------------------------------------
   2026/09 Arkhe CSSエディター「共通」から子テーマ /css/vkfs.css へ移設
   （内容の変更なし）
   ------------------------------------------------------------
   v3 の変更点
   ・カラム制御をプラグイン設定に委ね、CSSでの上書きを削除
   ・ピルの幅強制を削除（自然な横並びに）
   ------------------------------------------------------------
   【前提となるプラグイン設定】
   　ブロックの幅　　　　　　→ 1カラム
   　チェックボックスの幅　　→ 指定なし
   ------------------------------------------------------------
   【前提となる追加CSSクラス】
   　職種（特定技能資格）　　→ is-primary
   　日本語能力資格　　　　　→ is-primary
   　分類（在留資格）　　　　→ is-detail
   　学校　　　　　　　　　　→ is-detail
   　自動車免許　　　　　　　→ is-detail
   ============================================================ */

.vkfs,
.wp-block-vk-filter-search-pro-filter-search-pro{
  --vkfs-accent:#B4264D;
  --vkfs-accent-dark:#8E1D3D;
  --vkfs-ink:#1A1A1A;
  --vkfs-ink-soft:#5B5B5E;
  --vkfs-line:#E3E3E5;
  --vkfs-fill:#F4F4F5;
  --vkfs-white:#FFFFFF;
  --vkfs-radius:2px;
}

/* ------------------------------------------------------------
   1. フォーム全体
   ------------------------------------------------------------ */
.wp-block-vk-filter-search-pro-filter-search-pro{
  background:rgba(255,255,255,.96);
  border:1px solid var(--vkfs-line);
  border-radius:var(--vkfs-radius);
  padding:36px 40px;
  box-shadow:0 12px 40px rgba(0,0,0,.06);
}

@media (max-width:781px){
  .wp-block-vk-filter-search-pro-filter-search-pro{
    padding:24px 20px;
  }
}

/* ------------------------------------------------------------
   2. 各検索ブロックの間隔
   ------------------------------------------------------------ */
.vkfs .is-primary,
.vkfs .is-detail{
  margin-bottom:26px;
}

.vkfs .is-primary:last-of-type{
  margin-bottom:8px;
}

/* ------------------------------------------------------------
   3. ラベル
   ------------------------------------------------------------ */
.vkfs .vkfs__label-name{
  color:var(--vkfs-ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:10px;
  line-height:1.6;
}

/* サブキャッチ（職種<span>Job type</span> のように入力した場合） */
.vkfs .vkfs__label-name span{
  display:block;
  font-family:'Space Grotesk',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--vkfs-accent);
  margin-top:2px;
}

/* ------------------------------------------------------------
   4. チェックボックス／ラジオをピル型に
   ------------------------------------------------------------
   幅の制御はプラグイン側（チェックボックスの幅＝指定なし）に
   任せ、ここでは見た目のみを指定しています。
   ------------------------------------------------------------ */
.vkfs label:has(> input[type="checkbox"]),
.vkfs label:has(> input[type="radio"]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid var(--vkfs-line);
  border-radius:100px;
  background:var(--vkfs-white);
  color:var(--vkfs-ink-soft);
  font-size:13px;
  line-height:1.5;
  padding:9px 20px;
  margin:0 8px 8px 0;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}

.vkfs label:has(> input[type="checkbox"]):hover,
.vkfs label:has(> input[type="radio"]):hover{
  border-color:var(--vkfs-accent);
  color:var(--vkfs-accent);
}

/* 選択中 */
.vkfs label:has(> input[type="checkbox"]:checked),
.vkfs label:has(> input[type="radio"]:checked){
  background:var(--vkfs-accent);
  border-color:var(--vkfs-accent);
  color:var(--vkfs-white);
  font-weight:700;
}

/* ネイティブの入力欄を視覚的に隠す（機能は残す） */
.vkfs label > input[type="checkbox"],
.vkfs label > input[type="radio"]{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}

/* キーボード操作時のフォーカス表示 */
.vkfs label:has(> input[type="checkbox"]:focus-visible),
.vkfs label:has(> input[type="radio"]:focus-visible){
  outline:2px solid var(--vkfs-accent);
  outline-offset:2px;
}

/* ------------------------------------------------------------
   5. プルダウン・テキスト入力
   ------------------------------------------------------------ */
.vkfs select,
.vkfs input[type="text"]{
  height:52px;
  border:1px solid var(--vkfs-line);
  border-radius:var(--vkfs-radius);
  background-color:var(--vkfs-white);
  color:var(--vkfs-ink);
  font-size:14px;
  padding:0 14px;
  transition:border-color .2s ease;
}

.vkfs select:focus,
.vkfs input[type="text"]:focus{
  border-color:var(--vkfs-accent);
  outline:2px solid rgba(180,38,77,.18);
  outline-offset:1px;
}

/* ------------------------------------------------------------
   6. 検索ボタン
   ------------------------------------------------------------
   バージョンによってマークアップが異なるため、
   考えられるパターンをまとめて指定しています。
   ------------------------------------------------------------ */
.wp-block-vk-filter-search-pro-filter-search-pro button[type="submit"],
.wp-block-vk-filter-search-pro-filter-search-pro input[type="submit"],
.vkfs button[type="submit"],
.vkfs input[type="submit"],
.vkfs .btn[type="submit"],
.vkfs__submit,
.vkfs__submit-btn{
  display:block !important;
  width:100% !important;
  max-width:340px !important;
  margin:32px auto 0 !important;
  background:var(--vkfs-accent) !important;
  background-color:var(--vkfs-accent) !important;
  background-image:none !important;
  border:1px solid var(--vkfs-accent) !important;
  border-radius:100px !important;
  color:var(--vkfs-white) !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  line-height:1.5 !important;
  padding:16px 24px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}

.wp-block-vk-filter-search-pro-filter-search-pro button[type="submit"]:hover,
.wp-block-vk-filter-search-pro-filter-search-pro input[type="submit"]:hover,
.vkfs button[type="submit"]:hover,
.vkfs input[type="submit"]:hover,
.vkfs .btn[type="submit"]:hover,
.vkfs__submit:hover,
.vkfs__submit-btn:hover{
  background:var(--vkfs-accent-dark) !important;
  background-color:var(--vkfs-accent-dark) !important;
  border-color:var(--vkfs-accent-dark) !important;
  color:var(--vkfs-white) !important;
}

.wp-block-vk-filter-search-pro-filter-search-pro button[type="submit"]:focus-visible,
.vkfs button[type="submit"]:focus-visible,
.vkfs input[type="submit"]:focus-visible{
  outline:2px solid var(--vkfs-accent) !important;
  outline-offset:3px;
}

/* ------------------------------------------------------------
   7. 詳細条件アコーディオン
   ------------------------------------------------------------ */
.vkfs-detail{
  width:100%;
  border-top:1px solid var(--vkfs-line);
  margin-top:8px;
  padding-top:4px;
  clear:both;
}

.vkfs-detail__toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 0;
  font-size:13px;
  font-weight:700;
  color:var(--vkfs-ink-soft);
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:color .15s ease;
}

.vkfs-detail__toggle::-webkit-details-marker{display:none;}
.vkfs-detail__toggle::marker{content:"";}

.vkfs-detail__toggle:hover{color:var(--vkfs-accent);}

.vkfs-detail__toggle:focus-visible{
  outline:2px solid var(--vkfs-accent);
  outline-offset:2px;
}

/* 開閉アイコン（＋ → × に回転） */
.vkfs-detail__toggle::before{
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  mask:no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  transition:transform .2s ease;
}

.vkfs-detail[open] .vkfs-detail__toggle::before{
  transform:rotate(45deg);
}

.vkfs-detail__body{
  padding:4px 0 8px;
}

.vkfs-detail__body .is-detail:last-child{
  margin-bottom:0;
}

/* 選択中の件数バッジ */
.vkfs-detail__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 7px;
  border-radius:100px;
  background:var(--vkfs-accent);
  color:var(--vkfs-white);
  font-family:'Space Grotesk',monospace;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.vkfs-detail__count[hidden]{display:none;}

/* ------------------------------------------------------------
   8. :has() 非対応ブラウザ向けフォールバック
   ------------------------------------------------------------ */
@supports not (selector(:has(*))){
  .vkfs label > input[type="checkbox"],
  .vkfs label > input[type="radio"]{
    position:static;
    width:auto;
    height:auto;
    opacity:1;
    pointer-events:auto;
  }
}