/**
 * AC Legacy Redirect — hub-site "Legacy Transition Popup" styling.
 *
 * EXACT visual match to the "tmcw" welcome-popup live on
 * ascentialtech.com/catalog (Adam's explicit reference, 2026-07-09):
 * dark glassmorphic modal (rgba(12,12,20,.85) + backdrop-filter blur),
 * purple (#5522dd) glow border/shadow, Inter typography, and the
 * signature clip-path orange (#dd7722) CTA button. Values below were
 * read directly from that page's live stylesheet (browser devtools
 * console — CSSStyleSheet.cssRules), not eyeballed from a screenshot.
 *
 * Structural differences from the source (by design, not oversight):
 *  - Source shows a strip of 6 partner-brand logos white-silhouetted
 *    (filter: brightness(0) invert(1)) as one unified brand family.
 *  - This popup shows exactly 2 logos (old brand / new brand) in their
 *    natural color with small "Formerly" / "Now" labels, because the
 *    semantic purpose here is "here's what changed", not "here's our
 *    family of brands" — natural color makes the before/after legible.
 *  - Everything else (modal chrome, overlay, typography scale, spacing,
 *    close button, CTA button) is copied 1:1.
 */

.ac-legacy-popup-overlay {
	display: none !important;
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 2147483000 !important;
	background: rgba(0, 0, 0, 0.7) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	opacity: 0 !important;
	transition: opacity 0.3s !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 4vh 20px 20px !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
}

.ac-legacy-popup-overlay.ac-legacy-popup-overlay--visible {
	display: flex !important;
	opacity: 1 !important;
}

/* Inline in-admin preview variant: render as a normal block instead of a
   fixed fullscreen overlay, so it can be embedded directly in the
   Settings → Legacy Redirect page without covering the whole screen. */
.ac-legacy-popup-overlay--preview {
	position: static !important;
	inset: auto !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
}

.ac-legacy-popup-overlay--preview .ac-legacy-popup {
	position: static !important;
	width: 100% !important;
	margin: 0 auto !important;
}

.ac-legacy-popup {
	display: block !important;
	position: relative !important;
	width: 92% !important;
	max-width: 640px !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
	margin: 0 !important;
	background: rgba(12, 12, 20, 0.85) !important;
	-webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
	backdrop-filter: blur(30px) saturate(1.4) !important;
	border: 1.5px solid #5522dd !important;
	border-radius: 16px !important;
	box-shadow: rgba(85, 34, 221, 0.35) 0 0 60px, rgba(85, 34, 221, 0.12) 0 0 120px !important;
	padding: 48px 40px 40px !important;
	box-sizing: border-box !important;
	text-align: center !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	opacity: 0 !important;
	transition: opacity 0.4s !important;
}

.ac-legacy-popup-overlay--visible .ac-legacy-popup {
	opacity: 1 !important;
}

.ac-legacy-popup__close {
	display: block !important;
	position: absolute !important;
	top: 14px !important;
	right: 18px !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: color 0.2s !important;
}

.ac-legacy-popup__close:hover,
.ac-legacy-popup__close:focus {
	color: #ffffff !important;
	background: none !important;
	outline: none !important;
}

.ac-legacy-popup__eyebrow {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 2.5px !important;
	text-transform: uppercase !important;
	color: #5522dd !important;
	margin: 0 0 10px !important;
}

.ac-legacy-popup__headline {
	display: block !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 32px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	color: #ffffff !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-wrap: balance !important;
	-webkit-hyphens: none !important;
	hyphens: none !important;
}

.ac-legacy-popup__body {
	display: block !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.75) !important;
	margin: 0 auto 28px !important;
	padding: 0 !important;
	max-width: 520px !important;
	font-weight: 400 !important;
	text-wrap: balance !important;
}

.ac-legacy-popup__logos {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px 10px !important;
	margin: 0 0 24px !important;
	padding: 20px 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ac-legacy-popup__logo-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
}

/* Logo assets are admin-uploaded (any legacy/new brand's own file) and
   frequently designed for a WHITE page background — dark subtext,
   colored wordmarks with a transparent PNG background, etc. On this
   popup's near-black modal that content can disappear. Give both logo
   slots a light chip so ANY uploaded logo stays legible regardless of
   its own colors/background. */
