/**
 * Dynamics 365 (Customer Insights – Journeys) form — GCS skin.
 *
 * Microsoft ships the form as a fixed block of markup we cannot template, so
 * every rule here overrides its inline/embedded styles and needs !important.
 * Everything is scoped under .gcs-d365-form so no other form on the site is
 * touched.
 *
 * Palette and geometry mirror the evevit theme (:root in themes/evevit/style.css):
 * pill fields, 1px #DDDDDD border on transparent, #4338FF primary.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.gcs-d365-form {
	--gcs-d365-primary: #4338ff;
	--gcs-d365-primary-hover: #3c32e5;
	--gcs-d365-primary-soft: rgba( 67, 56, 255, 0.12 );
	--gcs-d365-text: #555555;
	--gcs-d365-text-light: #999999;
	--gcs-d365-accent: #000000;
	--gcs-d365-border: #dddddd;
	--gcs-d365-bg: #ffffff;
	--gcs-d365-error: #d83b3b;
	--gcs-d365-error-soft: rgba( 216, 59, 59, 0.12 );
	--gcs-d365-scrollbar: rgba( 67, 56, 255, 0.35 );
	--gcs-d365-scrollbar-hover: rgba( 67, 56, 255, 0.6 );

	--gcs-d365-radius: 35px;
	--gcs-d365-radius-lg: 26px;
	--gcs-d365-radius-btn: 30px;

	--gcs-d365-field-h: 60px;
	--gcs-d365-area-h: 150px;
	--gcs-d365-pad-x: 26px;
	--gcs-d365-gap-x: 16px;
	--gcs-d365-gap-y: 18px;

	/* Autofill repaints the field background, and the raised textarea label needs
	   an opaque backdrop so scrolled text does not run under it. Both default to
	   white — override them to the section colour if the form sits on a tint. */
	--gcs-d365-autofill-bg: #ffffff;
	--gcs-d365-label-bg: #ffffff;

	--gcs-d365-font: var( --e-global-typography-text-font-family, "Google Sans", "Helvetica Neue", Helvetica, Arial, sans-serif );

	width: 100%;
}

