/**
 * HHP Site — Custom Popup CSS
 * Loaded via performance-tweaks.php mu-plugin.
 * Safe to edit — will never be overwritten by any plugin.
 */

/* ============================================================
   "Get Instant Quotation" Popup Redesign — pum-21178
   ============================================================ */

/* Overlay */
#pum-21178.pum-overlay {
	background: rgba(10,18,40,0.80) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* White card container */
#pum-21178 .pum-container {
	background: #ffffff !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,0.38), 0 6px 20px rgba(0,0,0,0.18) !important;
	padding: 0 !important;
	overflow: hidden !important;
	width: 480px !important;
	max-width: 96vw !important;
}

/* Animated accent bar at top */
#pum-21178 .pum-container::before {
	content: '';
	display: block;
	height: 5px;
	background: linear-gradient(90deg, #f59e0b 0%, #ef4444 50%, #f59e0b 100%);
	background-size: 200% 100%;
	animation: hhpShimmer 2.8s linear infinite;
}
@keyframes hhpShimmer {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}

/* Header */
#pum-21178 .pum-title {
	background: linear-gradient(135deg, #0a3880 0%, #1254c8 55%, #1a6ae0 100%) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	text-shadow: none !important;
	padding: 22px 52px 18px 36px !important;
	margin: 0 !important;
	position: relative !important;
}
#pum-21178 .pum-title::before {
	content: none !important;
	display: none !important;
}
#pum-21178 .pum-title::after {
	content: 'Get a response within 24 hours \2014 free & no obligation';
	display: block;
	font-size: 12px;
	font-weight: 400;
	opacity: 0.82;
	margin-top: 6px;
}

/* ── FIX 3: Close button — orange × circle like the reference image ── */
#pum-21178.pum-overlay .pum-container .pum-content + .pum-close,
#pum-21178 .pum-container .pum-close,
#pum-21178 .pum-close {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	bottom: auto !important;
	left: auto !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	/* White circle with orange glow — matches reference */
	background: #ffffff !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 4px rgba(251,146,60,0.25), 0 0 12px rgba(251,146,60,0.35) !important;
	color: #f97316 !important;
	font-size: 0 !important;         /* hide the "CLOSE" text */
	font-weight: 800 !important;
	line-height: 34px !important;
	text-align: center !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	z-index: 9999 !important;
	text-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: box-shadow 0.2s, transform 0.2s !important;
}
/* Draw the orange × using ::before */
#pum-21178 .pum-close::before {
	content: '\00D7' !important;  /* × */
	display: block !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #f97316 !important;
	line-height: 1 !important;
}
#pum-21178 .pum-close:hover {
	box-shadow: 0 0 0 6px rgba(251,146,60,0.35), 0 0 18px rgba(251,146,60,0.50) !important;
	transform: scale(1.08) !important;
}

/* Form content area */
#pum-21178 .pum-content {
	padding: 20px 24px 18px !important;
	color: #1a1a2e !important;
	font-weight: 400 !important;
	background: #ffffff !important;
}
#pum-21178 .WebPopup p {
	margin: 0 0 10px !important;
}

/* Text / email inputs */
#pum-21178 .WebPopup input[type="text"],
#pum-21178 .WebPopup input[type="email"] {
	width: 100% !important;
	height: 46px !important;
	padding: 0 14px !important;
	margin-bottom: 0 !important;
	background: #f5f8ff !important;
	border: 1.5px solid #cdd7f0 !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	color: #1a1a2e !important;
	box-shadow: none !important;
	outline: none !important;
	box-sizing: border-box !important;
}
#pum-21178 .WebPopup input[type="text"]:focus,
#pum-21178 .WebPopup input[type="email"]:focus {
	border-color: #1254c8 !important;
	box-shadow: 0 0 0 3px rgba(18,84,200,0.13) !important;
	background: #ffffff !important;
}
#pum-21178 .WebPopup input::placeholder { color: #9aaac8 !important; }

/* ── FIX 1: CAPTCHA — label + image on SAME line, input below ── */
#pum-21178 .WebPopup .col-sm-12[style*="color"] {
	background: #eef2ff !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	margin-bottom: 10px !important;
	color: #1a1a2e !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-sizing: border-box !important;
}
/* The <p> inside: row 1 = label + captcha image, row 2 = text input */
#pum-21178 .WebPopup .col-sm-12[style*="color"] p {
	margin: 0 !important;
	display: flex !important;
	flex-direction: row !important;        /* SAME LINE */
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	color: #1a1a2e !important;
	width: 100% !important;
}
/* Captcha image stays inline */
#pum-21178 .WebPopup .wpcf7-captcha-captcha-1 {
	display: inline-block !important;
	border-radius: 4px !important;
	border: 1px solid #cdd7f0 !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}
