/* Reset e configurações básicas */
* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

body {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
		background: url('images/bebebordo-background-image.png') no-repeat center center fixed;
		background-size: cover;
		min-height: 100vh;
		color: white;
		position: relative;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
		background-color: #000000;
}

/* Overlay gradient for text legibility */
body::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, 
				rgba(0, 0, 0, 0.4) 0%, 
				rgba(0, 0, 0, 0.3) 30%, 
				rgba(0, 0, 0, 0.2) 60%, 
				rgba(0, 0, 0, 0.1) 100%);
		z-index: 1;
}

/* Fundo com estrelas animadas */
.stars {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
}

.star {
		position: absolute;
		width: 2px;
		height: 2px;
		background: white;
		border-radius: 50%;
		animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
		0% { opacity: 0.3; }
		100% { opacity: 1; }
}

/* Layout principal */
.container {
	position: relative;
	z-index: 3;
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.content {
	position: relative;
	z-index: 4;
	max-width: 100%;
	padding: 50px 20px;
	background-color: #ffffff;
	border-radius: 24px;
	border: 4px solid #EDDDCD;
	@media (min-width: 480px) {
		max-width: 512px;
		padding: 40px;
	}
}

.badge {
	position: absolute;
	top: -20px;
	left: 20px;
	border-radius: 12px;
	background-color: #6B6F14;
	color: #FFFFFF;
	font-size: 12px;
	padding: 8px 16px;
	@media (min-width: 480px) {
		left: 40px;
		font-size: 14px;
	}
}

/* Tipografia */
.main-title {
	font-size: 32px;
	font-weight: 600;
	line-height: 100%;
	margin-bottom: 16px;
	color: #6C513F;
	text-align: left;
	letter-spacing: -0.02em;
	@media (min-width: 480px) {
		font-size: 48px;
	}
}

.colorFirst {
	color: #D39F45;
}

.colorSecond {
	color: #B9997A;
}

.subtitle {
	font-size: 16px;
	font-weight: 300;
	color: #6B685D;
	line-height: 130%;
	margin-bottom: 24px;
	text-align: left;
	letter-spacing: -0.02em;
	@media (min-width: 480px) {
		font-size: 18px;
	}
}

/* Social proof */
.stats {
		display: flex;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 24px;
		gap: 8px;
}

.avatars {
		display: flex;
}

.avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: 2px solid #ffffff;
		margin-left: -8px;
		object-fit: cover;
		object-position: center;
}

.stats-text {
	text-align: left;
	color: #787567;
	font-size: 12px;
	line-height: 140%;
	letter-spacing: -0.02em;
}

/* Formulário com glassmorphism */
.form-container {
		border-radius: 16px;
}

.signupForm {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6B685D;
		gap: 8px;
}

.form-fields {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
}

/* Enhanced Form Input Styles */
.form-input {
		width: 100%;
		padding: 16px;
		border: 2px solid #E8E6E1;
		border-radius: 12px;
		background-color: #FFFFFF;
		color: #6B685D;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		position: relative;
		outline: none;
		font-family: inherit;
}

.email-input::placeholder {
		color: #A8A6A0;
		font-weight: 400;
		opacity: 1;
		transition: color 0.3s ease;
}

.form-input:hover {
		border-color: #D1CFC9;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
		transform: translateY(-1px);
		
}

.form-input:focus {
		border-color: #6B6F14;
		box-shadow: 0 0 0 6px rgba(107, 111, 20, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
		/* transform: translateY(-2px); */
		background-color: #FFFFFF;
}

.form-input:focus::placeholder {
		color: #C8C6C0;
		transform: translateY(-2px);
}

/* Form input validation states */
.form-input:invalid:not(:placeholder-shown) {
		border-color: #E74C3C;
		box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-input:valid:not(:placeholder-shown) {
		border-color: #c6c6c6;
}

/* Form input disabled state */
.form-input:disabled {
		background-color: #F8F7F5;
		color: #A8A6A0;
		cursor: not-allowed;
		opacity: 0.7;
		transform: none;
		box-shadow: none;
}

.input-wrapper {
		position: relative;
		width: 100%;
}

.email-input-wrapper::before {
		content: '📧';
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 18px;
		opacity: 0.6;
		pointer-events: none;
		transition: opacity 0.3s ease;
}

.email-input-wrapper:focus-within::before {
		opacity: 1;
}

/* Email input loading state */
.email-input.loading {
		background-image: linear-gradient(90deg, #F8F7F5 25%, #FFFFFF 50%, #F8F7F5 75%);
		background-size: 200% 100%;
		animation: loading-shimmer 1.5s infinite;
		pointer-events: none;
}

@keyframes loading-shimmer {
		0% { background-position: -200% 0; }
		100% { background-position: 200% 0; }
}

/* Email input error state with message */
.email-input.error {
		border-color: #E74C3C;
		box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.error-message {
		color: #E74C3C;
		font-size: 14px;
		display: none;
		align-items: center;
		gap: 4px;
		margin-bottom: 8px;
		transition: all 0.3s ease;
}

.error-message.show {
		display: flex;
}

.error-message::before {
		content: '⚠️';
		font-size: 12px;
}

/* Email input success state */
.form-input.success {
		border-color: #27AE60;
		box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.success-indicator {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: #27AE60;
		font-size: 18px;
		opacity: 0;
		transition: opacity 0.3s ease;
}

.form-input.success + .success-indicator {
		opacity: 1;
}

/* Responsive adjustments for form inputs */
@media (max-width: 480px) {
		.form-input {
				padding: 18px 14px;
				font-size: 16px; /* Prevents zoom on iOS */
		}
		
		.cta-button {
				padding: 18px 16px;
				font-size: 16px;
		}
}

/* Botão CTA */
.cta-button {
		width: 100%;
		padding: 20px 16px;
		background-color: #6B6F14;
		border: none;
		border-radius: 12px;
		color: white;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		letter-spacing: 0.5px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button:hover {
	background-color: #373a09;
	cursor: pointer;
}

/* Rodapé */
.footer-text {
		color: #6B685D;
		font-size: 14px;
		line-height: 1.4;
		text-align: left;
}

.footer-legal {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 12px;
		line-height: 1.4;
		text-align: left;
		margin-top: 40px;
		color: #787567;
}

.footer-legal a {
	color: #787567;
}

/* Seção da imagem do bebê - now hidden since we use it as background */
.baby-section {
		display: none;
}

/* Seção de partilha */
.share-section {
		margin-top: 30px;
		text-align: center;
}

.share-button {
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 10px;
		padding: 12px 24px;
		color: #6B685D;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		transition: all 0.3s ease;
		font-weight: 600;
		backdrop-filter: blur(10px);
}

.share-button:hover {
		background: rgba(255, 255, 255, 0.25);
		transform: translateY(-2px);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Mensagem de sucesso */
.success-message {
		display: none;
		background: linear-gradient(135deg, #00b894, #00cec9);
		padding: 15px;
		border-radius: 10px;
		margin-top: 20px;
		text-align: center;
		font-weight: 600;
		box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
}

/* Responsividade */
@media (max-width: 768px) {
		.container {
				max-width: 100%;
		}

		.main-title {
				font-size: 2.2rem;
		}

		.subtitle {
				font-size: 1.1rem;
		}
}

@media (max-width: 480px) {
		.main-title {
				font-size: 1.8rem;
		}

		.subtitle {
				font-size: 1rem;
		}
}