/**
 * Healthwise360 — Eligibility Checker.
 *
 * Scoped entirely under .hw360-eligibility so nothing leaks into the theme.
 * Design tokens are declared once on the block root as custom properties, so a
 * child theme can re-skin the whole tool by overriding a handful of variables
 * rather than rewriting selectors.
 */

.hw360-eligibility {
	/* Aliases onto theme.json's global palette (single source of truth).
	   Edit settings.color.palette there — never hardcode a hex here again. */
	--hw360-navy: var(--wp--preset--color--navy);
	--hw360-navy-secondary: var(--wp--preset--color--navy-secondary);
	--hw360-teal: var(--wp--preset--color--trust-teal);
	--hw360-teal-dark: var(--wp--preset--color--trust-teal-dark);
	--hw360-teal-surface: var(--wp--preset--color--trust-teal-surface);
	--hw360-grey-border: var(--wp--preset--color--grey-border);
	--hw360-grey-surface: var(--wp--preset--color--soft-grey);
	--hw360-white: var(--wp--preset--color--white);
	--hw360-muted: var(--wp--preset--color--grey-muted);
	--hw360-success-surface: var(--wp--preset--color--success-surface);
	--hw360-success-text: var(--wp--preset--color--success-text);
	--hw360-danger-surface: var(--wp--preset--color--error-red-surface);
	--hw360-danger-text: var(--wp--preset--color--error-red);
	--hw360-cta: var(--wp--preset--color--cta-orange-strong);
	--hw360-cta-hover: var(--wp--preset--color--cta-orange);

	--hw360-radius-card: 12px;
	--hw360-radius-control: 8px;
	--hw360-shadow-card: 0 4px 16px rgba( 16, 42, 67, 0.08 );

	box-sizing: border-box;
	max-width: 620px;
	margin-inline: auto;
	color: var( --hw360-navy );
	font-size: 16px;
	line-height: 1.6;
}

.hw360-eligibility *,
.hw360-eligibility *::before,
.hw360-eligibility *::after {
	box-sizing: inherit;
}

/* Hidden must always win, whatever layout rule follows it. */
.hw360-eligibility [hidden],
.hw360-eligibility__step[hidden],
.hw360-eligibility__panel[hidden],
.hw360-eligibility__result[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- Card */

.hw360-eligibility__steps,
.hw360-eligibility__result {
	padding: 32px;
	border-radius: var( --hw360-radius-card );
	background: var( --hw360-white );
	box-shadow: var( --hw360-shadow-card );
}

/* ------------------------------------------------- Privacy / noscript */

.hw360-eligibility__privacy,
.hw360-eligibility__noscript {
	margin: 0 0 16px;
	color: var( --hw360-muted );
	font-size: 13px;
	line-height: 1.5;
}

.hw360-eligibility__noscript {
	padding: 12px 16px;
	border-left: 4px solid var( --hw360-teal );
	border-radius: var( --hw360-radius-control );
	background: var( --hw360-teal-surface );
	color: var( --hw360-navy );
}

/* ------------------------------------------------------- Progress row */

.hw360-eligibility__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 20px;
	color: var( --hw360-muted );
	font-size: 13px;
	font-weight: 500;
}

.hw360-eligibility__progress-current {
	color: var( --hw360-teal );
	font-weight: 700;
}

/* Pill track. Fill width is set by JS via the --hw360-progress variable. */
.hw360-eligibility__progress-track {
	flex: 0 1 140px;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var( --hw360-grey-surface );
}

.hw360-eligibility__progress-bar {
	display: block;
	width: var( --hw360-progress, 25% );
	height: 100%;
	border-radius: 999px;
	background: var( --hw360-teal );
	transition: width 0.25s ease;
}

/* ------------------------------------------------------------ Questions */

