/**
 * Product Enquiry for Drive Mobility.
 *
 * Field and button styling is inherited from Elementor. Only the rules
 * Elementor scopes to a single widget on a single page are redeclared,
 * so the form matches the site contact form on every product page.
 */

/* ---------- the trigger button ----------
	Two theme rules were leaking into this button:

	1. .elementor-button{background-color:#69727d} is Elementor's BASE
		default. The site's blue and green buttons only get their colour from
		.elementor-widget-button or .elementor-widget-form wrappers, which a
		shortcode-rendered button is not inside, so it fell through to grey.
	2. [type=button],[type=submit],button{border:1px solid #c36;color:#c36}
		is the theme's generic button reset, which is where the pink border
		came from.

	So this button is styled explicitly rather than by inheritance. The
	selector carries a class AND an element so it outranks both of the
	above regardless of stylesheet order. */
button.dm-enquiry-open,
a.dm-enquiry-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	background-color: var( --e-global-color-b383475, #006C93 );
	background-image: none;
	color: #fff;
	fill: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s, background-color .2s;
}

button.dm-enquiry-open:hover,
button.dm-enquiry-open:focus,
a.dm-enquiry-open:hover,
a.dm-enquiry-open:focus {
	border: 0;
	background-color: var( --e-global-color-b383475, #006C93 );
	color: #fff;
	filter: brightness( 1.12 );
}

button.dm-enquiry-open:focus-visible,
a.dm-enquiry-open:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #8CA21F );
	outline-offset: 2px;
}

.dm-enquiry-open .elementor-button-content-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.dm-enquiry-open .elementor-button-icon {
	display: flex;
	align-items: center;
	line-height: 0;
}

.dm-enquiry-open svg * {
	stroke: currentColor;
}

/* ---------- modal shell ---------- */
.dm-enquiry-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba( 26, 40, 60, .55 );
}

.dm-enquiry-modal.is-open {
	display: flex;
}

