/**
 * WhatsApp Flutuante — estilos.
 *
 * Fechado: círculo verde encostado na borda direita da tela, só com
 * o ícone do WhatsApp. Aberto: a mesma peça verde (raio só do lado
 * esquerdo) se estende para a esquerda revelando os botões de contato; o
 * ícone do círculo vira um X. A "pílula" (.pucpr-whatsapp__pill) é uma peça
 * única — os itens ficam clipados via max-width/overflow enquanto fechados,
 * então a animação funciona com qualquer quantidade de botões, sem JS
 * medindo largura.
 *
 * Fade-in ao rolar (mesmo comportamento do botão "Topo" do rodapé): JS
 * (whatsapp-flutuante.js) seta `opacity` na PÍLULA a cada frame de scroll,
 * de 0 (topo da página) a 1 (1 altura de viewport rolada). `will-change:
 * opacity` + a `transition` curta abaixo são propositais — sem eles, o
 * Chrome tem uma inconsistência de composição ao mutar opacity via inline
 * style em alta frequência num elemento com overflow:hidden + border-radius:
 * o fundo sólido "fica preso" visível enquanto só o ícone (SVG) acompanha a
 * mudança. Não usar Motion Effects nativo do Elementor aqui: os controles
 * de "Efeitos de movimento" pertencem ao widget `common` compartilhado por
 * TODOS os widgets do site — não há como fixar um padrão só para este.
 */

