/*!
 * VideoLoop v1.0.0 - stylesheet
 * https://github.com/RumiCar-group/RumiCar-VideoLoop
 * MIT License (c) 2026 RumiCar
 */

.vl-box {
	max-width: 480px;
}

.vl-link {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #0b1416;          /* letterbox color behind 4:3 clips */
	box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
.vl-link:not([href]) {
	cursor: default;              /* clips without a destination are not links */
}

.vl-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;         /* the window never changes size, even when */
	height: auto;                 /* a 4:3 clip is letterboxed inside it      */
	object-fit: contain;
	background: #0b1416;
}

.vl-badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 3px 10px;
	font-size: 12px;
	color: #fff;
	background: rgba(8, 20, 23, .72);
	border-radius: 999px;
	pointer-events: none;
}

.vl-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 8px 2px 0;
	font-size: 14px;
	line-height: 1.4;
}
.vl-title a {
	color: inherit;
	text-decoration: none;
	/* One line, ellipsized. If the row height varied with the title length,
	   everything below the window would jump by a line-height per video. */
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vl-title a:hover {
	text-decoration: underline;
}

.vl-toggle {
	flex: 0 0 auto;
	padding: 4px 12px;
	font-size: 13px;
	color: #456;
	background: none;
	border: 1px solid #bcd;
	border-radius: 8px;
	cursor: pointer;
}
.vl-toggle:hover {
	background: rgba(0, 0, 0, .04);
}