/**
 * Top Bar Banner (inspirado no estilo Semrush)
 *
 * @package Velociraptor
 */

.velociraptor-top-bar {
	position: relative;
	/* Acima do header sticky do tema, mas abaixo da admin bar do WordPress. */
	z-index: 1010;
	isolation: isolate;
	/* Isole reflow; conteúdo e pseudo-elementos ficam contidos. */
	contain: layout;
	overflow: hidden;
	--vlr-topbar-text-apply: var(--vlr-topbar-text, #ffffff);
	/* CTA: Personalizar; se --vlr-topbar-cta não for definida no estilo, igual ao texto. */
	--vlr-topbar-cta-apply: var(
		--vlr-topbar-cta,
		var(--vlr-topbar-text-apply)
	);
	background: var(--vlr-topbar-bg, #e9dcff);
	color: var(--vlr-topbar-text-apply);
	border-bottom: 1px solid
		color-mix(in oklab, var(--vlr-topbar-text-apply) 12%, transparent);
}

/* Decoração nos cantos: só com imagem no Personalizar; sem imagem, não exibe nada. */
.velociraptor-top-bar::before,
.velociraptor-top-bar::after {
	content: "";
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 44px;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.velociraptor-top-bar--deco-l::before {
	display: block;
	left: 0;
	opacity: 0.85;
	background-image: var(--vlr-topbar-deco-left);
}

.velociraptor-top-bar--deco-r::after {
	display: block;
	right: 0;
	transform: scaleX(-1);
	opacity: 0.85;
	background-image: var(--vlr-topbar-deco-right);
}

.velociraptor-top-bar .vlr-top-bar-inner {
	/* Lateral: reserva espaço semelhante se houver decos (imagens) nos cantos */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.25rem 2.5rem 0.25rem 2.5rem;
	min-height: 37px;
}

.velociraptor-top-bar .velociraptor-container,
.velociraptor-top-bar .vlr-top-bar-content {
	/* Garante a cor do Personalizar mesmo com utilitários Tailwind / `p` a jusante. */
	color: var(--vlr-topbar-text-apply);
}

.velociraptor-top-bar .vlr-top-bar-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	min-width: 0;
	text-align: center;
}

.velociraptor-top-bar .vlr-top-bar-copy--desktop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-width: 0;
}

/* Linha opcional para telemóvel: oculta no desktop; só usada com --has-mobile-line */
.velociraptor-top-bar--has-mobile-line .vlr-top-bar-mobile-line {
	display: none;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--vlr-topbar-text-apply);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
	text-align: start;
}

.velociraptor-top-bar .vlr-top-bar-cta {
	flex: 0 0 auto;
}

.velociraptor-top-bar .vlr-top-bar-title,
.velociraptor-top-bar .vlr-top-bar-subtitle {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--vlr-topbar-text-apply);
}

.velociraptor-top-bar .vlr-top-bar-title {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.velociraptor-top-bar .vlr-top-bar-subtitle {
	font-weight: 500;
}

/* CTA: sublinhado estilo “Intercom” (borda em baixo, não text-decoration) */
.velociraptor-top-bar .vlr-top-bar-link,
.velociraptor-top-bar a.vlr-top-bar-link {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	color: var(--vlr-topbar-cta-apply) !important;
	border: 0;
	border-bottom: 2px solid var(--vlr-topbar-cta-apply);
	background: none;
	padding: 0 0 1px;
	box-shadow: none;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.velociraptor-top-bar .vlr-top-bar-link:hover,
.velociraptor-top-bar .vlr-top-bar-link:focus-visible,
.velociraptor-top-bar a.vlr-top-bar-link:hover,
.velociraptor-top-bar a.vlr-top-bar-link:focus-visible {
	opacity: 0.75;
	color: var(--vlr-topbar-cta-apply) !important;
	border-bottom-color: var(--vlr-topbar-cta-apply) !important;
}

.velociraptor-top-bar .vlr-top-bar-close-wrap {
	position: absolute;
	top: 50%;
	right: 0.25rem;
	transform: translateY(-50%);
}

.velociraptor-top-bar .vlr-top-bar-close-btn,
.velociraptor-top-bar button.vlr-top-bar-close-btn {
	color: var(--vlr-topbar-text-apply) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

.velociraptor-top-bar .vlr-top-bar-close-btn:hover,
.velociraptor-top-bar button.vlr-top-bar-close-btn:hover {
	color: var(--vlr-topbar-text-apply) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.velociraptor-top-bar .vlr-top-bar-close-btn:focus,
.velociraptor-top-bar .vlr-top-bar-close-btn:focus-visible,
.velociraptor-top-bar button.vlr-top-bar-close-btn:focus,
.velociraptor-top-bar button.vlr-top-bar-close-btn:focus-visible {
	color: var(--vlr-topbar-text-apply) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.velociraptor-top-bar .vlr-top-bar-close-btn svg,
.velociraptor-top-bar .vlr-top-bar-close-btn svg path {
	color: currentColor !important;
	stroke: currentColor !important;
	fill: none !important;
}

@media (max-width: 767px) {
	.velociraptor-top-bar--deco-l::before,
	.velociraptor-top-bar--deco-r::after {
		width: 32px;
		opacity: 0.75;
	}

	.velociraptor-top-bar .vlr-top-bar-inner {
		/* Direita: espaço p/ fechar (size-8) + respiro antes do CTA/texto */
		padding: 0.35rem 3.5rem 0.35rem 0.75rem;
		min-height: 37px;
		justify-content: flex-start;
	}

	.velociraptor-top-bar .vlr-top-bar-content {
		justify-content: flex-start;
		text-align: left;
		width: 100%;
	}

	.velociraptor-top-bar--has-mobile-line .vlr-top-bar-content {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* Só título+subtítulo (sem texto mobile dedicado) */
	.velociraptor-top-bar .vlr-top-bar-title,
	.velociraptor-top-bar .vlr-top-bar-subtitle {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Uma linha + botão: esconde o bloco desktop, mostra o texto curto */
	.velociraptor-top-bar--has-mobile-line .vlr-top-bar-copy--desktop {
		display: none;
	}

	.velociraptor-top-bar--has-mobile-line .vlr-top-bar-mobile-line {
		display: block;
	}
}