/* Video Playlist for YouTube - modern responsive player */

.vpfy-player{
	--vpfy-text:#1b1b1b;
	--vpfy-muted:#6b6b6b;
	--vpfy-active:#111111;
	--vpfy-radius:14px;
	display:grid;
	grid-template-columns:minmax(0, 1fr) 380px;
	gap:22px;
	width:100%;
	max-width:1100px;
	margin:0 auto;
	box-sizing:border-box;
	font-family:inherit;
	color:var(--vpfy-text);
}

.vpfy-player *,
.vpfy-player *::before,
.vpfy-player *::after{
	box-sizing:border-box;
}

/* ----- main video ----- */

.vpfy-player__main{
	min-width:0;
}

.vpfy-player__stage{
	position:relative;
	width:100%;
	height:500px;
	aspect-ratio:16 / 9;
	background:#000;
	border-radius:var(--vpfy-radius);
	overflow:hidden;
}

.vpfy-player__frame{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	display:block;
}

/* ----- playlist side ----- */

.vpfy-player__side{
	display:flex;
	flex-direction:column;
	min-height:0;
	padding:15px 0;
}

.vpfy-player__list{
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	padding:2px;
	scrollbar-width:thin;
}

.vpfy-player__list::-webkit-scrollbar{
	width:6px;
}

.vpfy-player__list::-webkit-scrollbar-thumb{
	background:rgba(0,0,0,.18);
	border-radius:6px;
}

.vpfy-item{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	margin:0;
	padding:8px;
	border:2px solid transparent;
	border-radius:var(--vpfy-radius);
	background:transparent;
	color:var(--vpfy-text);
	text-align:left;
	cursor:pointer;
	font:inherit;
	line-height:1.25;
	transition:border-color .2s ease, background-color .2s ease;
	-webkit-appearance:none;
	appearance:none;
}

.vpfy-item:hover{
	background:rgba(0,0,0,.04);
}

.vpfy-item.is-active{
	border-color:transparent;
	background:transparent;
}

.vpfy-item.is-active .vpfy-item__thumb{
	border:2px solid #174530;
	padding:3px;
	background-clip:content-box;
}

.vpfy-item.is-active .vpfy-item__title{
	color:#174530;
}

.vpfy-item__thumb{
	position:relative;
	display:block;
	flex:0 0 140px;
	width:140px;
	height:84px;
	border-radius:10px;
	background-color:#e9e9e9;
	background-size:cover;
	background-position:center;
	overflow:hidden;
}

.vpfy-item__badge{
	position:absolute;
	left:6px;
	bottom:6px;
	padding:1px 5px;
	font-size:11px;
	font-weight:600;
	color:#fff;
	background:rgba(0,0,0,.72);
	border-radius:4px;
	line-height:1.6;
}

.vpfy-item__badge:empty{
	display:none;
}

.vpfy-item__body{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
	flex:1 1 auto;
}

.vpfy-item__title{
	font-size:15px;
	font-weight:500;
	color:var(--vpfy-text);
}

.vpfy-item__play{
	display:none;
}

.vpfy-item__frame{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	display:block;
}

.vpfy-item.is-playing .vpfy-item__play,
.vpfy-item.is-playing .vpfy-item__badge{
	display:none;
}

/* ----- mobile: stacked cards ----- */

@media (max-width:860px){
	.vpfy-player{
		display:block;
		max-width:100%;
	}

	.vpfy-player__main{
		display:none;
	}

	.vpfy-player__stage{
		height:320px;
	}

	.vpfy-player__side{
		display:block;
		height:auto !important;
	}

	.vpfy-player__list{
		overflow:visible;
		max-height:none !important;
		gap:16px;
		padding:0;
	}

	.vpfy-item{
		display:block;
		padding:0;
		border:0;
		border-radius:var(--vpfy-radius);
		background:#f1f1f1;
		overflow:hidden;
	}

	.vpfy-item:hover,
	.vpfy-item.is-active{
		border:0;
		background:#f1f1f1;
	}

	.vpfy-item.is-active .vpfy-item__thumb{
		border:0;
		padding:0;
		background-clip:border-box;
	}

	.vpfy-item.is-active .vpfy-item__title{
		color:var(--vpfy-text);
	}

	.vpfy-item__thumb{
		flex:none;
		width:100%;
		height:auto;
		aspect-ratio:16 / 9;
		border-radius:var(--vpfy-radius);
		background-color:#e2e2e2;
	}

	.vpfy-item__body{
		display:block;
		padding:12px 14px 16px;
	}

	.vpfy-item__title{
		font-size:16px;
		font-weight:600;
	}

	.vpfy-item__play{
		display:flex;
		position:absolute;
		inset:0;
		margin:auto;
		width:52px;
		height:36px;
		border-radius:8px;
		background:#ff0000;
		align-items:center;
		justify-content:center;
	}

	.vpfy-item__play::after{
		content:"";
		display:block;
		border-style:solid;
		border-width:7px 0 7px 12px;
		border-color:transparent transparent transparent #fff;
		margin-left:3px;
	}

	.vpfy-item__badge{
		left:auto;
		right:8px;
		bottom:8px;
	}
}