/*
 * TM house form styling — one look for every Elementor form on the site.
 *
 * THE REFERENCE IS THE APP DEMO FORM, not any Elementor form. Kirk picked it
 * on 2026-09-14 ("visually I like the app form under the app look the best").
 * That form is React, styled in app-mockup-engine/src/AppMockupEngine.jsx, so
 * the values below are copied from its PB palette and `input` / `pill` style
 * objects rather than invented here. If that component's look changes, this
 * file is what has to follow it.
 *
 *   navy    #283071   labels
 *   orange  #F57B20   button, focus ring, accents
 *   ink     #333333   typed text
 *   border  #eeeeee   field border
 *   field   #f7f7f7   field background, white on focus
 *   muted   #888888   placeholder and helper text
 *   error   #E02B4B   required marker and validation text
 *
 * ---------------------------------------------------------------------------
 * WHY SO MANY !important, WHEN tm-notices.css DELIBERATELY AVOIDED THEM
 *
 * Different problem. In tm-notices.css the competing rule was a WooCommerce
 * stylesheet at 0-2-0, so matching specificity was enough and honest.
 *
 * Here the competition is Elementor's PER-WIDGET css, which it generates as:
 *
 *   .elementor-1330 .elementor-element.elementor-element-60b88d6
 *       .elementor-field-group .elementor-field { ... }
 *
 * That is five classes — 0-5-0 — and the page id and element id in it are
 * different for every form on the site. There is no selector that beats all of
 * them that is not either absurd or a lie about what it targets, and adding
 * more chained classes to try would produce something nobody could safely edit
 * later.
 *
 * So: !important, confined to the handful of properties that actually define
 * the look, in one file, with this note. Anything not listed here still falls
 * through to Elementor normally.
 *
 * THE PROPER FIX, if this ever becomes painful: delete the per-widget Style
 * settings from each form widget in Elementor, at which point the generated
 * CSS above stops existing and every !important below can go. That is a manual
 * pass over ~5 widgets and it is safe to do incrementally — remove a widget's
 * settings and nothing changes visually, because this file already provides
 * the same look.
 *
 * ---------------------------------------------------------------------------
 * WHY EVERY SELECTOR EXCLUDES .tm-pb5
 *
 * The plan builder is an Elementor form too, and this file nearly broke it.
 *
 * Its question rows are real Elementor checkboxes, drawn by tm-plan-optin.css
 * as grey circles sitting at the right-hand end of a full-width row. The
 * checkbox rules below would have turned every one of them into a 20px orange
 * square - and because this file loads at wp_head 101 and the plan builder's
 * loads at 8, this file would have won. Caught by opening the live page, not
 * by reading either stylesheet.
 *
 * .tm-pb5 sits on the form widget itself, so :not(.tm-pb5) is enough to keep
 * the two apart. The plan builder keeps its bespoke look, which was already
 * modelled on the same reference, and owns it in tm-plan-account.css and
 * tm-plan-optin.css.
 *
 * ---------------------------------------------------------------------------
 * LOADED AT wp_head 101 by assets/custom-css.php, the Customizer CSS slot, so
 * it also sits after Elementor's enqueued stylesheets in source order.
 */

.elementor-widget-form:not(.tm-pb5) .elementor-form {
	--tm-form-navy: #283071;
	--tm-form-orange: #F57B20;
	--tm-form-orange-dark: #D9670F;
	--tm-form-ink: #333333;
	--tm-form-border: #EEEEEE;
	/*
	 * Fields sit on the same pale grey the option rows use (PB.rowBg), not
	 * white. White was my reading of the React `input` style object; Kirk's
	 * reference screenshots and the original plan-builder CSS both had grey,
	 * and grey is what separates a field from the white card behind it.
	 * Focus lifts it to white - that change of state is the point.
	 */
	--tm-form-field-bg: #F7F7F7;
	--tm-form-muted: #888888;
	--tm-form-error: #E02B4B;
	--tm-form-radius: 10px;
}

/* ---------- labels ---------- */

.elementor-widget-form:not(.tm-pb5) .elementor-field-group > label.elementor-field-label {
	color: var(--tm-form-navy) !important;
	font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	padding-bottom: 6px !important;
}

