/**
 * MRMVR Elements — Form.
 *
 * Two rules govern this file, and both are about surviving the theme.
 *
 * **Sizes are in px, never rem.** A rem is a fraction of the theme's own
 * `html` font-size, and plenty of themes set that to 62.5% so their authors
 * can treat 1rem as 10px. A form sized in rem then renders at five-eighths of
 * what the stylesheet says, and raising the numbers only scales something that
 * is still being divided. Fixed px, multiplied by `--mrx-form-scale`, is a
 * size the form actually gets.
 *
 * **Selectors are compound.** `.mrx-form__control` alone loses to a theme's
 * `input[type="text"]` — same weight, plus an element. So every rule a theme
 * is likely to have an opinion about is written against the block *and* the
 * element, which puts it out of reach without resorting to `!important`.
 *
 * Elementor's own Style-tab selectors are one class more specific again, over
 * in `widgets/class-form.php`, so a value set in the panel still wins here.
 *
 * The split is a two-column grid whose ratio and stacking width are printed
 * per form by the renderer, because both are settings. Field widths inside the
 * form are a twelve-column grid driven by a container query, so a form in a
 * narrow column stacks its half-width fields even when the window is wide.
 *
 * @package MRMVR\Elements
 * @since   1.34.0
 */

.mrx-form-block {
	--mrx-form-gap: 48px;
	--mrx-form-field-gap: 22px;
	--mrx-form-accent: var(--mrmvr-clay, #cfa190);
	--mrx-form-ink: var(--mrmvr-ink, #271d1d);
	--mrx-form-navy: var(--mrmvr-navy, #1a2142);

	/*
	 * One number behind every type size on the form and the panel beside it.
	 * Exposed in the Elementor Style tab as Surface → Text size.
	 */
	--mrx-form-scale: 1;

	--mrx-form-bg: var(--mrmvr-blush-soft, #f9e9e0);
	--mrx-form-block-padding: clamp(28px, 4vw, 56px);

	display: grid;
	gap: var(--mrx-form-gap);
	align-items: start;
	box-sizing: border-box;
	padding: var(--mrx-form-block-padding);
	background-color: var(--mrx-form-bg);
	font-family: var(--mrmvr-font-body, inherit);
}

.mrx-form-block *,
.mrx-form-block *::before,
.mrx-form-block *::after {
	box-sizing: border-box;
}

/* Stacked is the starting point; the renderer's scoped rule splits it. */
.mrx-form-block--split {
	grid-template-columns: 1fr;
}

/*
 * Full bleed, for a band of colour that runs to both edges of the screen from
 * inside a boxed container. `100vw` counts the scrollbar's width, which would
 * push a horizontal scrollbar onto the page, so where the browser has the unit
 * that excludes it, that one is used instead.
 */
.mrx-form-block--stretch {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@supports (width: 100dvw) {
	.mrx-form-block--stretch {
		width: 100dvw;
		max-width: 100dvw;
		margin-left: calc(50% - 50dvw);
		margin-right: calc(50% - 50dvw);
	}
}

/* ---------------------------------------------------------------------------
 * The form
 * ------------------------------------------------------------------------ */

.mrx-form-block .mrx-form {
	--mrx-form-label-color: var(--mrx-form-navy);
	--mrx-form-label-gap: 9px;
	--mrx-form-field-bg: #fff;
	--mrx-form-field-bg-focus: #fff;
	--mrx-form-field-color: var(--mrx-form-ink);
	--mrx-form-field-border: rgba(26, 33, 66, 0.16);
	--mrx-form-field-border-focus: var(--mrx-form-accent);
	--mrx-form-field-border-width: 1px;
	--mrx-form-field-radius: 10px;
	--mrx-form-placeholder-color: rgba(39, 29, 29, 0.45);
	--mrx-form-btn-bg: var(--mrx-form-navy);
	--mrx-form-btn-bg-hover: var(--mrx-form-accent);
	--mrx-form-btn-color: #fff;
	--mrx-form-btn-color-hover: #fff;
	--mrx-form-btn-radius: 999px;
	--mrx-form-error: #b3261e;
	--mrx-form-success: #1f7a54;

	/* px, for the reason at the top of this file. */
	--mrx-form-label-size: 17px;
	--mrx-form-control-size: 18px;
	--mrx-form-hint-size: 15px;
	--mrx-form-choice-size: 17px;
	--mrx-form-btn-size: 17px;
	--mrx-form-control-padding: 16px 20px;

	container-type: inline-size;
	container-name: mrx-form;
	margin: 0;
}

.mrx-form-block .mrx-form__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--mrx-form-field-gap);
}

.mrx-form-block .mrx-form__field {
	grid-column: span 12;
	min-width: 0;
}

/*
 * Half and third only mean anything once the form has room for them. The
 * query is on the form, not the window, so a form in a sidebar stacks even on
 * a wide screen — which is the case a media query gets wrong.
 */
@container mrx-form (min-width: 520px) {
	.mrx-form-block .mrx-form__field--w-half {
		grid-column: span 6;
	}

	.mrx-form-block .mrx-form__field--w-third {
		grid-column: span 4;
	}

	.mrx-form-block .mrx-form__field--w-two-thirds {
		grid-column: span 8;
	}
}

/* Browsers without container queries fall back to the viewport. */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		.mrx-form-block .mrx-form__field--w-half {
			grid-column: span 6;
		}

		.mrx-form-block .mrx-form__field--w-third {
			grid-column: span 4;
		}

		.mrx-form-block .mrx-form__field--w-two-thirds {
			grid-column: span 8;
		}
	}
}

.mrx-form-block label.mrx-form__label {
	display: block;
	margin: 0 0 var(--mrx-form-label-gap);
	color: var(--mrx-form-label-color);
	font-family: inherit;
	font-size: calc(var(--mrx-form-label-size) * var(--mrx-form-scale, 1));
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
}

.mrx-form-block .mrx-form__required {
	margin-left: 3px;
	color: var(--mrx-form-error);
}

.mrx-form-block input.mrx-form__control,
.mrx-form-block textarea.mrx-form__control,
.mrx-form-block select.mrx-form__control {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--mrx-form-control-padding);
	border: var(--mrx-form-field-border-width) solid var(--mrx-form-field-border);
	border-radius: var(--mrx-form-field-radius);
	background-color: var(--mrx-form-field-bg);
	background-image: none;
	color: var(--mrx-form-field-color);
	font-family: inherit;
	font-size: calc(var(--mrx-form-control-size) * var(--mrx-form-scale, 1));
	font-weight: 400;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 200ms var(--mrmvr-ease, ease), background-color 200ms var(--mrmvr-ease, ease), box-shadow 200ms var(--mrmvr-ease, ease);
	-webkit-appearance: none;
	appearance: none;
}

