/* Основний контейнер */
.news-container {
    border-radius: 15px;
    background: #ffffff;
    position: relative;
 
    padding: 30px 150px !important;
}

/* Заголовок */
.news-title {
    font-size: 2rem;
    color: #1a1a1a;
    position: relative;
    z-index: 1;
}

.title-underline {
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00c4cc);
    margin: 0.5rem auto 0;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.news-title:hover .title-underline {
    width: 80px;
}

/* Кнопки сортування */
.btn-sort {
    font-size: 0.9rem;
    color: #666;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
    background: transparent;
    border: none;
}

.btn-sort:hover,
.btn-sort.active {
    color: #007bff;
}

/* Елемент новини */
.news-item {
    background: #fff;
}

.news-item h2 a {
    font-size: 1.5rem;
    color: #1a1a1a;
}

.news-item h2 a:hover {
    color: #007bff;
}

/* Інформація про дату та перегляди */
.date-info, .views-info {
    font-size: 0.875rem;
    color: #666;
}

.date-info img, .views-info i {
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* Кнопки реакцій */
.reaction-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.875rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reaction-btn:hover {
   
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.reaction-btn i {
    margin-right: 0.2rem;
}

.like-btn, .dislike-btn {
    color: #6f6f6f;
}

.like-btn.active,
.like-btn:hover,
.dislike-btn.active,
.dislike-btn:hover {
    color: #007bff;
}

/* Кнопка коментувати */
.comment-btn {
    background-color: #ffffff;
    color: #6f6f6f;
    border: none;
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 3px;
    text-decoration: none;
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-btn:hover {
    background-color: #ffffff;
    color: #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Група реакцій */
.reaction-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* Інші стилі */
.with-date {
    background: #f9f9f9;
    border-bottom: 1px solid #e6e6e6;
    padding: 5px 10px;
}

.h5-news {
    padding-left: 15px;
    font-weight: 600;
    font-size: 16px;
}

.text-news {
    font-size: 14px;
    padding: 0 50px;
}

.button-news {
    padding: 0 10px;
}










/* Пагінація */
.pagination-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 20px;
}

.pagination .page-item {
    display: flex;
    align-items: center;
}

.pagination .page-link {
    color: #007bff;
    border: none;
    border-radius: 50%; /* Повне коло */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.pagination .page-link:hover {
    background-color: #f9fafa;
    color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 50% !important; /* Забезпечує коло при наведенні */
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 50% !important; /* Повне коло для активної сторінки */
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: transparent;
    cursor: not-allowed;
    box-shadow: none;
    border-radius: 50% !important; /* Повне коло для неактивних */
}

.pagination .page-link i {
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    .pagination-custom {
        gap: 0.5rem;
    }
    
    .pagination .page-link {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .pagination .page-link i {
        font-size: 1rem;
    }
}
.pagination .page-link:focus,
.pagination .page-link:active {
    outline: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    background-color: transparent !important;
}