/**
 * Typesense search UI — instant preview, filter rail, interpretation chips.
 *
 * Written against the bio-o3 child theme (Bootstrap 5). Colours come from the
 * theme's custom properties where they exist so the module follows a palette
 * change rather than pinning the green.
 */

/* --- instant preview ----------------------------------------------------- */

form[name="search"] {
    position: relative;
}

.bio-ts-suggest {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    overflow: hidden;
}

.bio-ts-suggest[hidden] {
    display: none;
}

.bio-ts-suggest__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.bio-ts-suggest__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f1f3f5;
}

.bio-ts-suggest__item.is-active .bio-ts-suggest__link,
.bio-ts-suggest__link:hover,
.bio-ts-suggest__link:focus {
    background: #f6f9ef;
    color: inherit;
    text-decoration: none;
}

.bio-ts-suggest__thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 40px;
}

.bio-ts-suggest__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.bio-ts-suggest__title {
    font-size: .9rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-ts-suggest__meta {
    font-size: .75rem;
    color: #6c757d;
}

.bio-ts-suggest__price {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.bio-ts-suggest__all {
    display: block;
    padding: .5rem .75rem;
    font-size: .85rem;
    text-align: center;
    background: #f8f9fa;
    color: var(--bs-primary, #8eb61e);
    text-decoration: none;
}

.bio-ts-suggest__all:hover {
    text-decoration: underline;
}

/* --- interpretation chips ------------------------------------------------ */

.bio-ts-intent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-bottom: 1rem;
    font-size: .875rem;
}

.bio-ts-intent__label {
    color: #6c757d;
}

/* Bootstrap's .badge sets `--bs-badge-color: #fff` and then `color:
   var(--bs-badge-color)`, both at single-class specificity. Overriding the
   variable from a lone `.bio-ts-chip` rule therefore only wins if this file
   happens to load after Bootstrap, which it does not — the chip rendered white
   on near-white in production. Qualifying with .badge raises specificity above
   Bootstrap's own rule so the colour holds whatever the load order. */
.badge.bio-ts-chip {
    --bs-badge-color: #4a5f10;
    --bs-badge-font-size: .8125em;
    background: #f6f9ef;
    color: #4a5f10;
    border: 1px solid #d6e4ac;
    font-weight: 500;
    font-size: .8125rem;
}

.bio-ts-intent__reset {
    margin-left: .25rem;
    font-size: .8125rem;
    color: #6c757d;
}

/* --- filter rail --------------------------------------------------------- */

.bio-ts-facets__form {
    padding: 1rem;
    background: #fbfcf8;
    border: 1px solid #e9ecef;
    border-radius: .375rem;
}

.bio-ts-facets__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e9ecef;
}

.bio-ts-facets__head a {
    font-size: .8125rem;
}

.bio-ts-facet {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
}

.bio-ts-facet__title {
    float: none;
    width: auto;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .375rem;
}

.bio-ts-facet__option {
    font-size: .875rem;
    margin-bottom: .125rem;
}

.bio-ts-facet__count {
    color: #adb5bd;
    font-size: .75rem;
}

/* Long facets collapse to the first eight values until "show all" is used. */
.bio-ts-facet__option--extra {
    display: none;
}

.bio-ts-facet.is-expanded .bio-ts-facet__option--extra {
    display: block;
}

.bio-ts-facet__more {
    padding: 0;
    font-size: .8125rem;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .bio-ts-facets {
        margin-bottom: 1rem;
    }
}