/**
 * LP Porfiria — revelação progressiva dos campos do cadastro.
 * Complementa assets/css/porfiria.css do plugin (que segue intacto).
 * Escopo: só a landing (body.cellera-porfiria-form-page) e só os forms .lp-form.
 *
 * Oculto por CSS desde o primeiro paint, para os campos não piscarem antes do
 * script rodar. O JS adiciona .cellera-porfiria-revealed quando a API confirma
 * o CRM.
 */

.cellera-porfiria-form-page .lp-form form:not(.cellera-porfiria-revealed) .elementor-field-group-nome,
.cellera-porfiria-form-page .lp-form form:not(.cellera-porfiria-revealed) .elementor-field-group-especialidade,
.cellera-porfiria-form-page .lp-form form:not(.cellera-porfiria-revealed) .elementor-field-group-email,
.cellera-porfiria-form-page .lp-form form:not(.cellera-porfiria-revealed) .elementor-field-group-telefone,
.cellera-porfiria-form-page .lp-form:not(.lp-form-faixa) form:not(.cellera-porfiria-revealed) .elementor-field-group-aceite {
	display: none !important;
}

@keyframes cellera-porfiria-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cellera-porfiria-form-page .lp-form form.cellera-porfiria-revealed .elementor-field-group-nome,
	.cellera-porfiria-form-page .lp-form form.cellera-porfiria-revealed .elementor-field-group-especialidade,
	.cellera-porfiria-form-page .lp-form form.cellera-porfiria-revealed .elementor-field-group-email,
	.cellera-porfiria-form-page .lp-form form.cellera-porfiria-revealed .elementor-field-group-telefone,
	.cellera-porfiria-form-page .lp-form:not(.lp-form-faixa) form.cellera-porfiria-revealed .elementor-field-group-aceite {
		animation: cellera-porfiria-reveal 0.28s ease both;
	}

	.cellera-porfiria-form-page .lp-form form.cellera-porfiria-revealed .elementor-field-group-especialidade,
	.cellera-porfiria-form-page .lp-form form.cellera-porfiria-revealed .elementor-field-group-telefone {
		animation-delay: 0.06s;
	}

	.cellera-porfiria-form-page .lp-form:not(.lp-form-faixa) form.cellera-porfiria-revealed .elementor-field-group-aceite {
		animation-delay: 0.12s;
	}
}

/* Faixa escura (desktop/tablet): linha 1 = CRM | UF | E-mail, linha 2 =
   Nome | Especialidade | Telefone. Antes da validação só CRM e UF aparecem,
   centralizados na tarja cinza; depois a tarja cresce para as duas linhas. */
@media (min-width: 768px) {
	.cellera-porfiria-form-page .lp-form-faixa .elementor-form:not(.cellera-porfiria-revealed) .elementor-form-fields-wrapper {
		justify-content: center;
	}

	/* Antes da validação só CRM e UF estão na linha: ocupam a tarja toda,
	   na proporção do Figma (CRM 260 : UF 105). */
	.cellera-porfiria-form-page .lp-form-faixa .elementor-form:not(.cellera-porfiria-revealed) .elementor-field-group-crm {
		width: 70% !important;
		max-width: 70% !important;
		flex-basis: 70% !important;
	}

	.cellera-porfiria-form-page .lp-form-faixa .elementor-form:not(.cellera-porfiria-revealed) .elementor-field-group-uf {
		width: 30% !important;
		max-width: 30% !important;
		flex-basis: 30% !important;
	}

	.cellera-porfiria-form-page .lp-form-faixa .elementor-form::before {
		transition: height 0.28s ease;
	}

	.cellera-porfiria-form-page .lp-form-faixa .elementor-form.cellera-porfiria-revealed::before {
		height: 155px;
	}
}

/* Rodapé: o aceite fica sempre visível (Figma 392:125) — só CRM e UF +
   aceite antes da validação. Botão com a altura do Figma (41px). */
@media (min-width: 768px) {
	.cellera-porfiria-form-page .lp-form-faixa .elementor-button {
		min-height: 41px !important;
		height: 41px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* Rodapé no celular: o cinza fica só atrás dos campos; aceite e botão ficam
   sobre o fundo escuro, como no desktop. O CSS da página pinta o form
   inteiro — aqui ele volta a ser transparente e cada grupo de campo recebe o
   cinza, formando um bloco único (arredondado no primeiro e no último campo
   visível). */
@media (max-width: 767px) {
	.cellera-porfiria-form-page .lp-form-faixa .elementor-form {
		background: transparent !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}

	.cellera-porfiria-form-page .lp-form-faixa .elementor-form-fields-wrapper {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.cellera-porfiria-form-page .lp-form-faixa .elementor-field-group:not(.elementor-field-type-acceptance):not(.elementor-field-type-submit) {
		background: #e5e5e5;
		padding: 0 24px 12px !important;
		margin-bottom: 0 !important;
	}

	/* Topo do bloco: UF e CRM são sempre os dois primeiros campos. */
	.cellera-porfiria-form-page .lp-form-faixa .elementor-form-fields-wrapper > .elementor-field-group:first-child {
		padding-top: 24px !important;
		border-radius: 24px 24px 0 0;
	}

	/* Base do bloco antes da validação: o segundo campo (UF ou CRM). */
	.cellera-porfiria-form-page .lp-form-faixa .elementor-form:not(.cellera-porfiria-revealed) .elementor-form-fields-wrapper > .elementor-field-group:nth-child(2) {
		padding-bottom: 24px !important;
		border-radius: 0 0 24px 24px;
	}

	/* Base do bloco depois da validação: o campo logo antes do aceite. */
	.cellera-porfiria-form-page .lp-form-faixa .elementor-form.cellera-porfiria-revealed .elementor-field-group:has(+ .elementor-field-type-acceptance) {
		padding-bottom: 24px !important;
		border-radius: 0 0 24px 24px;
	}

	/* Aceite e botão sobre o fundo escuro. */
	.cellera-porfiria-form-page .lp-form-faixa .elementor-field-type-acceptance {
		background: transparent;
		margin-top: 16px !important;
		margin-bottom: 12px !important;
		justify-content: center;
	}

	.cellera-porfiria-form-page .lp-form-faixa .elementor-field-option label {
		color: #fff !important;
	}

	.cellera-porfiria-form-page .lp-form-faixa input[type=checkbox] {
		border-color: #fff !important;
	}

	.cellera-porfiria-form-page .lp-form-faixa input[type=checkbox]:checked {
		border-color: #FF0000 !important;
	}
}

/* Select de especialidade: nomes longos não quebram o campo. */
.cellera-porfiria-form-page .lp-form select[name="form_fields[especialidade]"] {
	text-overflow: ellipsis;
}