/**
 * VIDEO PLAYER EMERGENCY FIX
 * 
 * Issue: Video not playing on desktop (works on mobile)
 * Solution: Make iframe visible on desktop by default, hide on mobile
 * 
 * Badge Position Fix: Moved "Living The Dream" badge to top-left 
 * to avoid covering video controls at bottom
 * 
 * Add this CSS to your style-premium.css or create a custom CSS plugin
 */

/* ===================================================================
   DESKTOP VIDEO FIX - Make iframe visible by default on desktop
   =================================================================== */

/* Desktop: Show video iframe by default */
@media (min-width: 769px) {
    .video-wrapper iframe {
        opacity: 1 !important; /* Force visible on desktop */
        z-index: 1 !important;
    }
    
    /* Hide thumbnail and play button after first click */
    .video-thumbnail.hidden {
        display: none !important;
    }
    
    .video-play-button {
        z-index: 3 !important; /* Ensure play button is clickable */
    }
    
    /* Badge position fix - top left instead of bottom left */
    .video-badge {
        top: 20px !important;
        bottom: auto !important;
    }
}

/* Mobile: Keep original behavior (opacity controlled by JS) */
@media (max-width: 768px) {
    .video-wrapper iframe {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .video-wrapper iframe.playing {
        opacity: 1;
    }
    
    /* Badge position fix - top left on mobile too */
    .video-badge {
        top: 8px !important;
        bottom: auto !important;
    }
}

/* ===================================================================
   ALTERNATIVE FIX: Remove opacity transitions entirely
   =================================================================== */

/* Uncomment this section if the above doesn't work */
/*
.video-wrapper iframe {
    opacity: 1 !important;
    z-index: 1 !important;
}

.video-thumbnail {
    z-index: 2 !important;
}

.video-play-button {
    z-index: 3 !important;
}

.video-thumbnail.hidden {
    display: none !important;
}

.video-badge {
    top: 20px !important;
    bottom: auto !important;
}
*/