/* ------------------------------------------------------------
   NETBOL – postranní filtry

   Pořadí:
   1. Příznaky
   2. Cena
   3. Velikost – pouze posuvník Filtry+, bez checkboxů
   4. Barva
   5. Značky
   6. Svršek
   Ostatní filtry následují potom, „Vymazat filtry“ je dole.

   Accordion:
   bez třídy .otevreny je vidět pouze nadpis h4.
   ------------------------------------------------------------ */

:root {
  /* Příznaky: block = zobrazit, none = skrýt */
  --netbol-priznaky: block;
}


/* ------------------------------------------------------------
   1) Pořadí filtrů
   ------------------------------------------------------------ */

#filters {
  display: flex;
  flex-direction: column;
}

#filters .filter-sections,
#filters #category-filter-hover {
  display: contents;
}

#filters .filter-section-boolean {
  display: var(--netbol-priznaky) !important;
  order: 1;
}

#filters .slider-wrapper,
#filters #price-filter-form {
  order: 2;
}

#filters .filter-section-parametric-id-5 {
  order: 3;
}

#filters .filter-section-parametric-id-17 {
  order: 4;
}

#filters .filter-section-manufacturer {
  order: 5;
}

#filters .filter-section-parametric-id-23 {
  order: 6;
}

#filters .filter-section:not(.filter-section-boolean):not(.filter-section-parametric-id-5):not(.filter-section-parametric-id-17):not(.filter-section-manufacturer):not(.filter-section-parametric-id-23):not(.filter-section-count) {
  order: 50;
}

#filters .filter-section-count {
  order: 99;
}


/* ------------------------------------------------------------
   2) Nadpisy a zarovnání
   ------------------------------------------------------------ */

/* Filtry+ má vlastní šipku v h4:after; šipku Paxio v h4:before vypneme. */
#filters h4:before {
  content: none !important;
  display: none !important;
}

#filters,
#filters .slider-wrapper,
#filters .dkLab-slider-wrapper,
#filters .slider-content,
#filters .filter-section,
#filters .filter-section form,
#filters .filter-section fieldset {
  text-align: left !important;
}

#filters .dkLab-show-filter,
#filters .filter-section form.dkLab-parameter fieldset .dkLab-show-filter,
#filters .filter-section form.dkLab-parameter-special fieldset .dkLab-show-filter {
  justify-content: flex-start !important;
}

#filters h4 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  z-index: 2;
  padding: 16px 0 12px !important;
  text-align: left !important;
  cursor: pointer;
}

#filters h4 span {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  float: none !important;
  text-align: left !important;
}


/* ------------------------------------------------------------
   3) Cena + Velikost: posuvník nahoře, pole Od–Do dole
   ------------------------------------------------------------ */

#filters .slider-wrapper,
#filters .filter-section-parametric-id-5 {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

#filters .filter-section-parametric-id-5 {
  margin-top: 4px !important;
}

#filters .slider-wrapper > h4,
#filters .filter-section-parametric-id-5 > h4 {
  order: 0;
  flex: 0 0 auto;
}

/* Vnitřní wrapper Filtry+ */
#filters .slider-wrapper.otevreny .dkLab-slider-wrapper,
#filters .filter-section-parametric-id-5.otevreny .dkLab-slider-wrapper {
  order: 1;
  display: flex !important;
  align-items: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 4px 18px !important;
  box-sizing: border-box;
  overflow: visible;
  float: none !important;
  text-align: left !important;
  gap: 16px !important;
}

/* Cena: header je v DOM před posuvníkem, proto reverse.
   Velikost: posuvník je v DOM první, proto běžný column. */
#filters .slider-wrapper.otevreny .dkLab-slider-wrapper {
  flex-direction: column-reverse !important;
}

#filters .filter-section-parametric-id-5.otevreny .dkLab-slider-wrapper {
  flex-direction: column !important;
}

/* Fallback pro variantu DOM, kde jsou header/content přímo ve wrapperu. */
#filters .slider-wrapper.otevreny > .slider-content,
#filters .filter-section-parametric-id-5.otevreny > .slider-content {
  order: 1;
}

#filters .slider-wrapper.otevreny > .slider-header,
#filters .filter-section-parametric-id-5.otevreny > .slider-header {
  order: 2;
}

#filters .slider-wrapper.otevreny .slider-content,
#filters .filter-section-parametric-id-5.otevreny .slider-content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 22px;
  margin: 0 !important;
  padding: 6px 0 2px !important;
  box-sizing: border-box;
  overflow: visible !important;
  float: none !important;
  text-align: left !important;
}

#filters .slider-wrapper.otevreny .slider-header,
#filters .filter-section-parametric-id-5.otevreny .slider-header {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: visible !important;
  float: none !important;
  clear: both !important;
  text-align: left !important;
}

/* Mobil: slider a pole nejsou nalepené na okraje displeje. */
@media (max-width: 767px) {
  #filters .slider-wrapper.otevreny .dkLab-slider-wrapper,
  #filters .filter-section-parametric-id-5.otevreny .dkLab-slider-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Fallback, pokud slider-content není uvnitř .dkLab-slider-wrapper. */
  #filters .slider-wrapper.otevreny > .slider-content,
  #filters .filter-section-parametric-id-5.otevreny > .slider-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* ------------------------------------------------------------
   4) Řádek vstupních polí Od — Do
   ------------------------------------------------------------ */

