/* =============================================
   Lightbox Flow Image Widget
   ============================================= */
.ek-lightbox-flow-image {
    @apply relative block w-full;
}

.ek-lfi-image-wrapper {
    @apply relative overflow-hidden rounded-2xl w-full h-full;

    img {
        @apply block w-full h-full object-cover transition-transform duration-[600ms] ease-in-out;
    }

    .ek-lfi-play-btn {
        @apply rounded-full;
    }
}

.ek-lightbox-flow-image:hover .ek-lfi-image-wrapper img {
    @apply scale-[1.03];
}

/* Image-only layout: entire image is clickable */
.ek-lfi-layout-image .ek-lfi-image-wrapper {
    @apply cursor-pointer;
}

.ek-lfi-overlay {
    @apply absolute inset-0 bg-black/15 pointer-events-none transition-colors duration-300 ease-in-out;
}

.ek-lightbox-flow-image:hover .ek-lfi-overlay {
    @apply bg-black/25;
}

/* Play Button Badge */

/* Rotating Text SVG */
.ek-lfi-rotating-text {
    @apply absolute inset-0 w-full h-full;
    animation: ekRotateText 10s linear infinite;

    textPath {
        fill: #FFF;
        font-size: 11px;
        @apply font-semibold tracking-[3px] uppercase;
    }
}

@keyframes ekRotateText {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Play Icon (center) */
.ek-lfi-play-icon {
    @apply relative z-[3] flex items-center justify-center pointer-events-none;

    i {
        @apply text-2xl transition-transform duration-300 ease-in-out;
        color: #FF6D2E;
    }
    svg {
        @apply w-6 h-6 transition-transform duration-300 ease-in-out;
        fill: #FF6D2E;
    }
}

/* Lightbox Modal */
.ek-lfi-lightbox {
    @apply fixed inset-0 z-[999999] flex items-center justify-center
    opacity-0 invisible transition-all duration-[350ms] ease-in-out;

    &.ek-lfi-active {
        @apply opacity-100 visible;

        .ek-lfi-lightbox-content {
            @apply scale-100;
        }
    }
}

.ek-lfi-lightbox-overlay {
    @apply absolute inset-0 backdrop-blur-[4px];
    background-color: rgba(0, 0, 0, 0.85);
}

.ek-lfi-lightbox-content {
    @apply relative z-[1] w-[90%] max-w-[900px] rounded-xl overflow-hidden
    scale-[0.9] transition-transform duration-[350ms] ease-in-out;
    aspect-ratio: 16 / 9;

    iframe,
    video {
        @apply w-full h-full border-none;
    }
}

.ek-lfi-lightbox-close {
    @apply absolute top-5 right-5 z-[2] w-11 h-11
    flex items-center justify-center rounded-full
    text-white text-xl cursor-pointer
    transition-all duration-200 ease-in-out
    backdrop-blur-[8px];
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);

    &:hover {
        background: rgba(255, 255, 255, 0.25);
        @apply rotate-90;
    }
}

.ek-lfi-play-btn {
    @apply flex items-center justify-center cursor-pointer transition-all duration-300;
    .ek-lfi-play-icon {
        i,
        svg {
            @apply w-[1em] h-[1em] transition-all duration-300;
        }
    }
}

.ek-lfi-layout-image-button {
    .ek-lfi-play-btn {
        @apply absolute bg-[rgba(80,50,30,0.65)] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
        w-[140px] h-[140px] no-underline z-2
        backdrop-blur-sm;

        &:hover {
            @apply shadow-[0_8px_32px_rgba(255,109,46,0.3)];
        }
    }
}

/* Button-only Layout */
.ek-lfi-layout-button {
    @apply flex items-center justify-center;
    .ek-lfi-play-btn {
        @apply rounded-[10px] relative top-auto left-auto translate-x-0 translate-y-0 h-[60px] w-40 bg-ekl-brand-two hover:bg-ekl-brand;

        &:hover {
            i {
                @apply text-white;
            }
            svg {
                @apply fill-white;
            }
        }
    }
}



/* Hidden trigger (play button hidden, image is clickable) */
.ek-lfi-trigger-hidden {
    @apply hidden;
}

/* Lightbox image content */
.ek-lfi-lightbox-content img {
    @apply w-full h-auto block;
}

/* Button text */
.ek-lfi-btn-text {
    @apply relative z-[3] text-white text-sm font-medium whitespace-nowrap;
}