/**
 * WPO Carousel Styles
 */


.wpo-image-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: calc(var(--wpo-carousel-dot-size) + (var(--wpo-carousel-indicator-pad-y) * 2) + var(--wpo-carousel-indicator-offset) + var(--wpo-carousel-indicator-buffer));

    --wpo-carousel-control-size: clamp(32px, 6vw, 44px);
    --wpo-carousel-control-icon: clamp(22px, 4.5vw, 28px);

    --wpo-carousel-indicator-offset: clamp(8px, 3vw, 30px);
    --wpo-carousel-indicator-buffer: 6px;
    --wpo-carousel-indicator-gap: clamp(6px, 2vw, 15px);
    --wpo-carousel-indicator-pad-y: clamp(6px, 1.2vw, 10px);
    --wpo-carousel-indicator-pad-x: clamp(10px, 2.5vw, 20px);

    --wpo-carousel-dot-size: clamp(8px, 2.2vw, 16px);
    --wpo-carousel-dot-border: clamp(1px, 0.4vw, 2px);
}

.wpo-image-carousel.is-partial {
    overflow: hidden;
}

.wpo-image-carousel-title {
    margin-bottom: 12px;
}

.wpo-image-carousel .vc_carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.wpo-image-carousel .vc_carousel-slideline {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wpo-image-carousel .vc_carousel-slideline-inner {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
    width: 100%;
}

.wpo-image-carousel[data-mode="vertical"] .vc_carousel-slideline-inner {
    flex-direction: column;
}

.wpo-image-carousel .vc_carousel-slideline-inner .vc_item {
    flex-shrink: 0;
    width: 100%;
}

.wpo-image-carousel .vc_item .vc_inner {
    width: 100%;
}

.wpo-image-carousel .vc_item img {
    display: block;
    width: 100%;
    height: auto;
}

.wpo-image-carousel .vc_carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--wpo-carousel-control-size);
    height: var(--wpo-carousel-control-size);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 11;
    backdrop-filter: blur(2px);
}

.wpo-image-carousel .vc_carousel-control:hover {
    background: rgba(0, 0, 0, 0.5);
}

.wpo-image-carousel .vc_left.vc_carousel-control {
    left: clamp(8px, 2vw, 12px);
}

.wpo-image-carousel .vc_right.vc_carousel-control {
    right: clamp(8px, 2vw, 12px);
}

.wpo-image-carousel .icon-prev:before {
    content: "\2039";
    font-size: var(--wpo-carousel-control-icon);
    line-height: 1;
}

.wpo-image-carousel .icon-next:before {
    content: "\203A";
    font-size: var(--wpo-carousel-control-icon);
    line-height: 1;
}

.wpo-image-carousel .vc_carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wpo-carousel-indicator-gap);
    list-style: none;
    margin: 0;
    margin-left: 0;
    padding: var(--wpo-carousel-indicator-pad-y) var(--wpo-carousel-indicator-pad-x);
    z-index: 10;
    width: max-content;
    max-width: calc(100% - (var(--wpo-carousel-indicator-pad-x) * 2));
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 25px;
}

.wpo-image-carousel .vc_carousel-indicators li {
    width: var(--wpo-carousel-dot-size);
    height: var(--wpo-carousel-dot-size);
    background: rgba(255, 255, 255, 0.7);
    border: var(--wpo-carousel-dot-border) solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wpo-image-carousel .vc_carousel-indicators li.active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
    border-color: #fff;
}

.wpo-image-carousel .vc_carousel-indicators li:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}