/* =============================================================================
   Think Above – CDS WorkFlow Plugin  |  Frontend Styles  |  v1.2.1
   ============================================================================= */

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
	--ta-wf-blue:        #1d4ed8;
	--ta-wf-blue-light:  #dbeafe;
	--ta-wf-blue-glow:   rgba(29, 78, 216, 0.18);
	--ta-wf-line-gray:   #cbd5e1;
	--ta-wf-border:      #e2e8f0;
	--ta-wf-white:       #ffffff;
	--ta-wf-text:        #1e293b;
	--ta-wf-text-muted:  #64748b;
	--ta-wf-radius:      16px;
	--ta-wf-circle-size: 42px;
	--ta-wf-line-h:      3px;
	--ta-wf-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--ta-wf-speed:       0.38s;
	--ta-wf-speed-line:  0.55s;
	/* Settings — overridden by inline CSS from plugin settings panel */
	--ta-wf-card-padding: 1.5rem 1.125rem;
	--ta-wf-card-gap:     1rem;
	--ta-wf-title-size:   1rem;
	--ta-wf-desc-size:    0.875rem;

	/* Design controls — overridden by inline CSS from the Design Controls panel.
	   Defaults below mirror TA_CDS_Workflow_Admin::design_defaults(). */
	--ta-wf-line-color:          #cbd5e1;
	--ta-wf-line-fill-color:     #1d4ed8;
	/* --ta-wf-line-h already defined above (line thickness) */
	--ta-wf-vline-color:         #cbd5e1;
	--ta-wf-vline-h:             2px;

	--ta-wf-status-bg:           #ffffff;
	--ta-wf-status-border-color: #cbd5e1;
	--ta-wf-status-border-w:     2px;
	--ta-wf-status-radius:       50%;

	--ta-wf-icon-bg:             #dbeafe;
	--ta-wf-icon-border-color:   #dbeafe;
	--ta-wf-icon-border-w:       0px;
	--ta-wf-icon-radius:         50%;

	--ta-wf-card-bg:             #ffffff;
	--ta-wf-card-border-color:   #e2e8f0;
	--ta-wf-card-border-w:       0px;
	--ta-wf-card-radius:         16px;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.ta-workflow {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem;
	box-sizing: border-box;
}

/* ── Inner: flex row on desktop ─────────────────────────────────────────────── */
.ta-workflow__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	position: relative;  /* line is absolutely positioned inside this */
	gap: var(--ta-wf-card-gap, 1rem);
}

/* ── Progress line ──────────────────────────────────────────────────────────── */
.ta-workflow__line {
	position: absolute;
	/* vertical centre of circle row: top = circle-size/2, offset by half line height */
	top:    calc( var(--ta-wf-circle-size) / 2 );
	transform: translateY(-50%);

	/* span from centre of first step to centre of last step (set via JS) */
	left:  var(--ta-wf-line-start, 10%);
	right: var(--ta-wf-line-end,   10%);

	height: var(--ta-wf-line-h);
	/* Solid fallback — always paints a line even if the data-line-style
	   attribute is missing (e.g. a cached page). Overridden for dashed/dotted. */
	background: var(--ta-wf-line-color);
	border-radius: 99px;
	z-index: 0;
	overflow: hidden;  /* clips the fill */
}

/* ── Line style: solid / dashed / dotted (horizontal, desktop) ──────────────
   Fixed-size background tiles (not calc-in-gradient) so the pattern is always
   visible at any thickness and survives CSS minification. */
.ta-workflow[data-line-style="dashed"] .ta-workflow__line {
	background-color: transparent;
	background-image: linear-gradient( to right, var(--ta-wf-line-color) 0, var(--ta-wf-line-color) 55%, transparent 55%, transparent 100% );
	background-size: 14px 100%;
	background-repeat: repeat-x;
	border-radius: 0;
}
.ta-workflow[data-line-style="dotted"] .ta-workflow__line {
	background-color: transparent;
	background-image: radial-gradient( circle closest-side, var(--ta-wf-line-color) 92%, transparent 100% );
	background-size: 8px 100%;
	background-repeat: repeat-x;
	border-radius: 0;
}

