﻿
.trending-news-wrapper{
    position:relative;
    z-index:1;
}

#newsList{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.news-item{
    display:flex;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.post-thumbnail img{
    width:110px;
    height:75px;
    object-fit:cover;
    border-radius:6px;
}

.post-title{
    text-decoration:none;
    color:#222;
    font-size:14px;
    font-weight:500;
    line-height:18px;
}

.post-title:hover{
    color:#e42f08;
}

.post-meta{
    font-size:10px;
    margin-top:5px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.cat-badge{
    color:#fff;
    padding:2px 6px;
    border-radius:4px;
    font-size:9px;
    display:inline-block;
    font-weight:600;
    text-align:center;
}
 
.category-tecnologia{background:#007bff !important;}
.category-esportes{background:#28a745 !important;}
.category-economia{background:#ffc107 !important;color:#000 !important;}
.category-mundo{background:#6f42c1 !important;}
.category-politica{background:#e42f08 !important;}
.category-guerra{background:#7a1b1b !important} /* <-- ADICIONADO: Cor para Guerra */
.category-saude{background:#20c997 !important;}
.category-educacao{background:#fd7e14 !important;}
.category-viagem{background:#d02905 !important;}
.category-default{background:#6c757d !important;}

/*
|--------------------------------------------------------------------------
| SCROLL CATEGORIAS
|--------------------------------------------------------------------------
*/

.categories-scroll{

    position:relative;

    display:flex;
    align-items:center;

    gap:8px;

    overflow-x:auto;
    overflow-y:hidden;

    white-space:nowrap;

    padding:6px 4px 16px;

    margin-bottom:15px;

    scrollbar-width:none;
    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-x;

    user-select:none;

    z-index:9;

    cursor:grab;

    scroll-behavior:auto;
}

.categories-scroll::-webkit-scrollbar{
    display:none;
}

.categories-scroll.dragging{
    cursor:grabbing;
}

.category-btn{

    border:0;

    color:#fff;

    font-size:12px;

    font-weight:600;

    padding:8px 15px;

    border-radius:30px;

    white-space:nowrap;

    flex:0 0 auto;

    transition:.2s;

    cursor:pointer;

    pointer-events:auto;
}

.category-btn.active{

    transform:scale(1.05);

    box-shadow:0 0 0 2px rgba(0,0,0,.08);
}

.news-loading{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:25px;
}

.news-loading .spinner{

    width:22px;

    height:22px;

    border:3px solid #ddd;

    border-top:3px solid #e42f08;

    border-radius:50%;

    animation:spinNews .7s linear infinite;
}

@keyframes spinNews{

    100%{
        transform:rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .categories-scroll{

        gap:6px;

        padding-bottom:0px;

        cursor:default;
    }

    .category-btn{

        font-size:11px;

        padding:7px 13px;
    }

}
 
.add-shortcut-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    margin-right:10px;
    flex-shrink:0;
    transition:.2s;
}

.add-shortcut-btn:active{
    transform:scale(.95);
}

.add-shortcut-btn i{
    font-size:22px;
    color:#111;
}

.title-area{
    display:flex;
    align-items:center;
}

 