/**
 * Botão flutuante de WhatsApp.
 * Espelha o ícone do CookieYes (que fica em baixo-esquerda, 45x45px,
 * 15px de margem) — este fica em baixo-DIREITA, ao mesmo nível.
 */
.scs-whatsapp-widget {
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 999998; /* mesma ordem de grandeza do ícone de cookies (999999), sem competir com ele — estão em cantos opostos. */
	font-family: inherit;
}

/**
 * Os !important abaixo são propositados: o tema/Elementor tem um estilo
 * global para <button> (provavelmente com a cor "accent" do tema, daí
 * ter aparecido roxo/quadrado em vez de verde/redondo) que ganhava ao
 * nosso por estar a carregar depois do nosso CSS. Sem !important aqui,
 * este botão fica à mercê da ordem de carregamento do CSS do resto do
 * site — com !important, o visual fica sempre garantido.
 */
.scs-whatsapp-toggle {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 50px !important;
	height: 50px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--scs-whatsapp) !important;
	color: var(--scs-card) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
	transition: transform 0.15s ease;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.scs-whatsapp-toggle svg {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.scs-whatsapp-toggle:hover,
.scs-whatsapp-toggle:focus-visible {
	transform: scale(1.06);
	background: var(--scs-whatsapp) !important;
	color: var(--scs-card) !important;
}

.scs-whatsapp-panel {
	position: absolute;
	bottom: 62px;
	right: 0;
	width: 260px;
	max-width: calc(100vw - 30px);
	background: var(--scs-card);
	border-radius: var(--scs-radius-lg);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2);
	padding: 16px;
	box-sizing: border-box;

	opacity: 0;
	transform: translateY(10px) scale(0.96);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.scs-whatsapp-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.scs-whatsapp-panel__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--scs-dark); /* castanho escuro da marca */
}

.scs-whatsapp-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.scs-whatsapp-panel__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--scs-radius-sm);
	background: var(--scs-soft-bg); /* castanho/off-white da marca */
	color: var(--scs-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s ease;
}

.scs-whatsapp-panel__list a:hover,
.scs-whatsapp-panel__list a:focus-visible {
	background: var(--scs-soft-bg-warm);
}

.scs-whatsapp-panel__list svg {
	color: var(--scs-whatsapp);
	flex-shrink: 0;
}

/* Tablets (mesmo breakpoint usado no resto do plugin) */
@media (max-width: 1024px) {
	.scs-whatsapp-panel {
		width: 240px;
	}
}

/* Mobile grande */
@media (max-width: 767px) {
	.scs-whatsapp-widget {
		bottom: 12px;
		right: 12px;
	}
	/* !important necessário — a regra base declara width/height com
	   !important (para o botão não ser esmagado pelo tema). Sem ele, esta
	   redução para 46px em mobile nunca chegava a aplicar-se e o botão
	   ficava sempre a 50px. [v2.5.51] */
	.scs-whatsapp-toggle {
		width: 46px !important;
		height: 46px !important;
	}
	.scs-whatsapp-panel {
		bottom: 56px;
		width: 220px;
	}
}

/* Mobile pequeno */
@media (max-width: 480px) {
	.scs-whatsapp-panel {
		width: calc(100vw - 24px);
		right: -6px;
	}
}