/* Landing Page Popup Styles */
.landing-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.landing-popup-overlay.show {
    opacity: 1;
}

.landing-popup-content {
    background: white;
    width: 90%;
    max-width: 800px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.landing-popup-overlay.show .landing-popup-content {
    transform: scale(1);
}

.popup-close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Move close button inside if we want, or keep it outside. 
   If outside, it might be cut off by screen edges on mobile.
   Let's put it inside, top right of the video. */
.popup-close-btn {
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
}

.popup-close-btn:hover {
    background: white;
    transform: rotate(90deg);
}

/* Slider Styles */
.popup-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.popup-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through if inactive */
}

.popup-slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.popup-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-slide iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.popup-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Caption Area - Below Video */
.popup-caption-area {
    padding: 20px;
    background: white;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

.popup-caption-area h3 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* Navigation Dots */
.popup-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.popup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s;
}

.popup-dot.active {
    background: #2196F3;
    transform: scale(1.2);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .landing-popup-content {
        width: 95%;
    }

    .popup-caption-area {
        padding: 15px;
    }

    .popup-caption-area h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .popup-close-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}