/* =========================================================
   The Boss Digital – Customer Lead Popup
   Public stylesheet. All visual tokens are CSS custom
   properties injected dynamically from the Design settings
   (see BDLP_Frontend::build_dynamic_css). Defaults below
   match the reference: a single dark (#141414) surface for
   both the header (logo/heading/description) and the form
   section — no blue, no gradients.

   Every rule is scoped under #bdlp-root and uses !important
   on the properties most commonly clobbered by theme/page-
   builder CSS (Elementor, global button/link resets, etc.),
   per client requirement. The popup must never inherit
   blue/cyan link colours or black text from the site theme.
   ========================================================= */

:root {
	--bdlp-font: 'Poppins', Arial, sans-serif;
	--bdlp-width: 560px;
	--bdlp-padding: 32px;
	--bdlp-radius: 12px;
	--bdlp-border-color: rgba(255, 255, 255, 0.16);
	--bdlp-border-width: 1px;
	--bdlp-overlay-opacity: 0.72;
	--bdlp-overlay-blur: 8px;
	--bdlp-header-bg: #141414;
	--bdlp-card: #141414;
	--bdlp-text: #ffffff;
	--bdlp-text-secondary: #A0A0A0;
	--bdlp-btn-bg: #ffffff;
	--bdlp-btn-text: #141414;
	--bdlp-input-bg: #141414;
	--bdlp-input-border: rgba(255, 255, 255, 0.18);
	--bdlp-input-text: #ffffff;
	--bdlp-heading-size: 28px;
	--bdlp-body-size: 14px;
	--bdlp-button-size: 14px;
	--bdlp-logo-width: 110px;
}

#bdlp-root,
#bdlp-root * {
	box-sizing: border-box !important;
}

#bdlp-root {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: none;
	font-family: var(--bdlp-font) !important;
	-webkit-font-smoothing: antialiased;
	line-height: normal;
}

#bdlp-root.bdlp-is-open {
	display: block;
}

#bdlp-root.bdlp-preview-mode {
	position: fixed !important;
}

/* ---------- Overlay ---------- */

#bdlp-root .bdlp-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, var(--bdlp-overlay-opacity)) !important;
	-webkit-backdrop-filter: blur(var(--bdlp-overlay-blur));
	backdrop-filter: blur(var(--bdlp-overlay-blur));
	opacity: 0;
	transition: opacity 0.28s ease;
	margin: 0 !important;
	border: none !important;
}

/* Fallback for browsers without backdrop-filter support: darker overlay to compensate. */
@supports not (backdrop-filter: blur(1px)) {
	#bdlp-root .bdlp-overlay {
		background: rgba(0, 0, 0, calc(var(--bdlp-overlay-opacity) + 0.15)) !important;
	}
}

#bdlp-root.bdlp-is-open .bdlp-overlay {
	opacity: 1;
}

/* ---------- Dialog (the card itself) ---------- */

#bdlp-root .bdlp-dialog {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: var(--bdlp-width) !important;
	max-width: calc(100vw - 32px) !important;
	max-height: calc(100vh - 32px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	background: var(--bdlp-card) !important;
	border: var(--bdlp-border-width) solid var(--bdlp-border-color) !important;
	border-radius: var(--bdlp-radius) !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--bdlp-text) !important;
	transform: translate(-50%, -48%) scale(0.97);
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55) !important;
	list-style: none !important;
}

#bdlp-root.bdlp-is-open .bdlp-dialog {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

#bdlp-root .bdlp-dialog:focus {
	outline: none !important;
}

/* Thin scrollbar for the rare case the dialog needs to scroll. */
#bdlp-root .bdlp-dialog::-webkit-scrollbar {
	width: 6px;
}

#bdlp-root .bdlp-dialog::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 6px;
}

/* ---------- Header (logo, heading, description) ---------- */

#bdlp-root .bdlp-header {
	position: relative !important;
	background: var(--bdlp-header-bg) !important;
	padding: 40px 32px 28px !important;
	text-align: center !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#bdlp-root .bdlp-logo {
	display: flex !important;
	justify-content: center !important;
	margin: 0 0 18px !important;
}

#bdlp-root .bdlp-logo img {
	width: var(--bdlp-logo-width) !important;
	height: auto !important;
	max-width: 100% !important;
	display: block !important;
	margin: 0 auto !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	filter: none !important;
}

/* ---------- Close button ---------- */

#bdlp-root .bdlp-close {
	all: unset;
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.10) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	cursor: pointer !important;
	font-family: Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	transition: background-color 0.2s ease !important;
	z-index: 3 !important;
	box-shadow: none !important;
}

#bdlp-root .bdlp-close:hover,
#bdlp-root .bdlp-close:focus-visible {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}

#bdlp-root .bdlp-close:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 2px !important;
}

/* Voice control sits on the opposite side of the header. */
#bdlp-root .bdlp-voice-control {
	all: unset;
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	width: 36px !important;
	height: 36px !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.10) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	cursor: pointer !important;
	z-index: 3 !important;
}

