/* Industrial Widgets — identidade visual do formulário externo
   (painel Soluções Industriais / FormRendererSDK).

   ------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO É MAIOR DO QUE UM "OVERRIDE"
   ------------------------------------------------------------------------
   O HTML dos campos não é nosso: vem pronto da API e foi escrito dentro de um
   painel Bootstrap (dá para ver no próprio SDK, que usa `spinner-border`,
   `toast`, `fixed-top`, `d-flex`, `bg-success`). Num site WordPress o
   Bootstrap não está carregado, então essas classes não significam NADA aqui:
   `.row` + `.col-md-6` não viram duas colunas, viram dois blocos empilhados; o
   spinner do botão é um <span> invisível; o aviso de sucesso é texto solto.

   Por isso o arquivo faz duas coisas ao mesmo tempo:
     1. REPÕE o layout mínimo que o Bootstrap daria (grade e estados);
     2. SOBRESCREVE a aparência com as variáveis --iw-* (as mesmas que o resto
        do plugin usa, preenchidas por includes/class-theme-bridge.php a partir
        do tema ativo). É isso que faz o formulário parecer do site, e não do
        painel.

   ------------------------------------------------------------------------
   SOBRE OS !important
   ------------------------------------------------------------------------
   Não são preguiça de especificidade: o HTML devolvido pela API pode trazer
   style="" inline definido no construtor de formulários do painel, e contra
   inline só !important ganha. Estão restritos às propriedades de identidade
   (cor, borda, raio, fonte, fundo) — espaçamento e layout ficam sem, para
   continuar ajustáveis pelo Elementor.

   Tudo está escopado em .iw-form-api: nenhuma regra daqui escapa para o resto
   da página. */

/* ======================================================================
   Container e estados
   ====================================================================== */
.iw-form-api {
	font-family: var(--iw-font-body, inherit);
	color: var(--iw-color-text, #4a5568);
	/* O SDK troca o conteúdo depois do AJAX; sem altura mínima o bloco
	   "pula" quando o formulário chega. */
	min-height: 120px;
}

.iw-form-api-loading,
.iw-form-api-erro,
.iw-form-api-placeholder {
	margin: 0;
	padding: 24px 0;
	font-size: 15px;
	text-align: center;
	color: var(--iw-color-text, #4a5568);
}

.iw-form-api-loading {
	opacity: 0.7;
}

.iw-form-api-erro {
	color: #b3261e;
}

.iw-form-api--pronto {
	min-height: 0;
}

/* ======================================================================
   Grade — reposição do .row / .col-* do Bootstrap
   ====================================================================== */
.iw-form-api .row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -8px;
	margin-right: -8px;
}

.iw-form-api [class*="col-"] {
	flex: 1 1 100%;
	max-width: 100%;
	padding-left: 8px;
	padding-right: 8px;
}

@media (min-width: 768px) {
	.iw-form-api .col-md-3,
	.iw-form-api .col-lg-3 { flex-basis: 25%;     max-width: 25%; }
	.iw-form-api .col-md-4,
	.iw-form-api .col-lg-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.iw-form-api .col-md-6,
	.iw-form-api .col-lg-6 { flex-basis: 50%;     max-width: 50%; }
	.iw-form-api .col-md-8,
	.iw-form-api .col-lg-8 { flex-basis: 66.6666%; max-width: 66.6666%; }
	.iw-form-api .col-md-9,
	.iw-form-api .col-lg-9 { flex-basis: 75%;     max-width: 75%; }
}

/* Utilitários de espaçamento que o markup do painel costuma usar. */
.iw-form-api .form-group,
.iw-form-api .mb-3 { margin-bottom: 16px; }
.iw-form-api .mb-2 { margin-bottom: 12px; }
.iw-form-api .mt-3 { margin-top: 16px; }
.iw-form-api .w-100 { width: 100%; }
.iw-form-api .d-flex { display: flex; }
.iw-form-api .justify-content-center { justify-content: center; }
.iw-form-api .text-center { text-align: center; }

/* ======================================================================
   Rótulos
   ====================================================================== */
.iw-form-api label,
.iw-form-api .form-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--iw-font-body, inherit) !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--iw-color-heading, #0e2a4d) !important;
}

/* Campo obrigatório.
   O painel marca isso com class="required" NO PRÓPRIO <label> (não num
   <span> do asterisco), e o texto do rótulo vem sem asterisco nenhum:

       <label for="nome_d54b..." class="required">Nome</label>

   Ou seja: colorir `.required` pintaria o rótulo inteiro de vermelho. O
   asterisco é desenhado aqui. */
.iw-form-api label.required::after {
	content: " *";
	color: #b3261e;
	font-weight: 700;
}

.iw-form-api label .text-danger {
	color: #b3261e !important;
}

/* ======================================================================
   Campos
   ====================================================================== */
