/* If you have overlays above the video */
.overlayPlayBtn {
  pointer-events: none; /* Let clicks pass through */
}

/*
video {
  position: relative;
  z-index: 10; /* Ensure it's above other elements 
}
*/

    /* Play/Pause button styling */
    #playBtn {
        font-size: 18px; /* Icon size */
        padding: 7.5px 15px;
        cursor: pointer;
        border: none;
        background-color: #2f5572;
        color: white;
        /*border-radius: 8px;*/
        
        width: 40px;                    /* Circle width */
        height: 40px;                   /* Circle height (same as width) */
        border-radius: 50%;   
        display: inline-flex;           /* Center icon horizontally & vertically */
        align-items: center;
        justify-content: center;
        padding: 0;                   /* Remove padding to avoid offset, ensures the icon is truly centered without extra */
        line-height: 1;               /* Prevent extra vertical space, removes default text vertical spacing that can shift icons. */
        transition: background-color 0.3s ease;
    }

    #playBtn:hover {
        background-color: #d59541;
    }

/* Simple, cross-browser range input for scrubbing timeline */
.progress {
  /* flex-grow: 1;*/
  cursor: pointer;
  accent-color: #d59541;/* #ff0000; /* Modern browser track tint color */
}

.mute-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  /*background: #333;*/
   /* Tinted transparent background allows you to see the frosted glass effect */
  background-color: rgba(47, 85, 114, .8);/*rgba(139, 135, 135, 0.9); /*0.15*/
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px 8px; /* make conainer less tall */
  border-radius: 12px;
  /* max-width:50%; /* length*/
  width: 100%;
  max-width: 90%; /* Prevents it from stretching too wide */
  box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.9);

  /* Move container to the right */
  margin-left: 10px; 
}

@media (min-width: 768px) {
  .controls {
     max-width: 600px; /* Prevents it from stretching too wide */
  }
}

    /* Progress bar */
    .progress {
        flex: 1;
        appearance: none;
        height: 6px;
        background: #fbf8f8;
        border-radius: 3px;
        outline: none;
    }
    .progress::-webkit-slider-thumb {
        appearance: none;
        width: 14px;
        height: 14px;
        background: #ff9800;
        border-radius: 50%;
        cursor: pointer;
    }

    .progress:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Volume control */
    .volume {
        width: 100px;
        appearance: none;
        height: 6px;
        background: #fbf8f8;
        border-radius: 3px;
        outline: none;
    }
    .volume::-webkit-slider-thumb {
        appearance: none;
        width: 14px;
        height: 14px;
        background: #4caf50;
        border-radius: 50%;
        cursor: pointer;
    }

    /* Volume icon */
    .volume-icon {
        font-size: 18px;
        cursor: pointer;
    }