/*
 * Konversa para WordPress — o que aparece no site.
 *
 * O formulário tem dois visuais (Konversa > Formulário > Visual):
 *
 *   --konversa  a marca do Konversa: Work Sans, roxo, cartão claro. Igual em
 *               qualquer site, bonito sem mexer em nada.
 *   --site      herda a fonte e as cores do tema, e só alinha. Para quem
 *               quer o formulário com a cara do próprio site.
 *
 * Tudo sai das variáveis --kf-*. Para personalizar pelo tema, basta trocar
 * as variáveis, sem brigar com seletor — SEMPRE em .konversa-formulario--site,
 * para a personalização sair da frente quando o visual do Konversa for
 * escolhido (em .konversa-formulario ela valeria para os dois):
 *
 *   .konversa-formulario--site {
 *       --kf-botao-fundo: #0a7;       --kf-raio: 0;
 *       --kf-fonte: "Minha Fonte", sans-serif;
 *   }
 *
 * Variáveis: --kf-fonte, --kf-fonte-titulo, --kf-texto, --kf-rotulo,
 * --kf-fundo, --kf-borda-caixa, --kf-espaco, --kf-campo-fundo,
 * --kf-campo-borda, --kf-campo-texto, --kf-raio, --kf-foco,
 * --kf-botao-fundo, --kf-botao-texto, --kf-botao-fundo-hover, --kf-botao-raio,
 * --kf-ok-fundo, --kf-ok-borda, --kf-erro-fundo, --kf-erro-borda.
 */

/* ---------- Formulário: a estrutura (vale para os dois visuais) ---------- */

.konversa-formulario {
	box-sizing: border-box;
	max-width: 560px;
	padding: var(--kf-espaco);
	font-family: var(--kf-fonte);
	color: var(--kf-texto);
	background: var(--kf-fundo);
	border: var(--kf-borda-caixa);
	border-radius: var(--kf-raio-caixa, 0);
	/* Folga para cabeçalho fixo quando um botão rola até o formulário. */
	scroll-margin-top: 96px;
}

.konversa-ancora {
	display: block;
	scroll-margin-top: 96px;
}

/* "É aqui": um contorno que aparece e some quando um botão traz a pessoa. */
.konversa-formulario--destaque {
	animation: konversa-destaque 1.6s ease-out;
}

@keyframes konversa-destaque {
	0%, 40% { box-shadow: 0 0 0 4px var(--kf-foco-suave, rgba(0, 0, 0, 0.15)); }
	100% { box-shadow: 0 0 0 4px transparent; }
}

.konversa-formulario__titulo {
	margin: 0 0 16px;
	font-family: var(--kf-fonte-titulo);
	color: var(--kf-texto);
}

.konversa-formulario form {
	margin: 0;
}

.konversa-formulario__campo {
	margin: 0 0 14px;
}

.konversa-formulario__campo label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.9em;
	color: var(--kf-rotulo);
}

.konversa-formulario__campo input,
.konversa-formulario__campo select,
.konversa-formulario__campo textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: var(--kf-campo-texto);
	background: var(--kf-campo-fundo);
	border: 1px solid var(--kf-campo-borda);
	border-radius: var(--kf-raio);
}

.konversa-formulario__campo input:focus,
.konversa-formulario__campo select:focus,
.konversa-formulario__campo textarea:focus {
	outline: 2px solid var(--kf-foco);
	outline-offset: 1px;
}

.konversa-formulario__consentimento label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 0.9em;
	color: var(--kf-rotulo);
}

.konversa-formulario__consentimento a {
	color: var(--kf-foco);
}

