/**
 * Timeline Track — apply these classes directly on native Elementor Containers.
 * Lets you drag ANY Elementor widget inside each step, with full native
 * Elementor reliability (width, gap, padding all controlled by Elementor
 * Container's own native settings).
 *
 * USAGE:
 * 1. Add a Container -> Advanced tab -> CSS Classes: ptw-track
 *    (set its Layout direction to "Column", give it a "Gap" for spacing)
 * 2. Inside it, add one child Container per step -> CSS Classes: ptw-step
 *    Add "is-active" as an extra class for the current/filled marker,
 *    or leave it as just "ptw-step" for an upcoming/outline marker.
 * 3. Inside each step Container, drop any widgets you want (Heading,
 *    Text Editor, Icon List, Image, Button, etc.) — completely free.
 * 4. Optional: add "ptw-hover-fill" class on the ptw-track container to
 *    make upcoming markers fill in on hover.
 */

.ptw-track {
	--ptw-track-line-color: #e8d5c8;
	--ptw-track-line-width: 2px;
	--ptw-track-rail: 34px;
	--ptw-track-marker-size: 18px;
	--ptw-track-marker-bg: #ffffff;
	--ptw-track-marker-border: #e8d5c8;
	--ptw-track-marker-border-width: 2px;
	--ptw-track-marker-active-size: 20px;
	--ptw-track-marker-active-color: #cc8863;

	position: relative;
}

.ptw-track::before {
	content: '';
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: calc(var(--ptw-track-rail) / 2);
	border-left: var(--ptw-track-line-width) dashed var(--ptw-track-line-color);
	z-index: 1;
}

.ptw-track.ptw-line-solid::before  { border-left-style: solid; }
.ptw-track.ptw-line-dotted::before { border-left-style: dotted; }

.ptw-step {
	position: relative;
	padding-left: var(--ptw-track-rail) !important;
	box-sizing: border-box;
}

.ptw-step::before {
	content: '';
	position: absolute;
	left: calc(var(--ptw-track-rail) / 2);
	top: 6px;
	transform: translateX(-50%);
	width: var(--ptw-track-marker-size);
	height: var(--ptw-track-marker-size);
	background: var(--ptw-track-marker-bg);
	border: var(--ptw-track-marker-border-width) solid var(--ptw-track-marker-border);
	border-radius: 50%;
	box-sizing: border-box;
	z-index: 2;
	transition: background-color 0.2s ease, border-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.ptw-step.is-active::before {
	width: var(--ptw-track-marker-active-size);
	height: var(--ptw-track-marker-active-size);
	background: var(--ptw-track-marker-active-color);
	border-color: var(--ptw-track-marker-active-color);
}

.ptw-track.ptw-hover-fill .ptw-step:hover::before {
	background: var(--ptw-track-marker-active-color);
	border-color: var(--ptw-track-marker-active-color);
}

@media (max-width: 767px) {
	.ptw-track {
		--ptw-track-rail: 26px;
		--ptw-track-marker-size: 15px;
		--ptw-track-marker-active-size: 17px;
	}
}