/*
 * MT Forms base styles. Deliberately light so the theme's fonts and colors show through.
 * Override anything with the per-form Custom CSS (scoped by .mtf-form-{id}) or the global CSS in Forms → Settings.
 */
.mtf-form-wrap {
	--mtf-gap: 1.25rem;
	--mtf-border: #c3c4c7;
	--mtf-radius: 4px;
	--mtf-focus: #2271b1;
	--mtf-error: #b32d2e;
	--mtf-success-bg: #edfaef;
	--mtf-success-border: #00a32a;
	--mtf-button-bg: #2271b1;
	--mtf-button-color: #fff;
	max-width: 100%;
}

.mtf-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mtf-gap);
	margin-bottom: var(--mtf-gap);
}

.mtf-field, .mtf-fields > .mtf-actions { flex: 0 0 100%; min-width: 0; }
.mtf-fields > .mtf-actions { align-self: flex-end; } /* lines up with the inputs when placed beside a field */
.mtf-align-center { text-align: center; }
.mtf-align-right { text-align: right; }
.mtf-align-stretch .mtf-submit { width: 100%; }
/* .mtf-fields > … keeps these stronger than the base rule above, for fields and the button alike. */
.mtf-fields > .mtf-width-half { flex-basis: calc(50% - var(--mtf-gap) / 2); }
.mtf-fields > .mtf-width-third { flex-basis: calc(33.333% - var(--mtf-gap) * 2 / 3); }
.mtf-fields > .mtf-width-two-thirds { flex-basis: calc(66.666% - var(--mtf-gap) / 3); }
@media (max-width: 600px) {
	.mtf-fields > .mtf-width-half, .mtf-fields > .mtf-width-third, .mtf-fields > .mtf-width-two-thirds { flex-basis: 100%; }
}

.mtf-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.mtf-required { color: var(--mtf-error); }
.mtf-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.mtf-group legend { padding: 0; }

.mtf-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--mtf-border);
	border-radius: var(--mtf-radius);
	font: inherit;
	background: #fff;
	color: inherit;
}
textarea.mtf-input { resize: vertical; min-height: 6rem; }
.mtf-input:focus { outline: 2px solid var(--mtf-focus); outline-offset: 1px; border-color: var(--mtf-focus); }
.mtf-file { padding: 0.4rem; background: transparent; }

.mtf-choice { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.25rem 0; cursor: pointer; }
.mtf-choice input { margin-top: 0.3em; }

.mtf-description, .mtf-file-hint { font-size: 0.875em; opacity: 0.8; margin: 0.35rem 0 0; }
.mtf-field--divider hr { border: 0; border-top: 1px solid var(--mtf-border); margin: 0.5rem 0; }

.mtf-has-error .mtf-input, .mtf-has-error .mtf-group { border-color: var(--mtf-error); }
.mtf-error { color: var(--mtf-error); font-size: 0.875em; margin-top: 0.35rem; }
.mtf-form-error {
	color: var(--mtf-error);
	border-left: 4px solid var(--mtf-error);
	background: #fcf0f1;
	padding: 0.6rem 0.9rem;
	margin-bottom: var(--mtf-gap);
}
.mtf-success {
	border-left: 4px solid var(--mtf-success-border);
	background: var(--mtf-success-bg);
	padding: 0.75rem 1rem;
	margin-bottom: var(--mtf-gap);
}
.mtf-success > :first-child { margin-top: 0; }
.mtf-success > :last-child { margin-bottom: 0; }

.mtf-submit {
	background: var(--mtf-button-bg);
	color: var(--mtf-button-color);
	border: 0;
	border-radius: var(--mtf-radius);
	padding: 0.7rem 1.6rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.mtf-submit:disabled { opacity: 0.65; cursor: progress; }

.mtf-labels-hidden .mtf-label,
.mtf-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Honeypot: off-screen for people, still "visible" to naive bots. */
.mtf-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mtf-form-wrap [hidden], .mtf-field--hidden { display: none !important; }