/*
=========================================================
BÚSQUEDA PREDICTIVA
---------------------------------------------------------
El panel cuelga del propio formulario, que pasa a ser el bloque de
referencia. Así sigue al buscador cuando la cabecera cambia de tamaño o de
posición —estado normal, estado compacto al hacer scroll y fila propia en
móvil— sin una sola regla por contexto.
=========================================================
*/

.site-search {
    position: relative;
}

.bz-search-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);

    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: var(--space-2);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-dark-surface);
    box-shadow: var(--shadow-lg);

    text-align: left;
}

.bz-search-panel[hidden] {
    display: none;
}


/* =========================================================
   GRUPOS
========================================================= */

.bz-search-group + .bz-search-group {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--bazinga-border-color);
}

.bz-search-group__title {
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   OPCIONES
========================================================= */

.bz-search-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    /* 44px de alto mínimo aunque no haya imagen. */
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);

    color: var(--bazinga-light);
    text-decoration: none;
}

/*
 * `is-active` la ponen tanto las flechas como el ratón, así que teclado y
 * puntero resaltan exactamente lo mismo y no puede haber dos opciones
 * marcadas a la vez.
 */
.bz-search-item.is-active,
.bz-search-item:hover {
    background: var(--bazinga-medium-surface);
}

.bz-search-item__img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bazinga-dark);
}

.bz-search-item__img--empty {
    display: block;
    background:
        repeating-linear-gradient(45deg,
            var(--bazinga-dark-surface) 0 8px,
            var(--bazinga-dark) 8px 16px);
}

.bz-search-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bz-search-item__title {
    overflow: hidden;
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-search-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El precio llega como HTML de WooCommerce, ya filtrado en el servidor. */
.bz-search-item__meta .amount,
.bz-search-item__meta bdi {
    color: var(--bazinga-gold);
    font-weight: 700;
}

.bz-search-item__meta del,
.bz-search-item__meta del .amount,
.bz-search-item__meta del bdi {
    color: var(--bazinga-text-secondary);
    font-weight: 400;
}

.bz-search-item__meta ins {
    text-decoration: none;
}

.bz-search-item__stock {
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--bazinga-color-agotado);
    color: var(--bazinga-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Enlace a la búsqueda completa: cierra la lista, así que se separa. */
.bz-search-item--all {
    justify-content: center;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--bazinga-border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    color: var(--bazinga-gold);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    text-align: center;
}


/* =========================================================
   ESTADOS
========================================================= */

.bz-search-state {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-5) var(--space-4);
    text-align: center;
}

.bz-search-state__title {
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
}

.bz-search-state__text {
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 12px;
}

.bz-search-state.is-hint .bz-search-state__title {
    color: var(--bazinga-text-secondary);
    font-weight: 400;
}

.bz-search-state.is-error .bz-search-state__title {
    color: var(--bazinga-color-agotado);
}

/*
 * Cargando: un indicador que gira, nunca un loader eterno. Si la petición
 * falla o se cancela, el estado se reemplaza por el resultado o por el
 * error; no hay ninguna ruta que deje este estado en pantalla.
 */
.bz-search-state.is-loading .bz-search-state__title::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--space-2);
    border: 2px solid var(--bazinga-border-color);
    border-top-color: var(--bazinga-electric-purple);
    border-radius: var(--radius-circle);
    vertical-align: -2px;
    animation: bz-spin .6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bz-search-state.is-loading .bz-search-state__title::before {
        animation-duration: 2s;
    }
}


/* =========================================================
   MÓVIL
   ---------------------------------------------------------
   No hay una segunda interfaz ni un segundo endpoint: es el mismo
   formulario y el mismo panel. Lo único que cambia es que en pantallas
   pequeñas el panel se despega del ancho del campo y ocupa el de la
   cabecera, porque en móvil el buscador ya está a ancho completo y una
   tarjeta de 48px más texto no cabe cómoda en menos.
========================================================= */

@media (max-width: 767px) {

    .bz-search-panel {
        /* Sale del padding lateral de la cabecera para ganar 32px. */
        left: calc(var(--padding-x) * -1);
        right: calc(var(--padding-x) * -1);

        max-height: min(60vh, 420px);
        border-radius: var(--radius-md);
    }

    .bz-search-item__img {
        width: 40px;
        height: 40px;
    }

    /*
     * El teclado virtual reduce mucho el alto útil. Al enfocar el campo el
     * navegador desplaza la página, y con `position: sticky` en la cabecera
     * el panel viaja con ella; el max-height en vh evita que sobresalga.
     */
}

@media (max-width: 480px) {

    .bz-search-item__title {
        white-space: normal;
        /* Dos líneas como mucho: un título largo no debe empujar la lista. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}


/* =========================================================
   PÁGINA DE RESULTADOS
   ---------------------------------------------------------
   Vive aquí y no en una hoja propia porque comparte lenguaje con el panel:
   la misma jerarquía de título, meta y precio. La hoja se carga en todo el
   frontend porque el buscador está en la cabecera, así que no añade ninguna
   petición extra en /?s=.
========================================================= */

.bz-search-results__header {
    margin-bottom: var(--space-8);
}

.bz-search-results__count {
    margin-top: var(--space-2);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-search-results {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
}

.bz-search-result {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
}

.bz-search-result__media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    aspect-ratio: 2 / 3;
    background: var(--bazinga-dark);
}

.bz-search-result__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bz-search-result__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            var(--bazinga-dark-surface) 0 10px,
            var(--bazinga-dark) 10px 20px);
}

.bz-search-result__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* Distingue producto de artículo sin depender del color. */
.bz-search-result__kind {
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bz-search-result--product .bz-search-result__kind {
    color: var(--bazinga-electric-purple);
}

/* Una guía se distingue del artículo también aquí, no solo por el texto. */
.bz-search-result--reading_guide .bz-search-result__kind {
    color: var(--bazinga-gold);
}

.bz-search-result__title {
    margin: 0;
    font-family: var(--header-font);
    font-size: 20px;
    line-height: 1.2;
}

.bz-search-result__title a {
    color: var(--bazinga-light);
}

.bz-search-result__title a:hover,
.bz-search-result__title a:focus-visible {
    color: var(--bazinga-gold);
}

.bz-search-result__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-search-result__price,
.bz-search-result__price .amount,
.bz-search-result__price bdi {
    color: var(--bazinga-gold);
    font-weight: 700;
}

.bz-search-result__price del,
.bz-search-result__price del .amount,
.bz-search-result__price del bdi {
    color: var(--bazinga-text-secondary);
    font-weight: 400;
}

.bz-search-result__price ins {
    text-decoration: none;
}

.bz-search-result__stock {
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--bazinga-color-agotado);
    color: var(--bazinga-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bz-search-result__excerpt {
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.6;
}

@media (max-width: 480px) {

    .bz-search-result {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: var(--space-4);
    }

    .bz-search-result__title {
        font-size: 17px;
    }
}

/* Guías de lectura dentro del panel. El distintivo va en el título, no solo
   en el encabezado del grupo: si alguien llega con las flechas directamente a
   una opción, tiene que saber qué es sin haber leído el grupo. */
.bz-search-item__kind {
    color: var(--bazinga-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}