/* ==========================================================================
   Rise With Teagan — FunnelKit opt-in form, branded

   Loaded on every FunnelKit step by rwt-funnel-bridge.php. Restyles the
   stock FunnelKit opt-in markup into the coded lead-magnet pages' inline
   pill — white pill, borderless email field, terracotta "Send recipes"
   button on the right — values verbatim from lead-magnet.css
   (.rwt-lm__optin). Expects the email-only field layout; a second field
   would stack awkwardly inside the pill by design pressure, not breakage.
   FunnelKit paints its defaults at high specificity, hence the matched
   !importants.
   ========================================================================== */

body {
	--rwt-terracotta: var( --e-global-color-primary,   #BC5F50 );
	--rwt-sienna:     var( --e-global-color-f220437,   #A14A3A );
	--rwt-espresso:   var( --e-global-color-text,      #3D322B );
	--rwt-taupe:      var( --e-global-color-c2248c7,   #887D78 );
	--rwt-tint:       var( --e-global-color-ec00e88,   #F0D5CF );
	--rwt-button:     var( --e-global-color-03edebf,   #C46A5A );
	--rwt-white:      var( --e-global-color-d3c7489,   #FFFFFF );
	--rwt-sans: var( --e-global-typography-primary-font-family, "DM Sans" ), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The pill. */
body.rwt-funnel .wffn-custom-optin-from {
	box-sizing: border-box;
	display: flex;
	gap: 0;
	max-width: 420px;
	width: 100% !important;
	background: var( --rwt-white );
	border: 1px solid var( --rwt-tint );
	border-radius: 999px;
	overflow: hidden;
	padding: 4px 4px 4px 6px;
}

/* Centre the pill when the widget's column centres its content (closing card). */
.elementor-widget-wffn-optin-form .elementor-widget-container {
	display: flex;
	justify-content: inherit;
}

/* FunnelKit's .bwfac_forms_outer wrapper shrink-wraps as a flex item, which
   collapses the form's width:100% to the pill's content width. Stretch the
   widget and the wrapper so the form's 420px max-width is what decides. */
body.rwt-funnel .elementor-widget-wffn-optin-form {
	width: 100% !important;
}

body.rwt-funnel .wffn-optin-form.bwfac_forms_outer {
	width: 100% !important;
	margin: 0 !important;
}

/* Labels: placeholders carry the meaning; keep labels for screen readers. */
body.rwt-funnel .wffn-custom-optin-from label {
	position: absolute;
	clip-path: inset( 50% );
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body.rwt-funnel .wffn-custom-optin-from .wfop_section {
	flex: 1 1 auto;
	min-width: 120px; /* the field must never collapse behind the button */
	display: block;
}

/* FunnelKit stretches the submit wrapper and button to 100%, gives every
   field section a bottom margin + 5px side padding, and pushes the submit
   wrap down 40px — stacked-form spacing that wrecks an inline pill. Its
   stylesheet outranks this one, hence the !importants on every reset. */
body.rwt-funnel .wffn-custom-optin-from .submit_button,
body.rwt-funnel .wffn-custom-optin-from .bwf-custom-button,
body.rwt-funnel #bwf-custom-button-wrap {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
}

body.rwt-funnel .wffn-custom-optin-from .bwfac_form_sec {
	margin: 0 !important;
	padding: 0 !important;
}

body.rwt-funnel .wffn-custom-optin-from .wfop_input_cont {
	margin: 0 !important;
	padding: 0 !important;
}

/* The whitespace between the submit section's hidden inputs renders as
   anonymous line boxes — 40px of phantom height above and below the button.
   Zeroing the section's text metrics erases them; the button restates its
   own font-size and line-height. */
body.rwt-funnel .wffn-custom-optin-from .submit_button {
	font-size: 0 !important;
	line-height: 0 !important;
}

/* ---------------------------------------------------------------- field */

body.rwt-funnel .wffn-custom-optin-from .wffn-optin-input {
	box-sizing: border-box;
	width: 100%;
	border: 0 !important;
	background: transparent !important;
	padding: 11px 14px !important;
	font-family: var( --rwt-sans ) !important;
	font-size: 15px !important;
	line-height: normal !important;
	min-height: 0 !important;
	height: auto !important;
	color: var( --rwt-espresso ) !important;
	border-radius: 999px !important;
}

body.rwt-funnel .wffn-custom-optin-from .wffn-optin-input::placeholder {
	color: var( --rwt-taupe ) !important;
	opacity: 1;
}

body.rwt-funnel .wffn-custom-optin-from .wffn-optin-input:focus {
	outline: 2px solid var( --rwt-terracotta );
	outline-offset: -2px;
}

/* ---------------------------------------------------------------- button */

body.rwt-funnel .wffn-custom-optin-from .submit_button {
	flex: 0 0 auto;
}

body.rwt-funnel .wffn-custom-optin-from .bwf-custom-button {
	height: 100%;
}

body.rwt-funnel .wffn-custom-optin-from .wfop_submit_btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	height: 100% !important;
	width: auto !important;
	padding: 11px 22px !important;
	font-family: var( --rwt-sans ) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	color: var( --rwt-white ) !important;
	background: var( --rwt-button ) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

body.rwt-funnel .wffn-custom-optin-from .wfop_submit_btn:hover,
body.rwt-funnel .wffn-custom-optin-from .wfop_submit_btn:focus {
	background: var( --rwt-sienna ) !important;
}

body.rwt-funnel .wffn-custom-optin-from .wfop_submit_btn .bwf_heading {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Validation state FunnelKit injects. */
body.rwt-funnel .wffn-custom-optin-from .wffn-optin-input.wffn-error {
	outline: 2px solid rgba( 188, 95, 80, 0.6 );
	outline-offset: -2px;
}

@media ( prefers-reduced-motion: reduce ) {
	body.rwt-funnel .wffn-custom-optin-from .wfop_submit_btn {
		transition: none;
	}
}