/* Accessible combobox for the Toll Calculator Starting/Ending Destination
   fields (E470SD-264). Visually mirrors the original <select> styling while
   the underlying native <select> is hidden but kept as the data source. */

#controls .combobox {
  position: relative;
}

/* Match the original spacing: only the end field had a 5px bottom gap before
   the following <hr>, and the destination labels carried these top margins
   (the SCSS [for="start"]/[for="end"] rules stop matching once the labels are
   repointed at the combobox inputs). */
#controls .combobox--end {
  margin-bottom: 5px;
}

#controls > form > label[for="start-combobox"] {
  margin-top: 4px;
}

#controls > form > label[for="end-combobox"] {
  margin-top: 20px;
}

/* The Travel Time fieldset is a fixed-height (93px) clipped box; let it grow to
   fit its legend + controls so the "Select Travel Time" legend isn't cut off. */
#floating-panel #controls > form #timeWrapper.show {
  height: auto !important;
}

/* Visually hide the native select but keep it available for scripts. */
#controls select.combobox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#controls .combobox__input {
  width: 100%;
  height: 40px;
  padding: 0 30px 0 11px;
  color: #000;
  font: inherit;
  background-color: #fcfcfc;
  border: 1px solid #B3B3B3;
  border-radius: 3px;
  background-image: url("/app/themes/fru_timber/src/img/caret.gif");
  background-size: 13px 9px;
  background-position: right 17px center;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}

#controls .combobox__input::placeholder {
  color: #595959;
}

#controls .combobox__input:focus {
  outline: 2px solid #005ea2;
  outline-offset: 1px;
}

#controls .combobox__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #B3B3B3;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#controls .combobox__list[hidden] {
  display: none;
}

#controls .combobox__option {
  padding: 8px 11px;
  color: #000;
  line-height: 1.3;
  cursor: pointer;
}

#controls .combobox__option.is-active,
#controls .combobox__option:hover {
  background-color: #005ea2;
  color: #fff;
}