.joodit-slider {
    --joodit-slider-radius: 24px;
    --joodit-slider-shadow-opacity: 0.22;
    --joodit-slider-overlay: linear-gradient(180deg, rgba(8, 18, 24, 0.04) 0%, rgba(8, 18, 24, 0.62) 100%);
    --joodit-slider-overlay-opacity: 1;
    --jpb-mat: 0px;
    --jpb-border-w: 0px;
    --jpb-mat-eff: var(--jpb-mat);
    --jpb-border-w-eff: var(--jpb-border-w);
    --jpb-cap-align: center;
    --jpb-cap-font: inherit;
    --jpb-cap-size: 14px;
    --jpb-cap-color: #ffffff;
    --jpb-cap-mat-inset: 8px;
    --jpb-cap-size-eff: var(--jpb-cap-size);
    --jpb-cap-mat-inset-eff: var(--jpb-cap-mat-inset);
    --jpb-cap-offset: var(--jpb-cap-mat-inset-eff);
    --jpb-cap-pad-y-eff: 10px;
    --jpb-cap-pad-x-eff: 12px;
    position: relative;
    overflow: hidden;
    border-radius: var(--joodit-slider-radius);
    background: #dbe6eb;
    box-shadow: 0 24px 60px rgba(14, 34, 48, var(--joodit-slider-shadow-opacity));
}

.joodit-slider-hook-injection,
.joodit-slider-content-injection {
    box-sizing: border-box;
    width: min(100%, var(--joodit-slider-injection-max-width, 1180px));
    margin: 0 auto 2rem;
    padding-inline: var(--joodit-slider-injection-side-padding, 24px);
}

.joodit-slider-hook-injection .joodit-slider,
.joodit-slider-content-injection .joodit-slider {
    max-width: 100%;
}

.joodit-slider__viewport {
    position: relative;
}

.joodit-slider__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--joodit-slider-transition-ms, 450ms) ease;
    color: inherit;
    text-decoration: none;
}

.joodit-slider__slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.joodit-slider[data-transition="slide"] .joodit-slider__viewport {
    overflow: hidden;
}

.joodit-slider[data-transition="slide"] .joodit-slider__slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--joodit-slider-transition-ms, 450ms) ease;
}

.joodit-slider[data-transition="slide"] .joodit-slider__slide.is-active {
    position: relative;
    transform: translateX(0);
}

.joodit-slider[data-transition="slide"] .joodit-slider__slide.is-enter-from-left {
    transform: translateX(-100%);
}

.joodit-slider[data-transition="slide"] .joodit-slider__slide.is-enter-from-right {
    transform: translateX(100%);
}

.joodit-slider[data-transition="slide"] .joodit-slider__slide.is-exit-to-left {
    transform: translateX(-100%);
}

.joodit-slider[data-transition="slide"] .joodit-slider__slide.is-exit-to-right {
    transform: translateX(100%);
}

.joodit-slider__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--joodit-slider-overlay);
    opacity: var(--joodit-slider-overlay-opacity);
}

.joodit-slider__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.joodit-slider.jpb .jpb-caption {
    position: absolute;
    left: calc(var(--jpb-mat-eff) + var(--jpb-border-w-eff));
    right: calc(var(--jpb-mat-eff) + var(--jpb-border-w-eff));
    bottom: calc(var(--jpb-mat-eff) + var(--jpb-border-w-eff));
    top: auto;
    z-index: 4;
    padding: 0;
    pointer-events: none;
    font-family: var(--jpb-cap-font);
    font-size: var(--jpb-cap-size-eff, var(--jpb-cap-size));
    line-height: 1.35;
    color: var(--jpb-cap-color);
    text-align: var(--jpb-cap-align);
}

.joodit-slider.jpb.joodit-slider--cap-align-left .jpb-caption {
    left: 8px;
    right: auto;
    bottom: 8px;
    max-width: 92%;
}

.joodit-slider.jpb.joodit-slider--cap-align-right .jpb-caption {
    left: auto;
    right: 8px;
    bottom: 8px;
    max-width: 92%;
}

.joodit-slider.jpb.joodit-slider--cap-align-center .jpb-caption {
    left: 8px;
    right: 8px;
    bottom: 8px;
}

.joodit-slider.jpb .jpb-caption .jpb-caption-text {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(3px, calc(var(--jpb-page-w-eff, 360px) * 0.010), 6px)
             clamp(6px, calc(var(--jpb-page-w-eff, 360px) * 0.020), 10px);
    background: rgba(0,0,0,0.55);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    border-radius: 6px;
    word-break: break-word;
}

.joodit-slider.jpb.jpb-cap-overlay-bottom .jpb-caption {
    top: auto;
    transform: translateY(calc(0px - var(--jpb-cap-offset)));
}

.joodit-slider__control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: rgba(16, 36, 49, 0.22);
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.45rem;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 10px 24px rgba(8, 18, 24, 0.18);
    backdrop-filter: blur(4px);
    transition: opacity 160ms ease, transform 180ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.joodit-slider__control:hover,
.joodit-slider__control:focus-visible {
    background: rgba(16, 36, 49, 0.34);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(8, 18, 24, 0.22);
}

.joodit-slider__control:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

.joodit-slider__control--prev {
    left: 18px;
}

.joodit-slider__control--next {
    right: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .joodit-slider__control {
        opacity: 0;
        pointer-events: none;
    }

    .joodit-slider__control--prev {
        transform: translateY(-50%) translateX(-8px);
    }

    .joodit-slider__control--next {
        transform: translateY(-50%) translateX(8px);
    }

    .joodit-slider:hover .joodit-slider__control,
    .joodit-slider:focus-within .joodit-slider__control {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) translateX(0);
    }
}

.joodit-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.joodit-slider__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.joodit-slider__dot.is-active {
    background: #ffffff;
}

@media (max-width: 768px) {
    .joodit-slider {
        --joodit-slider-radius: 18px;
    }

    .joodit-slider {
        --jpb-cap-pad-y-eff: clamp(5px, calc(10px * 0.7), 9px);
        --jpb-cap-pad-x-eff: clamp(6px, calc(12px * 0.7), 10px);
    }

    .joodit-slider__caption-text {
        max-width: 100%;
    }

    .joodit-slider__control {
        width: 40px;
        height: 40px;
    }

    .joodit-slider__control--prev {
        left: 12px;
    }

    .joodit-slider__control--next {
        right: 12px;
    }
}