/* =========================================================
   RCODE ARTICLE SIDEBAR
   ========================================================= */


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

.rcode-sidebar {

    color:
        var(--text);
}


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

.rcode-sidebar-card {

    margin-bottom:
        18px;

    padding:
        20px;

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

    border-radius:
        18px;

    background:
        var(--bg-card);

    box-shadow:
        var(--sidebar-card-shadow);
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.rcode-sidebar-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        0 0 15px;

    color:
        var(--text-dark);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.3;
}


.rcode-sidebar-title i {

    color:
        var(--primary);

    font-size:
        14px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.rcode-search-box {

    display:
        flex;

    overflow:
        hidden;

    border:
        1px solid var(--border-input);

    border-radius:
        11px;

    background:
        var(--input-bg);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.rcode-search-box:focus-within {

    border-color:
        var(--input-focus-border);

    box-shadow:
        var(--input-focus-shadow);
}


.rcode-search-input {

    flex:
        1;

    min-width:
        0;

    padding:
        10px 12px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--input-text);

    font-size:
        13px;
}


.rcode-search-input::placeholder {

    color:
        var(--input-placeholder);
}


.rcode-search-button {

    width:
        43px;

    border:
        0;

    background:
        var(--primary);

    color:
        var(--text-white);

    cursor:
        pointer;

    transition:
        background .2s ease;
}


.rcode-search-button:hover {

    background:
        var(--primary-dark);
}


/* =========================================================
   BANNER AD
   ========================================================= */

.rcode-sidebar-ad {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        250px;

    padding:
        10px;

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

    border-radius:
        18px;

    background:
        var(--bg-card);

    overflow:
        hidden;
}


.rcode-sidebar-ad script {

    max-width:
        100%;
}


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

.rcode-category-list {

    display:
        flex;

    flex-direction:
        column;
}


.rcode-category-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        10px 0;

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


.rcode-category-item:first-child {

    padding-top:
        0;
}


.rcode-category-item:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;
}


.rcode-category-link {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

    color:
        var(--sidebar-text);

    font-size:
        13px;

    font-weight:
        500;

    text-decoration:
        none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.rcode-category-link i {

    width:
        18px;

    color:
        var(--primary);

    text-align:
        center;

    font-size:
        12px;
}


.rcode-category-link span {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.rcode-category-link:hover {

    color:
        var(--sidebar-text-hover);

    transform:
        translateX(2px);
}


.rcode-category-count {

    flex-shrink:
        0;

    min-width:
        25px;

    padding:
        4px 7px;

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

    border-radius:
        999px;

    background:
        var(--soft-bg);

    color:
        var(--text-faint);

    font-size:
        10px;

    font-weight:
        700;

    text-align:
        center;
}


/* =========================================================
   TAG POPULER
   ========================================================= */

.rcode-tag-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.rcode-sidebar-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 9px;

    border:
        1px solid var(--sidebar-tag-border);

    border-radius:
        8px;

    background:
        var(--sidebar-tag-bg);

    color:
        var(--sidebar-tag-text);

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.2;

    text-decoration:
        none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.rcode-sidebar-tag:hover {

    border-color:
        var(--sidebar-tag-hover-border);

    background:
        var(--sidebar-tag-hover-bg);

    color:
        var(--sidebar-tag-hover-text);

    transform:
        translateY(-1px);
}


/* =========================================================
   ARTICLE LIST
   ========================================================= */

.rcode-sidebar-articles {

    display:
        flex;

    flex-direction:
        column;
}


.rcode-sidebar-article {

    padding:
        12px 0;

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


.rcode-sidebar-article:first-child {

    padding-top:
        0;
}


.rcode-sidebar-article:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;
}


.rcode-sidebar-article-title {

    margin:
        0 0 7px;

    font-size:
        13px;

    line-height:
        1.5;

    font-weight:
        700;
}


.rcode-sidebar-article-title a {

    color:
        var(--text-dark);

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.rcode-sidebar-article-title a:hover {

    color:
        var(--primary);
}


.rcode-sidebar-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--text-faint);

    font-size:
        10px;

    line-height:
        1.4;
}


.rcode-sidebar-meta i {

    color:
        var(--primary-light);
}


/* =========================================================
   POPULAR NUMBER
   ========================================================= */

.rcode-popular-item {

    display:
        flex;

    gap:
        11px;

    padding:
        12px 0;

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


.rcode-popular-item:first-child {

    padding-top:
        0;
}


.rcode-popular-item:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;
}


.rcode-popular-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        28px;

    height:
        28px;

    border-radius:
        8px;

    background:
        var(--soft-primary);

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;
}


.rcode-popular-content {

    min-width:
        0;
}


.rcode-popular-title {

    margin:
        0 0 6px;

    font-size:
        13px;

    line-height:
        1.45;

    font-weight:
        700;
}


.rcode-popular-title a {

    color:
        var(--text-dark);

    text-decoration:
        none;
}


.rcode-popular-title a:hover {

    color:
        var(--primary);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.rcode-sidebar-empty {

    color:
        var(--text-faint);

    font-size:
        12px;
}


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

@media (max-width: 991.98px) {

    .rcode-sidebar-card {

        padding:
            18px;
    }

}


@media (max-width: 767.98px) {

    .rcode-sidebar-card {

        margin-bottom:
            15px;

        padding:
            17px;

        border-radius:
            15px;
    }


    .rcode-sidebar-ad {

        min-height:
            250px;

        border-radius:
            15px;
    }


    .rcode-sidebar-title {

        font-size:
            14px;
    }

}