/* Nexusa Comparison Widget (VS) - Base Styles */

/* Safety reset: some themes/Elementor settings (equal-height columns, sliders,
   fixed-height sections) force a short height + overflow:hidden on widgets.
   Force this widget to always size itself to its real content. */
.elementor-widget-ncw-comparison,
.elementor-widget-ncw-comparison > .elementor-widget-container {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.ncw-comparison-outer {
	display: flex;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ncw-comparison {
	display: flex;
	align-items: stretch;
	position: relative;
	gap: 30px;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ncw-card {
	position: relative;
	flex: 1 1 0;
	background-color: #f7f8fa;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 16px;
	padding: 32px;
	overflow: visible;
	box-sizing: border-box;
	min-width: 0;
	height: auto;
}

.ncw-card-inner {
	position: relative;
	z-index: 2;
}

/* -----------------------------------------
 * Background Image Effects layer
 * (size, alignment, opacity, blur - fully responsive
 * via CSS custom properties set per-breakpoint by Elementor controls)
 * --------------------------------------- */
.ncw-card-left,
.ncw-card-right {
	--ncw-bgfx-image: none;
	--ncw-bgfx-width: auto;
	--ncw-bgfx-height: auto;
	--ncw-bgfx-position: center center;
	--ncw-bgfx-opacity: 1;
	--ncw-bgfx-blur: 0px;
}

.ncw-card-left::before,
.ncw-card-right::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background-repeat: no-repeat;
	background-image: var(--ncw-bgfx-image);
	background-size: var(--ncw-bgfx-width) var(--ncw-bgfx-height);
	background-position: var(--ncw-bgfx-position);
	opacity: var(--ncw-bgfx-opacity);
	filter: blur(var(--ncw-bgfx-blur));
}

.ncw-card-title {
	margin: 0 0 22px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.5px;
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
}

.ncw-card-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	background-color: currentColor;
}

.ncw-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ncw-list-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
}

.ncw-list-item::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ncw-list-item:last-child::after {
	display: none;
}

.ncw-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #ccc;
	box-sizing: border-box;
}

.ncw-icon i,
.ncw-icon svg {
	line-height: 1;
	width: 14px;
	height: 14px;
}

.ncw-item-text {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
}

/* Center VS badge */
.ncw-vs-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

/* Default explicit order (left, badge, right) so the swap below can safely override it */
.ncw-comparison .ncw-card-left {
	order: 1;
}

.ncw-comparison .ncw-vs-wrap {
	order: 2;
}

.ncw-comparison .ncw-card-right {
	order: 3;
}

/* Swap left/right visual position — content + styling stay bound to their own class */
.ncw-comparison.ncw-swapped .ncw-card-left {
	order: 3;
}

.ncw-comparison.ncw-swapped .ncw-card-right {
	order: 1;
}

.ncw-vs-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0b2f63;
	color: #fff;
	font-weight: 800;
	font-size: 20px;
	border: 6px solid #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

/* -----------------------------------------
 * Responsive: stack columns
 * --------------------------------------- */

/* Stack on tablet (<=1024px) */
.ncw-stack-tablet {
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.ncw-stack-tablet {
		flex-direction: column !important;
		height: auto !important;
	}

	.ncw-stack-tablet .ncw-card {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		flex: 1 1 auto !important;
	}

	/* Guaranteed-visible VS wrap: forced normal-flow block, never absolute,
	   never dependent on ancestor overflow or Elementor's own responsive
	   display/visibility CSS (those are !important-free, so ours always wins). */
	.ncw-stack-tablet .ncw-vs-wrap {
		display: flex !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 76px !important;
		padding: 20px 0 !important;
		margin: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
		z-index: 20 !important;
	}

	.ncw-stack-tablet .ncw-vs-badge {
		display: flex !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		margin: 0 auto !important;
		transform: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		flex-shrink: 0 !important;
		z-index: 30 !important;
	}
}

/* Stack on mobile (<=767px) - default Elementor mobile breakpoint */
@media (max-width: 767px) {
	.ncw-stack-mobile {
		flex-direction: column !important;
		height: auto !important;
	}

	.ncw-stack-mobile .ncw-card {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		flex: 1 1 auto !important;
	}

	.ncw-stack-mobile .ncw-card-inner {
		height: auto !important;
	}

	/* Guaranteed-visible VS wrap: forced normal-flow block, never absolute,
	   never dependent on ancestor overflow or Elementor's own responsive
	   display/visibility CSS (those are !important-free, so ours always wins). */
	.ncw-stack-mobile .ncw-vs-wrap {
		display: flex !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 76px !important;
		padding: 20px 0 !important;
		margin: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
		z-index: 20 !important;
	}

	.ncw-stack-mobile .ncw-vs-badge {
		display: flex !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		margin: 0 auto !important;
		transform: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		flex-shrink: 0 !important;
		z-index: 30 !important;
	}

	.ncw-card {
		padding: 24px;
	}

	.ncw-card-title {
		font-size: 19px;
	}
}

/* "never" stack option: force row even on small screens, allow horizontal scroll if needed */
.ncw-stack-never {
	flex-wrap: nowrap;
}

@media (max-width: 480px) {
	.ncw-card {
		padding: 18px;
	}

	.ncw-item-text {
		font-size: 14px;
	}

	.ncw-vs-badge {
		font-size: 16px;
	}
}

/* Safety net: if "Stack on Never" is selected, still shrink the badge on very
   narrow screens so it doesn't overflow outside the two cramped columns. */
@media (max-width: 360px) {
	.ncw-stack-never .ncw-vs-badge {
		width: 42px !important;
		height: 42px !important;
		font-size: 12px !important;
		border-width: 3px !important;
	}
}