/* ============================================================
   Email Opt-In Template Layout Styles
   Vertically centered single-column layout
   ============================================================ */

.eo-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: var(--space-3xl) var(--container-padding);
}

.eo-container {
	width: 100%;
	max-width: 640px;
}

/* --- Form Section --- */

.eo-form {
	margin-top: var(--space-2xl);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: var(--space-xl);
}

/* HubSpot form element styles scoped to this template.
   Matches the default HubSpot form appearance adapted to the theme palette. */
.eo-form fieldset {
	max-width: 100%;
}

.eo-form .hs-form-field {
	margin-bottom: var(--space-md);
}

.eo-form label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-secondary);
}

.eo-form .hs-input {
	width: 100%;
	padding: 12px var(--space-md);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	color: var(--color-surface);
	background: var(--color-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	transition: border-color var(--transition-fast);
}

.eo-form .hs-input:focus {
	outline: none;
	border-color: var(--color-accent);
}

.eo-form .hs-input::placeholder {
	color: var(--color-muted);
}

.eo-form .hs-error-msgs {
	list-style: none;
	margin-top: var(--space-xs);
	font-size: var(--font-size-sm);
	color: #e25c5c;
}

.eo-form .hs-submit {
	margin-top: var(--space-lg);
}

.eo-form .hs-button {
	display: inline-flex;
	width: 100%;
	justify-content: center;
	padding: 16px var(--space-xl);
	font-family: var(--font-family);
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-accent);
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.eo-form .hs-button:hover {
	background: var(--color-accent-hover);
}