/* app/assets/stylesheets/components/search_hero.css */

.search-hero {
  width: 100%;
  max-width: 48rem; /* 768px */
  margin: 0 auto;
}

.search-hero__container {
  position: relative;
}

.search-hero__icon {
  position: absolute;
  left: 1.5rem;
  top: 17%;
  transform: translateY(-50%);
  color: var(--gray-600);
  pointer-events: none;
  z-index: 10;
}

.search-hero__form {
  position: relative;
  display: flex;
  gap: 0.75rem;
}

.search-hero__input {
  flex: 1;
  height: 60px;
  padding: 0 1.5rem 0 3.5rem;
  font-size: 1.25rem; /* 20px */
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-lg);
  transition: all 200ms ease-in-out;
}

.search-hero__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1), var(--box-shadow-lg);
}

.search-hero__input::placeholder {
  color: var(--gray-600);
}

.search-hero__submit {
  height: 60px;
  padding: 0 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
}

.search-hero__submit:hover {
  box-shadow: var(--box-shadow-lg);
  transform: translateY(-1px);
}

/* Autocomplete dropdown */
.search-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

.search-autocomplete__item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  background: none;
  border: none;
  color: var(--gray-900);
  cursor: pointer;
  transition: background-color 150ms ease-in-out;
}

.search-autocomplete__item:hover {
  background-color: var(--gray-50);
}

.search-autocomplete__item:not(:last-child) {
  border-bottom: 1px solid var(--gray-100);
}