/* Root */
.view-brands {
    position: relative;
    width: 100%;
    --nav-gap: 16px; /* fallback; با data-navgap هم ست می‌شود */
}

/* Swiper wrapper fix */
.view-brands__swiper {
    overflow: hidden;
}

/* Slide card (only image link) */
.view-brands__card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* قابل استایل‌دهی از کنترل‌ها */
    border: 0;
    border-radius: 18px; /* کنترل Elementor روی radius کار می‌کند */
}

.view-brands__logo {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.view-brands__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
    border-radius: inherit; /* اگر radius کارت تغییر کرد */
}


/* Navigation (auto-injected by JS if enabled) */
.view-brands__prev,
.view-brands__next {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: radial-gradient(closest-side, var(--view-nav-bg, #ff5a7a) 62%, var(--view-nav-bg, #ff5a7a) 100%);
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--view-nav-bg, #ff5a7a) 30%, transparent),
    0 12px 28px color-mix(in srgb, var(--view-nav-bg, #ff5a7a) 55%, transparent);
    cursor: pointer;
}

/* فاصله از کناره‌های کارد با متغیر یا data-navgap */
.view-brands__prev {
    left: calc(var(--nav-gap, 16px) * -1);
}

.view-brands__next {
    right: calc(var(--nav-gap, 16px) * -1);
}

/* Arrow icons using borders */
.view-brands__prev::before,
.view-brands__next::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    transform: translateY(-50%);
}

.view-brands__prev::before {
    left: 50%;
    border-right-color: var(--view-nav-ico, #fff);
    margin-left: -4px;
}

.view-brands__next::before {
    right: 50%;
    border-left-color: var(--view-nav-ico, #fff);
    margin-right: -4px;
}

/* Pagination */
.view-brands__pagination {
    position: relative;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.view-brands__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #cbd0dc;
    opacity: 1;
}

.view-brands__pagination .swiper-pagination-bullet-active {
    background: #6b6bea;
}

/* پیش‌فرض: اسلایدر نمایش، گرید مخفی */
.view-brands--slider .view-brands__grid {
    display: none;
}

.view-brands--slider .view-brands__swiper {
    display: block;
}

/* در موبایل: اسلایدر مخفی، گرید دو ستونه نمایش */
@media (max-width: 767px) {
    .view-brands--slider .view-brands__swiper {
        display: none !important;
    }

    .view-brands--slider .view-brands__grid {
        display: grid !important;
        gap: var(--vb-grid-gap, 16px);
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* دو ستونه */
        align-items: stretch;
    }

    .view-brands--slider .view-brands__grid .view-brands__card {
        height: 100%;
    }
}

/* اگر جایی ناوبری/پیجینیشن داشتید، در موبایل مخفی‌شون کنید */
@media (max-width: 767px) {
    .view-brands--slider .view-brands__prev,
    .view-brands--slider .view-brands__next,
    .view-brands--slider .view-brands__pagination {
        display: none !important;
    }
}