/* Search Box Styles */
#search-container {
  @apply relative w-full;
}

/* Search dropdown responsive width */
#search-results-dropdown {
  min-width: 320px;
}

@media (max-width: 640px) {
  #search-results-dropdown {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 4rem;
    max-width: calc(100vw - 2rem);
  }
}

/* Search result hover states */
.search-result-item:hover {
  @apply bg-gray-50;
}

.search-result-item.highlighted {
  @apply bg-gray-100;
}

/* Smooth transitions */
#search-results-dropdown {
  transition: opacity 0.15s ease-in-out;
}

/* Loading spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Focus styles for accessibility */
#search-input:focus {
  @apply ring-2 ring-pink-500 border-transparent;
}

/* Clear button hover effect */
button[data-search-target="clearButton"]:hover svg {
  @apply text-gray-600;
}