/* ===================================================================
   filters_sidebar.css   –  minimal-lux rev. 2025-06-02
   ❶ フィルター／モーダル共通デザイン（Bootstrap 5 依存）
   ❷ シンプル & ラグジュアリーな《ロイヤルブルー》基調
   ❸ スマホ〜タブレット〜PCまで快適スクロール
   =================================================================== */

/* ---------- 0.  カラートークン ---------- */
:root{
  --lux-blue-1:#D6E4FF;
  --lux-blue-2:#4C6EF5;
  --lux-blue-3:#243C75;

  --lux-gray-1:#F8F9FA;
  --lux-gray-2:#E9ECEF;
  --lux-gray-3:#CED4DA;
  --lux-gray-4:#6C757D;
}

/* ─────────────────────────────────────────────
   1. モーダル : 幅 / 余白 / スクロール
   ──────────────────────────────────────────── */
#filterModal.modal      { z-index:1080; }

/* ––– PC (lg≥992px) ––– */
#filterModal .modal-dialog{
  max-width:1200px;
  width:90vw;                 /* 余白 5 %×2 */
  margin:5.2rem auto;         /* ナビバー分下げる */
}

/* ––– スマホ (sm<768px) ––– */
@media (max-width:767.98px){
  #filterModal .modal-dialog{
    width:90vw;               /* 従来どおり 90 % */
    margin:6.5rem auto 0;     /* ヘッダー分オフセット */
  }
}

/* ––– ★ 新規：タブレット (md 768–991.98px) ––– */
@media (min-width:768px) and (max-width:991.98px){
  #filterModal .modal-dialog{
    max-width:90vw;           /* 画面ほぼ全幅に拡大 */
    width:90vw;
    margin:6rem auto 0;       /* やや広めの余白 */
  }
}

/* モーダルボディをスクロール可 */
#filterModal .modal-body{
  max-height:70vh;
  overflow-y:auto;
}

/* ─────────────────────────────────────────────
   2. アコーディオン（フィルター項目）
   ──────────────────────────────────────────── */
