/* ==========================================================================
   Стили для модуля поиска плейлистов
   ========================================================================== */

/* Главный контейнер поиска плейлистов */
.search-container-playlist {
    margin-bottom: 20px;
    position: relative; /* Необходимо для абсолютного позиционирования выпадающего списка */
    width: 100%;
    max-width: 500px; /* Ограничиваем максимальную ширину блока поиска */
}

/* Поле ввода (инпут) */
#search-input {
    width: 100%;
    max-width: 500px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* Чтобы паддинги не раздували ширину инпута */
}

/* Выпадающий список результатов поиска */
.search-results {
    display: none; /* Скрыт по умолчанию, плагин JS включает его через класс .show */
    position: absolute !important; /* Позиционируем строго под инпутом */
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 200px !important; /* Ограничение по высоте, если результатов много */
    overflow-y: auto !important; /* Скролл при превышении высоты */
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-radius: 0 0 4px 4px; /* Скругление нижних углов рамки */
    z-index: 9999 !important; /* Выводим список поверх абсолютно всех элементов сайта */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important; /* Убираем стандартные маркеры списка <ul> */
}

/* Класс, который JavaScript добавляет при наличии совпадений */
.search-results.show {
    display: block !important;
    max-width: 500px;
}

/* Стили для каждой строки (элемента li) в списке */
.search-results li {
    margin: 0 !important;
    padding: 10px 15px !important; /* Комфортные отступы для клика */
    cursor: pointer;
    transition: background-color 0.2s ease; /* Плавная подсветка при наведении */
}

/* Подсветка строки при наведении курсора мыши */
.search-results li:hover {
    background-color: #f1f1f1; 
}

/* Ссылки внутри результатов поиска */
.search-results a {
    text-decoration: none;
    color: #f26b6b; /* Фирменный цвет ссылки */
    display: block; /* Ссылка растягивается на всю ширину li для удобного клика */
    width: 100%;
}

/* Поведение ссылки при наведении */
.search-results a:hover {
    text-decoration: underline;
}