.konversa-formulario__botao {
	padding: 12px 24px;
	font: inherit;
	font-weight: 600;
	color: var(--kf-botao-texto);
	background: var(--kf-botao-fundo);
	border: 0;
	border-radius: var(--kf-botao-raio);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.konversa-formulario__botao:hover {
	background: var(--kf-botao-fundo-hover);
}

.konversa-formulario__botao:focus-visible {
	outline: 2px solid var(--kf-foco);
	outline-offset: 3px;
}

.konversa-formulario__aviso {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-left: 4px solid;
	border-radius: var(--kf-raio);
}

.konversa-formulario__aviso--ok {
	background: var(--kf-ok-fundo);
	border-color: var(--kf-ok-borda);
}

.konversa-formulario__aviso--erro {
	background: var(--kf-erro-fundo);
	border-color: var(--kf-erro-borda);
}

/* Some da tela e do leitor de tela; robô ainda preenche. */
.konversa-formulario__isca {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Visual do site: herda do tema e só alinha ---------- */

.konversa-formulario--site {
	--kf-fonte: inherit;
	--kf-fonte-titulo: inherit;
	--kf-texto: inherit;
	--kf-rotulo: inherit;
	--kf-fundo: transparent;
	--kf-borda-caixa: 0;
	--kf-espaco: 0;
	--kf-campo-fundo: #fff;
	--kf-campo-borda: rgba(0, 0, 0, 0.25);
	--kf-campo-texto: inherit;
	--kf-raio: 4px;
	--kf-foco: currentColor;
	--kf-foco-suave: rgba(0, 0, 0, 0.15);
	--kf-botao-fundo: #222;
	--kf-botao-texto: #fff;
	--kf-botao-fundo-hover: #000;
	--kf-botao-raio: 999px;
	--kf-ok-fundo: #eef8f0;
	--kf-ok-borda: #2e7d32;
	--kf-erro-fundo: #fdeeee;
	--kf-erro-borda: #c62828;
}

/* ---------- Visual do Konversa: a marca do app ----------
   As mesmas medidas do app (resources/css/app.css do Konversa): cartão
   .cartao (cantos 8px, 20px de respiro), campo .campo (40px, cantos 6px,
   14px), rótulo .rotulo (14px, médio) e botão .btn-primario (40px, cantos
   6px, 14px médio, ícone de 16px à esquerda). Mudou lá, muda aqui. */

.konversa-formulario--konversa {
	--kf-fonte: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--kf-fonte-titulo: "Familjen Grotesk", "Work Sans", ui-sans-serif, system-ui, sans-serif;
	--kf-texto: #17111F;
	--kf-rotulo: #17111F;
	--kf-fundo: #FCFBFE;
	--kf-borda-caixa: 1px solid #DCD6E6;
	--kf-raio-caixa: 8px;
	--kf-espaco: 20px;
	--kf-campo-fundo: #FCFBFE;
	--kf-campo-borda: #C3B9D4;
	--kf-campo-texto: #17111F;
	--kf-raio: 6px;
	--kf-foco: #5B2E9D;
	--kf-foco-suave: rgba(91, 46, 157, 0.25);
	--kf-botao-fundo: #5B2E9D;
	--kf-botao-texto: #FFFFFF;
	--kf-botao-fundo-hover: #4A2482;
	--kf-botao-raio: 6px;
	--kf-ok-fundo: #EBE1F8;
	--kf-ok-borda: #5B2E9D;
	--kf-erro-fundo: #FDEEEE;
	--kf-erro-borda: #C62828;
	font-size: 14px;
	line-height: 1.5;
}

.konversa-formulario--konversa .konversa-formulario__titulo {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.konversa-formulario--konversa .konversa-formulario__campo {
	margin-bottom: 16px;
}

.konversa-formulario--konversa .konversa-formulario__campo label {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
}

.konversa-formulario--konversa .konversa-formulario__campo input,
.konversa-formulario--konversa .konversa-formulario__campo select {
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
}

.konversa-formulario--konversa .konversa-formulario__campo textarea {
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.625;
}

.konversa-formulario--konversa .konversa-formulario__campo input::placeholder,
.konversa-formulario--konversa .konversa-formulario__campo textarea::placeholder {
	color: #7A6E88;
}

.konversa-formulario--konversa .konversa-formulario__campo input:focus,
.konversa-formulario--konversa .konversa-formulario__campo select:focus,
.konversa-formulario--konversa .konversa-formulario__campo textarea:focus {
	border-color: #5B2E9D;
	outline-offset: -1px;
}

.konversa-formulario--konversa .konversa-formulario__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.konversa-formulario__botao svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* A assinatura: pequena, no pé do cartão. Só no visual do Konversa. */
.konversa-formulario__assinatura {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	font-size: 12px;
	color: #7A6E88;
}

.konversa-formulario__assinatura svg {
	flex: none;
}

/* ---------- Botão de WhatsApp ---------- */

.konversa-whatsapp {
	position: fixed;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 10px;
	/* Só o círculo recebe o mouse: o espaço do balão, mesmo escondido, fica
	   dentro desta caixa e acenderia o hover. */
	pointer-events: none;
}

/* As quatro posições (Konversa > WhatsApp > Posição). O balão fica sempre
   do lado de dentro da tela. */
.konversa-whatsapp--inferior-direita,
.konversa-whatsapp--inferior-esquerda {
	bottom: 20px;
}

.konversa-whatsapp--superior-direita,
.konversa-whatsapp--superior-esquerda {
	top: 20px;
}

.konversa-whatsapp--inferior-direita,
.konversa-whatsapp--superior-direita {
	right: 20px;
	flex-direction: row;
}

.konversa-whatsapp--inferior-esquerda,
.konversa-whatsapp--superior-esquerda {
	left: 20px;
	flex-direction: row-reverse;
}

/* Logado, a barra do WordPress ocupa o alto da tela. */
.admin-bar .konversa-whatsapp--superior-direita,
.admin-bar .konversa-whatsapp--superior-esquerda {
	top: 52px;
}

@media (max-width: 782px) {
	.admin-bar .konversa-whatsapp--superior-direita,
	.admin-bar .konversa-whatsapp--superior-esquerda {
		top: 66px;
	}
}

/* O botão clássico de WhatsApp: círculo de 56px na cor escolhida, sem
   sombra, que escurece um pouco ao passar o mouse. */
.konversa-whatsapp__botao {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--konversa-cor, #25D366);
	transition: filter 0.2s ease;
	pointer-events: auto;
}

.konversa-whatsapp__botao:hover {
	filter: brightness(0.92);
}

.konversa-whatsapp__botao:focus-visible {
	outline: 3px solid var(--konversa-cor, #25D366);
	outline-offset: 3px;
}

/* Sem número válido: só quem administra vê, apagado e com um ponto, levando
   à tela de configurar. O visitante não vê nada. */
.konversa-whatsapp--falta .konversa-whatsapp__botao {
	opacity: 0.55;
}

.konversa-whatsapp--falta .konversa-whatsapp__botao::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d63638;
	border: 2px solid #fff;
}

/* O balão só aparece ao passar o mouse no círculo (ou ao focar pelo teclado):
   parado, a tela fica limpa. Ele nunca recebe o mouse, então passar pelo lugar
   onde ele estaria não o acende. */
.konversa-whatsapp__balao {
	opacity: 0;
	visibility: hidden;
	translate: 8px 0;
	transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
	pointer-events: none;
}

.konversa-whatsapp--inferior-esquerda .konversa-whatsapp__balao,
.konversa-whatsapp--superior-esquerda .konversa-whatsapp__balao {
	translate: -8px 0;
}

.konversa-whatsapp:hover .konversa-whatsapp__balao,
.konversa-whatsapp:focus-within .konversa-whatsapp__balao {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.konversa-whatsapp__balao,
	.konversa-whatsapp:hover .konversa-whatsapp__balao,
	.konversa-whatsapp:focus-within .konversa-whatsapp__balao {
		translate: 0 0;
		transition: none;
	}
}

.konversa-whatsapp__balao {
	max-width: 220px;
	padding: 8px 14px;
	font-size: 14px;
	line-height: 1.3;
	color: #222;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
	.konversa-whatsapp--computador {
		display: none;
	}

	/* No celular o balão cobriria conteúdo: fica só o botão. */
	.konversa-whatsapp__balao {
		display: none;
	}
}

@media (min-width: 768px) {
	.konversa-whatsapp--celular {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.konversa-whatsapp__botao {
		transition: none;
	}
}