.accordion-item{
  background:#fff;
  border:1px solid var(--lux-gray-2);
  border-radius:.6rem;
  overflow:hidden;
  margin-bottom:.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.accordion-button{
  padding:.65rem 1.1rem;
  font-weight:600;
  background:var(--lux-gray-1);
  color:#000;
  transition:background .25s,color .25s;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.accordion-button.collapsed{ color:var(--lux-gray-4); }
.accordion-button:not(.collapsed){ color:#000; }

.filter-badge{
  background:var(--lux-blue-3);
  color:#fff;
  font-size:.75rem;
  min-width:1.5rem;
}

/* ボディ & チェック */
.accordion-body{ padding:.5rem 1rem;background:#fff; }
.form-check-input{
  width:1rem;height:1rem;border:1px solid var(--lux-gray-3);
  cursor:pointer;
}
.form-check-input:checked{
  background:var(--lux-blue-3);border-color:var(--lux-blue-3);
}

/* ––– ★ 新規：タブレットでは 2 カラムで詰める ––– */
@media (min-width:768px) and (max-width:991.98px){
  .accordion-body .form-check{
    width:50%;                /* チェック項目を左右 2 分割 */
    padding-left:1.25rem;     /* 十分な余白 */
  }
}

/* ─────────────────────────────────────────────
   3. PC 上マージン（並び替えバーと干渉しない）
   ──────────────────────────────────────────── */
@media (min-width:992px){
  #filtersAccordion{ margin-top:1.2rem; }
}

/* ─────────────────────────────────────────────
   4. サイドバー / モーダル内 スクロール
   ──────────────────────────────────────────── */
#filtersAccordion{
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--lux-blue-2) transparent;
  padding-right:.25rem;
}
#filtersAccordion::-webkit-scrollbar{ width:6px; }
#filtersAccordion::-webkit-scrollbar-thumb{
  background:var(--lux-blue-2);border-radius:3px;
}

/* PC (xl≥1200px) */
@media (min-width:1200px){
  #filtersAccordion{ max-height:calc(100vh - 120px); }
}



/* ─────────────────────────────────────────────
   5. アクションバー（Apply / Clear）
   ──────────────────────────────────────────── */
#filter-action-bar,
.sticky-bottom-filter{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top:1px solid var(--lux-gray-2);
  padding:1rem 1rem .9rem;
  z-index:10;
  box-shadow:0 -2px 6px rgba(0,0,0,.08);
}

.btn-primary{
  background:var(--lux-blue-3);
  border-color:var(--lux-blue-3);
}
.btn-primary:hover{
  background:var(--lux-blue-2);
  border-color:var(--lux-blue-2);
}
.btn-outline-secondary{
  color:var(--lux-gray-4);
  border-color:var(--lux-gray-4);
}
.btn-outline-secondary:hover{
  background:var(--lux-gray-4);
  color:#fff;
}

/* ─────────────────────────────────────────────
   6. 軽量アニメーション
   ──────────────────────────────────────────── */
.accordion-button::after{ transition:transform .25s; }
.accordion-button.collapsed::after{ transform:rotate(-90deg); }


/* ─────────────────────────────────────────────
   7. タブレット幅専用：フォントサイズ & 余白調整
   ──────────────────────────────────────────── */
@media (min-width:768px) and (max-width:991.98px){
  /* 見出し（商品一覧 など）*/
  h2{ font-size:1.35rem; }

  /* 並び替えバー & 親カテゴリタブ */
  #sortBar,
  #sortBar .btn,
  #parentTab .nav-link{ font-size:.9rem; }

  /* フィルター：アコーディオン見出し */
  .accordion-button{
    font-size:.9rem;
    padding:.6rem 1rem;
  }

  /* フィルター：チェックボックスのラベル ←★ここを修正 */
  .accordion-body .form-check-label{
    font-size:.85rem;
    white-space:nowrap;   /* ← 追加：改行を禁止 */
  }

  /* フィルター：選択数バッジ */
  .filter-badge{
    font-size:.65rem;
    min-width:1.3rem;
  }

  /* アコーディオン内チェックボックスを 2 カラムに */
  .accordion-body .form-check{
    width:50%;
    padding-left:1.25rem;
  }
}


/* ─────────────────────────────────────────────
   8. タブレット幅：サイドバー固定 + 本文フレックス化
   ──────────────────────────────────────────── */
/*
  要件：
    1) 768–991.98px だけ、左にサイドバー / 右に本文の 2 カラム
    2) 並び替えバーとサイドバーが接触しない（上マージン）
    3) マークアップは最小変更：親ラッパーに id="pageWrap"、
       本文側に id="mainWrap" を付けるだけ
          <div id="pageWrap" class="container">
            <aside id="filtersAccordion">…</aside>
            <div id="mainWrap">…</div>
          </div>
*/
@media (min-width:768px) and (max-width:991.98px){

  /* ❶ 可変パラメータ */
  :root{
    --tb-sidebar:150px;   /* サイドバーの固定幅 */
    --tb-gap:1rem;        /* サイドバーと本文の間隔 */
  }

  /* ❷ 親ラッパーをフレックスに */
  #pageWrap{
    display:flex;
    gap:var(--tb-gap);
  }

  /* ❸ サイドバー */
  #filtersAccordion{
    flex:0 0 var(--tb-sidebar);
    width:var(--tb-sidebar);
    margin-top:1.2rem;               /* 並び替えバーとの干渉を防ぐ */
    max-height:75vh;                 /* 既存設定を再宣言して保持 */
    min-height:60vh;
    max-height:calc(100vh - 120px);
    overflow-y:auto; 
  }

  /* ❹ 本文エリア（並び替えバー + 商品グリッド） */
  #mainWrap{
    flex:1 1 auto;
    min-width:300px;                 /* 潰れ防止 */
  }

  /* アクションバー内ボタンは改行しない */
#filter-action-bar .btn,
.sticky-bottom-filter .btn{
  white-space:nowrap;
}


}