/* Overlay styles */
.video-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
  z-index: 1000;
  justify-content: center;
  align-items: center;
  overflow: auto; /* Allow scrolling if needed */
}

/* Ensure overlay is hidden when not active */
.video-overlay:not(.active) {
  display: none !important;
}

/* Ensure overlay is visible when active */
.video-overlay.active {
  display: flex;
}

/* Video container */
.video-container {
  position: relative;
  width: 80vw; /* Responsive width */
  max-width: 800px; /* Max width for larger screens */
  aspect-ratio: 16 / 9; /* Maintain YouTube video aspect ratio */
  background-color: #000; /* Fallback background */
  transform: scale(0.7); /* Start scaled down */
  transition: transform 0.5s ease; /* Smooth scale-up animation */
  z-index: 1; /* Below close button */
}

/* Video container when overlay is active */
.video-overlay.active .video-container {
  transform: scale(1); /* Full size when active */
}

/* Embedded YouTube iframe */
.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
  z-index: 1; /* Below close button */
  pointer-events: auto; /* Ensure video controls are clickable */
}

/* Close button */
.close-btn {
  position: absolute;
  top: -30px;
  right: 0;
  color: #fff;
  font-size: 24px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2); /* Debug: Semi-transparent background */
  border: none;
  transition: color 0.3s ease, background 0.3s ease;
  z-index: 1000; /* Very high to ensure clickability */
  padding: 15px; /* Larger hit area */
  line-height: 1; /* Prevent text alignment issues */
  pointer-events: auto; /* Ensure clicks are registered */
  border-radius: 5px; /* Debug: Rounded corners */
}
.close-btn:hover {
  color: #ff0000;
  background: rgba(255, 255, 255, 0.3);
}
.close-btn:focus {
  outline: 2px solid #ff0000; /* Accessibility: Focus indicator */
}

/* Mobile optimization */
@media (max-width: 600px) {
  .video-container {
    width: 90vw; /* Wider on small screens */
    max-width: none; /* Remove max-width */
  }
  .close-btn {
    top: -40px;
    padding: 20px; /* Larger hit area for mobile */
    font-size: 20px;
  }
}