/* ===== Compact dropdowny (cb-dd) + Mobile filter sheet (sticky) ===== */

/* ukryj natywne selecty po zamontowaniu multiselectów */
html.ms-mounted #brandFilter,
html.ms-mounted #modelFilter,
html.ms-mounted #fuelFilter,
html.ms-mounted #bodyFilter { display: none !important; }

/* ----- Ujednolicone dropdowny (Rok/Promień/Sortuj) ----- */
.cb-dd{ position:relative; }
.cb-dd-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid var(--border,#E5E5EA); border-radius:10px;
  background:var(--surface,#fff); color:var(--text,#1D1D1F);
}
:root[data-theme="dark"] .cb-dd-btn{ border-color:#223048; background:#0c1118; color:#cdd8ee; }
.cb-dd-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-dd-caret{
  width:10px; height:6px; opacity:.6; margin-left:8px; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path fill="black" d="M6 8L0 0h12z"/></svg>') no-repeat center/100% 100%;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path fill="black" d="M6 8L0 0h12z"/></svg>') no-repeat center/100% 100%;
}
.cb-dd-panel{
  display:none; position:absolute; z-index:40; left:0; right:0; margin-top:6px;
  background:var(--surface,#fff); color:var(--text,#1D1D1F);
  border:1px solid var(--border,#E5E5EA); border-radius:10px; padding:8px;
  max-height:260px; overflow:auto; box-shadow:0 6px 28px rgba(0,0,0,.08);
}
:root[data-theme="dark"] .cb-dd-panel{ background:#0c1118; border-color:#223048; box-shadow:0 6px 28px rgba(0,0,0,.40); }
.cb-dd.open .cb-dd-panel{ display:block; }
.cb-dd-item{ padding:8px 10px; border-radius:8px; cursor:pointer; }
.cb-dd-item:hover{ background:color-mix(in srgb,var(--muted,#F2F2F7) 60%, transparent); }
:root[data-theme="dark"] .cb-dd-item:hover{ background:#0f151e; }
.cb-dd-item[aria-selected="true"]{ font-weight:700; }
.cb-dd-hidden{
  position:absolute !important; inset:auto auto auto auto; width:1px; height:1px; padding:0; margin:-1px;
  border:0; clip:rect(0 0 0 0); overflow:hidden;
}

/* Placeholder kolor gdy wybrana pusta opcja */
.filters-grid select:has(option[value=""]:checked){
  color: color-mix(in srgb, var(--text) 60%, transparent);
  font-weight: 600;
}

/* ----- Sticky przycisk "Filtry (N)" ----- */
.cb-sticky-filters{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: inline-flex; justify-content: center; align-items: center; gap:.5rem;
  padding: 12px 16px; border-radius: 999px; border:1px solid var(--border);
  background: rgba(250,250,250,.85); backdrop-filter: saturate(180%) blur(10px);
  font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.cb-sticky-filters .cb-counter{
  min-width:1.75em; height:1.75em; border-radius:999px; display:inline-grid; place-items:center;
  background: var(--muted); border:1px solid var(--border); font-weight:800;
}

@media (min-width: 768px){
  .cb-sticky-filters{ display:none; }
}

/* ----- Bottom sheet z filtrami (mobile) ----- */
.cb-sheet{ /* container */ }
.cb-sheet__overlay{ display:none; }
.cb-sheet__panel{ }

@media (max-width: 767.98px){
  .cb-sheet{
    position: fixed;
    inset: 0;
    z-index: 1400;             /* nad wszystkim oprócz headera */
    pointer-events: none;
  }
  .cb-sheet__overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .2s ease;
    display: block;
    z-index: 1401;
  }
  .cb-sheet__panel{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    transform: translateY(100%);
    background: var(--surface, #fff);  /* PEŁNE tło – nie „prześwituje” lista */
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    padding: 10px 14px 14px;
    overflow: auto;
    transition: transform .22s ease;
    z-index: 1402;
  }
  .cb-sheet.open{ pointer-events:auto; }
  .cb-sheet.open .cb-sheet__panel{ transform: translateY(0); }
  .cb-sheet.open .cb-sheet__overlay{ opacity:1; }
}

@media (min-width: 768px){
  /* desktop: panel działa jak zwykła karta (bez overlay) */
  .cb-sheet{ position: static; }
  .cb-sheet__overlay{ display:none !important; }
  .cb-sheet__panel{ position: static; max-height:none; transform:none; border-radius:12px; box-shadow:none; padding:0; overflow:visible; }
}
/* ===== Kompaktowe filtry na bardzo małych ekranach (np. Galaxy S8) ===== */
@media (max-width: 400px){
  /* Góra sheetu: szukaj + "Zapisz wyszukiwanie" + 1/2 w rzędzie */
  .filters-row-top{
    gap: 8px;
  }
  .filters-row-top .grow{
    flex: 1 1 100%;   /* input szukaj na całą szerokość, reszta pod spodem */
  }

  /* Siatka filtrów – jedna kolumna, mniejsze odstępy */
  .filters-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Pola filtrów trochę niższe i z mniejszym fontem */
  .filters-grid :where(select,input,.cb-dd-btn,.cb-ms button,.cb-ms .ms-control){
    height: 40px;
    padding: .55rem .75rem;
    font-size: 14px;
  }

  /* Licznik wyników, żeby nie "rozpychał" przycisków */
  #matchCount{
    font-size: 12px;
    white-space: nowrap;
  }

  /* Sticky "Filtry (N)" też minimalnie bardziej kompaktowy */
  .cb-sticky-filters{
    left: 10px;
    right: 10px;
    padding: 10px 14px;
    font-size: 14px;
  }
}
/* ===== UPROSZCZENIE GŁÓWNYCH FILTRÓW NA MAŁYCH EKRANACH ===== */
@media (max-width: 400px) {

  #filtersSheet .card {
    padding: 10px 10px 12px;
  }

  #filtersSheet .filters-row-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #filtersSheet #searchInput {
    font-size: 14px;
  }

  /* siatka filtrów: JEDNA kolumna – zero „latania” */
  #filtersSheet .filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #filtersSheet .filters-grid select,
  #filtersSheet .filters-grid input {
    font-size: 13px;
    padding: 8px 10px;
  }

  #filtersSheet .filters-grid .ac-wrap.span-2 {
    grid-column: 1 / -1;
  }

  #filtersSheet #radiusFilter,
  #filtersSheet #sortBy {
    font-size: 13px;
  }
  /* Dolny rząd: Zaawansowane / Wyczyść / Szukaj + licznik */
  #filtersSheet .filters-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-top:10px;
  }

  #filtersSheet .filters-actions .button{
    flex:1 1 calc(50% - 3px);  /* dwa przyciski w rzędzie */
    padding:8px 10px;
    font-size:13px;
  }

  /* „Szukaj” na pełną szerokość na dole */
  #filtersSheet .filters-actions .button:last-of-type{
    flex-basis:100%;
  }

  /* licznik wyników kompaktowy i nie rozpycha */
  #filtersSheet #matchCount{
    order:4;
    margin-left:auto;
    font-size:12px;
    white-space:nowrap;
  }

}
/* ===== Dolny rząd przycisków w sheet'cie filtrów ===== */
#filtersSheet .filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* licznik wyników – z lewej, mały, nie rozpycha */
#filtersSheet .filters-actions #matchCount {
  margin-right: auto;
  font-size: 13px;
  opacity: .75;
}

/* przyciski – normalnie w jednym rzędzie, jeśli jest miejsce */
#filtersSheet .filters-actions .button {
  min-width: 0;
}

/* ===== Bardzo małe ekrany (np. Galaxy S8) ===== */
@media (max-width: 400px) {
  #filtersSheet .filters-actions {
    gap: 6px;
  }

  #filtersSheet .filters-actions #matchCount {
    flex: 0 0 100%;
    text-align: left;
    margin-right: 0;
  }

  /* 1 rząd: Zaawansowane + Wyczyść po 1/2 szerokości */
  #filtersSheet .filters-actions .button {
    flex: 1 1 calc(50% - 3px);
    font-size: 14px;
    padding: .5rem .6rem;
  }

  /* 2 rząd: Szukaj na całą szerokość */
  #filtersSheet .filters-actions .button:last-of-type {
    flex-basis: 100%;
  }
}