#bdlp-root .bdlp-voice-control.bdlp-voice-visible {
	display: flex !important;
}

#bdlp-root .bdlp-voice-control:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

/* ---------- Header typography ---------- */

#bdlp-root .bdlp-heading {
	font-family: var(--bdlp-font) !important;
	font-size: var(--bdlp-heading-size) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	color: var(--bdlp-text) !important;
	text-align: center !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#bdlp-root .bdlp-subheading {
	font-family: var(--bdlp-font) !important;
	font-size: var(--bdlp-body-size) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--bdlp-text-secondary) !important;
	margin: 0 auto !important;
	max-width: 420px;
	text-align: center !important;
}

/* ---------- Body (form section — same dark surface) ---------- */

#bdlp-root .bdlp-body {
	background: var(--bdlp-card) !important;
	padding: var(--bdlp-padding) !important;
	border: none !important;
}

/* ---------- Form ---------- */

#bdlp-root .bdlp-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#bdlp-root .bdlp-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 9px !important;
}

#bdlp-root .bdlp-label {
	font-family: var(--bdlp-font) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--bdlp-text-secondary) !important;
	margin: 0 !important;
}

#bdlp-root .bdlp-input,
#bdlp-root input.bdlp-input,
#bdlp-root .bdlp-country-trigger {
	width: 100% !important;
	height: 52px !important;
	background: var(--bdlp-input-bg) !important;
	border: 1px solid var(--bdlp-input-border) !important;
	border-radius: 10px !important;
	color: var(--bdlp-input-text) !important;
	font-family: var(--bdlp-font) !important;
	font-size: var(--bdlp-body-size) !important;
	font-weight: 400 !important;
	padding: 0 16px !important;
	margin: 0 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

#bdlp-root .bdlp-input::placeholder {
	color: var(--bdlp-text-secondary) !important;
	opacity: 0.8 !important;
}

#bdlp-root .bdlp-input:focus,
#bdlp-root .bdlp-input:focus-visible {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

#bdlp-root .bdlp-phone-row {
	display: flex !important;
	align-items: stretch !important;
	gap: 8px !important;
	margin: 0 !important;
}

#bdlp-root .bdlp-dial-code {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 14px !important;
	height: 52px !important;
	background: var(--bdlp-input-bg) !important;
	border: 1px solid var(--bdlp-input-border) !important;
	border-radius: 10px !important;
	color: var(--bdlp-input-text) !important;
	font-family: var(--bdlp-font) !important;
	font-size: var(--bdlp-body-size) !important;
	min-width: 56px !important;
}

#bdlp-root .bdlp-phone-input {
	flex: 1 1 auto !important;
}

#bdlp-root .bdlp-or {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	color: var(--bdlp-text-secondary) !important;
	font-family: var(--bdlp-font) !important;
	font-size: 10.5px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	margin: 10px 0 !important;
}

#bdlp-root .bdlp-or::before,
#bdlp-root .bdlp-or::after {
	content: '' !important;
	flex: 1 !important;
	height: 1px !important;
	background: var(--bdlp-input-border) !important;
}

#bdlp-root .bdlp-error {
	font-family: var(--bdlp-font) !important;
	font-size: 12px !important;
	color: #ff6b6b !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	min-height: 0;
	display: none;
	list-style: none !important;
}

#bdlp-root .bdlp-error.bdlp-error-visible {
	display: block !important;
}

#bdlp-root .bdlp-privacy {
	font-family: var(--bdlp-font) !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
	color: var(--bdlp-text-secondary) !important;
	margin: 0 !important;
}

#bdlp-root .bdlp-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------- Country select ---------- */

#bdlp-root .bdlp-country-select {
	position: relative !important;
}

#bdlp-root .bdlp-country-trigger {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	text-align: left !important;
}

#bdlp-root .bdlp-country-trigger:focus-visible {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

#bdlp-root .bdlp-country-trigger .bdlp-country-name {
	flex: 1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	color: var(--bdlp-input-text) !important;
}

#bdlp-root .bdlp-chevron {
	flex: 0 0 auto !important;
	color: var(--bdlp-text-secondary) !important;
	transition: transform 0.2s ease !important;
}

#bdlp-root .bdlp-country-select.bdlp-open .bdlp-chevron {
	transform: rotate(180deg);
}

#bdlp-root .bdlp-country-panel {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	right: 0 !important;
	max-width: 100% !important;
	background: #1c1c1c !important;
	border: 1px solid var(--bdlp-input-border) !important;
	border-radius: 10px !important;
	padding: 10px !important;
	z-index: 5 !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
	margin: 0 !important;
}

#bdlp-root .bdlp-country-search {
	width: 100% !important;
	height: 40px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid var(--bdlp-input-border) !important;
	border-radius: 8px !important;
	color: var(--bdlp-input-text) !important;
	font-family: var(--bdlp-font) !important;
	font-size: 13.5px !important;
	padding: 0 10px !important;
	margin: 0 0 8px !important;
}

#bdlp-root .bdlp-country-search:focus-visible {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

