/* ============================================
   s-price-nav-01.css
   jj-price-manager プラグインのデザイン上書き
   構造CSSはプラグイン内。このファイルはデザインのみ
   ============================================ */

/* ==========================================================================
   CSS 変数ブリッジ（プラグイン → テーマ）
   ========================================================================== */

:root {
  --jjpm-primary: var(--color-primary);
  --jjpm-primary-light: var(--color-primary-light);
  --jjpm-bg: var(--color-white);
  --jjpm-bg-alt: var(--color-bg);
  --jjpm-text: var(--color-text);
  --jjpm-text-light: var(--color-text-light);
  --jjpm-border: var(--color-border-light);
  --jjpm-highlight: #FDF5F5;
}

/* ==========================================================================
   検索ボックス デザイン
   ========================================================================== */

.jjpm-search {
  position: sticky;
  top: var(--header-height, 70px);
  z-index: 90;
  margin-bottom: var(--space-xl);
  padding: var(--space-sm);
}

/* ログイン時は管理バー分追加 */
.logged-in .jjpm-search {
  top: calc(var(--header-height, 70px) + 32px);
}

@container (max-width: 599px) {
  .logged-in .jjpm-search {
    top: calc(var(--header-height, 70px) );
  }
}

/* モーダル内: ヘッダー分のオフセット不要 */
.jjpm-modal__body .jjpm-search {
  top: 0;
  z-index: 50;
  margin-bottom: var(--space-md);
  padding: var(--space-xs) 0;
}

.logged-in .jjpm-modal__body .jjpm-search {
  top: 0;
}

.jjpm-search__input-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-pill) !important;
  padding: var(--space-3-xs) var(--space-lg) !important;
  gap: var(--space-xs) !important;
  box-shadow: var(--shadow-xs) !important;
  margin: 0 !important;
  height: 4rem !important;
}

.jjpm-search__icon {
  font-size: var(--font-size-lg) !important;
  color: var(--color-primary) !important;
}

.jjpm-search__input-wrap:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-focus) !important;
}

.jjpm-search__icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.jjpm-search__input,
.jjpm-search .jjpm-search__input,
input.jjpm-search__input {
  flex: 1 !important;
  font-size: var(--font-size-xs) !important;
  color: var(--color-text) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: var(--space-xs) 0 !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
  transition: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.jjpm-search__input::placeholder {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.jjpm-search__clear {
  background: var(--color-bg);
}

.jjpm-search__clear:hover {
  background: var(--color-border-light);
}

/* 検索結果ドロップダウン — absolute で下の要素を押さない */
.jjpm-search__results {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  background: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-md);
  box-shadow: none !important;
  max-height: 40rem;
  overflow-y: auto;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 結果がある時だけスタイル表示 */
.jjpm-search__results[style*="display: block"],
.jjpm-search__results[style*="display:block"] {
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-md) !important;
}


.jjpm-search__result-cat {
  color: var(--color-primary);
  background: var(--color-primary-lightest);
  padding: var(--space-4-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-3-xs);
}

.jjpm-search__result-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.jjpm-search__result-item .material-icons {
  color: var(--color-primary);
}

.jjpm-search__empty {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   ナビパネル デザイン
   ========================================================================== */

.jjpm-nav {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2-xl) var(--space-3-xl);
}

.jjpm-nav__cat-link {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary-light);
  padding: var(--space-xs) 0;
  margin-top: var(--space-xl);
}

.jjpm-nav__category:first-child .jjpm-nav__cat-link {
  margin-top: 0;
}

.jjpm-nav__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  padding: var(--space-4-xs) var(--space-xs);
}

.jjpm-nav__item::before {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.jjpm-nav__item:hover {
  color: var(--color-primary);
}

/* タブボタン */
.jjpm-nav__tab-btn {
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-3-xs);
}

.jjpm-nav__tab-btn:hover {
  background: var(--color-primary-light);
}

/* ==========================================================================
   レスポンシブ デザイン
   ========================================================================== */

@container (max-width: 599px) {
  .jjpm-nav {
    padding: var(--space-xl) var(--space-2-xl);
  }

  .jjpm-nav__cat-link {
    font-size: var(--font-size-sm);
  }

  .jjpm-nav__item {
    font-size: var(--font-size-3-xs);
  }

  .jjpm-nav__btn {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
  }

  .jjpm-nav__btn:hover {
    background: var(--color-primary-light);
  }

  .jjpm-nav__category.is-open .jjpm-nav__btn--toggle {
    background: var(--color-primary-light);
  }
}

/* ==========================================================================
   旧 s-price-search / s-price-nav 互換（移行期間中）
   ========================================================================== */

.s-price-search {
  position: sticky;
  top: var(--header-height, 70px);
  z-index: 90;
  margin-bottom: var(--space-xl);
}

.s-price-search__input-wrap {
  display: flex;
  align-items: center;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border-light, #e0e0e0);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-xl);
  gap: var(--space-xs);
  transition: border-color var(--transition-fast);
}

