/* ==========================================================================
   Forms - Fresh Ground's field pattern, transcribed.

   Extracted verbatim from main.min.css:
     .field:not(.field_no-border) { background:#fff; border:1px solid #e6e2d5 }
     .field-label { color:#4f4f49; font-size:14px; line-height:1.4;
                    padding:9px 18px 0; margin-bottom:-9px }
     input/select   { border:0; border-bottom:1px solid transparent;
                      font-size:16px; font-weight:700; line-height:1.6;
                      padding:9px 18px }
     :focus         { border-bottom:1px solid var(--accent-colour) }
     .field-feedback span { color:#d91e18; font-size:14px; line-height:1.4 }
     feedback animates max-height/opacity over .3s ease-in-out

   The signature is that the LABEL SITS INSIDE the bordered box, above the
   input - a single white card per field on the cream-bordered canvas, square
   cornered, with focus expressed as a coloured underline rather than a ring.
   ========================================================================== */

.mx-field {
	background: #fff;
	border: 1px solid var(--mx-cream);
	box-sizing: border-box;
	margin-top: 18px;
	position: relative;
}

@media (min-width: 48rem) {
	.mx-field {
		margin-top: 24px;
	}
}

.mx-field:first-child {
	margin-top: 0;
}

.mx-field--no-border {
	background: transparent;
	border: 0;
	padding-top: 18px;
}

@media (min-width: 48rem) {
	.mx-field--no-border {
		padding-top: 24px;
	}
}

.mx-field__label {
	align-items: flex-end;
	color: var(--mx-grey-01);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font-family: var(--mx-font-body);
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: -9px;
	padding: 9px 18px 0;
}

.mx-field__label em {
	color: var(--mx-grey-01);
	font-style: normal;
	font-weight: 400;
	margin-left: auto;
	padding-left: 24px;
	text-transform: none;
}

/* ---- Controls ----------------------------------------------------------- */

.mx-field input[type='text'],
.mx-field input[type='email'],
.mx-field input[type='tel'],
.mx-field input[type='url'],
.mx-field input[type='number'],
.mx-field input[type='search'],
.mx-field select,
.mx-field textarea {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	color: var(--mx-grey-01);
	font-family: var(--mx-font-body);
	font-size: 16px;  /* 16px min - prevents iOS zoom on focus */
	font-weight: 700;
	height: auto;
	line-height: 1.6;
	margin: 0;
	max-height: none;
	min-height: 0;
	padding: 9px 18px;
	transition: border-color var(--mx-motion);
	width: 100%;
}

.mx-field input:focus,
.mx-field select:focus,
.mx-field textarea:focus {
	border-bottom: 1px solid var(--mx-accent);
	box-shadow: none;
	outline: 0;
}

.mx-field textarea {
	display: block;
	min-height: 150px;
	resize: vertical;
}

.mx-field input::placeholder,
.mx-field textarea::placeholder {
	color: var(--mx-grey-03);
	font-weight: 400;
}

/* ---- Select chevron ----------------------------------------------------- */

.mx-field--select {
	position: relative;
	z-index: 1;
}

.mx-field--select select {
	padding-right: 42px;
}

.mx-field__chevron {
	height: 12px;
	margin-top: -6px;
	pointer-events: none;
	position: absolute;
	right: 18px;
	top: 50%;
	transition: transform var(--mx-motion);
	width: 12px;
	z-index: 2;
}

.mx-field__chevron svg {
	display: block;
	fill: var(--mx-grey-01);
	height: 12px;
	width: 12px;
}

/* ---- Checkbox / radio --------------------------------------------------- */

.mx-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 12px 18px;
}

.mx-check input[type='checkbox'],
.mx-check input[type='radio'] {
	accent-color: var(--mx-text-title);
	flex-shrink: 0;
	height: 20px;
	margin: 2px 0 0;
	width: 20px;
}

.mx-check span {
	font-size: var(--mx-text-small);
	line-height: 1.4;
}

/* ---- Validation feedback ------------------------------------------------ */

.mx-field__feedback {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	position: relative;
	transition: max-height var(--mx-motion), opacity var(--mx-motion);
	z-index: 1;
}

.mx-field__feedback.is-visible {
	max-height: none;
	opacity: 1;
}

.mx-field__feedback span {
	color: #d91e18;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 2px;
	padding: 0 18px 9px;
}

@media (min-width: 48rem) {
	.mx-field__feedback span {
		font-size: 14px;
		padding-top: 12px;
	}
}

/* ==========================================================================
   Contact Form 7 - CF7 stays installed and its markup lives in the database,
   so the raw output is given the same field pattern here. GTM Kit's CF7
   integration and CF7's own validation flow are untouched.
   ========================================================================== */

.wpcf7-form p {
	margin: 0;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form input[type='tel'],
.wpcf7-form input[type='url'],
.wpcf7-form input[type='number'],
.wpcf7-form textarea,
.wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid var(--mx-cream);
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	color: var(--mx-grey-01);
	font-family: var(--mx-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	margin-top: 18px;
	max-height: none;
	padding: 18px;
	transition: border-color var(--mx-motion);
	width: 100%;
}

@media (min-width: 48rem) {
	.wpcf7-form input[type='text'],
	.wpcf7-form input[type='email'],
	.wpcf7-form input[type='tel'],
	.wpcf7-form input[type='url'],
	.wpcf7-form input[type='number'],
	.wpcf7-form textarea,
	.wpcf7-form select {
		margin-top: 24px;
	}
}

.wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	border-color: var(--mx-accent);
	box-shadow: none;
	outline: 0;
}

/* CF7 response + validation messaging, in Fresh Ground's error red. */
.wpcf7 form .wpcf7-response-output {
	border: 1px solid var(--mx-cream);
	border-radius: 0;
	font-size: var(--mx-text-small);
	line-height: 1.4;
	margin: 1.875rem 0 0;
	padding: 1rem 1.125rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #d91e18;
	color: #d91e18;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--mx-success);
	color: var(--mx-success);
}

.wpcf7-not-valid-tip {
	color: #d91e18;
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	padding-top: 6px;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: #d91e18;
}

.wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* Reassurance line under the form ("Uforpligtende", "Svar inden for 48 timer"). */
.mx-form__assurance {
	color: var(--mx-grey-01);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: var(--mx-text-small);
	line-height: var(--mx-text-small-lh);
	margin-top: 1.25rem;
}

.mx-form__assurance li {
	align-items: center;
	display: flex;
	font-size: var(--mx-text-small);
	gap: .5rem;
	list-style: none;
}