.pucpr-whatsapp {
	--pucpr-wpp-bg: #00d757;
	/* Hover do estado FECHADO (Figma node 2154:7579) — estado aberto não tem
	   hover de fundo (só os botões/ícone reagem ali). */
	--pucpr-wpp-bg-hover-fechado: #e4e98d;
	--pucpr-wpp-icon-color-hover-fechado: var(--preto, #000);
	--pucpr-wpp-item-bg: var(--roxo, #3e0f8a);
	--pucpr-wpp-item-bg-hover: var(--roxo, #3e0f8a);
	--pucpr-wpp-item-color: var(--branco, #ffffff);
	--pucpr-wpp-item-color-hover: var(--branco, #ffffff);
	--pucpr-wpp-icon-color: #ffffff;
	/* 50px = mesmo tamanho do botão flutuante do WhatsApp em produção
	   (pucpr-ead.siouxlab.com.br, elemento `.whatsapp`). */
	--pucpr-wpp-circle: 50px;
	--pucpr-wpp-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pucpr-wpp-dur: 320ms;

	position: fixed;
	right: 0;
	bottom: 26px;
	/* Mesmo z-index do botão "Topo" (.link-top) do rodapé. */
	z-index: 300;
	display: flex;
}

/* Variante "Lado da tela: Esquerda" (painel Estilo → Posição). Espelha
   encaixe, arredondamento, sombra e o respiro entre o círculo e os itens —
   tudo que muda ao trocar de borda. */
.pucpr-whatsapp--esquerda {
	right: auto;
	left: 0;
}

.pucpr-whatsapp--esquerda .pucpr-whatsapp__pill {
	flex-direction: row-reverse;
	border-radius: 0 100px 100px 0;
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
}

.pucpr-whatsapp--esquerda.is-open .pucpr-whatsapp__itens {
	padding-left: 0;
	padding-right: 8px;
}

.pucpr-whatsapp__pill {
	display: flex;
	align-items: center;
	height: var(--pucpr-wpp-circle);
	background-color: var(--pucpr-wpp-bg);
	border-radius: 100px 0 0 100px;
	box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	transition: background-color 200ms ease, opacity 120ms linear, transform 120ms linear;
	will-change: opacity, transform;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
}

/* Hover no fundo verde (Figma 2154:7579) — só no estado FECHADO (fundo vira
   #e4e98d e o ícone do WhatsApp fica preto). Aberto não tem hover de fundo
   nenhum: o :not(.is-open) do seletor já escopa isso, sem precisar de regra
   equivalente pro estado aberto.

   Só :hover, sem :focus-within: clicar no <button> do toggle (abrir/fechar)
   deixa o foco nele no Chrome/Windows, então :focus-within continuava
   verdadeiro mesmo com o mouse já longe — o hover "grudava" ao fechar. Foco
   por teclado já tem seu próprio indicador via :focus-visible (outline). */
.pucpr-whatsapp:not(.is-open) .pucpr-whatsapp__pill:hover {
	background-color: var(--pucpr-wpp-bg-hover-fechado);
}

.pucpr-whatsapp:not(.is-open) .pucpr-whatsapp__pill:hover .pucpr-whatsapp__icone--wpp {
	color: var(--pucpr-wpp-icon-color-hover-fechado);
}

.pucpr-whatsapp__itens {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	transition:
		max-width var(--pucpr-wpp-dur) var(--pucpr-wpp-ease),
		opacity calc(var(--pucpr-wpp-dur) * 0.6) var(--pucpr-wpp-ease),
		padding-left var(--pucpr-wpp-dur) var(--pucpr-wpp-ease);
}

.pucpr-whatsapp.is-open .pucpr-whatsapp__itens {
	max-width: 2000px;
	opacity: 1;
	/* 8px = (círculo 50px − altura do botão 34px) / 2 — o mesmo respiro que
	   a centralização vertical (align-items:center) já dá em cima/embaixo
	   do botão, só que aplicado à esquerda. */
	padding-left: 8px;
	transition:
		max-width var(--pucpr-wpp-dur) var(--pucpr-wpp-ease),
		opacity var(--pucpr-wpp-dur) calc(var(--pucpr-wpp-dur) * 0.2) var(--pucpr-wpp-ease),
		padding-left var(--pucpr-wpp-dur) var(--pucpr-wpp-ease);
}

.pucpr-whatsapp__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 4px 16px;
	background-color: var(--pucpr-wpp-item-bg);
	border-radius: 1000px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: var(--pucpr-wpp-item-color);
	white-space: nowrap;
	text-decoration: none;
	flex: 0 0 auto;
}

.pucpr-whatsapp__item:hover,
.pucpr-whatsapp__item:focus-visible {
	text-decoration: none;
	background-color: var(--pucpr-wpp-item-bg-hover);
	color: var(--pucpr-wpp-item-color-hover);
}

.pucpr-whatsapp__item:focus-visible {
	outline: 2px solid var(--pucpr-wpp-item-color-hover);
	outline-offset: 2px;
}

/* Escopo extra (.pucpr-whatsapp + classe do botão) pra vencer o Elementor
   global kit, que estiliza `.elementor-kit-NNN button` (0,1,1) — sem isso o
   fundo roxo do kit aparece por trás do ícone, e o :hover/:focus do reset do
   Hello Elementor (`button:hover/:focus`, também 0,1,1) pinta de rosa.
   Mesmo padrão usado em Depoimentos em Vídeo / Cursos em Alta. */
.pucpr-whatsapp .pucpr-whatsapp__toggle {
	position: relative;
	flex: 0 0 auto;
	width: var(--pucpr-wpp-circle);
	height: var(--pucpr-wpp-circle);
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--pucpr-wpp-icon-color);
}

.pucpr-whatsapp .pucpr-whatsapp__toggle:hover,
.pucpr-whatsapp .pucpr-whatsapp__toggle:focus {
	background: transparent;
}

.pucpr-whatsapp .pucpr-whatsapp__toggle:focus-visible {
	outline: 2px solid var(--pucpr-wpp-icon-color);
	outline-offset: -4px;
}

.pucpr-whatsapp__icone {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	transition: opacity 200ms var(--pucpr-wpp-ease), transform 200ms var(--pucpr-wpp-ease), color 200ms ease;
}

.pucpr-whatsapp__svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

.pucpr-whatsapp__svg--close {
	width: 22px;
	height: 22px;
}

.pucpr-whatsapp__icone--close {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.5);
}

.pucpr-whatsapp.is-open .pucpr-whatsapp__icone--wpp {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.5);
}

.pucpr-whatsapp.is-open .pucpr-whatsapp__icone--close {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.pucpr-whatsapp__itens,
	.pucpr-whatsapp__icone {
		transition: none;
	}
}

@media (max-width: 767px) {
	/* `bottom` não entra aqui de propósito: vira controle responsivo no
	   painel do Elementor (Estilo → Posição → Distância do rodapé). */
	.pucpr-whatsapp {
		--pucpr-wpp-circle: 44px;
	}

	.pucpr-whatsapp__svg {
		width: 26px;
		height: 26px;
	}

	.pucpr-whatsapp__svg--close {
		width: 19px;
		height: 19px;
	}

	.pucpr-whatsapp__item {
		height: 30px;
		padding: 3px 14px;
		font-size: 13px;
	}

	/* 7px = (círculo 44px − altura do botão 30px) / 2, mesma lógica da regra
	   base (ver .pucpr-whatsapp.is-open .pucpr-whatsapp__itens). */
	.pucpr-whatsapp.is-open .pucpr-whatsapp__itens {
		padding-left: 7px;
	}

	.pucpr-whatsapp--esquerda.is-open .pucpr-whatsapp__itens {
		padding-left: 0;
		padding-right: 7px;
	}
}