/* ============================================================
   Petka LayeredNavigation - petka.css
   ============================================================ */

/* ---- Spinner overlay ---- */
#petka-global-spinner {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  display: none;
}
.spinner-overlay {
  background: rgba(0,0,0,.4);
  width: 100%; height: 100%;
  position: absolute;
}
.spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border: 6px solid #e8e8e8;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: petka-spin .9s linear infinite;
}
@keyframes petka-spin {
  to { transform: rotate(360deg); }
}

/* ---- Filter general ---- */
.block.filter .filter-options-item {
  border-bottom: 1px solid #e0e0e0;
}
.petka-clear-attr {
  font-size: .8em;
  margin-left: .4rem;
  color: #999;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
}
.petka-clear-attr:hover { color: #c00; }

/* ---- Collapsible ---- */
.block.filter .filter-options-item .filter-options-content {
  display: none;
}
.block.filter .filter-options-item.is-open .filter-options-content {
  display: block;
}
.block.filter .filter-options-item:has(input:checked) .filter-options-content,
.block.filter .filter-options-item:has(.is-checked) .filter-options-content {
  display: block;
}

/* Chevron */
.filter-options-title {
  cursor: pointer;
  position: relative;
  padding-right: 22px;
  user-select: none;
}
.filter-options-title::after {
  font-family: "icons-blank-theme";
  content: "\e607";
  speak: none; font-style: normal; font-weight: normal;
  line-height: 1;
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .15s ease-in-out;
}
.filter-options-item.is-open > .filter-options-title::after,
.block.filter .filter-options-item:has(input:checked) > .filter-options-title::after,
.block.filter .filter-options-item:has(.is-checked) > .filter-options-title::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* ---- Checkbox items ---- */
.block.filter .items .item label {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  cursor: pointer;
}
.block.filter .items .item.is-checked label {
  font-weight: 600;
}

/* ============================================================
   Price Range Slider
   ============================================================ */
.petka-price-slider {
  padding: .75rem 0 .5rem;
}
.petka-price-slider__track-wrap {
  position: relative;
  height: 28px;
  margin: 0 6px;
}
.petka-price-slider__track-wrap::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  margin-top: -2px;
  background: #d8d8d8;
  border-radius: 2px;
  z-index: 0;
}
.petka-range__fill {
  position: absolute;
  top: 50%; height: 4px;
  margin-top: -2px;
  background: #006bb4;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
  left: 0; right: 0;
}
.petka-range {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0; right: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  margin: 0;
}
.petka-range--from { z-index: 3; }
.petka-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #006bb4;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.petka-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #006bb4;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.petka-range:focus { outline: none; }
.petka-range::-webkit-slider-runnable-track { background: transparent; }
.petka-range::-moz-range-track { background: transparent; }
.petka-price-slider__values {
  margin-top: .6rem;
  font-size: .9rem;
  color: #333;
  text-align: center;
}
.petka-price-slider__apply {
  display: block;
  width: 100%;
  margin-top: .6rem;
  padding: .45rem .8rem;
  font-size: .85rem;
  cursor: pointer;
}
.petka-price-slider__clear {
  display: block;
  text-align: center;
  margin-top: .35rem;
  font-size: .8rem;
  color: #999;
  text-decoration: underline;
  cursor: pointer;
}
.petka-price-slider__clear:hover { color: #c00; }