/* ══════════ TOM SELECT THEME ══════════ */
.ts-wrapper {
  width: 100%;
}

/* Search bar selects */
.search-group .ts-wrapper .ts-control {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  cursor: pointer;
  min-height: unset;
}
.search-group .ts-wrapper .ts-control input {
  color: var(--white) !important;
  font-size: 0.92rem;
}
.search-group .ts-wrapper.single .ts-control::after {
  border-top-color: rgba(255, 255, 255, 0.5);
  right: 0;
}
.search-group .ts-dropdown {
  background: var(--navy-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.search-group .ts-dropdown .option {
  color: rgba(255, 255, 255, 0.75);
  padding: 0.65rem 1rem;
  transition:
    background var(--transition),
    color var(--transition);
}
.search-group .ts-dropdown .option:hover,
.search-group .ts-dropdown .option.active {
  background: var(--emerald);
  color: var(--white);
}
.search-group .ts-dropdown .option.selected {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

/* Contact form select */
.field-select .ts-wrapper .ts-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  box-shadow: none;
  padding: 0.82rem 1rem;
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  min-height: unset;
  transition:
    border-color var(--transition),
    background var(--transition);
}
.field-select .ts-wrapper.focus .ts-control {
  border-color: var(--emerald-light);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.field-select .ts-wrapper.single .ts-control::after {
  border-top-color: rgba(255, 255, 255, 0.45);
}
.field-select .ts-wrapper.focus.single .ts-control::after {
  border-top-color: var(--emerald-light);
}
.field-select .ts-dropdown {
  background: var(--navy-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.field-select .ts-dropdown .option {
  color: rgba(255, 255, 255, 0.75);
  padding: 0.7rem 1rem;
  transition:
    background var(--transition),
    color var(--transition);
}
.field-select .ts-dropdown .option:hover,
.field-select .ts-dropdown .option.active {
  background: var(--emerald);
  color: var(--white);
}

/* Prevent Tom Select from growing on selection */
.ts-control {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
.ts-control input {
  width: 0 !important;
  min-width: 0 !important;
}

/* Keep Tom Select control background on open */
.ts-wrapper.single.input-active .ts-control {
  background: transparent !important;
}

/* For contact form select specifically */
.field-select .ts-wrapper.single.input-active .ts-control {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Remove focus border/shadow when dropdown is open */
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.focus .ts-control {
  box-shadow: none !important;
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Contact form — keep emerald border only on actual focus, not open */
.field-select .ts-wrapper.focus .ts-control {
  border-color: rgba(255, 255, 255, 0.12) !important;
}