#filters .slider-wrapper.otevreny .netbol-range-row,
#filters .filter-section-parametric-id-5.otevreny .netbol-range-row,
#filters .slider-wrapper.otevreny .netbol-price-row,
#filters .filter-section-parametric-id-5.otevreny .netbol-price-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 2px !important;
  box-sizing: border-box;
  float: none !important;
  clear: both !important;
}

#filters .netbol-range-end {
  display: flex !important;
  align-items: stretch !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

#filters .netbol-range-end--min {
  justify-content: flex-start !important;
}

#filters .netbol-range-end--max {
  justify-content: flex-end !important;
}

#filters .netbol-range-end > .netbol-price-input,
#filters .netbol-range-row > .netbol-price-input,
#filters .netbol-price-row > .netbol-price-input,
#filters .netbol-range-row > input,
#filters .netbol-price-row > input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#filters .slider-header .netbol-price-sep,
#filters .netbol-range-row .netbol-price-sep,
#filters .netbol-price-row .netbol-price-sep {
  flex: 0 0 auto !important;
  align-self: center;
  padding: 0 2px;
  float: none !important;
  font-size: 14px;
  line-height: 1;
  color: #8a8a8a;
  user-select: none;
}

/* Původní Filtry+ / Shoptet hodnoty .from a .to ponecháme v DOM,
   ale vyřadíme je z layoutu. */
#filters .slider-header > .from,
#filters .slider-header > .to,
#filters .slider-header .from.netbol-native-bound,
#filters .slider-header .to.netbol-native-bound {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  float: none !important;
}


/* ------------------------------------------------------------
   5) Samotné posuvníky
   ------------------------------------------------------------ */

#filters .slider-wrapper.otevreny .ui-slider,
#filters .slider-wrapper.otevreny .ui-slider.ui-widget-content,
#filters .filter-section-parametric-id-5.otevreny .ui-slider,
#filters .filter-section-parametric-id-5.otevreny .ui-slider.ui-widget-content,
#filters .filter-section-parametric-id-5.otevreny .param-price-filter,
#filters .filter-section-parametric-id-5.otevreny #dkLabSlider,
#filters .filter-section-parametric-id-5.otevreny [id^="dkLabSlider"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  float: none !important;
}

#filters .slider-wrapper .ui-slider:before,
#filters .slider-wrapper .ui-slider.ui-widget-content:before,
#filters .filter-section-parametric-id-5 .ui-slider:before,
#filters .filter-section-parametric-id-5 .ui-slider.ui-widget-content:before {
  left: 0 !important;
  right: 0 !important;
}


/* ------------------------------------------------------------
   6) Vstupní pole
   ------------------------------------------------------------ */

#filters input.netbol-price-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  left: auto !important;
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 10px;
  box-sizing: border-box;
  clip: auto !important;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 13px !important;
  line-height: 1.2;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

#filters input.netbol-price-input::-webkit-outer-spin-button,
#filters input.netbol-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#filters input.netbol-price-input:focus {
  outline: 2px solid #ed063e;
  outline-offset: 1px;
  border-color: #ed063e;
}

#filters .filter-section-parametric-id-5 .netbol-range-end::after,
#filters .filter-section-parametric-id-5 .slider-header::after {
  content: none !important;
}


/* ------------------------------------------------------------
   7) Běžné otevřené filtry
   ------------------------------------------------------------ */

/* Velikost je vynechána záměrně – její původní form s checkboxy
   se níže skrývá natrvalo. */
#filters .filter-section.otevreny:not(.filter-section-parametric-id-5) > form,
#filters .filter-section.otevreny:not(.filter-section-parametric-id-5) form {
  display: block !important;
}

#filters .filter-section.otevreny:not(.filter-section-parametric-id-5) .advanced-filters-wrapper {
  display: flex !important;
  flex-wrap: wrap;
}

#filters .filter-section.otevreny:not(.filter-section-parametric-id-5) .advanced-parameter {
  display: inline-block !important;
}


/* ------------------------------------------------------------
   8) Velikost: jen posuvník, checkboxy vždy pryč
   ------------------------------------------------------------ */

/* Filtry+ vkládá .dkLab-slider-wrapper vedle původního formu.
   Proto můžeme původní form s checkboxy skrýt přímo a bez :has(). */
#filters .filter-section.filter-section-parametric-id-5 > form,
#filters .filter-section-parametric-id-5 .advanced-filters-wrapper,
#filters .filter-section-parametric-id-5 .advanced-parameter,
#filters .filter-section-parametric-id-5 .dkLab-show-filter,
#filters .filter-section-parametric-id-5 .filter-label,
#filters .filter-section-parametric-id-5 input[type="checkbox"] {
  display: none !important;
}


/* ------------------------------------------------------------
   9) Accordion – MUSÍ zůstat poslední
   ------------------------------------------------------------ */

/* Zavřená Cena: zobrazit jen h4. */
#filters .slider-wrapper:not(.otevreny) > :not(h4),

/* Zavřené běžné filtry: zobrazit jen h4.
   Příznaky a „Vymazat filtry“ z accordionu vynecháváme. */
#filters .filter-section:not(.otevreny):not(.filter-section-count):not(.filter-section-boolean) > :not(h4) {
  display: none !important;
}