/* Make the timeline thinner */
.plyr__progress input[type=range] {
    height: 2px; /* Keep visual height thin */
    position: relative; /* Needed for pseudo-element positioning */
    cursor: pointer; /* Indicate interactivity */
}

/* Create a larger, invisible hit area using a pseudo-element */
.plyr__progress input[type=range]::before {
    content: '';
    position: absolute;
    top: -9px; /* Extend hit area upwards */
    left: 0;
    right: 0;
    bottom: -9px; /* Extend hit area downwards */
    /* This makes the effective clickable height 2px (original) + 9px + 9px = 20px */
    z-index: 1; /* Ensure it's above other elements if needed */
    /* background: rgba(255,0,0,0.1); /* For debugging: make it visible */
}

/* Ensure the actual track and thumb are above the pseudo-element */
.plyr__progress input[type=range]::-webkit-slider-runnable-track,
.plyr__progress input[type=range]::-moz-range-track,
.plyr__progress input[type=range]::-webkit-slider-thumb,
.plyr__progress input[type=range]::-moz-range-thumb {
    position: relative;
    z-index: 2;
}

.plyr__progress input[type=range]::-webkit-slider-runnable-track {
    height: 2px;
}

.plyr__progress input[type=range]::-moz-range-track {
    height: 2px;
}

.plyr_css {
  margin: auto;
  width: 100%;
  --plyr-color-main: white;
}

.plyr_css_work {
  --plyr-color-main: white;
}
.plyr__control[data-plyr="play"] {
    padding: 0 5px 2px 0;
    line-height: 1;
    width: 50px; /* Fixed width to prevent reflow */
}

.plyr__control[data-plyr="play"]:hover {
    background: transparent;
    color: white;
}

.plyr__control[data-plyr="play"] svg {
    display: none;
}

.plyr__control[data-plyr="play"] .plyr__sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem !important; /* Set font size here */
    line-height: 1 !important; /* Ensure line height is correct */
}

/* Make the timeline thinner */
.plyr__progress input[type=range] {
    height: 2px;
}

.plyr__progress input[type=range]::-webkit-slider-runnable-track {
    height: 2px;
}

.plyr__progress input[type=range]::-moz-range-track {
    height: 2px;
}

/* Style the playhead as a thin vertical line */
.plyr__progress input[type=range]::-webkit-slider-thumb {
    width: 2px;
    height: 10px;
    border-radius: 0;
    background: white; /* Changed to white */
    box-shadow: none;
    margin-top: -4px; /* Adjust to center vertically */
}

.plyr__progress input[type=range]::-moz-range-thumb {
    width: 2px;
    height: 10px;
    border-radius: 0;
    background: white; /* Changed to white */
    box-shadow: none;
}



/* Change played section to white */
.plyr__progress--played {
    background-color: white;
}

/* Hide progress buffer */
.plyr__progress--buffer {
    display: none !important;
}

/* Also try to hide the progress element directly if it's not working */
.plyr__progress progress[value] {
    display: none !important;
}

.plyr__control--overlaid {
    background: white; /* White background */
    border-radius: 0; /* Ensures the initialized overlay button is square */
    color: black; /* For the text */
    padding: 20px !important; /* More padding, force it */
    width: 100px !important; /* Custom width */
    opacity: 1 !important; /* Set opacity to 100% */
    font-size: 2rem !important;
    transition: opacity 0.3s ease-in-out !important; /* Only opacity transition */
}


.plyr__control--overlaid:hover {
    background: white !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color: black !important; /* Ensure text color remains black on hover */
}

.plyr--playing .plyr__control--overlaid {
    opacity: 0 !important;
    pointer-events: none !important; /* Disable clicks when hidden */
}

.plyr--paused .plyr__control--overlaid {
    opacity: 1 !important;
    pointer-events: auto !important; /* Enable clicks when visible */
}

#player .plyr__control--overlaid:hover {
    background: white !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color: black !important; /* Ensure text color remains black on hover */
}

.plyr__control--overlaid .plyr__sr-only {
    font-size: 1.8em !important; /* Larger font size for the large play button */
}