/* ==================================================
   Custom Video Phone Carousel Slider Layout
   ================================================== */

.mk-video-phone-slider-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 60px 0;
    overflow: hidden;
    /* Default CSS variable values, overwritten by Elementor selectors */
    --phone-frame-width: 330px;
    --phone-frame-height: 580px;
}

/* Center overlay phone frame */
.video-phone-slider-frame-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    width: var(--phone-frame-width);
    height: var(--phone-frame-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-phone-slider-frame-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Swiper slider container */
.mk-video-phone-slider-container {
    width: 100%;
    height: calc(var(--phone-frame-height) + 60px); /* slightly larger for scale transition */
    padding: 30px 0;
}

.mk-video-phone-slider-container .swiper-wrapper {
    align-items: center;
}

/* Slides formatting */
.mk-video-phone-slider-container .swiper-slide {
    width: var(--phone-frame-width) !important; /* Lock visual cell width for slidesPerView auto */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1 !important; /* Keep opacity fully visible for all slides */
}

/* Slide inner content box */
.video-slide-inner-box {
    width: var(--phone-frame-width);
    height: var(--phone-frame-height);
    position: relative;
    transform: scale(0.65);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0 auto;
}

/* Center Active Slide */
.mk-video-phone-slider-container .swiper-slide.slide-depth-center {
    opacity: 1;
    z-index: 5;
}

.mk-video-phone-slider-container .swiper-slide.slide-depth-center .video-slide-inner-box {
    transform: scale(1) translateX(0); /* scales to fit frame perfectly */
}

/* Immediate Left Slide (Near Left) */
.mk-video-phone-slider-container .swiper-slide.slide-depth-near-left {
    opacity: 1;
    z-index: 3;
}

.mk-video-phone-slider-container .swiper-slide.slide-depth-near-left .video-slide-inner-box {
    transform: scale(0.88) translateX(calc(var(--phone-frame-width) * 0.06)); /* Shrunk and shifted right to overlap active slide */
}

/* Immediate Right Slide (Near Right) */
.mk-video-phone-slider-container .swiper-slide.slide-depth-near-right {
    opacity: 1;
    z-index: 3;
}

.mk-video-phone-slider-container .swiper-slide.slide-depth-near-right .video-slide-inner-box {
    transform: scale(0.88) translateX(calc(var(--phone-frame-width) * -0.06)); /* Shrunk and shifted left to overlap active slide */
}

/* Far Left Slide (Far Left Edge) */
.mk-video-phone-slider-container .swiper-slide.slide-depth-far-left {
    opacity: 1;
    z-index: 1;
}

.mk-video-phone-slider-container .swiper-slide.slide-depth-far-left .video-slide-inner-box {
    transform: scale(0.76) translateX(calc(var(--phone-frame-width) * 0.24)); /* Shrunk further and shifted right to overlap neighbors */
}

/* Far Right Slide (Far Right Edge) */
.mk-video-phone-slider-container .swiper-slide.slide-depth-far-right {
    opacity: 1;
    z-index: 1;
}

.mk-video-phone-slider-container .swiper-slide.slide-depth-far-right .video-slide-inner-box {
    transform: scale(0.76) translateX(calc(var(--phone-frame-width) * -0.24)); /* Shrunk further and shifted left to overlap neighbors */
}

/* Inner video screen area */
.video-slide-inner {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 8px;
    overflow: hidden;
    background-color: #000;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.video-slide-element {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    pointer-events: auto;
}

/* Poster cover image layer */
.video-slide-poster {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* CSS-based smartphone frame fallback */
.video-phone-slider-frame-wrapper.css-phone-frame {
    border: 12px solid #0f0f10;
    border-radius: 40px;
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.4), 
        inset 0 0 0 2px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.9);
    background-color: transparent;
    pointer-events: none;
    box-sizing: border-box;
}

.video-phone-slider-frame-wrapper.css-phone-frame .css-phone-island {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    background-color: #0f0f10;
    border-radius: 20px;
    z-index: 12;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Responsive adjustment for Small Laptops & Large Tablets */
@media (max-width: 1399px) {
    .mk-video-phone-slider-wrapper {
        --phone-frame-width: 300px;
        --phone-frame-height: 520px;
        padding: 40px 0;
    }
}

/* Responsive adjustment for Standard Tablets */
@media (max-width: 1024px) {
    .mk-video-phone-slider-wrapper {
        --phone-frame-width: 250px;
        --phone-frame-height: 440px;
        padding: 30px 0;
    }
    .video-phone-slider-frame-wrapper.css-phone-frame {
        border-width: 8px;
        border-radius: 30px;
    }
    .video-phone-slider-frame-wrapper.css-phone-frame .css-phone-island {
        width: 70px;
        height: 16px;
        top: 10px;
    }
    .video-slide-inner {
        top: 6px;
        bottom: 6px;
        left: 6px;
        right: 6px;
        border-radius: 22px;
    }
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 767px) {
    .mk-video-phone-slider-wrapper {
        --phone-frame-width: 190px;
        --phone-frame-height: 330px;
        padding: 20px 0;
    }
    .mk-video-phone-slider-container {
        padding: 10px 0;
        height: calc(var(--phone-frame-height) + 40px);
    }
    .video-phone-slider-frame-wrapper.css-phone-frame {
        border-width: 6px;
        border-radius: 22px;
    }
    .video-phone-slider-frame-wrapper.css-phone-frame .css-phone-island {
        width: 50px;
        height: 12px;
        top: 8px;
    }
    .video-slide-inner {
        top: 4px;
        bottom: 4px;
        left: 4px;
        right: 4px;
        border-radius: 16px;
    }
}