/* ============================================================
   BUSCADOR — sobreescritura de modules/ps_searchbar/ps_searchbar.css

   SUSTITUYE al fichero del módulo, no se suma a él: PrestaShop sirve este
   en su lugar. Por eso aquí está TODO lo que el buscador necesita, también
   lo del autocompletado, que es lo único del original que valía.

   POR QUÉ ESTÁ AQUÍ Y NO EN EL TEMA. El módulo viste el campo con
   `#search_widget form input`, que es (1,0,2): un id. Ninguna regla de
   clases del tema le gana, así que desde theme.css el campo salía con su
   caja gris redondeada en vez de la raya del lienzo —fondo #f1f1f1,
   `border: none` comiéndose el borde inferior, relleno de 40 px a la
   izquierda para un icono que este tema no pinta— por mucho que theme.css
   se cargue después. Sobreescribiendo el fichero del módulo, esas reglas
   dejan de existir y no hay nada contra lo que pelear.

   Regla de la casa: el CSS de un módulo se hace en su sobreescritura, no
   en el tema.

   MARCADO   themes/acuadros/modules/ps_searchbar/ps_searchbar.tpl
   ACOPLADO  a ps_searchbar.js, que engancha #search_widget e i.clear. Los
             dos <i> son glifos de Material Icons y este tema no carga esa
             tipografía: se ocultan, y la lupa del panel de móvil la pinta
             el tema en su propia fila.
   ============================================================ */

#search_widget {
    width: 100%;
    margin: 0;
    overflow: visible;
}

#search_widget form {
    position: relative;
    display: flex;
    align-items: center;
}

/* La lupa de la izquierda no se usa: en escritorio el icono esta en la barra
   y en movil lo pinta el tema en su propia fila. */
#search_widget form i.search {
    display: none;
}

/* EL ASPA DE «LIMPIAR» NO SE PUEDE OCULTAR CON CSS. ps_searchbar.js la enseña
   con `$clearButton.toggle(...)`, que escribe `display: inline-block` EN
   LINEA, y un estilo en linea gana a cualquier hoja. Salia el texto crudo
   «clear», porque es una ligadura de Material Icons y este tema no carga esa
   tipografia.

   Asi que en vez de pelearla se le da forma: se apaga el texto con
   `font-size: 0` —el elemento sigue ahi y sigue siendo pulsable, que es lo
   que hace la funcion— y el aspa se dibuja de fondo. */
#search_widget form i.clear {
    position: static;
    flex: none;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
}

#search_widget form i.clear:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

#search_widget form input[type="text"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid #111;
    border-radius: 0;
    outline: none;
    background: none;
    color: inherit;
    font: inherit;
}

#search_widget form input[type="text"]::placeholder {
    color: #888;
    opacity: 1;
}

/* Dentro del panel de móvil el campo va sobre la raya de la propia fila,
   así que no lleva la suya ni el hueco de debajo. */
@media (max-width: 992px) {
    .header__navsearch #search_widget form input[type="text"] {
        padding: 0;
        border-bottom: 0;
        /* 16 y no 15: por debajo de eso Safari de iOS hace zoom al enfocar y
           no lo deshace al salir. */
        font-size: 16px;
    }
}

/* --- Sugerencias mientras se escribe --------------------------------------

   Las pinta jQuery UI, no el módulo: `_renderItem` de ps_searchbar.js monta
   `<li><a><img class="autocomplete-thumbnail"><span class="product">`, y el
   widget le cuelga a la lista sus clases `ui-autocomplete ui-menu ui-widget
   ui-widget-content ui-corner-all`.

   OJO CON EL ORDEN. Las cinco hojas de jQuery UI (`js/jquery/ui/themes/base/`)
   cargan DESPUÉS que esta, así que a igual especificidad ganan ellas. Lo que
   hay que batir, y con cuánto:

     .ui-widget                          (0,1,0)  font-family: Verdana
     .ui-widget-content                  (0,1,0)  borde gris y fondo propio
     .ui-menu .ui-menu-item a            (0,3,0)  padding 2px .4em
     .ui-menu .ui-menu-item a.ui-state-focus  (0,4,0)

   Por eso aquí se usa `.ui-autocomplete.searchbar-autocomplete` como ancla:
   son dos clases en el mismo compuesto, así que cada regla sale con un punto
   más que la suya sin encadenar selectores kilométricos.

   El aspecto es el del desplegable de «Mi cuenta» del lienzo: panel blanco de
   320 con su sombra, filas de 60 separadas por una raya clara y realce en
   #f5f5f5. Así el buscador abierto y sus sugerencias son la misma pieza. */

.ui-autocomplete.searchbar-autocomplete {
    /* jQuery UI escribe `top` y `left` en línea, así que lo único que queda
       para cuadrarlo con el panel son los márgenes: 16 a la izquierda es el
       relleno lateral del panel, y 14 arriba es el de abajo. */
    width: 320px;
    max-width: calc(100vw - 32px);
    margin: 14px 0 0 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    color: #111;
    font: inherit;
    list-style: none;
}

.ui-autocomplete.searchbar-autocomplete .ui-menu-item {
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
}

.ui-autocomplete.searchbar-autocomplete .ui-menu-item + .ui-menu-item {
    border-top: 1px solid #e5e5e5;
}

.ui-autocomplete.searchbar-autocomplete .ui-menu-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: #111;
    font: inherit;
    line-height: 1.3;
    text-decoration: none;
}

.ui-autocomplete.searchbar-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a.ui-state-active,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a:hover {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #f5f5f5;
    color: #111;
    font-weight: inherit;
}

/* La miniatura, como en la tarjeta de obra: la pieza entera sobre el gris del
   lienzo, sin recortar. */
.ui-autocomplete.searchbar-autocomplete .autocomplete-thumbnail {
    flex: none;
    float: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain;
    background: #f4f4f2;
}

.ui-autocomplete.searchbar-autocomplete .product {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dentro del panel de móvil el buscador ocupa el ancho de la pantalla y las
   sugerencias van ancladas a la barra, no al campo: sin márgenes. */
@media (max-width: 992px) {
    /* Aqui la lista cuelga de .header__navsearch —lo hace header.js con la
       opcion `appendTo` del widget—, asi que el 100% ya es el ancho de la
       fila y se desplaza con el panel. */
    .ui-autocomplete.searchbar-autocomplete {
        width: 100%;
        max-width: none;
        margin: 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    }
}