/* ============================================================
   GLOBAL SEARCH — ИНЛАЙН-ВЫДАЧА на главной (js/global-search.js).
   «Как в Google»: список результатов появляется на самой странице
   под строкой поиска; диаграмма модулей плавно уступает место.
   Токены семантические — работает во всех 6 темах.
   ============================================================ */

/* Плавное исчезновение диаграммы при поиске */
.ecosystem-section {
    transition: opacity 0.22s ease;
}

.ecosystem-section.search-fading { opacity: 0; }
.ecosystem-section.search-hidden { display: none; }

/* Контейнер выдачи — та же колонка, что у строки поиска */
.gsearch-inline {
    max-width: 700px;
    margin: 0 auto 60px;
    padding: 0 20px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.gsearch-inline.show { opacity: 1; }

.gsearch-group + .gsearch-group {
    margin-top: var(--space-5);
}

.gsearch-group-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding: 0 var(--space-4) var(--space-2);
}

/* Результат — строка в духе поисковой выдачи */
.gsearch-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-md);
    border-inline-start: 2px solid transparent;
    transition: background var(--transition-fast);
}

.gsearch-item:hover,
.gsearch-item.active {
    background: var(--accent-soft);
    border-inline-start-color: var(--accent);
}

.gsearch-item-title {
    font-size: 15px;
    color: var(--text-1);
    line-height: 1.5;
}

.gsearch-item-title.ar {
    font-family: var(--font-arabic);
    font-size: var(--text-lg);
    line-height: var(--leading-arabic);
}

.gsearch-item-sub {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin-top: 2px;
}

/* Статус халяль-ингредиента — цветная метка слева */
.gsearch-item.st-haram    { border-inline-start-color: var(--danger); }
.gsearch-item.st-halal    { border-inline-start-color: var(--success); }
.gsearch-item.st-doubtful { border-inline-start-color: var(--warning); }

.gsearch-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-sm);
}

/* После вступительного стаггера анимации нод отключаются — иначе они
   перезапускаются при каждом возврате диаграммы из режима поиска */
.ecosystem-section.gsearch-anim-done .outer-node,
.ecosystem-section.gsearch-anim-done .center-node {
    animation: none;
}

.ecosystem-section.gsearch-anim-done .connection-line {
    animation: none;
    stroke-dashoffset: 0;
}