/* Upduo — WhatsApp Lead
   Cores, raios e tipografia do design system da Upduo. Os valores estão
   inline (o plugin é standalone), mas cada um é um token do sistema — o
   comentário ao lado diz qual. Não há cor fora do sistema aqui.

   TODO seletor é prefixado com #upduo-wa (id, especificidade 1,0,0). Não é
   preciosismo: temas costumam estilizar botão por atributo — o do site usa
   `[type=button],[type=submit],button{background-color:transparent;
   border:1px solid #c36}`. Um seletor de atributo pesa 0,1,0, igual a uma
   classe, e quando empata quem vem depois na folha ganha. Com plugin de
   minificação concatenando tudo num arquivo só, o CSS do plugin cai no começo
   e perde todo empate. O id resolve sem precisar de !important.
*/

#upduo-wa {
	/* Papéis semânticos — tema claro */
	--uwa-surface: #FFFFFF;              /* neutral-base */
	--uwa-surface2: #E8E8E8;             /* action-neutral-hover */
	--uwa-text: rgba(0, 0, 0, .96);      /* on-color-emphasis-high */
	--uwa-text2: rgba(0, 0, 0, .8);      /* on-color-emphasis-medium */
	--uwa-text3: rgba(0, 0, 0, .64);     /* on-color-emphasis-low */
	--uwa-border: rgba(0, 0, 0, .16);    /* outline-base — bordas decorativas */
	--uwa-border-control: #909090;       /* support-grey-60 — contorno de campo (3:1) */

	/* Verde do sistema. O degrau 80 é o mais claro com margem folgada para
	   texto branco (5,83:1); o 60 e o 70 medem 3,62 e 4,50 e não sustentam
	   rótulo. Hover e pressed escurecem — invertem a direção do
	   action-main do sistema justamente para não cair no 70. */
	--uwa-accent: #107444;               /* support-green-80 — 5,83:1 */
	--uwa-accent-hover: #0E613A;         /* support-green-90 — 7,53:1 */
	--uwa-accent-pressed: #0D5734;       /* support-green-100 — 8,64:1 */

	/* O botão flutuante só carrega ícone, então o mínimo é 3:1 e não 4,5:1 —
	   por isso ele pode subir dois degraus e ficar mais claro que o cabeçalho.
	   O 60 é o degrau mais claro que ainda sustenta glifo branco (3,62:1);
	   do 50 para cima o glifo teria que virar escuro. */
	--uwa-fab: #149A5A;                  /* support-green-60 — glifo 3,62:1 */
	--uwa-fab-hover: #128850;            /* support-green-70 — 4,50:1 */
	--uwa-fab-pressed: #107444;          /* support-green-80 — 5,83:1 */

	--uwa-on-accent: #FFFFFF;            /* special-fixed-white */
	--uwa-link: #10408D;                 /* action-secondary-enabled */
	--uwa-danger: #A92C33;               /* support-red-80 */
	--uwa-danger-surface: #FFDBDD;       /* status-error-base-surface */
	--uwa-shadow: rgba(0, 0, 0, .10);

	/* Raio — escala do style guide */
	--uwa-r-sm: 6px;
	--uwa-r-md: 10px;
	--uwa-r-lg: 14px;

	position: fixed;
	right: 20px;
	/* env() cobre a barra de gestos do iPhone; sem isso o botão encosta nela. */
	bottom: 28px;
	bottom: calc(28px + env(safe-area-inset-bottom));
	z-index: 99990;
	font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
	line-height: 1.6;
}

[data-theme="dark"] #upduo-wa {
	--uwa-surface: #1F2023;              /* neutral-base-inverse */
	--uwa-surface2: #303030;             /* action-neutral-hover-inverse */
	--uwa-text: rgba(255, 255, 255, .96);
	--uwa-text2: rgba(255, 255, 255, .8);
	--uwa-text3: rgba(255, 255, 255, .74);
	--uwa-border: rgba(255, 255, 255, .16);
	--uwa-border-control: #909090;       /* support-grey-60 — 5,10:1 sobre #1F2023 */
	--uwa-link: #87BAFF;                 /* action-secondary-enabled-inverse */
	--uwa-danger: #F2757C;               /* support-red-40 */
	--uwa-danger-surface: #380E10;       /* status-error-base-surface-inverse */
	--uwa-shadow: rgba(0, 0, 0, .5);
}

