/* Form Generator - front end (mgtags/mgform.cfm)

   Self-contained and scoped to .mgform, so it reads the same on every theme whatever
   Bootstrap version the theme carries. Each form sets its own colours through the
   custom properties on its wrapper; everything else inherits the site's font. */

.mgform {
	--mgf-accent: #015c6e;
	--mgf-btn-text: #ffffff;
	--mgf-radius: 8px;
	--mgf-bg: transparent;
	--mgf-border: #d0d5dd;
	--mgf-control-bg: #ffffff;
	--mgf-control-text: #1d2939;
	--mgf-placeholder: #98a2b3;
	--mgf-error: #d92d20;
	--mgf-star: #fdb022;
	box-sizing: border-box;
	margin: 1.5rem 0;
	text-align: left;
}
.mgform *,
.mgform *::before,
.mgform *::after {
	box-sizing: border-box;
}
.mgform [hidden] {
	display: none !important;
}
/* The form as a panel. A background, a border and a shadow are each optional and combine freely;
   any one of them adds the room inside the edge (mgform--boxed) */
.mgform--boxed {
	padding: 28px;
	border-radius: calc(var(--mgf-radius) * 1.5);
}
@media (max-width: 600px) {
	.mgform--boxed {
		padding: 20px;
	}
}
.mgform--card {
	background: var(--mgf-bg);
}
.mgform--framed {
	border: var(--mgf-frame);
}
.mgform--shadow-soft {
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .08);
}
.mgform--shadow-medium {
	box-shadow: 0 2px 6px rgba(16, 24, 40, .08), 0 14px 36px rgba(16, 24, 40, .14);
}
.mgform--shadow-strong {
	box-shadow: 0 6px 14px rgba(16, 24, 40, .12), 0 24px 56px rgba(16, 24, 40, .22);
}
/* Where the form sits when it is narrower than the page */
.mgform--align-center {
	margin-left: auto;
	margin-right: auto;
}
.mgform--align-right {
	margin-left: auto;
	margin-right: 0;
}
.mgform__preview-note {
	margin: 0 0 16px;
	padding: 8px 12px;
	border-radius: 6px;
	background: #fffaeb;
	border: 1px solid #fedf89;
	color: #93370d;
	font-size: .875rem;
}

/* Header */
.mgform .mgform__title {
	margin: 0 0 6px;
	font-size: 1.5rem;
	line-height: 1.25;
}
.mgform .mgform__title--sm { font-size: 1.2rem; }
.mgform .mgform__title--lg { font-size: 1.9rem; }
.mgform .mgform__title--xl { font-size: 2.4rem; }
.mgform--title-color .mgform__title {
	color: var(--mgf-title-color);
}
.mgform__header--center { text-align: center; }
.mgform__header--right { text-align: right; }
.mgform__intro {
	margin: 0 0 22px;
	opacity: .85;
}
.mgform__header {
	margin-bottom: 22px;
}
.mgform__header .mgform__intro {
	margin: 0;
}
.mgform__intro--sm { font-size: .9rem; }
.mgform__intro--lg { font-size: 1.15rem; }
/* A chosen colour is shown as chosen, not faded like the default */
.mgform--intro-color .mgform__intro {
	color: var(--mgf-intro-color);
	opacity: 1;
}

/* Layout - six tracks, so halves and thirds share one grid */
.mgform__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px 16px;
}
.mgform__field {
	grid-column: span 6;
	min-width: 0;
}
.mgform__field--half {
	grid-column: span 3;
}
.mgform__field--third {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.mgform__field--half,
	.mgform__field--third {
		grid-column: span 6;
	}
}

/* Labels and help */
.mgform .mgform__label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	border: 0;
}
.mgform__req {
	color: var(--mgf-error);
	margin-left: 3px;
}
.mgform__help {
	margin-top: 6px;
	font-size: .85rem;
	opacity: .75;
}
.mgform__help p:last-child,
.mgform__intro p:last-child,
.mgform__section-text p:last-child {
	margin-bottom: 0;
}
.mgform__error {
	display: none;
	margin-top: 6px;
	font-size: .85rem;
	font-weight: 500;
	color: var(--mgf-error);
}
.mgform__field.has-error .mgform__error {
	display: block;
}