/* animated fill – width driven by JS (always solid over the base line) */
.ta-workflow__line-fill {
	position: absolute;
	inset: 0;
	width: 0%;
	height: 100%;
	background: var(--ta-wf-line-fill-color);
	border-radius: inherit;
	transition: width var(--ta-wf-speed-line) var(--ta-wf-ease);
}

/* ── Step column ────────────────────────────────────────────────────────────── */
.ta-workflow__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

/* ── Circle node ────────────────────────────────────────────────────────────── */
.ta-workflow__node {
	position: relative;
	z-index: 1;            /* sits above the line */
	margin-bottom: 1.75rem;
	line-height: 0;
}

/* ── Desktop connector: thin drop line from circle down to its card ──────────
   z-index:-1 so the active circle (scaled + glow ring) always paints OVER the
   connector's top instead of the connector overlapping the circle on hover.
   Height is trimmed to leave clearance for the card's 3px lift on hover. */
.ta-workflow__node::after {
	content: '';
	position: absolute;
	top: 100%;                 /* start at the bottom of the circle */
	left: 50%;
	transform: translateX(-50%);
	width:  var(--ta-wf-vline-h, 2px);
	height: calc(1.75rem - 7px);
	z-index: -1;
	/* solid fallback (overridden for dashed/dotted below) */
	background: var(--ta-wf-vline-color);
}
/* connector style: solid / dashed / dotted (vertical), fixed-size tiles */
.ta-workflow[data-vline-style="dashed"] .ta-workflow__node::after {
	background-color: transparent;
	background-image: linear-gradient( to bottom, var(--ta-wf-vline-color) 0, var(--ta-wf-vline-color) 55%, transparent 55%, transparent 100% );
	background-size: 100% 12px;
	background-repeat: repeat-y;
}
.ta-workflow[data-vline-style="dotted"] .ta-workflow__node::after {
	background-color: transparent;
	background-image: radial-gradient( circle closest-side, var(--ta-wf-vline-color) 92%, transparent 100% );
	background-size: 100% 7px;
	background-repeat: repeat-y;
}
/* thickness 0 → width 0 → the drop connector is simply not visible */

