/* ریشه */
.view-blogslider {
    position: relative;
    direction: rtl;
    font-family: inherit;
    /* همینی که خودت داشتی بمونه؛ متغیر جدیدی اضافه نکردم */
    --nav-gap: 16px;
}

.view-blogslider.view--slider .view-swiper {
    overflow: hidden;

}

.view-blogslider .swiper-slide{
    padding: 35px 10px;
}

    /* اگر اسلایدر توسط Swiper قفل شد (watchOverflow) */
.view-blogslider.is-locked .view-prev,
.view-blogslider.is-locked .view-next,
.view-blogslider.is-locked .view-swiper-prev,
.view-blogslider.is-locked .view-swiper-next {
    display: none;
}

.view-blogslider.is-locked .view-pagination,
.view-blogslider.is-locked .view-swiper-pagination {
    display: none;
}

/* ========== Pagination ========== */
.view-blogslider .view-pagination,
.view-blogslider .view-swiper-pagination {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.view-blogslider .view-pagination .swiper-pagination-bullet,
.view-blogslider .view-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #cbd0dc;
    opacity: 1;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.view-blogslider .view-pagination .swiper-pagination-bullet:hover,
.view-blogslider .view-swiper-pagination .swiper-pagination-bullet:hover {
    transform: scale(1.05);
}

.view-blogslider .view-pagination .swiper-pagination-bullet-active,
.view-blogslider .view-swiper-pagination .swiper-pagination-bullet-active {
    /* از قبل خودت گذاشته بودی */
    background: var(--view-primary);
}


.view-blogslider .view-prev,
.view-blogslider .view-next,
.view-blogslider .view-swiper-prev,
.view-blogslider .view-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--view-secondary);


}





/* Fallback پوزیشن وقتی JS هنوز جابه‌جا نکرده */
.view-blogslider .view-prev,
.view-blogslider .view-swiper-prev {
    left: 8px;
}

.view-blogslider .view-next,
.view-blogslider .view-swiper-next {
    right: 8px;
}