/* Elementor marks required fields by appending * to the label text. */
.elementor-widget-form:not(.tm-pb5) .elementor-field-required .elementor-field-label:after {
	color: var(--tm-form-error) !important;
}

/* ---------- text inputs, textareas, selects ---------- */

.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual {
	background-color: var(--tm-form-field-bg) !important;
	border: 1px solid var(--tm-form-border) !important;
	border-radius: var(--tm-form-radius) !important;
	padding: 13px 16px !important;
	font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--tm-form-ink) !important;
	box-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual::placeholder {
	color: #AAAAAA !important;
	opacity: 1;
}

/*
 * Focus is the one place this adds something the React form does not have.
 * That form relies on the browser default outline, which Elementor removes.
 * Leaving it removed would fail 2.4.7 Focus Visible, so the orange ring below
 * is the accessible equivalent of the same design.
 */
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual:focus {
	background-color: #FFFFFF !important;
	border-color: var(--tm-form-orange) !important;
	box-shadow: 0 0 0 3px rgba(245, 123, 32, .18) !important;
	outline: none !important;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-group textarea.elementor-field-textual {
	min-height: 120px;
	resize: vertical;
}

/* ---------- checkboxes and radios ---------- */

/*
 * Drawn, not tinted. `accent-color` was the first attempt and it is not the
 * same control: it keeps the browser's own size and corner radius, so it read
 * as a default checkbox that happened to be orange. The reference is a 20px
 * box with a 5px radius and a 2px border that turns solid orange when ticked,
 * so it has to be built.
 *
 * The tick is a background-image rather than a pseudo-element because an
 * <input> cannot carry ::before or ::after in every browser.
 */
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup label {
	color: var(--tm-form-ink) !important;
	font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.625 !important;
	margin: 0 !important;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"],
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px !important;
	height: 20px !important;
	margin: 2px 0 0 0 !important;
	flex: 0 0 auto;
	background-color: #FFFFFF;
	border: 2px solid #D8D8D8;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"] {
	border-radius: 50%;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"]:checked,
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"]:checked {
	background-color: var(--tm-form-orange);
	border-color: var(--tm-form-orange);
}

/* White tick, 4px stroke, to match the lucide <Check> the reference uses. */
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"]:checked {
	background-image: radial-gradient(circle, #FFFFFF 0 3px, transparent 3px);
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"]:focus-visible,
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"]:focus-visible {
	outline: 3px solid rgba(245, 123, 32, .35);
	outline-offset: 2px;
}

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

.elementor-widget-form:not(.tm-pb5) .elementor-form .elementor-button[type="submit"],
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"] {
	background-color: var(--tm-form-orange) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 15px 40px !important;
	font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	box-shadow: 0 6px 16px rgba(245, 123, 32, .32) !important;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.elementor-widget-form:not(.tm-pb5) .elementor-form .elementor-button[type="submit"]:hover,
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"]:hover {
	background-color: var(--tm-form-orange-dark) !important;
	box-shadow: 0 8px 20px rgba(245, 123, 32, .38) !important;
	transform: translateY(-1px);
}

.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"]:focus-visible {
	outline: 3px solid var(--tm-form-navy) !important;
	outline-offset: 2px;
}

/*
 * Respect a reduced-motion preference: the lift on hover is decoration, and
 * the colour change already carries the same information.
 */
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"],
	.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"]:hover {
		transition: none;
		transform: none;
	}
}

/* ---------- multi-step navigation (the plan builder) ---------- */