.dm-enquiry-panel,
.dm-enquiry-panel input,
.dm-enquiry-panel select,
.dm-enquiry-panel textarea,
.dm-enquiry-panel button {
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.dm-enquiry-panel {
	position: relative;
	width: 100%;
	max-width: 580px;
	max-height: 92vh;
	overflow-y: auto;
	padding: 26px;
	border-radius: 8px;
	background: #F7F9FA;
	color: var( --e-global-color-text, #2B3A4E );
	box-shadow: 0 18px 60px rgba( 0, 0, 0, .3 );
}

.dm-enquiry-panel button.dm-enquiry-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --e-global-color-b383475, #006C93 );
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.dm-enquiry-panel button.dm-enquiry-close svg {
	display: block;
	width: 20px;
	height: 20px;
}

.dm-enquiry-panel button.dm-enquiry-close svg * {
	stroke: currentColor;
}

.dm-enquiry-panel button.dm-enquiry-close:hover,
.dm-enquiry-panel button.dm-enquiry-close:focus {
	border: 0;
	background: #e6eff4;
	color: var( --e-global-color-b383475, #006C93 );
}

.dm-enquiry-panel button.dm-enquiry-close:focus-visible {
	outline: 2px solid var( --e-global-color-b383475, #006C93 );
	outline-offset: 2px;
}

/* ---------- product header ---------- */
.dm-enquiry-head {
	display: flex;
	gap: 16px;
	align-items: center;
	margin: 0 0 22px;
	padding-right: 48px;
}

.dm-enquiry-thumb {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	padding: 4px;
	border: 1px solid #8F97AF80;
	border-radius: 6px;
	background: #fff;
	object-fit: contain;
}

.dm-enquiry-head strong {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.dm-enquiry-head span {
	font-size: 13.5px;
	color: #5d6b7e;
}

/* ---------- field colours Elementor scopes per widget ---------- */
.dm-enquiry-form .elementor-field-group .elementor-field:not( .elementor-select-wrapper ),
.dm-enquiry-form .elementor-field-group .elementor-select-wrapper select {
	background-color: #fff;
	border-color: #8F97AF80;
}

.dm-enquiry-form .elementor-field-group .elementor-select-wrapper::before {
	color: #8F97AF80;
}

.dm-enquiry-form .elementor-form-fields-wrapper {
	margin: 0 -8px -16px;
}

/* Elementor centres field groups vertically. In a two-column row that
	makes the shorter column float in the middle when its neighbour grows,
	which is what pushed Postcode down beside the store address. Align to
	the top so both columns start on the same line. */
.dm-enquiry-form .elementor-field-group {
	align-items: flex-start;
	align-content: flex-start;
	padding-right: 8px;
	padding-left: 8px;
	margin-bottom: 16px;
}

.dm-enquiry-form .elementor-form-fields-wrapper {
	align-items: flex-start;
}

.dm-enquiry-form .elementor-labels-above .elementor-field-group > label {
	padding-bottom: 8px;
	color: var( --e-global-color-text, #2B3A4E );
}

.dm-enquiry-form textarea.elementor-field-textual {
	padding-top: 10px;
	padding-bottom: 10px;
	resize: vertical;
}

/* ---------- submit button ---------- */
.dm-enquiry-form .elementor-button-content-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
}

.dm-enquiry-form .elementor-button span {
	gap: 16px;
}

.dm-enquiry-form .elementor-button-icon {
	display: flex;
	align-items: center;
	line-height: 0;
}

.dm-enquiry-form button.dm-enquiry-submit {
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	background-color: var( --e-global-color-accent, #8CA21F );
	background-image: none;
	color: #fff;
	fill: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
	transition: filter .2s;
}

.dm-enquiry-form button.dm-enquiry-submit:hover,
.dm-enquiry-form button.dm-enquiry-submit:focus {
	border: 0;
	background-color: var( --e-global-color-accent, #8CA21F );
	color: #fff;
	filter: brightness( 1.08 );
}

.dm-enquiry-form button.dm-enquiry-submit:focus-visible {
	outline: 2px solid var( --e-global-color-b383475, #006C93 );
	outline-offset: 2px;
}

.dm-enquiry-form button.dm-enquiry-submit svg * {
	stroke: currentColor;
}

.dm-enquiry-form .e-form__buttons {
	display: flex;
	justify-content: flex-end;
}

.dm-enquiry-form button.dm-enquiry-submit[disabled] {
	opacity: .6;
	cursor: default;
}

/* ---------- required marker ----------
	Elementor only draws its asterisk when the form carries
	.elementor-mark-required, which a shortcode-rendered form does not
	inherit. This rule stands on its own so the marker always shows. */
.dm-enquiry-form .elementor-field-required > .elementor-field-label::after,
.dm-enquiry-form .elementor-field-required > .dm-enquiry-grouplabel::after {
	content: "*";
	margin-inline-start: 3px;
	color: #d63638;
	font-weight: 600;
}


/* ---------- enquiry reason chips ---------- */
.dm-enquiry-grouplabel {
	display: block;
	padding-bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #7c8798;
}

.dm-enquiry-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}

.dm-enquiry-chip {
	position: relative;
	display: inline-flex;
	margin: 0;
}

.dm-enquiry-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.dm-enquiry-chip span {
	display: inline-block;
	padding: 6px 11px;
	border: 1px solid #8F97AF80;
	border-radius: 3px;
	background: #fff;
	color: #5d6b7e;
	font-size: 13px;
	line-height: 18px;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}

.dm-enquiry-chip input:checked + span {
	border-color: var( --e-global-color-b383475, #006C93 );
	background: #e8f2f7;
	color: var( --e-global-color-b383475, #006C93 );
	font-weight: 500;
}

.dm-enquiry-chip input:focus-visible + span {
	outline: 2px solid var( --e-global-color-accent, #8CA21F );
	outline-offset: 2px;
}

.dm-enquiry-chip:hover input:not( :checked ) + span {
	border-color: #8F97AF;
}

.dm-enquiry-divider {
	width: 100%;
	padding: 0 8px;
	margin: 2px 0 18px;
}

.dm-enquiry-divider hr {
	margin: 0;
	border: 0;
	border-top: 1px solid #e3e8ee;
}

/* ---------- store address helper ---------- */
.dm-enquiry-store-address {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5d6b7e;
}

/* ---------- honeypot: off-screen, never display:none ---------- */
.dm-enquiry-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- messages ---------- */
.dm-enquiry-error {
	width: 100%;
	margin: 0 8px 16px;
	padding: 11px 14px;
	border: 1px solid #f0b8b3;
	border-radius: 3px;
	background: #fdeded;
	color: #a3281c;
	font-size: 14px;
}

.dm-enquiry-form .elementor-field-textual.dm-enquiry-invalid {
	border-color: #d33;
}

.dm-enquiry-privacy {
	max-width: 52ch;
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5d6b7e;
}

/* The theme styles bare links pink (#c36). Set the colour here so links
	inside the popup read as links in the brand colour, not as errors. */
.dm-enquiry-panel .dm-enquiry-privacy a,
.dm-enquiry-panel .dm-enquiry-privacy a:link,
.dm-enquiry-panel .dm-enquiry-privacy a:visited {
	color: var( --e-global-color-b383475, #006C93 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dm-enquiry-panel .dm-enquiry-privacy a:hover,
.dm-enquiry-panel .dm-enquiry-privacy a:focus {
	color: var( --e-global-color-b383475, #006C93 );
	text-decoration: none;
}

.dm-enquiry-success {
	padding: 40px 8px 34px;
	text-align: center;
}

.dm-enquiry-tick {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: #eaf6ef;
	color: #1e7e5a;
}

.dm-enquiry-success h4 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.dm-enquiry-success p {
	max-width: 38ch;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	color: #5d6b7e;
}

/* ---------- small screens ---------- */
@media ( max-width: 560px ) {
	.dm-enquiry-panel {
		padding: 20px;
	}

	.dm-enquiry-form .elementor-col-50 {
		width: 100%;
	}

	.dm-enquiry-form .e-form__buttons {
		justify-content: stretch;
	}

	.dm-enquiry-form button.dm-enquiry-submit {
		width: 100%;
	}

	.dm-enquiry-head {
		gap: 12px;
	}

	.dm-enquiry-thumb {
		width: 60px;
		height: 60px;
	}

	.dm-enquiry-success h4 {
		font-size: 23px;
	}

	.dm-enquiry-success {
		padding: 30px 4px 26px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dm-enquiry-chip span {
		transition: none;
	}
}

/* A radio group that failed validation. The radios themselves are 1px and
	invisible, so the feedback has to sit on the chips the visitor can see. */
.dm-enquiry-form .dm-enquiry-group-invalid .dm-enquiry-chip span {
	border-color: #d63638;
}

.dm-enquiry-form .dm-enquiry-group-invalid .dm-enquiry-grouplabel {
	color: #d63638;
}