/* -------------------------------------------------------------------------
   Agendador de treinamentos — pagina publica de inscricao.

   Estilo proprio, escrito para nao depender da versao do Bootstrap que o
   tema carrega. Tudo fica dentro de #evo-inscricao para nao vazar.
   ---------------------------------------------------------------------- */

/* ---- Faixa do topo ----

   Sobe para tras do menu com deslocamento negativo, como os banners das
   outras paginas. O cabecalho do tema tem 183px e o menu desce ate 243px,
   por isso o espaco reservado antes do titulo.
   ---------------------------------------------------------------------- */

#evo-banner {
	position: relative;
	top: -183px;
	margin-bottom: -133px;
	padding: 285px 0 55px;
	background: #163745;
	color: #fff;
}

#evo-banner h2 {
	margin: 0 0 14px;
	color: #fff;
}

#evo-banner p {
	display: inline-block;
	margin: 0;
	padding: 8px 18px;
	border-left: 3px solid #f0862b;
	background: rgba(255, 255, 255, .08);
	font-size: 15px;
}

@media (max-width: 767px) {
	#evo-banner {
		padding: 245px 0 40px;
	}
}

#evo-inscricao {
	--evo-laranja: #f0862b;
	--evo-escuro: #163745;
	--evo-borda: #dde3e6;
	--evo-texto-fraco: #5a6a70;

	padding: 60px 0 90px;
	color: var(--evo-escuro);
}

/* ---- Aviso de retorno do envio ---- */

#evo-inscricao .evo-aviso {
	margin-bottom: 22px;
	padding: 16px 20px;
	border-radius: 10px;
	border-left: 4px solid;
	font-size: 16px;
}

#evo-inscricao .evo-aviso--ok {
	background: #eef7ef;
	border-color: #2e7d43;
	color: #1f5730;
}

#evo-inscricao .evo-aviso--erro {
	background: #fdf0ee;
	border-color: #c0392b;
	color: #8d2b20;
}

/* ---- Blocos ---- */

#evo-inscricao .evo-bloco {
	background: #fff;
	border: 1px solid var(--evo-borda);
	border-radius: 12px;
	padding: 28px;
	margin-bottom: 22px;
	box-shadow: 0 1px 3px rgba(22, 55, 69, .06);
}

#evo-inscricao .evo-bloco__titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 20px;
	color: var(--evo-escuro);
}

#evo-inscricao .evo-bloco__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--evo-laranja);
	color: #fff;
	font-size: 15px;
	flex: 0 0 auto;
}

/* ---- Bloco 1: cursos ---- */

#evo-inscricao .evo-cursos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

#evo-inscricao .evo-curso {
	flex: 1 1 auto;
	min-width: 120px;
	padding: 14px 26px;
	border: 2px solid var(--evo-borda);
	border-radius: 10px;
	background: #fff;
	color: var(--evo-escuro);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

#evo-inscricao .evo-curso:hover {
	border-color: var(--evo-laranja);
}

#evo-inscricao .evo-curso.is-ativo {
	background: var(--evo-laranja);
	border-color: var(--evo-laranja);
	color: #fff;
}

/* ---- Bloco 2: turmas ---- */

#evo-inscricao .evo-turma {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 10px;
	padding: 16px 20px;
	border: 1px solid var(--evo-borda);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 400;
	transition: background .15s, border-color .15s;
}

#evo-inscricao .evo-turma:hover {
	border-color: var(--evo-laranja);
}

/* O radio some: quem recebe o clique e a linha inteira. */
#evo-inscricao .evo-turma input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

#evo-inscricao .evo-turma__marca {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid var(--evo-borda);
	border-radius: 50%;
	position: relative;
}

#evo-inscricao .evo-turma__descricao {
	flex: 1 1 auto;
}

#evo-inscricao .evo-turma__curso {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: #eef2f4;
	font-size: 13px;
	font-weight: 700;
}

#evo-inscricao .evo-turma__vagas {
	flex: 0 0 auto;
	color: var(--evo-texto-fraco);
	font-size: 14px;
	white-space: nowrap;
}

