/* ===================== */
/* 🔺 Карточки 🔺 */
/* ===================== */

.card {
    border: 1px solid #444444;
    border-radius: 8px;
    background-color: #1e1e1e;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.card img {
    height: 321px;
    object-fit: cover;
    border-bottom: 1px solid #444444;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(230, 3, 3, 0.747);
    border: 1px solid #dc3545;
}


.card:hover img {
    transform: scale(1.01);
}

.anime-title {
    text-align: center;
    padding: 5px 0;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
}

/* Плашка для рейтинга и серий */
.card .rating-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ffc107;
    color: #343a40;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    z-index: 1;
}

.card .episodes-badge {
    position: absolute;
    top: 50px;
    left: 10px;
    background-color: #c52222;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    z-index: 1;
}

/* ===================== */
/* 🔺 Секция «Популярное» 🔺 */
/* ===================== */

.popular-section {
    margin-top: 30px;
    padding: 30px;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(50, 50, 50, 0.7) 100%
    ); 
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Заголовок раздела */
.popular-section h2 {
    font-size: 24px;
    color: #ff5555;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

/* ===================== */
/* 🔺 Кнопка «Загрузить ещё» 🔺 */
/* ===================== */

#load-more-btn {
    margin-top: 20px;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #dc3545;
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

#load-more-btn:hover {
    background-color: #c82333;
}

//=================

/* ===================== */
/* 🔺 Общие стили для карточек 🔺 */
/* ===================== */


#popular-anime-container {
    gap: 15px;
}

/* ✅ Сетка (Grid View) */
#popular-anime-container.grid-view .col {
    display: block;
}

/* ✅ Список (List View) */
#popular-anime-container.list-view {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

#popular-anime-container.list-view .col {
    display: flex;
    flex: 0 0 calc(50% - 15px); /* Две карточки в строке */
    max-width: calc(50% - 15px);
    align-items: center;
    gap: 15px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1e1e1e;
    transition: box-shadow 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    
}

/* ✅ Картинка */
#popular-anime-container.list-view .card img {
    height: 321px;
    object-fit: cover;
    border-bottom: 1px solid #444444;
    transition: transform 0.1s ease;
}

/* ✅ Содержимое аниме */
#popular-anime-container.list-view .anime-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}

/* ✅ Описание */
#popular-anime-container.list-view .anime-description {
    font-size: 14px;
    line-height: 1.4;
    max-height: 321px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    color: #ccc;
}

/* ✅ Атрибуты аниме (Тип, Жанры, Статус, Возраст, Студия) */
#popular-anime-container.list-view .anime-description strong {
    font-weight: bold;
    color: #ff5555;
    margin-right: 5px;
}

/* ✅ Каждая строка данных */
#popular-anime-container.list-view .anime-description span {
    color: #ddd;
    font-size: 14px;
}

.anime-title h5 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.anime-title .anime-description {
    margin-top: 5px;
    font-size: 14px;
    color: #ccc;
    text-align: center;
}

#popular-anime-container.list-view .anime-title h5 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    white-space: wrap; /* Текст не переносится */
    overflow: hidden; /* Текст обрезается */
    text-overflow: ellipsis; /* Добавляет многоточие */
}

#popular-anime-container.list-view .anime-title p {
    font-size: 14px;
    color: #ccc;
    margin: 0;
}

/* ✅ Дополнительные данные */
#popular-anime-container.list-view .rating-badge,
#popular-anime-container.list-view .episodes-badge {
    font-size: 12px;
    margin-bottom: 5px;
}

#popular-anime-container.grid-view .anime-title p {
    display: none;
}

/* Убираем подчеркивание у всех ссылок */
.card-link,
.title-link,
.description-link {
    text-decoration: none;
    color: inherit; /* Наследуем цвет текста */
}

.card-link:hover,
.title-link:hover,
.description-link:hover {
    text-decoration: none; /* Убираем подчеркивание при наведении */
    color: inherit; /* Наследуем цвет текста */
}

