/**
 * @package    Alfa Commerce
 * @copyright  (C) 2024-2026 Easylogic CO LP / Agamemnon Fakas. All rights reserved.
 * @license    GNU General Public License version 3 or later; see LICENSE
 *
 * Storefront search enhancement panel.
 *
 * Namespaced on the ROOT only (`alfa-search-enhance`); descendants are plain names scoped
 * under it, so the panel cannot leak styles into a template and a template cannot reach in.
 * No framework classes: the storefront must not require Bootstrap.
 */

.alfa-search-enhance {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--alfa-surface);
    border: 1px solid var(--alfa-hairline);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem 0;
    text-align: start;
}

.alfa-search-enhance[hidden] {
    display: none;
}

.alfa-search-enhance .search-empty {
    margin: 0;
    padding: 0.75rem 0.9rem;
    opacity: 0.7;
}

.alfa-search-enhance .search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--alfa-hairline);
}

.alfa-search-enhance .search-suggestion {
    font: inherit;
    cursor: pointer;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--alfa-hairline);
    border-radius: 999px;
    background: transparent;
}

/* Keyboard highlight is a STATE the script stamps as a data-attribute; the script
   owns no classes, so state selectors are attribute selectors. */
.alfa-search-enhance .search-suggestion:hover,
.alfa-search-enhance .search-suggestion[data-active] {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.alfa-search-enhance .search-section-title {
    margin: 0;
    padding: 0.5rem 0.9rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.alfa-search-enhance .search-row {
    display: block;
    padding: 0.45rem 0.9rem;
    color: inherit;
    text-decoration: none;
}

/* Only navigable rows advertise interactivity: an unrouted row keeps the template's
   anchor but loses its href (and carries data-unrouted), so the hook is [href]. */
.alfa-search-enhance .search-row[href] {
    cursor: pointer;
}

.alfa-search-enhance .search-row:hover,
.alfa-search-enhance .search-row[data-active] {
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.alfa-search-enhance .search-row-title {
    display: block;
}

.alfa-search-enhance .search-row-desc {
    display: block;
    font-size: 0.8125rem;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}