/* Hls video player */
[agent=mobile] .syg-controls { display: none !important; pointer-events: none !important; }
.syg-player-wrap { position: relative; background: #000; cursor: none; container-type: inline-size; display: flex;
  align-items: center;}
.syg-player-wrap .media-player { max-height: 100vh !important; }
.syg-player-wrap.syg-active { cursor: default; }
.syg-controls {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.syg-controls svg {
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.4));
}
.syg-player-wrap.syg-active .syg-controls,
.syg-player-wrap.syg-paused .syg-controls { opacity: 1; pointer-events: auto; }
.syg-center-controls { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 7cqw, 8rem); }
.syg-btn-play {
    background: none; border: none; color: #FFFFFF; font-size: clamp(1.8rem, 8cqw, 5rem); line-height: 1;
    cursor: pointer; opacity: .9; padding: 0;
    transition: opacity .15s, transform .15s;

}
.syg-btn-play:hover { opacity: 1; transform: scale(1.05); }
.syg-btn-play:active { transform: scale(.9); }
.syg-icon-pause,
.syg-icon-muted { display: none; }
.syg-player-wrap.syg-playing .syg-icon-play   { display: none; }
.syg-player-wrap.syg-playing .syg-icon-pause  { display: block; }
.syg-player-wrap.syg-muted   .syg-icon-unmuted { display: none; }
.syg-player-wrap.syg-muted   .syg-icon-muted   { display: block; }
.syg-btn-skip {
    background: none; border: none; color: #FFFFFF; font-size: clamp(1rem, 5cqw, 3.5rem); line-height: 1;
    cursor: pointer; opacity: .9; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    transition: opacity .15s, transform .15s;

}
.syg-btn-skip:hover { opacity: 1; transform: scale(1.05); }
.syg-btn-skip:active { transform: scale(.9); }
@keyframes syg-spin-left  { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes syg-spin-right { from { transform: rotate(0); } to { transform: rotate( 360deg); } }
#syg_back.syg-spin svg .arrow { animation: syg-spin-left  .6s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; }
#syg_fwd.syg-spin  svg .arrow { animation: syg-spin-right .6s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; }
.syg-btn-skip span { font-size: clamp(.45rem, .9cqw, .75rem); letter-spacing: .03em; }
.syg-bottom { background: linear-gradient(transparent, rgba(0,0,0,.6)); padding: 2rem .85rem .65rem;
  position: absolute;
  bottom: 0;
  width: 100%;
 }
.syg-progress { position: relative; height: 3px; background: rgba(255,255,255,.2); cursor: pointer; margin-bottom: .45rem; transition: height .15s; border-radius: 5px;}
.syg-progress::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.syg-progress:hover { height: 5px; }
.syg-progress-fill,
.syg-progress-buffer { position: absolute; top: 0; left: 0; height: 100%; width: 0; pointer-events: none; border-radius: 5px;}
.syg-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    pointer-events: none;
    z-index: 2;
}
.syg-tooltip {
    position: absolute;
    bottom: calc(100% + 7px);
    transform: translateX(-50%);
    background: rgba(0,0,0,.72);
    color: var(--always-light);
    font-size: .65rem;
    padding: .15rem .4rem;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
}
.syg-progress-fill { background: var(--primary); z-index: 1; }
.syg-progress-buffer { background: rgba(255,255,255,.4); }
.syg-btns { display: flex; align-items: center; }
.syg-btn { background: none; border: none; padding: .2rem .35rem; color: var(--always-light); cursor: pointer; opacity: .9; font-size: 1rem; line-height: 1; transition: opacity .15s; }
.syg-btn:hover { opacity: 1; }
.syg-btn:active { transform: scale(.9); }
.syg-time { font-size: .7rem; color: rgba(255,255,255,.75); white-space: nowrap; padding: 0 .4rem 0 .1rem; }
.syg-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 3px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 0 .4rem 0 0;
    vertical-align: middle;
    flex-shrink: 0;
}
.syg-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--always-light); cursor: pointer; }
.syg-volume::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--always-light); border: none; cursor: pointer; }
.syg-volume:disabled { opacity: .25; cursor: not-allowed; pointer-events: none; }
.syg-player-wrap.syg-no-audio .syg-btn#syg_mute { opacity: .4; cursor: not-allowed; }
.syg-player-wrap.syg-fs,
.syg-player-wrap:fullscreen,
.syg-player-wrap:-webkit-full-screen,
.syg-player-wrap:-moz-full-screen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
.syg-player-wrap.syg-fs .media-player,
.syg-player-wrap:fullscreen .media-player,
.syg-player-wrap:-webkit-full-screen .media-player,
.syg-player-wrap:-moz-full-screen .media-player {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    flex-shrink: 0;
}