/**
 * SoftSpine — WB Nested Carousel styles.
 *
 * Ports the --e-n-carousel-* CSS custom-property system from Elementor Pro's
 * widget-nested-carousel.min.css so that the DOM structure and JS handler
 * behave identically to the Pro widget.
 *
 * Variable names are kept 1-to-1 with Pro so that any third-party CSS
 * that targets the Pro variables keeps working after the widgetType swap.
 *
 * Critical: the pre-init rule (.swiper:not(.swiper-initialized)) prevents
 * FOUC by showing slides in a row at the correct width before JS fires.
 *
 * @package WBCustomWidgets
 */

/* ── CSS custom-property defaults ─────────────────────────────────────────── */
.elementor-widget-wb-n-carousel {
    --e-n-carousel-swiper-slides-to-display: 3;
    --e-n-carousel-swiper-slides-gap: 10px;

    /* Arrow positioning */
    --e-n-carousel-arrow-prev-left-align:    0%;
    --e-n-carousel-arrow-prev-translate-x:   0px;
    --e-n-carousel-arrow-prev-top-align:     50%;
    --e-n-carousel-arrow-prev-translate-y:   -50%;
    --e-n-carousel-arrow-prev-left-position: 0px;
    --e-n-carousel-arrow-prev-top-position:  0px;

    --e-n-carousel-arrow-next-right-align:    0%;
    --e-n-carousel-arrow-next-translate-x:    0%;
    --e-n-carousel-arrow-next-top-align:      50%;
    --e-n-carousel-arrow-next-translate-y:    -50%;
    --e-n-carousel-arrow-next-right-position: 0px;
    --e-n-carousel-arrow-next-top-position:   0px;

    /* Arrow appearance */
    --e-n-carousel-arrow-size:          24px;
    --e-n-carousel-arrow-normal-color:  #fff;
    --e-n-carousel-arrow-hover-color:   #fff;

    /* Slide / container */
    --e-n-carousel-slide-height:             auto;
    --e-n-carousel-slide-container-height:   auto;

    /* Pagination dots */
    --e-n-carousel-dots-gap:    6px;
    --e-n-carousel-dots-size:   8px;

    /* Pagination progressbar */
    --e-n-carousel-progressbar-height: 4px;

    /* Offset peek */
    --e-n-carousel-swiper-offset-size: 80px;
}

/* ── Widget outer wrapper ──────────────────────────────────────────────────── */
.elementor-widget-wb-n-carousel {
    position: relative;
}

/* ── .e-n-carousel (.swiper root) ─────────────────────────────────────────── */
.elementor-widget-wb-n-carousel .e-n-carousel {
    width:    100%;
    overflow: hidden;
    position: relative;
}

/* ── Pre-init FOUC prevention ─────────────────────────────────────────────── */
/*
 * Before Swiper initialises (.swiper-initialized is NOT yet on the element)
 * lay out slides in a row using the CSS var so the user sees the right number
 * of slides without a full-column flash.
 */
.elementor-widget-wb-n-carousel .e-n-carousel:not(.swiper-initialized) > .swiper-wrapper {
    display:        flex;
    flex-wrap:      nowrap;
    overflow:       visible;
}

.elementor-widget-wb-n-carousel .e-n-carousel:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: calc(
        (100% - (var(--e-n-carousel-swiper-slides-to-display) - 1) * var(--e-n-carousel-swiper-slides-gap))
        / var(--e-n-carousel-swiper-slides-to-display)
    );
    margin-right: var(--e-n-carousel-swiper-slides-gap);
}

.elementor-widget-wb-n-carousel .e-n-carousel:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:last-child {
    margin-right: 0;
}

/* ── Swiper wrapper ────────────────────────────────────────────────────────── */
.elementor-widget-wb-n-carousel .swiper-wrapper {
    align-items: stretch;
}

/* ── Slides ────────────────────────────────────────────────────────────────── */
.elementor-widget-wb-n-carousel .swiper-slide {
    height:     var(--e-n-carousel-slide-height, auto);
    box-sizing: border-box;
}

/* Equal-height: when --e-n-carousel-slide-height = auto and container-height = 100% */
.elementor-widget-wb-n-carousel .swiper-slide > .e-con {
    height: var(--e-n-carousel-slide-container-height, auto);
}

