/* ===================== */
/* 🌑 Основные стили 🌑 */
/* ===================== */

body {
    font-family: 'Roboto', sans-serif;
    background-color: #0f0f0f; /* Глубокий темный фон */
    color: #ffffff; /* Белый текст */
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ===================== */
/* 🌟 Заголовки с красной линией 🌟 */
/* ===================== */

/* Заголовки с красной линией */
h2.text-center.fw-bold.mb-4 {
    position: relative;
    display: inline-block;
    color: #ffffff; /* Белый текст */
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Красная линия перед заголовком */
h2.text-center.fw-bold.mb-4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px; /* Отступ линии от заголовка */
    transform: translateY(-50%);
    width: 5px; /* Ширина линии */
    height: 100%;
    background-color: #ff0019; /* Красный цвет */
    border-radius: 5px;
}

/* Прелоадер */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c0c0c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
    opacity: 1; /* Начальная видимость */
    transition: opacity 0.5s ease; /* Плавный переход */
}

/* Новый стиль спиннера с градиентами и двумя анимациями */
.preloader .spinner {
    position: relative; /* Позиционирование для ::after */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF; /* Белый верхний цвет */
    border-right: 4px solid transparent; /* Прозрачный правый */
    box-sizing: border-box;
    animation: rotation 1s linear infinite; /* Основная анимация вращения */
}

.preloader .spinner::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-left: 4px solid #ff0000; /* Красный левый цвет */
    border-bottom: 4px solid transparent; /* Прозрачный нижний */
    animation: rotation 0.5s linear infinite reverse; /* Обратная анимация */
}

.preloader p {
    margin-top: 15px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Анимация вращения */
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Анимация прелоадера для кнопки "Загрузить ещё" */
.load-more-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 24px;
    color: #ff5555;
    margin-top: 10px;
}

.load-more-spinner .dot {
    width: 8px;
    height: 8px;
    background-color: #ff5555;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

/* Анимация для точек */
.load-more-spinner .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.load-more-spinner .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.load-more-spinner .dot:nth-child(3) {
    animation-delay: 0s;
}

/* Ключевые кадры для bounce анимации */
@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}


#search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #1a1a1a; /* Более приятный темный фон */
    border: 1px solid #333; /* Элегантная темная рамка */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Глубокая тень */
    max-height: 400px; /* Увеличенная высота для большего количества элементов */
    overflow-y: auto;
    overflow-x: hidden; /* Полностью скрывает горизонтальную прокрутку */
    border-radius: 6px; /* Легкое скругление */
    padding: 0;
    color: #f1f1f1; /* Более мягкий белый цвет текста */
}

#search-results .dropdown-item.text-muted {
    color: #ffffff !important; /* Белый цвет текста */
    text-align: center; /* Центрируем текст */
    font-weight: bold; /* Жирный текст для акцента */
    background-color: transparent; /* Убираем фон */
    padding: 10px; /* Увеличиваем отступы */
    cursor: default; /* Убираем указатель мыши */
    border: none; /* Убираем лишние границы */
}

#search-results a.dropdown-item .text-truncate {
    font-weight: bold; /* Жирный текст */
    color: #ffffff; /* Белый текст для хорошей видимости */
    transition: color 0.3s ease; /* Плавный переход цвета при наведении */
}

#search-results a.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* Уменьшаем отступы для более компактного отображения */
    font-size: 14px; /* Уменьшаем шрифт для более аккуратного вида */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#search-results a.dropdown-item:last-child {
    border-bottom: none; /* Убираем границу у последнего элемента */
}

#search-results a.dropdown-item:hover {
    background-color: #444; /* Подсветка при наведении */
    color: #fff; /* Яркий текст при наведении */
}

#search-results img {
    height: 65px; /* Размер обложки, как на втором примере */
    width: 45px;
    margin-right: 10px; /* Увеличиваем расстояние между обложкой и текстом */
    border-radius: 3px; /* Меньшее скругление */
    object-fit: cover; /* Убираем искажение изображения */
    border: 1px solid #2a2a2a; /* Тонкая рамка вокруг изображения */
    background-color: #1a1a1a; /* Резервный фон */
}
#search-results .text-truncate {
    max-width: calc(100% - 60px); /* Учитываем ширину изображения */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #e0e0e0; /* Текст должен быть видимым */
    display: inline-block; /* Убедитесь, что span отображается корректно */
}



#search-results .text-truncate:hover {
    color: #fff; /* Яркое выделение при наведении */
    cursor: pointer;
}


#search-results::-webkit-scrollbar {
    width: 8px; /* Уменьшенная ширина полосы прокрутки */
}

#search-results::-webkit-scrollbar-track {
    background: #1a1a1a; /* Фон трека совпадает с основным фоном */
}

#search-results::-webkit-scrollbar-thumb {
    background-color: #444; /* Темный цвет полосы прокрутки */
    border-radius: 4px;
}

#search-results::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Подсветка при наведении на полосу прокрутки */
}

.swal-custom-popup {
    border: 2px solid #ff5555; /* Красный бордер */
    border-radius: 15px; /* Скругленные углы */
    box-shadow: 0 0 10px rgba(255, 85, 85, 0.5); /* Красная тень */
}

.left-ad-container {
    position: absolute;
    top: 965px; /* Смещение вниз, чтобы не перекрывать лого */
    left: 30px; /* Отступ от левого края */
    width: 240px; /* Ширина рекламного блока */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#left-ad-slot {
    width: 100%;
    min-height: auto; /* Высота рекламного блока */
    background: rgba(255, 255, 255, 0);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.custom-ad-banner {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Скрываем рекламу на мобильных */
@media (max-width: 1480px) {
    .left-ad-container {
        display: none;
    }
}