/* Prodimer Filters — sidebar vertical, modern, Flatsome-friendly */
.prodimer-filters {
  --pf-bg: #ffffff !important;
  --pf-border: #e5e7eb !important;
  --pf-text: #1f2937 !important;
  --pf-muted: #6b7280 !important;
  --pf-accent: #111827 !important;
  --pf-accent-2: #129EB5 !important;
  --pf-radius: 10px !important;
  --pf-gap: 18px !important;
  --pf-width: 280px !important;
  font-family: inherit !important;
  color: var(--pf-text) !important;
  background: var(--pf-bg) !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius) !important;
  padding: 18px 16px !important;
  width: 100% !important;
  max-width: var(--pf-width) !important;
  box-sizing: border-box !important;
}

/* When used in a sidebar column, let row handle width */
.sidebar .prodimer-filters,
.widget_prodimer_filters .prodimer-filters {
  max-width: none !important;
}

.pf-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--pf-gap) !important;
}

.pf-title {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.pf-section {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--pf-border) !important;
}
.pf-section:last-of-type {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.pf-section-title {
  margin: 0 0 10px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.pf-label {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* Toggle switch — iOS style */
.pf-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.pf-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.pf-toggle-slider {
  position: relative !important;
  width: 42px !important;
  height: 24px !important;
  background: #d1d5db !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  transition: background 0.2s ease !important;
}
.pf-toggle-slider::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  transition: transform 0.2s ease !important;
}
.pf-toggle input:checked + .pf-toggle-slider {
  background: var(--pf-accent-2) !important;
}
.pf-toggle input:checked + .pf-toggle-slider::after {
  transform: translateX(18px) !important;
}
.pf-toggle input:focus-visible + .pf-toggle-slider {
  outline: 2px solid var(--pf-accent-2) !important;
  outline-offset: 2px !important;
}
.pf-toggle-label {
  flex: 1 !important;
}

/* Select */
.pf-select-wrap {
  position: relative !important;
}
.pf-select {
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #f9fafb !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 8px !important;
  padding: 10px 34px 10px 12px !important;
  font-size: 0.88rem !important;
  color: var(--pf-text) !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: 38px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.pf-select:focus {
  outline: none !important;
  border-color: var(--pf-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(18,158,181,0.15) !important;
}
.pf-select-wrap::after {
  content: "▾" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--pf-muted) !important;
  font-size: 0.85rem !important;
}

/* Search input inside filters */
.pf-search-wrap {
  margin-bottom: 8px !important;
}
.pf-search-input {
  width: 100% !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 0.85rem !important;
  background: #f9fafb !important;
  box-sizing: border-box !important;
}
.pf-search-input:focus {
  outline: none !important;
  border-color: var(--pf-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(18,158,181,0.12) !important;
}

/* Lists */
.pf-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
.pf-list::-webkit-scrollbar {
  width: 6px !important;
}
.pf-list::-webkit-scrollbar-thumb {
  background: #d1d5db !important;
  border-radius: 999px !important;
}

.pf-list-item {
  margin: 0 !important;
  padding-left: calc(var(--pf-depth, 0) * 14px) !important;
}
.pf-list-item--depth-0 { /* top level */ }
.pf-list-item[data-pf-hidden="1"] {
  display: none !important;
}

.pf-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
  padding: 2px 0 !important;
}
.pf-checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.pf-checkbox-box {
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #9ca3af !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #fff !important;
  transition: all 0.15s ease !important;
}
.pf-checkbox-box::after {
  content: "✓" !important;
  font-size: 10px !important;
  color: #fff !important;
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: all 0.15s ease !important;
}
.pf-checkbox input:checked + .pf-checkbox-box {
  background: var(--pf-accent-2) !important;
  border-color: var(--pf-accent-2) !important;
}
.pf-checkbox input:checked + .pf-checkbox-box::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.pf-checkbox input:focus-visible + .pf-checkbox-box {
  outline: 2px solid var(--pf-accent-2) !important;
  outline-offset: 1px !important;
}
.pf-checkbox-label {
  flex: 1 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.pf-count {
  font-size: 0.78rem !important;
  color: var(--pf-muted) !important;
  background: #f3f4f6 !important;
  border-radius: 999px !important;
  padding: 1px 6px !important;
  flex-shrink: 0 !important;
}

.pf-empty {
  font-size: 0.88rem !important;
  color: var(--pf-muted) !important;
  margin: 0 !important;
}

/* Actions */
.pf-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-top: 4px !important;
}
.pf-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pf-btn--apply {
  background: var(--pf-accent) !important;
  color: #fff !important;
  border-color: var(--pf-accent) !important;
}
.pf-btn--apply:hover {
  background: #000 !important;
}
.pf-btn--clear {
  background: #fff !important;
  color: var(--pf-text) !important;
  border-color: var(--pf-border) !important;
}
.pf-btn--clear:hover {
  background: #f9fafb !important;
  border-color: #cbd5e1 !important;
  color: var(--pf-text) !important;
}

/* Price filter — legacy (kept for backward compat, no longer used) */
.pf-price-wrap { display:flex !important; align-items:flex-end !important; gap:8px !important; }
.pf-price-field { flex:1 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.pf-price-label { font-size:0.78rem !important; color:var(--pf-muted) !important; font-weight:600 !important; }
.pf-price-input { width:100% !important; border:1px solid var(--pf-border) !important; border-radius:8px !important; padding:8px 10px !important; font-size:0.88rem !important; background:#f9fafb !important; box-sizing:border-box !important; height:auto !important; min-height:38px !important; line-height:1.4 !important; }
.pf-price-input:focus { outline:none !important; border-color:var(--pf-accent-2) !important; box-shadow:0 0 0 3px rgba(18,158,181,0.12) !important; }
.pf-price-sep { padding-bottom:10px !important; color:var(--pf-muted) !important; }

/* Price slider — dual handle */
.pf-price-values { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:12px !important; font-size:0.88rem !important; font-weight:600 !important; color:var(--pf-text) !important; }
.pf-price-value { background:#f3f4f6 !important; padding:4px 8px !important; border-radius:6px !important; font-size:0.82rem !important; line-height:1.2 !important; }
.pf-slider-track-wrap { position:relative !important; height:20px !important; display:block !important; margin:6px 0 2px !important; }
.pf-slider-track { position:absolute !important; left:0 !important; right:0 !important; height:4px !important; background:#e5e7eb !important; border-radius:999px !important; top:50% !important; transform:translateY(-50%) !important; }
.pf-slider-range { position:absolute !important; height:4px !important; background:var(--pf-accent-2) !important; border-radius:999px !important; top:50% !important; transform:translateY(-50%) !important; z-index:1 !important; }
.pf-slider-handle { position:absolute !important; left:0 !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important; width:100% !important; height:4px !important; margin:0 !important; padding:0 !important; -webkit-appearance:none !important; appearance:none !important; background:transparent !important; pointer-events:none !important; z-index:2 !important; }
.pf-slider-handle::-webkit-slider-runnable-track { height:4px !important; background:transparent !important; border:none !important; }
.pf-slider-handle::-moz-range-track { height:4px !important; background:transparent !important; border:none !important; }
.pf-slider-handle::-webkit-slider-thumb { -webkit-appearance:none !important; appearance:none !important; width:18px !important; height:18px !important; background:#fff !important; border:2px solid var(--pf-accent-2) !important; border-radius:50% !important; cursor:pointer !important; pointer-events:auto !important; box-shadow:0 1px 4px rgba(0,0,0,0.15) !important; margin-top:-7px !important; }
.pf-slider-handle::-moz-range-thumb { width:18px !important; height:18px !important; background:#fff !important; border:2px solid #129EB5 !important; border-radius:50% !important; cursor:pointer !important; pointer-events:auto !important; box-shadow:0 1px 4px rgba(0,0,0,0.15) !important; border:2px solid #129EB5 !important; }
.pf-slider-handle--min { z-index:3 !important; }
.pf-slider-handle--max { z-index:4 !important; }

/* Responsive — collapsible on mobile: if filter is in top, full width */
@media (max-width: 849px) {
  .prodimer-filters {
    max-width: none !important;
  }
}