/* ── Navigation arrows ─────────────────────────────────────────────────────── */
.elementor-widget-wb-n-carousel .elementor-swiper-button {
    position:       absolute;
    top:            var(--e-n-carousel-arrow-prev-top-align, 50%);
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          var(--e-n-carousel-arrow-size, 24px);
    height:         var(--e-n-carousel-arrow-size, 24px);
    cursor:         pointer;
    z-index:        10;
    color:          var(--e-n-carousel-arrow-normal-color, #fff);
    transition:     color 0.2s ease, background 0.2s ease;
}

.elementor-widget-wb-n-carousel .elementor-swiper-button:hover {
    color: var(--e-n-carousel-arrow-hover-color, #fff);
}

.elementor-widget-wb-n-carousel .elementor-swiper-button-prev {
    left:      calc(var(--e-n-carousel-arrow-prev-left-align, 0%) + var(--e-n-carousel-arrow-prev-left-position, 0px));
    transform: translate(var(--e-n-carousel-arrow-prev-translate-x, 0px), var(--e-n-carousel-arrow-prev-translate-y, -50%));
}

.elementor-widget-wb-n-carousel .elementor-swiper-button-next {
    right:     calc(var(--e-n-carousel-arrow-next-right-align, 0%) + var(--e-n-carousel-arrow-next-right-position, 0px));
    top:       var(--e-n-carousel-arrow-next-top-align, 50%);
    transform: translate(var(--e-n-carousel-arrow-next-translate-x, 0%), var(--e-n-carousel-arrow-next-translate-y, -50%));
}

/* Swiper sets .swiper-button-disabled on arrows at edges (non-loop) */
.elementor-widget-wb-n-carousel .elementor-swiper-button.swiper-button-disabled {
    opacity:        0.35;
    pointer-events: none;
}

/* Arrow icon sizing */
.elementor-widget-wb-n-carousel .elementor-swiper-button i,
.elementor-widget-wb-n-carousel .elementor-swiper-button svg {
    font-size: var(--e-n-carousel-arrow-size, 24px);
    width:     var(--e-n-carousel-arrow-size, 24px);
    height:    var(--e-n-carousel-arrow-size, 24px);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.elementor-widget-wb-n-carousel .swiper-pagination {
    position:   relative;
    bottom:     auto;
    margin-top: 12px;
    text-align: center;
    width:      100%;
}

/* Dots */
.elementor-widget-wb-n-carousel .swiper-pagination-bullet {
    width:            var(--e-n-carousel-dots-size, 8px);
    height:           var(--e-n-carousel-dots-size, 8px);
    margin:           0 calc(var(--e-n-carousel-dots-gap, 6px) / 2);
    background:       var(--swiper-pagination-bullet-inactive-color, #ccc);
    opacity:          var(--swiper-pagination-bullet-inactive-opacity, 0.5);
    border-radius:    50%;
    display:          inline-block;
    transition:       background 0.2s, opacity 0.2s;
    cursor:           pointer;
}

.elementor-widget-wb-n-carousel .swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, #000);
    opacity:    1;
}

/* Progress bar */
.elementor-widget-wb-n-carousel .swiper-pagination-progressbar {
    background:    var(--swiper-pagination-progressbar-bg-color, rgba(0,0,0,0.25));
    height:        var(--e-n-carousel-progressbar-height, 4px);
    border-radius: 0;
    position:      relative;
}

.elementor-widget-wb-n-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background:    var(--swiper-pagination-color, #000);
    border-radius: 0;
}

/* Fraction */
.elementor-widget-wb-n-carousel .swiper-pagination-fraction {
    color:     var(--e-n-carousel-fraction-color, inherit);
    font-size: var(--e-n-carousel-fraction-font-size, 1em);
}

/* ── Offset peek (P2 — vars wired, effect applied via JS class) ────────────── */
.elementor-widget-wb-n-carousel.offset-both .e-n-carousel,
.elementor-widget-wb-n-carousel.offset-left .e-n-carousel,
.elementor-widget-wb-n-carousel.offset-right .e-n-carousel {
    overflow: visible;
}

.elementor-widget-wb-n-carousel.offset-both {
    padding-inline: var(--e-n-carousel-swiper-offset-size, 80px);
}

.elementor-widget-wb-n-carousel.offset-left {
    padding-inline-start: var(--e-n-carousel-swiper-offset-size, 80px);
}

.elementor-widget-wb-n-carousel.offset-right {
    padding-inline-end: var(--e-n-carousel-swiper-offset-size, 80px);
}