.isa-category-selector {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M18%209L12%2015L6%209%27%20stroke%3D%27%23222222%27/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 16px;
  width: 100%;
  padding: 11px 15px;
  padding-right: 40px;
  border: 1px solid #D4D3D3;
  border-radius: 30px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  background-size: 25px 25px;
  color: #9B9B9B;
}

.isa-category-selector::-ms-expand {
  display: none;
}

/* 2. Contenedor custom que va a envolver al <select> */
.isa-custom-dropdown {
  position: relative;
  width: 100%;
}

/* 4. Tu menú custom (invisible mientras no se abra) */
.isa-custom-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid #D4D3D3;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all .2s ease;
  z-index: 1000;
}

/* 5. Cuando esté abierto */
.isa-custom-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 6. Cada opción */
.isa-custom-dropdown .dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
}
.isa-custom-dropdown .dropdown-item:hover,
.isa-custom-dropdown .dropdown-item.selected {
  background: #f0f0f0;
}