/* Wrapper for player and iframe */
.cvp-player-wrap {
  max-width: 100%; /* Ensure container scales correctly */
  margin: 18px 0; /* Space between video blocks */
  position: relative; /* Maintain relative positioning */
}

/* Aspect ratio handling */
.cvp-player,
.cvp-iframe-wrap,
.cvp-video-poster-wrap {
  position: relative;
  display: block;
  width: 100%; /* Align container aspect */
  padding-bottom: 56.25%; /* Maintain 16:9 ratio */
  height: 0; /* Dynamically computed by padding-bottom */
  overflow: hidden; /* Prevent content overflow */
  background: #000; /* Set background to prevent flash of white */
  border-radius: 8px;
}

/* Poster image fills the container */
.cvp-video-poster img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ensure it fills the container */
  height: 100%;
  object-fit: cover; /* Cover aspect ratio */
}

/* Play button styling */
.cvp-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the play button */
}

.cvp-play-triangle {
  width: 84px;
  height: 56px;
  background: rgba(255, 255, 255, 0.7); /* Translucent white */
  clip-path: polygon(35% 10%, 35% 90%, 85% 50%); /* Balanced sharp triangle */
  border-radius: 4px; /* Slight rounding for a refined look */
  transition: background 0.3s, opacity 0.3s; /* Smooth transition effects */
  opacity: 1; /* Fully visible by default */
}

.cvp-video-poster:hover .cvp-play-triangle {
  opacity: 0.9; /* Slight increase on hover */
}

/* Centered spinner during video loading */
.cvp-spinner {
  display: none; /* Hidden initially */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.25); /* Background ring */
  border-top-color: rgba(255, 255, 255, 0.9); /* Spinner highlight */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center spinner */
  z-index: 999; /* Prevent spinner being hidden under content */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ensure iframe stability */
.cvp-iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  visibility: visible;
}


.cvp-sound-prompt {
  position: absolute;
  bottom: 20px; /* Adjust to the lower corner */
  right: 20px; /* Place it in the corner for visibility */
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.8); /* High contrast */
  color: white;
  font-size: 14px;
  border-radius: 5px;
  z-index: 9999; /* Ensure it overlays anything else */
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}


.cvp-sound-prompt:hover {
  opacity: 1;
}

.cvp-sound-prompt {
  background-color: #4da4df !important; /* Force red background */
}