/* ── SpotSelector — reusable typeahead spot picker ─────────────── */
/* All colors use --spot-* variables so the parent container can override them. */

.spot-selector {
  position: relative;
}

.spot-selector-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spot-padding, 12px 36px 12px 16px);
  border: 1px solid var(--spot-border, rgba(255,255,255,0.15));
  border-radius: var(--spot-radius, 6px);
  font-size: var(--spot-font-size, 14px);
  font-weight: var(--spot-font-weight, 600);
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--spot-color, #fff);
  background: var(--spot-bg, rgba(255,255,255,0.08));
}

.spot-selector-input:focus {
  outline: none;
  border-color: var(--spot-focus-border, #FF8504);
  box-shadow: 0 0 0 3px var(--spot-focus-glow, rgba(255, 133, 4, 0.15));
}

.spot-selector-input::placeholder {
  color: var(--spot-placeholder, rgba(255,255,255,0.4));
  font-weight: 400;
}

.spot-selector-input:disabled {
  background: var(--spot-disabled-bg, rgba(255,255,255,0.03));
  color: var(--spot-placeholder, rgba(255,255,255,0.4));
  cursor: not-allowed;
}

.spot-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  background: var(--spot-dropdown-bg, rgba(15, 32, 65, 0.98));
  border: 1px solid var(--spot-border, rgba(255,255,255,0.15));
  border-top: none;
  border-radius: 0 0 var(--spot-radius, 6px) var(--spot-radius, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.spot-selector-item {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--spot-color, #fff);
  cursor: pointer;
  transition: background-color 0.1s;
}

.spot-selector-item:hover,
.spot-selector-item.highlighted {
  background-color: var(--spot-hover-bg, rgba(255,255,255,0.1));
}

.spot-selector-other {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--spot-accent, #FF8504);
  font-weight: 500;
  cursor: pointer;
  border-top: 1px solid var(--spot-border, rgba(255,255,255,0.15));
  transition: background-color 0.1s;
}

.spot-selector-other:hover,
.spot-selector-other.highlighted {
  background-color: var(--spot-hover-bg, rgba(255,255,255,0.1));
}

.spot-selector-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--spot-placeholder, rgba(255,255,255,0.4));
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.spot-selector-clear:hover {
  color: var(--spot-color, #fff);
  background: var(--spot-hover-bg, rgba(255,255,255,0.1));
}

.spot-selector-custom {
  color: var(--spot-accent, #FF8504);
  font-weight: 500;
  border-bottom: 1px solid var(--spot-border, rgba(255,255,255,0.15));
}

.spot-selector-empty {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--spot-placeholder, rgba(255,255,255,0.4));
  font-style: italic;
}