/* Course video player on Plyr 3.7.8 (learning page + course page). Loaded after vendors/plyr-3.7.8/plyr.css. */

/* Brand colour: the site's own --primary (wcc #43d477 from app.css; kca periwinkle from kca_theme). */
.plyr {
    --plyr-color-main: var(--primary, #43d477);
    --plyr-font-family: inherit;
    --plyr-menu-color: #1f2937;
    --plyr-tooltip-color: #1f2937;
}

/* Plyr's CSS keeps .plyr direction:ltr, so on RTL pages the timeline still fills left to right. */
.plyr__caption {
    unicode-bidi: plaintext;
}

.plyr:focus:not(:focus-visible) {
    outline: none;
}

/* The seek bar gets its own full-width row (Plyr squeezes it next to the volume slider otherwise). */
.plyr--video .plyr__controls {
    flex-wrap: wrap;
    row-gap: 2px;
    padding-top: 28px;
}

.plyr--video .plyr__controls .plyr__progress__container {
    order: -1;
    flex: 1 1 100%;
    margin: 0;
    padding-left: 7px;
    padding-right: 7px;
}

.plyr--video .plyr__controls .plyr__controls__item:first-child {
    margin-right: 0;
}

.plyr--video .plyr__controls .plyr__volume {
    margin-right: auto;
}

@media (max-width: 575px) {
    .plyr--video .plyr__volume input[type="range"] {
        display: none;
    }

    .plyr--video .plyr__controls .plyr__volume {
        min-width: 0;
    }
}

/* Learning page: the player fills the video area (same box Video.js filled), picture letterboxed. */
.learning-page .learning-content .learning-content-video-player {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.learning-content-video-player > .plyr {
    height: 100%;
}

.learning-content-video-player > .plyr .plyr__video-wrapper,
.learning-content-video-player > .plyr .plyr__video-embed {
    height: 100%;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
}

.learning-content-video-player > .plyr video {
    height: 100%;
    object-fit: contain;
}

/* Course page: demo video and free-lesson preview keep the video's own shape. */
.demo-video-card .plyr,
.js-modal-video-content .plyr {
    border-radius: 10px;
}

/* "Resumed at 3:12 · Start over" (shown for a few seconds after a resume). */
.course-plyr-resume {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    max-width: calc(100% - 24px);
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.course-plyr-resume:hover,
.course-plyr-resume:focus-visible {
    background: var(--plyr-color-main);
}

.course-plyr-error-path {
    word-break: break-all;
    max-width: 100%;
}