/* Enhanced News Page Styles */



/* Layout */

.news-layout {

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 2rem;

    margin: 2rem auto;

}



/* Sidebar */

.news-sidebar {

    position: relative;

}



.sidebar-sticky {

    position: sticky;

    top: 100px;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



/* Filter Widgets */

.filter-widget {

    background: white;

    border-radius: 12px;

    padding: 1.5rem;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

    border-left: 4px solid #007bff;

}



.widget-title {

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 1rem;

    color: #1a1a1a;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.filter-list {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.filter-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.8rem 1rem;

    border-radius: 8px;

    text-decoration: none;

    color: #555;

    transition: all 0.3s ease;

    font-weight: 500;

    border: 2px solid transparent;

}



.filter-item:hover {

    background: #f0f4ff;

    color: #007bff;

    padding-left: 1.25rem;

}



.filter-item.active {

    background: #007bff;

    color: white;

    border-color: #0056b3;

}



.filter-item i {

    font-size: 0.95rem;

}



.region-flag {

    font-size: 1.2rem;

}



/* Trending Widget */

.trending-widget {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 12px;

    padding: 1.5rem;

    color: white;

    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

}



.trending-widget .widget-title {

    color: white;

    border-bottom: 2px solid rgba(255,255,255,0.3);

    padding-bottom: 1rem;

    margin-bottom: 1rem;

}



.trending-list {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.trending-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem;

    background: rgba(255,255,255,0.1);

    border-radius: 8px;

    transition: all 0.3s ease;

}



.trending-item:hover {

    background: rgba(255,255,255,0.2);

    transform: translateX(5px);

}



.trending-rank {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    background: rgba(255,255,255,0.3);

    border-radius: 50%;

    font-weight: 700;

    font-size: 0.9rem;

    flex-shrink: 0;

}



.trending-item:nth-child(1) .trending-rank { 

    background: #ffd700;

    color: #333;

}



.trending-item:nth-child(2) .trending-rank { 

    background: #c0c0c0;

    color: #333;

}



.trending-item:nth-child(3) .trending-rank { 

    background: #cd7f32;

}



.trending-link {

    flex: 1;

    color: white;

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 500;

    transition: all 0.3s ease;

}



.trending-link:hover {

    text-decoration: underline;

    opacity: 0.9;

}



.trending-views {

    font-size: 0.85rem;

    opacity: 0.8;

    white-space: nowrap;

}



/* Search Bar */

.search-bar-top {

    margin-bottom: 2rem;

}



.search-form {

    display: flex;

}



.search-wrapper {

    display: flex;

    align-items: center;

    background: white;

    border-radius: 30px;

    padding: 0.75rem 1.5rem;

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    border: 2px solid transparent;

    transition: all 0.3s ease;

    width: 100%;

}



.search-wrapper:focus-within {

    border-color: #007bff;

    box-shadow: 0 6px 20px rgba(0,123,255,0.2);

}



.search-icon {

    color: #999;

    margin-right: 1rem;

    font-size: 1.1rem;

}



.search-input {

    flex: 1;

    border: none;

    outline: none;

    font-size: 1rem;

    background: transparent;

    color: #333;

}



.search-input::placeholder {

    color: #999;

}



.search-submit {

    background: #007bff;

    color: white;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    margin-left: 1rem;

}



.search-submit:hover {

    background: #0056b3;

    transform: rotate(90deg);

}



/* Filters Section */

.filters-section {

    background: white;

    border-radius: 12px;

    padding: 1.5rem;

    margin-bottom: 2rem;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}



.filters-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

}



.filters-header h2 {

    margin: 0;

    font-size: 1.2rem;

}



.filters-toggle {

    background: none;

    border: 2px solid #007bff;

    color: #007bff;

    padding: 0.6rem 1.2rem;

    border-radius: 20px;

    cursor: pointer;

    display: none;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

    transition: all 0.3s ease;

}



.filters-toggle:hover {

    background: #007bff;

    color: white;

}



.filters-panel {

    display: flex;

    gap: 1rem;

    align-items: flex-end;

    flex-wrap: wrap;

}



.filter-grid {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    align-items: flex-end;

}



.filter-card {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    flex: 1;

    min-width: 200px;

}



.filter-label {

    font-size: 0.9rem;

    font-weight: 600;

    color: #333;

}



.filter-select {

    padding: 0.75rem 1rem;

    border: 2px solid #e0e0e0;

    border-radius: 8px;

    font-size: 0.95rem;

    background: white;

    cursor: pointer;

    transition: all 0.3s ease;

    appearance: none;

    padding-right: 2.5rem;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 0.75rem center;

    background-size: 1.2em;

}



.filter-select:hover,

.filter-select:focus {

    border-color: #007bff;

    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);

}



.btn-filter {

    padding: 0.75rem 1.5rem;

    background: #007bff;

    color: white;

    border: none;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.btn-filter:hover {

    background: #0056b3;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,123,255,0.3);

}



/* Newsletter Section */

.newsletter-section {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 15px;

    padding: 2rem;

    margin-top: 3rem;

    color: white;

    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);

}



