/* YouTube-like skin over Plyr. Colors that the shop owner may change come in as custom properties
   set by js/video.js from the plugin settings; everything else is fixed here. */

.dienaivideo {
    position: absolute;
    inset: 0;
    background: var(--plyr-video-background, #000);
    --plyr-font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
    --plyr-video-control-color: #fff;
    --plyr-video-control-background-hover: rgba(255, 255, 255, 0.18);
    --plyr-control-radius: 50%;
    --plyr-control-icon-size: 20px;
    --plyr-control-spacing: 8px;
    --plyr-range-track-height: 3px;
    --plyr-range-thumb-height: 13px;
    --plyr-range-thumb-background: var(--plyr-color-main);
    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.35);
    --plyr-video-range-track-background: rgba(255, 255, 255, 0.2);
    --plyr-tooltip-background: rgba(28, 28, 28, 0.92);
    --plyr-tooltip-color: #fff;
    --plyr-tooltip-radius: 4px;
    --plyr-menu-background: rgba(28, 28, 28, 0.92);
    --plyr-menu-color: #fff;
    --plyr-menu-arrow-color: #fff;
    --plyr-menu-border-color: rgba(255, 255, 255, 0.15);
    --plyr-menu-border-shadow-color: transparent;
    --plyr-menu-radius: 10px;
    --plyr-menu-back-border-color: rgba(255, 255, 255, 0.15);
    --plyr-menu-back-border-shadow-color: transparent;
}

.dienaivideo .plyr,
.dienaivideo .plyr__video-wrapper {
    height: 100%;
    width: 100%;
}

.dienaivideo .plyr video {
    width: 100%;
    height: 100%;
    object-fit: var(--dv-fit, contain);
}

/* Bottom bar: soft gradient, progress across the full width above the buttons */
.dienaivideo .plyr--video .plyr__controls {
    flex-wrap: wrap;
    padding: 36px 10px 4px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
}

.dienaivideo .plyr__controls .plyr__progress__container {
    order: -1;
    flex: 1 0 100%;
    margin: 0 0 2px;
    padding: 0 2px;
}

.dienaivideo .plyr__progress input[type="range"] {
    transition: height 0.1s ease;
}

.dienaivideo .plyr__progress:hover {
    --plyr-range-track-height: 5px;
}

/* the scrubber dot appears only while the pointer is on the bar, as on YouTube */
.dienaivideo .plyr__progress input[type="range"]::-webkit-slider-thumb {
    transform: scale(0);
    transition: transform 0.1s ease;
}

.dienaivideo .plyr__progress:hover input[type="range"]::-webkit-slider-thumb,
.dienaivideo .plyr__progress input[type="range"]:focus-visible::-webkit-slider-thumb {
    transform: scale(1);
}

.dienaivideo .plyr__progress input[type="range"]::-moz-range-thumb {
    transform: scale(0);
    transition: transform 0.1s ease;
}

.dienaivideo .plyr__progress:hover input[type="range"]::-moz-range-thumb,
.dienaivideo .plyr__progress input[type="range"]:focus-visible::-moz-range-thumb {
    transform: scale(1);
}

/* buttons stay on one row under the progress bar */
.dienaivideo .plyr__controls > .plyr__control,
.dienaivideo .plyr__controls > .plyr__controls__item {
    flex-shrink: 0;
}

.dienaivideo .plyr__controls .plyr__volume {
    width: auto;
    min-width: 0;
    max-width: none;
}

.dienaivideo .plyr__controls .plyr__volume input[type="range"] {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    margin-right: 4px;
}

/* plyr.css pushes the first button away with margin-right:auto; keep the left group together */
.dienaivideo .plyr__controls .plyr__controls__item:first-child {
    margin-right: 0;
}

/* left group: play, sound, time; right group starts at the first of settings / pip / fullscreen */
.dienaivideo .plyr--video .plyr__controls {
    justify-content: flex-start;
}

.dienaivideo .plyr__controls > .plyr__menu,
.dienaivideo .plyr__controls > [data-plyr="pip"],
.dienaivideo .plyr__controls > [data-plyr="fullscreen"] {
    margin-left: auto;
}

.dienaivideo .plyr__controls > .plyr__menu ~ [data-plyr="pip"],
.dienaivideo .plyr__controls > .plyr__menu ~ [data-plyr="fullscreen"],
.dienaivideo .plyr__controls > [data-plyr="pip"] ~ [data-plyr="fullscreen"] {
    margin-left: 0;
}

/* "0:12 / 3:15" on the left, everything after it pushed to the right */
.dienaivideo .plyr__controls .plyr__time {
    font-size: 13px;
}

.dienaivideo .plyr__controls .plyr__time + .plyr__time::before {
    content: "/";
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.8);
}

/* Big start button: rounded rectangle in the main color */
.dienaivideo .plyr__control--overlaid {
    padding: 13px 24px;
    border-radius: 14px;
    background: var(--plyr-color-main);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    opacity: 0.92;
}

.dienaivideo .plyr__control--overlaid:hover,
.dienaivideo .plyr__control--overlaid:focus-visible {
    background: var(--plyr-color-main);
    opacity: 1;
}

.dienaivideo .plyr__control--overlaid svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 480px) {
    .dienaivideo .plyr--video .plyr__controls {
        padding: 28px 6px 2px;
    }

    .dienaivideo .plyr .plyr__volume input,
    .dienaivideo .plyr [data-plyr="pip"] {
        display: none;
    }

    .dienaivideo .plyr .plyr__volume {
        width: auto;
    }
}

@media (max-width: 380px) {
    .dienaivideo .plyr__controls .plyr__time + .plyr__time {
        display: none;
    }
}

/* Gallery+ start buttons (over the cover, in the modal and on the small thumbnail) drawn the same
   way as the player's own big button. Only Gallery+ class names are targeted, its files stay as
   shipped; if a Gallery+ update renames them, its own white triangle simply comes back. The color
   comes from this plugin's settings through --dienaivideo-color, set by js/video.js. */
.galleryplus-video-play,
.galleryplus-modal-video-play,
.galleryplus-thumbnails-video-play {
    box-sizing: border-box;
    padding: 0 !important;
    background-color: var(--dienaivideo-color, #ff0033) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23fff' d='M15.562 8.1 3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 55% 50%;
    text-shadow: none !important;
}

.galleryplus-video-play,
.galleryplus-modal-video-play {
    width: 70px;
    height: 48px;
    border-radius: 14px;
    background-size: 22px 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    opacity: 0.92;
}

.galleryplus-video-play:hover,
.galleryplus-modal-video-play:hover {
    opacity: 1 !important;
}

.galleryplus-thumbnails-video-play {
    width: 24px;
    height: 17px;
    border-radius: 5px;
    background-size: 9px 9px;
}

.galleryplus-video-play > i,
.galleryplus-modal-video-play > i,
.galleryplus-thumbnails-video-play > i {
    display: none !important;
}

/* The gallery window is small (about 350x260 on a desktop, 320x240 on a phone) and clips anything
   outside it, so the settings menu is kept compact enough to fit above the control bar. */
.dienaivideo .plyr__menu__container {
    max-height: 180px;
    overflow-y: auto;
    font-size: 13px;
}

.dienaivideo .plyr__menu__container .plyr__control {
    padding: 4px 12px 4px 10px;
}

.dienaivideo .plyr__menu__container .plyr__control--back {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 2px;
}