:root {
--lpl-player-notice-bg: #1AAFFF;
--lpl-video-radius: 12px;
--lpl-portrait-max-height: 70vh;
}
.lpl-player-wrap{ width: 100%; 
} .lpl-player-wrap.lpl-audio[data-lpl-player-layout="minimal"]{
width: auto;
} video.lpl-player--video,
.plyr__video-embed.lpl-player--video {
aspect-ratio: var(--lpl-ratio, 16 / 9);
width: 100%;
height: auto;
} .lpl-player-wrap.lpl-video {
border-radius: var(--lpl-video-radius);
overflow: hidden;
} .lpl-player-wrap.lpl-video.is-portrait {
max-width: calc(var(--lpl-portrait-max-height, 70vh) * var(--lpl-ratio-num, 0.5625));
margin-inline: auto;
} .lpl-player-wrap.lpl-video.is-portrait .plyr__poster {
background-size: cover;
} .plyr {
--plyr-range-thumb-background: var(--plyr-color-main, #00b2ff);
}
.plyr__controls input[type=range]::-webkit-slider-runnable-track{
box-shadow: none;
}
.plyr--audio .plyr__controls{
background: transparent;
}
.lpl-not-found{
text-align: center;
background: var(--lpl-player-notice-bg, var(--lex-color-brand-primary));
color: var(--wp-color-white);
padding-block: var(--lex-space-4, 16px);
padding-inline: var(--lex-space-0, 0);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} .lpl-player-wrap.lpl-audio{ --lpl-audio-radius:   12px; 
--lpl-audio-thumb-radius: 6px;
--lpl-audio-thumb-size:   64px;
--lpl-audio-gap:      12px;
--lpl-audio-pad-x:    16px;
--lpl-audio-pad-y:    12px;
--lpl-audio-title-size: 13px;
--lpl-audio-title-weight: 600;
--lpl-audio-info-gap: 6px; --lpl-audio-bg:       #ffffff;
--lpl-audio-text:     #1a1d23;
--lpl-audio-border:   #e2e4e7;
--lpl-audio-shadow:   0 1px 4px rgba(0, 0, 0, 0.06);
--lpl-audio-backdrop: none;
}
.lpl-player-wrap.lpl-audio.has-poster{ display: flex;
align-items: center;
gap: var(--lpl-audio-gap);
padding: var(--lpl-audio-pad-y) var(--lpl-audio-pad-x);
border: 1px solid var(--lpl-audio-border);
border-radius: var(--lpl-audio-radius);
background: var(--lpl-audio-bg);
box-shadow: var(--lpl-audio-shadow);
backdrop-filter: var(--lpl-audio-backdrop);
color: var(--lpl-audio-text);
}
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="classic"],
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="modern"],
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="simple"],
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="floating"],
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="minimal"]{
padding: var(--lpl-audio-pad-y) var(--lpl-audio-pad-x);
border: 1px solid var(--lpl-audio-border);
border-radius: var(--lpl-audio-radius);
} .lpl-playlist--audio .lpl-player-wrap.lpl-audio[data-lpl-player-layout]{
display: grid;
} .lpl-player-wrap.lpl-audio[data-skin="dark"] {
--lpl-audio-bg:     #1a1d23;
--lpl-audio-text:   #e0e3ea;
--lpl-audio-border: #2e3138;
--lpl-audio-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
--plyr-color-main:            #60a5fa;
--plyr-audio-control-color:   #9ca3af;
--plyr-audio-controls-background: transparent;
--plyr-range-fill-background: #60a5fa;
--plyr-range-thumb-background: #60a5fa;
} .lpl-player-wrap.lpl-audio[data-skin="glass"] {
--lpl-audio-bg:       rgba(255, 255, 255, 0.55);
--lpl-audio-text:     #1a1d23;
--lpl-audio-border:   rgba(255, 255, 255, 0.50);
--lpl-audio-shadow:   0 4px 24px rgba(0, 0, 0, 0.08);
--lpl-audio-backdrop: blur(12px);
} .lpl-player-wrap.lpl-audio img.lpl-audio-poster {
flex-shrink: 0;
width: var(--lpl-audio-thumb-size);
height: var(--lpl-audio-thumb-size);
border-radius: var(--lpl-audio-thumb-radius);
object-fit: cover;
align-self: center;
} .lpl-audio-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--lpl-audio-info-gap);
} .lpl-player-wrap.lpl-audio > .plyr {
flex: 1;
min-width: 0;
} .lpl-audio-title {
font-size: var(--lpl-audio-title-size);
font-weight: var(--lpl-audio-title-weight);
line-height: 1.2;
margin: 0;
color: var(--lpl-audio-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .lpl-player-wrap.lpl-audio.has-poster .plyr--audio .plyr__controls,
.lpl-player-wrap.lpl-audio.has-title .plyr--audio .plyr__controls,
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="classic"] .plyr--audio .plyr__controls,
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="modern"] .plyr--audio .plyr__controls,
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="simple"] .plyr--audio .plyr__controls,
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="floating"] .plyr--audio .plyr__controls,
.lpl-player-wrap.lpl-audio[data-lpl-player-layout="minimal"] .plyr--audio .plyr__controls {
padding: 0;
background: transparent;
} .theme-customify .plyr [data-plyr=airplay],
.theme-customify .plyr [data-plyr=captions],
.theme-customify .plyr [data-plyr=fullscreen],
.theme-customify .plyr [data-plyr=pip],
body.theme-customify .elementor-widget-vapfem_audio_player .plyr__control--overlaid{
display: none;
}
.theme-customify .plyr--full-ui input[type=range]{
box-shadow: none;
} body.wp-theme-astra .plyr__menu button[data-plyr="speed"]:focus {
background-color: unset;
}  .elementor-element[class*="wpr-"] .lpl-audio .plyr__control svg {
display: block;
}
.elementor-element[class*="wpr-"] .lpl-audio .plyr__control.plyr__control--pressed svg.icon--not-pressed,
.elementor-element[class*="wpr-"] .lpl-audio .plyr__control:not(.plyr__control--pressed) svg.icon--pressed {
display: none;
} .lpl-player-wrap.lpl-player-wrap::before,
.lpl-player-wrap.lpl-player-wrap::after,
.lpl-playlist.lpl-playlist::before,
.lpl-playlist.lpl-playlist::after,
.lpl-playlist-wrap.lpl-playlist-wrap::before,
.lpl-playlist-wrap.lpl-playlist-wrap::after,
.lpl-player-wrap div:not(.plyr, .plyr *)::before,
.lpl-player-wrap div:not(.plyr, .plyr *)::after,
.lpl-playlist div:not(.plyr, .plyr *)::before,
.lpl-playlist div:not(.plyr, .plyr *)::after {
content: none;
}  .plyr .plyr__control--overlaid {
padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
}
.plyr .plyr__progress {
margin-right: var(--plyr-range-thumb-height, 13px);
}
.plyr .plyr__progress__buffer {
margin: calc(var(--plyr-range-track-height, 5px) / 2 * -1)
calc(var(--plyr-range-thumb-height, 13px) / 2 * -1) 0;
}
.plyr .plyr__tooltip {
padding: calc(var(--plyr-control-spacing, 10px) / 2)
calc(var(--plyr-control-spacing, 10px) / 1.333);
margin-bottom: var(--plyr-control-spacing, 10px);
}
.plyr .plyr__menu__container {
margin-bottom: var(--plyr-control-spacing, 10px);
}  .lpl-audio[data-lpl-player-layout="classic"] .plyr__controls [data-plyr="play"],
.lpl-audio[data-lpl-player-layout="modern"] .plyr__controls [data-plyr="play"],
.lpl-audio[data-lpl-player-layout="simple"] .plyr__controls [data-plyr="play"],
.lpl-audio[data-lpl-player-layout="floating"] .plyr__controls [data-plyr="play"],
.lpl-audio[data-lpl-player-layout="minimal"] .plyr__controls [data-plyr="play"] {
background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, #00b2ff));
color: var(--plyr-audio-control-color-hover, #fff);
}  [data-lpl-player-layout="modern"] .plyr__controls {
flex-wrap: wrap;
gap: 5px;
}
[data-lpl-player-layout="modern"] .plyr__progress__container {
order: -1;
flex: 0 0 100%;
padding-left: 0;
}
[data-lpl-player-layout="modern"] .plyr__controls .plyr__controls__item:first-child {
margin-right: 0;
}
[data-lpl-player-layout="modern"] .plyr__controls .plyr__controls__item.plyr__time {
margin-right: auto;
} .lpl-audio[data-lpl-player-layout="simple"] {
--plyr-control-spacing: 8px;
} .lpl-video[data-lpl-player-layout="floating"] .plyr__controls {
position: absolute;
left: 10px;
right: 10px;
bottom: 25px;
display: flex;
align-items: center;
gap: 6px;
background: rgba(20, 20, 25, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 5px;
padding: 6px 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
transform: translateY(10px) scale(0.98);
transition: opacity 0.25s ease, transform 0.25s ease;
} .lpl-video[data-lpl-player-layout="minimal"] .plyr__controls {
display: none;
}
.lpl-audio[data-lpl-player-layout="minimal"] {
--plyr-audio-controls-background: transparent;
--plyr-control-icon-size: 28px;
--plyr-control-spacing: 18px;
}
.lpl-audio[data-lpl-player-layout="minimal"] .plyr__controls {
justify-content: center;
padding: 0;
}
.lpl-audio[data-lpl-player-layout="minimal"] .plyr__controls__item {
margin: 0 auto;
} .lpl-player-notice,
.lpl-player__error {
padding: 12px 16px;
background: var(--lpl-notice-bg, #f8d7da);
border: 1px solid var(--lpl-notice-border, #f5c6cb);
color: var(--lpl-notice-text, #721c24);
border-radius: 4px;
margin-top: 8px;
font-size: 14px;
line-height: 1.5;
}
.lpl-player-notice__text {
margin: 0;
} html.lpl-bl-open {
overflow: hidden;
scrollbar-gutter: stable;
}
.lpl-bl-dialog {
padding: 0;
border: 0;
max-width: none;
max-height: none;
background: transparent;
overflow: visible;
} .lpl-bl-dialog[open] {
position: fixed;
inset: 0;
margin: 0;
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
.lpl-bl-spinner,
.lpl-bl-box {
grid-area: 1 / 1;
}
.lpl-bl-dialog::backdrop {
background: rgba(15, 23, 42, 0.6);
opacity: 0;
transition: opacity 200ms ease-out;
}
.lpl-bl-dialog[open]::backdrop {
opacity: 1;
}
.lpl-bl-dialog.is-closing::backdrop {
opacity: 0;
}
.lpl-bl-spinner {
display: none;
width: 40px;
height: 40px;
margin: 0;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: lpl-bl-spin 0.8s linear infinite;
}
.lpl-bl-dialog.is-loading .lpl-bl-spinner {
display: block;
}
@keyframes lpl-bl-spin {
to { transform: rotate(360deg); }
}
.lpl-bl-box {
position: relative;
width: min(960px, calc(100vw - 32px));
max-height: calc(100dvh - 32px);
margin: 0;
padding: 0;
border: 1px solid var(--lpl-line, #e3e6eb);
border-radius: var(--lex-radius-lg, 12px);
background: var(--lpl-surface, #ffffff);
color: var(--lpl-ink, #1b2233);
overflow: auto;
opacity: 0;
visibility: hidden;
transform: scale(0.97);
transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.lpl-bl-dialog.is-ready .lpl-bl-box {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.lpl-bl-dialog.is-closing .lpl-bl-box {
opacity: 0;
transform: scale(0.97);
}
.lpl-bl-dialog[data-lpl-bl-kind="video"] .lpl-bl-box {
width: min(960px, calc(100vw - 32px));
}
.lpl-bl-dialog[data-lpl-bl-kind="audio"] .lpl-bl-box {
width: min(480px, calc(100vw - 32px));
}
.lpl-bl-dialog[data-lpl-bl-kind="playlist"] .lpl-bl-box {
width: min(1100px, calc(100vw - 32px));
} .lpl-bl-body {
padding: 56px 16px 16px;
}
.lpl-bl-body .lpl-player-wrap,
.lpl-bl-body .lpl-playlist-wrap {
margin: 0;
} .lpl-bl-box .lpl-bl-close,
.lpl-bl-box .lpl-bl-close:hover,
.lpl-bl-box .lpl-bl-close:focus,
.lpl-bl-box .lpl-bl-close:active {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: 12px;
right: 16px;
z-index: 2;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: var(--lex-space-8, 32px);
height: var(--lex-space-8, 32px);
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
background: transparent;
background-image: none;
border: 1px solid var(--lpl-line-strong, #c4c9d2);
border-radius: var(--lex-radius-sm, 4px);
box-shadow: none;
color: var(--lpl-ink, #1b2233);
font: inherit;
font-size: 0;
line-height: 1;
text-decoration: none;
opacity: 1;
transform: none;
cursor: pointer;
transition: background-color var(--lex-transition-fast, 0.15s ease);
}
.lpl-bl-box .lpl-bl-close:hover {
background-color: var(--lpl-surface-hover, #f3f4f7);
}
.lpl-bl-box .lpl-bl-close:focus {
outline: none;
}
.lpl-bl-box .lpl-bl-close:focus-visible {
outline: 2px solid var(--lex-color-brand-primary, #3858e9);
outline-offset: 2px;
}
.lpl-bl-box .lpl-bl-close svg {
display: block;
width: 16px;
height: 16px;
margin: 0;
fill: none;
stroke: currentColor;
pointer-events: none;
}
.lpl-bl-error {
margin: 0;
padding: 32px 16px;
text-align: center;
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 640px) {
.lpl-bl-dialog[data-lpl-bl-kind="video"] .lpl-bl-box,
.lpl-bl-dialog[data-lpl-bl-kind="audio"] .lpl-bl-box,
.lpl-bl-dialog[data-lpl-bl-kind="playlist"] .lpl-bl-box {
width: calc(100vw - 16px);
}
}
@media (prefers-reduced-motion: reduce) {
.lpl-bl-dialog::backdrop,
.lpl-bl-box,
.lpl-bl-dialog.is-ready .lpl-bl-box {
transition: none;
}
}