/* Ограничиваем описание */
.anime-description {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* CSS */
.popular-heading {
    text-align: left; /* Выравнивание по умолчанию */
}

@media (max-width: 768px) {
    .popular-heading {
        text-align: center !important; /* Центрирование для мобильных */
    }
}


/* ===================== */
/* Сетка популярных аниме для мобильных устройств */
/* ===================== */
@media (max-width: 768px) {
    #popular-anime-container {
        display: flex;
        flex-wrap: wrap; /* Разрешаем перенос элементов */
        gap: 5px; /* Минимальные промежутки между карточками */
        margin: 0 !important; /* Убираем лишние отступы родителя */
        padding: 0 !important;
    }

    #popular-anime-container .col {
        flex: 0 0 calc(50% - 5px); /* Две карточки в строке с минимальными отступами */
        max-width: calc(50% - 5px);
        margin: 0 !important; /* Сбрасываем любые отступы */
        padding: 5px !important;
    }

    .card {
        width: 100%; /* Карточка занимает всю ширину своей колонки */
        height: 250px; /* Автоматическая высота */
        margin: 0 !important;
        padding: 0 !important;
    }

    .card img {
        width: 100%; /* Изображение растягивается по ширине карточки */
        height: 120%; /* Автоматическая высота для сохранения пропорций */
        object-fit: cover; /* Пропорциональное заполнение */
    }

    .anime-title {
        font-size: 12px; /* Размер текста */
        padding: 5px 0; /* Отступы */
        text-align: center; /* Центрируем текст */
    }
}


@media (max-width: 768px) {
    #popular-anime-container.list-view .col {
        flex: 0 0 100%; /* Полная ширина карточки */
        max-width: 100%; /* Ограничиваем ширину */
        margin-bottom: 15px; /* Отступ между карточками */
    }

    #popular-anime-container.list-view .card {
        display: flex; /* Горизонтальное расположение */
        align-items: flex-start; /* Выравнивание содержимого по верху */
        max-height: 260px; /* Высота адаптируется к содержимому */
        background-color: transparent; /* Убираем фон */
        border: none; /* Убираем границу */
        border-radius: 15; /* Убираем скругление */
        box-shadow: none; /* Убираем тени */
        height: 260px; /* Пропорциональная высота изображения */
        width: 180px; /* Пропорциональная ширина изображения */
    }

    #popular-anime-container.list-view .card img {
        height: 260px; /* Пропорциональная высота изображения */
        width: 180px; /* Пропорциональная ширина изображения */
        margin-right: 15px; /* Отступ справа от изображения */
        object-fit: cover; /* Пропорциональное заполнение */
        border-radius: 15; /* Убираем скругленные углы изображения */
    }

    #popular-anime-container.list-view .anime-title {
        flex: 1; /* Расширяем блок текста */
        font-size: 10px !important; /* Размер шрифта */
    }

    #popular-anime-container.list-view .anime-title h5 {
        font-size: 16px; /* Размер заголовка */
        font-weight: bold;
        color: #fff;
    }

    #popular-anime-container.list-view .anime-description {
        display: -webkit-box; /* Используем флекс-бокс для обрезки текста */
        -webkit-line-clamp: 14; /* Ограничиваем количество строк (4 строки) */
        -webkit-box-orient: vertical; /* Ориентация бокса */
        overflow: hidden; /* Скрываем текст, выходящий за пределы */
        text-overflow: ellipsis; /* Добавляем многоточие для обрезанного текста */
        color: #ccc; /* Цвет текста */
        font-size: 12px; /* Размер шрифта */
    }

    #popular-anime-container.list-view .anime-description strong {
        display: inline; /* Оставляем остальные элементы без обрезки */
        white-space: normal;
    }

    #popular-anime-container.list-view .anime-description span {
        white-space: normal; /* Оставляем строки без обрезки */
    }


    #popular-anime-container.list-view .rating-badge,
    #popular-anime-container.list-view .episodes-badge {
        font-size: 12px; /* Размер текста */
        padding: 5px 10px; /* Внутренние отступы */
        border-radius: 5px; /* Скругленные края */
    }

    #popular-anime-container.list-view .rating-badge {
        background-color: #ffc107; /* Цвет рейтинга */
        color: #343a40; /* Цвет текста */
        margin-bottom: 10px; /* Отступ между плашками */
    }

    #popular-anime-container.list-view .episodes-badge {
        background-color: #c52222; /* Цвет серий */
        color: #ffffff; /* Цвет текста */
    }
    #popular-anime-container.list-view .anime-title h5 {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        white-space: wrap; /* Текст не переносится */
        overflow: hidden; /* Текст обрезается */
        text-overflow: ellipsis; /* Добавляет многоточие */
    }

    #popular-anime-container.list-view .anime-title p {
        font-size: 12px;
        color: #ccc;
    }
}