/**
 * BEA Media Carousel – Frontend Styles
 *
 * Modified: July 8, 2026, 6:27 PM
 * Purpose: Provides all visual styles for the BEA Media Carousel widget.
 *          Covers the Swiper wrapper layout, carousel image backgrounds, the
 *          play-icon overlay, caption/icon overlay animations, and the
 *          slideshow thumbnail strip. Mirrors Elementor Pro's widget-media-carousel
 *          stylesheet without pulling in any Pro-only selectors.
 */

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.bea-main-swiper {
    position: relative;
    overflow: hidden;
}

.bea-main-swiper .swiper-slide {
    overflow: hidden;
}

/* ── Carousel Image ──────────────────────────────────────────────────────────── */

.elementor-carousel-image {
    position:            relative;
    background-position: center center;
    background-repeat:   no-repeat;
    background-size:     cover;
    width:               100%;
    height:              100%;
    min-height:          200px;
}

/* Ensure inner content centres vertically. */
.bea-main-swiper .swiper-slide {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Make anchor tags for lightbox/videos fill the slide completely. */
.bea-main-swiper .swiper-slide a {
    display: block;
    width:   100%;
    height:  100%;
}

/* ── Play Icon ───────────────────────────────────────────────────────────────── */

.elementor-custom-embed-play {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    cursor:          pointer;
    z-index:         2;
    transition:      opacity 0.3s ease, transform 0.3s ease;
}

.elementor-custom-embed-play i,
.elementor-custom-embed-play svg {
    font-size:   60px;
    color:       #fff;
    line-height: 1;
    display:     block;
}

/* Slight scale-up on hover for a polished feel. */
.bea-main-swiper .swiper-slide:hover .elementor-custom-embed-play {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ── Image Overlay ───────────────────────────────────────────────────────────── */

.elementor-carousel-image-overlay {
    --e-carousel-image-overlay-color:     #fff;
    --e-carousel-image-overlay-icon-size: 30px;

    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         3;
    opacity:         0;
    transition:      opacity 0.3s ease;

    color:           var(--e-carousel-image-overlay-color);
    font-size:       var(--e-carousel-image-overlay-icon-size);
}

.bea-main-swiper .swiper-slide:hover .elementor-carousel-image-overlay {
    opacity: 1;
}

/* ── Overlay animation variants ──────────────────────────────────────────────── */

.e-overlay-animation-slide-up {
    transform:  translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.e-overlay-animation-slide-down {
    transform:  translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.e-overlay-animation-slide-right {
    transform:  translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.e-overlay-animation-slide-left {
    transform:  translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.e-overlay-animation-zoom-in {
    transform:  scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bea-main-swiper .swiper-slide:hover .e-overlay-animation-slide-up,
.bea-main-swiper .swiper-slide:hover .e-overlay-animation-slide-down,
.bea-main-swiper .swiper-slide:hover .e-overlay-animation-slide-right,
.bea-main-swiper .swiper-slide:hover .e-overlay-animation-slide-left,
.bea-main-swiper .swiper-slide:hover .e-overlay-animation-zoom-in {
    transform: none;
}

/* ── Swiper Navigation Buttons ───────────────────────────────────────────────── */

.elementor-swiper-button {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    z-index:     10;
    cursor:      pointer;
    font-size:   20px;
    color:       #fff;
    line-height: 1;
    transition:  opacity 0.2s ease;
}

.elementor-swiper-button:hover {
    opacity: 0.8;
}

.elementor-swiper-button-prev {
    left: 10px;
}

.elementor-swiper-button-next {
    right: 10px;
}

.elementor-swiper-button.swiper-button-disabled {
    opacity: 0.3;
    cursor:  default;
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */

.swiper-pagination {
    position: relative;
    margin-top: 10px;
    text-align: center;
}

/* When pagination is inside the swiper, override position. */
.elementor-pagination-position-inside .swiper-pagination {
    position: absolute;
    bottom:   10px;
    margin:   0;
    z-index:  10;
}

/* ── Lazy Load Preloader ─────────────────────────────────────────────────────── */

.swiper-lazy-preloader {
    position:        absolute;
    top:             50%;
    left:            50%;
    width:           42px;
    height:          42px;
    margin:          -21px 0 0 -21px;
    border-radius:   50%;
    border:          4px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    animation:       bea-spin 0.8s linear infinite;
}

@keyframes bea-spin {
    to { transform: rotate(360deg); }
}

/* ── Screen Reader Text ──────────────────────────────────────────────────────── */

.elementor-screen-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

/* ── Arrows visibility toggle (prefix_class driven by the widget) ────────────── */

.elementor-arrows-no .elementor-swiper-button {
    display: none;
}