/* Conversion Pro — tiered "spend more, save more" progress bar. No
   equivalent component existed anywhere in the plugin (confirmed before
   building this), so this is a from-scratch fill-bar rather than a
   reuse of an existing pattern — matches the plugin's cvp-* BEM-style
   naming convention used everywhere else. */

.cvp-tier-progress {
	margin: 16px 0 24px;
	max-width: 480px;
}

.cvp-tier-progress__bar {
	position: relative;
	height: 8px;
	background: #eee;
	border-radius: 4px;
	margin-bottom: 26px;
}

.cvp-tier-progress__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #C4080E;
	border-radius: 4px;
	transition: width 0.3s ease;
}

.cvp-tier-progress__marker {
	position: absolute;
	top: -4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #ddd;
	transform: translateX( -50% );
	box-sizing: border-box;
}

.cvp-tier-progress__marker.is-unlocked {
	border-color: #C4080E;
	background: #C4080E;
}

.cvp-tier-progress__marker-label {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 11px;
	white-space: nowrap;
	color: #555;
}

.cvp-tier-progress__message {
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #C4080E;
	margin: 0;
}