/* =========================================================
   HEADER SEARCH (Global)
   Komod — Clean Google-style search in header
   ========================================================= */

/* Контейнер поиска в хедере */
.header-search {
    flex: 1;
    max-width: 520px;
    margin: 0 24px;
}

/* Скрываем "таблетки" фильтров (popup blocks at the bottom), 
   которые генерирует JS, так как в шапке мало места */
.header-search .komod-typeahead-pills {
    display: none !important;
}

/* Форма */
.header-search .search-form {
    width: 100%;
}

/* Обёртка поля */
.header-search .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 99px; /* Полностью круглые края */
    padding: 4px 14px; /* Компактные отступы */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hover / focus */
.header-search .search-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(79,70,229,0.1);
}

/* Input */
.header-search .search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 8px 8px 4px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text-heading);
    background: transparent;
    min-width: 0;
}

.header-search .search-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}

/* Убираем стандартный крестик браузера */
.header-search .search-input::-webkit-search-decoration,
.header-search .search-input::-webkit-search-cancel-button,
.header-search .search-input::-webkit-search-results-button,
.header-search .search-input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

/* --- КНОПКИ СПРАВА (Крестик и Лупа) --- */

/* Общие стили для кнопок внутри поиска */
.header-search .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.header-search .btn-icon i {
    font-size: 1.2rem;
}

/* Крестик (Reset) */
.header-search .btn-reset {
    color: #9CA3AF; /* Светло-серый */
    /* Скрываем по умолчанию, показываем JS-ом или через :not(:placeholder-shown) */
    display: none; 
}

.header-search .search-input:not(:placeholder-shown) ~ .btn-reset {
    display: inline-flex; /* Показываем, если есть текст */
}

.header-search .btn-reset:hover {
    color: var(--color-danger);
}

/* Лупа (Submit) */
.header-search .btn-search {
    color: var(--color-text-muted); /* Серый, не синий */
    margin-left: 4px;
}

.header-search .btn-search:hover {
    color: var(--color-primary); /* При наведении - цвет бренда */
}

/* Разделитель между крестиком и лупой (опционально) */
.header-search .search-separator {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 4px;
    display: none;
}
.header-search .search-input:not(:placeholder-shown) ~ .search-separator {
    display: block;
}

/* =========================================================
   TYPEAHEAD DROPDOWN (выпадающий список)
   ========================================================= */

.header-search .komod-typeahead {
    /* Стили задаются глобально в search-typeahead.js, 
       но здесь можно переопределить специфику для хедера */
    border-radius: 16px;
    margin-top: 8px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .header-search {
        max-width: 400px;
        margin: 0 16px;
    }
}

@media (max-width: 992px) {
    .header-search {
        display: none; /* На мобильных поиск скрыт или в отдельном меню */
    }
}