/**
 * Quote Enquiry Popup – core styles.
 *
 * Everything is scoped to .qep-popup and uses plain element selectors, so
 * the form looks the same whichever plugin generated it. Form-plugin
 * specifics live in qep-integrations.css.
 *
 * Customise through the CSS variables below, or override any rule with a
 * selector that starts with #qep-popup (an id outranks every rule here).
 */

.qep-popup {
	/* Colours */
	--qep-overlay: rgba(15, 17, 20, 0.62);
	--qep-panel-bg: #ffffff;
	--qep-text: #1d2125;
	--qep-muted: #5a6168;
	--qep-heading-color: var(--qep-text);
	--qep-eyebrow-color: var(--qep-muted);
	--qep-accent: #1d2125;
	--qep-accent-text: #ffffff;
	--qep-accent-hover: #3b4148;
	--qep-accent-hover-text: var(--qep-accent-text);
	--qep-focus: #1d2125;
	--qep-focus-ring: rgba(29, 33, 37, 0.18);
	--qep-field-bg: #ffffff;
	--qep-field-text: var(--qep-text);
	--qep-field-border: #d3d7db;
	--qep-field-border-hover: #a9afb5;
	--qep-placeholder: #8a9096;
	--qep-label-color: var(--qep-text);
	--qep-error: #c62828;
	--qep-error-bg: #fdecea;
	--qep-success: #2e7d32;
	--qep-success-bg: #edf7ee;
	--qep-warning: #8a6100;
	--qep-warning-bg: #fff6e0;

	/* Typography */
	--qep-font-family: inherit;
	--qep-heading-font-family: var(--qep-font-family);
	--qep-heading-size: clamp(28px, 5vw, 36px);
	--qep-heading-weight: 600;
	--qep-heading-spacing: -0.02em;
	--qep-eyebrow-size: 10px;
	--qep-eyebrow-spacing: 0.2em;
	--qep-body-size: 13px;
	--qep-label-size: 12px;
	--qep-label-weight: 600;
	--qep-field-font-size: 13px; /* Raised to 16px on touch devices so iOS does not zoom. */
	--qep-button-font-size: 13px;
	--qep-button-weight: 700;
	--qep-button-transform: none;
	--qep-button-spacing: 0.01em;
	--qep-required-color: var(--qep-error);
	--qep-optional-color: var(--qep-placeholder);
	--qep-fineprint-color: var(--qep-muted);

	/* Shape and spacing */
	--qep-panel-max-width: 620px;
	--qep-panel-padding-y: 32px;
	--qep-panel-padding-x: 36px;
	--qep-panel-padding-bottom: var(--qep-panel-padding-y);
	--qep-panel-radius: 20px;
	--qep-panel-border: transparent;
	--qep-panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
	--qep-gutter: 24px;
	--qep-gap: 16px;
	--qep-field-height: 46px;
	--qep-field-padding-x: 12px;
	--qep-field-radius: 9px;
	--qep-field-border-width: 1px;
	--qep-textarea-height: 80px;
	--qep-button-height: 46px;
	--qep-button-radius: 30px;
	--qep-close-size: 44px;
	--qep-close-offset: 4px; /* Distance of the close button from the panel corner. */
	--qep-close-font-size: 26px;
	--qep-z-index: 2147483000; /* Only used where <dialog> is unsupported. */

	/* Offer card */
	--qep-promo-bg: #f6f7f8;
	--qep-promo-border: #e3e5e8;
	--qep-promo-accent: var(--qep-accent); /* Thick left edge. */
	--qep-promo-rule: #d9dce0; /* Divider between the figure and the text. */
	--qep-promo-label-color: var(--qep-muted);
	--qep-promo-value-color: var(--qep-text);
	--qep-promo-value-size: 32px;
	--qep-promo-title-color: var(--qep-text);
	--qep-promo-title-size: 13px;
	--qep-promo-text-color: var(--qep-muted);
	--qep-promo-text-size: 11px;

	/* Dialog: a transparent full-viewport layer that also draws the overlay.
	   (::backdrop is left transparent because older browsers do not pass CSS
	   variables to it.) */
	position: fixed;
	inset: 0;
	z-index: var(--qep-z-index);
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: max(var(--qep-gutter), env(safe-area-inset-top)) max(var(--qep-gutter), env(safe-area-inset-right)) max(var(--qep-gutter), env(safe-area-inset-bottom)) max(var(--qep-gutter), env(safe-area-inset-left));
	border: 0;
	background: var(--qep-overlay);
	color: var(--qep-text);
	font-family: var(--qep-font-family);
	font-size: var(--qep-body-size);
	line-height: 1.5;
	text-align: left;
	letter-spacing: normal;
	overflow: hidden;
}

