/** media */
.player{
    position: relative;
    max-width: 100%;
    background: #000;
    overflow: hidden;
    border-radius: 0;
}

.player .video{
    width: 100%;
    height: auto;
    display: block;
    background: #000;
    object-fit: cover;
}
.player:fullscreen,
.player:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #000;
}

.player:fullscreen .video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Overlay onderaan (gradient) */
.controls-overlay{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .75rem;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    display: flex;
    align-items: center;
    gap: .5rem;

    /* hidden by default */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none; /* voorkomt “click-through” issues */
}

/* toon overlay bij hover, focus of via JS class */
.player:hover .controls-overlay,
    /*.player:focus-within .controls-overlay,*/
.player.show-controls .controls-overlay{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.controls-overlay .btn{
    background: rgba(25,25,25,.85);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: .45rem .6rem;
    cursor: pointer;
    line-height: 1;
}

.controls-overlay .btn:hover{
    background: rgba(45,45,45,.9);
}

.controls-overlay .progress{
    flex: 1;
    height: 6px;
    accent-color: #fff;
}

/* Fullscreen: overlay blijft onderaan in fullscreen container */
.player:fullscreen .controls-overlay,
.player:-webkit-full-screen .controls-overlay{
    padding: 1rem;
}