/**
 * NEF Event Carousel Widget Styles
 *
 * Styles for the custom NEF Event Carousel widget.
 * Adapted from Elementor Pro's Loop Carousel CSS patterns.
 *
 * CSS custom properties are set by the widget's Elementor controls
 * via the `selectors` parameter (e.g. '{{WRAPPER}}' => '--var: {{VALUE}}').
 */


/* ==========================================================================
   1. Widget Defaults & CSS Custom Property Initialization
   ========================================================================== */

.elementor-widget-nef-event-carousel {
    /* Pagination */
    --swiper-pagination-size: 0;
    --swiper-pagination-spacing: 10px;

    /* Slides */
    --swiper-slides-gap: 10px;

    /* Offset */
    --swiper-offset-size: 0;

    /* Fit content height */
    height: fit-content;

    /* Computed: bottom padding to accommodate pagination outside the slides */
    --swiper-padding-bottom: calc(var(--swiper-pagination-size) + var(--swiper-pagination-spacing));

    /* Arrow positioning defaults - Previous arrow */
    --arrow-prev-top-align: 50%;
    --arrow-prev-top-position: 0px;
    --arrow-prev-caption-spacing: 15px;
    --arrow-prev-left-align: 0px;
    --arrow-prev-left-position: 0px;
    --arrow-prev-translate-x: 0px;
    --arrow-prev-translate-y: 0px;

    /* Arrow positioning defaults - Next arrow */
    --arrow-next-top-align: 50%;
    --arrow-next-top-position: 0px;
    --arrow-next-caption-spacing: 15px;
    --arrow-next-right-align: 0px;
    --arrow-next-right-position: 0px;
    --arrow-next-translate-x: 0px;
    --arrow-next-translate-y: 0px;

    /* Dots pagination positioning defaults */
    --dots-vertical-position: 100%;
    --dots-vertical-offset: 0px;
    --dots-horizontal-position: 50%;
    --dots-horizontal-offset: 0px;
    --dots-horizontal-transform: -50%;
    --dots-vertical-transform: -100%;

    /* Fraction pagination positioning defaults */
    --fraction-vertical-position: 100%;
    --fraction-vertical-offset: 0px;
    --fraction-horizontal-position: 50%;
    --fraction-horizontal-offset: 0px;
    --fraction-horizontal-transform: -50%;
    --fraction-vertical-transform: -100%;
}


/* ==========================================================================
   2. Pagination Type Defaults (size per type)
   ========================================================================== */

.elementor-widget-nef-event-carousel.elementor-pagination-type-bullets {
    --swiper-pagination-size: 6px;
}

.elementor-widget-nef-event-carousel.elementor-pagination-type-fraction {
    --swiper-pagination-size: 16px;
}

.elementor-widget-nef-event-carousel.elementor-pagination-type-progressbar {
    --swiper-pagination-size: 4px;
}


/* ==========================================================================
   3. Swiper Container - Pre-initialization Layout
   --------------------------------------------------------------------------
   Before Swiper JS initializes, lay out slides manually using flexbox gap
   and the --swiper-slides-to-display variable so there is no layout shift.
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper:not(.swiper-initialized) > .swiper-wrapper,
.elementor-widget-nef-event-carousel .swiper-container:not(.swiper-container-initialized) > .swiper-wrapper {
    gap: var(--swiper-slides-gap);
    overflow: hidden;
}

.elementor-widget-nef-event-carousel .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide,
.elementor-widget-nef-event-carousel .swiper-container:not(.swiper-container-initialized) > .swiper-wrapper > .swiper-slide {
    /* Calculate slide width accounting for gaps between visible slides */
    --number-of-gaps: max(calc(var(--swiper-slides-to-display) - 1), 0);
    --gaps-width-total: calc(var(--number-of-gaps) * var(--swiper-slides-gap));
    max-width: calc((100% - var(--gaps-width-total)) / var(--swiper-slides-to-display, 1));
}