.mrx-form-block textarea.mrx-form__control {
	min-height: 150px;
	resize: vertical;
}

.mrx-form-block select.mrx-form__control {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a2142' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 13px 9px;
}

.mrx-form-block .mrx-form__control::placeholder {
	color: var(--mrx-form-placeholder-color);
	font-size: inherit;
	opacity: 1;
}

.mrx-form-block input.mrx-form__control:focus,
.mrx-form-block textarea.mrx-form__control:focus,
.mrx-form-block select.mrx-form__control:focus,
.mrx-form-block .mrx-form__control:focus-visible {
	border-color: var(--mrx-form-field-border-focus);
	background-color: var(--mrx-form-field-bg-focus);
	outline: none;
	box-shadow: 0 0 0 3px rgba(207, 161, 144, 0.28);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrx-form-field-border-focus) 28%, transparent);
}

.mrx-form-block .mrx-form__field.is-invalid .mrx-form__control {
	border-color: var(--mrx-form-error);
}

/* ---------------------------------------------------------------------------
 * Phone
 *
 * The country picker and the number read as one control: a single border
 * around the pair, with the divider between them. `min-width: 0` on both is
 * what stops the grid from refusing to shrink — a select sized by its longest
 * option name would otherwise push the number box out of a half-width field.
 * ------------------------------------------------------------------------ */

.mrx-form-block .mrx-form__tel {
	display: grid;
	grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
}

.mrx-form-block .mrx-form__tel > select.mrx-form__tel-country,
.mrx-form-block .mrx-form__tel > input.mrx-form__control {
	min-width: 0;
}