.ta-workflow__circle {
	width:  var(--ta-wf-circle-size);
	height: var(--ta-wf-circle-size);
	box-sizing: border-box;
	border-radius: var(--ta-wf-status-radius, 50%);
	border: var(--ta-wf-status-border-w, 2px) solid var(--ta-wf-status-border-color, #cbd5e1);
	background: var(--ta-wf-status-bg, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color var(--ta-wf-speed) var(--ta-wf-ease),
		background   var(--ta-wf-speed) var(--ta-wf-ease),
		transform    var(--ta-wf-speed) var(--ta-wf-ease),
		box-shadow   var(--ta-wf-speed) var(--ta-wf-ease);
}

.ta-workflow__circle svg {
	width:  17px;
	height: 17px;
	color: transparent;
	transition: color var(--ta-wf-speed) var(--ta-wf-ease);
}

/* Active circle */
.ta-workflow__step.is-active .ta-workflow__circle {
	border-color: var(--ta-wf-blue);
	background:   var(--ta-wf-blue);
	transform:    scale(1.15);
	box-shadow:   0 0 0 5px var(--ta-wf-blue-glow);
}

.ta-workflow__step.is-active .ta-workflow__circle svg {
	color: var(--ta-wf-white);
}

/* Passed circles (all steps before the hovered step) */
.ta-workflow__step.is-passed .ta-workflow__circle {
	border-color: var(--ta-wf-blue);
	background:   var(--ta-wf-blue);
}

.ta-workflow__step.is-passed .ta-workflow__circle svg {
	color: var(--ta-wf-white);
}

/* Last step: circle-check icon always visible as a completion indicator */
.ta-workflow__step.is-last .ta-workflow__circle {
	border-color: var(--ta-wf-blue);
}

.ta-workflow__step.is-last .ta-workflow__circle svg {
	width:  20px;
	height: 20px;
	color:  var(--ta-wf-blue);  /* visible in default state */
}

/* Last step active/passed: flip to white icon on blue fill */
.ta-workflow__step.is-last.is-active .ta-workflow__circle svg,
.ta-workflow__step.is-last.is-passed .ta-workflow__circle svg {
	color: var(--ta-wf-white);
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
.ta-workflow__card {
	width: 100%;
	box-sizing: border-box;
	padding: var(--ta-wf-card-padding, 1.5rem 1.125rem);
	border-radius: var(--ta-wf-card-radius, 16px);
	border: var(--ta-wf-card-border-w, 0px) solid var(--ta-wf-card-border-color, transparent);
	background: var(--ta-wf-card-bg, #fff);
	text-align: center;
	cursor: default;
	outline: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition:
		border-color var(--ta-wf-speed) var(--ta-wf-ease),
		box-shadow   var(--ta-wf-speed) var(--ta-wf-ease),
		transform    var(--ta-wf-speed) var(--ta-wf-ease);
}

.ta-workflow__card:focus-visible {
	outline: 2px solid var(--ta-wf-blue);
	outline-offset: 3px;
}

/* Active card — keep the blue highlight border visible even if the
   resting border width is 0 (box-sizing above prevents any layout shift). */
.ta-workflow__step.is-active .ta-workflow__card {
	border-color: var(--ta-wf-blue);
	border-width: max(1.5px, var(--ta-wf-card-border-w, 0px));
	box-shadow:   0 8px 36px var(--ta-wf-blue-glow);
	transform:    translateY(-3px);
}

/* ── Icon wrap ──────────────────────────────────────────────────────────────── */
.ta-workflow__icon-wrap {
	width:  68px;
	height: 68px;
	box-sizing: border-box;
	border-radius: var(--ta-wf-icon-radius, 50%);
	border: var(--ta-wf-icon-border-w, 0px) solid var(--ta-wf-icon-border-color, transparent);
	background: var(--ta-wf-icon-bg, var(--ta-wf-blue-light));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	position: relative;
	flex-shrink: 0;
	transition:
		background var(--ta-wf-speed) var(--ta-wf-ease),
		transform  var(--ta-wf-speed) var(--ta-wf-ease);
}

/* Active icon wrap */
.ta-workflow__step.is-active .ta-workflow__icon-wrap {
	background: var(--ta-wf-blue);
	transform:  scale(1.14);
}

/* ── Icons (two stacked, cross-fade) ─────────────────────────────────────── */
.ta-icon {
	width:    32px;
	height:   32px;
	object-fit: contain;
	position: absolute;
	transition:
		opacity   var(--ta-wf-speed) var(--ta-wf-ease),
		transform var(--ta-wf-speed) var(--ta-wf-ease);
}

.ta-icon--normal {
	opacity:   1;
	transform: scale(1);
}

.ta-icon--hover {
	opacity:   0;
	transform: scale(0.78);
}

/* Active: swap to hover icon */
.ta-workflow__step.is-active .ta-icon--normal {
	opacity:   0;
	transform: scale(1.2);
}

.ta-workflow__step.is-active .ta-icon--hover {
	opacity:   1;
	transform: scale(1);
}

/* Fallback number badge (shown when no icon uploaded) */
.ta-icon-fallback {
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--ta-wf-blue);
	transition:  color var(--ta-wf-speed) var(--ta-wf-ease);
}

.ta-workflow__step.is-active .ta-icon-fallback {
	color: var(--ta-wf-white);
}

/* ── Title ──────────────────────────────────────────────────────────────────── */
.ta-workflow__title {
	font-size:   var(--ta-wf-title-size, 1rem) !important;
	font-weight: 700;
	color:       var(--ta-wf-text) !important;
	margin:      0 0 0.4rem;
	line-height: 1.35;
	transition:  color var(--ta-wf-speed) var(--ta-wf-ease);
}

/* ── Accent line (animates in below title on hover) ─────────────────────────── */
.ta-workflow__accent {
	height:        3px;
	background:    var(--ta-wf-blue);
	border-radius: 99px;
	width: 0;
	margin: 0 auto 0.75rem;
	/* slight delay so line draws AFTER the card lifts — sequenced feel */
	transition: width 0.38s var(--ta-wf-ease) 0.08s;
}

.ta-workflow__step.is-active .ta-workflow__accent {
	width: 2.25rem;
}

/* ── Description ────────────────────────────────────────────────────────────── */
.ta-workflow__desc {
	font-size:   var(--ta-wf-desc-size, 0.875rem);
	color:       var(--ta-wf-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* =============================================================================
   MOBILE  —  vertical layout
   circles + line pinned to left, cards fill right
   ============================================================================= */
@media (max-width: 768px) {

	.ta-workflow {
		padding: 1.5rem 1rem;
	}

	/* Shift content right to make room for the circle column */
	.ta-workflow__inner {
		flex-direction: column;
		padding-left: calc( var(--ta-wf-circle-size) + 1.25rem );
	}

	/* Each step is now a horizontal row */
	.ta-workflow__step {
		flex-direction: row;
		align-items:   flex-start;
		gap:           1.25rem;
		width:         100%;
	}

	/* Pull the node back into the left gutter */
	.ta-workflow__node {
		flex-shrink: 0;
		margin-left:   calc( -1 * (var(--ta-wf-circle-size) + 1.25rem) );
		margin-bottom: 0;
		/* vertically align with top of card */
		margin-top: 1.5rem;
	}

	/* Card fills the remaining width, left-aligned text */
	.ta-workflow__card {
		flex: 1;
		align-items:  flex-start;
		text-align:   left;
		margin-bottom: 1rem;
	}

	/* Add spacing between steps on mobile */
	.ta-workflow__step + .ta-workflow__step {
		margin-top: 1rem;
	}

	/* Icon: left-aligned + tighter on mobile.
	   Desktop's 68px wrap around a 32px icon left a big padded ring on phones;
	   shrink the ring and grow the icon so it fills the circle. */
	.ta-workflow__icon-wrap {
		width:  52px;
		height: 52px;
		margin: 0 0 0.75rem;
	}
	.ta-workflow__icon-wrap .ta-icon {
		width:  30px;
		height: 30px;
	}
	.ta-icon-fallback {
		font-size: 1rem;
	}

	/* Desktop drop-connector is not used on mobile (the main line is vertical) */
	.ta-workflow__node::after {
		display: none;
	}

	/* Accent line left-aligned */
	.ta-workflow__accent {
		margin: 0 0 0.75rem;
	}

	/* ── Vertical progress line ─────────────────────────────────────── */
	.ta-workflow__line {
		/* reset desktop positioning */
		right:     auto;
		transform: none;

		/* vertical strip aligned with circle centres */
		top:   var(--ta-wf-line-start-px, 0px);  /* set by JS */
		left:  calc( var(--ta-wf-circle-size) / 2 - var(--ta-wf-line-h) / 2 - (var(--ta-wf-circle-size) + 1.25rem) );
		width: var(--ta-wf-line-h);
		height: auto;
		bottom: var(--ta-wf-line-end-px, 0px);   /* set by JS */
	}

	/* Fill goes vertically — width is always 100%, height is animated */
	.ta-workflow__line-fill {
		width:  100%;
		height: 0%;
		transition: height var(--ta-wf-speed-line) var(--ta-wf-ease);
	}

	/* Line style must run top-to-bottom for the vertical mobile line */
	.ta-workflow[data-line-style="dashed"] .ta-workflow__line {
		background-color: transparent;
		background-image: linear-gradient( to bottom, var(--ta-wf-line-color) 0, var(--ta-wf-line-color) 55%, transparent 55%, transparent 100% );
		background-size: 100% 14px;
		background-repeat: repeat-y;
	}
	.ta-workflow[data-line-style="dotted"] .ta-workflow__line {
		background-color: transparent;
		background-image: radial-gradient( circle closest-side, var(--ta-wf-line-color) 92%, transparent 100% );
		background-size: 100% 8px;
		background-repeat: repeat-y;
	}
}