/* ==========================================================================
   4. Slide Content Links
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-wrapper .swiper-slide a.e-con {
    display: var(--display);
}


/* ==========================================================================
   5. Offset Sides Feature
   --------------------------------------------------------------------------
   Adds padding to the swiper container so slides peek in from the edges.
   Controlled via the "Offset" control in the widget panel.
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper.offset-left,
.elementor-widget-nef-event-carousel .swiper-container.offset-left {
    padding-inline-start: var(--swiper-offset-size, 0);
}

.elementor-widget-nef-event-carousel .swiper.offset-right,
.elementor-widget-nef-event-carousel .swiper-container.offset-right {
    padding-inline-end: var(--swiper-offset-size, 0);
}

.elementor-widget-nef-event-carousel .swiper.offset-both,
.elementor-widget-nef-event-carousel .swiper-container.offset-both {
    padding-inline-start: var(--swiper-offset-size, 0);
    padding-inline-end: var(--swiper-offset-size, 0);
}


/* ==========================================================================
   6. Navigation Arrows - Base Styles
   ========================================================================== */

.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-prev,
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-next {
    border-style: var(--arrow-normal-border-type);
    color: var(--arrow-normal-color, hsla(0, 0%, 93%, 0.9));
    font-size: var(--arrow-size, 25px);
    transition-duration: 0.25s;
    z-index: 2;
}

/* Arrow icon (SVG) fill - normal state */
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-prev svg,
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-next svg {
    fill: var(--arrow-normal-color, hsla(0, 0%, 93%, 0.9));
}

/* Arrow hover state */
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover,
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-next:hover {
    border-style: var(--arrow-hover-border-type);
    color: var(--arrow-hover-color, hsla(0, 0%, 93%, 0.9));
}

/* Arrow icon (SVG) fill - hover state */
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover svg,
.elementor-widget-nef-event-carousel .elementor-swiper-button.elementor-swiper-button-next:hover svg {
    fill: var(--arrow-hover-color, hsla(0, 0%, 93%, 0.9));
}


/* ==========================================================================
   7. Navigation Arrows - Positioning
   --------------------------------------------------------------------------
   Arrow position is computed from multiple CSS custom properties:
     - *-align: base position (e.g. 50% for vertical centering)
     - *-position: offset adjustment from control
     - *-caption-spacing: reserved space for captions
     - *-translate-*: fine-tuning via transform
   ========================================================================== */

/* Previous arrow positioning */
.elementor-widget-nef-event-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev {
    left: calc(var(--arrow-prev-left-align) + var(--arrow-prev-left-position));
    top: calc(var(--arrow-prev-top-align) + var(--arrow-prev-top-position) - var(--arrow-prev-caption-spacing));
    transform: translate(var(--arrow-prev-translate-x), var(--arrow-prev-translate-y));
}

/* Next arrow positioning */
.elementor-widget-nef-event-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-next {
    right: calc(var(--arrow-next-right-align) + var(--arrow-next-right-position));
    top: calc(var(--arrow-next-top-align) + var(--arrow-next-top-position) - var(--arrow-next-caption-spacing));
    transform: translate(var(--arrow-next-translate-x), var(--arrow-next-translate-y));
}


/* ==========================================================================
   8. Arrow Position Variants
   --------------------------------------------------------------------------
   .elementor-arrows-position-inside  - arrows overlay the slides
   .elementor-arrows-position-outside - arrows sit outside the slide area
   ========================================================================== */

/* Inside: arrows are positioned within the swiper boundaries (default) */
.elementor-widget-nef-event-carousel.elementor-arrows-position-inside .elementor-swiper-button {
    /* Arrows stay within the container - default positioning applies */
}

/* Outside: shift arrows beyond the swiper edges */
.elementor-widget-nef-event-carousel.elementor-arrows-position-outside .elementor-swiper-button.elementor-swiper-button-prev {
    left: calc(var(--arrow-prev-left-align) + var(--arrow-prev-left-position));
}

.elementor-widget-nef-event-carousel.elementor-arrows-position-outside .elementor-swiper-button.elementor-swiper-button-next {
    right: calc(var(--arrow-next-right-align) + var(--arrow-next-right-position));
}


