.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  align-items: flex-start; /* ensures all labels align left */
}

.filter-bar label {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
  font-size: 1em;
  color: #2c6ea5;
  font-weight: bold;
}

/* Updated select styling for all boxes */
.filter-bar select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1em;
  background-color: #fff;
  color: #2c6ea5;
  font-weight: bold;
  font-family: inherit;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #2c6ea5 50%), 
                    linear-gradient(135deg, #2c6ea5 50%, transparent 50%);
  background-position: right 12px center;
  background-size: 8px 8px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-bar select:focus {
  outline: none;
  border-color: #2c6ea5;
  box-shadow: 0 0 4px rgba(44, 110, 165, 0.3);
}