.qep-popup[open] {
	display: flex;
}

.qep-popup::backdrop {
	background: transparent;
}

.qep-popup *,
.qep-popup *::before,
.qep-popup *::after {
	box-sizing: border-box;
}

html.qep-scroll-locked,
html.qep-scroll-locked body {
	overflow: hidden;
}

/* Panel: scrolls internally when the form is taller than the viewport. */
.qep-popup .qep-popup__panel {
	position: relative;
	width: 100%;
	max-width: var(--qep-panel-max-width);
	max-height: 100%;
	margin: auto;
	padding: var(--qep-panel-padding-y) var(--qep-panel-padding-x) var(--qep-panel-padding-bottom);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--qep-panel-bg);
	border: 1px solid var(--qep-panel-border); /* Also visible in forced-colours mode. */
	border-radius: var(--qep-panel-radius);
	box-shadow: var(--qep-panel-shadow);
}

.qep-popup .qep-popup__panel:focus {
	outline: none; /* Receives programmatic focus only, to announce the dialog. */
}

/* Close button: sticky so it stays reachable while the panel scrolls.
   Sticky offsets are measured from inside the panel's padding, hence the
   negative top. */
.qep-popup .qep-popup__close-bar {
	position: sticky;
	top: calc(var(--qep-close-offset) - var(--qep-panel-padding-y));
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	height: 0;
	margin-top: calc(var(--qep-close-offset) - var(--qep-panel-padding-y));
	margin-right: calc(var(--qep-close-offset) - var(--qep-panel-padding-x));
	margin-bottom: calc(var(--qep-panel-padding-y) - var(--qep-close-offset));
	pointer-events: none;
}

.qep-popup .qep-popup__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--qep-close-size);
	min-width: 0;
	height: var(--qep-close-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--qep-text);
	font-family: inherit;
	font-size: var(--qep-close-font-size);
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.qep-popup .qep-popup__close:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--qep-text);
}

.qep-popup .qep-popup__close:focus-visible {
	outline: 2px solid var(--qep-focus);
	outline-offset: 2px;
}

.qep-popup .qep-popup__close span {
	display: block;
	margin-top: -2px;
}

/* Header */
.qep-popup .qep-popup__header {
	margin: 0 0 24px;
	padding-right: 32px; /* Clear of the close button when the header comes first. */
}

.qep-popup .qep-popup__promo + .qep-popup__header {
	padding-right: 0;
}

.qep-popup .qep-popup__eyebrow {
	margin: 0 0 10px;
	padding: 0;
	color: var(--qep-eyebrow-color);
	font-family: var(--qep-font-family);
	font-size: var(--qep-eyebrow-size);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: var(--qep-eyebrow-spacing);
	text-transform: uppercase;
}

.qep-popup .qep-popup__title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--qep-heading-color);
	font-family: var(--qep-heading-font-family);
	font-size: var(--qep-heading-size);
	font-weight: var(--qep-heading-weight);
	line-height: 1.15;
	letter-spacing: var(--qep-heading-spacing);
	text-transform: none;
}

