/**
 * Custom styles for ps_searchbar module
 * Tailwind CSS classes are handled by your main CSS framework
 */

/* Search widget base styles */
#search_widget {
  position: relative;
}

/* Search dropdown positioning */
.search-widgets__dropdown {
  min-width: 300px;
  max-width: 500px;
}

/* Search results styling */
.search-result:last-child {
  border-bottom: none;
}

.search-result__link:hover {
  text-decoration: none;
}

/* Mobile search overlay */
.mobile-search-overlay {
  backdrop-filter: blur(2px);
}

/* Mobile search form transitions */
.mobile-search-form {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clear button animation */
.clear-search-btn {
  transition: opacity 0.2s ease-in-out;
}

/* Search input focus states - fallback for non-Tailwind environments */
.js-search-input:focus {
  outline: none;
  border-color: #ea580c; /* blaze-orange-600 equivalent */
}

/* Hide native search input clear button */
.js-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.js-search-input::-ms-clear {
  display: none;
}

/* Autocomplete dropdown styling */
.search-widgets__dropdown.show {
  display: block !important;
}

/* Loading state - Animation désactivée */

/* Responsive adjustments */
@media (max-width: 768px) {
  .mobile-search-form {
    padding: 1rem;
  }
  
  .mobile-search-results {
    max-height: calc(100vh - 150px);
  }
}

/* Search suggestions styling */
.search-suggestion {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-suggestion:hover {
  background-color: #f9fafb;
}

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

/* No results message */
.no-search-results {
  padding: 1rem;
  text-align: center;
  color: #6b7280;
  font-style: italic;
}

/* Search history */
.search-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.search-history-item:hover {
  background-color: #f9fafb;
}

.search-history-clear {
  color: #ef4444;
  cursor: pointer;
  font-size: 0.75rem;
}