/* Text controls */
.mgform .mgform__control {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 11px 14px;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--mgf-control-text);
	background-color: var(--mgf-control-bg);
	border: 1px solid var(--mgf-border);
	border-radius: var(--mgf-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.mgform .mgform__control::placeholder {
	color: var(--mgf-placeholder);
	opacity: 1;
}
.mgform textarea.mgform__control {
	min-height: 0;
	resize: vertical;
}
.mgform .mgform__control:focus {
	outline: none;
	border-color: var(--mgf-accent);
	box-shadow: 0 0 0 4px rgba(16, 24, 40, .08);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mgf-accent) 22%, transparent);
}
.mgform .mgform__select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	cursor: pointer;
}
.mgform .mgform__control[type="date"],
.mgform .mgform__control[type="time"] {
	cursor: text;
}
.mgform .mgform__field.has-error .mgform__control,
.mgform .mgform__field.has-error .mgform__file-label {
	border-color: var(--mgf-error);
}
.mgform .mgform__field.has-error .mgform__control:focus {
	box-shadow: 0 0 0 4px rgba(217, 45, 32, .15);
}

/* Style: outlined */
.mgform--outlined .mgform__control {
	border-width: 2px;
	box-shadow: none;
}
/* Style: filled */
.mgform--filled .mgform__control {
	background-color: #f2f4f7;
	border-color: transparent;
	border-bottom: 2px solid var(--mgf-border);
	border-radius: var(--mgf-radius) var(--mgf-radius) 0 0;
	box-shadow: none;
}
.mgform--filled .mgform__control:focus {
	background-color: #ffffff;
	border-color: transparent;
	border-bottom-color: var(--mgf-accent);
	box-shadow: none;
}
/* Style: minimal */
.mgform--minimal .mgform__control {
	padding-left: 0;
	color: inherit;
	background-color: transparent;
	border-width: 0 0 1px;
	border-radius: 0;
	box-shadow: none;
}
.mgform--minimal .mgform__select {
	background-position: right 2px center;
}
.mgform--minimal .mgform__control:focus {
	box-shadow: 0 1px 0 0 var(--mgf-accent);
}

/* Floating labels - the same idea as the subscription forms (floatinglabels.cfm): the
   label sits inside the empty box and rises once the box has focus or an answer.
   :placeholder-shown is what reports an empty box, so every floating field has a
   placeholder, kept invisible until the label has moved out of its way. Dropdowns,
   dates and times always show something, so their labels start raised. */
.mgform__float {
	position: relative;
}
.mgform--float .mgform__float .mgform__control {
	min-height: 58px;
	padding-top: 26px;
	padding-bottom: 8px;
}
.mgform--float .mgform__float textarea.mgform__control {
	padding-top: 28px;
}
.mgform .mgform__float .mgform__label {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	max-width: 100%;
	margin: 0;
	padding: 17px 14px 0;
	overflow: hidden;
	font-weight: 500;
	font-size: 1rem;
	color: #667085;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform .15s ease, color .15s ease;
}
.mgform--outlined .mgform__float .mgform__label {
	padding-left: 15px;
}
.mgform--minimal .mgform__float .mgform__label {
	padding-left: 0;
	color: inherit;
	opacity: .65;
}
/* !important because themes set placeholder colours with it - an empty floating box shows only its label,
   and the placeholder appears underneath once the label has risen out of its way */
