/* ─────────────────────────────────────────
   Search Page
   ───────────────────────────────────────── */
.search-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.search-tabs::-webkit-scrollbar {
  display: none;
}

.search-tab {
  flex: 1;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
}

.search-tab[aria-selected="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

.search-result {
  border-bottom: 1px solid var(--color-border);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-accent);
}

.search-result-brand {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.search-result-form {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.search-highlight {
  background: #fff3a8;
  border-radius: 2px;
}

.spelling-check {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: none;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  cursor: pointer;
}

.spelling-check:active {
  background: var(--color-accent-light);
}

.spelling-loading {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.spelling-suggestions {
  margin-top: var(--space-3);
}

.spelling-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.spelling-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  margin: var(--space-1);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: none;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  cursor: pointer;
}

.spelling-pill:active {
  background: var(--color-accent-light);
}

.search-result-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-3) 0;
}

.search-result-link:active {
  background: var(--color-accent-light);
  margin: 0 calc(-1 * var(--space-3));
  padding: var(--space-3);
  border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .search-tab:hover {
    color: var(--color-text);
  }

  .spelling-check:hover,
  .spelling-pill:hover {
    background: var(--color-accent-light);
  }

  .search-result-link:hover {
    background: var(--color-accent-light);
    margin: 0 calc(-1 * var(--space-3));
    padding: var(--space-3);
    border-radius: 6px;
    text-decoration: none;
  }
}

@media (min-width: 640px) {
  .search-tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-lg);
  }
}

@media (prefers-color-scheme: dark) {
  .search-highlight {
    background: #5c4d00;
    color: #f0e6b0;
  }
}