.player-section {
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	height:auto;
	margin-bottom:20px;
}

.videoplaylist {
	position:relative;
	width:100%;
	aspect-ratio:16/11;
	height:auto;
	margin-block:20px;
}


.mv-ep .videoslider-cnt { }
.mv-ep .video-title, .player-section .video-title { display:none; }

.videoplaylist-cnt.floating {
	position: fixed;
	inset: 86px 20px auto auto;
	width: 380px;
	height:248px;
	z-index: 999999999999;
	background:#333;
	color:#FFF;
	border-radius:12px;
	padding:8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.videoplaylist-cnt.floating .video-js { width: 100% !important; height: auto !important; }
.videoplaylist-cnt.floating .video-wrapper { width:100%; height:auto; }

.videoplaylist-cnt video {
	width: 100%;
	height: 100%;
}

.video-js { border-radius:6px; overflow:hidden; }

.videoplaylist-cnt.floating .video-title { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size: 15px; margin-bottom: 8px; margin-top:2px; padding-right:24px; line-height:1.2em; font-family:var(--fontstd); margin-inline:auto; }

.floating-countdown {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: rgba(0,0,0,0.8);
	color: white;
	padding:7px 8px;
	border-radius:80px;
	font-size: 11px;
	display: none;
	z-index: 10;
    font-family:var(--fontstd);
	line-height: 1em;
}

.floating-close {
	position: absolute;
	font-family:var(--fontdest);
	top: 5px;
	right: 5px;
	background-color: rgba(0,0,0,0.65);
	color: white;
	border: none;
	padding: 6px 8px;
	border-radius: 60px;
	font-size: 14px;
	cursor: pointer;
	display: none;
    font-weight:bold;
	z-index: 10;
	line-height: 1em;
}

.floating-close:hover {
	background-color: rgba(0,0,0,0.9);
}

.unmute-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: 2px solid white;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 24px;
	cursor: pointer;
	display: none;
	z-index: 5;
	transition: background-color 0.3s ease;
	display:flex;
	align-items:center;
	justify-content:center;
}

.unmute-button:hover {
	background-color: rgba(0, 0, 0, 0.9);
}

.unmute-button svg {
	width: 30px;
	height: 30px;
	fill: white;
}

.videoslider.floating .unmute-button {
	width: 50px;
	height: 50px;
	font-size: 20px;
}

.videoslider.floating .unmute-button svg {
	width: 25px;
	height: 25px;
}

