/* search.css — выпадающие подсказки поиска.
 *
 * ЧТО ИЗМЕНЕНО
 *
 * Файл был написан под тёмную тему: фон #1a1c20, текст #e8eaed, тень
 * rgba(0,0,0,.45). Цвета брались из переменных --t-* с ТЁМНЫМИ запасными
 * значениями — а сайт светлый, и там, где переменные не объявлены, список
 * получал почти чёрный фон со светлым текстом. Теперь наоборот: базовые
 * значения светлые, тёмная тема — отдельным блоком по data-bs-theme.
 *
 * Переменные --t-* сохранены: если тема их задаёт, она по-прежнему главнее.
 */

.search-suggest-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;

    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;

    background: var(--t-bg-elevated, #fff);
    border: 1px solid var(--t-border, #e3e8ee);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .16);

    display: none;
}

.search-suggest-box.show { display: block; }

/* ── найденное ── */

.ss-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .12s;
}

.ss-item:hover { background: var(--t-bg-hover, rgba(16, 24, 40, .05)); }

.ss-poster {
    width: 42px;
    height: 63px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    background: #eef1f5;
}

.ss-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ss-title {
    font-weight: 600;
    font-size: .92rem;
    color: var(--t-text, #17212b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-year { color: var(--t-text-muted, #6b7683); font-weight: 400; }

.ss-orig {
    font-size: .8rem;
    color: var(--t-text-muted, #6b7683);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-meta { font-size: .76rem; color: var(--t-text-faint, #8a95a1); }

.ss-empty {
    padding: 16px;
    text-align: center;
    color: var(--t-text-muted, #6b7683);
    font-size: .88rem;
}

/* ── история запросов ── */

.ss-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: .78rem;
    color: var(--t-text-muted, #6b7683);
}

.ss-clear {
    padding: 0;
    background: none;
    border: 0;
    color: var(--t-accent, #0d6efd);
    font-size: .78rem;
    cursor: pointer;
}

.ss-hist {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: .9rem;

    /* Прошлый запрос — это текст, а не ссылка на релиз. Цвет и насыщенность
       задаются здесь явно: без этого пункты наследовали оформление ссылок
       сайта, выходили жирными и синими, и список читался как выдача —
       человек ждал от него карточек. */
    font-weight: 400;
    color: var(--t-text, #17212b) !important;
}

.ss-hist:hover { background: var(--t-bg-hover, rgba(16, 24, 40, .05)); }

.ss-hist span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-hist svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* При 14px иконка часов сливалась в сплошной серый кружок: стрелки
       переставали различаться. Чуть крупнее и бледнее. */
    color: var(--t-text-faint, #8a95a1);
    opacity: .6;
}

/* ── тёмная тема ── */

body[data-bs-theme='dark'] .search-suggest-box {
    background: var(--t-bg-elevated, #1a1c20);
    border-color: var(--t-border, #2c2f34);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

body[data-bs-theme='dark'] .ss-item:hover,
body[data-bs-theme='dark'] .ss-hist:hover { background: var(--t-bg-hover, rgba(255, 255, 255, .06)); }

body[data-bs-theme='dark'] .ss-title  { color: var(--t-text, #e8eaed); }
body[data-bs-theme='dark'] .ss-hist   { color: var(--t-text, #d5d8dc) !important; }
body[data-bs-theme='dark'] .ss-orig,
body[data-bs-theme='dark'] .ss-head,
body[data-bs-theme='dark'] .ss-empty,
body[data-bs-theme='dark'] .ss-year   { color: var(--t-text-muted, #9aa0a6); }
body[data-bs-theme='dark'] .ss-meta,
body[data-bs-theme='dark'] .ss-hist svg { color: var(--t-text-faint, #6b7178); }
body[data-bs-theme='dark'] .ss-poster { background: #000; }
body[data-bs-theme='dark'] .ss-clear  { color: var(--t-accent, #5aa9ff); }