/* --- Ogólny kontener dla wrapperów filtrów --- */
.filter-up {
  /* Tutaj możesz dodać globalne style dla całej sekcji filtrów, np. padding */
  /* padding: 10px; */
}

/* --- Wrapper dla grupy filtrów --- */
.bpl-filter-facets-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Odstęp między przyciskami filtrów */
  align-items: center; /* Wyrównanie przycisków w linii */
  /*padding: 10px 0;  Dodatkowy padding dla sekcji filtrów */
}

/* --- Pojedynczy blok filtra (stylizowany na przycisk IKEA) --- */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item {
  position: relative; /* Niezbędne dla absolutnego pozycjonowania dropdownu */
  background-color: #f5f5f5; /* Jasnoszary, typowy dla przycisków IKEA */
 /* border: 1px solid #f5f5f5;*/
  border-radius: 15px;       /* Mocno zaokrąglone rogi */
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .1rem;
  padding-bottom: .1rem;
}



.facets-widget-checkbox.block-facet-block-price{
  padding-top: .15rem;
  padding-bottom: .15rem;
}


.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover {
  background-color: #e9e9e9; /* Lekkie przyciemnienie po najechaniu */
  border-color: #d0d0d0; /* Obrys pojawia się/wzmacnia na hover */
}

/* --- Nagłówek/Tytuł filtra (wewnątrz "przycisku") --- */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > h2 {
  margin: 0;
  padding: 8px 16px;
  color: #333;
   cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  white-space: nowrap;
  line-height: 1.5;
  font-weight: 600;
}

/* --- Strzałka rozwijania w nagłówku --- */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > h2::after {
  content: '▼';
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  margin-left: 8px;
  color: #555;
}

/* --- Obrót strzałki po najechaniu na blok filtra --- */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > h2::after {
  transform: rotate(180deg);
}

/* --- Kontener dropdownu (wewnętrzny div.facets-widget-checkbox) --- */
.bpl-filter-facets-wrapper .bpl-filter-item > div.facets-widget-checkbox,
.bpl-filter-facets-wrapper .bpl-filter-item > div.facets-widget-links,
.bpl-filter-facets-wrapper .bpl-filter-item > div.grid-facet-widget {
  position: absolute;
  top: 100%; /* Bezpośrednio pod przyciskiem, bez dodatkowego marginesu górnego */
  left: 0;
  /* margin-top: 4px; Usunięto, aby zapobiec "uciekającemu" dropdownowi */
  width: auto;
  min-width: 100%;
  max-width: 320px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
  z-index: 1050;
  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden; /* Zmienione z 'hidden' na 'visible' jeśli nie chcemy scrolla, ale 'auto' jest lepsze */

  transition: max-height 0.3s ease-out, opacity 0.3s ease-in-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
}

/* Pokazanie dropdownu po najechaniu na blok filtra */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > div.facets-widget-checkbox,
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > div.facets-widget-links,
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > div.grid-facet-widget
{
  opacity: 1;
  visibility: visible;
  max-height: 300px; /* Zwiększ, jeśli listy są dłuższe i nie chcesz scrolla, lub zmniejsz, jeśli scroll jest OK */
  padding-top: 8px;
  padding-bottom: 8px;
  overflow-y: auto; /* Pozostawione auto; scroll pojawi się tylko gdy zawartość przekroczy max-height */
}

/* Lista faset wewnątrz dropdownu */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Elementy listy faset (li.facet-item) */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
}

.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item:last-child {
  border-bottom: none;
}

/* Etykieta (Label) dla checkboxa */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item label {
  flex-grow: 1;
  order: 0;
  color: #333;
  font-size: 0.875rem; /* 14px */
  cursor: pointer;
  margin-right: 8px;
  margin-bottom: 0;
  white-space: nowrap; /* Zapobiega łamaniu tekstu etykiety */
  overflow: hidden; /* Ukrywa nadmiarowy tekst */
  text-overflow: ellipsis; /* Dodaje "..." dla zbyt długiego tekstu */
}

