.ysvp-wrap {
	--ysvp-accent: #ff2d2d;
	--ysvp-ratio-padding: 56.25%;
	position: relative;
	width: 100%;
	margin: 0 auto 1.5em;
	font-family: "Roboto", "Segoe UI", Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.ysvp-frame {
	position: relative;
	width: 100%;
	padding-top: 0 !important;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.ysvp-wrap.ysvp-fullscreen-active .ysvp-frame {
	border-radius: 0;
	padding-top: 0 !important;
	height: 100%;
}

.ysvp-video {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	display: block;
	outline: none;
}

/* Title overlay */
.ysvp-title-overlay {
	position: absolute;
	top: 0; left: 0; right: 0;
	padding: 18px 20px 40px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0));
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	z-index: 5;
	pointer-events: none;
	opacity: 1;
	transition: opacity .25s ease;
}
.ysvp-wrap.ysvp-controls-hidden .ysvp-title-overlay { opacity: 0; }

/* Loading spinner */
.ysvp-spinner {
	position: absolute;
	top: 50%; left: 50%;
	width: 44px; height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(255,255,255,0.25);
	border-top-color: #fff;
	border-radius: 50%;
	z-index: 6;
	display: none;
	animation: ysvp-spin 0.8s linear infinite;
}
.ysvp-wrap.ysvp-buffering .ysvp-spinner { display: block; }
@keyframes ysvp-spin { to { transform: rotate(360deg); } }

/* Big center play button */
.ysvp-big-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 68px; height: 48px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 7;
	opacity: 0.95;
	transition: transform .15s ease, opacity .15s ease;
}
.ysvp-big-play:hover { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
.ysvp-wrap.ysvp-playing .ysvp-big-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }

/* Double-tap seek feedback bubbles */
.ysvp-tap-feedback {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(0.6);
	width: 90px; height: 90px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	z-index: 8;
	transition: opacity .2s ease, transform .2s ease;
}
.ysvp-tap-left { left: 12%; }
.ysvp-tap-right { right: 12%; }
.ysvp-tap-feedback.is-active { opacity: 1; transform: translateY(-50%) scale(1); }

/* Controls container */
.ysvp-controls {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 9;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
	padding: 18px 12px 8px;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease;
}
.ysvp-wrap.ysvp-controls-hidden .ysvp-controls {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
}
.ysvp-wrap.ysvp-controls-hidden { cursor: none; }

/* Progress bar */
.ysvp-progress-row { padding: 0 2px 8px; }
.ysvp-progress {
	position: relative;
	height: 4px;
	border-radius: 2px;
	background: rgba(255,255,255,0.25);
	cursor: pointer;
	transition: height .1s ease;
}
.ysvp-progress:hover, .ysvp-progress:focus { height: 6px; }
.ysvp-progress-buffer {
	position: absolute; top: 0; left: 0; height: 100%;
	width: 0%;
	background: rgba(255,255,255,0.4);
	border-radius: 2px;
}
.ysvp-progress-played {
	position: absolute; top: 0; left: 0; height: 100%;
	width: 0%;
	background: var(--ysvp-accent);
	border-radius: 2px;
}
.ysvp-progress-handle {
	position: absolute;
	top: 50%; left: 0%;
	width: 13px; height: 13px;
	background: var(--ysvp-accent);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .1s ease;
	box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.ysvp-progress:hover .ysvp-progress-handle,
.ysvp-progress:focus .ysvp-progress-handle { transform: translate(-50%, -50%) scale(1); }

/* Controls row */
.ysvp-controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}
.ysvp-controls-left, .ysvp-controls-right {
	display: flex;
	align-items: center;
	gap: 2px;
}

.ysvp-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	width: 36px; height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	opacity: 0.9;
	transition: opacity .15s ease, background .15s ease;
	padding: 0;
}
.ysvp-btn:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.ysvp-btn svg { display: block; }

/* Volume */
.ysvp-volume {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 36px;
	transition: width .2s ease;
}
.ysvp-volume:hover, .ysvp-volume.is-active { width: 120px; }
.ysvp-volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 80px;
	height: 3px;
	margin-left: 4px;
	background: rgba(255,255,255,0.3);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}
.ysvp-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.ysvp-volume-slider::-moz-range-thumb {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	border: none;
	cursor: pointer;
}

.ysvp-time {
	color: #fff;
	font-size: 13px;
	margin-left: 6px;
	white-space: nowrap;
	opacity: 0.95;
	font-variant-numeric: tabular-nums;
}

/* Settings / speed menu */
.ysvp-settings-wrap { position: relative; }
.ysvp-settings-menu {
	position: absolute;
	bottom: 44px;
	right: 0;
	min-width: 170px;
	background: rgba(28,28,28,0.95);
	border-radius: 8px;
	color: #fff;
	font-size: 13px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,0.4);
	display: none;
	z-index: 10;
}
.ysvp-settings-wrap.is-open .ysvp-settings-menu { display: block; }

.ysvp-menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	cursor: pointer;
}
.ysvp-menu-item:hover { background: rgba(255,255,255,0.08); }
.ysvp-current-speed { color: #aaa; }

.ysvp-speed-list { display: none; border-top: 1px solid rgba(255,255,255,0.1); }
.ysvp-settings-wrap.is-speed-open .ysvp-speed-list { display: block; }
.ysvp-settings-wrap.is-speed-open .ysvp-menu-speed { display: none; }

.ysvp-speed-option {
	padding: 10px 14px;
	cursor: pointer;
}
.ysvp-speed-option:hover { background: rgba(255,255,255,0.08); }
.ysvp-speed-option.is-active { color: var(--ysvp-accent); font-weight: 600; }

/* Responsive tweaks */
@media (max-width: 480px) {
	.ysvp-time { display: none; }
	.ysvp-volume:hover, .ysvp-volume.is-active { width: 90px; }
	.ysvp-download { display: none; }
}

.ysvp-wrap * { box-sizing: border-box; }

.ysvp-frame{
    padding-top: 0 !important;
}

.ysvp-video{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* ya cover */
}