/**
 * クリニック検索フォーム - 統合モーダル版
 * Unified Modal for Clinic Search
 *
 * モーダル内にタブを配置したデザイン
 * - 地域/悩み・目的/施術のタブ切り替え
 * - モーダル下部に検索結果数と実行ボタン
 * - バッジにカテゴリーラベル表示
 */

/* ========================================
   統合バッジエリア
======================================== */
:where(.c-form-002__unified-badge-area) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

:where(.c-form-002__badge-container[data-filter-type="unified"]) {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 8px;
  background: var(--wp--preset--color--gray-lightest);
  border-radius: var(--wp--custom--border--radius--md);
}

:where(.c-form-002__unified-select-btn) {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--tertiary);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: var(--wp--custom--border--radius--md);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--wp--custom--transition--normal);
}

:where(.c-form-002__unified-select-btn:hover) {
  opacity: 0.9;
}

/* カテゴリーラベル付きバッジ */
:where(.c-form-002__badge-item) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--tertiary-light);
  border-radius: var(--wp--custom--border--radius--sm);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4;
  cursor: pointer; /* バッジ全体をクリック可能に */
  transition: opacity var(--wp--custom--transition--duration--fast)
    var(--wp--custom--transition--timing--ease);
}

:where(.c-form-002__badge-item:hover) {
  opacity: 0.8;
}

:where(.c-form-002__badge-category) {
  padding: 2px 6px;
  background: var(--wp--preset--color--tertiary-lightest);
  color: var(--wp--preset--color--tertiary-dark);
  border-radius: var(--wp--custom--border--radius--xs);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
}

/* タクソノミー別のカテゴリー色 */
:where(
    .c-form-002__badge-item[data-taxonomy="tax-area"]
      .c-form-002__badge-category
  ) {
  background: var(--wp--preset--color--tertiary-lightest);
  color: var(--wp--preset--color--tertiary-dark);
}

:where(
    .c-form-002__badge-item[data-taxonomy="tax-nayami"]
      .c-form-002__badge-category
  ) {
  background: var(--wp--preset--color--primary-lightest);
  color: var(--wp--preset--color--primary-dark);
}

:where(
    .c-form-002__badge-item[data-taxonomy="r-treatment"]
      .c-form-002__badge-category
  ) {
  background: var(--wp--preset--color--success-lightest);
  color: var(--wp--preset--color--success-dark);
}

:where(.c-form-002__badge-remove) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--wp--preset--color--gray-light);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--wp--custom--transition--normal);
}

:where(.c-form-002__badge-remove:hover) {
  opacity: 0.8;
}

/* ========================================
   検索実行セクション（モーダル外）
======================================== */
:where(.c-form-002__search-action) {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  background: var(--wp--preset--color--gray-lightest);
  border-radius: var(--wp--custom--border--radius--md);
}

:where(.c-form-002__result-count) {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--wp--preset--font-size--md);
}

:where(.c-form-002__result-count-label) {
  color: var(--wp--preset--color--gray-dark);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--sm);
}

:where(.c-form-002__result-count-number) {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--tertiary-dark);
}

:where(.c-form-002__result-count-unit) {
  color: var(--wp--preset--color--gray);
  font-size: var(--wp--preset--font-size--sm);
}

:where(.c-form-002__submit-btn) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--wp--preset--color--tertiary);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: var(--wp--custom--border--radius--md);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--wp--custom--transition--normal);
  white-space: nowrap;
}

:where(.c-form-002__submit-btn:hover) {
  opacity: 0.9;
}

:where(.c-form-002__submit-btn .material-symbols-outlined) {
  font-size: 20px;
}

/* ========================================
   統合モーダル構造
======================================== */
:where(.c-form-002__modal--unified) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--wp--custom--z-index--modal);
  display: none;
}

:where(.c-form-002__modal--unified.is-open) {
  display: block;
}

:where(.c-form-002__modal--unified .c-form-002__modal-overlay) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--wp--custom--overlay--dark);
}