.iw-form-api input[type="text"],
.iw-form-api input[type="email"],
.iw-form-api input[type="tel"],
.iw-form-api input[type="number"],
.iw-form-api input[type="url"],
.iw-form-api input[type="date"],
.iw-form-api input[type="time"],
.iw-form-api input[type="file"],
.iw-form-api select,
.iw-form-api textarea,
.iw-form-api .form-control,
.iw-form-api .form-select {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	font-family: var(--iw-font-body, inherit) !important;
	font-size: 15px;
	line-height: 1.4;
	color: var(--iw-color-text, #4a5568) !important;
	background-color: #ffffff !important;
	border: 1px solid rgba(14, 42, 77, 0.18) !important;
	border-radius: var(--iw-button-radius, 8px) !important;
	box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* O formId e o _token vêm com class="form-control" e type="hidden". O
   navegador já os esconde, mas a regra acima daria a eles padding e borda
   se algum dia virarem visíveis por engano. */
.iw-form-api input[type="hidden"] {
	display: none !important;
}

/* Altura: quem manda é o padding, não o tema.
   O Blocksy define altura fixa para campos de formulário (e o <select> é o
   caso mais visível: com a altura do tema + o nosso padding, o texto da
   opção selecionada aparecia CORTADO ao meio na página /contato/).
   O textarea fica de fora de propósito — ver a regra dele logo abaixo. */
.iw-form-api input:not([type="hidden"]),
.iw-form-api select,
.iw-form-api .form-select {
	height: auto !important;
	min-height: 0;
	line-height: 1.4;
}

/* O painel manda o textarea com rows="10", o que renderiza uma caixa de
   ~230px — alta demais dentro de um card lateral. `height` sem !important
   vence o `rows` e ainda deixa o usuário arrastar para aumentar (o arrasto
   grava style inline, que só perderia para um !important). */
.iw-form-api textarea,
.iw-form-api textarea.form-control {
	height: 130px;
	min-height: 96px;
	resize: vertical;
}

.iw-form-api ::placeholder {
	color: var(--iw-color-text, #4a5568);
	opacity: 0.55;
}

.iw-form-api input:focus,
.iw-form-api select:focus,
.iw-form-api textarea:focus,
.iw-form-api .form-control:focus {
	outline: none;
	border-color: var(--iw-color-1, #1c4f7c) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-color-1, #1c4f7c) 18%, transparent) !important;
}

/* Seta própria no <select>: sem o CSS do Bootstrap ele fica com a seta
   nativa do sistema, que destoa do resto dos campos. */
.iw-form-api select,
.iw-form-api .form-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e2a4d'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	padding-right: 40px;
}

/* ======================================================================
   Checkbox e radio
   ====================================================================== */
.iw-form-api .form-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
}

.iw-form-api input[type="checkbox"],
.iw-form-api input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--iw-color-1, #1c4f7c);
}

.iw-form-api .form-check label,
.iw-form-api .form-check-label {
	margin-bottom: 0;
	font-weight: 400;
	color: var(--iw-color-text, #4a5568) !important;
}

/* ======================================================================
   Botão de envio
   ====================================================================== */
.iw-form-api button,
.iw-form-api input[type="submit"],
.iw-form-api .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 32px;
	font-family: var(--iw-font-body, inherit) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	color: #ffffff !important;
	background-color: var(--iw-color-1, #1c4f7c) !important;
	background-image: none !important;
	border: none !important;
	border-radius: var(--iw-button-radius, 8px) !important;
	transition: opacity .2s ease;
}

.iw-form-api button:hover,
.iw-form-api .btn:hover {
	opacity: 0.85;
}

/* O SDK desabilita o botão por 5s após o envio (veja `complete` no
   sendResponse). Sem esta regra nada indica que o clique foi registrado. */
.iw-form-api button:disabled,
.iw-form-api .btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ======================================================================
   Spinner do botão — o SDK injeta <span class="spinner-border"> e conta que
   o Bootstrap desenhe. Aqui está o desenho.
   ====================================================================== */
.iw-form-api .spinner-border {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: iw-form-api-giro .7s linear infinite;
}

@keyframes iw-form-api-giro {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.iw-form-api .spinner-border { animation-duration: 2s; }
}

/* ======================================================================
   Mensagens de erro de validação
   ====================================================================== */
.iw-form-api .invalid-feedback,
.iw-form-api .error,
.iw-form-api .text-danger {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: #b3261e !important;
}

.iw-form-api .is-invalid,
.iw-form-api input:invalid:not(:placeholder-shown) {
	border-color: #b3261e !important;
}

/* ======================================================================
   Avisos de sucesso / erro pós-envio
   ----------------------------------------------------------------------
   O SDK anexa markup de toast do Bootstrap e chama $().toast('show'). O
   plugin jQuery não existe aqui — quem o substitui é o polyfill em
   assets/js/iw-form-api.js, que só alterna a classe .iw-toast--visivel.
   O visual inteiro é destas regras.
   ====================================================================== */
.iw-form-api .fixed-top {
	position: fixed;
	top: 24px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.iw-form-api .toast {
	min-width: 240px;
	max-width: 90vw;
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: #ffffff !important;
	border-radius: var(--iw-button-radius, 8px) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity .25s ease, transform .25s ease;
}

.iw-form-api .toast.iw-toast--visivel {
	opacity: 1;
	transform: translateY(0);
}

.iw-form-api .toast.bg-success { background-color: #1e7b45 !important; }
.iw-form-api .toast.bg-danger  { background-color: #b3261e !important; }
.iw-form-api .toast .toast-body { padding: 0; }

/* ======================================================================
   Contexto escuro
   ----------------------------------------------------------------------
   Três widgets colocam o formulário sobre fundo escuro (faixa de newsletter
   do rodapé e as seções de contato com overlay). Lá o rótulo escuro some.
   ====================================================================== */
.iw-hf-news-form .iw-form-api label,
.iw-hf-news-form .iw-form-api .form-label {
	color: #ffffff !important;
}

/* O vermelho do asterisco (#b3261e) sobre o fundo escuro do rodapé fica
   quase ilegível — sobre escuro ele clareia. */
.iw-hf-news-form .iw-form-api label.required::after {
	color: #ff9aa2;
}

.iw-hf-news-form .iw-form-api .row {
	align-items: flex-end;
}

/* IW-CONFIRMACAO-ENVIO :: inicio ---------------------------------------
   Confirmação de envio do formulário da API.

   Substitui o redirecionamento para a página de obrigado: ao terminar o
   envio, o formulário fica invisível no lugar (sem `display: none`, para o
   card não encolher) e esta confirmação aparece por cima, dentro do mesmo
   espaço. Passados uns segundos a classe sai e o formulário volta limpo.

   O fundo é transparente de propósito: o card que hospeda o formulário
   pode não ser branco, e pintar aqui criaria um retângulo visível dentro
   dele.
   --------------------------------------------------------------------- */

/* Âncora da confirmação, que é posicionada por cima do formulário. Vai
   solta aqui, no fim do arquivo, em vez de dentro da regra original de
   .iw-form-api: mesma especificidade, declarada depois, então vence — e o
   bloco continua sendo removível de uma vez só. */
.iw-form-api {
	position: relative;
}

.iw-form-api--enviado form {
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
}

.iw-form-api-final {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
	animation: iw-form-api-surge .35s ease-out both;
}

.iw-form-api-final-icone {
	width: 64px;
	height: 64px;
	margin-bottom: 4px;
	overflow: visible;
}

/* O círculo e o risco são desenhados por stroke-dashoffset: o traço inteiro
   começa "fora" do caminho e entra nele. 151 é o perímetro do círculo de
   raio 24 (2·π·24 ≈ 150,8); 36 cobre com folga o comprimento do risco. */
.iw-form-api-final-circulo {
	fill: none;
	stroke: var(--iw-color-sucesso, #1e7b45);
	stroke-width: 3;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: iw-form-api-desenha .5s cubic-bezier(.65, 0, .45, 1) forwards;
}

.iw-form-api-final-risco {
	fill: none;
	stroke: var(--iw-color-sucesso, #1e7b45);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	/* Só começa quando o círculo está quase fechado. */
	animation: iw-form-api-desenha .3s .42s cubic-bezier(.65, 0, .45, 1) forwards;
}

.iw-form-api-final-titulo {
	margin: 0;
	font-family: var(--iw-font-heading, var(--iw-font-body, inherit));
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--iw-color-heading, #0e2a4d);
}

.iw-form-api-final-texto {
	margin: 0;
	max-width: 32ch;
	font-size: 15px;
	line-height: 1.45;
	color: var(--iw-color-text, #4a5568);
}

@keyframes iw-form-api-desenha {
	to { stroke-dashoffset: 0; }
}

@keyframes iw-form-api-surge {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento recebe o check pronto, sem traço sendo
   desenhado nem deslocamento — só o aparecer. */
@media (prefers-reduced-motion: reduce) {
	.iw-form-api-final {
		animation: iw-form-api-surge .2s ease-out both;
	}
	.iw-form-api-final-circulo,
	.iw-form-api-final-risco {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Contexto escuro: a confirmação herda as cores de texto do tema, que são
   escuras. Sobre o fundo escuro de uma faixa de newsletter ela sumiria.
   Troque `.iw-hf-news-form` pelo wrapper escuro do projeto, se for outro. */
.iw-hf-news-form .iw-form-api-final-titulo,
.iw-hf-news-form .iw-form-api-final-texto {
	color: #ffffff;
}

.iw-hf-news-form .iw-form-api-final-circulo,
.iw-hf-news-form .iw-form-api-final-risco {
	stroke: #6ee7a0;
}
/* IW-CONFIRMACAO-ENVIO :: fim ------------------------------------------ */