/* QSEL — public-portal type-and-suggest select (16 Aug 2026).
   Neutral chrome that inherits the host form's input styling: the
   visible input borrows the select's own classes at enhance time, so
   only the wrapper, menu and options need rules here. */

.qsel {
  position: relative;
  display: block;
}

.qsel-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

.qsel-menu {
  position: absolute;
  z-index: 320;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(120, 130, 150, 0.4);
  border-radius: 10px;
  background: #ffffff;
  color: #1c2534;
  box-shadow: 0 18px 45px rgba(10, 20, 40, 0.25);
}

.qsel-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.qsel-option:hover,
.qsel-option:focus-visible {
  background: rgba(201, 162, 39, 0.16);
  outline: none;
}

.qsel-option.is-selected {
  font-weight: 700;
  background: rgba(201, 162, 39, 0.24);
}

.qsel-empty {
  padding: 8px 10px;
  opacity: 0.7;
  font-size: 0.9em;
}