/* ==========================================================
   VOXEL TOOLKIT — VÍDEOS SOCIAIS
   Instagram + TikTok + YouTube + YouTube Shorts

   Carregado automaticamente pelo plugin (opção Vídeos > CSS padrão).
========================================================== */


/* ==========================================================
   ELEMENTO PRINCIPAL
========================================================== */


/* ==========================================================
   ESTRUTURA GERAL DOS EMBEDS
========================================================== */

.fornecedor-video-social {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	display: flex;
	justify-content: center;
	align-items: flex-start;

	margin: 0 auto;
	padding: 0;

	box-sizing: border-box;
	overflow: hidden;
}

.fornecedor-video-social iframe,
.fornecedor-video-social blockquote {
	box-sizing: border-box;
}


/* ==========================================================
   INSTAGRAM
========================================================== */

.fornecedor-video-social--instagram {
	width: 100%;
	max-width: var(--lbt-ig-w,540px);

	margin-left: auto;
	margin-right: auto;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.fornecedor-video-social--instagram .instagram-media {
	width: 100% !important;
	max-width: var(--lbt-ig-w,540px) !important;
	min-width: 0 !important;

	margin-top: 0 !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
	margin-left: auto !important;

	box-sizing: border-box !important;
}

.fornecedor-video-social--instagram iframe {
	width: 100% !important;
	max-width: var(--lbt-ig-w,540px) !important;
	min-width: 0 !important;

	margin-left: auto !important;
	margin-right: auto !important;

	border: 0 !important;
}


/* ==========================================================
   ELEMENTOS VERTICAIS
   TikTok + YouTube Shorts
========================================================== */

.fornecedor-video-vertical {
	position: relative;

	width: 100%;
	max-width: 420px;

	aspect-ratio: 9 / 16;

	margin: 0 auto;
	padding: 0;

	overflow: hidden;
	box-sizing: border-box;
}

.fornecedor-video-vertical iframe {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;

	width: 100% !important;
	height: 100% !important;

	max-width: 100% !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
}


/* ==========================================================
   TIKTOK — 9:16
========================================================== */

.fornecedor-video-social--tiktok {
	width: 100%;
	max-width: 420px;

	margin-left: auto;
	margin-right: auto;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.fornecedor-tiktok-player {
	width: 100%;
	max-width: 420px;

	aspect-ratio: 9 / 16;
}


/* ==========================================================
   YOUTUBE SHORTS — 9:16
========================================================== */

.fornecedor-video-social--youtube-shorts {
	width: 100%;
	max-width: 420px;

	margin-left: auto;
	margin-right: auto;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.fornecedor-youtube-shorts-player {
	width: 100%;
	max-width: 420px;

	aspect-ratio: 9 / 16;
}


/* ==========================================================
   YOUTUBE NORMAL — 16:9
========================================================== */

.fornecedor-video-social--youtube {
	width: 100%;
	max-width: var(--lbt-yt-w,605px);

	margin-left: auto;
	margin-right: auto;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.fornecedor-youtube-player {
	position: relative;

	width: 100%;
	max-width: var(--lbt-yt-w,605px);

	aspect-ratio: 16 / 9;

	margin: 0 auto;
	padding: 0;

	overflow: hidden;
	box-sizing: border-box;
}

.fornecedor-youtube-player iframe {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;

	width: 100% !important;
	height: 100% !important;

	max-width: 100% !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

	.fornecedor-video-social {
		min-width: 0;
	}

	.fornecedor-video-social--instagram {
		width: 100%;
		max-width: var(--lbt-ig-w,540px);
	}

	.fornecedor-video-social--tiktok,
	.fornecedor-video-social--youtube-shorts {
		width: 100%;
		max-width: 420px;
	}

	.fornecedor-video-social--youtube {
		width: 100%;
		max-width: var(--lbt-yt-w,605px);
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {


	/*
	 * Geral
	 */

	.fornecedor-video-social {
		width: 100%;
		max-width: 100%;
		min-width: 0;

		margin-left: auto;
		margin-right: auto;
	}


	/*
	 * Instagram
	 */

	.fornecedor-video-social--instagram {
		width: 100%;
		max-width: 100%;
	}

	.fornecedor-video-social--instagram .instagram-media {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.fornecedor-video-social--instagram iframe {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}


	/*
	 * Elementos verticais
	 */

	.fornecedor-video-vertical {
		width: 100%;
		max-width: min(100%, calc(85vh * 9 / 16));

		aspect-ratio: 9 / 16;
	}


	/*
	 * TikTok
	 */

	.fornecedor-video-social--tiktok {
		width: 100%;
		max-width: 100%;
	}


	/*
	 * YouTube Shorts
	 */

	.fornecedor-video-social--youtube-shorts {
		width: 100%;
		max-width: 100%;
	}


	/*
	 * YouTube normal
	 */

	.fornecedor-video-social--youtube,
	.fornecedor-youtube-player {
		width: 100%;
		max-width: 100%;
	}

	.fornecedor-youtube-player {
		aspect-ratio: 16 / 9;
	}


	/*
	 * Todos os iframes
	 */

	.fornecedor-video-social iframe {
		max-width: 100% !important;
	}
}

/* Facebook (reels e vídeos): caixa com proporção fixa, iframe preenche e recorta nos cantos */
.fornecedor-facebook-player{position:relative;width:100%;max-width:var(--lbt-fb-w,380px);margin:0 auto;border-radius:12px;overflow:hidden;background:#000;-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}
.fornecedor-facebook-player iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:0;display:block}

/* ==========================================================
   ALTURA ESTÁVEL (todos os players com proporção fixa)
   A altura vem do padding percentual (e não só de aspect-ratio), então a caixa
   não encolhe quando o bloco pai (Elementor/Voxel, flex ou grid) limita a altura,
   e o container acompanha o vídeo no celular.
========================================================== */

.fornecedor-video-social {
	flex: 0 0 auto;
}

.fornecedor-facebook-player,
.fornecedor-video-vertical,
.fornecedor-tiktok-player,
.fornecedor-youtube-shorts-player {
	height: 0 !important;
	aspect-ratio: auto !important;
	padding: 0 0 177.7778% 0 !important;
}

.fornecedor-facebook-player--quadrado {
	padding-bottom: 100% !important;
}

.fornecedor-facebook-player--horizontal,
.fornecedor-youtube-player {
	height: 0 !important;
	aspect-ratio: auto !important;
	padding: 0 0 56.25% 0 !important;
}

.fornecedor-facebook-player iframe,
.fornecedor-video-vertical iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

/* O wrapper define a largura máxima; o player ocupa 100% dela (o padding percentual depende disso) */
.fornecedor-video-social--facebook {
	width: 100%;
	max-width: var(--lbt-fb-w,380px);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	/* celular deitado: limita pelo wrapper para o padding percentual continuar certo */
	.fornecedor-video-social--tiktok,
	.fornecedor-video-social--youtube-shorts {
		max-width: min(100%, calc(85vh * 9 / 16));
	}
}

/* ==========================================================
   LARGURA PRÓPRIA (container que se ajusta ao conteúdo)
   Em blocos pai com largura "automática" (flex/loop do Elementor, inline-block,
   fit-content) uma largura em % vira 0 e a caixa colapsa. Com largura em px (limitada pela
   largura da tela) + max-width:100%, a caixa nunca colapsa nem passa do espaço disponível.
========================================================== */

.fornecedor-video-social--facebook {
	width: min(var(--lbt-fb-w,380px), calc(100vw - 32px)) !important;
	max-width: 100% !important;
}

.fornecedor-video-social--tiktok,
.fornecedor-video-social--youtube-shorts {
	width: min(420px, calc(100vw - 32px)) !important;
	max-width: 100% !important;
}

.fornecedor-video-social--youtube {
	width: min(var(--lbt-yt-w,560px), calc(100vw - 32px)) !important;
	max-width: 100% !important;
}

@media (max-width: 767px) {
	.fornecedor-video-social--tiktok,
	.fornecedor-video-social--youtube-shorts {
		max-width: min(100%, calc(85vh * 9 / 16)) !important;
	}
}