/* ==========================================================================
   Ellos Contato — formulário no site

   Herda tipografia e cor do design system do ellos-widgets quando ele está
   ativo. O que está aqui é só o que o DS não tem: campo de formulário.

   Nada de largura ou fundo próprios: quem dá moldura é o widget de contato,
   que já desenha o cartão. Dois cartões aninhados é o erro clássico de
   formulário embutido.

   Esquema e densidade chegam por classe no próprio formulário
   (.ect-form--escuro, .ect-form--compacto), postas pelo PHP a partir do
   contexto do hospedeiro. As regras com .ec-on-dark existem em paralelo,
   para hospedeiro que só marca a classe do design system. Contrato completo
   em docs/FORMULARIO-HOST.md do ellos-widgets.
   ========================================================================== */

.ect-form {
	display: grid;
	gap: var(--ec-sp-4, 1rem);
	margin: 0;
}

.ect-campo {
	display: grid;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.ect-campo label {
	font-size: var(--ec-fs-sm, .9rem);
	font-weight: 600;
	color: var(--ec-ink-900, #1D283B);
}

.ect-campo__req {
	color: var(--ec-red-500, #D42F2E);
	margin-left: 2px;
}

.ect-form input[type="text"],
.ect-form input[type="email"],
.ect-form input[type="tel"],
.ect-form select,
.ect-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .75rem .9rem;
	font: inherit;
	font-size: var(--ec-fs-body, 1rem);
	color: var(--ec-ink-900, #1D283B);
	background: var(--ec-white, #fff);
	border: 1px solid rgba(1, 63, 182, .18);
	border-radius: var(--ec-r-sm, 8px);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ect-form textarea { resize: vertical; min-height: 7rem; }

.ect-form input:focus,
.ect-form select:focus,
.ect-form textarea:focus {
	outline: 0;
	border-color: var(--ec-blue-600, #0078D6);
	box-shadow: 0 0 0 3px rgba(0, 120, 214, .18);
}

/* Armadilha para robô.

   Fora da tela por posicionamento, e não com display:none nem
   type=hidden: robô que lê o HTML pula os dois. O que parece campo comum
   é preenchido por hábito, e é isso que o denuncia. */
.ect-armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ect-consentimento {
	margin: 0;
	font-size: var(--ec-fs-sm, .9rem);
	line-height: 1.5;
	color: var(--ec-ink-400, #5A6478);
}

.ect-consentimento label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .6rem;
	align-items: start;
}

.ect-consentimento input { margin-top: .2rem; }

.ect-form__acoes { margin: 0; }
.ect-form__enviar { width: 100%; justify-content: center; }

.ect-form__erro {
	padding: var(--ec-sp-4, 1rem);
	border-radius: var(--ec-r-sm, 8px);
	background: rgba(212, 47, 46, .08);
	border: 1px solid rgba(212, 47, 46, .3);
	color: var(--ec-ink-900, #1D283B);
	font-size: var(--ec-fs-sm, .9rem);
}

.ect-form__erro p { margin: 0 0 .4rem; font-weight: 600; }
.ect-form__erro ul { margin: 0; padding-left: 1.1rem; }

.ect-form__ok {
	margin: 0;
	padding: var(--ec-sp-5, 1.5rem);
	border-radius: var(--ec-r-md, 12px);
	background: rgba(33, 197, 93, .1);
	border: 1px solid rgba(33, 197, 93, .35);
	font-size: var(--ec-fs-body, 1rem);
	font-weight: 600;
	color: var(--ec-ink-900, #1D283B);
	text-align: center;
}

.ect-captcha { min-height: 65px; }

/* Aviso do envio por JavaScript. Mesmo desenho do erro do POST normal: a
   pessoa não deve perceber por qual caminho a mensagem chegou. */
.ect-form__aviso {
	padding: var(--ec-sp-4, 1rem);
	border-radius: var(--ec-r-sm, 8px);
	font-size: var(--ec-fs-sm, .9rem);
	line-height: 1.5;
}

.ect-form__aviso[hidden] { display: none; }
.ect-form__aviso p { margin: 0; }
.ect-form__aviso ul { margin: 0; padding-left: 1.1rem; }

.ect-form__aviso--erro {
	background: rgba(212, 47, 46, .08);
	border: 1px solid rgba(212, 47, 46, .3);
	color: var(--ec-ink-900, #1D283B);
}

/* O botão desabilitado precisa parecer desabilitado, senão a pessoa clica de
   novo achando que não funcionou. */
.ect-form__enviar[disabled] { opacity: .65; cursor: progress; }

/* Só o estado de sucesso: o formulário sai de cena e sobra o recado. */
.ect-form--feito { gap: 0; }

/* As classes por campo existem como gancho de ajuste pontual. Declaradas
   aqui, e não deixadas soltas, porque classe gerada sem CSS nenhum é a
   assinatura de um erro de digitação — e é o que o verificador caça. */
.ect-campo--nome,
.ect-campo--email,
.ect-campo--telefone,
.ect-campo--mensagem,
.ect-campo--extra { }


/* ==========================================================================
   Escolha do atendimento

   Radio + chip + bloco, nessa ordem no HTML, revelados por irmão adjacente:
   `:checked + .chip + .fluxo`. Sem :has(), sem regra por chave e sem
   JavaScript — o script só melhora o que já funciona.

   A ordem visual (todos os chips, depois só o bloco escolhido) vem de
   `order`: os chips ficam em 1, os blocos em 2. Dentro do mesmo valor de
   order vale a ordem do HTML.
   ========================================================================== */

.ect-escolha {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}

/* Fora do fluxo, e não display:none: input escondido com display:none não
   recebe foco e o grupo pararia de funcionar pelo teclado. */
.ect-escolha__radio {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}

.ect-escolha__chip {
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-width: 0;
	padding: .45rem .8rem;
	font-size: var(--ec-fs-sm, .9rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ec-ink-400, #5A6478);
	background: var(--ec-white, #fff);
	border: 1px solid rgba(1, 63, 182, .18);
	border-radius: 999px;
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
	overflow-wrap: anywhere;
}

.ect-escolha__chip svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

.ect-escolha__chip:hover {
	border-color: var(--ec-blue-600, #0078D6);
	color: var(--ec-blue-600, #0078D6);
}

.ect-escolha__radio:checked + .ect-escolha__chip {
	color: var(--ec-white, #fff);
	background: var(--ec-blue-600, #0078D6);
	border-color: var(--ec-blue-600, #0078D6);
}

/* O foco tem que aparecer no chip: o input que o recebe está fora da tela. */
.ect-escolha__radio:focus-visible + .ect-escolha__chip {
	outline: 2px solid var(--ec-blue-600, #0078D6);
	outline-offset: 2px;
}

/* Em tela estreita a fileira vira duas colunas.

   Medido: dentro do cartão do widget sobram cerca de 250px num aparelho de
   380px. Os chips têm de 139 a 182px, então um por linha — seis linhas e
   239px só de escolha, empurrando o primeiro campo para fora da tela. Em
   grade de duas colunas são três linhas e o rótulo quebra dentro do chip em
   vez de espremer a lista.

   O seletor de revelação continua o mesmo: `order` e a ordem do HTML valem
   em grade igual, e o bloco atravessa as duas colunas. */
@media (max-width: 560px) {

	.ect-escolha {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.ect-escolha__chip {
		justify-content: center;
		padding: .5rem .55rem;
		font-size: .72rem;
		text-align: center;
	}

	/* O ícone sai nesta faixa. Medido: com ele, "Credenciamento" — uma
	   palavra só, que não tem onde quebrar — não cabe na célula e o
	   `overflow-wrap: anywhere` parte a palavra no meio, o que lê pior que
	   chip sem ícone. O rótulo é a informação; o ícone é enfeite. */
	.ect-escolha__chip svg { display: none; }

	.ect-fluxo { grid-column: 1 / -1; }
}

/* ==========================================================================
   Bloco do atendimento
   ========================================================================== */

.ect-fluxo {
	order: 2;
	display: none;
	flex-basis: 100%;
	min-width: 0;
	gap: var(--ec-sp-4, 1rem);
	margin: .25rem 0 0;
}

.ect-escolha__radio:checked + .ect-escolha__chip + .ect-fluxo { display: grid; }

/* Sem escolha na tela o bloco é único e está sempre visível. */
.ect-fluxo--fixo {
	display: grid;
	margin: 0;
}

.ect-fluxo__promessa {
	margin: 0;
	padding: .7rem .9rem;
	font-size: var(--ec-fs-sm, .9rem);
	line-height: 1.5;
	color: var(--ec-ink-900, #1D283B);
	background: rgba(0, 120, 214, .07);
	border-left: 3px solid var(--ec-blue-600, #0078D6);
	border-radius: var(--ec-r-sm, 8px);
}

.ect-form__campos {
	display: grid;
	gap: var(--ec-sp-4, 1rem);
	min-width: 0;
}

.ect-form__titulo {
	margin: 0;
	font-size: var(--ec-fs-body, 1rem);
	font-weight: 700;
	color: var(--ec-ink-900, #1D283B);
	overflow-wrap: anywhere;
}

/* "opcional" ao lado do rótulo evita que a pessoa escreva por obrigação —
   e que desista por achar que precisa escrever. */
.ect-campo__opcional {
	margin-left: .35rem;
	font-size: var(--ec-fs-xs, .78rem);
	font-weight: 400;
	color: var(--ec-ink-400, #5A6478);
}

.ect-campo__opcional[hidden],
.ect-campo__req[hidden] { display: none; }

/* ==========================================================================
   Botão de WhatsApp da tela de sucesso

   Estilo próprio, sem depender do .ec-btn: a tela de sucesso pode aparecer
   num site que não tem o design system da Ellos, e botão sem CSS parece
   link quebrado.
   ========================================================================== */

.ect-form__agora {
	margin: var(--ec-sp-4, 1rem) 0 0;
	text-align: center;
}

.ect-form__wa {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	font-size: var(--ec-fs-sm, .9rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--ec-ink-900, #1D283B);
	background: transparent;
	border: 1px solid rgba(1, 63, 182, .24);
	border-radius: var(--ec-r-sm, 8px);
	transition: border-color 160ms ease, background 160ms ease;
}

.ect-form__wa svg { width: 1.15em; height: 1.15em; flex: none; }

.ect-form__wa:hover,
.ect-form__wa:focus-visible {
	border-color: var(--ec-blue-600, #0078D6);
	background: rgba(0, 120, 214, .07);
}

/* ==========================================================================
   Densidade compacta
   ========================================================================== */

.ect-form--compacto { gap: .7rem; }
.ect-form--compacto .ect-form__campos { gap: .7rem; }
.ect-form--compacto .ect-fluxo { gap: .7rem; }

.ect-form--compacto input[type="text"],
.ect-form--compacto input[type="email"],
.ect-form--compacto input[type="tel"],
.ect-form--compacto select,
.ect-form--compacto textarea { padding: .55rem .75rem; }

.ect-form--compacto textarea { min-height: 5rem; }

/* ==========================================================================
   Esquema escuro

   Vale quando o hospedeiro diz que o fundo é escuro — o que acontece com o
   widget de contato sem cartão.

   Duas famílias de seletor. A primeira é a classe própria, posta pelo PHP a
   partir do contexto: é a que manda quando há hospedeiro.

   A segunda é presa a `.ec-on-dark`, e serve a hospedeiro que só marca a
   classe do design system sem publicar contexto. Ela **precisa** do
   `:not(.ect-form--claro)`: `.ec-on-dark` mora na seção, num ancestral, e o
   cartão branco do widget fica dentro dela. Sem a exclusão, formulário sobre
   cartão branco em seção escura recebia rótulo branco — a coluna inteira em
   branco sobre branco, sem um único erro no console. Foi o defeito da
   1.7.0.
   ========================================================================== */

/* color-scheme faz o navegador desenhar as opções nativas do select e o
   calendário em escuro. Sem isto, o select abre uma lista branca com texto
   branco em alguns sistemas. */
.ect-form--escuro,
.ec-on-dark .ect-form:not(.ect-form--claro) { color-scheme: dark; }

.ect-form--escuro .ect-campo label,
.ect-form--escuro .ect-form__titulo,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-campo label,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__titulo { color: var(--ec-white, #fff); }

.ect-form--escuro .ect-campo__opcional,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-campo__opcional { color: rgba(255, 255, 255, .68); }

/* O vermelho da marca sobre o azul escuro fica quase ilegível. O asterisco
   é `aria-hidden` e não carrega significado sozinho, mas marca visual que
   não se vê não marca nada. */
.ect-form--escuro .ect-campo__req,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-campo__req { color: #FF8A89; }

.ect-form--escuro input[type="text"],
.ect-form--escuro input[type="email"],
.ect-form--escuro input[type="tel"],
.ect-form--escuro select,
.ect-form--escuro textarea,
.ec-on-dark .ect-form:not(.ect-form--claro) input[type="text"],
.ec-on-dark .ect-form:not(.ect-form--claro) input[type="email"],
.ec-on-dark .ect-form:not(.ect-form--claro) input[type="tel"],
.ec-on-dark .ect-form:not(.ect-form--claro) select,
.ec-on-dark .ect-form:not(.ect-form--claro) textarea {
	color: var(--ec-white, #fff);
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .26);
}

.ect-form--escuro input::placeholder,
.ect-form--escuro textarea::placeholder,
.ec-on-dark .ect-form:not(.ect-form--claro) input::placeholder,
.ec-on-dark .ect-form:not(.ect-form--claro) textarea::placeholder { color: rgba(255, 255, 255, .5); }

.ect-form--escuro input:focus,
.ect-form--escuro select:focus,
.ect-form--escuro textarea:focus,
.ec-on-dark .ect-form:not(.ect-form--claro) input:focus,
.ec-on-dark .ect-form:not(.ect-form--claro) select:focus,
.ec-on-dark .ect-form:not(.ect-form--claro) textarea:focus {
	border-color: var(--ec-white, #fff);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
}

.ect-form--escuro .ect-consentimento,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-consentimento { color: rgba(255, 255, 255, .74); }

.ect-form--escuro .ect-escolha__chip,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-escolha__chip {
	color: rgba(255, 255, 255, .82);
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .26);
}

.ect-form--escuro .ect-escolha__chip:hover,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-escolha__chip:hover {
	color: var(--ec-white, #fff);
	border-color: var(--ec-white, #fff);
}

.ect-form--escuro .ect-escolha__radio:checked + .ect-escolha__chip,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-escolha__radio:checked + .ect-escolha__chip {
	color: var(--ec-ink-900, #1D283B);
	background: var(--ec-white, #fff);
	border-color: var(--ec-white, #fff);
}

.ect-form--escuro .ect-escolha__radio:focus-visible + .ect-escolha__chip,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-escolha__radio:focus-visible + .ect-escolha__chip {
	outline-color: var(--ec-white, #fff);
}

.ect-form--escuro .ect-fluxo__promessa,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-fluxo__promessa {
	color: rgba(255, 255, 255, .88);
	background: rgba(255, 255, 255, .08);
	border-left-color: var(--ec-white, #fff);
}

.ect-form--escuro .ect-form__ok,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__ok {
	color: var(--ec-white, #fff);
	background: rgba(33, 197, 93, .18);
	border-color: rgba(33, 197, 93, .5);
}

.ect-form--escuro .ect-form__erro,
.ect-form--escuro .ect-form__aviso--erro,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__erro,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__aviso--erro {
	color: var(--ec-white, #fff);
	background: rgba(212, 47, 46, .22);
	border-color: rgba(212, 47, 46, .55);
}

.ect-form--escuro .ect-form__wa,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__wa {
	color: var(--ec-white, #fff);
	border-color: rgba(255, 255, 255, .32);
}

.ect-form--escuro .ect-form__wa:hover,
.ect-form--escuro .ect-form__wa:focus-visible,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__wa:hover,
.ec-on-dark .ect-form:not(.ect-form--claro) .ect-form__wa:focus-visible {
	border-color: var(--ec-white, #fff);
	background: rgba(255, 255, 255, .12);
}


/* ==========================================================================
   Aparência vinda do hospedeiro (contrato 2)

   Tudo opcional, tudo com padrão igual ao comportamento anterior. Cada
   classe destas só existe porque o hospedeiro pediu.
   ========================================================================== */

/* Sem ícone nas escolhas. O rótulo é a informação; o ícone é enfeite, e em
   cartão estreito ele custa a palavra inteira. */
.ect-form--sem-icones .ect-escolha__chip svg { display: none; }

/* Escolhas em número fixo de colunas.

   `minmax(0, 1fr)` e não `1fr`: item de grid tem largura mínima igual ao
   min-content, e um rótulo longo estouraria a coluna em silêncio.

   O bloco do atendimento atravessa a grade inteira — ele é o irmão adjacente
   do chip escolhido, e a revelação continua sendo a mesma regra de sempre. */
.ect-form--escolha-1 .ect-escolha,
.ect-form--escolha-2 .ect-escolha,
.ect-form--escolha-3 .ect-escolha {
	display: grid;
	align-items: stretch;
}

.ect-form--escolha-1 .ect-escolha { grid-template-columns: minmax(0, 1fr); }
.ect-form--escolha-2 .ect-escolha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ect-form--escolha-3 .ect-escolha { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ect-form--escolha-1 .ect-fluxo,
.ect-form--escolha-2 .ect-fluxo,
.ect-form--escolha-3 .ect-fluxo { grid-column: 1 / -1; }

/* Botão ajustado ao texto em vez de largura total. */
.ect-form--botao-auto .ect-form__enviar { width: auto; }

/* Dois campos por linha.

   Container query, e não media query: o que decide é a largura do cartão,
   não a da janela. O mesmo formulário pode estar numa coluna estreita ao
   lado dos canais numa tela grande — medir a janela ali daria dois campos
   espremidos num espaço de um.

   O `@supports` existe porque container query sem suporte não é ignorada em
   silêncio pelo navegador: ela simplesmente nunca casa, e o formulário
   ficaria de uma coluna. Que é justamente o padrão, então a degradação é a
   correta. */
.ect-form--duas-colunas { container-type: inline-size; }

@container (min-width: 640px) {

	.ect-form--duas-colunas .ect-form__campos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Mensagem sempre inteira: caixa de texto pela metade convida a
	   escrever uma linha, e o relato de uma multa não cabe numa linha. */
	.ect-form--duas-colunas .ect-campo--mensagem { grid-column: 1 / -1; }

	.ect-form--duas-colunas .ect-fluxo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ect-form--duas-colunas .ect-fluxo__promessa { grid-column: 1 / -1; }
}

/* Teto do mobile, depois de tudo.

   Este bloco fica no fim de propósito. As regras de coluna fixa acima têm a
   mesma especificidade das do bloco de mobile lá em cima, e regra igual que
   vem depois vence: sem esta repetição, "três por linha" continuaria valendo
   num aparelho de 380px e cada chip ficaria com 70px.

   Acima de tudo, ninguém escolhe três colunas para um telefone — escolhe
   para o desktop e esquece do resto. */
@media (max-width: 560px) {

	.ect-form--escolha-1 .ect-escolha { grid-template-columns: minmax(0, 1fr); }

	.ect-form--escolha-2 .ect-escolha,
	.ect-form--escolha-3 .ect-escolha { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* O ícone sai mesmo quando o hospedeiro pediu para mostrar. É a mesma
	   razão de sempre: "Credenciamento" é uma palavra só e não tem onde
	   quebrar. */
	.ect-escolha__chip svg { display: none; }
}