/**
 * Voco Slider - Frontend Styles
 */

.voco-slider {
    width: 100%;
    max-width: 100%;
}

/* Magasság CSS változókkal (a JS állítja be data-attribútumok alapján) */
.voco-slider[data-height] {
    height: var(--voco-slider-height, auto);
}

.voco-slider .splide__track {
    overflow: hidden;
    height: 100%;
}

.voco-slider .splide__list {
    height: 100%;
}

.voco-slider .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.voco-slider .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.voco-slider .splide__slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Arrows */
.voco-slider .splide__arrow {
    background: rgba(255, 255, 255, 0.9);
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.voco-slider .splide__arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.voco-slider .splide__arrow svg {
    fill: #333;
}

/* Pagination */
.voco-slider .splide__pagination {
    bottom: 1rem;
}

.voco-slider .splide__pagination__page {
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.voco-slider .splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 767px) {
    .voco-slider[data-height-mobile] {
        height: var(--voco-slider-height-mobile, var(--voco-slider-height, auto)) !important;
    }

    .voco-slider .splide__arrow {
        width: 2.5em;
        height: 2.5em;
    }
    
    .voco-slider .splide__pagination {
        bottom: 0.5rem;
    }
}

@media (min-width: 768px) {
    .voco-slider[data-height-desktop] {
        height: var(--voco-slider-height-desktop, var(--voco-slider-height, auto)) !important;
    }
}