/**
 * JoliSearch Module - Custom Styles for Lécopot Theme
 *
 * This file contains all custom styles for the JoliSearch module.
 * Loaded after JoliSearch's own CSS files for easy overriding without !important.
 *
 * If JoliSearch is removed, simply delete this file and remove the <link> in head.tpl
 */

/* JoliSearch replaces ps_searchbar's autocomplete functionality.
   We hide the original dropdown to prevent the "flash" effect. */

.search-widgets__dropdown {
  display: none;
}

/* Main dropdown container */
.ui-jolisearch.ui-menu {
  background: #fffaf3; /* $background-base */
  border: 2px solid #f3e3cd; /* $background-elevated */
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(38, 129, 135, 0.1); /* $primary-500 at 10% */
}

.ui-jolisearch .separator {
  background-color: #fffaf3; /* $background-base */
}

/* Individual menu items */
.ui-jolisearch.ui-menu .ui-menu-item {
  background-color: #fffaf3; /* $background-base */
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.ui-jolisearch .jolisearch-description.manufacturer,
.ui-jolisearch .jolisearch-description.category {
  height: 5rem;
}

.ui-jolisearch.ui-menu .ui-menu-item a {
  color: #06545a; /* $primary-800 */
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Hover/focus/active states */
.ui-jolisearch .ui-state-active,
.ui-jolisearch .ui-state-focus,
.ui-jolisearch.ui-menu .ui-menu-item a:hover,
.ui-jolisearch.ui-menu .ui-menu-item a.ui-state-hover,
.ui-jolisearch.ui-menu .ui-menu-item a.ui-state-focus {
  background: #f3e3cd !important; /* $background-elevated */
  border: 1px solid #4aafb5; /* $primary-300 */
  border-radius: 4px;
}

.ui-jolisearch.ui-menu .ui-menu-item a:hover .jolisearch-image,
.ui-jolisearch.ui-menu .ui-menu-item .ui-state-focus .jolisearch-image,
.ui-jolisearch.ui-menu .ui-menu-item .ui-state-hover .jolisearch-image {
  border: 1px solid #b1dbd5 !important; /* $background-accent */
}

/* Section titles */
.ui-jolisearch .jolisearch-title {
  background: #268187; /* $primary-500 */
  color: #fffaf3; /* $background-base */
  text-shadow: none;
  border-radius: 4px 4px 0 0;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ui-jolisearch .jolisearch-title:after {
  border-right-color: #1a767c; /* $primary-600 */
}

/* Product names */
.ui-jolisearch .jolisearch-name {
  color: #06545a; /* $primary-800 */
  font-weight: 500;
}

/* Categories */
.ui-jolisearch .jolisearch-description span.jolisearch-post {
  color: #06545a;
}

/* Result found */
.ui-jolisearch .jolisearch-description span.jolisearch-results {
  color:gray;
}

/* Prices */
.ui-jolisearch .jolisearch-description span.jolisearch-price {
  color: #ca8a04; /* $accent-600 */
  font-weight: 600;
}

/* More results */
.ui-jolisearch .jolisearch-post{
  color: #854d0e; /* $accent-800 */
}

/* Results count text */
.ui-jolisearch .jolisearch-results {
  color: #14666c; /* $primary-700 */
  font-style: italic;
}

/* Product images */
.ui-jolisearch .jolisearch-image {
  border: 1px solid #f3e3cd !important; /* $background-elevated */
  border-radius: 4px;
  transition: all 0.2s ease;
}