/*
 * Mark-complete button injected at the end of each "Step N" block (after its
 * image + description, right before the next step starts) by lucidprogress.js.
 * Built on the site's own pill-button system (.cw-button-ghost / .cw-button-seasonal
 * in cw-core.css) instead of a one-off style, so it reads as part of the same
 * design language as every other button on the page.
 */

.lucidprogress-step-toggle {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 28px;
	padding: 12px 24px;
	border: 1.5px solid var(--cw-teal, #4a9494);
	border-radius: 9999px;
	background: transparent;
	color: var(--cw-teal, #4a9494);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/*
 * Kadence's global `button:hover, button:focus, button:active` rule (all.min.css) sets
 * color to a white palette variable and adds a box-shadow, assuming every button gets a
 * solid fill on interaction. We only fill on hover, so color/box-shadow must be
 * reasserted here explicitly — otherwise the label goes white-on-near-transparent
 * and an unwanted shadow appears, on hover AND on keyboard focus/click.
 */
.lucidprogress-step-toggle:hover,
.lucidprogress-step-toggle:focus,
.lucidprogress-step-toggle:active {
	background: var(--cw-teal-tint, rgba(74, 148, 148, 0.08));
	color: var(--cw-teal, #4a9494);
	border-color: var(--cw-teal, #4a9494);
	box-shadow: none;
}

.lucidprogress-step-toggle:focus-visible {
	outline: 2px solid var(--cw-teal, #4a9494);
	outline-offset: 3px;
}

.lucidprogress-step-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
}

.lucidprogress-step-toggle__check {
	display: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.lucidprogress-step-toggle__label {
	white-space: nowrap;
}

.lucidprogress-step-toggle.is-complete {
	border-color: var(--cw-teal, #4a9494);
	background: var(--cw-teal, #4a9494);
	color: var(--cw-white, #fff);
	box-shadow: 0 6px 20px rgba(15, 102, 103, 0.28);
}

.lucidprogress-step-toggle.is-complete:hover,
.lucidprogress-step-toggle.is-complete:focus,
.lucidprogress-step-toggle.is-complete:active {
	background: var(--cw-teal-dark, #0f6667);
	border-color: var(--cw-teal-dark, #0f6667);
	color: var(--cw-white, #fff);
	box-shadow: 0 6px 20px rgba(15, 102, 103, 0.28);
}

.lucidprogress-step-toggle.is-complete .lucidprogress-step-toggle__icon {
	border-color: var(--cw-white, #fff);
}

.lucidprogress-step-toggle.is-complete .lucidprogress-step-toggle__check {
	display: inline;
}