.s-price-search__input-wrap:focus-within {
  border-color: var(--color-primary);
}

.s-price-search__icon {
  color: var(--color-text-light);
  font-size: var(--font-size-2-xl);
  flex-shrink: 0;
}

.s-price-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-text);
  background: transparent;
  padding: var(--space-3-xs) 0;
}

.s-price-search__input::placeholder {
  color: var(--color-text-light);
}

.s-price-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  background: var(--color-bg, #f5f5f5);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-light);
  flex-shrink: 0;
  padding: 0;
}

.s-price-search__clear .material-icons { font-size: var(--font-size-lg); }
.s-price-search__clear:hover { background: var(--color-border-light); }

/* 検索結果ドロップダウン */
.s-price-search__results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border-light, #e0e0e0);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 30rem;
  overflow-y: auto;
  list-style: none;
  margin: var(--space-3-xs) 0 0;
  padding: var(--space-3-xs) 0;
}

.s-price-search__result-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xl);
  cursor: pointer;
  transition: background 0.15s;
}

.s-price-search__result-item:hover { background: var(--color-bg, #f5f5f5); }

.s-price-search__result-cat {
  font-size: var(--font-size-3-xs);
  color: var(--color-primary);
  background: var(--color-primary-lightest);
  padding: var(--space-4-xs) var(--space-xs);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.s-price-search__result-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.s-price-search__empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   ナビパネル
   ========================================================================== */

.s-price-nav {
  margin: var(--space-3-xl) 0 var(--space-5-xl);
  padding: var(--space-2-xl) var(--space-3-xl);
  background: var(--color-bg, #f5f5f5);
  border-radius: var(--radius-md);
}

/* カテゴリ見出し（1行） */
.s-price-nav__cat-link {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid var(--color-primary-light);
  margin-top: var(--space-xl);
  transition: opacity var(--transition-normal, 0.3s);
}

.s-price-nav__category:first-child .s-price-nav__cat-link {
  margin-top: 0;
}

.s-price-nav__cat-link:hover {
  opacity: 0.7;
}

/* 子項目：flex 4列折り返し */
.s-price-nav__list {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4-xs) 0;
}

.s-price-nav__list li {
  width: 25%;
}

.s-price-nav__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  text-decoration: none;
  padding: var(--space-4-xs) var(--space-xs);
  transition: color var(--transition-normal, 0.3s);
  line-height: var(--line-height-tight);
}

.s-price-nav__item::before {
  content: "›";
  color: var(--color-primary);
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.s-price-nav__item:hover {
  color: var(--color-primary);
}

.s-price-nav__item:hover::before {
  color: var(--color-primary);
}

/* PC: アクションボタン非表示 */
.s-price-nav__cat-actions {
  display: none;
}

/* タブボタン（お得プラン等） */
.s-price-nav__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3-xs);
  margin-top: var(--space-4-xs);
  padding-left: var(--space-lg);
}

.s-price-nav__tab-btn {
  display: inline-block;
  font-size: var(--font-size-3-xs);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-4-xs) var(--space-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  line-height: var(--line-height-compact, 1.2);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.s-price-nav__tab-btn:hover {
  background: var(--color-primary-light);
}

/* レスポンシブ */
@container (max-width: 599px) {
  .s-price-nav {
    padding: var(--space-xl) var(--space-2-xl);
  }

  /* SP: 2列 */
  .s-price-nav__list li {
    width: 50%;
  }

  /* SP: h2 カテゴリ行 */
  .s-price-nav__cat-link {
    font-size: var(--font-size-sm);
  }

  /* SP: カテゴリ行をflex化（テキスト + ボタン群） */
  .s-price-nav__category {
    position: relative;
  }

  /* SP: アイコンボタン群を右端に配置 */
  .s-price-nav__cat-actions {
    display: flex;
    position: absolute;
    top: var(--space-xs);
    right: 0;
    gap: var(--space-3-xs);
  }

  .s-price-nav__cat-actions .s-price-nav__btn {
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light, #e0e0e0);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .s-price-nav__cat-actions .s-price-nav__btn .material-icons {
    font-size: var(--font-size-xl);
  }

  .s-price-nav__cat-actions .s-price-nav__btn:hover {
    background: var(--color-primary-light);
  }

  /* 開閉ボタンの回転 */
  .s-price-nav__category.is-open .s-price-nav__btn--toggle {
    transform: rotate(180deg);
    background: var(--color-primary-light);
  }

  /* SP: リストを閉じた状態 */
  .s-price-nav__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    margin-top: 0;
  }

  .s-price-nav__category.is-open .s-price-nav__list {
    max-height: 50rem;
    margin-top: var(--space-xs);
  }

  .s-price-nav__item {
    font-size: var(--font-size-3-xs);
  }

  .s-price-nav__tabs {
    padding-left: var(--space-xl);
  }
}

/* コンテナが設定されていない旧ショートコード出力のSPフォールバック */
@media (max-width: 767px) {
  .s-price-nav__list li {
    width: 50%;
  }
}