/* Vinolog Grid Carousel
   Add class "vinolog-grid-carousel" to Loop Grid widget
   Set pagination to "Numbers + Previous/Next"
*/

.vinolog-grid-carousel {
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
}

.vinolog-grid-carousel .elementor-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

/* Line indicators */
.vinolog-grid-carousel .elementor-pagination .page-numbers:not(.prev):not(.next) {
    font-size: 0;
    width: 25px;
    height: 4px;
    background: var(--e-global-color-38dadb8);
    border-radius: 2px;
    display: inline-block;
}

/* Active line */
.vinolog-grid-carousel .elementor-pagination span.page-numbers.current {
    background: var(--e-global-color-primary) !important;
    width: 60px !important;
}

/* Arrows */
.vinolog-grid-carousel .elementor-pagination .page-numbers.prev,
.vinolog-grid-carousel .elementor-pagination .page-numbers.next {
    position: absolute;
    top: calc(50% - 15px);
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    font-size: 0;
    background: transparent;
    cursor: pointer;
}

.vinolog-grid-carousel .elementor-pagination .page-numbers.prev {
    left: 7px;
}

.vinolog-grid-carousel .elementor-pagination .page-numbers.next {
    right: 7px;
}

.vinolog-grid-carousel .elementor-pagination .page-numbers.prev::before,
.vinolog-grid-carousel .elementor-pagination .page-numbers.next::before {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background-color: var(--e-global-color-primary);
    -webkit-mask-size: contain;
    mask-size: contain;
}

.vinolog-grid-carousel .elementor-pagination .page-numbers.prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E");
}

.vinolog-grid-carousel .elementor-pagination .page-numbers.next::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M354 875C371 875 387 867 396 858L692 558C704 546 708 529 708 513 708 496 704 479 692 467L396 146C383 133 371 125 354 125 337 125 321 129 308 142 296 154 287 171 287 188 287 204 292 221 308 233L562 513 308 775C300 783 292 796 292 813 292 829 296 846 308 858 325 871 337 875 354 875Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M354 875C371 875 387 867 396 858L692 558C704 546 708 529 708 513 708 496 704 479 692 467L396 146C383 133 371 125 354 125 337 125 321 129 308 142 296 154 287 171 287 188 287 204 292 221 308 233L562 513 308 775C300 783 292 796 292 813 292 829 296 846 308 858 325 871 337 875 354 875Z'/%3E%3C/svg%3E");
}

/* Hover effects */
.vinolog-grid-carousel .elementor-pagination .page-numbers.prev:hover,
.vinolog-grid-carousel .elementor-pagination .page-numbers.next:hover {
    opacity: 0.7;
}

.vinolog-grid-carousel .elementor-pagination a.page-numbers:not(.prev):not(.next):hover {
    background: var(--e-global-color-primary);
}

/* Mobile */
@media (max-width: 767px) {
    .vinolog-grid-carousel {
        padding-left: 30px;
        padding-right: 30px;
    }
    .vinolog-grid-carousel .elementor-pagination .page-numbers.prev {
        left: 2px;
    }
    .vinolog-grid-carousel .elementor-pagination .page-numbers.next {
        right: 2px;
    }
}


/* hide extra space if no pagination */
.vinolog-grid-carousel .elementor-pagination:not(:has(.page-numbers:not(.prev):not(.next))) {
    margin-top: 0;
}

/* when grid carousel (not loop grid), color arrows */
.vinolog-grid-carousel {
    --arrow-normal-color: var(--e-global-color-primary);
    --arrow-hover-color: var(--e-global-color-primary);
}
.vinolog-grid-carousel .elementor-swiper-button:hover {
    opacity: 0.7;
}