/*
 * Ravolli — Vídeo flutuante v1.0.0
 * Card 9:16 fixo no canto inferior, com vídeo em loop e "×" para fechar.
 * Mobile first (desktop a partir de 768px, como no resto do tema).
 * Só tokens existentes (--wp--preset--*); sem cor nova, sem !important.
 * Enfileirado apenas onde o card é renderizado (inc/ravolli-floating-video.php).
 *
 * z-index: 100.
 *   Abaixo de:  botão "voltar às coleções" (999), painel de sugestões da PDP
 *               (10000), menu mobile / busca do Blocksy (999999) e botão de
 *               WhatsApp (99999999) — modais e menus sempre passam por cima.
 *   Acima de:   conteúdo, header sticky (5) e navegação de coleções (40).
 *
 * Colisões: no canto inferior DIREITO vivem o botão de WhatsApp (Click to Chat:
 * bottom 20px / right 20px) e, no celular, o "voltar às coleções" (bottom 22px /
 * right 18px). Por isso `data-position="right"` sobe o card por --rfv-lift.
 * No canto esquerdo não há nenhum elemento fixo hoje.
 */

.ravolli-fv {
	--rfv-w: 96px;
	--rfv-side: var(--wp--preset--spacing--md, 16px);
	--rfv-radius: var(--wp--preset--spacing--sm, 12px);
	--rfv-lift: 0px;

	position: fixed;
	bottom: calc(var(--rfv-bottom-mobile, 16px) + var(--rfv-lift) + env(safe-area-inset-bottom, 0px));
	z-index: 100;
	width: var(--rfv-w);
	margin: 0;
	padding: 0;

	/* Só aparece quando o JS decide (vídeo tocando ou capa para quem economiza dados). */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(var(--wp--preset--spacing--sm, 12px));
	transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms;
}

.ravolli-fv[data-position="left"] {
	left: var(--rfv-side);
}

.ravolli-fv[data-position="right"] {
	--rfv-lift: 84px;
	right: var(--rfv-side);
}

.ravolli-fv[data-size="medium"] {
	--rfv-w: 120px;
}

.ravolli-fv.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 300ms ease, transform 300ms ease, visibility 0s;
}

/* ---------- Card ---------- */

.ravolli-fv__card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	border: 1px solid var(--wp--preset--color--bg-base, #fafaf8);
	border-radius: var(--rfv-radius);
	background-color: var(--wp--preset--color--chrome-dark, #01040a);
	box-shadow: 0 8px 24px rgba(1, 4, 10, 0.22);
}

.ravolli-fv__media {
	display: block;
	width: 100%;
	height: 100%;
}

.ravolli-fv__media--link {
	cursor: pointer;
}

.ravolli-fv__media--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-gold, #bc9c6d);
	outline-offset: -4px;
}

.ravolli-fv__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--wp--preset--color--chrome-dark, #01040a);
	pointer-events: none;
}

/* ---------- Botão "×" ----------
 * Área de toque de 44×44; o círculo visível (24px) fica no canto superior
 * esquerdo, metade para fora do card. */

/* Seletor com o container: o estilo global de <button> do Blocksy (fundo,
 * padding, altura mínima, estados hover/focus) tem a mesma especificidade de
 * uma classe simples e mudaria o botão; assim ele não interfere. */
.ravolli-fv .ravolli-fv__close,
.ravolli-fv .ravolli-fv__close:hover,
.ravolli-fv .ravolli-fv__close:focus,
.ravolli-fv .ravolli-fv__close:active {
	position: absolute;
	top: -18px;
	left: -18px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--brand-primary, #060e1e);
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ravolli-fv__close-icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--bg-base, #fafaf8);
	box-shadow: 0 2px 8px rgba(1, 4, 10, 0.25);
	font-size: 18px;
	line-height: 1;
	/* Centraliza opticamente o "×" dentro do círculo. */
	padding-bottom: 2px;
	box-sizing: border-box;
}

.ravolli-fv__close:focus-visible {
	outline: none;
}

.ravolli-fv__close:focus-visible .ravolli-fv__close-icon {
	outline: 2px solid var(--wp--preset--color--accent-gold, #bc9c6d);
	outline-offset: 2px;
}

/* ---------- Computador ---------- */

@media (min-width: 768px) {
	.ravolli-fv {
		--rfv-w: 120px;
		--rfv-side: var(--wp--preset--spacing--lg, 24px);

		bottom: calc(var(--rfv-bottom-desktop, 24px) + var(--rfv-lift));
	}

	.ravolli-fv[data-size="medium"] {
		--rfv-w: 150px;
	}
}

/* ---------- Movimento reduzido: sem animação de entrada ---------- */

@media (prefers-reduced-motion: reduce) {
	.ravolli-fv,
	.ravolli-fv.is-visible {
		transform: none;
		transition: none;
	}
}

@media print {
	.ravolli-fv {
		display: none;
	}
}