:root {
	--typewriter-chars: 54; /* Number of characters in the typewriter text */
}

/* Card overrides */
.card {
	max-width: fit-content;
}

/* Newsletter card animation */
#newsletter-card {
	opacity: 0;
	animation: fade-in-newsletter 0.5s ease-in calc(var(--typewriter-chars) * .1s + 0.5s) forwards;
}

.survey {
	color: white;
	line-height: 2rem;
	margin-top: -1rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.card {
		max-width: 800px;
		color: var(--primary-dark);
	}

	.survey--yellow-background {
		font-size: clamp(1.2rem, 3vw, 1.5rem);
		background-color: var(--secondary-dark);
		padding: 0.5rem 1rem;
		color: var(--primary-dark);
		width: fit-content;
		margin: 0 auto 2rem;

		svg {
			width: 1.75rem;
			height: 1.75rem;
			vertical-align: middle;
			stroke-width: 1.5;
		}
	}

	.survey-form {
		width: 100%;
		max-width: 800px;
		display: flex;
		flex-direction: column;
		gap: 1rem;

		input, textarea {
			width: 100%;
			padding: 12px 16px;
			border: 2px solid #e0e0e0;
			border-radius: 8px;
			font-size: 1rem;
			transition: border-color 0.3s ease;
			background: rgba(255, 255, 255, 0.95);
			color: var(--primary-dark);
		}

		textarea {
			min-height: 120px;
			resize: vertical;
			font-family: inherit;
			height: 100%;
		}

		input:focus, textarea:focus {
			outline: none;
			border-color: var(--secondary-dark);
		}

		input::placeholder, textarea::placeholder {
			color: var(--primary);
		}

		.btn {
			width: 100%;
			margin-top: 0;
		}
	}
}

.tagline {
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin-top: 1rem;
	margin-bottom: 2rem;
	color: white;

	.typewriter {
		color: #0000;
		background:
			linear-gradient(-90deg, var(--secondary-dark) 15px, #0000 0) 25px 0,
			linear-gradient(white 0 0) 0 0;
		background-size: calc(var(--typewriter-chars) * 1ch) 200%;
		-webkit-background-clip: padding-box, text;
		background-clip: padding-box, text;
		background-repeat: no-repeat;
		animation: 
			blink 1.4s infinite steps(1),   
			typewriter calc(var(--typewriter-chars) * .1s) steps(var(--typewriter-chars)) forwards;
	}
}

@keyframes typewriter {
	from {background-size: 0 200%}
}

@keyframes blink {
	80% {background-position:0 -100%,0 0}
}

@keyframes fade-in-cta {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fade-in-newsletter {
	from { opacity: 0; }
	to { opacity: 1; }
}

.newsletter-signup {
	margin: 3rem auto;
	max-width: 600px;
	padding: 2rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.newsletter-content h2 {
	color: var(--primary-dark);
	margin-bottom: 1rem;
	font-size: 1.8rem;
}

.newsletter-content p {
	color: #666;
	margin-bottom: 2rem;
	line-height: 1.6;
}

.newsletter-form {
	display: flex;
	justify-content: center;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	max-width: 500px;
	width: 100%;
}

.email-button-group {
	display: flex;
	position: relative;
	width: 100%;
	align-items: center;
}

.email-input {
	flex: 1;
	min-width: 200px;
	padding: 12px 16px;
	padding-right: 120px; /* Make room for the overlapping button */
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

.email-button-group .btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	flex-shrink: 0;
	white-space: nowrap;
	height: calc(100% - 8px);
	padding: 8px 16px;
	border-radius: 6px;
}

/* Mobile styles - completely override the desktop positioning */
@media (max-width: 768px) {
	.email-button-group {
		position: static !important;
	}
	
	.email-button-group .btn {
		position: static !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		height: auto !important;
		width: 100% !important;
	}
	
	.email-input {
		padding-right: 16px !important;
	}
}

.email-input:focus {
	outline: none;
	border-color: var(--primary);
}

.email-input::placeholder {
	color: #999;
}

.success-message {
	margin-top: 1rem;
	padding: 1rem;
	background: rgba(76, 175, 80, 0.1);
	border: 2px solid #4CAF50;
	border-radius: 8px;
	color: #2E7D32;
}

.success-message p {
	margin: 0;
	font-weight: 500;
}

.error-message {
	margin-top: 1rem;
	padding: 1rem;
	background: rgba(244, 67, 54, 0.1);
	border: 2px solid #F44336;
	border-radius: 8px;
	color: #D32F2F;
}

.error-message p {
	margin: 0;
	font-weight: 500;
}

@media (max-width: 768px) {
	.form-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.email-button-group {
		flex-direction: column;
		gap: 0.75rem;
		display: flex;
		align-items: stretch;
	}
	
	.email-input {
		min-width: auto;
		flex: none;
		width: 100%;
	}
	
	.email-button-group .btn {
		flex: none;
	}

}