.video-js .vjs-control-bar { background:rgba(0,0,0,.7) !important; }
.video-js .vjs-slider { background:rgba(0,0,0,.95) !important; }
.video-js .vjs-load-progress div { background:rgba(156,194,4,.8) !important; }
.vjs-mouse-display .vjs-time-tooltip { background:#000 !important; color:var(--cdest) !important; }

.ecplayer { background:#222; border-radius:8px; margin-bottom:26px; padding:10px 10px; min-height:220px; container-name:ec-player; container-type: inline-size; margin:1em 0;}
.tit-ep { display:flex; align-items:center; margin-bottom:10px; gap:4px; }
.tit-ep::before { content:''; display:block; width:17px; height:17px; background:url('https://www.ecartelera.com/images/play-green.svg'); background-size:contain; }
.tit-ep::after { content:''; display:block; width:108px; height:17px; background:url('https://www.ecartelera.com/images/ecartelera.svg'); background-size:contain; }
.tit-ep span { display:none; }
.cnt-ep { background:#333; border-radius:4px; overflow:hidden; display:flex; align-items:stretcht; line-height:0; gap:8px; }
.mv-ep { flex: 1; position: relative; aspect-ratio:16/9; }
.mv-ep video { aspect-ratio: 16 / 9;
	  width: 100%;
	  height:auto; }
.lv-ep { flex:0 0 190px; overflow:hidden; height: auto;  max-height: 100%; position:relative; }
.lv-ep ul { position:absolute; top:0; right:0; left:0; bottom:0; list-style:none; display:flex; flex-direction:column; gap:8px; margin:0 !important; overflow-y:auto; overscroll-behavior-y: contain; scroll-snap-type:y mandatory; anchor-name: --lv-car; scroll-behavior: smooth; scrollbar-width:none;
	> li {
		scroll-snap-align: center; 
	  }
	  &::scroll-button(*) {
		  position: fixed;
		  position-anchor: --lv-car;
		  display:block;
		  width:30px;
		  height:30px;
		  border-radius:30px;
		  font-size:20px;
		  border:1px solid rgba(255,255,255,.8);
		  cursor:pointer;
		  background:rgba(0,0,0,.6);
		  color:#FFF;
		  box-shadow:0 0 6px rgba(255,255,255,.4);
		  transition:.2s ease;
		}
	&::scroll-button(*):disabled {
	  opacity:.6;
	}
	&::scroll-button(*):not(:disabled):hover {
		box-shadow:0 0 6px rgba(255,255,255,.9);
		color:#ccfb51;
	}
	  &::scroll-button(block-start) {
		  position-area: block-start center;
		content: "❯" / "Scroll Up"; transform:rotate(-90deg);
		bottom:-34px;
		}
	  &::scroll-button(block-end) {
		  position-area: block-end center;
		content: "❯" / "Scroll Down"; transform:rotate(90deg);
		top:-35px;
		}
 }
.lv-ep ul li { margin:0 !important; padding:0 !important; scroll-snap-stop: always; }
.lv-ep ul li::before { display:none !important; }
.lv-ep ul li a { display:block; position:relative; }
.lv-ep ul li a::before { content:''; display:block; width:17px; height:17px; background:url('https://www.ecartelera.com/images/ecartelera.svg'); background-size:contain; position:absolute; top:9px; left:7px; opacity:0; transition:.3s ease; filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }
.lv-ep ul li a span { position:absolute; bottom:0; right:0; left:0; background:rgba(0,0,0,.5); line-height:1em; font-family:var(--fontnorm); font-weight:bold; font-size:15px; color:#DDD; padding:6px; transition:.3s ease; white-space:nowrap; text-overflow: ellipsis; overflow:hidden; }
.lv-ep ul li a:hover span { padding-block:10px; background:rgba(0,0,0,.8); color:#FFF; white-space: normal; }
.lv-ep ul li a:hover::before { opacity:.9; }

.ecplayer .vjs-theme-dt .vjs-control-bar { height:4em; }
.ecplayer .vjs-theme-dt .vjs-button > .vjs-icon-placeholder::before { font-size: 2.8em; line-height: 1.5em; }
.ecplayer .vjs-theme-dt .vjs-time-control { font-size: 1.4em; line-height: 3em; }
.ecplayer .vjs-theme-dt .vjs-play-control, .vjs-theme-dt .vjs-fullscreen-control { width: 5em; }
.ecplayer .vjs-theme-dt .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { height:4.8em; }

@container ec-player (width < 500px) {
	.cnt-ep { flex-direction:column; }
	.lv-ep { flex:0 0 115px; }
	.lv-ep ul { flex-direction:row; overflow-y:auto; overscroll-behavior-x: contain; scroll-snap-type:x mandatory; 
	&::scroll-button(block-start) {
		display:none;
		}
	  &::scroll-button(block-end) {
		display:none;
		}
	&::scroll-button(inline-start) {
		  position-area: inline-start center; transform:rotate(180deg);
		content: "❯" / "Scroll Next";
		right:-34px;
		}
	  &::scroll-button(inline-end) {
		  position-area: inline-end center;
		content: "❯" / "Scroll Previous"; 
		left:-35px;
		}
		
	}
}

@media (max-width: 1400px) {
    
.videoplaylist-cnt.floating { width:100%; }
#ec-floating-slot { width: 360px; }
.videoplaylist-cnt.floating .video-wrapper { width:340px; }
}

@media (max-width:850px) {
.videoplaylist-cnt.floating { top:50px; right:0; left:0; height:116px; width:100%; border-radius:0; overflow:hidden; padding:4px 6px; }
.videoplaylist-cnt.floating .video-wrapper { width:192px; }
.videoplaylist-cnt.floating .video-title { position:absolute; white-space:normal; left:197px; right:30px; width:calc(100% - 227px); top:0; bottom:0; overflow:hidden; text-align:center; font-size:14px; margin-inline:10px; display:flex; align-items:center; }
.videoplaylist-cnt.floating .video-title::before { display:none; }
.unmute-button { width:50px; height:50px; }
.videoplaylist-cnt.floating .unmute-button { left:95px; }
.videoplaylist-cnt.floating .floating-countdown { top:4px; }
.videoplaylist-cnt.floating .unmute-button { left:95px; }
.videoplaylist-cnt.floating .vjs-remaining-time { display:none; }
#ec-floating-slot {
    inset: 50px 0 auto 0;  /* full width top bar */
    width: 100%;
    height: 116px;         /* lock a height to avoid measuring on small screens */
    aspect-ratio: auto;
  }
}