/*
 * Forms engine look (includes/forms/engine.php).
 *
 * The house form style from assets/css/tm-forms.css (copied from the App Demo
 * form Kirk picked on 2026-09-14), minus the !important wall that file needs
 * to beat Elementor's per-widget CSS. The submit button follows the brand
 * guide instead: 54px, 8px corners, colour change on hover, no lift.
 *
 * Scoped under .tmf at 0,2,0 or more, which also beats the Elementor kit's
 * `.elementor-kit-2473 button|input` (0,1,1) while Elementor is installed.
 */

.tmf {
	--tmf-navy: #283071;
	--tmf-orange: #F57B20;
	--tmf-orange-dark: #C85A0E;
	--tmf-ink: #333333;
	--tmf-border: #EEEEEE;
	--tmf-field: #F7F7F7;
	--tmf-muted: #888888;
	--tmf-error: #E02B4B;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
}
.tmf .tmf-trap { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tmf .tmf-field { display: flex; flex-direction: column; margin: 0; }
.tmf .tmf-label { display: block; margin: 0 0 6px; padding: 0; color: var(--tmf-navy); font-size: 14px; font-weight: 500; line-height: 1.4; }
.tmf .tmf-req { color: var(--tmf-error); margin-left: 3px; }

.tmf .tmf-field input[type="text"],
.tmf .tmf-field input[type="email"],
.tmf .tmf-field input[type="tel"],
.tmf .tmf-field input[type="url"],
.tmf .tmf-field input[type="date"],
.tmf .tmf-field select,
.tmf .tmf-field textarea {
	width: 100%;
	margin: 0;
	padding: 13px 16px;
	background: var(--tmf-field);
	border: 1px solid var(--tmf-border);
	border-radius: 10px;
	box-shadow: none;
	color: var(--tmf-ink);
	font: 400 15px/1.45 Poppins, system-ui, -apple-system, sans-serif;
	letter-spacing: normal;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tmf .tmf-field textarea { min-height: 120px; resize: vertical; }
.tmf .tmf-field input::placeholder,
.tmf .tmf-field textarea::placeholder { color: #AAAAAA; opacity: 1; }
.tmf .tmf-field input:focus,
.tmf .tmf-field select:focus,
.tmf .tmf-field textarea:focus {
	background: #FFFFFF;
	border-color: var(--tmf-orange);
	box-shadow: 0 0 0 3px rgba(245, 123, 32, .18);
	outline: none;
}
.tmf .tmf-field [aria-invalid="true"] { border-color: var(--tmf-error); background: #FFFFFF; }
.tmf .tmf-error { margin: 6px 0 0; color: var(--tmf-error); font-size: 13px; line-height: 1.4; }

/* Checkbox: drawn, 20px, 5px corners, solid orange with a white tick when on. */
.tmf .tmf-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--tmf-ink); font-size: 14px; font-weight: 400; line-height: 1.625; cursor: pointer; }
.tmf .tmf-check input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	padding: 0;
	background: #FFFFFF;
	border: 2px solid #D8D8D8;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}
.tmf .tmf-check input[type="checkbox"]:checked {
	background: var(--tmf-orange) 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") no-repeat center / 12px 12px;
	border-color: var(--tmf-orange);
}
.tmf .tmf-check input[type="checkbox"]:focus-visible { outline: 3px solid rgba(245, 123, 32, .35); outline-offset: 2px; }

/* Submit: the brand button. */
.tmf .tmf-actions { display: flex; justify-content: center; margin-top: 4px; }
.tmf button.tmf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin: 0;
	padding: 12px 32px;
	border: 0;
	border-radius: 8px;
	background: var(--tmf-orange);
	color: #FFFFFF;
	font: 700 16px/1.2 Poppins, system-ui, -apple-system, sans-serif;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: 0 10px 24px -8px rgba(245, 123, 32, .5);
	cursor: pointer;
	transition: background-color .15s ease;
}
.tmf button.tmf-submit:hover,
.tmf button.tmf-submit:focus-visible { background: var(--tmf-orange-dark); color: #FFFFFF; }
.tmf button.tmf-submit:focus-visible { outline: 3px solid var(--tmf-navy); outline-offset: 2px; }
.tmf button.tmf-submit:disabled { opacity: .7; cursor: progress; }

.tmf .tmf-status { margin: 0; font-size: 14px; line-height: 1.5; text-align: center; }
.tmf .tmf-status:empty { display: none; }
.tmf .tmf-status.is-bad { color: var(--tmf-error); }
.tmf .tmf-status.is-ok { color: #1E7B4A; }
.tmf .tmf-legal { margin: 0; color: var(--tmf-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.tmf .tmf-legal a { color: inherit; font-size: inherit; text-decoration: underline; }

/* Replaces the form once it is sent. */
.tmf-done { padding: 28px 24px; border-radius: 12px; background: #ECF0FB; text-align: center; font-family: Poppins, system-ui, -apple-system, sans-serif; outline: none; }
.tmf-done p { margin: 0; color: #3F4150; font-size: 16px; line-height: 1.6; }
.tmf-done .tmf-done__title { margin: 0 0 6px; color: #283071; font-size: 20px; font-weight: 700; }

@media (max-width: 767px) {
	.tmf button.tmf-submit { width: 100%; }
}

/* Pop-up window (tm_forms_modal_html): a native <dialog>. */
html.tmf-locked, html.tmf-locked body { overflow: hidden; }
dialog.tmf-modal {
	width: min(520px, calc(100% - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px rgba(20, 24, 60, .28);
	overflow: auto;
}
dialog.tmf-modal::backdrop { background: rgba(10, 12, 30, .62); }
dialog.tmf-modal[open] { animation: tmf-in .2s ease-out; }
@keyframes tmf-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.tmf-modal[open] { animation: none; } }
dialog.tmf-modal .tmf-modal__box { position: relative; padding: 34px 30px 26px; }
dialog.tmf-modal .tmf-modal__close {
	position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #283071; cursor: pointer;
}
dialog.tmf-modal .tmf-modal__close:hover, dialog.tmf-modal .tmf-modal__close:focus-visible { background: #ECF0FB; color: #F57B20; }
dialog.tmf-modal .tmf-modal__title { margin: 0 40px 6px 0; color: #283071; font: 700 26px/1.2 Poppins, system-ui, sans-serif; letter-spacing: -.3px; text-transform: none; }
dialog.tmf-modal .tmf-modal__context { margin: 0 0 18px; color: #F57B20; font: 600 15px/1.4 Poppins, system-ui, sans-serif; }
dialog.tmf-modal .tmf-modal__context[hidden] { display: none; }
@media (max-width: 767px) {
	dialog.tmf-modal .tmf-modal__box { padding: 28px 20px 20px; }
	dialog.tmf-modal .tmf-modal__title { font-size: 22px; }
}

/* Dropdowns: the field look plus a drawn arrow. */
.tmf .tmf-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283071' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px 16px;
	cursor: pointer;
}

/* A list of choices (checkboxes): two columns on wide screens. */
.tmf .tmf-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.tmf .tmf-choices legend { padding: 0; }
.tmf .tmf-choices .tmf-check { margin: 0 0 10px; }
@media (min-width: 768px) {
	.tmf .tmf-choices__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}

/* Questions that only show for one answer. */
.tmf .tmf-field[hidden] { display: none; }

/* Stepped forms. Without JavaScript every step shows and the nav stays hidden. */
.tmf .tmf-step { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tmf .tmf-step[hidden] { display: none; }
.tmf .tmf-step__title { padding: 0; margin: 0 0 2px; color: #283071; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.tmf .tmf-progress { display: none; }
.tmf.is-stepped .tmf-progress { display: block; }
.tmf .tmf-progress__bar { height: 6px; border-radius: 99px; background: #ECF0FB; overflow: hidden; }
.tmf .tmf-progress__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--tmf-orange); transition: width .25s ease; }
.tmf .tmf-progress__text { margin: 8px 0 0; color: var(--tmf-muted); font-size: 13px; line-height: 1.4; }
.tmf.is-stepped .tmf-step__title { display: none; }
.tmf .tmf-actions { gap: 12px; flex-wrap: wrap; }
.tmf button.tmf-next,
.tmf button.tmf-back {
	display: inline-flex; align-items: center; justify-content: center; min-height: 54px; margin: 0; padding: 12px 28px;
	border: 0; border-radius: 8px; font: 700 16px/1.2 Poppins, system-ui, -apple-system, sans-serif; letter-spacing: normal; text-transform: none; cursor: pointer;
	transition: background-color .15s ease;
}
.tmf button.tmf-next { background: var(--tmf-navy); color: #FFFFFF; }
.tmf button.tmf-next:hover, .tmf button.tmf-next:focus-visible { background: #1B2150; color: #FFFFFF; }
.tmf button.tmf-back { background: #F0F0F0; color: #555555; font-weight: 600; }
.tmf button.tmf-back:hover, .tmf button.tmf-back:focus-visible { background: #E4E4E4; color: #333333; }
.tmf .tmf-actions button[hidden] { display: none; }