/**
 * Custom "Magic" Cursor Carousel Styles
 * Handles cursor animations for carousel navigation
 */

/* ==========================================================================
   1. GLOBAL FIX
   ========================================================================== */
.elementor-20586 .elementor-element.elementor-element-c678cb6 .swiper-slide>.elementor-element {
    display: flex;
}

/* ==========================================================================
   2. TABLET & MOBILE STYLES (Max Width 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {

    /* Show Standard Buttons on Mobile - Previous */
    #magic-cursor-carousel .elementor-swiper-button-prev,
    #magic-cursor-carousel-2 .elementor-swiper-button-prev {
        background: white !important;
        padding: 8px !important;
        border-radius: 0 50% 50% 0 !important;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.10) !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        visibility: visible !important;
        color: black !important;
        fill:black !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Show Standard Buttons on Mobile - Next */
    #magic-cursor-carousel .elementor-swiper-button-next,
    #magic-cursor-carousel-2 .elementor-swiper-button-next {
        background: white !important;
        padding: 8px !important;
        border-radius: 50% 0 0 50% !important;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.10) !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        visibility: visible !important;
        color: black !important;
        fill:black !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   3. DESKTOP ONLY LOGIC (Min Width 1025px)
   ========================================================================== */
@media (min-width: 1025px) {

    /* Setup default arrows to be hidden initially but styled */
    #magic-cursor-carousel .elementor-swiper-button-prev,
    #magic-cursor-carousel .elementor-swiper-button-next,
    #magic-cursor-carousel-2 .elementor-swiper-button-prev,
    #magic-cursor-carousel-2 .elementor-swiper-button-next {
        background: white !important;
        padding: 8px !important;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.10) !important;
        width: 50px !important;
        height: 50px !important;
        color: black !important;
        fill:black !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    /* Subtract button width (50px) plus the desired dynamic gap */
    #magic-cursor-carousel .elementor-swiper-button-prev,
    #magic-cursor-carousel-2 .elementor-swiper-button-prev {
        border-radius: 50% !important;
        left: -24px !important;
    }

    #magic-cursor-carousel .elementor-swiper-button-next,
    #magic-cursor-carousel-2 .elementor-swiper-button-next {
        border-radius: 50% !important;
        right: -24px !important;
    }

    /* Show arrows on hover of the carousel container */
    #magic-cursor-carousel:hover .elementor-swiper-button-prev,
    #magic-cursor-carousel:hover .elementor-swiper-button-next,
    #magic-cursor-carousel-2:hover .elementor-swiper-button-prev,
    #magic-cursor-carousel-2:hover .elementor-swiper-button-next {
        opacity: 1 !important;
        visibility: visible !important;
    }
}