/*
 * A multi-step Elementor form renders Previous and Next as .elementor-button
 * without type="submit", so the rules above do not reach them. The reference
 * pairs a quiet grey pill with the orange one, which is what stops a two-button
 * row reading as two equal choices.
 */
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-previous,
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next {
	border-radius: 50px !important;
	font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
	line-height: 1 !important;
	border: none !important;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-previous {
	background-color: #F0F0F0 !important;
	color: #666666 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	padding: 13px 26px !important;
	box-shadow: none !important;
}

.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-previous:hover {
	background-color: #E6E6E6 !important;
}

/* Next carries the same weight as a final submit - it is the forward action. */
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next {
	background-color: var(--tm-form-orange) !important;
	color: #FFFFFF !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding: 15px 40px !important;
	box-shadow: 0 6px 16px rgba(245, 123, 32, .32) !important;
}

.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next:hover {
	background-color: var(--tm-form-orange-dark) !important;
	box-shadow: 0 8px 20px rgba(245, 123, 32, .38) !important;
	transform: translateY(-1px);
}

/* The step indicator, tinted to match rather than left on Elementor's blue. */
.elementor-widget-form:not(.tm-pb5) .elementor-progress-bar {
	background-color: var(--tm-form-orange) !important;
}

.elementor-widget-form:not(.tm-pb5) .elementor-progress-wrapper {
	background-color: #F0F0F0 !important;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next,
	.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next:hover {
		transition: none;
		transform: none;
	}
}

/* ---------- validation text ---------- */

.elementor-widget-form:not(.tm-pb5) .elementor-message.elementor-message-danger,
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-error .elementor-error-message {
	color: var(--tm-form-error) !important;
	font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual.elementor-error {
	border-color: var(--tm-form-error) !important;
}

/*
 * The success card. Popup 1330 already had a hand-written version of this in
 * its own widget CSS; this is the same design promoted to every form so the
 * other four stop showing Elementor's bare green line.
 *
 * The ::before override exists because Elementor Pro paints its own tick as a
 * background-image on .elementor-message-svg:before — without killing that,
 * the glyph below stacks on top of it and you get two ticks.
 */
.elementor-widget-form:not(.tm-pb5) .elementor-message-success {
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	padding: 30px;
	border-radius: 14px;
	text-align: center;
	box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
	font-family: "Poppins", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #1F2937;
	margin-top: 25px;
}

.elementor-widget-form:not(.tm-pb5) .elementor-message-success::before {
	content: "\2713" !important;
	background: none !important;
	background-image: none !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	display: block !important;
	float: none !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	text-align: center !important;
	font-size: 36px;
	line-height: 1;
	color: #4CAF50;
	margin: 0 0 12px !important;
}

.elementor-widget-form:not(.tm-pb5) .elementor-message-success::after {
	content: none !important;
	display: none !important;
}

/* ---------- fields that are never meant to be seen ---------- */

/*
 * reCAPTCHA v3 and the honeypot render as empty field groups and leave a gap
 * above the button. Three form widgets each carried their own copy of this
 * rule in per-widget CSS; it belongs once, here, so a new form gets it free.
 */
.elementor-widget-form:not(.tm-pb5) .elementor-field-type-recaptcha_v3,
.elementor-widget-form:not(.tm-pb5) .elementor-field-type-honeypot {
	display: none !important;
}

/* ---------- the app demo's hidden bridge form ---------- */

/*
 * The App Blueprint form on /app-mockup/ is a BRIDGE, not something to fill in.
 * The React demo collects the answers, writes them into this form's fields and
 * submits it, so Elementor still does the sending, the reCAPTCHA, the honeypot
 * and the database record. It must never be visible.
 *
 * It used to be hidden by page-level CSS keyed to ELEMENT IDS:
 *
 *   .elementor-element-6825ba3, .elementor-element-ce777da { ... }
 *
 * Two problems with that. Element ids change when a widget is deleted and
 * re-added, so the rule would silently stop matching and a full contact form
 * would appear in the middle of the demo page with no error. And an id in a
 * stylesheet is invisible from the Elementor editor - nothing tells you the
 * widget is load-bearing. (6825ba3 does not even render any more; only the form
 * was actually being hidden.)
 *
 * The widget now carries the class `tm-blueprint-bridge`, which IS visible in
 * Elementor under Advanced > CSS Classes, and this rule targets that.
 *
 * Properties are copied exactly from the rule they replace. It is the standard
 * visually-hidden pattern rather than display:none on purpose: a display:none
 * form still submits, but some browsers skip validation and focus handling on
 * fully removed fields, and this has always worked.
 *
 * If you re-create that widget, put the class back.
 */
.elementor-widget-form.tm-blueprint-bridge {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}