/**
 * ECC Event Waitlist - front-end form.
 *
 * Every rule is scoped under .ecc-wl so nothing leaks into the Astra theme,
 * and so Astra's own form styling does not have to be fought harder than
 * necessary. Colors are the ECC light emerald (#1d7a4e) per Brand & Voice.
 */

.ecc-wl {
	--ecc-wl-green: #1d7a4e;
	--ecc-wl-green-dark: #1a3d2b;
	--ecc-wl-ink: #1a2e22;
	--ecc-wl-muted: #5a6b60;
	--ecc-wl-line: #cfe0d5;
	--ecc-wl-bg: #f2faf5;

	margin: 2.5rem 0 1rem;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.ecc-wl-inner {
	background: var(--ecc-wl-bg);
	border: 1px solid var(--ecc-wl-line);
	border-radius: 10px;
	padding: 1.75rem;
	max-width: 44rem;
}

.ecc-wl .ecc-wl-heading {
	margin: 0 0 .5rem;
	font-size: 1.4rem;
	line-height: 1.25;
	color: var(--ecc-wl-green-dark);
}

.ecc-wl .ecc-wl-intro {
	margin: 0 0 .75rem;
	color: var(--ecc-wl-ink);
	line-height: 1.55;
	max-width: 60ch;
}

.ecc-wl .ecc-wl-count {
	margin: 0 0 1.25rem;
	color: var(--ecc-wl-muted);
	font-size: .9rem;
}

/* Messages */

.ecc-wl-message {
	margin: 0 0 1rem;
}

.ecc-wl-message p {
	margin: 0;
	padding: .75rem 1rem;
	border-radius: 6px;
	border-left: 4px solid var(--ecc-wl-green);
	background: #e2f0e9;
	color: var(--ecc-wl-green-dark);
	line-height: 1.5;
}

.ecc-wl-message p.ecc-wl-error {
	border-left-color: #9b2b1a;
	background: #fde8e5;
	color: #7a1f11;
}

/* Fields */

.ecc-wl-field {
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
}

.ecc-wl-field label {
	font-weight: 600;
	margin-bottom: .3rem;
	color: var(--ecc-wl-green-dark);
	font-size: .95rem;
}

.ecc-wl-optional {
	font-weight: 400;
	color: var(--ecc-wl-muted);
}

.ecc-wl .ecc-wl-help {
	order: 3;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--ecc-wl-muted);
	line-height: 1.4;
}

.ecc-wl-field input[type="text"],
.ecc-wl-field input[type="email"],
.ecc-wl-field input[type="tel"],
.ecc-wl-field select,
.ecc-wl-field textarea {
	width: 100%;
	padding: .7rem .8rem;
	border: 1px solid var(--ecc-wl-line);
	border-radius: 6px;
	background: #fff;
	color: var(--ecc-wl-ink);
	/* 16px stops iOS Safari zooming the page when a field takes focus. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
}

.ecc-wl-field input:focus,
.ecc-wl-field select:focus,
.ecc-wl-field textarea:focus {
	outline: 3px solid rgba(29, 122, 78, .35);
	outline-offset: 1px;
	border-color: var(--ecc-wl-green);
}

/* Honeypot. Hidden from people, reachable by anything filling every input.
   Kept out of the layout without display:none, which some bots check for. */
.ecc-wl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submit */

.ecc-wl .ecc-wl-submit {
	display: inline-block;
	background: var(--ecc-wl-green);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .8rem 1.6rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	min-height: 44px; /* comfortable target on a phone */
}

.ecc-wl .ecc-wl-submit:hover,
.ecc-wl .ecc-wl-submit:focus {
	background: #17643f;
}

.ecc-wl .ecc-wl-submit:focus-visible {
	outline: 3px solid rgba(29, 122, 78, .45);
	outline-offset: 2px;
}

.ecc-wl .ecc-wl-submit[disabled] {
	opacity: .6;
	cursor: progress;
}

.ecc-wl .ecc-wl-fineprint {
	margin: .85rem 0 0;
	font-size: .82rem;
	color: var(--ecc-wl-muted);
	line-height: 1.45;
}

@media (max-width: 600px) {
	.ecc-wl-inner {
		padding: 1.25rem;
	}

	.ecc-wl .ecc-wl-submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecc-wl * {
		transition: none !important;
		animation: none !important;
	}
}