.mrx-form-block select.mrx-form__tel-country {
	padding: var(--mrx-form-control-padding);
	padding-right: 32px;
	border: var(--mrx-form-field-border-width) solid var(--mrx-form-field-border);
	border-right: 0;
	border-radius: var(--mrx-form-field-radius) 0 0 var(--mrx-form-field-radius);
	background-color: var(--mrx-form-field-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a2142' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 8px;
	color: var(--mrx-form-field-color);
	font-family: inherit;
	font-size: calc(var(--mrx-form-control-size) * var(--mrx-form-scale, 1));
	line-height: 1.5;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mrx-form-block .mrx-form__tel > input.mrx-form__control {
	border-radius: 0 var(--mrx-form-field-radius) var(--mrx-form-field-radius) 0;
}

/*
 * Focus on either half lifts the whole control, so the pair still looks like
 * one field while it is being used.
 */
.mrx-form-block .mrx-form__tel:focus-within select.mrx-form__tel-country,
.mrx-form-block .mrx-form__tel:focus-within input.mrx-form__control {
	border-color: var(--mrx-form-field-border-focus);
	background-color: var(--mrx-form-field-bg-focus);
	outline: none;
}

.mrx-form-block .mrx-form__tel:focus-within {
	border-radius: var(--mrx-form-field-radius);
	box-shadow: 0 0 0 3px rgba(207, 161, 144, 0.28);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrx-form-field-border-focus) 28%, transparent);
}

.mrx-form-block .mrx-form__tel:focus-within select.mrx-form__tel-country:focus,
.mrx-form-block .mrx-form__tel:focus-within input.mrx-form__control:focus {
	box-shadow: none;
}

.mrx-form-block .mrx-form__field.is-invalid .mrx-form__tel-country {
	border-color: var(--mrx-form-error);
}

/* The picker's full name needs room the narrowest fields do not have. */
@media (max-width: 480px) {
	.mrx-form-block .mrx-form__tel {
		grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr);
	}
}

.mrx-form-block .mrx-form__hint {
	margin: 7px 0 0;
	color: rgba(39, 29, 29, 0.68);
	font-size: calc(var(--mrx-form-hint-size) * var(--mrx-form-scale, 1));
	line-height: 1.45;
}

.mrx-form-block .mrx-form__error {
	margin: 7px 0 0;
	color: var(--mrx-form-error);
	font-size: calc(var(--mrx-form-hint-size) * var(--mrx-form-scale, 1));
	line-height: 1.45;
}

.mrx-form-block .mrx-form__error[hidden] {
	display: none;
}

/* Choices ----------------------------------------------------------------- */

.mrx-form-block .mrx-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 11px 22px;
}

.mrx-form-block label.mrx-form__choice {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--mrx-form-field-color);
	font-size: calc(var(--mrx-form-choice-size) * var(--mrx-form-scale, 1));
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
	cursor: pointer;
}

.mrx-form-block .mrx-form__choice input {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	accent-color: var(--mrx-form-accent);
}

/* The honeypot ------------------------------------------------------------ */

/*
 * Off-screen rather than `display:none`: a bot that skips hidden inputs is the
 * one worth catching, and a field it cannot see but can find is the trap.
 */
.mrx-form-block .mrx-form__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Actions ----------------------------------------------------------------- */

.mrx-form-block .mrx-form__actions {
	display: flex;
	margin-top: 28px;
}

.mrx-form-block button.mrx-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	height: auto;
	padding: 18px 40px;
	border: 0;
	border-radius: var(--mrx-form-btn-radius);
	background-color: var(--mrx-form-btn-bg);
	color: var(--mrx-form-btn-color);
	font-family: inherit;
	font-size: calc(var(--mrx-form-btn-size) * var(--mrx-form-scale, 1));
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 250ms var(--mrmvr-ease, ease), color 250ms var(--mrmvr-ease, ease), transform 250ms var(--mrmvr-ease, ease);
}

.mrx-form-block button.mrx-form__submit:hover,
.mrx-form-block button.mrx-form__submit:focus-visible {
	background-color: var(--mrx-form-btn-bg-hover);
	color: var(--mrx-form-btn-color-hover);
	transform: translateY(-1px);
}

.mrx-form-block button.mrx-form__submit[disabled] {
	cursor: progress;
	opacity: 0.75;
	transform: none;
}

.mrx-form-block .mrx-form__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mrx-form-spin 700ms linear infinite;
}

.mrx-form-block .mrx-form.is-sending .mrx-form__spinner {
	display: block;
}