.newsletter-container {

    display: flex;

    align-items: center;

    gap: 2rem;

    max-width: 100%;

}



.newsletter-icon {

    font-size: 3rem;

    opacity: 0.9;

}



.newsletter-content {

    flex: 1;

}



.newsletter-content h3 {

    margin: 0 0 0.5rem 0;

    font-size: 1.3rem;

    font-weight: 700;

}



.newsletter-content p {

    margin: 0;

    opacity: 0.9;

}



.newsletter-form {

    display: flex;

    gap: 0.5rem;

    margin-left: auto;

}



.newsletter-form input {

    padding: 0.8rem 1.2rem;

    border: none;

    border-radius: 8px;

    font-size: 0.95rem;

    min-width: 280px;

}



.btn-subscribe {

    padding: 0.8rem 1.5rem;

    background: rgba(255,255,255,0.2);

    color: white;

    border: 2px solid white;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.btn-subscribe:hover {

    background: white;

    color: #764ba2;

}



/* Articles Section */

.articles-section {

    margin-bottom: 3rem;

}



.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

    padding-bottom: 1.5rem;

    border-bottom: 2px solid #f0f0f0;

}



.section-title {

    margin: 0;

    font-size: 1.5rem;

    font-weight: 700;

    color: #1a1a1a;

}



.results-count {

    color: #666;

    font-size: 0.9rem;

    font-weight: 500;

}



.view-options {

    display: flex;

    gap: 0.5rem;

}



.view-btn {

    padding: 0.6rem 0.8rem;

    background: white;

    border: 2px solid #e0e0e0;

    border-radius: 6px;

    cursor: pointer;

    color: #666;

    transition: all 0.3s ease;

}



.view-btn:hover,

.view-btn.active {

    background: #007bff;

    color: white;

    border-color: #007bff;

}



/* Pagination */

.pagination-section {

    display: flex;

    justify-content: center;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 2px solid #f0f0f0;

}



.pagination-wrapper {

    display: flex;

}



/* Cards Enhancement */

.article-card {

    animation: slideUp 0.5s ease-out;

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.card-image img {

    transition: transform 0.3s ease;

}



.article-card:hover .card-image img {

    transform: scale(1.05);

}



.card-footer {

    padding: 1.5rem;

    border-top: 1px solid #f0f0f0;

    background: #fafafa;

}



.read-more-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: #007bff;

    text-decoration: none;

    font-weight: 600;

    transition: all 0.3s ease;

}



.read-more-btn:hover {

    color: #0056b3;

    gap: 0.75rem;

}



/* Responsive */

@media (max-width: 1024px) {

    .news-layout {

        grid-template-columns: 1fr;

    }



    .sidebar-sticky {

        position: relative;

        top: 0;

        flex-direction: row;

        flex-wrap: wrap;

        gap: 1rem;

    }



    .filter-widget,

    .trending-widget {

        flex: 1;

        min-width: 280px;

    }



    .newsletter-container {

        flex-direction: column;

        text-align: center;

    }



    .newsletter-icon {

        order: -1;

    }



    .newsletter-form {

        margin-left: 0;

        width: 100%;

        flex-direction: column;

    }



    .newsletter-form input {

        min-width: 100%;

    }

}



@media (max-width: 768px) {

    .filters-toggle {

        display: flex;

    }



    .filters-panel {

        display: none;

        flex-direction: column;

        gap: 1rem;

        width: 100%;

        padding-top: 1.5rem;

        border-top: 2px solid #f0f0f0;

    }



    .filters-panel.active {

        display: flex;

    }



    .filter-grid {

        flex-direction: column;

    }



    .filter-card {

        width: 100%;

    }



    .search-wrapper {

        flex-direction: column;

        align-items: flex-start;

    }



    .search-icon {

        order: 1;

        margin-right: 0;

        margin-bottom: 0.5rem;

    }



    .search-input {

        order: 2;

        width: 100%;

    }



    .search-submit {

        position: absolute;

        right: 0.75rem;

        top: 50%;

        transform: translateY(-50%);

        margin-left: 0;

    }



    .sidebar-sticky {

        flex-direction: column;

    }



    .filter-widget,

    .trending-widget {

        min-width: 100%;

    }



    .newsletter-container {

        padding: 1rem;

        border-radius: 10px;

    }



    .newsletter-form input {

        min-width: 100%;

    }



    .newsletter-form {

        width: 100%;

    }

}



@media (max-width: 480px) {

    .section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

    }



    .view-options {

        width: 100%;

    }



    .view-btn {

        flex: 1;

    }



    .search-bar-top {

        margin-bottom: 1rem;

    }



    .newsletter-section {

        padding: 1.5rem 1rem;

    }



    .newsletter-container {

        gap: 1rem;

    }



    .newsletter-form input {

        font-size: 16px;

    }

}