/* ==========================================================================
   Vídeo no Produto (Stories) — estilos
   Tudo em CSS puro: o anel animado não usa JS, então não pesa.
   ========================================================================== */

/* --- Bolinha "stories" fixa no canto --------------------------------------- */
.vnp-bubble {
	/* Variáveis sobrescritas pelo CSS inline gerado nas configurações. */
	--vnp-size: 64px;
	--vnp-border-color: #fff;

	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.vnp-bubble.vnp-anim {
	animation: vnp-pop .4s ease both;
}

.vnp-bubble__ring {
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--vnp-size) + 8px);
	height: calc(var(--vnp-size) + 8px);
	border-radius: 50%;
	background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
	z-index: -1;
}

.vnp-anim .vnp-bubble__ring {
	animation: vnp-spin 6s linear infinite;
}

.vnp-bubble__thumb {
	width: var(--vnp-size);
	height: var(--vnp-size);
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--vnp-border-color);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	display: block;
}

.vnp-bubble__label {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, .65);
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.vnp-bubble:hover .vnp-bubble__thumb {
	transform: scale(1.05);
	transition: transform .2s ease;
}

/* --- Modal do player ------------------------------------------------------- */
.vnp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.vnp-modal.is-open {
	display: flex;
}

.vnp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	backdrop-filter: blur(2px);
}

.vnp-modal__card {
	position: relative;
	width: min(92vw, 420px);
	aspect-ratio: 9 / 16;        /* cara de stories (vertical) */
	max-height: 90vh;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	animation: vnp-rise .25s ease both;
}

.vnp-modal__player,
.vnp-modal__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.vnp-modal__close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.vnp-modal__close:hover {
	background: rgba(0, 0, 0, .8);
}

/* --- Animações ------------------------------------------------------------- */
@keyframes vnp-spin {
	to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes vnp-pop {
	from { opacity: 0; transform: translateY(10px) scale(.8); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vnp-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.vnp-bubble__ring { animation: none; }
	.vnp-bubble, .vnp-modal__card { animation: none; }
}