/* basic reset */


/* wrapper to allow custom arrow etc. */
.custom-select-wrapper {
  position: relative;
  /*display: inline-block;*/
  width: 100%;
}

/* hide native arrow in most browsers */
.custom-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 42px;
  padding: 0.6rem 2.5rem 0.6rem 0.75rem;
  border-radius: 0.4rem;
  border: 2px solid #ccc;
  background-color: var(--background-color);
  font-size: 0.95rem;
  cursor: pointer;
  overflow-y: hidden;
}

/* custom arrow */
.custom-select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #555;
}

/* focus styles */
.custom-select-wrapper select:focus {
  /*outline: none;*/
  height: auto;
  
  overflow-y: auto;
  scrollbar-color: var(--background-color);
  box-shadow: 0 0 0 2px rgba(0,119,255,0.2);
}

/* invalid state (when required and placeholder still selected) */
.custom-select-wrapper select:required:invalid {
  color: #888;
}

/* make real options look normal */
.custom-select-wrapper select option {
  color: #000;
}

/* placeholder option style */
.custom-select-wrapper select option[disabled][hidden] {
  color: #888;
}

/* optional: red border when invalid */
.custom-select-wrapper select:required:invalid {
  border-color: var(--accent-color);
}

/* optional: green border when valid */
.custom-select-wrapper select:valid {
  border-color: #28a745;
}