/* AF Free Lesson
 * Deliberately minimal. This inherits your theme's fonts and sits inside
 * an Elementor column, so it should not fight whatever you style around it.
 */

.affl-wrap {
	max-width: 460px;
	width: 100%;
}

.affl-form {
	margin: 0;
}

.affl-row {
	margin: 0 0 14px;
}

.affl-label {
	display: block;
	font-size: 0.88em;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0 0 6px;
	opacity: 0.85;
}

.affl-input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 15px;
	font-size: 16px; /* Anything under 16px makes iOS zoom on focus. */
	line-height: 1.3;
	border: 1px solid rgba( 0, 0, 0, 0.22 );
	border-radius: 6px;
	background: #fff;
	/* Never inherit. The field background is white, so inheriting a light
	   section's text colour meant people typed white on white. */
	color: #16181d;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.affl-input::placeholder {
	color: #8a8f98;
	opacity: 1;
}

.affl-input:focus {
	outline: none;
	border-color: var( --affl-accent, #1c6ea4 );
	box-shadow: 0 0 0 3px rgba( 28, 110, 164, 0.18 );
}

.affl-consent {
	font-size: 0.78em;
	line-height: 1.5;
	opacity: 0.75;
	margin: 12px 0 14px;
}

.affl-button {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 22px;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var( --affl-accent, #1c6ea4 );
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.affl-button:hover,
.affl-button:focus {
	filter: brightness( 1.08 );
	color: #fff;
}

.affl-button:active {
	transform: translateY( 1px );
}

.affl-button[disabled],
.affl-button.is-busy {
	opacity: 0.65;
	cursor: default;
}

.affl-micro {
	font-size: 0.8em;
	line-height: 1.5;
	opacity: 0.7;
	margin: 12px 0 0;
}

.affl-error {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 0.88em;
	border-radius: 5px;
	background: #fdecec;
	color: #9b1c1c;
}

.affl-error-admin {
	padding: 12px;
	border: 1px dashed #b91c1c;
	color: #b91c1c;
}

/* Honeypot. Kept out of sight without display:none, which some bots check. */
.affl-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   Themes.

   With no theme set, the labels and small print inherit the section's text
   colour. That is fine when the form only ever appears on one background, and
   it breaks the moment the same form sits on a dark hero and a pale call to
   action block, which is exactly what happened.

   Set theme="light" on pale sections and theme="dark" on dark ones.
   --------------------------------------------------------------------------- */

.affl-theme-light .affl-label,
.affl-theme-light .affl-consent,
.affl-theme-light .affl-micro {
	color: #16181d;
}

.affl-theme-light .affl-label {
	opacity: 0.92;
}

.affl-theme-light .affl-consent,
.affl-theme-light .affl-micro {
	opacity: 0.72;
}

.affl-theme-dark .affl-label,
.affl-theme-dark .affl-consent,
.affl-theme-dark .affl-micro {
	color: #ffffff;
}

.affl-theme-dark .affl-label {
	opacity: 0.95;
}

.affl-theme-dark .affl-consent,
.affl-theme-dark .affl-micro {
	opacity: 0.78;
}

.affl-theme-dark .affl-input {
	border-color: rgba( 255, 255, 255, 0.35 );
}

/* Add the CSS class "affl-center" to the Elementor shortcode widget to centre
   the form inside its column. Used by the final call to action block. */
.affl-center .affl-wrap,
.affl-center .affl-download-wrap {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.affl-center .affl-label,
.affl-center .affl-consent,
.affl-center .affl-micro {
	text-align: left;
}

.affl-download-wrap {
	margin: 0;
}

.affl-download {
	width: auto;
	padding-left: 34px;
	padding-right: 34px;
}

@media ( max-width: 767px ) {
	.affl-wrap {
		max-width: 100%;
	}
}