.mgform .mgform__float .mgform__control::placeholder {
	color: transparent !important;
	opacity: 0 !important;
	-webkit-text-fill-color: transparent !important;
}
.mgform .mgform__float .mgform__control:focus::placeholder {
	color: var(--mgf-placeholder) !important;
	opacity: 1 !important;
	-webkit-text-fill-color: var(--mgf-placeholder) !important;
}
.mgform .mgform__float .mgform__control:focus ~ .mgform__label,
.mgform .mgform__float .mgform__control:not(:placeholder-shown) ~ .mgform__label,
.mgform .mgform__float--select .mgform__label,
.mgform .mgform__float--date .mgform__label,
.mgform .mgform__float--time .mgform__label {
	transform: translateY(-9px) scale(.78);
	font-weight: 600;
}
.mgform .mgform__float .mgform__control:focus ~ .mgform__label {
	color: var(--mgf-accent);
	opacity: 1;
}
.mgform .mgform__field.has-error .mgform__float .mgform__label {
	color: var(--mgf-error);
	opacity: 1;
}
/* A long answer scrolls under a raised label - a strip of the box's own colour keeps it readable */
.mgform--float .mgform__float--textarea .mgform__label {
	right: 2px;
	left: 1px;
	top: 1px;
	padding-top: 16px;
	padding-bottom: 2px;
	background: var(--mgf-control-bg);
	border-radius: var(--mgf-radius) var(--mgf-radius) 0 0;
	transform: none;
	font-size: 1rem;
}
.mgform--float .mgform__float--textarea .mgform__control:focus ~ .mgform__label,
.mgform--float .mgform__float--textarea .mgform__control:not(:placeholder-shown) ~ .mgform__label {
	padding-top: 7px;
	font-size: .78rem;
	transform: none;
}
.mgform--filled .mgform__float--textarea .mgform__label {
	background: #f2f4f7;
}
.mgform--filled .mgform__float--textarea .mgform__control:focus ~ .mgform__label {
	background: #ffffff;
}
.mgform--minimal .mgform__float--textarea .mgform__label {
	background: transparent;
}

/* Choices */
.mgform .mgform__choices {
	min-width: 0;
}
.mgform .mgform__choices > .mgform__label {
	margin-bottom: 10px;
}
.mgform__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mgform__options--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.mgform__options--columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px 20px;
}
.mgform .mgform__choice,
.mgform .mgform__choice > span {
	font-weight: 400 !important;
	text-transform: none;
	letter-spacing: normal;
}
.mgform .mgform__choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	line-height: 1.45;
	cursor: pointer;
}
/* Ticks and radios are the inputs themes reach for most - "input[type=checkbox] { height: auto !important }"
   and "input:not([type=image])" padding and borders among them - so these say everything they rely on, and say
   the size as firmly as the theme does */
.mgform .mgform__choice input[type="checkbox"],
.mgform .mgform__choice input[type="radio"] {
	flex: none;
	float: none;
	position: static;
	width: 18px !important;
	height: 18px !important;
	min-height: 0;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	opacity: 1;
	vertical-align: top;
	transition: none;
	accent-color: var(--mgf-accent);
	cursor: pointer;
	-webkit-appearance: auto;
	appearance: auto;
}
.mgform .mgform__consent {
	padding: 14px 16px;
	border: 1px solid var(--mgf-border);
	border-radius: var(--mgf-radius);
	background: rgba(16, 24, 40, .02);
}
.mgform .mgform__consent a {
	color: var(--mgf-accent);
	text-decoration: underline;
}

/* Star rating - the inputs run highest first and the row is reversed, so the stars
   after the checked one in the markup are the ones before it on screen */