#upduo-wa *,
#upduo-wa *::before,
#upduo-wa *::after {
	box-sizing: border-box;
}

/* Neutraliza o que o tema aplica em button e input por baixo. Sem isso vazam
   text-transform, letter-spacing, min-width, appearance e sombra de texto. */
#upduo-wa button,
#upduo-wa input {
	margin: 0;
	min-width: 0;
	max-width: none;
	background-image: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* --- Botão flutuante ---------------------------------------------------- */

#upduo-wa .upduo-wa__btn {
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--uwa-fab);
	color: var(--uwa-on-accent);
	box-shadow: 0 6px 20px var(--uwa-shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	line-height: 1;
	transition: background .15s, transform .15s;
}

#upduo-wa .upduo-wa__btn:hover { background: var(--uwa-fab-hover); }
#upduo-wa .upduo-wa__btn:active { background: var(--uwa-fab-pressed); transform: scale(.96); }

#upduo-wa .upduo-wa__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--uwa-surface), 0 0 0 5px var(--uwa-link);
}

/* Os seletores de ícone precisam vencer a regra de tamanho logo abaixo
   (1,1,1). Um `.upduo-wa__ico-x` mais curto perde para ela e o X aparece
   junto do glifo mesmo com o modal fechado. */
#upduo-wa .upduo-wa__btn svg { width: 30px; height: 30px; }
#upduo-wa .upduo-wa__btn .upduo-wa__ico-wa { display: block; }
#upduo-wa .upduo-wa__btn .upduo-wa__ico-x { display: none; }

#upduo-wa .upduo-wa__btn[aria-expanded="true"] .upduo-wa__ico-wa { display: none; }
#upduo-wa .upduo-wa__btn[aria-expanded="true"] .upduo-wa__ico-x { display: block; }

/* --- Modal -------------------------------------------------------------- */

#upduo-wa .upduo-wa__modal {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 340px;
	max-width: calc(100vw - 40px);
	background: var(--uwa-surface);
	/* Sem borda: a sombra já separa o modal do fundo, e a borda de 1px vira um
	   filete claro em página escura. O raio vai também no cabeçalho, logo
	   abaixo, para que a superfície branca não apareça nos cantos de cima. */
	border: 0;
	border-radius: var(--uwa-r-lg);
	box-shadow: 0 12px 32px var(--uwa-shadow);
	/* Nunca passar da tela. Com o teclado aberto no telefone a área visível
	   encolhe, e dvh acompanha isso; vh não. O overflow-x continua escondido
	   para o raio não vazar. */
	max-height: calc(100vh - 120px);
	max-height: calc(100dvh - 120px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform-origin: bottom right;
	animation: upduo-wa-in .18s ease-out;
}

#upduo-wa .upduo-wa__modal[hidden] { display: none; }

@keyframes upduo-wa-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#upduo-wa .upduo-wa__modal { animation: none; }
	#upduo-wa .upduo-wa__btn { transition: none; }
}

#upduo-wa .upduo-wa__top {
	background: var(--uwa-accent);
	color: var(--uwa-on-accent);
	padding: 16px 20px;
	border-radius: var(--uwa-r-lg) var(--uwa-r-lg) 0 0;
}

#upduo-wa .upduo-wa__top strong { display: block; font-size: 16px; font-weight: 700; }
#upduo-wa .upduo-wa__top span { display: block; font-size: 13px; opacity: .88; }

/* --- Formulário --------------------------------------------------------- */

#upduo-wa .upduo-wa__form { padding: 18px 20px 20px; display: grid; gap: 14px; margin: 0; }

#upduo-wa .upduo-wa__field { display: grid; gap: 5px; }

#upduo-wa .upduo-wa__field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--uwa-text);
	margin: 0;
}

