/* Общие утилиты только для страницы каталога */
.min-vh-80 {
    min-height: 80vh;
}

.max-w-800 {
    max-width: 800px;
}

/* Иконки Material Symbols — нормальная высота строки */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
    line-height: 1;
}

/* Кнопки-иконки в правой панели поиска */
.btn.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .75rem;
}

/* Убираем caret у кнопки dropdown */
.icon-toggle.dropdown-toggle::after {
    display: none;
}

/* Меню фильтра производителей */
.mf-menu {
    min-width: 320px;
}

/* Точка-индикатор на кнопке фильтра (если выбрано что-то) */
.mf-widget .rounded-circle {
    width: 8px;
    height: 8px;
    padding: 0 !important; /* чтобы не "распухала" от p-1 в разметке */
    border-width: 2px !important;
}

/* Автокомплит под строкой поиска */
.autocomplete-suggestions {
    position: absolute;
    z-index: 1040; /* поверх .dropdown-menu */
    left: 0;
    right: 0; /* растянуть под инпут */
    top: 100%;
    margin-top: .25rem;
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
}

/* Доп. косметика таблицы результатов (необязательно) */
.table td small .source-link {
    text-decoration: none;
}

    .table td small .source-link:hover {
        text-decoration: underline;
    }

/* Dropdown меню скрыто по умолчанию; показываем как flex ТОЛЬКО когда .show */
.dropdown-menu.mf-menu {
    display: none; /* не вмешиваемся в bootstrap по умолчанию */
}

    .dropdown-menu.mf-menu.show {
        display: flex; /* при открытии — flex-колонка */
        flex-direction: column;
        gap: .5rem;
        width: 360px;
        max-width: 90vw;
        max-height: 80vh; /* не выше экрана */
        overflow: hidden; /* прокрутка только внутри списка */
    }

/* Прокручиваемая зона со списком */
.mf-list-wrap {
    flex: 1 1 auto;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .25rem .5rem;
    background: var(--bs-body-bg);
}

/* Низ — всегда на виду */
.mf-actions {
    position: sticky;
    bottom: -1rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bs-body-bg) 40%);
    z-index: 1;
}

/* Пункты списка */
.mf-item + .mf-item {
    margin-top: .125rem;
}

.mf-item label {
    padding: .375rem .25rem;
    border-radius: .375rem;
    cursor: pointer;
}

    .mf-item label:hover {
        background: var(--bs-secondary-bg);
    }

.mf-item .badge {
    font-weight: 500;
}

/* Кнопки без переносов */
.mf-actions .btn {
    white-space: nowrap;
}

/* Аккуратный скролл (опционально) */
.mf-list-wrap::-webkit-scrollbar {
    width: 8px;
}

.mf-list-wrap::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 4px;
}

.mf-list-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.2) transparent;
}

/* ====== Низ выпадашки: делаем две группы одинаковой ширины ====== */
.mf-actions > .d-flex { /* контейнер с двумя группами */
    gap: .5rem; /* ровный зазор между группами */
}

.mf-actions > .d-flex .btn-group .btn { /* сами кнопки внутри группы одинаковой ширины */
   flex: 1 1 0;
   white-space: nowrap; /* без переносов текста на кнопках */
}

.mf-actions > .d-flex .btn-group {
   flex-basis: 100%;
}