#evo-inscricao .evo-turma.is-selecionada {
	background: #fdf3e9;
	border-color: var(--evo-laranja);
}

#evo-inscricao .evo-turma.is-selecionada .evo-turma__marca {
	border-color: var(--evo-laranja);
	background: var(--evo-laranja);
}

/* Confirmacao visual da turma escolhida. */
#evo-inscricao .evo-turma.is-selecionada .evo-turma__marca::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Foco por teclado precisa continuar visivel. */
#evo-inscricao .evo-turma input[type="radio"]:focus-visible + .evo-turma__marca {
	outline: 2px solid var(--evo-laranja);
	outline-offset: 3px;
}

#evo-inscricao .evo-sem-turma {
	margin: 0;
	padding: 18px 20px;
	border: 1px dashed var(--evo-borda);
	border-radius: 10px;
	color: var(--evo-texto-fraco);
}

/* Com o filtro ativo a etiqueta do curso e redundante. */
#evo-inscricao.is-filtrando .evo-turma__curso {
	display: none;
}

/* ---- Bloco 3: dados ---- */

#evo-inscricao .evo-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

#evo-inscricao .evo-campo {
	margin: 0;
}

#evo-inscricao .evo-campo--largo {
	grid-column: 1 / -1;
}

#evo-inscricao .evo-campo label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 15px;
}

#evo-inscricao .evo-opcional {
	font-weight: 400;
	color: var(--evo-texto-fraco);
}

#evo-inscricao .evo-campo input[type="text"],
#evo-inscricao .evo-campo input[type="email"],
#evo-inscricao .evo-campo input[type="tel"],
#evo-inscricao .evo-campo textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #cfd6d9;
	border-radius: 8px;
	/* 16px evita o zoom automatico do iPhone ao focar o campo. */
	font-size: 16px;
	font-family: inherit;
	color: var(--evo-escuro);
	background: #fff;
}

#evo-inscricao .evo-campo input:focus,
#evo-inscricao .evo-campo textarea:focus {
	outline: 2px solid var(--evo-laranja);
	outline-offset: 1px;
	border-color: var(--evo-laranja);
}

#evo-inscricao .evo-consentimento label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
}

#evo-inscricao .evo-consentimento input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* ---- Envio ---- */

#evo-inscricao .evo-envio {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 26px;
}

#evo-inscricao .evo-enviar {
	padding: 16px 36px;
	border: 0;
	border-radius: 8px;
	background: var(--evo-laranja);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

#evo-inscricao .evo-enviar:hover {
	background: #d9741f;
}

#evo-inscricao .evo-apoio {
	color: var(--evo-texto-fraco);
	font-size: 14px;
}

/* ---- Estado vazio ---- */

#evo-inscricao .evo-vazio h3 {
	margin-top: 0;
	color: var(--evo-escuro);
}

#evo-inscricao .evo-vazio a,
#evo-inscricao .evo-sem-turma a,
#evo-inscricao .evo-consentimento a {
	color: var(--evo-laranja);
	text-decoration: underline;
}

/* ---- Armadilha de robo: fora da tela, nunca display:none ---- */

#evo-inscricao .evo-armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Celular ---- */

@media (max-width: 767px) {
	#evo-inscricao {
		padding: 40px 0 60px;
	}

	#evo-inscricao .evo-bloco {
		padding: 20px 18px;
	}

	#evo-inscricao .evo-curso {
		flex: 1 1 calc(50% - 6px);
		min-width: 0;
		padding: 14px 10px;
	}

	#evo-inscricao .evo-turma {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	#evo-inscricao .evo-turma__descricao {
		flex: 1 1 60%;
	}

	#evo-inscricao .evo-turma__vagas {
		width: 100%;
		padding-left: 36px;
	}

	#evo-inscricao .evo-campos {
		grid-template-columns: 1fr;
	}

	#evo-inscricao .evo-enviar {
		width: 100%;
	}

	#evo-inscricao .evo-envio {
		justify-content: center;
	}
}