.ac-legacy-popup__logo-chip {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #ffffff !important;
	border-radius: 6px !important;
	padding: 12px 18px !important;
}

.ac-legacy-popup__logo {
	display: block !important;
	max-width: 100% !important;
	height: 34px !important;
	max-height: 34px !important;
	width: auto !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	opacity: 1 !important;
	transition: opacity 0.2s !important;
}

/* This plugin's shipped default "old logo" asset (D&K Engineering's own
   white/transparent wordmark, meant for a dark hero background) would be
   invisible on the white chip above without this — invert it to render
   dark-on-white instead. This is a default-asset accommodation, not a
   guaranteed fix for every possible future upload: an admin swapping in
   a DIFFERENT logo whose natural colors already read on white should also
   toggle this off via the "Invert old logo colors" checkbox in Settings. */
.ac-legacy-popup__logo--old.ac-legacy-popup__logo--invert {
	filter: invert(1) !important;
}

.ac-legacy-popup__logo-wrap:hover .ac-legacy-popup__logo {
	opacity: 1 !important;
}

.ac-legacy-popup__logo-label {
	display: block !important;
	font-size: 11px !important;
	font-weight: 600 !important;

	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.45) !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.ac-legacy-popup__arrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #dd7722 !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
	margin: 0 2px 22px !important;
}

.ac-legacy-popup__arrow-svg {
	display: block !important;
	width: 46px !important;
	height: 16px !important;
	color: #dd7722 !important;
}

.ac-legacy-popup__tagline {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-style: italic !important;
	color: rgba(255, 255, 255, 0.5) !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.ac-legacy-popup__cta {
	display: inline-block !important;
	cursor: pointer !important;
	min-width: 150px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	text-decoration: none !important;
	position: relative !important;
	border: 0 !important;
	background-color: #dd7722 !important;
	background-image: none !important;
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 20px) !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 40px !important;
	min-height: 40px !important;
	max-width: 100% !important;
	margin: 0 !important;
	color: #000000 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: 0.2s ease-in-out !important;
}

.ac-legacy-popup__cta:hover,
.ac-legacy-popup__cta:focus {
	background-color: #5522dd !important;
	background-image: none !important;
	color: #ffffff !important;
	transform: translateX(10px) !important;
	transition: 0.2s ease-in-out !important;
}

@media (max-width: 600px) {
	/* Compress the whole modal vertically so the CTA clears a bottom-docked
	   cookie/consent banner from a separate plugin. Every block loses margin,
	   padding, and font-size so the card fits in the space above the banner. */
	.ac-legacy-popup-overlay {
		padding: 2vh 12px 12px !important;
	}
	.ac-legacy-popup {
		padding: 28px 20px 24px !important;
		max-height: 96vh !important;
	}
	.ac-legacy-popup__close {
		top: 10px !important;
		right: 12px !important;
		font-size: 26px !important;
	}
	.ac-legacy-popup__eyebrow {
		margin: 0 0 6px !important;
	}
	.ac-legacy-popup__headline {
		font-size: 21px !important;
		line-height: 1.12 !important;
		margin: 0 0 10px !important;
	}
	.ac-legacy-popup__body {
		font-size: 13px !important;
		line-height: 1.5 !important;
		margin: 0 auto 16px !important;
	}
	.ac-legacy-popup__tagline {
		font-size: 13px !important;
		margin: 0 0 14px !important;
	}
	.ac-legacy-popup__logos {
		gap: 10px 12px !important;
		margin: 0 0 16px !important;
		padding: 12px 0 !important;
	}
	.ac-legacy-popup__logo-chip {
		padding: 8px 12px !important;
	}
	.ac-legacy-popup__logo {
		height: 26px !important;
		max-height: 26px !important;
	}
	.ac-legacy-popup__logo-label {
		font-size: 10px !important;
		letter-spacing: 1px !important;
	}
	.ac-legacy-popup__arrow {
		margin: 0 2px 18px !important;
	}
	.ac-legacy-popup__arrow-svg {
		width: 32px !important;
		height: 14px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-legacy-popup,
	.ac-legacy-popup-overlay {
		transition: none !important;
	}
	.ac-legacy-popup__close,
	.ac-legacy-popup__cta {
		transition: none !important;
	}
	.ac-legacy-popup__cta:hover {
		transform: none !important;
	}
}