@charset "UTF-8";

/* Підключення шрифту Inter для забезпечення консистентності */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* === 1. СТИЛІ ГЛОБАЛЬНОГО КОНТЕЙНЕРА КНОПОК (ФІКСОВАНЕ ПОЗИЦІОНУВАННЯ) === */

/* Контейнер для кнопки замовлення (фіксована позиція) */
#request-button-global-wrapper {
    gap: 4px;
    width: 37%;
    margin-top: 25px;
    float: left;
    margin: 0 auto;
    transition: opacity 0.3s, visibility 0.3s;
}

/* === 2. СТИЛІ КНОПКИ (ЗМЕНШЕНА ТА АКТИВНА) === */

/* Стилі для кастомної кнопки (вже стилізовані через Tailwind у HTML, тут лише базові корекції) */
#request-button {
font-family: 'Inter', sans-serif;
    padding: 2px 0px;
    font-size: 12px;
    background-color: #1e4144cf;
    color: #fff;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: none;
    width: 114px;
    margin: 0 auto;
}

#request-button:hover {
    background-color: #f59e0b; /* indigo-700 */
    transform: scale(1.05); /* Збільшуємо без горизонтального зсуву */
}

#request-button:focus {
    outline: none;
}

/* === 3. СТИЛІ МОДАЛЬНОГО ВІКНА === */

#request-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Вищий, ніж у всіх елементів */
    padding: 12px;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.3s, visibility 0.3s;
    opacity: 0;
    visibility: hidden;
}

#request-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

#request-modal > div {
    /* Внутрішній контейнер модалки */
    background-color: #1f2937; /* gray-800 */
    border-radius: 0.75rem; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); 
    width: 100%;
    max-width: 640px; 
    padding: 7px;
}

/* Спільні стилі для flex-елементів */
#request-modal .flex { display: flex; }
#request-modal .justify-between { justify-content: space-between; }
#request-modal .items-center { align-items: center; }

#request-modal .border-b {
    border-bottom: 1px solid #374151; /* gray-700 */
    padding-bottom: 12px;
    margin-bottom: 16px;
}

#request-modal h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

#request-modal button {
    cursor: pointer;
    background: #ffb800;
    border: none;
}

#request-modal .text-gray-400 { color: #9ca3af; }
#request-modal .hover\:text-white:hover { color: #ffffff; }

/* Поле пошуку */
#request-modal input[type="text"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background-color: #374151; /* gray-700 */
    color: #ffffff;
    border: 1px solid #4b5563; /* gray-600 */
    border-radius: 8px;
    outline: none;
}

#request-modal input[type="text"]:focus {
    border-color: #6366f1; /* indigo-500 */
}

/* Повідомлення про статус */
#request-status-message {
    padding: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    text-align: center;
}

/* Список пісень та скролбар */
#songs-list {
    max-height: 320px; 
    overflow-y: auto;
    padding-right: 8px; 
    color: #ffffff;
}

.custom-scroll { overflow-y: scroll; }
.custom-scroll::-webkit-scrollbar { width: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: #4a5568; border-radius: 4px; }
.custom-scroll::-webkit-scrollbar-track { background-color: #1a202c; }

/* Окремий елемент пісні */
#songs-list .song-item { /* Змінив селектор для чистоти */
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #374151; 
    border-radius: 8px;
    transition: background-color 0.15s;
    margin-bottom: 8px; 
}

#songs-list .song-item:hover {
    background-color: #4b5563; 
}

.song-info {
    flex: 1;
    min-width: 0;
    padding-right: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.song-title {
    color: #ffffff;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.song-artist {
    color: #9ca3af; 
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.request-btn {
    padding: 4px 12px;
    background-color: #6366f1; 
    color: #000;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.15s;
    flex-shrink: 0;
    margin-left: 10px;
    border: none;
}

.request-btn:hover:not(:disabled) {
    background-color: #4f46e5; 
}

.request-btn:disabled {
    background-color: #374151; 
    color: #9ca3af; 
    cursor: not-allowed;
}

/* Стилі для обкладинки */
.album-art {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 6px;
    background-color: #4a5568; 
    color: #a0aec0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
    text-align: center;
    line-height: 1;
    word-break: break-word;
    padding: 0px;
}

/* Нижній текст */
#request-modal .text-sm { font-size: 14px; }
#request-modal .text-gray-500 { color: #6b7280; }
#request-modal .border-t { border-top: 1px solid #374151; }


/* Стилі для планшетів (від 768px) */
@media screen and (min-width: 768px) {
/* Контейнер для кнопки замовлення (фіксована позиція) */
#request-button-global-wrapper {
    bottom: 422px;
}
}