/* Стили для выпадающего списка */
.select {
    position: relative; /* Позиционирование для абсолютного позиционирования выпадающего списка */
    display: inline-block; /* Отображение в строку */
/*  width: 250px;  Ширина выпадающего списка */
/* 	margin-bottom: 20px; Отступ снизу */
}

/* Стиль для выбранного элемента выпадающего списка */
.select-select {
    display: flex; /* Использование flexbox для выравнивания */
    align-items: center; /* Вертикальное выравнивание по центру */
    justify-content: space-between; /* Распределение пространства между элементами */
    padding: 8px; /* Отступы внутри элемента */
    border: 1px solid var(--border-color, #ccc); /* Граница с fallback */
    border-radius: 15px; /* Закругленные углы */
    background-color: var(--form-control-bg, #f0f0f0); /* Фон с fallback */
    cursor: pointer; /* Курсор в виде указателя */
    min-width: 150px; /* Минимальная ширина */
    max-width: 550px; /* Максимальная ширина */
    overflow: hidden; /* Скрыть переполнение */
    white-space: nowrap; /* Запрет на перенос строк */
    text-overflow: ellipsis; /* Добавить многоточие */
    color: var(--form-control-tx, #000); /* Цвет текста с fallback */
}

/* Стиль для стрелки выпадающего списка */
.select-arrow {
    margin-left: 10px; /* Отступ слева */
    border: solid transparent; /* Прозрачные границы для создания стрелки */
    border-width: 5px 5px 0 5px; /* Размеры границ для создания треугольника */
    border-top-color: var(--text-primary, #000); /* Цвет стрелки берётся из темы или чёрный */
    transition: transform 0.2s; /* Плавный переход при вращении стрелки */
}

/* Поворот стрелки при открытом выпадающем списке */
.select.open .select-arrow {
    transform: rotate(180deg); /* Поворот стрелки на 180 градусов */
}

/* Стили для выпадающего списка опций */
.select-options {
    display: none; /* Скрытие по умолчанию */
    position: absolute; /* Абсолютное позиционирование */
    background-color: var(--bg-secondary, white); /* Фон выпадающего списка */
    border: 1px solid var(--border-color, #ccc); /* Граница с fallback */
    border-radius: 15px; /* Закругленные углы */
    width: 100%; /* Ширина равна 100% от родительского элемента */
    min-width: 150px; /* Минимальная ширина */
    max-width: 550px; /* Максимальная ширина */
    z-index: 1; /* Установка порядка отображения */
    max-height: 400px; /* Максимальная высота видимой области */
    overflow-y: auto; /* Полоса прокрутки по вертикали */
    text-align: left; /* Выравнивание текста по левому краю */
    box-shadow: var(--shadow, 0 2px 5px rgba(0,0,0,0.1)); /* Тень с fallback */
}

/* Стиль для каждой опции в выпадающем списке */
.select-option {
    padding: 10px; /* Отступы внутри опции */
    cursor: pointer; /* Курсор в виде указателя */
    text-align: left; /* Выравнивание текста по левому краю */
    color: var(--form-control-tx, #212529); /* Цвет текста опции */
    background-color: var(--bg-secondary, #fff); /* Фон опции */
}

/* Стиль для выбранной опции */
.select-option.selected {
    background-color: #A0D3FF; /* Фоновый цвет выбранной опции — фиксированный, так как не зависит от темы */
    color: #000; /* Цвет текста выбранной опции — чёрный для контраста */
}

/* Стиль для опции при наведении */
.select-option:hover {
    background-color: var(--bg-primary, #ddd); /* Фон при наведении с fallback */
}

/* Стиль для обертки количества */
.select-count-wrap {
    display: inline-flex; /* Размещение элементов в строку */
    align-items: center; /* Вертикальное выравнивание */
}

/* Стиль для скобок */
.select-count-bracket {
    color: var(--text-secondary, gray); /* Серый цвет для скобок */
    font-size: 14px; /* Размер шрифта */
}

/* Стиль для числа */
.select-count-number {
    color: #4EA0ED; /* Синий цвет для числа — сохранён как в оригинале */
    font-weight: bold; /* Жирный шрифт */
    margin: 0 2px; /* Отступы между скобками и числом */
    font-size: 80%; /* Уменьшение размера шрифта */
}