#bdlp-root .bdlp-country-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: 220px !important;
	overflow-y: auto !important;
}

#bdlp-root .bdlp-country-option {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 8px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	font-family: var(--bdlp-font) !important;
	font-size: 13.5px !important;
	color: var(--bdlp-input-text) !important;
	margin: 0 !important;
	list-style: none !important;
}

#bdlp-root .bdlp-country-option:hover,
#bdlp-root .bdlp-country-option.bdlp-active {
	background: rgba(255, 255, 255, 0.08) !important;
}

#bdlp-root .bdlp-country-option[hidden] {
	display: none !important;
}

/* ---------- Submit button ---------- */

#bdlp-root .bdlp-submit,
#bdlp-root button.bdlp-submit {
	all: unset;
	box-sizing: border-box !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: var(--bdlp-btn-bg) !important;
	color: var(--bdlp-btn-text) !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: var(--bdlp-font) !important;
	font-weight: 600 !important;
	font-size: var(--bdlp-button-size) !important;
	height: 52px !important;
	padding: 0 20px !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

#bdlp-root .bdlp-submit:hover {
	opacity: 0.9 !important;
	transform: translateY(-1px);
}

#bdlp-root .bdlp-submit:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 2px !important;
}

#bdlp-root .bdlp-submit[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none;
}

#bdlp-root .bdlp-submit svg {
	flex: 0 0 auto !important;
}

/* ---------- Thank you screen ---------- */

#bdlp-root .bdlp-screen-thankyou {
	text-align: center !important;
}

#bdlp-root .bdlp-screen-thankyou[hidden] {
	display: none !important;
}

#bdlp-root .bdlp-check {
	width: 54px !important;
	height: 54px !important;
	margin: 0 auto 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	border: 1px solid var(--bdlp-input-border) !important;
	color: var(--bdlp-text) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

#bdlp-root .bdlp-thankyou-heading {
	font-family: var(--bdlp-font) !important;
	font-size: calc(var(--bdlp-heading-size) - 6px) !important;
	font-weight: 700 !important;
	color: var(--bdlp-text) !important;
	margin: 0 0 10px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

#bdlp-root .bdlp-thankyou-message {
	font-family: var(--bdlp-font) !important;
	font-size: var(--bdlp-body-size) !important;
	line-height: 1.6 !important;
	color: var(--bdlp-text-secondary) !important;
	margin: 0 0 26px !important;
}

/* ---------- Animation states ---------- */

#bdlp-root .bdlp-screen {
	animation: bdlp-fade-in 0.3s ease;
}

@keyframes bdlp-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#bdlp-root .bdlp-dialog,
	#bdlp-root .bdlp-overlay,
	#bdlp-root .bdlp-screen,
	#bdlp-root .bdlp-close {
		transition: none !important;
		animation: none !important;
	}
}

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

@media (max-width: 1024px) {
	#bdlp-root .bdlp-dialog {
		width: min(var(--bdlp-width), calc(100vw - 32px)) !important;
	}
}

@media (max-width: 640px) {
	#bdlp-root .bdlp-dialog {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important; /* fallback for browsers without dvh support */
		max-height: calc(100dvh - 24px) !important;
		border-radius: 12px !important;
	}

	/* Hide the location selector entirely on mobile — it takes up no
	   space (display:none removes it from the flex layout, so the
	   surrounding gap collapses automatically) and the hidden
	   country_code input keeps its default value, so submissions still
	   validate server-side without the visitor ever seeing this field. */
	#bdlp-root .bdlp-field-location {
		display: none !important;
	}

	#bdlp-root .bdlp-header {
		padding: 26px 20px 18px !important;
	}

	#bdlp-root .bdlp-logo {
		margin: 0 0 12px !important;
	}

	#bdlp-root .bdlp-logo img {
		width: 90px !important;
	}

	#bdlp-root .bdlp-body {
		padding: 20px !important;
	}

	#bdlp-root .bdlp-form {
		gap: 14px !important;
	}

	#bdlp-root .bdlp-heading {
		font-size: max(24px, min(26px, calc(var(--bdlp-heading-size) - 2px))) !important;
		line-height: 1.15 !important;
		font-weight: 700 !important;
	}

	#bdlp-root .bdlp-subheading {
		font-size: 13px !important;
		line-height: 1.45 !important;
	}

	#bdlp-root .bdlp-input::placeholder {
		color: #777777 !important;
	}

	#bdlp-root .bdlp-overlay {
		background: rgba(0, 0, 0, 0.70) !important;
	}

	#bdlp-root .bdlp-close,
	#bdlp-root .bdlp-voice-control {
		top: 12px !important;
	}

	#bdlp-root .bdlp-close {
		right: 12px !important;
	}

	#bdlp-root .bdlp-voice-control {
		left: 12px !important;
	}
}

@media (max-width: 380px) {
	#bdlp-root .bdlp-phone-row {
		flex-wrap: wrap !important;
	}

	#bdlp-root .bdlp-dial-code {
		min-width: 100% !important;
	}
}