#search_widget {
  margin-bottom: .625rem;
  overflow: visible;
}

#search_widget form {
  position: relative;
  width: 100%;
}

#search_widget form i {
  position: absolute;
  padding: .5rem;
}

#search_widget form i.clear,
#search_widget .clear {
  display: none !important;
}

#search_widget form input {
  width: 100%;
  padding: 10px 2.75rem 10px 1.25rem;
  outline: none;
  background-color: #f1f1f1;
  border: none;
  border-radius: var(--weu-radius-tag);
}

.ui-autocomplete.searchbar-autocomplete {
  width: 100%;
  min-height: 100%;
  border: none;
}

.ui-autocomplete.searchbar-autocomplete li a,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
  padding: var(--weu-spacing-xs) var(--weu-spacing-sm);
  overflow: auto;
  border: none;
  background: none;
  margin: auto;
  border-radius: 0;
}

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

.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
  float: left;
  width: 50px;
  height: auto;
  margin-right: 8px;
}

/* ===== Buscador móvil (offcanvas superior) =====
   El offcanvas base ocupaba todo el alto del viewport con fondo blanco, por lo
   que al abrirse rellenaba de blanco todo el cuerpo. Lo reducimos a la altura de
   su cabecera para que solo se vea la barra de búsqueda sobre la cabecera. */
.search__offcanvas.offcanvas-top {
  height: auto !important;
  bottom: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Entrada llamativa: deslizamiento con un ligero rebote. */
  transition: transform .4s cubic-bezier(.34, 1.4, .5, 1) !important;
}

.search__offcanvas .offcanvas-header {
  min-height: 64px;
  gap: .5rem;
  background: var(--weu-header-bg, #1d1d1d);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

/* Botón de cerrar visible (aspa blanca sobre la cabecera oscura). */
.search__offcanvas .offcanvas-header .btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: .4rem;
  font-size: 0;
  opacity: .9;
  filter: invert(1) grayscale(100%) brightness(200%);
  transition: opacity .2s ease, transform .2s ease;
}

.search__offcanvas .offcanvas-header .btn-close:hover,
.search__offcanvas .offcanvas-header .btn-close:focus-visible {
  opacity: 1;
  transform: scale(1.08);
}

/* Buscador móvil (offcanvas): el cuadro debe ocupar todo el ancho disponible.
   El input tomaba su ancho intrínseco (~237px) porque nada lo forzaba a 100%. */
.search__offcanvas .offcanvas-header #_mobile_search,
.search__offcanvas .offcanvas-header .search__container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.search__offcanvas #_mobile_search #search_widget,
.search__offcanvas #_mobile_search #search_widget form,
.search__offcanvas #_mobile_search .js-search-input {
  width: 100%;
  min-width: 0;
}

#_mobile_search #search_widget {
  margin-bottom: 0;
}

/* Aparición llamativa del propio cuadro (pop + fundido) al mostrarse. */
.search__offcanvas .search__container {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .32s ease .08s, transform .32s ease .08s;
}

.search__offcanvas.show .search__container {
  opacity: 1;
  transform: none;
}

/* Realce del input al enfocarlo (anillo de foco de la marca). */
.search__offcanvas #_mobile_search #search_widget form input {
  transition: box-shadow .25s ease, background-color .25s ease;
}

.search__offcanvas #_mobile_search #search_widget form input:focus {
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(234, 30, 28, .35);
}

/* La lupa (y el aspa de limpiar) heredaban el color blanco de la cabecera oscura
   del offcanvas, quedando invisibles sobre el input claro: forzamos negro. */
.search__offcanvas #_mobile_search .search.js-search-icon {
  color: var(--weu-color-dark, #000);
}

@media only screen and (min-width: 768px) {
  #search_widget {
    float: right;
    margin-bottom: 0;
  }

  #header .header-bottom .search__desktop #search_widget {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .ui-autocomplete.searchbar-autocomplete {
    width: 400px;
    min-height: auto;
    left: auto;
  }
}

@media only screen and (min-width: 992px) {
  #header .header-bottom .search__desktop,
  #header .header-bottom .search__desktop #_desktop_search,
  #header .header-bottom .search__desktop #search_widget,
  #header .header-bottom .search__desktop #search_widget form,
  #header .header-bottom .search__desktop #search_widget form input {
    width: 100%;
    max-width: none;
  }

  #header .header-bottom .search__desktop #search_widget {
    min-width: 0;
    margin-bottom: 0;
  }

  #header .header-bottom .search__desktop #search_widget form {
    margin-left: 0;
  }
}