@charset "utf-8";
/*
 * Tela de Cadastro - mesma estrutura do login.css, só troca o lado azul
 * pelo roxo (--color-purple) e adapta o formulário pros campos extras
 * (CPF/telefone, exigidos antes de qualquer pagamento - ver Billing.php).
 */

.register-main .login-form {
	justify-content: flex-start;
	overflow-y: auto;
	max-height: 100vh;
	padding: 40px 0;
	box-sizing: border-box;
}

/*
 * Centraliza verticalmente com margin:auto (em vez de justify-content:center
 * no pai) - fica centralizado quando cabe na tela, mas ainda dá pra rolar
 * até o topo caso o formulário seja mais alto que a viewport (com
 * justify-content:center o início ficaria inacessível ao rolar).
 */
.register-main .login-form .content {
	margin: auto 0;
}

#register-form {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
}

#register-form > .login-title,
#register-form > .login-form-options,
#register-form > .button-div,
#register-form > #div-message {
	flex: 0 0 100%;
}

#register-form > .input-div {
	flex: 0 0 100%;
}

#register-form > .input-div.half {
	flex: 0 0 calc(50% - 8px);
}

/* Aceite dos Termos de Uso / Política de Privacidade (obrigatório). */
#register-form > .register-terms {
	flex: 0 0 100%;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 16px 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text);
	cursor: pointer;
}

.register-terms input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0 0;
	accent-color: var(--color-purple);
	cursor: pointer;
}

.register-terms a {
	font-weight: 600;
	color: var(--color-purple);
	text-decoration: none;
}

.register-terms a:hover {
	text-decoration: underline;
}

.register-main .button-div #register {
	width: 100%;
}

.register-main .button-login {
	background-color: var(--color-purple);
}

.register-main .login-poster.purple {
	--color-purple-plus: #4f3785;
	background-color: var(--color-purple);
	background-image: linear-gradient(135deg, var(--color-purple), var(--color-purple-plus));
}

.register-main .login-poster .logo-div {
	margin-bottom: 40px;
}

.login-form .content {
	max-width: 700px !important;
}

.login-form-options span {
	padding-right: 10px !important;
}

.register-main .login-form-options .static-text {
	color: var(--color-text);
	font-weight: 500;
	cursor: default;
}

.register-main .login-form-options #button-back-login {
	font-weight: 600;
	color: var(--color-pink);
}

.register-main .login-form-options #button-back-login:hover {
	color: var(--color-text);
}

.register-main .logo-wrap {
	margin-bottom: 60px;
}

.div-message-content {
	width: 100%;
	height: 62px;
}

/* Tablet: uma coluna só (ver login.css), sem esticar os campos até 700px. */
@media screen and (max-width: 900px) {
	.login-form .content {
		max-width: 560px !important;
	}
}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-width: 640px) {
	#register-form > .input-div.half {
		flex: 0 0 100%;
	}
}