/* ==========================================================================
   ITVP — Plan Finder wizard ([itvp_plan_finder])
   Loads only where the shortcode renders (enqueued by inc/plan-finder.php).
   Scoped to .itvp-pf; never leaks. Colours reference css/tokens.css — the
   few raw hex values below have no token and are flagged inline.
   Measured from the approved hi-fi comp @1200px: 8px progress segments,
   76px inputs r14, chips r14 (selected = blue-50 fill + blue-600 border),
   blue Next CTA, green See My Plans submit.
   ========================================================================== */

.itvp-pf {
	margin: 0;
	font-family: var(--itvp-font);
	color: var(--itvp-ink);
}

.itvp-pf fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* --- Segmented progress -------------------------------------------------- */
.itvp-pf__progress {
	display: flex;
	gap: 14px;
	margin-bottom: 34px;
}
.itvp-pf__seg {
	flex: 1;
	height: 8px;
	border-radius: 4px;
	background: var(--itvp-border);
	transition: background .25s var(--itvp-ease);
}
.itvp-pf__seg.is-done { background: var(--itvp-blue-600); }

/* --- Step header --------------------------------------------------------- */
.itvp-pf__count {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--itvp-blue-600);
}
.itvp-pf__title {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1.2;
	color: var(--itvp-ink);
}
.itvp-pf__hint {
	margin: 0 0 26px;
	font-size: 16px;
	color: var(--itvp-muted-2);
}

/* --- Text inputs ---------------------------------------------------------- */
.itvp-pf__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 25px 24px;
	font-family: inherit;
	font-size: 17px;
	color: var(--itvp-ink);
	background: var(--itvp-surface);
	border: 1px solid var(--itvp-border);
	border-radius: 14px;
	outline: none;
	transition: border-color .25s var(--itvp-ease), box-shadow .25s var(--itvp-ease);
}
.itvp-pf__input::placeholder { color: #A7ADC6; } /* comp placeholder tint — no token */
.itvp-pf__input:focus {
	border-color: var(--itvp-blue-600);
	box-shadow: 0 0 0 4px rgba(46, 91, 230, .12);
}
.itvp-pf__input.is-invalid { border-color: #D93B3B; } /* error red — no token */

.itvp-pf__stack { display: flex; flex-direction: column; gap: 22px; }

/* --- Choice chips (steps 2 & 3) ------------------------------------------ */
.itvp-pf__chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.itvp-pf__chip {
	padding: 25px 16px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var(--itvp-ink-700);
	text-align: center;
	background: var(--itvp-surface);
	border: 1px solid var(--itvp-border);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .25s var(--itvp-ease), background .25s var(--itvp-ease);
}
.itvp-pf__chip:hover { border-color: #C9D0E4; } /* comp hover border — no token */
.itvp-pf__chip.is-selected {
	padding: 24px 15px; /* compensate the thicker border so nothing shifts */
	font-weight: 700;
	color: var(--itvp-blue-700);
	background: var(--itvp-blue-50);
	border: 2px solid var(--itvp-blue-600);
}

/* --- Errors --------------------------------------------------------------- */
.itvp-pf__error {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #D93B3B; /* error red — no token */
}

/* --- Footer nav ----------------------------------------------------------- */
.itvp-pf__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 34px;
}
.itvp-pf__back {
	padding: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--itvp-muted-2);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .25s var(--itvp-ease);
}
.itvp-pf__back:hover:not(:disabled) { color: var(--itvp-ink); }
.itvp-pf__back:disabled { color: #C9D0E4; cursor: default; } /* comp disabled tint — no token */

.itvp-pf__next,
.itvp-pf__submit {
	padding: 23px 38px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 800;
	color: #FFFFFF;
	background: var(--itvp-blue-600);
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	transition: background .25s var(--itvp-ease), transform .25s var(--itvp-ease);
}
.itvp-pf__next:hover { background: var(--itvp-blue-700); }
.itvp-pf__submit { background: var(--itvp-green-500); }
.itvp-pf__submit:hover { background: #0C8A5A; } /* green hover — no token */
.itvp-pf__next:disabled,
.itvp-pf__submit:disabled { opacity: .6; cursor: wait; }

/* --- Success state -------------------------------------------------------- */
.itvp-pf__success { text-align: center; padding: 24px 0 10px; }
.itvp-pf__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	font-size: 30px;
	font-weight: 800;
	color: #FFFFFF;
	background: var(--itvp-green-500);
	border-radius: 50%;
}
.itvp-pf__hint--success { margin: 0 auto; max-width: 480px; }

/* --- Honeypot ------------------------------------------------------------- */
.itvp-pf__hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 767px) {
	.itvp-pf__chips { grid-template-columns: 1fr; gap: 14px; }
	.itvp-pf__title { font-size: 24px; }
	.itvp-pf__input,
	.itvp-pf__chip { padding: 20px 18px; font-size: 16px; }
	.itvp-pf__chip.is-selected { padding: 19px 17px; }
	.itvp-pf__next,
	.itvp-pf__submit { padding: 18px 28px; font-size: 16px; }
	.itvp-pf__progress { gap: 10px; margin-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.itvp-pf__seg,
	.itvp-pf__input,
	.itvp-pf__chip,
	.itvp-pf__back,
	.itvp-pf__next,
	.itvp-pf__submit { transition: none; }
}