/* Start custom CSS for case27-explore-widget, class: .elementor-element-08xex4q *//* Target ONLY Select2 dropdown filters (Categories + Region) */
.explore-filter.dropdown-filter {
  position: relative;
}

/* Make sure the clickable/select area has room for the arrow */
.explore-filter.dropdown-filter .select2-container {
  width: 100% !important;
}

.explore-filter.dropdown-filter .select2-selection--single {
  padding-right: 34px !important; /* room so text doesn't clash */
}

/* Add dropdown arrow (styled like the demo) */
.explore-filter.dropdown-filter::after {
  content: "\e5cf"; /* Material Icons: expand_more */
  font-family: "Material Icons" !important;
  font-size: 20px;
  line-height: 1;
  color: #484848;
  opacity: 1;
  pointer-events: none;

  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* Rotate arrow when Select2 is open */
.explore-filter.dropdown-filter:has(.select2-container--open)::after,
.explore-filter.dropdown-filter .select2-container--open + * /* harmless fallback */ {
  /* the fallback line does nothing visually; keeps CSS valid if :has isn't supported */
}

.explore-filter.dropdown-filter:has(.select2-container--open)::after {
  transform: translateY(-50%) rotate(180deg);
}

/* If your Select2 uses the search field (rare for single-select), keep spacing too */
.explore-filter.dropdown-filter .select2-search__field {
  padding-right: 36px !important;
}

/* Hide Select2's default arrow so you only see your custom one */
.explore-filter.dropdown-filter .select2-selection__arrow {
  display: none !important;
}/* End custom CSS */