/* search-select.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── SearchSelect ── */
.SearchSelect_searchSelect {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  color:var(--color-green);
}

.SearchSelect_label {
  padding:0 12px;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-size:14px;
  letter-spacing:1.26px;
  text-transform:uppercase;
  opacity:.8;
  cursor:pointer;
}

.SearchSelect_field {
  display:flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:6px 12px;
  background:var(--color-white);
  border:1px solid var(--color-dark-beige);
  border-radius:40px;
  transition:border-color .15s ease;
}

.SearchSelect_compact {
  width:-moz-fit-content;
  width:fit-content;
}

.SearchSelect_compact .SearchSelect_field {
  gap:4px;
  padding:6px 10px 6px 14px;
  border-color:var(--color-yellow);
}

.SearchSelect_compact .SearchSelect_input {
  flex:0 0 auto;
  width:46px;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-size:16px;
}

.SearchSelect_compact .SearchSelect_panel {
  min-width:100%;
}

.SearchSelect_field.SearchSelect_success {
  border-color:var(--color-yellow);
}

.SearchSelect_field.SearchSelect_open {
  border-color:var(--color-green);
}

.SearchSelect_field.SearchSelect_error {
  border-color:var(--color-terracotta);
}

.SearchSelect_field.SearchSelect_disabled {
  opacity:.6;
}

.SearchSelect_input {
  all:unset;
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-family-serif-light);
  font-size:18px;
  line-height:1.4;
  color:var(--color-green);
  cursor:text;
}

.SearchSelect_input::placeholder {
  color:var(--color-green);
  opacity:.8;
}

.SearchSelect_input:disabled {
  cursor:not-allowed;
}

.SearchSelect_successIcon {
  flex:0 0 20px;
}

.SearchSelect_caretButton {
  all:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  cursor:pointer;
}

.SearchSelect_caretButton:disabled {
  cursor:not-allowed;
}

.SearchSelect_caret {
  display:block;
  transition:transform .18s ease;
}

.SearchSelect_field.SearchSelect_open .SearchSelect_caret {
  transform:rotate(180deg);
}

.SearchSelect_panel {
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  z-index:1000;
  box-sizing:border-box;
  width:100%;
  max-height:264px;
  margin:0;
  padding:8px;
  overflow-y:auto;
  list-style:none;
  background:var(--color-white);
  border:1px solid var(--color-green);
  border-radius:24px;
  box-shadow:0 8px 24px rgba(8, 56, 59,.12);
}

.SearchSelect_option {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border-radius:12px;
  font-family:var(--font-family-serif-light);
  font-size:18px;
  line-height:1.4;
  color:var(--color-green);
  cursor:pointer;
}

.SearchSelect_optionActive,
.SearchSelect_optionSelected {
  background:var(--color-light-yellow);
}

.SearchSelect_empty {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  font-family:var(--font-family-serif-light);
  font-size:18px;
  color:var(--color-green);
  opacity:.7;
}

@media (max-width:767px) {
  .SearchSelect_empty,
  .SearchSelect_input,
  .SearchSelect_option {
    font-size:16px;
  }
}