/* Tekst opcji filtra wewnątrz label */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item label .facet-item__value {
  /* Style dla samego tekstu, jeśli potrzebne */
  /* white-space, overflow, text-overflow są teraz na rodzicu label */
}

/* Checkbox (input[type="checkbox"]) */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item input[type="checkbox"].facets-checkbox {
  order: 1;
  flex-shrink: 0;
  margin: 0;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid #adadad;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  outline: none;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

/* Stan :hover dla custom checkboxa */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item input[type="checkbox"].facets-checkbox:hover {
  border-color: #777;
}

/* Stan :checked dla custom checkboxa */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item input[type="checkbox"].facets-checkbox:checked {
  background-color: #0058a3;
  border-color: #0058a3;
}

/* "Ptaszek" wewnątrz zaznaczonego custom checkboxa */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item input[type="checkbox"].facets-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* Ukrywamy domyślny .facet-item__status (minusik), jeśli nadal jest w HTML i jest widoczny */
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item .facet-item__status {
  display: none;
}


/* ----- Style responsywne ----- */
@media (max-width: 768px) {
  .bpl-filter-facets-wrapper {
    gap: 10px;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > h2 {
    padding: 7px 14px;
    font-size: 0.8125rem; /* 13px */
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox {
    min-width: 200px;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > div.facets-widget-checkbox {
    max-height: 260px;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item {
    padding: 8px 12px;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item label {
    font-size: 0.8125rem; /* 13px */
    /* white-space, overflow, text-overflow dziedziczone z góry */
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item input[type="checkbox"].facets-checkbox {
    width: 18px;
    height: 18px;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item input[type="checkbox"].facets-checkbox:checked::after {
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
  }
}

@media (max-width: 498.98px) {
  .bpl-filter-facets-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item {
    flex-basis: 100%;
  }
  /* Na bardzo małych ekranach pozwalamy na łamanie tekstu, jeśli jest to konieczne */
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox ul.item-list__checkbox li.facet-item label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > h2 {
    font-size: 0.875rem;
  }
  .bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item > div.facets-widget-checkbox {
    min-width: 100%;
    max-width: none;
    left: 0;
    right: 0;
  }
}

/* ===== ACTIVE FILTER STYLES ===== */
/* Styles for filters that are currently active (have facet-active class) */

/* Active filter button styling */
.bpl-filter-facets-wrapper  .facet-active {
  border-color: rgba(0, 0, 0, 0.89) !important;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

/* Layout helpers for filter position: UP (filters on top) */
#filter-position-container.filter-up .filter-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.2s ease-in-out;
}

#filter-position-container.filter-up .filter-grid .filter-col,
#filter-position-container.filter-up .filter-grid .content-col {
  width: 100%;
  box-sizing: border-box;
}
/* Keep stacked at all viewports when filters are UP */
@media (min-width: 992px) {
  #filter-position-container.filter-up .filter-grid {
    flex-direction: column;
  }
}

.price-facet-widget {
  margin-top: .15rem;
  margin-bottom: .15rem;
}

/*TODO responsywność*/

/* === Facet "Wymiary": 2 kolumny z JEDNYM scrollem ===================== */
.bpl-filter-facets-wrapper .bpl-filter-item > div.facets-widget-checkbox.bpl-dimensions-group,
.bpl-filter-facets-wrapper .bpl-filter-item > div.grid-facet-widget-model_test,
.bpl-filter-facets-wrapper .bpl-filter-item > div.grid-facet-widget-model,
.bpl-filter-facets-wrapper .bpl-filter-item > div.facets-widget-checkbox.bpl-connection-group
{
  width: 420px;
  max-width: 420px;
}

/* =================================================================== */
/* === UNIWERSALNY UKŁAD 2-KOLUMNOWY DLA FILTRÓW ===================== */
/* === (Wymiary & Podłączenie) ======================================= */
/* =================================================================== */

/* --- 1. Wspólne style dla obu kontenerów filtrów --- */
.bpl-dimensions-group,
.bpl-connection-group {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Zawsze dwie równe kolumny */
  grid-template-rows: auto; /* Wysokość wierszy dopasuje się do zawartości */
  gap: 8px 24px; /* Odstęp między wierszami i kolumnami */
  align-items: start;

  width: 420px; /* Wspólna, większa szerokość dla obu okienek */
  max-height: 320px; /* Maksymalna wysokość przed pojawieniem się scrolla */
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
}

/* --- 2. Pozycjonowanie siatki dla filtra WYMIARY --- */
.bpl-dimensions-group .bpl-dimensions-subtitle--width { grid-area: 1 / 1 / 2 / 2; }
.bpl-dimensions-group > .facets-widget-checkbox:nth-of-type(1) { grid-area: 2 / 1 / 3 / 2; }
.bpl-dimensions-group .bpl-dimensions-subtitle--height { grid-area: 1 / 2 / 2 / 3; }
.bpl-dimensions-group > .facets-widget-checkbox:nth-of-type(2) { grid-area: 2 / 2 / 3 / 3; }


/* --- 3. Pozycjonowanie siatki dla filtra PODŁĄCZENIE (bardziej złożone) --- */
/* Kolumna 1 */
.bpl-connection-group > .bpl-connection-subtitle:nth-child(1) { grid-column: 1; grid-row: 1; }
.bpl-connection-group > div:nth-child(2) { grid-column: 1; grid-row: 2; } /* Lista "Rozstaw" */

/* Kolumna 2 (elementy ułożone jeden pod drugim) */
.bpl-connection-group > .bpl-connection-subtitle:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.bpl-connection-group > div:nth-child(4) { grid-column: 2; grid-row: 2; } /* Lista "Strona" */
.bpl-connection-group > .bpl-connection-subtitle:nth-of-type(3) { grid-column: 2; grid-row: 3; margin-top: 1rem; }
.bpl-connection-group > div:nth-child(6) { grid-column: 2; grid-row: 4; } /* Lista "Podłączenie" */


/* --- 4. Wspólne style dla wewnętrznych list (reset scrolla) --- */
.bpl-dimensions-group > .facets-widget-checkbox,
.bpl-connection-group > .facets-widget-checkbox,
.bpl-connection-group > .facets-widget-links {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}

.bpl-dimensions-group .item-list__checkbox,
.bpl-connection-group .item-list__checkbox {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* =================================================================== */
/* === Filtr "Model" w 3 kolumnach =================================== */
/* =================================================================== */

/* Definiujemy siatkę dla kontenera z elementami */
.grid-facet-widget-model_test .facet-group-items,
.grid-facet-widget-model .facet-group-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tworzy 3 równe kolumny */
  gap: 12px; /* Mniejszy odstęp przy 3 kolumnach */
}

/* Ustawiamy szerszy dropdown, aby zmieścił 3 kolumny */
.grid-facet-widget-model_test,
.grid-facet-widget-model {
  width: 380px; /* Możesz dostosować tę wartość */
}

/* Stylizacja pojedynczego elementu (kafelka) w siatce */
.grid-facet-widget-model_test .grid-facet-item,
.grid-facet-widget-model .grid-facet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.grid-facet-widget-model_test .grid-facet-item:hover,
.grid-facet-widget-model .grid-facet-item:hover {
  border-color: #a0a0a0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Stylizacja obrazka */
.grid-facet-widget-model_test .color-box,
.grid-facet-widget-model .color-box {
  width: 100%;
  aspect-ratio: 1 / 1.5; /* Proporcje obrazka, np. lekko prostokątny */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 8px;
}

/* Stylizacja nazwy modelu */
.grid-facet-widget-model_test .color-name,
.grid-facet-widget-model .color-name {
  font-size: 0.75rem; /* Minimalnie mniejsza czcionka przy 3 kolumnach */
  text-align: center;
  line-height: 1.2;
}




/* =================================================================== */
/* === Finalna stylizacja przycisku panelu kolorów ================= */
/* =================================================================== */

/* 1. Ujednolicenie wyglądu kontenera przycisku */
#block-bpl-color-panel-toggle {
 /*
  border: 1px solid transparent;
  border-radius: 20px;
  */
  display: flex;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 2. Poprawiony efekt :hover, aby uniknąć czarnego tła */
#block-bpl-color-panel-toggle:hover {
  background-color: #e9e9e9 !important;
  border-color: #d0d0d0 !important;
}

/* 3. Stylizacja samego przycisku w środku */
.bpl-color-panel-toggle-btn {
  /* Reset wyglądu i dopasowanie do reszty */
  background: none !important;

  justify-content: space-between; /* Rozsuwa tekst i strzałkę */
  line-height: 1.5;
}

/* 4. Dodanie strzałki i jej obrót */
.bpl-color-panel-toggle-btn::after {
  content: '▼'; /* Używamy tej samej strzałki co w innych filtrach */
  font-size: 0.7rem;
  color: #555;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
  margin-left: .5rem;
}

/* 5. Odwrócenie strzałki, gdy panel jest aktywny */
.bpl-color-panel-toggle-btn[aria-expanded="true"]::after {
  /* Obracamy ją w lewo, co sugeruje "schowanie" panelu */
  transform: rotate(90deg);
}

/* Active facet visual enhancements (added by Junie) */
/* Highlight active filter blocks in the top filter bar */
.bpl-filter-facets-wrapper {
 /* background: #f5f9ff; */ /*subtle blue highlight */
  border-radius: 8px;
  /* box-shadow: inset 0 0 0 2px rgba(30, 100, 200, 0.18); */
 /* border: 1px solid blue;*/
}

.bpl-filter-facets-wrapper .bpl-filter-item.facet-active

{
  border: 2px solid #000;
}


/* Slightly emphasize the label/header inside active blocks
.bpl-filter-facets-wrapper .bpl-filter-item.facet-active h2,
.bpl-filter-facets-wrapper .bpl-filter-item.facet-active .block-title,
.bpl-filter-facets-wrapper .bpl-filter-item.facet-active .bpl-connection-subtitle,
.bpl-filter-facets-wrapper .bpl-filter-item.facet-active .bpl-dimensions-subtitle {
  color: #1e64c8;
}

bpl-filter-facets-wrapper .bpl-color-panel-toggle .bpl-color-panel-toggle-btn.facet-active,
.bpl-color-panel-toggle-btn.facet-active {
  background: #1e64c8;
  color: #fff;
  box-shadow: 0 2px 10px rgba(30, 100, 200, 0.28);
}

.bpl-filter-facets-wrapper .bpl-filter-item.facet-active:hover {
  box-shadow: inset 0 0 0 2px rgba(30, 100, 200, 0.28);
}
*/
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > div.grid-facet-widget,
.bpl-filter-facets-wrapper .block-facet--checkbox.bpl-filter-item:hover > div.facets-widget-checkbox
{
  padding: 1rem;
}


/* =================================================================== */
/* === Stylizacja i pozycjonowanie linku "Wybór techniczny" ======== */
/* =================================================================== */

/* 1. Ustawiamy główny kontener jako Flexbox */
.filter-up {
  display: flex;
  justify-content: space-between; /* Rozsuwa elementy na przeciwne krańce */
  align-items: center; /* Wyrównuje wszystko w pionie */
  gap: 1rem; /* Dodaje odstęp między filtrami a linkiem */
 /* padding: 10px 0;*/ /* Zachowujemy pionowy padding */
}

/* 2. Stylizujemy sam link, aby wyglądał nowocześnie */
.filter-tech a.facets-simple-link {
  display: inline-flex; /* Umożliwia wyrównanie tekstu i strzałki */
  align-items: center;

  font-size: 0.875rem; /* Taki sam rozmiar czcionki jak w filtrach */
  font-weight: 500;
  color: #333;
  text-decoration: none;

  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f0f0f0;
  transition: all 0.2s ease;
}

/* 3. Dodajemy strzałkę w prawo za pomocą pseudo-elementu */
.filter-tech a.facets-simple-link::after {
  content: '›'; /* Znak strzałki w prawo */
  font-size: 1.5rem;
  line-height: 1;
  margin-left: 8px;
  color: #555;
  transition: transform 0.2s ease;
}

/* 4. Efekt po najechaniu myszką */
.filter-tech a.facets-simple-link:hover {
  background-color: #e0e0e0;
  color: #000;
}

/* Lekkie przesunięcie strzałki na hover dla lepszego feedbacku */
.filter-tech a.facets-simple-link:hover::after {
  transform: translateX(3px);
}

/* === TOP MODE: place toggle inline with filters =================== */
#filter-position-container.filter-up .filter-grid .filter-col {
  display: flex;
  align-items: center;
  gap:0;
}
#filter-position-container.filter-up .filter-grid .filter-col .filter-position-toggle {
  margin: 0; /* remove mb spacing in inline context */
}
#filter-position-container.filter-up .filter-grid .filter-col .bpl-filter-facets-wrapper {
  flex: 0 0 auto;
  min-width: auto;
}


/* === Compact toggle + icon switching (TOP mode CSS) === */
#filter-position-container.filter-up { display: block; }


/* ==========================================================================
   Stylizacja Przycisku Panelu Kolorów
   ========================================================================== */

/* 1. Resetowanie stylów kontenera, aby nie dziedziczył niechcianych
      właściwości od innych filtrów (jak tło czy ramka). */
/* 2. Główny styl przycisku (linku <a>). */
.bpl-color-panel-toggle-btn {
  /* Układ i pozycjonowanie */
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Odstęp między ikoną, tekstem i strzałką */

  padding: 8px 16px;


  /* Tekst */
  color: #374151; /* Ciemnoszary tekst */
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;

  /* Interakcja i animacje */
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Ikona "koła kolorów" dodana przed tekstem. */
.bpl-color-panel-toggle-btn::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* Tęczowy gradient tworzący ikonę palety kolorów */
  background: conic-gradient(
    from 90deg,
    #ef4444, #f97316, #eab308, #84cc16, #22c55e, #14b8a6, #06b6d4, #3b82f6, #8b5cf6, #d946ef, #ef4444
  );
}

/* 4. Strzałka po prawej stronie. */


/* 5. Efekty po najechaniu myszką lub aktywacji klawiaturą. */


/* 6. Styl, gdy panel jest OTWARTY (aktywny). */
/* Celujemy w atrybut, który Twój JS powinien zmieniać. */
.bpl-color-panel-toggle-btn[aria-expanded="true"] {
  background-color: #3b82f6; /* Kolor akcentowy */
  color: #ffffff; /* Biały tekst */
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Zmiana ikony i strzałki w stanie aktywnym. */
.bpl-color-panel-toggle-btn[aria-expanded="true"]::before {
  /* Zmiana ikony na "X" (opcjonalnie) lub pozostawienie koła kolorów */
  background: none; /* Ukrywamy koło */
  /* Można dodać inną ikonę, np. X */
}

.bpl-color-panel-toggle-btn[aria-expanded="true"]::after {
  color: #ffffff; /* Biała strzałka */
  transform: rotate(180deg) translateX(-2px); /* Obrót i lekkie przesunięcie */
  content: '‹'; /* Zmiana na strzałkę w lewo, sugerującą "zamknij" */
}


.facets-widget-checkbox.block-facet-block-color_group.bpl-filter-item,
.facets-widget-checkbox.block-facet-block-color_group.bpl-filter-item:hover
{
  background-color: #fff;
}

.facets-widget-checkbox.block-facet-block-color_group.bpl-filter-item.facet-active
{
border: 0;
}