/* ==========================================================================
   9. Pagination - Dots (Bullets)
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-pagination-bullet {
    background: var(--dots-normal-color, #000);
    height: var(--swiper-pagination-size);
    width: var(--swiper-pagination-size);
}

.elementor-widget-nef-event-carousel .swiper-pagination-bullet:hover {
    background: var(--dots-hover-color, #000);
    opacity: 1;
}


/* ==========================================================================
   10. Pagination - Fraction
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-pagination-fraction {
    color: var(--fraction-color, #000);
}


/* ==========================================================================
   11. Pagination - Progress Bar
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-horizontal ~ .swiper-pagination-progressbar,
.elementor-widget-nef-event-carousel .swiper-container-horizontal ~ .swiper-pagination-progressbar {
    height: var(--swiper-pagination-size);
}

.elementor-widget-nef-event-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--progressbar-normal-color, #000);
}

.elementor-widget-nef-event-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill:hover {
    background: var(--progressbar-hover-color, #000);
}


/* ==========================================================================
   12. Pagination - Shared Typography & Sizing
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-horizontal > .swiper-pagination-bullets,
.elementor-widget-nef-event-carousel .swiper-pagination,
.elementor-widget-nef-event-carousel .swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor-widget-nef-event-carousel .swiper-pagination-custom,
.elementor-widget-nef-event-carousel .swiper-pagination-fraction {
    font-size: var(--swiper-pagination-size);
    line-height: var(--swiper-pagination-size);
}


/* ==========================================================================
   13. Pagination - Dots Positioning
   --------------------------------------------------------------------------
   Uses CSS custom properties so the Elementor controls can adjust
   the dot cluster position (horizontal/vertical) and transform.
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-pagination-bullets {
    height: max-content;
    width: max-content;
    inset-inline-start: calc(var(--dots-horizontal-position) + var(--dots-horizontal-offset));
    top: calc(var(--dots-vertical-position) + var(--dots-vertical-offset));
    transform: translate(
        calc(var(--dots-horizontal-transform) * var(--direction-multiplier, 1)),
        var(--dots-vertical-transform)
    );
    z-index: 3;
}


/* ==========================================================================
   14. Pagination - Fraction Positioning
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-pagination-fraction {
    height: max-content;
    width: max-content;
    inset-inline-start: calc(var(--fraction-horizontal-position) + var(--fraction-horizontal-offset));
    top: calc(var(--fraction-vertical-position) + var(--fraction-vertical-offset));
    transform: translate(
        calc(var(--fraction-horizontal-transform) * var(--direction-multiplier, 1)),
        var(--fraction-vertical-transform)
    );
    z-index: 3;
}


/* ==========================================================================
   15. Pagination Position Variants
   --------------------------------------------------------------------------
   .elementor-pagination-position-outside - pagination sits below slides
     with padding to make room.
   .elementor-pagination-position-inside  - pagination overlays slides.
   ========================================================================== */

/* Outside: add bottom padding to the swiper container for pagination space */
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper-container,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper-container {
    padding-bottom: var(--swiper-padding-bottom);
}

/* Prevent double padding on background slideshows within outside-pagination containers */
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper .elementor-background-slideshow,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper-container .elementor-background-slideshow,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper .elementor-background-slideshow,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper-container .elementor-background-slideshow {
    padding-bottom: 0;
}

/* Outside pagination: align bullet dots to top of their line */
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside > .elementor-widget-container .swiper-pagination-bullet,
.elementor-widget-nef-event-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) .swiper-pagination-bullet {
    vertical-align: top;
}

/* Inside: pagination overlays the slide area (default behavior, no extra padding) */
.elementor-widget-nef-event-carousel.elementor-pagination-position-inside > .elementor-widget-container > .swiper,
.elementor-widget-nef-event-carousel.elementor-pagination-position-inside > .elementor-widget-container > .swiper-container {
    padding-bottom: 0;
}


/* ==========================================================================
   16. Equal Height Slides
   --------------------------------------------------------------------------
   When equal-height is enabled, Swiper adds .swiper-slide-visible and
   the slides should stretch to fill the container height.
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-wrapper {
    /* Equal height is handled by Swiper's autoHeight: false (default).
       When slides need equal height, the wrapper uses align-items: stretch. */
}

.elementor-widget-nef-event-carousel .swiper-slide {
    /* Ensure slides can stretch for equal height */
    height: auto;
}


/* ==========================================================================
   17. Editor Overrides
   --------------------------------------------------------------------------
   Styles that apply in the Elementor editor for better editing experience.
   ========================================================================== */

.elementor-widget-nef-event-carousel .swiper-slide-active.elementor-edit-area-active {
    overflow: initial;
}

.elementor-widget-nef-event-carousel.elementor-in-place-template-editable .swiper,
.elementor-widget-nef-event-carousel.elementor-in-place-template-editable .swiper-container {
    overflow: visible;
    overflow-x: clip;
}