.mgform__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 4px;
}
.mgform .mgform__stars .mgform__star-input {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	opacity: 0;
	pointer-events: none;
}
.mgform .mgform__star {
	margin: 0;
	line-height: 0;
	color: #d0d5dd;
	cursor: pointer;
	transition: color .1s ease, transform .1s ease;
}
.mgform__star svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
}
.mgform .mgform__stars .mgform__star:hover,
.mgform .mgform__stars .mgform__star:hover ~ .mgform__star,
.mgform .mgform__stars .mgform__star-input:checked ~ .mgform__star {
	color: var(--mgf-star);
}
.mgform .mgform__stars .mgform__star:hover {
	transform: scale(1.1);
}
.mgform .mgform__star-input:focus-visible + .mgform__star {
	outline: 2px solid var(--mgf-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* File upload */
.mgform__file {
	position: relative;
}
.mgform .mgform__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.mgform .mgform__file-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 18px;
	font-weight: 400;
	color: var(--mgf-control-text);
	background: var(--mgf-control-bg);
	border: 1.5px dashed var(--mgf-border);
	border-radius: var(--mgf-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.mgform .mgform__file-label:hover,
.mgform .mgform__file-input:focus-visible + .mgform__file-label {
	border-color: var(--mgf-accent);
}
.mgform .mgform__file-input:focus-visible + .mgform__file-label {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mgf-accent) 22%, transparent);
}
.mgform__file-icon {
	flex: none;
	width: 38px;
	height: 38px;
	padding: 8px;
	border-radius: 50%;
	fill: none;
	stroke: var(--mgf-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	background: rgba(16, 24, 40, .05);
	background: color-mix(in srgb, var(--mgf-accent) 12%, transparent);
}
.mgform__file-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mgform__file-text {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mgform__file-hint {
	font-size: .8rem;
	opacity: .7;
}

/* Section headings */
.mgform .mgform__section-title {
	margin: 10px 0 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--mgf-border);
	line-height: 1.3;
}
.mgform h2.mgform__section-title { font-size: 1.4rem; }
.mgform h3.mgform__section-title { font-size: 1.2rem; }
.mgform h4.mgform__section-title { font-size: 1.05rem; }
.mgform__section-text {
	margin-top: 8px;
	opacity: .85;
}

/* Submit */
.mgform__captcha {
	margin-top: 22px;
}
.mgform__actions {
	display: flex;
	margin-top: 26px;
}
.mgform__actions--center { justify-content: center; }
.mgform__actions--right { justify-content: flex-end; }
.mgform .mgform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 12px 30px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mgf-btn-text);
	background: var(--mgf-accent);
	border: 0;
	border-radius: var(--mgf-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.mgform__actions--full .mgform__submit {
	width: 100%;
}
.mgform .mgform__submit:hover {
	filter: brightness(.92);
}
.mgform .mgform__submit:active {
	transform: translateY(1px);
}
.mgform .mgform__submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mgf-accent) 30%, transparent);
}
.mgform .mgform__submit[disabled] {
	opacity: .75;
	cursor: wait;
}
.mgform__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mgform-spin .7s linear infinite;
}
.mgform__form.is-sending .mgform__spinner {
	display: inline-block;
}
@keyframes mgform-spin {
	to { transform: rotate(360deg); }
}

/* Messages */
.mgform__alert {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-size: .95rem;
	color: #b42318;
	background: #fef3f2;
	border: 1px solid #fecdca;
	border-radius: var(--mgf-radius);
}
.mgform__notice {
	padding: 16px 18px;
	border: 1px solid var(--mgf-border);
	border-radius: var(--mgf-radius);
	background: rgba(16, 24, 40, .03);
}
.mgform__success {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border: 1px solid rgba(16, 24, 40, .1);
	border-color: color-mix(in srgb, var(--mgf-accent) 30%, transparent);
	border-radius: var(--mgf-radius);
	background: rgba(16, 24, 40, .03);
	background: color-mix(in srgb, var(--mgf-accent) 7%, transparent);
	outline: none;
	animation: mgform-in .3s ease;
}
.mgform__success-icon {
	flex: none;
	width: 40px;
	height: 40px;
}
.mgform__success-icon circle {
	fill: var(--mgf-accent);
}
.mgform__success-icon path {
	fill: none;
	stroke: var(--mgf-btn-text);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mgform__success-body {
	padding-top: 8px;
	font-size: 1.05rem;
}
.mgform__success-body p:last-child {
	margin-bottom: 0;
}
@keyframes mgform-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Hidden from people, there for bots */
.mgform__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.mgform__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.mgform *,
	.mgform__success {
		animation: none !important;
		transition: none !important;
	}
}