/* Contenedor principal del searchbar */
#search_widget {
    position: relative;
    margin: 20px 0 !important;
    margin-left: 20px !important;
    margin-right: auto !important; /* Forzar alineación izquierda */
    max-width: 600px;
    width: 100%;
    float: left !important; /* Forzar flotación izquierda */
}

/* Formulario del buscador para posicionamiento interno */
#search_widget form {
    position: relative;
}

/* Campo de búsqueda */
#search_widget input[type="text"],
#search_widget input[name="s"] {
    /* Modificar apariencia del input */
    border: none !important;
    border-radius: 8px;
    padding: 10px 44px 10px 15px; /* espacio para la lupa a la derecha */
    font-size: 14px;
    outline: none;
    background: #f1f1f1 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Botón de búsqueda */
/* Ocultar el botón submit por defecto del tema dentro del search_widget
   (usaremos la nueva lupa interna en su lugar) */
#search_widget button[type="submit"]:not(.semantic-search-btn) {
    display: none !important;
}

/* Botón de lupa interno creado por JS */
#search_widget .semantic-search-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f1f1f1 !important;
    color: #555;
    cursor: pointer;
    padding: 0 !important; /* cancelar padding genérico */
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
}

#search_widget .semantic-search-btn:hover {
    color: #111;
}

/* Asegurar que el SVG escale correctamente */
#search_widget .semantic-search-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Resultados de búsqueda (dropdown) */


/* Ocultar icono de búsqueda suelto si existiera para evitar duplicado */
#search_widget > form > i.material-icons.search {
    display: none !important;
}

/* Ajustar el contenedor padre si es necesario */
.col-header-center {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Estilos para el dropdown de autocompletado */
.ui-autocomplete.searchbar-autocomplete {
  width: 100%;
  min-height: 100%;
  border: none;
  max-width: 600px;
}

.ui-autocomplete.searchbar-autocomplete li a,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
  padding: 8px 15px;
  overflow: auto;
  border: none;
  background: none;
  margin: auto;
  border-radius: 0;
  border-bottom: 1px solid #eee; /* Línea gris fina separadora */
  display: flex;
  align-items: center; /* Alinear imagen y nombre verticalmente */
}

.ui-autocomplete.searchbar-autocomplete li a:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
  width: 50px;
  height: auto;
  margin-right: 8px;
  border: 1px solid #ccc; /* Borde gris de 1px */
  border-radius: 4px; /* Bordes redondeados */
  flex-shrink: 0; /* Evitar que la imagen se encoja */
}

@media only screen and (min-width: 768px) {
  .ui-autocomplete.searchbar-autocomplete {
    width: 400px;
    min-height: auto;
    left: 0;
  }
}