/**
 * Dropdown d'autocomplete pour la barre de recherche du thème cotipro.
 * Cible : `.coti-search-suggest` injecté dans `#search_widget`
 * (cf themes/cotipro/modules/ps_searchbar/ps_searchbar.tpl).
 *
 * Conventions :
 *   - nesting CSS natif (jamais &__ BEM-SASS)
 *   - variables du thème (--main-color, --header-bg-color)
 *   - préfixe `coti-`
 */

.coti-search-host {
    position: relative;

    .coti-search-suggest {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        margin-top: 4px;
        max-height: 60vh;
        overflow-y: auto;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

        &[hidden] {
            display: none;
        }

        .coti-search-empty {
            padding: 12px 14px;
            color: #6c757d;
            font-size: 0.9rem;
            font-style: italic;
        }

        .coti-search-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            text-decoration: none;
            color: inherit;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            transition: background-color 120ms ease;

            &:last-child {
                border-bottom: 0;
            }

            &:hover,
            &.is-active {
                background-color: var(--header-bg-light, rgba(0, 0, 0, 0.04));
                color: var(--main-color, inherit);
            }
        }

        .coti-search-thumb {
            flex: 0 0 auto;
            width: 44px;
            height: 44px;
            object-fit: contain;
            background-color: #f5f5f5;
            border-radius: 3px;
        }

        .coti-search-thumb-empty {
            display: inline-block;
        }

        .coti-search-meta {
            display: flex;
            flex-direction: column;
            min-width: 0;
            flex: 1 1 auto;
        }

        .coti-search-name {
            font-size: 0.92rem;
            line-height: 1.2;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .coti-search-price {
            font-size: 0.85rem;
            color: var(--main-color, #c8102e);
            margin-top: 2px;
            font-weight: 600;
        }
    }

    @media (max-width: 575px) {
        .coti-search-suggest {
            max-height: 70vh;
            font-size: 0.95rem;
        }
    }
}