.gcs-d365-form--center {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Reset — strip Dynamics' own chrome
   ========================================================================== */

.gcs-d365-form,
.gcs-d365-form * {
	box-sizing: border-box !important;
}

.gcs-d365-form .marketingForm * {
	font-family: var( --gcs-d365-font ) !important;
}

.gcs-d365-form .marketingForm,
.gcs-d365-form [data-layout="true"],
.gcs-d365-form [data-layout="true"] > div,
.gcs-d365-form [data-section],
.gcs-d365-form [data-container="true"] {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border: none !important;
}

/* The older table renderer paints its own backgrounds and cell padding. */
.gcs-d365-form .marketingForm table,
.gcs-d365-form .marketingForm tbody,
.gcs-d365-form .marketingForm tr,
.gcs-d365-form .marketingForm td,
.gcs-d365-form .marketingForm th {
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	display: block !important;
}

/* Field labels are replaced by the floating placeholders. */
.gcs-d365-form .textFormFieldBlock > label,
.gcs-d365-form .phoneFormFieldBlock > label,
.gcs-d365-form .dateTimeFormFieldBlock > label,
.gcs-d365-form .lookupFormFieldBlock > label,
.gcs-d365-form .passesBlock > label,
.gcs-d365-form .twoOptionFormFieldBlock > label.block-label,
.gcs-d365-form .optionSetFormFieldBlock > label.block-label,
.gcs-d365-form .multiOptionSetFormFieldBlock > label.block-label,
.gcs-d365-form div[data-editorblocktype="Captcha"] label[id^="wlspispHipInstructionContainer"] {
	display: none !important;
}

/* Dynamics appends a required asterisk as label::after. Hidden labels take it
   with them, but the consent label stays visible — so its asterisk would hang
   below the text on its own. The asterisk is already in each placeholder. */
.gcs-d365-form .marketingForm div[data-required] > label::after,
.gcs-d365-form .marketingForm div[data-required] > .block-label::after,
.gcs-d365-form .marketingForm .consentBlock label::after,
.gcs-d365-form .marketingForm .twooption_checkbox label::after {
	content: none !important;
	display: none !important;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.gcs-d365-form .marketingForm .columnContainer,
.gcs-d365-form .marketingForm th.inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	gap: var( --gcs-d365-gap-y ) var( --gcs-d365-gap-x ) !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.gcs-d365-form .marketingForm .textFormFieldBlock,
.gcs-d365-form .marketingForm .phoneFormFieldBlock,
.gcs-d365-form .marketingForm .lookupFormFieldBlock,
.gcs-d365-form .marketingForm .dateTimeFormFieldBlock,
.gcs-d365-form .marketingForm .twoOptionFormFieldBlock,
.gcs-d365-form .marketingForm .optionSetFormFieldBlock,
.gcs-d365-form .marketingForm .multiOptionSetFormFieldBlock,
.gcs-d365-form .marketingForm .passesBlock,
.gcs-d365-form .marketingForm .consentBlock,
.gcs-d365-form .marketingForm .submitButtonWrapper,
.gcs-d365-form .marketingForm div[data-editorblocktype="Captcha"] {
	position: relative !important;
	align-self: flex-start !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	/* Deliberately no `display` — Dynamics hides its prefill/tracking fields
	   (sirc_icsource, sirc_leadtype, subject) with an inline display:none, and
	   an !important display here would force them back into view. Blocks stack
	   their input and error message fine as plain block boxes. */
}

/* Dynamics wraps each column group in these; they must not add their own
   spacing or a competing flex context. */
.gcs-d365-form .marketingForm .wrap-section,
.gcs-d365-form .marketingForm .emptyContainer,
.gcs-d365-form .marketingForm .columns-equal-class {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* Separate the three column groups (fields / message+consent / submit). */
.gcs-d365-form .marketingForm .wrap-section + .wrap-section {
	margin-top: var( --gcs-d365-gap-y ) !important;
}

/* Anything not explicitly paired below owns a full row — including block types
   this stylesheet does not know about. */
.gcs-d365-form .marketingForm .columnContainer > div,
.gcs-d365-form .marketingForm th.inner > div {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Two-column pairs. */
.gcs-d365-form--cols-2 .marketingForm .columnContainer > .textFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm .columnContainer > .phoneFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm .columnContainer > .lookupFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm .columnContainer > .dateTimeFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm .columnContainer > .optionSetFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm .columnContainer > .multiOptionSetFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm th.inner > .textFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm th.inner > .phoneFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm th.inner > .lookupFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm th.inner > .dateTimeFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm th.inner > .optionSetFormFieldBlock,
.gcs-d365-form--cols-2 .marketingForm th.inner > .multiOptionSetFormFieldBlock {
	flex: 0 0 calc( 50% - ( var( --gcs-d365-gap-x ) / 2 ) ) !important;
	width: calc( 50% - ( var( --gcs-d365-gap-x ) / 2 ) ) !important;
	max-width: calc( 50% - ( var( --gcs-d365-gap-x ) / 2 ) ) !important;
}

/* Blocks that always own a full row. */
.gcs-d365-form .marketingForm .columnContainer > .consentBlock,
.gcs-d365-form .marketingForm .columnContainer > .twoOptionFormFieldBlock,
.gcs-d365-form .marketingForm .columnContainer > .submitButtonWrapper,
.gcs-d365-form .marketingForm .columnContainer > div[data-editorblocktype="Captcha"],
.gcs-d365-form .marketingForm .columnContainer > .textFormFieldBlock:has( textarea ),
.gcs-d365-form .marketingForm th.inner > .consentBlock,
.gcs-d365-form .marketingForm th.inner > .twoOptionFormFieldBlock,
.gcs-d365-form .marketingForm th.inner > .submitButtonWrapper,
.gcs-d365-form .marketingForm th.inner > div[data-editorblocktype="Captcha"],
.gcs-d365-form .marketingForm th.inner > .textFormFieldBlock:has( textarea ) {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ==========================================================================
   Fields
   ========================================================================== */

.gcs-d365-form .marketingForm input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.gcs-d365-form .marketingForm select,
.gcs-d365-form .marketingForm textarea {
	width: 100% !important;
	height: var( --gcs-d365-field-h ) !important;
	min-height: var( --gcs-d365-field-h ) !important;
	margin: 0 !important;
	padding: 0 var( --gcs-d365-pad-x ) !important;
	border: 1px solid var( --gcs-d365-border ) !important;
	border-radius: var( --gcs-d365-radius ) !important;
	background: transparent !important;
	color: var( --gcs-d365-accent ) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, padding 0.2s ease !important;
}

/* Every state rule below repeats the :not() chain from the base rule. Without
   it the base selector is more specific and !important alone will not win, so
   focus and error borders silently never paint. */
.gcs-d365-form .marketingForm input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.gcs-d365-form .marketingForm select:focus,
.gcs-d365-form .marketingForm textarea:focus {
	border-color: var( --gcs-d365-primary ) !important;
	box-shadow: 0 0 0 3px var( --gcs-d365-primary-soft ) !important;
	outline: none !important;
}

/* Native placeholders are blanked by the JS; belt-and-braces for the moment
   before it runs. */
.gcs-d365-form .marketingForm input::placeholder,
.gcs-d365-form .marketingForm textarea::placeholder {
	color: var( --gcs-d365-text-light ) !important;
	opacity: 1 !important;
}

.gcs-d365-form .marketingForm select {
	padding-right: 46px !important;
	color: var( --gcs-d365-accent ) !important;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>" ) !important;
	background-repeat: no-repeat !important;
	background-position: right var( --gcs-d365-pad-x ) center !important;
	background-size: 12px 8px !important;
	cursor: pointer !important;
}

/* Message / description box. */
.gcs-d365-form .marketingForm textarea {
	height: var( --gcs-d365-area-h ) !important;
	min-height: var( --gcs-d365-area-h ) !important;
	padding: 20px var( --gcs-d365-pad-x ) !important;
	border-radius: var( --gcs-d365-radius-lg ) !important;
	max-height: var( --gcs-d365-area-h ) !important;
	line-height: 1.6 !important;
	resize: none !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

/* scrollbar-width is deliberately NOT set for Chrome/Safari: from Chrome 121 it
   supersedes the ::-webkit-scrollbar rules below, which drops the textarea back
   to macOS overlay scrollbars that stay invisible unless actively scrolling.
   Customising ::-webkit-scrollbar instead opts into a permanently visible one.
   Firefox has no such pseudo-elements, so it gets the standard properties. */


/* Native scrollbars cannot fade: Chrome does not animate transitions on
   ::-webkit-scrollbar-thumb, and macOS overlay scrollbars are not stylable.
   So the native one is hidden and dynamics-form.js drives a real element,
   which can carry a genuine opacity transition and stay inside the field's
   rounded outline. */
.gcs-d365-form .marketingForm textarea::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

.gcs-d365-form .gcs-d365-scrollbar {
	position: absolute !important;
	top: 46px !important;
	bottom: 22px !important;
	right: 10px !important;
	width: 4px !important;
	border-radius: 999px !important;
	background: transparent !important;
	opacity: 0;
	transition: opacity 0.4s ease !important;
	pointer-events: none !important;
	z-index: 3 !important;
}

.gcs-d365-form .gcs-d365-scrollbar.is-visible {
	opacity: 1;
}

.gcs-d365-form .gcs-d365-scrollbar-thumb {
	position: absolute !important;
	left: 0 !important;
	width: 100% !important;
	min-height: 24px !important;
	border-radius: 999px !important;
	background: var( --gcs-d365-scrollbar ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.gcs-d365-form .gcs-d365-scrollbar {
		transition: none !important;
	}
}

/* ==========================================================================
   Floating placeholders
   ========================================================================== */

.gcs-d365-form .gcs-d365-fieldwrap {
	position: relative !important;
}

/* Vertically centred with line-height rather than flex, so a long label can
   still ellipsize inside the field. */
.gcs-d365-form .gcs-d365-placeholder {
	position: absolute !important;
	display: block !important;
	top: 0 !important;
	left: var( --gcs-d365-pad-x ) !important;
	right: var( --gcs-d365-pad-x ) !important;
	height: var( --gcs-d365-field-h ) !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var( --gcs-d365-text-light ) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: var( --gcs-d365-field-h ) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	pointer-events: none !important;
	z-index: 2 !important;
	transition: top 0.2s ease, height 0.2s ease, line-height 0.2s ease,
		font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease !important;
}

.gcs-d365-form .gcs-d365-placeholder--area {
	top: 20px !important;
	height: 26px !important;
	line-height: 26px !important;
}

/* Raised state — field focused or holding a value. */
.gcs-d365-form .marketingForm input.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm select.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm textarea.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm input:focus + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm select:focus + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm textarea:focus + .gcs-d365-placeholder {
	top: 11px !important;
	height: 15px !important;
	line-height: 15px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	/* Keep the label exactly as the placeholder is written — no uppercasing. */
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var( --gcs-d365-primary ) !important;
}

/* A textarea's top padding scrolls away with its content, so once the user
   scrolls, text rides up into — and above — the raised label. The label
   therefore has to mask the whole strip between the top border and itself,
   not just sit on its own line. */
.gcs-d365-form .marketingForm textarea.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm textarea:focus + .gcs-d365-placeholder {
	top: 1px !important;
	left: 1px !important;
	right: 1px !important;
	height: 32px !important;
	display: flex !important;
	align-items: flex-end !important;
	line-height: 1 !important;
	padding: 0 0 3px calc( var( --gcs-d365-pad-x ) - 1px ) !important;
	background: var( --gcs-d365-label-bg ) !important;
	border-radius: var( --gcs-d365-radius-lg ) var( --gcs-d365-radius-lg ) 0 0 !important;
}

/* Only once the box actually scrolls does text pass under the label, so the
   taller strip and its fade-out are confined to that case — otherwise the
   resting field would carry a gap it does not need. .gcs-is-scrollable is set
   by dynamics-form.js. */
.gcs-d365-form .marketingForm textarea.gcs-is-scrollable.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm textarea.gcs-is-scrollable:focus + .gcs-d365-placeholder {
	height: 46px !important;
	align-items: flex-start !important;
	line-height: 15px !important;
	padding: 11px 0 0 calc( var( --gcs-d365-pad-x ) - 1px ) !important;
	background: linear-gradient(
		to bottom,
		var( --gcs-d365-label-bg ) 0,
		var( --gcs-d365-label-bg ) 32px,
		transparent 46px
	) !important;
}

/* Make room for the raised label. */
.gcs-d365-form .marketingForm input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).has-value,
.gcs-d365-form .marketingForm input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.gcs-d365-form .marketingForm select.has-value,
.gcs-d365-form .marketingForm select:focus {
	padding-top: 25px !important;
	padding-bottom: 5px !important;
}

.gcs-d365-form .marketingForm textarea.has-value,
.gcs-d365-form .marketingForm textarea:focus {
	padding-top: 34px !important;
	padding-bottom: 12px !important;
	/* Pinned on the focus/has-value states too, so the box cannot grow a few
	   pixels as the padding changes or if Dynamics tries to auto-size it. */
	height: var( --gcs-d365-area-h ) !important;
	min-height: var( --gcs-d365-area-h ) !important;
	max-height: var( --gcs-d365-area-h ) !important;
}

.gcs-d365-form .marketingForm textarea.gcs-is-scrollable.has-value,
.gcs-d365-form .marketingForm textarea.gcs-is-scrollable:focus {
	padding-top: 46px !important;
}

/* ==========================================================================
   Phone field — Dynamics puts the visible border on the wrapper
   ========================================================================== */

.gcs-d365-form .marketingForm .phoneFormFieldBlock .phoneCountryCode {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	/* Dynamics sets `flex: 2 1 20%` here, and .phoneFormFieldBlock is a COLUMN
	   flex container — so flex-basis governs the height and silently beats the
	   `height` below, collapsing the field to one line. Pin the basis to auto so
	   the explicit height is what actually applies. */
	flex: 0 0 auto !important;
	height: var( --gcs-d365-field-h ) !important;
	min-height: var( --gcs-d365-field-h ) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var( --gcs-d365-border ) !important;
	border-radius: var( --gcs-d365-radius ) !important;
	background: transparent !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.gcs-d365-form .marketingForm .phoneFormFieldBlock:has( .phoneCountryCode ) input[type="tel"]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
	border: none !important;
	border-radius: var( --gcs-d365-radius ) !important;
	background: transparent !important;
	box-shadow: none !important;
	height: 100% !important;
	min-height: var( --gcs-d365-field-h ) !important;
}

.gcs-d365-form .marketingForm .phoneFormFieldBlock .phoneCountryCode:focus-within {
	border-color: var( --gcs-d365-primary ) !important;
	box-shadow: 0 0 0 3px var( --gcs-d365-primary-soft ) !important;
}

.gcs-d365-form .marketingForm .phoneFormFieldBlock:has( .phoneCountryCode ) input[type="tel"]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus {
	box-shadow: none !important;
	border-color: transparent !important;
}

/* ==========================================================================
   Consent / checkboxes
   ========================================================================== */

/* :not(.fieldErrorMsg):not(.gcs-d365-error-msg) matters — the error message is also a direct div child,
   and this selector outranks the rule that keeps it hidden at rest. */
.gcs-d365-form .marketingForm .consentBlock > div:not( .fieldErrorMsg ):not( .gcs-d365-error-msg ),
.gcs-d365-form .marketingForm .twoOptionFormFieldBlock .twooption_checkbox > div:not( .fieldErrorMsg ):not( .gcs-d365-error-msg ) {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
}

.gcs-d365-form .marketingForm .consentBlock input[type="checkbox"],
.gcs-d365-form .marketingForm .twooption_checkbox input[type="checkbox"] {
	flex: 0 0 20px !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	margin: 2px 0 0 0 !important;
	padding: 0 !important;
	border: 1px solid var( --gcs-d365-border ) !important;
	border-radius: 6px !important;
	background: var( --gcs-d365-bg ) !important;
	display: inline-grid !important;
	place-content: center !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.gcs-d365-form .marketingForm .consentBlock input[type="checkbox"]:checked,
.gcs-d365-form .marketingForm .twooption_checkbox input[type="checkbox"]:checked {
	background: var( --gcs-d365-primary ) !important;
	border-color: var( --gcs-d365-primary ) !important;
}

.gcs-d365-form .marketingForm .consentBlock input[type="checkbox"]:checked::before,
.gcs-d365-form .marketingForm .twooption_checkbox input[type="checkbox"]:checked::before {
	content: "";
	width: 10px;
	height: 5px;
	margin-top: -3px;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate( -45deg );
}

.gcs-d365-form .marketingForm .consentBlock input[type="checkbox"]:focus-visible,
.gcs-d365-form .marketingForm .twooption_checkbox input[type="checkbox"]:focus-visible {
	outline: 3px solid var( --gcs-d365-primary-soft ) !important;
	outline-offset: 2px !important;
}

.gcs-d365-form .marketingForm .consentBlock label,
.gcs-d365-form .marketingForm .twooption_checkbox label {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
}

.gcs-d365-form .marketingForm .consentBlock label p,
.gcs-d365-form .marketingForm .consentBlock label div,
.gcs-d365-form .marketingForm .twooption_checkbox label p,
.gcs-d365-form .marketingForm .twooption_checkbox label div {
	margin: 0 !important;
	color: var( --gcs-d365-text ) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: left !important;
	cursor: pointer !important;
}

.gcs-d365-form .marketingForm .consentBlock a {
	color: var( --gcs-d365-primary ) !important;
	text-decoration: underline !important;
}

.gcs-d365-form .marketingForm .radiobuttons input,
.gcs-d365-form .marketingForm .multiOptionSetFormFieldBlock input[type="checkbox"] {
	accent-color: var( --gcs-d365-primary ) !important;
}

/* ==========================================================================
   Validation
   ========================================================================== */

/* Fitted's treatment: the message is a full-width red bar fused to the bottom
   of the field, not a floating chip. Field and bar share one outline — the
   field rounds only its top corners, the bar only its bottom, and the field's
   red bottom border meets the bar's red fill so the seam disappears.
   
   Only .gcs-has-error / .gcs-d365-error-msg appear below. Those are set by
   dynamics-form.js, which normalises whatever the runtime produces (this form
   reports errors through a #validation-summary, older ones through
   .hasError/.fieldErrorMsg) into this one pair of hooks. */

/* Whatever the runtime renders inline is superseded by our mirrored copy. */
.gcs-d365-form .marketingForm .fieldErrorMsg {
	display: none !important;
}

.gcs-d365-form .marketingForm .gcs-d365-error-msg {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 9px var( --gcs-d365-pad-x ) !important;
	border: none !important;
	border-radius: 0 0 var( --gcs-d365-radius ) var( --gcs-d365-radius ) !important;
	background: var( --gcs-d365-error ) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	cursor: default !important;
	pointer-events: none !important;
	box-sizing: border-box !important;
}

/* Field in error: red outline, square bottom so the bar attaches flush. */
.gcs-d365-form .marketingForm .gcs-has-error input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.gcs-d365-form .marketingForm .gcs-has-error select,
.gcs-d365-form .marketingForm .gcs-has-error textarea,
.gcs-d365-form .marketingForm .phoneFormFieldBlock.gcs-has-error .phoneCountryCode,
.gcs-d365-form .marketingForm .phoneFormFieldBlock.gcs-has-error .phoneCountryCode:focus-within {
	border: 1px solid var( --gcs-d365-error ) !important;
	border-radius: var( --gcs-d365-radius ) var( --gcs-d365-radius ) 0 0 !important;
	box-shadow: none !important;
}

/* Focus must not repaint the border blue while the error still stands. */
.gcs-d365-form .marketingForm .gcs-has-error input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.gcs-d365-form .marketingForm .gcs-has-error select:focus,
.gcs-d365-form .marketingForm .gcs-has-error textarea:focus {
	border-color: var( --gcs-d365-error ) !important;
	box-shadow: none !important;
}

.gcs-d365-form .marketingForm .gcs-has-error textarea {
	border-radius: var( --gcs-d365-radius-lg ) var( --gcs-d365-radius-lg ) 0 0 !important;
}

.gcs-d365-form .marketingForm .textFormFieldBlock.gcs-has-error:has( textarea ) .gcs-d365-error-msg {
	border-radius: 0 0 var( --gcs-d365-radius-lg ) var( --gcs-d365-radius-lg ) !important;
}

/* The tel input sits inside the bordered wrapper — it must stay bare. */
.gcs-d365-form .marketingForm .phoneFormFieldBlock.gcs-has-error input[type="tel"]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.gcs-d365-form .marketingForm .phoneFormFieldBlock.gcs-has-error input[type="tel"]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.gcs-d365-form .marketingForm .gcs-has-error input.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm .gcs-has-error input:focus + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm .gcs-has-error textarea.has-value + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm .gcs-has-error textarea:focus + .gcs-d365-placeholder,
.gcs-d365-form .marketingForm .gcs-has-error select.has-value + .gcs-d365-placeholder {
	color: var( --gcs-d365-error ) !important;
}

/* Consent has no input to outline — box the whole row, then attach the bar
   underneath exactly as the fields do. */
.gcs-d365-form .marketingForm .consentBlock.gcs-has-error > div:not( .gcs-d365-error-msg ) {
	border: 1px solid var( --gcs-d365-error ) !important;
	border-radius: var( --gcs-d365-radius-lg ) var( --gcs-d365-radius-lg ) 0 0 !important;
	padding: 14px var( --gcs-d365-pad-x ) !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.gcs-d365-form .marketingForm .consentBlock.gcs-has-error .gcs-d365-error-msg {
	border-radius: 0 0 var( --gcs-d365-radius-lg ) var( --gcs-d365-radius-lg ) !important;
}

/* ==========================================================================
   CAPTCHA
   ========================================================================== */

.gcs-d365-form .marketingForm div[data-editorblocktype="Captcha"] img {
	max-width: 100% !important;
	border-radius: var( --gcs-d365-radius-lg ) !important;
}

.gcs-d365-form .marketingForm [id^="wlspispHIPToA"],
.gcs-d365-form .marketingForm #ms_captcha_holder b {
	display: none !important;
}

/* ==========================================================================
   Submit
   ========================================================================== */

.gcs-d365-form .marketingForm .submitButtonWrapper,
.gcs-d365-form .marketingForm .primaryButtonWrapper {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 6px 0 0 0 !important;
	text-align: left !important;
}

.gcs-d365-form--center .marketingForm .submitButtonWrapper {
	text-align: center !important;
}

/* Mirrors the theme's .elementor-button: a 6px-inset pill with the label on the
   left and a 48px white disc on the right. 48 + 12 = the 60px field height, so
   the button lines up with the inputs above it. */
.gcs-d365-form .marketingForm button[type="submit"],
.gcs-d365-form .marketingForm input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: auto !important;
	min-height: var( --gcs-d365-field-h ) !important;
	margin: 0 !important;
	padding: 6px !important;
	border: none !important;
	border-radius: var( --gcs-d365-radius-btn ) !important;
	background: var( --gcs-d365-primary ) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: capitalize !important;
	cursor: pointer !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	transition: background-color 0.3s ease !important;
}

/* The theme darkens to --accent on hover rather than to a lighter blue, and
   carries no shadow — colour change and arrow rotation only. */
.gcs-d365-form .marketingForm button[type="submit"]:hover,
.gcs-d365-form .marketingForm input[type="submit"]:hover,
.gcs-d365-form .marketingForm button[type="submit"]:focus-visible {
	background: var( --gcs-d365-accent ) !important;
	box-shadow: none !important;
}

.gcs-d365-form .marketingForm .gcs-d365-btn-text {
	padding: 0 20px !important;
	pointer-events: none !important;
}

.gcs-d365-form .marketingForm .gcs-d365-btn-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 48px !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	pointer-events: none !important;
}

/* Masked rather than inlined as a background image so the arrow can be
   recoloured on hover the way the theme's icon font is. */
.gcs-d365-form .marketingForm .gcs-d365-btn-icon::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: var( --gcs-d365-primary );
	-webkit-mask: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17 L17 7 M9 7 L17 7 L17 15' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17 L17 7 M9 7 L17 7 L17 15' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>" ) center / contain no-repeat;
	transform: rotateZ( 0 );
	transition: transform 0.3s ease, background-color 0.3s ease;
}

/* 45° clockwise takes the diagonal arrow to horizontal — the theme's
   .style-theme-yes behaviour. */
.gcs-d365-form .marketingForm button[type="submit"]:hover .gcs-d365-btn-icon::before,
.gcs-d365-form .marketingForm button[type="submit"]:focus-visible .gcs-d365-btn-icon::before {
	transform: rotateZ( 45deg );
	background-color: var( --gcs-d365-accent ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.gcs-d365-form .marketingForm .gcs-d365-btn-icon::before {
		transition: background-color 0.3s ease;
	}
	.gcs-d365-form .marketingForm button[type="submit"]:hover .gcs-d365-btn-icon::before {
		transform: rotateZ( 0 );
	}
}

/* Keep hover on the button itself so the transition never restarts. */
.gcs-d365-form .marketingForm button[type="submit"] * {
	pointer-events: none !important;
}

/* ==========================================================================
   Loading + submitted states
   ========================================================================== */

.gcs-d365-form .formLoader {
	border: 6px solid var( --gcs-d365-border ) !important;
	border-top-color: var( --gcs-d365-primary ) !important;
	border-radius: 50% !important;
}

/* On submit, Dynamics swaps the button's contents for a spinner — which drops
   the label and the arrow disc, so the button would otherwise shrink to a stub
   with the spinner jammed against the left padding. Hold the width it had
   before the click (recorded in JS) and centre the spinner in it. */
.gcs-d365-form .marketingForm button[type="submit"].gcs-is-submitting {
	justify-content: center !important;
	padding: 6px 30px !important;
	cursor: wait !important;
}

.gcs-d365-form .submitButtonSpinner {
	display: block !important;
	width: 26px !important;
	height: 26px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	border: 3px solid rgba( 255, 255, 255, 0.3 ) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: gcs-d365-spin 0.7s linear infinite !important;
}

@keyframes gcs-d365-spin {
	to {
		transform: rotate( 360deg );
	}
}

.gcs-d365-form .onFormSubmittedFeedback {
	width: 100% !important;
	background: transparent !important;
}

.gcs-d365-form .onFormSubmittedFeedback .onFormSubmittedFeedbackMessage {
	color: var( --gcs-d365-accent ) !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
}

.gcs-d365-form .onFormSubmittedFeedbackIcon {
	width: 64px !important;
	max-width: 64px !important;
}

.gcs-d365-form .dialogProviderLinkContainer,
.gcs-d365-form .enableFormHosting {
	font-family: var( --gcs-d365-font ) !important;
}

/* ==========================================================================
   Autofill
   ========================================================================== */

/* Zero-length keyframes let the JS detect Chrome autofill via animationstart. */
@keyframes gcs-d365-autofill-start {
	from {
		/* intentionally empty */
	}
	to {
		/* intentionally empty */
	}
}

@keyframes gcs-d365-autofill-cancel {
	from {
		/* intentionally empty */
	}
	to {
		/* intentionally empty */
	}
}

.gcs-d365-form .marketingForm input:-webkit-autofill {
	animation-name: gcs-d365-autofill-start !important;
	animation-duration: 0.001s !important;
}

.gcs-d365-form .marketingForm input:not(:-webkit-autofill) {
	animation-name: gcs-d365-autofill-cancel !important;
	animation-duration: 0.001s !important;
}

.gcs-d365-form .marketingForm input:-webkit-autofill,
.gcs-d365-form .marketingForm input:-webkit-autofill:hover,
.gcs-d365-form .marketingForm input:-webkit-autofill:focus,
.gcs-d365-form .marketingForm input:-webkit-autofill:active {
	-webkit-text-fill-color: var( --gcs-d365-accent ) !important;
	-webkit-box-shadow: 0 0 0 1000px var( --gcs-d365-autofill-bg ) inset !important;
	box-shadow: 0 0 0 1000px var( --gcs-d365-autofill-bg ) inset !important;
	caret-color: var( --gcs-d365-accent ) !important;
	border-radius: var( --gcs-d365-radius ) !important;
	transition: background-color 9999s ease-in-out 0s !important;
}
.gcs-d365-form .marketingForm .gcs-has-error input:-webkit-autofill,
.gcs-d365-form .marketingForm .gcs-has-error input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var( --gcs-d365-autofill-bg ) inset,
		0 0 0 3px var( --gcs-d365-error-soft ) !important;
	box-shadow: 0 0 0 1000px var( --gcs-d365-autofill-bg ) inset,
		0 0 0 3px var( --gcs-d365-error-soft ) !important;
}

/* iOS repaints the field on touch-start and flashes the caret. */
.gcs-d365-form .marketingForm input,
.gcs-d365-form .marketingForm textarea {
	-webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media ( max-width: 767px ) {
	.gcs-d365-form {
		--gcs-d365-field-h: 56px;
		--gcs-d365-pad-x: 22px;
		--gcs-d365-gap-y: 14px;
	}

	.gcs-d365-form--cols-2 .marketingForm .columnContainer > .textFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm .columnContainer > .phoneFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm .columnContainer > .lookupFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm .columnContainer > .dateTimeFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm .columnContainer > .optionSetFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm .columnContainer > .multiOptionSetFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm th.inner > .textFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm th.inner > .phoneFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm th.inner > .lookupFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm th.inner > .dateTimeFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm th.inner > .optionSetFormFieldBlock,
	.gcs-d365-form--cols-2 .marketingForm th.inner > .multiOptionSetFormFieldBlock {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.gcs-d365-form .marketingForm button[type="submit"],
	.gcs-d365-form .marketingForm input[type="submit"] {
		width: 100% !important;
	}
}

/* ==========================================================================
   Native validation summary
   ========================================================================== */

/* Clipped rather than display:none — each invalid input's aria-labelledby
   points into this container, and display:none would drop it from the
   accessibility tree along with the error text. */
.gcs-d365-form .gcs-d365-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}