/**
 * WebXtrm Process Journey Widget Styles
 */

.wx-pj-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.wx-pj-wrap * {
	box-sizing: border-box;
}

/* ===== VERTICAL CONNECTOR LINE (spans timeline behind circles) ===== */
.wx-pj-line {
	position: absolute;
	top: 32px;     /* aligned with first circle center (default 64px circle) */
	bottom: 32px;  /* aligned with last circle center */
	left: 32px;    /* aligned with circle center horizontally (default 64px col) */
	width: 0;
	border-left: 1.5px dashed rgba(0, 201, 240, 0.3);
	pointer-events: none;
	z-index: 0;
}

/* ===== STEP ROW ===== */
.wx-pj-step {
	display: flex;
	align-items: center;
	gap: 18px;
	position: relative;
	z-index: 1;
}

/* ===== LEFT: CIRCLE COLUMN ===== */
.wx-pj-circle-col {
	flex-shrink: 0;
	width: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wx-pj-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 201, 240, 0.4);
	background: #0a0d12; /* matches dark section bg — masks connector line */
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.wx-pj-step:hover .wx-pj-circle {
	border-color: rgba(0, 201, 240, 0.7);
	transform: scale(1.05);
}

.wx-pj-circle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #00c9f0;
}

.wx-pj-circle-icon svg {
	width: 22px;
	height: 22px;
	fill: #00c9f0;
	color: #00c9f0;
	display: block;
}

.wx-pj-circle-icon i {
	font-size: 22px;
	color: #00c9f0;
	line-height: 1;
}

/* ===== CENTER: CARD ===== */
.wx-pj-card {
	flex: 1;
	min-width: 0;
	background: rgba(15, 19, 26, 0.5);
	border: 1px solid rgba(0, 201, 240, 0.15);
	border-radius: 12px;
	padding: 18px 22px;
	position: relative;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.wx-pj-step:hover .wx-pj-card {
	background: rgba(15, 19, 26, 0.8);
	border-color: rgba(0, 201, 240, 0.4);
}

/* Arrow pointer (left-facing chevron on card edge) */
.wx-pj-wrap--arrow .wx-pj-card::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 50%;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(45deg);
	background: inherit;
	border-left: 1px solid rgba(0, 201, 240, 0.15);
	border-bottom: 1px solid rgba(0, 201, 240, 0.15);
	transition: inherit;
}

.wx-pj-wrap--arrow .wx-pj-step:hover .wx-pj-card::before {
	border-left-color: rgba(0, 201, 240, 0.4);
	border-bottom-color: rgba(0, 201, 240, 0.4);
}

/* Card inner layout */
.wx-pj-card-inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

/* ===== NUMBER ===== */
.wx-pj-number {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #00c9f0;
	flex-shrink: 0;
	line-height: 1.3;
	min-width: 22px;
}

/* ===== TEXT (title + description) ===== */
.wx-pj-text {
	flex: 1;
	min-width: 0;
}

.wx-pj-title {
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
	margin: 0 0 6px;
	padding: 0;
}

.wx-pj-desc {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #9aacbd;
	line-height: 1.55;
	margin: 0;
	padding: 0;
}

/* ===== RIGHT: ILLUSTRATION ===== */
.wx-pj-illust {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00c9f0;
	opacity: 0.85;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.wx-pj-step:hover .wx-pj-illust {
	opacity: 1;
	transform: scale(1.05);
}

.wx-pj-illust svg {
	width: 100%;
	height: 100%;
	fill: #00c9f0;
	color: #00c9f0;
	display: block;
}

.wx-pj-illust i {
	font-size: 72px;
	color: #00c9f0;
	line-height: 1;
}

/* ===== RESPONSIVE FALLBACKS ===== */
/* Elementor responsive controls (circle_size, col_gap, card_padding, illust_size)
   handle most of the per-breakpoint sizing. Only essentials below. */

/* Auto-hide illustration when its size is 0 (default on mobile) */
.wx-pj-illust[style*="width: 0"],
.wx-pj-illust[style*="width:0"] {
	display: none !important;
}

/* Mobile text/number adjustments (typography is via group controls,
   but provide sensible defaults if user hasn't customized for mobile) */
@media (max-width: 767px) {
	.wx-pj-card-inner {
		gap: 10px;
	}
	
	.wx-pj-number {
		font-size: 15px;
		min-width: 18px;
	}
	
	.wx-pj-title {
		font-size: 15px;
		margin-bottom: 4px;
	}
	
	.wx-pj-desc {
		font-size: 12px;
		line-height: 1.5;
	}
}