:where(.c-form-002__modal--unified .c-form-002__modal-content) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border--radius--lg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ========================================
   モーダルヘッダー
======================================== */
:where(.c-form-002__modal--unified .c-form-002__modal-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--gray-lighter);
}

:where(.c-form-002__modal--unified .c-form-002__modal-title) {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 700;
  margin: 0;
}

:where(.c-form-002__modal--unified .c-form-002__modal-close) {
  width: 32px;
  height: 32px;
  background: var(--wp--preset--color--gray-lightest);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--wp--custom--transition--normal);
}

:where(.c-form-002__modal--unified .c-form-002__modal-close:hover) {
  opacity: 0.8;
}

/* ========================================
   モーダルタブナビゲーション
======================================== */
:where(.c-form-002__modal-tabs) {
  display: flex;
  border-bottom: 2px solid var(--wp--preset--color--gray-lighter);
  padding: 0 24px;
}

:where(.c-form-002__modal-tab) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--wp--preset--color--gray);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--wp--custom--transition--normal);
  position: relative;
  top: 2px;
}

:where(.c-form-002__modal-tab .material-symbols-outlined) {
  font-size: 20px;
}

:where(.c-form-002__modal-tab:hover) {
  color: var(--wp--preset--color--tertiary-dark);
  opacity: 0.9;
}

:where(.c-form-002__modal-tab.is-active) {
  color: var(--wp--preset--color--tertiary-dark);
  border-bottom-color: var(--wp--preset--color--tertiary);
}

/* ========================================
   モーダルボディ（タブパネル）
======================================== */
:where(.c-form-002__modal--unified .c-form-002__modal-body) {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

:where(.c-form-002__modal-panel) {
  display: none;
}

:where(.c-form-002__modal-panel.is-active) {
  display: block;
}

/* ========================================
   モーダルフッター
======================================== */
:where(.c-form-002__modal-footer) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid var(--wp--preset--color--gray-lighter);
  background: var(--wp--preset--color--gray-lightest);
}

:where(.c-form-002__modal-count) {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--wp--preset--font-size--md);
}

:where(.c-form-002__modal-count-label) {
  color: var(--wp--preset--color--gray-dark);
  font-weight: 500;
}

:where(.c-form-002__modal-count-number) {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--tertiary-dark);
}

:where(.c-form-002__modal-count-unit) {
  color: var(--wp--preset--color--gray);
  font-size: var(--wp--preset--font-size--sm);
}

:where(.c-form-002__modal-submit) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--wp--preset--color--tertiary);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: var(--wp--custom--border--radius--md);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--wp--custom--transition--normal);
}

:where(.c-form-002__modal-submit:hover) {
  opacity: 0.9;
}

:where(.c-form-002__modal-submit .material-symbols-outlined) {
  font-size: 20px;
}

/* ========================================
   地域タブ（2重タブ構造）
======================================== */
:where(.c-form-002__region-tabs) {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--wp--preset--color--gray-lighter);
  padding-bottom: 8px;
}

:where(.c-form-002__region-tab) {
  padding: 8px 16px;
  background: var(--wp--preset--color--gray-lightest);
  border: 1px solid var(--wp--preset--color--gray-lighter);
  border-radius: var(--wp--custom--border--radius--sm);
  color: var(--wp--preset--color--gray-dark);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--wp--custom--transition--normal);
}

:where(.c-form-002__region-tab:hover) {
  opacity: 0.9;
}

:where(.c-form-002__region-tab.is-active) {
  background: var(--wp--preset--color--tertiary);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--tertiary);
}

:where(.c-form-002__region-panels) {
  position: relative;
}

:where(.c-form-002__prefecture-tabs) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

:where(.c-form-002__prefecture-tab) {
  padding: 6px 12px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--gray-light);
  border-radius: var(--wp--custom--border--radius--xs);
  color: var(--wp--preset--color--gray-dark);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--wp--custom--transition--normal);
}

:where(.c-form-002__prefecture-tab:hover) {
  opacity: 0.9;
}