.qep-popup .qep-popup__description {
	margin: 0;
	padding: 0;
	color: var(--qep-muted);
	font-size: var(--qep-body-size);
	line-height: 1.7;
}

/* Offer card at the top of the popup: figure | divider | title + text.
   The right margin leaves room for the close button's × beside it. */
.qep-popup .qep-popup__promo {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 7px 22px 25px 0;
	padding: 15px 14px;
	border: 1px solid var(--qep-promo-border);
	border-left: 5px solid var(--qep-promo-accent);
	border-radius: 12px;
	background: var(--qep-promo-bg);
}

.qep-popup .qep-popup__promo-badge {
	flex: 0 0 auto;
}

.qep-popup .qep-popup__promo-label {
	display: block;
	color: var(--qep-promo-label-color);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.qep-popup .qep-popup__promo-value {
	display: block;
	color: var(--qep-promo-value-color);
	font-size: var(--qep-promo-value-size);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.05em;
}

.qep-popup .qep-popup__promo-body {
	min-width: 0;
}

.qep-popup .qep-popup__promo-badge + .qep-popup__promo-body {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 16px;
	border-left: 1px solid var(--qep-promo-rule);
}

.qep-popup .qep-popup__promo-title {
	display: block;
	margin: 0 0 4px;
	color: var(--qep-promo-title-color);
	font-size: var(--qep-promo-title-size);
	font-weight: 700;
	line-height: 1.35;
}

.qep-popup .qep-popup__promo-text {
	display: block;
	color: var(--qep-promo-text-color);
	font-size: var(--qep-promo-text-size);
	line-height: 1.5;
}

.qep-popup .qep-popup__promo-title:last-child {
	margin-bottom: 0;
}

/* Fine print under the submit button. */
.qep-popup .qep-popup__fineprint {
	margin: 10px 0 0;
	padding: 0;
	color: var(--qep-fineprint-color);
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
}

/* Required / optional markers inside labels. */
.qep-popup .qep-required {
	color: var(--qep-required-color);
}

.qep-popup .qep-field-optional {
	color: var(--qep-optional-color);
	font-size: 11px;
	font-weight: 400;
}

/* ------------------------------------------------------------------
 * Form – generic element styling
 * ---------------------------------------------------------------- */

.qep-popup .qep-popup__form {
	position: relative;
	container-type: inline-size;
	container-name: qep-form;
}

.qep-popup .qep-popup__form form {
	margin: 0;
	padding: 0;
}

.qep-popup .qep-popup__form p {
	margin: 0 0 var(--qep-gap);
	padding: 0;
}

.qep-popup .qep-popup__form label,
.qep-popup .qep-popup__form legend {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	color: var(--qep-label-color);
	font-family: var(--qep-font-family);
	font-size: var(--qep-label-size);
	font-weight: var(--qep-label-weight);
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

.qep-popup .qep-popup__form fieldset {
	min-width: 0;
	margin: 0 0 var(--qep-gap);
	padding: 0;
	border: 0;
}

/* Text-like controls. Display is left alone so plugins can still hide
   honeypot fields. */
.qep-popup .qep-popup__form input:not([type]),
.qep-popup .qep-popup__form input[type="text"],
.qep-popup .qep-popup__form input[type="email"],
.qep-popup .qep-popup__form input[type="tel"],
.qep-popup .qep-popup__form input[type="url"],
.qep-popup .qep-popup__form input[type="number"],
.qep-popup .qep-popup__form input[type="password"],
.qep-popup .qep-popup__form input[type="search"],
.qep-popup .qep-popup__form input[type="date"],
.qep-popup .qep-popup__form input[type="datetime-local"],
.qep-popup .qep-popup__form input[type="time"],
.qep-popup .qep-popup__form input[type="month"],
.qep-popup .qep-popup__form input[type="week"],
.qep-popup .qep-popup__form select,
.qep-popup .qep-popup__form textarea {
	width: 100%;
	max-width: 100%;
	min-height: var(--qep-field-height);
	margin: 0;
	padding: 12px var(--qep-field-padding-x);
	border: var(--qep-field-border-width) solid var(--qep-field-border);
	border-radius: var(--qep-field-radius);
	background-color: var(--qep-field-bg);
	box-shadow: none;
	color: var(--qep-field-text);
	font-family: var(--qep-font-family);
	font-size: var(--qep-field-font-size);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: top;
	outline: 2px solid transparent; /* Shows the focus state in forced-colours mode. */
	outline-offset: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qep-popup .qep-popup__form textarea {
	height: var(--qep-textarea-height);
	min-height: var(--qep-textarea-height);
	resize: vertical;
}

.qep-popup .qep-popup__form select {
	padding-right: calc(var(--qep-field-padding-x) + 24px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6168' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right var(--qep-field-padding-x) center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	cursor: pointer;
}

.qep-popup .qep-popup__form select[multiple] {
	padding-right: var(--qep-field-padding-x);
	background-image: none;
}

.qep-popup .qep-popup__form input:not([type]):hover,
.qep-popup .qep-popup__form input[type="text"]:hover,
.qep-popup .qep-popup__form input[type="email"]:hover,
.qep-popup .qep-popup__form input[type="tel"]:hover,
.qep-popup .qep-popup__form input[type="url"]:hover,
.qep-popup .qep-popup__form input[type="number"]:hover,
.qep-popup .qep-popup__form input[type="date"]:hover,
.qep-popup .qep-popup__form select:hover,
.qep-popup .qep-popup__form textarea:hover {
	border-color: var(--qep-field-border-hover);
}

.qep-popup .qep-popup__form input:not([type]):focus,
.qep-popup .qep-popup__form input[type="text"]:focus,
.qep-popup .qep-popup__form input[type="email"]:focus,
.qep-popup .qep-popup__form input[type="tel"]:focus,
.qep-popup .qep-popup__form input[type="url"]:focus,
.qep-popup .qep-popup__form input[type="number"]:focus,
.qep-popup .qep-popup__form input[type="password"]:focus,
.qep-popup .qep-popup__form input[type="search"]:focus,
.qep-popup .qep-popup__form input[type="date"]:focus,
.qep-popup .qep-popup__form input[type="datetime-local"]:focus,
.qep-popup .qep-popup__form input[type="time"]:focus,
.qep-popup .qep-popup__form input[type="month"]:focus,
.qep-popup .qep-popup__form input[type="week"]:focus,
.qep-popup .qep-popup__form select:focus,
.qep-popup .qep-popup__form textarea:focus {
	border-color: var(--qep-focus);
	box-shadow: 0 0 0 3px var(--qep-focus-ring);
}

.qep-popup .qep-popup__form ::placeholder {
	color: var(--qep-placeholder);
	opacity: 1;
}

/* Invalid state: most form plugins set aria-invalid on failed fields. */
.qep-popup .qep-popup__form input[aria-invalid="true"],
.qep-popup .qep-popup__form select[aria-invalid="true"],
.qep-popup .qep-popup__form textarea[aria-invalid="true"] {
	border-color: var(--qep-error);
}

.qep-popup .qep-popup__form input[aria-invalid="true"]:focus,
.qep-popup .qep-popup__form select[aria-invalid="true"]:focus,
.qep-popup .qep-popup__form textarea[aria-invalid="true"]:focus {
	border-color: var(--qep-error);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.16);
}

/* Checkboxes and radios */
.qep-popup .qep-popup__form input[type="checkbox"],
.qep-popup .qep-popup__form input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--qep-accent);
	cursor: pointer;
}

.qep-popup .qep-popup__form label:has(> input[type="checkbox"]),
.qep-popup .qep-popup__form label:has(> input[type="radio"]) {
	display: inline-flex;
	align-items: flex-start;
	gap: 0;
	font-size: var(--qep-body-size);
	font-weight: 400;
	cursor: pointer;
}

/* Submit button */
.qep-popup .qep-popup__form :is(input[type="submit"], button[type="submit"], button:not([type])) {
	display: block;
	width: 100%;
	min-height: var(--qep-button-height);
	margin: 0;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--qep-button-radius);
	background: var(--qep-accent);
	box-shadow: none;
	color: var(--qep-accent-text);
	font-family: var(--qep-font-family);
	font-size: var(--qep-button-font-size);
	font-weight: var(--qep-button-weight);
	line-height: 1.3;
	letter-spacing: var(--qep-button-spacing);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: var(--qep-button-transform);
	white-space: normal;
	opacity: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.qep-popup .qep-popup__form :is(input[type="submit"], button[type="submit"], button:not([type])):hover {
	background: var(--qep-accent-hover);
	color: var(--qep-accent-hover-text);
	opacity: 1;
}

.qep-popup .qep-popup__form :is(input[type="submit"], button[type="submit"], button:not([type])):focus-visible {
	outline: 3px solid var(--qep-focus);
	outline-offset: 3px;
}

.qep-popup .qep-popup__form :is(input[type="submit"], button[type="submit"], button:not([type])):disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Status and validation messages rendered with ARIA roles. */
.qep-popup .qep-popup__form [role="alert"]:not(:empty) {
	color: var(--qep-error);
	font-size: var(--qep-label-size);
}

/* ------------------------------------------------------------------
 * Layout helpers for hand-written form markup (e.g. Contact Form 7)
 *   <div class="qep-row"> two fields side by side on wider popups
 *   <div class="qep-field"> one field with standard spacing
 *   <div class="qep-submit"> the submit button area
 * ---------------------------------------------------------------- */

.qep-popup .qep-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--qep-gap);
}