@keyframes mrx-form-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrx-form-block button.mrx-form__submit,
	.mrx-form-block .mrx-form__control {
		transition: none;
	}

	.mrx-form-block .mrx-form__spinner {
		animation-duration: 2s;
	}
}

/* Alert ------------------------------------------------------------------- */

.mrx-form-block .mrx-form__alert[hidden] {
	display: none;
}

.mrx-form-block .mrx-form__alert-inner {
	margin: 0 0 22px;
	padding: 15px 20px;
	border-left: 3px solid currentColor;
	border-radius: 6px;
	font-size: calc(var(--mrx-form-choice-size) * var(--mrx-form-scale, 1));
	line-height: 1.5;
}

.mrx-form-block .mrx-form__alert-inner--success {
	background-color: rgba(31, 122, 84, 0.1);
	background-color: color-mix(in srgb, var(--mrx-form-success) 10%, transparent);
	color: var(--mrx-form-success);
}

.mrx-form-block .mrx-form__alert-inner--error {
	background-color: rgba(179, 38, 30, 0.09);
	background-color: color-mix(in srgb, var(--mrx-form-error) 9%, transparent);
	color: var(--mrx-form-error);
}

/* ---------------------------------------------------------------------------
 * The confirmation popup
 *
 * A sent form opens this over the page and stays where it is underneath,
 * emptied and ready. Hiding the form on success is the wrong instinct: someone
 * with a second property to ask about then has nothing to type into, and the
 * page they are looking at no longer explains itself.
 * ------------------------------------------------------------------------ */

.mrx-form-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mrx-form-modal[hidden] {
	display: none;
}

.mrx-form-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(26, 33, 66, 0.55);
	animation: mrx-form-fade 200ms var(--mrmvr-ease, ease) both;
}

.mrx-form-modal__panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 44px 40px 36px;
	border-radius: 16px;
	background: #fff;
	color: var(--mrx-form-ink, #271d1d);
	text-align: center;
	box-shadow: 0 30px 70px -24px rgba(26, 33, 66, 0.5);
	animation: mrx-form-rise 260ms var(--mrmvr-ease, ease) both;
}

.mrx-form-modal__panel:focus {
	outline: none;
}

.mrx-form-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(39, 29, 29, 0.5);
	cursor: pointer;
	transition: background-color 180ms var(--mrmvr-ease, ease), color 180ms var(--mrmvr-ease, ease);
}

