/* HS HLS Playlist Player styles v1.0.9 */
:root {
  --accent: #1fb9ff;
  --accent-soft: rgba(31, 185, 255, 0.1);
  --accent-strong: #00e6a8;
  --text-primary: #f7f9ff;
  --text-muted: #a0aec0;
  --border-subtle: rgba(255, 255, 255, 0.05);
  --radius-lg: 18px;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.7);
}

.hs-hls-player-wrapper * { box-sizing: border-box; }

.video-shell{
  width:100%;
  max-width:1280px;
  background:linear-gradient(135deg,#060915,#050612);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  position:relative;
}

.playlist-panel{
  background:linear-gradient(180deg,#050814,#050814 40%,#040713);
  border-right:1px solid var(--border-subtle);
  display:flex;flex-direction:column;
}
.playlist-header{padding:20px 18px 10px;border-bottom:1px solid var(--border-subtle);}
.playlist-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.9;}
.playlist-title{font-size:16px;font-weight:600;margin-top:6px;color:var(--text-primary);}
.playlist-subtitle{font-size:12px;color:var(--text-muted);margin-top:4px;}

.playlist-list{list-style:none;margin-top:6px;padding:8px 0;overflow-y:auto;max-height:420px;}
.playlist-item{
  display:flex;align-items:center;padding:8px 12px;gap:12px;cursor:pointer;position:relative;
  transition:background .18s ease,transform .14s ease;color:var(--text-primary);
}
.playlist-item:hover{background:radial-gradient(circle at left,#11192b,transparent 70%);transform:translateX(2px);}
.playlist-item.active{background:linear-gradient(90deg,var(--accent-soft),transparent);}
.playlist-item.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),var(--accent-strong));}

.playlist-thumb{
  width:56px;height:56px;border-radius:16px;overflow:hidden;flex-shrink:0;background:#111624;
  border:1px solid rgba(255,255,255,.08);
}
.playlist-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.playlist-icon{
  width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
}
.playlist-icon:before{content:"";border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:1px;}

.playlist-text{flex:1;min-width:0;}
.playlist-text-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.playlist-text-meta{display:flex;justify-content:space-between;align-items:center;margin-top:2px;font-size:11px;color:var(--text-muted);}
.playlist-chip{padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.04);font-size:10px;text-transform:uppercase;letter-spacing:.1em;}

.player-panel{padding:18px 18px 18px 16px;}
.video-wrapper{
  position:relative;width:100%;padding-top:54%;border-radius:var(--radius-lg);overflow:hidden;
  background:radial-gradient(circle at center,#182235,#050814);
  box-shadow:0 14px 40px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.06);
}
.video-wrapper .plyr{position:absolute;inset:0;border-radius:var(--radius-lg);overflow:hidden;}
.video-tag{
  position:absolute;left:14px;top:14px;z-index:4;background:rgba(4,7,18,.8);backdrop-filter:blur(10px);
  padding:4px 10px;border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-muted);border:1px solid rgba(255,255,255,.1);pointer-events:none;
}

.hs-click-sound{
  position:absolute;right:18px;top:18px;z-index:5;background:transparent;color:#fff;font-size:13px;
  padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer;
}

.hs-click-sound.hidden{display:none;}

.plyr--full-ui.plyr--video{background:transparent;}
.plyr--fullscreen video,.plyr--fullscreen .plyr__video-wrapper{width:100%!important;height:100%!important;}

.hs-click-for-sound-btn {
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid transparent;
	border-radius: 60px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	outline: none;
	pointer-events: auto;
	position: absolute;
	right: 20.7747px;
	top: 20.7747px;
	max-width: 930.17px;
	padding: 6px 30px;
}
.hs-click-for-sound-btn:hover {
	background: rgba(0, 0, 0, 0.8);
	border-color: transparent;
	color: #fff;
}
.hs-click-for-sound-btn .video-sound-btn-text {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	white-space: nowrap;
	overflow: hidden;
	max-width: 200px !important;
	transition: max-width 200ms;
}

@media (max-width:900px){
  .video-shell{grid-template-columns:1fr;}
  .playlist-panel{border-right:none;border-bottom:1px solid var(--border-subtle);}
  .playlist-list{max-height:240px;}
}
@media (max-width:640px){
  .video-shell{border-radius:18px;}
  .player-panel{padding:14px;}
	.hs-click-for-sound-btn{
		padding: 0 10px;
  		height: 25px;
	}
	.playlist-header {
		text-align: center;
	}
	.video-shell {
		border: 1px solid aliceblue;
	}
}
