/* Select buscable (SSI) */

.ssi {
  position: relative;
  width: 100%;
}

.ssi-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.ssi-input {
  cursor: text;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6d82' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
}

.ssi-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 300;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
}

.ssi-option {
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.ssi-option:hover,
.ssi-option.is-active {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.ssi-option.is-selected {
  font-weight: 600;
  color: var(--color-primary);
}

.ssi-empty {
  padding: 0.65rem 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}