.hw360-eligibility__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.hw360-eligibility__legend {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	color: var( --hw360-navy );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.hw360-eligibility__legend:focus-visible {
	outline: 2px solid var( --hw360-teal );
	outline-offset: 4px;
}

.hw360-eligibility__sublegend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.hw360-eligibility__hint {
	margin: -8px 0 16px;
	color: var( --hw360-muted );
	font-size: 15px;
}

/* --------------------------------------------------------- Yes / No */

.hw360-eligibility__choices {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hw360-eligibility__choice {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var( --hw360-grey-border );
	border-radius: var( --hw360-radius-control );
	background: var( --hw360-white );
	color: var( --hw360-navy );
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hw360-eligibility__choice:hover {
	border-color: var( --hw360-teal );
	background: var( --hw360-teal-surface );
}

.hw360-eligibility__choice:focus-visible {
	outline: 2px solid var( --hw360-teal );
	outline-offset: 2px;
}

.hw360-eligibility__choice--selected {
	border-color: var( --hw360-teal );
	background: var( --hw360-teal-surface );
	font-weight: 700;
	/* Compensate for the reflow the bolder label would otherwise cause. */
	box-shadow: inset 0 0 0 1px var( --hw360-teal );
}

/* ------------------------------------------------ Metric / Imperial */

.hw360-eligibility__fieldset--units {
	display: flex;
	justify-content: center;
	margin: 0 0 24px;
}

.hw360-eligibility__units {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var( --hw360-grey-surface );
}

.hw360-eligibility__unit {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.hw360-eligibility__unit input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.hw360-eligibility__unit span {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	color: var( --hw360-muted );
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hw360-eligibility__unit input:checked + span {
	background: var( --hw360-white );
	color: var( --hw360-navy );
	font-weight: 600;
	box-shadow: 0 1px 3px rgba( 16, 42, 67, 0.12 );
}

.hw360-eligibility__unit input:focus-visible + span {
	outline: 2px solid var( --hw360-navy );
	outline-offset: 2px;
}

/* -------------------------------------------------------- BMI inputs */

.hw360-eligibility__panel {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px 20px;
	margin: 0 0 20px;
}

/* Imperial splits into ft / in / st / lb across one row on desktop. */
.hw360-eligibility__panel[ data-hw360-unit-panel="imperial" ] {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.hw360-eligibility__field-group {
	display: contents;
}

.hw360-eligibility__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hw360-eligibility__label {
	color: var( --hw360-navy );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.hw360-eligibility__input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --hw360-grey-border );
	border-radius: var( --hw360-radius-control );
	background: var( --hw360-white );
	color: var( --hw360-navy );
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS Safari zooming on focus. */
	line-height: 1.4;
}

.hw360-eligibility__input::placeholder {
	color: var( --hw360-muted );
}

.hw360-eligibility__input:focus {
	border-color: var( --hw360-teal );
	outline: 2px solid var( --hw360-teal );
	outline-offset: 1px;
}

/* Hide the spinner arrows — they crowd the narrow imperial fields. */
.hw360-eligibility__input::-webkit-outer-spin-button,
.hw360-eligibility__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.hw360-eligibility__input[ type="number" ] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* ------------------------------------------------------------ Errors */

.hw360-eligibility__error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var( --hw360-danger-text );
	border-radius: var( --hw360-radius-control );
	background: var( --hw360-danger-surface );
	color: var( --hw360-danger-text );
	font-size: 15px;
	font-weight: 500;
}

.hw360-eligibility__error:focus-visible {
	outline: 2px solid var( --hw360-danger-text );
	outline-offset: 2px;
}

/* ----------------------------------------------------------- Actions */

.hw360-eligibility__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.hw360-eligibility__submit,
.hw360-eligibility__cta {
	display: block;
	width: 100%;
	padding: 15px 24px;
	border: 1px solid var( --hw360-cta );
	border-radius: 999px;
	background: var( --hw360-cta );
	color: var( --hw360-white );
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hw360-eligibility__submit:hover,
.hw360-eligibility__cta:hover,
.hw360-eligibility__cta:focus {
	border-color: var( --hw360-cta-hover );
	background: var( --hw360-cta-hover );
	color: var( --hw360-white );
}

.hw360-eligibility__submit:focus-visible,
.hw360-eligibility__cta:focus-visible {
	outline: 2px solid var( --hw360-navy );
	outline-offset: 2px;
}

/* Secondary "Back" — quiet, so it never competes with the primary action. */
.hw360-eligibility__back {
	align-self: flex-start;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var( --hw360-muted );
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hw360-eligibility__back:hover {
	color: var( --hw360-navy );
}

.hw360-eligibility__back:focus-visible {
	outline: 2px solid var( --hw360-teal );
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Result */

.hw360-eligibility__result {
	text-align: center;
}

.hw360-eligibility__result:focus {
	outline: none;
}

.hw360-eligibility__result:focus-visible {
	outline: 2px solid var( --hw360-teal );
	outline-offset: 4px;
}

.hw360-eligibility__result-title {
	margin: 0 0 12px;
	color: var( --hw360-navy );
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}

.hw360-eligibility__result-summary {
	margin: 0 0 20px;
	color: var( --hw360-navy-secondary );
	font-size: 16px;
}

.hw360-eligibility__reasons {
	margin: 0 0 20px;
	padding: 20px 20px 20px 38px;
	border-radius: var( --hw360-radius-control );
	background: var( --hw360-grey-surface );
	color: var( --hw360-navy );
	font-size: 15px;
	list-style: disc;
	text-align: left;
}

.hw360-eligibility__reason + .hw360-eligibility__reason {
	margin-top: 8px;
}

.hw360-eligibility__result-note {
	margin: 0 0 20px;
	color: var( --hw360-muted );
	font-size: 15px;
}

.hw360-eligibility__result--pass .hw360-eligibility__result-note {
	padding: 16px 20px;
	border-radius: var( --hw360-radius-control );
	background: var( --hw360-success-surface );
	color: var( --hw360-success-text );
	text-align: left;
}

.hw360-eligibility__result-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

/* A "not eligible" outcome is not a conversion — the CTA is outlined, not
   filled, so it reads as a helpful next step rather than a sales push. */
.hw360-eligibility__result--fail .hw360-eligibility__cta {
	background: var( --hw360-white );
	color: var( --hw360-teal );
}

.hw360-eligibility__result--fail .hw360-eligibility__cta:hover,
.hw360-eligibility__result--fail .hw360-eligibility__cta:focus {
	background: var( --hw360-teal-surface );
	color: var( --hw360-teal-dark );
}

.hw360-eligibility__restart {
	align-self: center;
	padding: 4px 8px;
	border: 0;
	background: none;
	color: var( --hw360-muted );
	font-family: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hw360-eligibility__restart:hover {
	color: var( --hw360-navy );
}

.hw360-eligibility__restart:focus-visible {
	outline: 2px solid var( --hw360-teal );
	outline-offset: 2px;
}

/* -------------------------------------------------------- Disclaimer */

.hw360-eligibility__disclaimer {
	margin: 20px 0 0;
	color: var( --hw360-muted );
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

/* ------------------------------------------------------ Editor stub */

.hw360-eligibility--editor {
	padding: 24px;
	border: 1px dashed var( --hw360-grey-border );
	border-radius: var( --hw360-radius-card );
	background: var( --hw360-grey-surface );
	color: var( --hw360-muted );
	font-size: 14px;
	text-align: center;
}

/* ------------------------------------------------------------ Mobile */

@media ( max-width: 600px ) {

	.hw360-eligibility__steps,
	.hw360-eligibility__result {
		padding: 24px 20px;
	}

	.hw360-eligibility__legend {
		font-size: 18px;
	}

	.hw360-eligibility__result-title {
		font-size: 22px;
	}

	.hw360-eligibility__panel,
	.hw360-eligibility__panel[ data-hw360-unit-panel="imperial" ] {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.hw360-eligibility__units {
		width: 100%;
	}

	.hw360-eligibility__unit,
	.hw360-eligibility__unit span {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* --------------------------------------------------- Reduced motion */

@media ( prefers-reduced-motion: reduce ) {

	.hw360-eligibility * {
		transition: none !important;
	}
}

/* ----------------------------------------------- Forced colours mode */

@media ( forced-colors: active ) {

	.hw360-eligibility__choice--selected {
		border-width: 3px;
	}

	.hw360-eligibility__progress-bar {
		background: Highlight;
	}
}