/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Video Popup Specific Styles */
.intant-popup-type-video {
    background: transparent !important;
    padding: 0 !important;
    /* Width removed to allow custom size settings */
    max-width: 95vw !important;
    max-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.intant-popup-type-video .inner_content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 8px !important;
    background: transparent !important;
    position: relative !important;
}

/* Video Container for responsive behavior */
.video-container {
    position: relative !important;
    background: transparent !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    /* Default size for iframes - will be overridden by JavaScript if custom size is set */
    min-width: 560px !important;
    min-height: 315px !important;
    width: 560px !important;
    height: 315px !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
}

/* Self-hosted video styling */
.intant-popup-type-video video#ipb_video_front {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 8px !important;
    display: block !important;
}

/* YouTube/Embedded video styling */
.intant-popup-type-video iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 8px !important;
    display: block !important;
    background: transparent !important;
}

/* Close button positioning for video popup */
.intant-popup-type-video .instant-cross {
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    z-index: 100001 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.intant-popup-type-video .instant-cross:hover {
    background: rgba(0, 0, 0, 1) !important;
    transform: scale(1.1) !important;
}

.intant-popup-type-video .instant-cross i {
    font-size: 20px !important;
    color: white !important;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .intant-popup-type-video {
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
    
    .video-container {
        min-width: 480px !important;
        min-height: 270px !important;
    }
}

@media (max-width: 768px) {
    .video-container {
        min-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

@media (max-width: 768px) {
    .intant-popup-type-video {
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
    
    .intant-popup-type-video .instant-cross {
        top: -10px !important;
        right: -10px !important;
        width: 35px !important;
        height: 35px !important;
    }
    
    .intant-popup-type-video .instant-cross i {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .intant-popup-type-video {
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
    
    .intant-popup-type-video .instant-cross {
        top: 5px !important;
        right: 5px !important;
        width: 30px !important;
        height: 30px !important;
    }
    
    .intant-popup-type-video .instant-cross i {
        font-size: 16px !important;
    }
}

/* Video popup mobile adjustments - moved from core plugin */
@media (max-width: 767px) {
    .intant-popup-type-video {
        max-width: 98vw !important;
        max-height: 98vh !important;
    }
}

/* Aspect ratio classes for future use */
.video-container.portrait {
    /* Portrait videos will be handled by object-fit: contain */
}

.video-container.landscape {
    /* Landscape videos will be handled by object-fit: contain */
}

.video-container.square {
    /* Square videos will be handled by object-fit: contain */
}

.video-container.ultra-wide {
    /* Ultra-wide videos will be handled by object-fit: contain */
}

/* Loading state for videos */
.video-container.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Video controls enhancement */
.intant-popup-type-video video#ipb_video_front::-webkit-media-controls {
    background: transparent !important;
}

.intant-popup-type-video video#ipb_video_front::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)) !important;
}

/* Ensure video maintains aspect ratio on all devices */
.intant-popup-type-video video#ipb_video_front,
.intant-popup-type-video iframe {
    aspect-ratio: auto !important;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: auto) {
    .intant-popup-type-video video#ipb_video_front,
    .intant-popup-type-video iframe {
        width: 100% !important;
        height: auto !important;
        max-height: 90vh !important;
    }
}

/* Additional enhancements for better UX */
.intant-popup-type-video .video-container {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.intant-popup-type-video .video-container:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure video controls are always visible */
.intant-popup-type-video video#ipb_video_front::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important;
}

/* Video popup specific overrides - moved from core plugin */
.intant-popup-type-video {
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
}

.intant-popup-type-video .inner_content {
    overflow: visible !important;
    height: auto !important;
    scrollbar-width: none !important;
    display: block !important;
}

/* Ensure video has no dark overlays */
.intant-popup-type-video video#ipb_video_front {
    background: transparent !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Legacy video styling for backward compatibility */
video#ipb_video_front {
    width: 100%;
    height: 100%;
}

/* Video controls - Hide play/pause button in Chrome, Edge, Opera when toggle is off */
.video_pause_c::-webkit-media-controls-play-button {
    display: none !important;
}

/* Hide the mute button when toggle is off */
.video_mute_c::-webkit-media-controls-mute-button {
    display: none !important;
}

/* Hide the volume slider when toggle is off (but keep mute button if mute toggle is on) */
.video_vol_c::-webkit-media-controls-volume-slider {
    display: none !important;
}

/* If both volume and mute are off, hide mute button too */
.video_vol_c.video_mute_c::-webkit-media-controls-mute-button {
    display: none !important;
}

/* Ensure timeline and fullscreen controls remain visible when other controls are hidden */
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-fullscreen-button {
    display: block !important;
}

/* Handle very small screens */
@media (max-width: 320px) {
    .intant-popup-type-video {
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
    
    .intant-popup-type-video .instant-cross {
        top: 2px !important;
        right: 2px !important;
        width: 25px !important;
        height: 25px !important;
    }
    
    .intant-popup-type-video .instant-cross i {
        font-size: 14px !important;
    }
}

/* Handle landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .intant-popup-type-video {
        max-height: 95vh !important;
    }
    
    .intant-popup-type-video .video-container.portrait {
        max-width: 50vw !important;
    }
}

/* Ensure proper z-index for video popups */
.intant-popup-type-video {
    z-index: 999999 !important;
}

.intant-popup-type-video .instant_overlay {
    z-index: 999998 !important;
}

/* Custom Play/Pause Button Styles */
.ipb-video-wrapper {
    position: relative !important;
    display: inline-block !important;
}

/* Hide play/pause button when control is disabled - fallback CSS */
.ipb-custom-play-pause[data-disabled="true"] {
    display: none !important;
}

.ipb-custom-play-pause {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px !important;
    height: 70px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.ipb-custom-play-pause:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
    opacity: 1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
}

.ipb-custom-play-pause:active {
    transform: translate(-50%, -50%) scale(0.95) !important;
}

.ipb-custom-play-pause .ipb-play-icon,
.ipb-custom-play-pause .ipb-pause-icon {
    color: white !important;
    font-size: 28px !important;
    line-height: 1 !important;
    margin-left: 4px !important; /* Slight offset for play icon to appear centered */
    display: inline-block !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

.ipb-custom-play-pause .ipb-pause-icon {
    margin-left: 0 !important;
    font-size: 24px !important;
}

/* Hide button when video is playing (optional - can be shown on hover) */
.ipb-video-wrapper:hover .ipb-custom-play-pause {
    opacity: 1 !important;
}

/* Responsive sizing for play/pause button */
@media (max-width: 768px) {
    .ipb-custom-play-pause {
        width: 60px !important;
        height: 60px !important;
    }
    
    .ipb-custom-play-pause .ipb-play-icon {
        font-size: 24px !important;
    }
    
    .ipb-custom-play-pause .ipb-pause-icon {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .ipb-custom-play-pause {
        width: 50px !important;
        height: 50px !important;
    }
    
    .ipb-custom-play-pause .ipb-play-icon {
        font-size: 20px !important;
    }
    
    .ipb-custom-play-pause .ipb-pause-icon {
        font-size: 18px !important;
    }
}