:where(.c-form-002__prefecture-tab.is-active) {
  background: var(--wp--preset--color--tertiary-light);
  color: var(--wp--preset--color--tertiary-dark);
  border-color: var(--wp--preset--color--tertiary);
}

/* ========================================
   選択項目リスト
======================================== */
:where(.c-form-002__selection-group) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.c-form-002__selection-item) {
  padding: 10px 12px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--gray-lighter);
  border-radius: var(--wp--custom--border--radius--sm);
  transition: all var(--wp--custom--transition--duration--fast)
    var(--wp--custom--transition--timing--ease);
  cursor: pointer; /* 全体をクリック可能に */
}

:where(.c-form-002__selection-item:hover) {
  background: var(--wp--preset--color--tertiary-lightest);
  opacity: 0.9;
}

:where(.c-form-002__selection-item label) {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
}

:where(.c-form-002__selection-item input[type="checkbox"]) {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

:where(.c-form-002__selection-label) {
  flex: 1;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--gray-darkest);
}

:where(.c-form-002__option-count) {
  flex-shrink: 0;
  padding: 2px 8px;
  background: var(--wp--preset--color--gray-lightest);
  color: var(--wp--preset--color--gray-dark);
  border-radius: var(--wp--custom--border--radius--xs);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  transition: color var(--wp--custom--transition--duration--fast)
    var(--wp--custom--transition--timing--ease);
}

/* 増える場合: 緑色 */
:where(.c-form-002__option-count--plus) {
  color: var(--wp--preset--color--success-dark);
}

/* 減る場合: 茶色 */
:where(.c-form-002__option-count--minus) {
  color: #8b4513; /* 茶色 */
}

/* 変わらない場合: 通常の文字色 */
:where(.c-form-002__option-count--zero) {
  color: var(--wp--preset--color--gray-dark);
}

:where(.c-form-002__selection-children) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-left: 24px;
}

/* ========================================
   モバイル検索トリガー
======================================== */
:where(#mobile-search-trigger) {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 56px;
  height: 56px;
  background: var(--wp--preset--color--tertiary);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--wp--preset--color--white);
  font-size: 28px;
  cursor: pointer;
  z-index: var(--wp--custom--z-index--floating);
  transition: all var(--wp--custom--transition--normal);
}

:where(#mobile-search-trigger:hover) {
  opacity: 0.9;
  transform: scale(1.05);
}

:where(#mobile-search-trigger .material-symbols-outlined) {
  font-size: 28px;
  line-height: 1;
}

/* モバイルのみ表示 */
@media (max-width: 768px) {
  :where(#mobile-search-trigger) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 768px) {
  :where(.c-form-002__search-action) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  :where(.c-form-002__result-count) {
    justify-content: center;
  }

  :where(.c-form-002__submit-btn) {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  :where(.c-form-002__modal--unified .c-form-002__modal-content) {
    width: 95%;
    max-height: 90vh;
  }

  :where(.c-form-002__modal--unified .c-form-002__modal-header),
  :where(.c-form-002__modal--unified .c-form-002__modal-body),
  :where(.c-form-002__modal-footer) {
    padding: 16px;
  }

  :where(.c-form-002__modal-tabs) {
    padding: 0 16px;
  }

  :where(.c-form-002__modal-tab) {
    gap: 4px;
    padding: 10px 8px;
    font-size: var(--wp--preset--font-size--xs);
  }

  :where(.c-form-002__modal-tab .material-symbols-outlined) {
    font-size: 18px;
  }

  :where(.c-form-002__modal-footer) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.c-form-002__modal-count) {
    justify-content: center;
  }

  :where(.c-form-002__modal-submit) {
    width: 100%;
    justify-content: center;
  }

  :where(.c-form-002__region-tabs) {
    flex-wrap: wrap;
    gap: 6px;
  }

  :where(.c-form-002__region-tab) {
    font-size: var(--wp--preset--font-size--2-xs);
    padding: 6px 10px;
  }
}