/* The span wrapper + input take the full remaining row */
#pum-21178 .WebPopup .wpcf7-form-control-wrap[data-name="captcha-1"],
#pum-21178 .WebPopup span.wpcf7-form-control-wrap {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	flex-basis: 100% !important;          /* forces input to next line */
}
#pum-21178 .WebPopup input.wpcf7-captchar {
	display: block !important;
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1.5px solid #cdd7f0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	font-size: 16px !important;
	letter-spacing: 4px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* ── FIX 2: Submit button — truly full width ── */
#pum-21178 .WebPopup .col-12.action,
#pum-21178 .WebPopup .col-12.col-xs-12.action {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
#pum-21178 .WebPopup .action > p {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
}
/* The span.btn-theme that has the inline padding:70px — kill it */
#pum-21178 .WebPopup span.btn-theme,
#pum-21178 .WebPopup .btn-theme.form-action,
#pum-21178 .WebPopup span.btn-theme.form-action.btncolor {
	display: block !important;
	width: 100% !important;
	padding: 0px 0px 2px 0px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	float: none !important;
	box-sizing: border-box !important;
}
/* The has-spinner wrapper around the actual input */
#pum-21178 .WebPopup .wpcf7-form-control.has-spinner,
#pum-21178 .WebPopup span.has-spinner {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/* The submit input itself */
#pum-21178 .WebPopup input[type="submit"].wpcf7-submit,
#pum-21178 .WebPopup .wpcf7-submit {
	display: block !important;
	width: 100% !important;
	height: 50px !important;
	background: linear-gradient(135deg, #1254c8, #0a3880) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 16px rgba(18,84,200,0.40) !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	float: none !important;
	text-indent: 0 !important;
	transition: transform 0.15s, box-shadow 0.15s !important;
}
#pum-21178 .WebPopup .wpcf7-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 7px 20px rgba(18,84,200,0.52) !important;
}

/* Validation */
#pum-21178 .wpcf7-not-valid {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
#pum-21178 .wpcf7-not-valid-tip {
	color: #ef4444 !important;
	font-size: 12px !important;
}
#pum-21178 .wpcf7-response-output {
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	margin: 8px 0 0 !important;
}

/* ── Extra specificity for submit wrapper — beats any inline style ── */
#pum-21178 .pum-content .wpcf7 .wpcf7-form .row.WebPopup .col-12.col-xs-12.action p span,
#pum-21178 .pum-content .wpcf7 .wpcf7-form span.btn-theme {
	all: unset !important;
	display: block !important;
	width: 100% !important;
	padding: 0px 0px 2px 0px !important;
	box-sizing: border-box !important;
}
#pum-21178 .pum-content .wpcf7 .wpcf7-form .row.WebPopup .col-12.col-xs-12.action p span input[type="submit"],
#pum-21178 .pum-content .wpcf7 .wpcf7-form input.wpcf7-submit {
	display: block !important;
	width: 100% !important;
	height: 50px !important;
	background: linear-gradient(135deg, #1254c8, #0a3880) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	box-shadow: 0 4px 16px rgba(18,84,200,0.40) !important;
	float: none !important;
	text-indent: 0 !important;
}

/* Privacy note — compact, no extra bottom gap */
#pum-21178 .pum-content::after {
	content: '\1F512  We respect your privacy. Your data is never shared.';
	display: block !important;
	font-size: 11px !important;
	color: #8a94b8 !important;
	text-align: center !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

/* Mobile */
@media (max-width: 520px) {
	#pum-21178 .pum-container {
		width: 94vw !important;
		border-radius: 12px !important;
	}
	#pum-21178 .pum-title {
		font-size: 18px !important;
		padding: 18px 44px 14px 20px !important;
	}
	#pum-21178 .pum-content {
		padding: 16px 16px 18px !important;
	}
}

/* ============================================================
   "Get Your Product Details" Popup Redesign — pum-19302
   Product page click-open popup (CF7 form 21104)
   Same design language as pum-21178
   ============================================================ */

/* Overlay */
#pum-19302.pum-overlay {
	background: rgba(10,18,40,0.82) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* White card container — taller since it has more fields */
#pum-19302 .pum-container {
	background: #ffffff !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,0.38), 0 6px 20px rgba(0,0,0,0.18) !important;
	padding: 0 !important;
	overflow: hidden !important;
	width: 480px !important;
	max-width: 96vw !important;
	max-height: 92vh !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Animated accent bar at top */
#pum-19302 .pum-container::before {
	content: '';
	display: block;
	flex-shrink: 0;
	height: 5px;
	background: linear-gradient(90deg, #f59e0b 0%, #ef4444 50%, #f59e0b 100%);
	background-size: 200% 100%;
	animation: hhpShimmer 2.8s linear infinite;
}

/* Header strip */
#pum-19302 .pum-title {
	flex-shrink: 0;
	background: linear-gradient(135deg, #0a3880 0%, #1254c8 55%, #1a6ae0 100%) !important;
	color: #ffffff !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	text-shadow: none !important;
	padding: 20px 52px 16px 36px !important;
	margin: 0 !important;
	position: relative !important;
}
#pum-19302 .pum-title::before {
	content: none !important;
	display: none !important;
}
#pum-19302 .pum-title::after {
	content: 'Fill in your details and we will get back to you shortly';
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	opacity: 0.82;
	margin-top: 5px;
}

