/**
 * Signup Form CTA — shared front-end + editor styles.
 *
 * Colors come from --eretail-signup-cta-gradient-start/-end, set inline
 * per-render from the global Customizer settings (see inc/signup-cta.php).
 */

.eretail-signup-cta {
	padding-block: var( --eretail-space-2xl, 96px );
	/* Light at the top, intensifying to the accent color at the bottom
	   edge — matches the design comp's glow concentrated along the
	   bottom of the section. */
	background: linear-gradient(
		180deg,
		var( --eretail-signup-cta-gradient-start, #f4f4f4 ) 0%,
		var( --eretail-signup-cta-gradient-start, #f4f4f4 ) 40%,
		var( --eretail-signup-cta-gradient-end, #e41e26 ) 100%
	);
}

.eretail-signup-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var( --eretail-space-lg, 40px );
}

.eretail-signup-cta__heading {
	margin: 0;
	color: var( --eretail-color-heading, #111111 );
	font-size: clamp( 1.75rem, 1.4rem + 1.5vw, 2.5rem );
	font-weight: 700;
	line-height: 1.15;
}

.eretail-signup-cta__form-area {
	width: 100%;
}

.eretail-signup-cta__form {
	display: flex;
	flex-direction: column;
	gap: var( --eretail-space-md, 24px );
}

.eretail-signup-cta__notice {
	margin: 0;
	font-size: 0.9rem;
}

.eretail-signup-cta__notice--success {
	color: var( --eretail-color-heading, #111111 );
}

.eretail-signup-cta__notice--error {
	color: var( --eretail-color-primary-dark, #c11821 );
}

/* Honeypot field: hidden from sighted users and keyboard tab order, but
   still present in the DOM for bots that fill in every field blindly. */
.eretail-signup-cta__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.eretail-signup-cta__field {
	display: flex;
	align-items: center;
	gap: var( --eretail-space-sm, 16px );
	border-bottom: 1px solid var( --eretail-color-heading, #111111 );
	padding-bottom: var( --eretail-space-xs, 8px );
}

.eretail-signup-cta__field input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 4px 0;
	font-family: inherit;
	font-size: 1rem;
	color: var( --eretail-color-heading, #111111 );
}

.eretail-signup-cta__field input::placeholder {
	color: var( --eretail-color-text-light, #767676 );
	opacity: 1;
}

.eretail-signup-cta__field input:focus-visible {
	outline: none;
}

.eretail-signup-cta__field:focus-within {
	border-bottom-color: var( --eretail-color-primary, #e41e26 );
}

.eretail-signup-cta__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	color: var( --eretail-color-heading, #111111 );
	cursor: pointer;
	transition: transform var( --eretail-transition-speed, 0.25s ) var( --eretail-transition-easing, ease ),
		color var( --eretail-transition-speed, 0.25s ) var( --eretail-transition-easing, ease );
}

.eretail-signup-cta__submit:hover,
.eretail-signup-cta__submit:focus-visible {
	color: var( --eretail-color-primary, #e41e26 );
	transform: translateX( 4px );
}

.eretail-signup-cta__submit:focus-visible {
	outline: 2px solid var( --eretail-color-primary, #e41e26 );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.eretail-signup-cta__submit {
		transition: none;
	}

	.eretail-signup-cta__submit:hover,
	.eretail-signup-cta__submit:focus-visible {
		transform: none;
	}
}

@media ( min-width: 782px ) {
	.eretail-signup-cta__inner {
		grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1fr );
		align-items: center;
		gap: var( --eretail-space-xl, 64px );
	}

	/* Fields stay stacked (not side-by-side) at every width, matching the
	   design comp — only the column's overall width changes at desktop. */
	.eretail-signup-cta__form {
		gap: var( --eretail-space-lg, 40px );
	}
}