/* =========================================================
   AUTH - PONCE PARK
========================================================= */
/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

.auth-body {

	margin: 0;

	font-family:
		"Urbanist",
		sans-serif;

	background:
		#0b0b0b;

	color:
		#111111;

}


.auth-page {

	min-height:
		760px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		50px
		24px;

	background:
		#0b0b0b;

}


.auth-shell {

	width:
		min(
			100%,
			1100px
		);

	min-height:
		650px;

	display:
		grid;

	grid-template-columns:
		1fr
		1fr;

	overflow:
		hidden;

	border-radius:
		24px;

	background:
		#ffffff;

	box-shadow:
		0
		25px
		70px
		rgba(
			0,
			0,
			0,
			.32
		);

}


.auth-brand-panel {

	position:
		relative;

	min-height:
		650px;

	background-image:
		url("../img/hero-poncepark.webp");

	background-size:
		cover;

	background-position:
		center;

}


.auth-brand-overlay {

	position:
		absolute;

	inset:
		0;

	background: #0C1B32;

}

.auth-brand-content {

	position:
		relative;

	z-index:
		2;

	height:
		100%;

	display:
		flex;

	flex-direction:
		column;

	justify-content:
		center;

	padding:
		55px;

	color:
		#ffffff;

}

.auth-logo img {

	width:
		190px;

	height:
		auto;

}

.auth-brand-content h1 {

	max-width:
		100%;

	margin:
		55px
		0
		18px;

	font-size:
		38px;

	line-height:
		1.08;

	font-weight:
		800;

	letter-spacing:
		-.6px;

}

.auth-brand-content p {

	max-width:
		410px;

	margin:
		0;

	color:
		rgba(255,255,255,.82);

	font-size:
		15px;

	line-height:
		1.6;

}


.auth-brand-benefits {

	display:
		grid;

	gap:
		13px;

	margin-top:
		36px;

}


.auth-brand-benefits div {

	display:
		flex;

	align-items:
		center;

	gap:
		10px;

	font-size:
		13px;

}


.auth-brand-benefits i {

	color:
		#f05a00;

	font-size:
		20px;

}


.auth-form-panel {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		45px;

	background:
		#ffffff;

}


.auth-card {

	width:
		100%;

	max-width:
		390px;

}


.auth-kicker {

	display:
		block;

	margin-bottom:
		7px;

	color:
		#f05a00;

	font-size:
		10px;

	font-weight:
		800;

	letter-spacing:
		1.4px;

}


.auth-card-header h2 {

	margin:
		0;

	font-size:
		31px;

	font-weight:
		800;

}


.auth-card-header p {

	margin:
		8px
		0
		28px;

	color:
		#777777;

	font-size:
		13px;

}


.auth-form {

	display:
		grid;

	gap:
		18px;

}


.auth-field label {

	display:
		block;

	margin-bottom:
		7px;

	font-size:
		12px;

	font-weight:
		700;

}


.auth-field-top {

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		12px;

}


.auth-field-top a {

	color:
		#f05a00;

	font-size:
		11px;

	font-weight:
		600;

	text-decoration:
		none;

}

.auth-control {
	position: relative;

	width: 100%;
}

.auth-control > i {

	position:
		absolute;

	top:
		50%;

	left:
		14px;

	transform:
		translateY(-50%);

	color:
		#888888;

}

.auth-control input {

	width: 100%;

	max-width: 100%;

	height: 50px;

	padding:
		0
		52px
		0
		42px;

	border:
		1px solid
		#dddddd;

	border-radius:
		10px;

	background:
		#ffffff;

	color:
		#151515;

	font-family:
		inherit;

	font-size:
		13px;

	outline:
		none;

	box-sizing:
		border-box;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;

}

.auth-control input::placeholder {

	color:
		#aaaaaa;

}

.auth-control input:focus {

	border-color:
		#f05a00;

	box-shadow:
		0
		0
		0
		3px
		rgba(
			240,
			90,
			0,
			.08
		);

}


.auth-primary-button {

	width:
		100%;

	height:
		52px;

	border:
		0;

	border-radius:
		10px;

	background:
		#f05a00;

	color:
		#ffffff;

	font-size:
		14px;

	font-weight:
		800;

	cursor:
		pointer;

}


.auth-divider {

	position:
		relative;

	margin:
		26px
		0;

	text-align:
		center;

}


.auth-divider::before {

	content:
		"";

	position:
		absolute;

	top:
		50%;

	left:
		0;

	width:
		100%;

	height:
		1px;

	background:
		#eeeeee;

}


.auth-divider span {

	position:
		relative;

	padding:
		0
		12px;

	background:
		#ffffff;

	color:
		#999999;

	font-size:
		11px;

}

.auth-google-button {

	width:
		100%;

	min-height:
		50px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	border:
		1px solid
		#e0e0e0;

	border-radius:
		10px;

	background:
		#ffffff;

	color:
		#8b8b8b;

	font-family:
		inherit;

	font-size:
		14px;

	font-weight:
		700;

	text-decoration:
		none;

	cursor:
		pointer;

	transition:
		border-color .2s ease,
		color .2s ease,
		background .2s ease;

}


.auth-google-button:hover {

	border-color:
		#f05a00;

	color:
		#f05a00;

	background:
		#fffaf7;

}

.auth-footer-link {

	display:
		flex;

	justify-content:
		center;

	gap:
		5px;

	margin-top:
		24px;

	font-size:
		12px;

}


.auth-footer-link a {

	color:
		#f05a00;

	font-weight:
		700;

	text-decoration:
		none;

}


.auth-back-link {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		6px;

	margin-top:
		24px;

	color:
		#777777;

	font-size:
		11px;

	text-decoration:
		none;

}


.auth-alert {

	display:
		flex;

	align-items:
		center;

	gap:
		8px;

	margin-bottom:
		18px;

	padding:
		11px
		13px;

	border-radius:
		9px;

	font-size:
		11px;

}


.auth-alert-error {

	border:
		1px solid
		#ffc2ae;

	background:
		#fff3ee;

	color:
		#a6310b;

}


.auth-alert-success {

	border:
		1px solid
		#bfe8c8;

	background:
		#f1fff4;

	color:
		#24783a;

}

/* =========================================================
   MOSTRAR / OCULTAR SENHA
========================================================= */

.auth-control {
	position: relative;
}


.auth-control input[type="password"],
.auth-control input[type="text"] {
	padding-right: 52px;
}


.auth-password-toggle {

	position: absolute;

	top: 50%;
	right: 14px;

	transform: translateY(-50%);

	width: 34px;
	height: 34px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 0;

	background: transparent;

	color: #8b8b8b;

	font-size: 18px;

	cursor: pointer;

	z-index: 5;

}


.auth-password-toggle:hover {
	color: #f05a00;
}


.auth-password-toggle:focus {
	outline: none;
}


/* IMPORTANTE:
   não deixar a regra do ícone principal
   posicionar também o ícone do botão
*/

.auth-password-toggle i {

	position: static;

	transform: none;

	pointer-events: none;

	font-size: 18px;

}

@media (
	max-width: 800px
) {

	.auth-page {

		padding:
			20px
			12px;

	}


	.auth-shell {

		grid-template-columns:
			1fr;

	}


	.auth-brand-panel {

		min-height:
			310px;

	}


	.auth-brand-content {

		padding:
			30px;

	}


	.auth-brand-content h1 {

		margin-top:
			30px;

		font-size:
			30px;

	}


	.auth-form-panel {

		padding:
			38px
			24px;

	}

}