#upduo-wa .upduo-wa__field input {
	height: 44px;
	width: 100%;
	/* support-grey-60, não outline-base: o contorno é o que identifica o campo
	   (o fundo dele é igual ao da superfície), então precisa de 3:1. O
	   outline-base do sistema mede 1,45:1 e reprovaria em WCAG 1.4.11. */
	border: 1px solid var(--uwa-border-control);
	border-radius: var(--uwa-r-md);
	padding: 0 14px;
	font: inherit;
	font-size: 15px;
	line-height: normal;
	background: var(--uwa-surface);
	color: var(--uwa-text);
	box-shadow: none;
}

#upduo-wa .upduo-wa__field input::placeholder { color: var(--uwa-text3); opacity: 1; }

#upduo-wa .upduo-wa__field input:focus {
	outline: none;
	border-color: var(--uwa-link);
	box-shadow: 0 0 0 3px var(--uwa-surface2);
}

#upduo-wa .upduo-wa__erro {
	font-size: 12px;
	font-weight: 600;
	color: var(--uwa-danger);
	min-height: 0;
}

#upduo-wa .upduo-wa__field.is-erro input {
	border-color: var(--uwa-danger);
	box-shadow: 0 0 0 3px var(--uwa-danger-surface);
}

/* Honeypot: fora da tela, nunca display:none (robô ignora oculto). */
#upduo-wa .upduo-wa__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#upduo-wa .upduo-wa__send {
	height: 44px;
	width: 100%;
	margin-top: 2px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--uwa-r-md);
	background: var(--uwa-accent);
	color: var(--uwa-on-accent);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s;
}

#upduo-wa .upduo-wa__send:hover { background: var(--uwa-accent-hover); }
#upduo-wa .upduo-wa__send:active { background: var(--uwa-accent-pressed); }

#upduo-wa .upduo-wa__send:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--uwa-surface), 0 0 0 5px var(--uwa-link);
}

#upduo-wa .upduo-wa__send[disabled] { opacity: .45; cursor: not-allowed; }

#upduo-wa .upduo-wa__alerta {
	margin: 0;
	font-size: 13px;
	color: var(--uwa-danger);
	background: var(--uwa-danger-surface);
	border-radius: var(--uwa-r-sm);
	padding: 10px 12px;
}

#upduo-wa .upduo-wa__alerta[hidden] { display: none; }

/* --- Telas estreitas ---------------------------------------------------- */

@media (max-width: 420px) {
	#upduo-wa {
		right: 16px;
		bottom: 24px;
		bottom: calc(24px + env(safe-area-inset-bottom));
	}
	#upduo-wa .upduo-wa__modal { width: calc(100vw - 32px); }
}

/* --- Toque --------------------------------------------------------------- */
/* O Safari do iPhone dá zoom ao focar qualquer campo com fonte abaixo de 16px.
   Não é preferência de tamanho, é o gatilho — 15px zooma, 16px não. */

@media (pointer: coarse) {
	#upduo-wa .upduo-wa__field input { font-size: 16px; }
}

/* --- Telas baixas ------------------------------------------------------- */
/* Vale para telefone deitado e, principalmente, para telefone com o teclado
   aberto: a área útil cai para uns 350px e o formulário precisa caber nela
   sem virar rolagem. Some o subtítulo, que é decorativo, e o resto aperta. */

@media (max-height: 720px) {
	#upduo-wa .upduo-wa__top { padding: 12px 20px; }
	#upduo-wa .upduo-wa__top span { display: none; }
	#upduo-wa .upduo-wa__form { padding: 14px 18px 16px; gap: 10px; }
	#upduo-wa .upduo-wa__field { gap: 3px; }

	/* O rótulo repete o placeholder, então some da tela e fica só para leitor
	   de tela — nada de display:none, que o tiraria da árvore de
	   acessibilidade. Recupera cerca de 76px, quase um campo inteiro. */
	#upduo-wa .upduo-wa__field label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	#upduo-wa .upduo-wa__field input { height: 40px; }
	#upduo-wa .upduo-wa__send { height: 42px; }
	#upduo-wa .upduo-wa__modal { bottom: 70px; }
}