/* ========================================
   استایل‌های اصلی اسلایدر
   ======================================== */

.slider .swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

    .slider .swiper-slide a {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* استایل عکس‌ها */
    .slider .swiper-slide img {
        width: 100%;
        height: 450px;
        object-fit: cover;
        display: block;
        border-radius: 15px;
    }

/* ========================================
   مدیریت نمایش عکس‌ها (دسکتاپ vs موبایل)
   ======================================== */

/* دسکتاپ: فقط عکس کامپیوتر نمایش داده شود */
.desktop-slider-img {
    display: block !important;
}

.mobile-slider-img {
    display: none !important;
}

/* ========================================
   موبایل (عرض کمتر از 767px)
   ======================================== */
@media (max-width: 767px) {
    /* مخفی کردن عکس دسکتاپ */
    .desktop-slider-img {
        display: none !important;
    }

    /* نمایش عکس موبایل */
    .mobile-slider-img {
        display: block !important;
    }

    /* تنظیمات عکس موبایل */
    .slider .swiper-slide img {
        height: 280px !important;
        object-fit: contain !important;
        width: 100% !important;
        border-radius: 15px;
    }

    .slider .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
    }

        .slider .swiper-slide a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
}

/* ========================================
   تبلت (عرض بین 768px تا 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-slider-img {
        display: none !important;
    }

    .desktop-slider-img {
        display: block !important;
    }

    .slider .swiper-slide img {
        height: 350px !important;
        object-fit: cover;
    }
}

/* ========================================
   دسکتاپ کوچک (عرض بین 992px تا 1199px)
   ======================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .slider .swiper-slide img {
        height: 350px !important;
        object-fit: cover;
        max-width: 100%;
    }
}

/* ========================================
   دسکتاپ بزرگ (عرض بیشتر از 1200px)
   ======================================== */
@media (min-width: 1200px) {
    .slider .swiper-slide img {
        height: 380px !important;
        object-fit: cover;
    }
}

/* ========================================
   دکمه‌های ناوبری
   ======================================== */
.slider .swiper-button-next,
.slider .swiper-button-prev {
    color: #d5d5d5 !important;
    font-weight: 900 !important;
}

    .slider .swiper-button-next:hover,
    .slider .swiper-button-prev:hover {
        color: #0092e6 !important;
    }

/* ========================================
   تنظیمات ریسپانسیو دکمه‌ها
   ======================================== */
@media (min-width: 1200px) {
    .slider .swiper-button-next,
    .slider .swiper-button-prev {
        font-size: 25px !important;
    }

    .slider .col-sm-9 img {
        border-radius: 15px;
        width: 830px;
        height: 380px;
    }

    .slider .shop-img img {
        height: 185px !important;
    }

    .slider .shop {
        width: 300px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .slider .swiper-button-next,
    .slider .swiper-button-prev {
        font-size: 22px !important;
    }

    .slider .col-sm-9 img {
        border-radius: 15px;
        width: 720px;
        max-width: 100%;
    }

    .slider .shop-img img {
        height: 150px !important;
    }

    .slider .shop {
        width: 250px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .slider .swiper-button-next,
    .slider .swiper-button-prev {
        font-size: 18px !important;
    }

    .slider .col-sm-9 img {
        border-radius: 15px;
        width: 515px;
        height: 350px;
    }

    .slider .shop-img img {
        height: 150px !important;
    }

    .slider .shop {
        width: 221px;
    }
}

@media (max-width: 767px) {
    .slider .swiper-button-next,
    .slider .swiper-button-prev {
        font-size: 18px !important;
    }

    .slider .col-sm-9 img {
        border-radius: 15px;
        max-width: 100%;
        height: 280px;
    }

    .slider .shop-img img {
        height: 150px !important;
    }

    .slider .shop {
        border-radius: 15px;
    }
}

/* ========================================
   استایل بخش Shop (bestcat)
   ======================================== */
.slider .shop {
    border-radius: 10px;
    margin-right: 0.5px;
}

.slider .shop-img img {
    width: 100%;
    object-fit: cover;
}

.slider .shop h3 {
    font-size: 18px;
}

.slider .shop a {
    font-size: 10px;
}

/* ========================================
   تنظیمات ریسپانسیو برای متن Shop
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .slider .shop h3 {
        font-size: 16px;
    }

    .slider .shop a {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .slider .shop h3 {
        font-size: 18px;
    }

    .slider .shop a {
        font-size: 13px;
    }
}

/* ========================================
   تنظیمات Pagination
   ======================================== */
.slider .swiper-pagination {
    font-size: 50px;
}

/* ========================================
   تنظیمات موقعیت اسلایدر
   ======================================== */
@media (min-width: 1200px) {
    .slider {
        top: 380px;
        right: 38%;
    }

        .slider .slide {
            margin-right: -25px;
        }

        .slider .swiper {
            border-radius: 15px;
        }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .slider {
        top: 380px;
        right: 38%;
    }

        .slider .slide {
            margin-right: -25px;
        }

        .slider .swiper {
            border-radius: 15px;
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    .slider {
        top: 380px;
        right: 30%;
    }

        .slider .slide {
            margin-right: -25px;
        }

        .slider .swiper {
            border-radius: 15px;
        }
}

@media (max-width: 767px) {
    .slider .slide {
        right: 3%;
        margin-right: -25px;
    }

    .slider .swiper {
        border-radius: 15px;
    }

    .slider .col-sm-9 {
        margin-top: 15px;
    }
}

/* ========================================
   تنظیمات margin-top برای col-sm-9
   ======================================== */
.slider .col-sm-9 {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .slider .col-sm-9 {
        margin-top: 15px;
    }
}