/*
 * Formulários de conta: entrar, criar conta, recuperar e trocar a senha.
 *
 * Copiado do forms.css do plugin Pius Network e enxugado. Folha própria, e não
 * o frente.css: estes formulários vivem em páginas que não têm curso nenhum, e
 * o frente.css puxaria o player junto.
 *
 * Nenhum tamanho de texto é fixo — tudo parte de 1em, que herda do elemento
 * onde o shortcode foi colocado, para o Bricks continuar mandando.
 */

.thelma-form {
	--tf-cor: var(--thelma-cor, #5b3df5);
	--tf-texto: var(--thelma-texto, #1d2327);
	--tf-suave: var(--thelma-texto-suave, #646970);
	--tf-linha: var(--thelma-borda, #e3e5e8);
	--tf-fundo: var(--thelma-fundo, #fff);
	--tf-fundo-suave: var(--thelma-fundo-suave, #f6f7f9);
	--tf-erro: #b32d2e;
	--tf-erro-fundo: #fdf0f0;
	--tf-ok: var(--thelma-sucesso, #1a9d55);
	--tf-ok-fundo: #eefaf3;
	--tf-raio: var(--thelma-raio-pequeno, 8px);

	box-sizing: border-box;
	/* Largura cheia do elemento do Bricks. Para um formulário mais estreito,
	   ajuste a largura no próprio elemento, ou defina --thelma-form-largura. */
	width: 100%;
	max-width: var(--thelma-form-largura, 100%);
	min-width: 0;
	color: var(--tf-texto);
	font-family: var(--thelma-fonte, inherit);
	line-height: 1.5;
}

.thelma-form * {
	box-sizing: border-box;
}

.thelma-form--escuro {
	--tf-texto: #f0f0f1;
	--tf-suave: #c3c4c7;
	--tf-linha: #3c434a;
	--tf-fundo: #1d2327;
	--tf-fundo-suave: #2c3338;
}

.thelma-form__titulo {
	margin: 0 0 0.25em;
	font-size: 1.375em;
	font-weight: 600;
	line-height: 1.2;
}

.thelma-form__intro {
	margin: 0 0 1.25em;
	color: var(--tf-suave);
}

.thelma-form__aviso {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-radius: var(--tf-raio);
	background: var(--tf-fundo-suave);
	font-size: 0.9375em;
}

.thelma-form__aviso--erro {
	background: var(--tf-erro-fundo);
	color: var(--tf-erro);
}

.thelma-form__aviso--ok {
	background: var(--tf-ok-fundo);
	color: var(--tf-ok);
}

.thelma-form__campo {
	margin-bottom: 1em;
}

.thelma-form__rotulo {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.9375em;
	font-weight: 600;
}

.thelma-form__obrigatorio {
	color: var(--tf-erro);
}

.thelma-form__controle {
	display: block;
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--tf-linha);
	border-radius: var(--tf-raio);
	background: var(--tf-fundo);
	color: var(--tf-texto);
	/* 1em evita o zoom automático do iPhone ao focar o campo */
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
}

.thelma-form__controle:focus {
	border-color: var(--tf-cor);
	outline: 2px solid color-mix(in srgb, var(--tf-cor) 35%, transparent);
	outline-offset: 1px;
}

.thelma-form__senha {
	position: relative;
}

.thelma-form__senha .thelma-form__controle {
	padding-right: 2.9em;
}

.thelma-form__olho {
	position: absolute;
	top: 50%;
	right: 0.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--tf-suave);
	cursor: pointer;
}

.thelma-form__olho:hover {
	color: var(--tf-cor);
}

.thelma-form__olho svg {
	width: 1.2em;
	height: 1.2em;
}

/* Linhas de duas colunas (o modal do endereço: número e complemento, cidade e
   estado). `data-colunas="1"` deixa a linha numa coluna só. */
.thelma-form__linha {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em 1.25em;
	margin-bottom: 1em;
}

.thelma-form__linha[data-colunas="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.thelma-form__linha > .thelma-form__campo {
	margin-bottom: 0;
}

/* O campo recusado: a borda vermelha e o recado embaixo. */
.thelma-form__campo.is-erro .thelma-form__controle {
	border-color: var(--tf-erro);
}

.thelma-form__campo.is-erro .thelma-form__controle:focus {
	outline-color: color-mix(in srgb, var(--tf-erro) 35%, transparent);
}

.thelma-form__erro {
	margin: 0.35em 0 0;
	color: var(--tf-erro);
	font-size: 0.8125em;
}

.thelma-form__erro:empty {
	display: none;
}

.thelma-form__dica {
	margin: 0.35em 0 0;
	color: var(--tf-suave);
	font-size: 0.8125em;
}

.thelma-form__opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25em;
	font-size: 0.9375em;
}

.thelma-form__lembrar {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
	cursor: pointer;
}

.thelma-form__link {
	color: var(--tf-cor);
	text-decoration: none;
}

.thelma-form__link:hover {
	text-decoration: underline;
}

/* A isca some da tela sem usar display:none — assim o robô que lê o CSS
   continua achando que é um campo comum. */
.thelma-form__isca {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.thelma-form__acoes {
	margin-top: 0.5em;
}

.thelma-form__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3em;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: var(--tf-raio);
	background: var(--tf-cor);
	color: var(--thelma-cor-texto-sobre, #fff);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
}

.thelma-form__botao:hover {
	filter: brightness(0.94);
}

.thelma-form__botao:disabled {
	opacity: 0.6;
	cursor: default;
}

.thelma-form__nota {
	margin: 1em 0 0;
	color: var(--tf-suave);
	font-size: 0.9375em;
	text-align: center;
}

/* Passos da troca de senha ------------------------------------------------ */

.thelma-passos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
}

.thelma-passos__item {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
	color: var(--tf-suave);
}

.thelma-passos__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	border: 1px solid var(--tf-linha);
	border-radius: 50%;
	font-weight: 600;
}

.thelma-passos__item.is-atual {
	color: var(--tf-texto);
	font-weight: 600;
}

.thelma-passos__item.is-atual .thelma-passos__numero {
	border-color: var(--tf-cor);
	background: var(--tf-cor);
	color: var(--thelma-cor-texto-sobre, #fff);
}

.thelma-passos__item.is-feito .thelma-passos__numero {
	border-color: var(--tf-ok);
	background: var(--tf-ok);
	color: #fff;
}