/*==================================================
GM24 NEWS PREMIUM V6
SIDEBAR
==================================================*/

/*==============================
SIDEBAR
==============================*/

.sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;

    position:sticky;
    top:20px;

    min-width:0;
}

/*==============================
WIDGET
==============================*/

.widget{
    width:100%;
    min-width:0;

    background:var(--white);
    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;
}

/*==============================
WIDGET TITLE
==============================*/

.widget-title{
    margin:0;
    padding:15px 20px;

    background:var(--primary);
    color:#fff;

    font-size:18px;
    font-weight:700;
    line-height:1.3;
}

/*==============================
LIST RESET
==============================*/

.trending-list,
.latest-list,
.category-list{
    list-style:none;
    margin:0;
    padding:0;
}

/*==============================
LIST ITEMS
==============================*/

.trending-list li,
.latest-list li,
.category-list li{
    width:100%;
    margin:0;
    padding:0;

    border-bottom:1px solid var(--border);
}

.trending-list li:last-child,
.latest-list li:last-child,
.category-list li:last-child{
    border-bottom:none;
}

/*==============================
NORMAL LIST LINKS
==============================*/

.trending-list a,
.latest-list a{
    display:block;

    width:100%;
    min-width:0;

    padding:14px 18px;

    color:var(--text);

    font-size:15px;
    line-height:1.5;

    transition:var(--transition);
}

.trending-list a:hover,
.latest-list a:hover{
    background:var(--surface);
    color:var(--primary);
    padding-left:23px;
}

/*==============================
CATEGORY ITEM
IMPORTANT:
SUPPORTS COUNT OUTSIDE LINK
==============================*/

.category-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

/*==============================
CATEGORY LINK
==============================*/

.category-list li > a{
    display:block;

    flex:1 1 auto;
    min-width:0;

    padding:14px 18px;

    color:var(--text);

    font-size:15px;
    line-height:1.5;

    transition:var(--transition);
}

/*==============================
CATEGORY LINK HOVER
==============================*/

.category-list li > a:hover{
    background:var(--surface);
    color:var(--primary);
    padding-left:23px;
}

/*==============================
CATEGORY NAME
==============================*/

.category-list a .category-name{
    display:block;

    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/*==============================
CATEGORY COUNT
WORKS IF COUNT IS INSIDE OR
OUTSIDE THE <a>
==============================*/

.category-list .count{
    flex:0 0 auto;

    margin-left:auto;
    margin-right:18px;

    color:var(--text-muted);

    font-size:13px;
    font-weight:600;

    line-height:1;

    white-space:nowrap;
}

/*==============================
IF COUNT IS INSIDE LINK
==============================*/

.category-list a .count{
    margin-right:0;
}

/*==============================
ADVERTISEMENT
==============================*/

.ad-box{
    min-height:250px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    margin:20px;
    padding:25px;

    text-align:center;

    background:var(--surface);

    border:2px dashed var(--border);
    border-radius:10px;
}

.ad-box span{
    font-size:28px;
    font-weight:700;
    color:var(--primary);
}

.ad-box small{
    margin-top:10px;

    color:var(--text-light);

    font-size:14px;
    line-height:1.5;
}

/*==============================
TABLET
==============================*/

@media(max-width:991px){

    .sidebar{
        position:relative;
        top:0;

        gap:22px;
    }

}

/*==============================
MOBILE
==============================*/

@media(max-width:576px){

    .sidebar{
        gap:18px;
    }

    .widget-title{
        padding:13px 16px;

        font-size:16px;
    }

    .trending-list a,
    .latest-list a{
        padding:12px 15px;

        font-size:14px;
    }

    .trending-list a:hover,
    .latest-list a:hover{
        padding-left:19px;
    }

    .category-list li > a{
        padding:12px 15px;

        font-size:14px;
    }

    .category-list li > a:hover{
        padding-left:19px;
    }

    .category-list .count{
        margin-right:15px;

        font-size:12px;
    }

    .category-list a .count{
        margin-right:0;
    }

    .ad-box{
        min-height:210px;

        margin:15px;
        padding:20px;
    }

    .ad-box span{
        font-size:24px;
    }

    .ad-box small{
        font-size:13px;
    }

}

/*==============================
REDUCED MOTION
==============================*/

@media(prefers-reduced-motion:reduce){

    .trending-list a,
    .latest-list a,
    .category-list a{
        transition:none;
    }

}