.pv-video-player {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/*
 * Isolation from WordPress themes/page builders.
 * Some themes apply global rules to buttons and SVGs and can
 * break Plyr's overlaid play button.
 */
.pv-video-player .plyr {
    width: 100%;
    --plyr-video-background: #000;
    --plyr-color-main: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-family: inherit;
}

.pv-video-player .plyr button.plyr__control,
.pv-video-player .plyr button.plyr__control:hover,
.pv-video-player .plyr button.plyr__control:focus {
    border: 0;
    box-shadow: none;
    outline: none;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    padding: 10px;
}

.pv-video-player .plyr button.plyr__control svg {
    display: block;
    width: 18px;
    height: 18px;
    max-width: none;
    max-height: none;
    margin: 0;
    fill: currentColor;
    stroke: none;
}

.pv-video-player .plyr__control--overlaid {
    width: 64px;
    height: 64px;
    padding: 18px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
}

.pv-video-player .plyr__control--overlaid svg {
    width: 28px !important;
    height: 28px !important;
    fill: currentColor !important;
    margin: 0 !important;
}

.pv-video-player .plyr__control--overlaid:hover {
    background: #fff;
    color: #111;
}

.pv-video-player .plyr__video-wrapper {
    background: #000;
}

.pv-video-player video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

.pv-video-player .plyr__poster {
    background-color: #000;
}

@media (max-width: 600px) {
    .pv-video-player .plyr {
        border-radius: 0;
    }

    .pv-video-player .plyr__control--overlaid {
        width: 56px;
        height: 56px;
        padding: 15px !important;
    }

    .pv-video-player .plyr__control--overlaid svg {
        width: 24px !important;
        height: 24px !important;
    }
}


/*
 * Explicitly restore Plyr's two-state icon behavior.
 * Some WordPress themes force all SVGs to display, causing
 * play/pause and mute/unmute icons to appear simultaneously.
 */
.pv-video-player .plyr__control .icon--pressed,
.pv-video-player .plyr__control .icon--not-pressed {
    display: none !important;
}

.pv-video-player .plyr__control:not(.plyr__control--pressed) .icon--not-pressed {
    display: block !important;
}

.pv-video-player .plyr__control.plyr__control--pressed .icon--pressed {
    display: block !important;
}

/*
 * Protect Plyr controls from theme hover styles.
 * Some WordPress themes set a white background and/or white SVG
 * on button:hover, which makes the state icons disappear.
 */
.pv-video-player .plyr .plyr__controls .plyr__control:hover,
.pv-video-player .plyr .plyr__controls .plyr__control:focus,
.pv-video-player .plyr .plyr__controls .plyr__control:focus-visible {
    background: transparent !important;
    color: #fff !important;
}

.pv-video-player .plyr .plyr__controls .plyr__control:hover svg,
.pv-video-player .plyr .plyr__controls .plyr__control:focus svg,
.pv-video-player .plyr .plyr__controls .plyr__control:focus-visible svg {
    fill: currentColor !important;
    color: inherit !important;
}

.pv-video-player .plyr .plyr__controls .plyr__control.plyr__control--pressed:hover,
.pv-video-player .plyr .plyr__controls .plyr__control.plyr__control--pressed:focus {
    background: transparent !important;
    color: #fff !important;
}

/* Keep the large central play button's own hover appearance. */
.pv-video-player .plyr .plyr__control--overlaid:hover,
.pv-video-player .plyr .plyr__control--overlaid:focus {
    background: #fff !important;
    color: #111 !important;
}