/* No margin of its own: Contact Form 7 wraps each field's contents in a <p>,
   which already carries the field spacing. */
.qep-popup .qep-field {
	min-width: 0;
	margin: 0;
}

.qep-popup .qep-submit {
	position: relative;
	margin: 3px 0 0; /* 19px below the last field, with the field spacing. */
}

.qep-popup .qep-submit > p {
	margin: 0;
}

@container qep-form (min-width: 460px) {
	.qep-popup .qep-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * Responsive sizing
 * ---------------------------------------------------------------- */

/* Touch devices: 16px fields stop iOS zooming in on focus. */
@media (hover: none) and (pointer: coarse) {
	.qep-popup {
		--qep-field-font-size: 16px;
	}
}

/* Tablet and mobile */
@media (max-width: 767px) {
	.qep-popup {
		--qep-gutter: 12px;
	}
}

/* Small phones */
@media (max-width: 480px) {
	.qep-popup {
		--qep-gutter: 8px;
		--qep-panel-padding-y: 29px;
		--qep-panel-padding-x: 19px;
		--qep-panel-padding-bottom: 22px;
		--qep-panel-radius: 16px;
		--qep-gap: 12px;
		--qep-promo-value-size: 27px;
		--qep-promo-title-size: 12px;
		--qep-promo-text-size: 10px;
	}

	.qep-popup .qep-popup__promo {
		gap: 10px;
		margin-right: 17px;
		padding: 12px 10px;
	}

	.qep-popup .qep-popup__promo-badge + .qep-popup__promo-body {
		padding-left: 10px;
	}

	.qep-popup .qep-popup__header {
		margin-bottom: 18px;
	}
}

/* Short landscape phones: use the full height. */
@media (max-height: 520px) {
	.qep-popup {
		--qep-gutter: 8px;
	}
}

/* ------------------------------------------------------------------
 * Motion, fallback and print
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.qep-popup.qep-popup--open {
		animation: qep-fade-in 0.2s ease-out;
	}

	.qep-popup.qep-popup--open .qep-popup__panel {
		animation: qep-rise-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
}

@keyframes qep-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes qep-rise-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.qep-popup,
	.qep-popup[open] {
		display: none;
	}
}