/* Close button — same orange × circle style */
#pum-19302.pum-overlay .pum-container .pum-content + .pum-close,
#pum-19302 .pum-container .pum-close,
#pum-19302 .pum-close {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	bottom: auto !important;
	left: auto !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	background: #ffffff !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 4px rgba(251,146,60,0.25), 0 0 12px rgba(251,146,60,0.35) !important;
	color: #f97316 !important;
	font-size: 0 !important;
	font-weight: 800 !important;
	line-height: 34px !important;
	text-align: center !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	z-index: 9999 !important;
	text-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: box-shadow 0.2s, transform 0.2s !important;
}
#pum-19302 .pum-close::before {
	content: '\00D7' !important;
	display: block !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #f97316 !important;
	line-height: 1 !important;
}
#pum-19302 .pum-close:hover {
	box-shadow: 0 0 0 6px rgba(251,146,60,0.35), 0 0 18px rgba(251,146,60,0.50) !important;
	transform: scale(1.08) !important;
}

/* Form content area — scrollable to fit all 6 fields */
#pum-19302 .pum-content {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	padding: 18px 24px 18px !important;
	color: #1a1a2e !important;
	font-weight: 400 !important;
	background: #ffffff !important;
}

/* Paragraph spacing */
#pum-19302 .pum-content p,
#pum-19302 .row p {
	margin: 0 0 10px !important;
}

/* All text / email inputs */
#pum-19302 .pum-content input[type="text"],
#pum-19302 .pum-content input[type="email"] {
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	margin-bottom: 0 !important;
	background: #f5f8ff !important;
	border: 1.5px solid #cdd7f0 !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	color: #1a1a2e !important;
	box-shadow: none !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
}
#pum-19302 .pum-content input[type="text"]:focus,
#pum-19302 .pum-content input[type="email"]:focus {
	border-color: #1254c8 !important;
	box-shadow: 0 0 0 3px rgba(18,84,200,0.13) !important;
	background: #ffffff !important;
}
#pum-19302 .pum-content input::placeholder { color: #9aaac8 !important; }

/* CAPTCHA row */
#pum-19302 .col-sm-12[style*="color"] {
	background: #eef2ff !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	margin-bottom: 10px !important;
	color: #1a1a2e !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-sizing: border-box !important;
}
#pum-19302 .col-sm-12[style*="color"] p {
	margin: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	color: #1a1a2e !important;
	width: 100% !important;
}
#pum-19302 .wpcf7-captcha-captcha-1 {
	display: inline-block !important;
	border-radius: 4px !important;
	border: 1px solid #cdd7f0 !important;
	flex-shrink: 0 !important;
}
#pum-19302 .wpcf7-form-control-wrap[data-name="captcha-1"],
#pum-19302 span.wpcf7-form-control-wrap {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	flex-basis: 100% !important;
}
#pum-19302 input.wpcf7-captchar {
	display: block !important;
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1.5px solid #cdd7f0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	font-size: 16px !important;
	letter-spacing: 4px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* Submit button wrapper */
#pum-19302 .col-sm-12.col-xs-12.action,
#pum-19302 .col-sm-12.action {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
#pum-19302 .action > p {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
}
#pum-19302 span.btn-theme,
#pum-19302 .btn-theme.form-action,
#pum-19302 span.btn-theme.form-action.btncolor {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	float: none !important;
	box-sizing: border-box !important;
}
#pum-19302 .wpcf7-form-control.has-spinner,
#pum-19302 span.has-spinner {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
#pum-19302 input[type="submit"].wpcf7-submit,
#pum-19302 .wpcf7-submit {
	display: block !important;
	width: 100% !important;
	height: 50px !important;
	background: linear-gradient(135deg, #1254c8, #0a3880) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 16px rgba(18,84,200,0.40) !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	float: none !important;
	text-indent: 0 !important;
	transition: transform 0.15s, box-shadow 0.15s !important;
}
#pum-19302 .wpcf7-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 7px 20px rgba(18,84,200,0.52) !important;
}

/* Validation */
#pum-19302 .wpcf7-not-valid {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
#pum-19302 .wpcf7-not-valid-tip {
	color: #ef4444 !important;
	font-size: 12px !important;
}
#pum-19302 .wpcf7-response-output {
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	margin: 8px 0 0 !important;
}

/* Privacy note */
#pum-19302 .pum-content::after {
	content: '\1F512  We respect your privacy. Your data is never shared.';
	display: block !important;
	font-size: 11px !important;
	color: #8a94b8 !important;
	text-align: center !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

/* Mobile */
@media (max-width: 520px) {
	#pum-19302 .pum-container {
		width: 94vw !important;
		border-radius: 12px !important;
		max-height: 95vh !important;
	}
	#pum-19302 .pum-title {
		font-size: 18px !important;
		padding: 16px 44px 12px 20px !important;
	}
	#pum-19302 .pum-content {
		padding: 14px 16px 16px !important;
	}
}