.mrx-form-modal__close:hover,
.mrx-form-modal__close:focus-visible {
	background: rgba(26, 33, 66, 0.06);
	color: var(--mrx-form-ink, #271d1d);
}

.mrx-form-modal__close svg {
	width: 18px;
	height: 18px;
}

.mrx-form-modal__tick {
	display: block;
	margin: 0 auto 18px;
	color: var(--mrx-form-accent, #cfa190);
}

.mrx-form-modal__tick svg {
	display: block;
	width: 58px;
	height: 58px;
	margin: 0 auto;
}

.mrx-form-modal__title {
	margin: 0 0 10px;
	color: var(--mrx-form-navy, #1a2142);
	font-family: var(--mrmvr-font-display, inherit);
	font-size: calc(30px * var(--mrx-form-scale, 1));
	font-weight: 500;
	line-height: 1.2;
}

.mrx-form-modal__message {
	margin: 0 0 26px;
	font-size: calc(17px * var(--mrx-form-scale, 1));
	line-height: 1.6;
	opacity: 0.82;
}

.mrx-form-modal__ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 15px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--mrx-form-navy, #1a2142);
	color: #fff;
	font-family: inherit;
	font-size: calc(15px * var(--mrx-form-scale, 1));
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 220ms var(--mrmvr-ease, ease);
}

.mrx-form-modal__ok:hover,
.mrx-form-modal__ok:focus-visible {
	background: var(--mrx-form-accent, #cfa190);
}

/* The page behind the popup must not scroll away under it. */
.mrx-form-modal-open {
	overflow: hidden;
}

@keyframes mrx-form-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mrx-form-rise {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrx-form-modal__scrim,
	.mrx-form-modal__panel {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * The panel beside it
 * ------------------------------------------------------------------------ */

.mrx-form-block .mrx-form-aside {
	/*
	 * Transparent, not cream. The block behind it is blush, and a second
	 * tinted panel on top of it reads as a card inside a card — two edges
	 * where the design wants one. The hairlines and the clay labels give the
	 * panel all the structure it needs. Set a colour in the Style tab and it
	 * becomes a card again.
	 */
	--mrx-form-aside-bg: transparent;
	--mrx-form-aside-color: var(--mrx-form-ink);
	--mrx-form-aside-title-color: var(--mrx-form-navy);
	--mrx-form-map-height: 240px;

	--mrx-form-aside-label-size: 14px;
	--mrx-form-aside-value-size: 18px;
	--mrx-form-aside-caption-size: 15px;

	padding: 0;
	background-color: var(--mrx-form-aside-bg);
	color: var(--mrx-form-aside-color);
}

.mrx-form-block .mrx-form-aside__eyebrow {
	margin: 0 0 11px;
	color: var(--mrx-form-accent);
	font-size: calc(14px * var(--mrx-form-scale, 1));
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mrx-form-block .mrx-form-aside__title {
	margin: 0 0 16px;
	color: var(--mrx-form-aside-title-color);
	font-family: var(--mrmvr-font-display, inherit);
	font-size: calc(clamp(28px, 22px + 1.5vw, 44px) * var(--mrx-form-scale, 1));
	font-weight: 500;
	line-height: 1.15;
}

.mrx-form-block .mrx-form-aside__text {
	margin: 0 0 26px;
	font-size: calc(var(--mrx-form-aside-value-size) * var(--mrx-form-scale, 1));
	line-height: 1.65;
	opacity: 0.88;
}

.mrx-form-block .mrx-form-aside__text p:last-child {
	margin-bottom: 0;
}

.mrx-form-block .mrx-form-aside__list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrx-form-block .mrx-form-aside__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrx-form-block .mrx-form-aside__item {
	display: grid;
	gap: 6px;
	padding-top: 20px;
	border-top: 1px solid rgba(207, 161, 144, 0.45);
	border-top: 1px solid color-mix(in srgb, var(--mrx-form-accent) 45%, transparent);
}

.mrx-form-block .mrx-form-aside__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.mrx-form-block .mrx-form-aside__label {
	color: var(--mrx-form-accent);
	font-size: calc(var(--mrx-form-aside-label-size) * var(--mrx-form-scale, 1));
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mrx-form-block .mrx-form-aside__value {
	font-size: calc(var(--mrx-form-aside-value-size) * var(--mrx-form-scale, 1));
	line-height: 1.6;
}

/*
 * A contact row can hold more than one number — homeowners and guests, an
 * office line and an after-hours one. Each gets its own line, and its own
 * small caption where one is given, so the two never run together.
 */
.mrx-form-block .mrx-form-aside__lines {
	display: grid;
	gap: 11px;
}

.mrx-form-block .mrx-form-aside__line {
	display: grid;
	gap: 2px;
}

.mrx-form-block .mrx-form-aside__caption {
	color: var(--mrx-form-aside-color);
	font-size: calc(var(--mrx-form-aside-caption-size) * var(--mrx-form-scale, 1));
	font-weight: 500;
	line-height: 1.4;
	opacity: 0.66;
}

.mrx-form-block .mrx-form-aside__value a {
	color: inherit;
	font-size: inherit;
	text-decoration-color: currentColor;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 3px;
}

.mrx-form-block .mrx-form-aside__value a:hover {
	color: var(--mrx-form-accent);
}

.mrx-form-block .mrx-form-aside__map {
	margin-top: 28px;
	overflow: hidden;
	border-radius: 10px;
	line-height: 0;
}

.mrx-form-block .mrx-form-aside__map iframe {
	display: block;
	width: 100%;
	height: var(--mrx-form-map-height);
	border: 0;
}

.mrx-form-block .mrx-form-aside__directions {
	margin: 16px 0 0;
	font-size: calc(15px * var(--mrx-form-scale, 1));
}

.mrx-form-block .mrx-form-aside__directions a {
	color: var(--mrx-form-accent);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * The editor-only placeholder
 * ------------------------------------------------------------------------ */

.mrx-form-notice {
	margin: 0;
	padding: 18px 20px;
	border: 1px dashed rgba(26, 33, 66, 0.3);
	border-radius: 10px;
	background: rgba(26, 33, 66, 0.03);
	color: rgba(26, 33, 66, 0.72);
	font-size: 15px;
}