/* Rise With Teagan — [rwt_optin]
   ------------------------------------------------------------------
   The opt-in field on its own, for CTA bands and the footer. The landing page
   carries the same control, but its styles live in lead-magnet.css and only
   load on the magnet itself — this sheet is what makes the shortcode work
   everywhere else.

   Scoped to the form itself, with no wrapper: the shortcode outputs the field
   and nothing more, because everything around it is an Elementor widget.
   No margins and no width cap here for the same reason — spacing belongs to
   whatever container the page puts this in. Figma 1437-2720.

   Kit globals live on body.elementor-kit-8, NOT :root.                      */

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-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" ), sans-serif;
}

form.rwt-lm__optin {
	display: flex;
	gap: 0;
	width: 100%;
	background: var( --rwt-white );
	border: 1px solid var( --rwt-tint );
	border-radius: 999px;
	overflow: hidden;
	padding: 4px 4px 4px 6px;
	margin: 0;
}

/* Elementor's kit styles inputs at (0,1,1), so the class prefix is what makes
   these land — a bare `input` selector loses. */
form.rwt-lm__optin input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 11px 14px;
	font-family: var( --rwt-sans );
	font-size: 15px;
	line-height: 1.3;
	color: var( --rwt-espresso );
	box-shadow: none;
}

form.rwt-lm__optin input[type="email"]:focus {
	outline: 2px solid var( --rwt-terracotta );
	outline-offset: -2px;
	border-radius: 999px;
	box-shadow: none;
}

form.rwt-lm__optin button {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	background: var( --rwt-button );
	color: var( --rwt-white );
	font-family: var( --rwt-sans );
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	padding: 11px 22px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

form.rwt-lm__optin button:hover,
form.rwt-lm__optin button:focus-visible {
	background: var( --rwt-sienna );
}

/* Only ever shown when a submission actually failed — otherwise nothing is
   emitted at all. Kept because the alternative is a button that silently does
   nothing when GoHighLevel is unreachable or the page was cached. */
.rwt-lm__formerror {
	margin: 10px 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var( --rwt-sienna );
	font-weight: 500;
}

/* --------------------------------------------------------- on dark

   The footer band is terracotta, where the standard button would be terracotta
   on terracotta and effectively invisible. */

form.rwt-lm__optin--on-dark {
	border-color: transparent;
}

form.rwt-lm__optin--on-dark button {
	background: var( --rwt-espresso );
}

form.rwt-lm__optin--on-dark button:hover,
form.rwt-lm__optin--on-dark button:focus-visible {
	background: #2A211C;
}