/* Epicod Questionnaire Wizard — structural styles.
 *
 * Layout only. Colors, fonts, radii and sizes come from the custom properties below,
 * which the theme sets on `.eqw` (defaults use :where() so any theme rule wins).
 */

:where(.eqw) {
	--eqw-color-text: #1d2327;
	--eqw-color-muted: #646970;
	--eqw-color-primary: #1d2327;
	--eqw-color-on-primary: #fff;
	--eqw-color-accent: #5b3a8c;
	--eqw-color-on-accent: #fff;
	--eqw-color-border: #d0d5dc;
	--eqw-color-surface: #f6f8fa;
	--eqw-color-field: #fff;
	--eqw-color-mark: #fff;
	--eqw-color-error: #c62828;

	--eqw-font-heading: inherit;
	--eqw-font-body: inherit;

	--eqw-radius-card: 1.5rem;
	--eqw-radius-control: 999px;
	--eqw-card-width: 52rem;
	--eqw-card-padding: 3em 4em;
	--eqw-control-height: 3em;
	--eqw-gap: 1em;
	--eqw-step-size: 1.6em;
	/* --eqw-pill-cols: unset = columns follow the answer count; set it to force a count. */
	--eqw-inline-label-width: 11em;
	--eqw-scroll-offset: 100px;

	--eqw-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--eqw-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h38M33.5 1L39 6l-5.5 5'/%3E%3C/svg%3E");
	--eqw-icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 3l4.6 3.4 5.7-.3 1.9 5.4 4.7 3.2-1.6 5.5L41 25.5l-3.8 4.3.1 5.7-5.5 1.6-3.3 4.7-5.3-2-5.4 1.9-3.3-4.6-5.6-1.5.1-5.8L5 25.5l2.4-5.2-1.7-5.5 4.7-3.3 1.8-5.4 5.7.2z'/%3E%3Cpath d='M16.5 24.5l5 5 10-10.5'/%3E%3C/svg%3E");
}

.eqw {
	position: relative;
	color: var(--eqw-color-text);
	font-family: var(--eqw-font-body);
}

.eqw *,
.eqw *::before,
.eqw *::after {
	box-sizing: border-box;
}

.eqw__loading {
	min-height: 24em;
}

.eqw__heading {
	margin: 0 0 1.25em;
	font-family: var(--eqw-font-heading);
	text-align: center;
}

/* Progress
   ========================================================================== */
.eqw-progress {
	display: flex;
	max-width: var(--eqw-card-width);
	margin: 0 auto 1.5em;
	padding: 0;
	list-style: none;
}

.eqw-progress__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	text-align: center;
}

/* Connector from the previous step to this one. */
.eqw-progress__item + .eqw-progress__item::before {
	content: '';
	position: absolute;
	top: calc(var(--eqw-step-size) / 2);
	inset-inline-start: calc(-50% + var(--eqw-step-size) / 2 + 0.5em);
	inset-inline-end: calc(50% + var(--eqw-step-size) / 2 + 0.5em);
	height: 1px;
	transform: translateY(-50%);
	background: var(--eqw-color-border);
}

.eqw-progress__item.is-done + .eqw-progress__item::before,
.eqw-progress__item.is-done + .eqw-progress__item.is-active::before {
	background: var(--eqw-color-accent);
}

.eqw-progress__btn {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.eqw-progress__btn:disabled {
	cursor: default;
}

.eqw-progress__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eqw-step-size);
	height: var(--eqw-step-size);
	border: 1px solid var(--eqw-color-border);
	border-radius: 50%;
	background: var(--eqw-color-field);
	color: var(--eqw-color-muted);
	font-size: 0.8em;
	line-height: 1;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.eqw-progress__item.is-done .eqw-progress__num {
	border-color: var(--eqw-color-accent);
	color: var(--eqw-color-accent);
}

.eqw-progress__item.is-active .eqw-progress__num {
	border-color: var(--eqw-color-accent);
	background: var(--eqw-color-accent);
	color: var(--eqw-color-on-accent);
}

.eqw-progress__label {
	max-width: 100%;
	font-size: 0.85em;
	line-height: 1.2;
}

/* Card & screen
   ========================================================================== */
.eqw-card {
	max-width: var(--eqw-card-width);
	margin: 0 auto;
	padding: var(--eqw-card-padding);
	border-radius: var(--eqw-radius-card);
	background: var(--eqw-color-surface);
}

/* Themes often style bare `form` elements (flex, gaps); the screen is a plain block. */
.eqw .eqw-screen {
	display: block;
	margin: 0;
	padding: 0;
}

.eqw-screen__head {
	margin-bottom: 1.75em;
	text-align: center;
}

/* Typography comes from the theme's h3. Focus moves here on screen change; no ring needed. */
.eqw-screen__title {
	outline: none;
}

.eqw-screen__error {
	margin: 1em 0 0;
	color: var(--eqw-color-error);
	text-align: center;
}

.eqw-fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--eqw-gap);
}

.eqw-field {
	grid-column: span 6;
	min-width: 0;
}

.eqw-field--half {
	grid-column: span 3;
}

.eqw-field--third {
	grid-column: span 2;
}

.eqw-field__error {
	margin: 0.35em 0 0;
	color: var(--eqw-color-error);
	font-size: 0.8em;
}

.eqw-screen--sequential .eqw-field__error {
	text-align: center;
}

/* Choice
   ========================================================================== */
.eqw-choice__head {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin-bottom: 0.6em;
}

.eqw-choice__label {
	font-weight: 500;
}

.eqw-choice__desc {
	color: var(--eqw-color-muted);
	font-size: 0.85em;
}

.eqw-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	cursor: pointer;
	text-align: start;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

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

.eqw-option__mark {
	position: relative;
	flex: 0 0 auto;
	border-radius: 50%;
}

.eqw-option__mark::after {
	content: '';
	position: absolute;
	inset: 20%;
	background: currentColor;
	-webkit-mask: var(--eqw-icon-check) center / contain no-repeat;
	        mask: var(--eqw-icon-check) center / contain no-repeat;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.eqw-option.is-checked .eqw-option__mark::after {
	opacity: 1;
	transform: none;
}

.eqw-option.is-disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.eqw-option:has(.eqw-option__input:focus-visible) {
	outline: 2px solid var(--eqw-color-accent);
	outline-offset: 2px;
}

.eqw-option__text {
	min-width: 0;
	line-height: 1.2;
}

/* Buttons grid */
.eqw-choice--pills .eqw-choice__options {
	display: grid;
	grid-template-columns: repeat(var(--eqw-pill-cols, var(--eqw-pill-auto, 3)), minmax(0, 1fr));
	gap: var(--eqw-gap);
}

.eqw-choice--pills .eqw-option {
	min-height: var(--eqw-control-height);
	padding: 0.35em;
	padding-inline-end: 1em;
	border-radius: var(--eqw-radius-control);
	background: var(--eqw-color-primary);
	color: var(--eqw-color-on-primary);
}

.eqw-choice--pills .eqw-option__mark {
	width: calc(var(--eqw-control-height) - 0.7em);
	height: calc(var(--eqw-control-height) - 0.7em);
	background: var(--eqw-color-mark);
	color: var(--eqw-color-accent);
}

/* Inline row: label beside a bordered row of options */
.eqw-choice--inline {
	display: grid;
	grid-template-columns: var(--eqw-inline-label-width) minmax(0, 1fr);
	align-items: center;
	gap: var(--eqw-gap);
}

.eqw-choice--inline .eqw-choice__head {
	margin: 0;
}

.eqw-choice--inline .eqw-choice__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
	gap: 1px;
	border: 1px solid var(--eqw-color-border);
	background: var(--eqw-color-border);
}

.eqw-choice--inline .eqw-option {
	justify-content: center;
	gap: 0.5em;
	min-height: var(--eqw-control-height);
	padding: 0.5em 0.75em;
	background: var(--eqw-color-field);
	font-size: 0.85em;
}

.eqw-choice--inline .eqw-option__mark {
	width: 1.15em;
	height: 1.15em;
	border: 1px solid var(--eqw-color-border);
	color: var(--eqw-color-on-primary);
}

.eqw-choice--inline .eqw-option.is-checked .eqw-option__mark {
	border-color: var(--eqw-color-primary);
	background: var(--eqw-color-primary);
}

/* Consent
   ========================================================================== */
.eqw-consent {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0;
	color: var(--eqw-color-muted);
	font-size: 0.8em;
	cursor: pointer;
}

.eqw-consent__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.eqw-consent__box {
	position: relative;
	flex: 0 0 auto;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.1em;
	border: 1px solid var(--eqw-color-border);
	background: var(--eqw-color-field);
}

.eqw-consent__box::after {
	content: '';
	position: absolute;
	inset: 10%;
	background: var(--eqw-color-on-primary);
	-webkit-mask: var(--eqw-icon-check) center / contain no-repeat;
	        mask: var(--eqw-icon-check) center / contain no-repeat;
	opacity: 0;
}

.eqw-consent__input:checked + .eqw-consent__box {
	border-color: var(--eqw-color-primary);
	background: var(--eqw-color-primary);
}

.eqw-consent__input:checked + .eqw-consent__box::after {
	opacity: 1;
}

.eqw-consent__input:focus-visible + .eqw-consent__box {
	outline: 2px solid var(--eqw-color-accent);
	outline-offset: 2px;
}

.eqw-field.has-error .eqw-consent__box {
	border-color: var(--eqw-color-error);
}

/* Text inputs (scoped under .eqw to beat theme input[type] rules)
   ========================================================================== */
.eqw-input {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0;
}

.eqw-input__label {
	font-size: 0.9em;
}

.eqw-input__req {
	margin-inline-start: 0.15em;
	color: var(--eqw-color-error);
}

.eqw .eqw-input__control {
	width: 100%;
	min-height: var(--eqw-control-height);
	margin: 0;
	padding: 0.5em 1.25em;
	border: 1px solid var(--eqw-color-border);
	border-radius: var(--eqw-radius-control);
	background: var(--eqw-color-field);
	color: var(--eqw-color-text);
	font: inherit;
	line-height: 1.3;
	text-align: start;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.eqw textarea.eqw-input__control {
	display: block;
	padding-top: calc((var(--eqw-control-height) - 1.3em) / 2 - 1px);
	padding-bottom: calc((var(--eqw-control-height) - 1.3em) / 2 - 1px);
	overflow: hidden;
	resize: none;
}

/* Browsers force LTR on tel (and some on email) inputs, which puts the placeholder
   on the wrong side of an RTL form. Follow the page direction instead. */
.eqw input[type="tel"].eqw-input__control,
.eqw input[type="email"].eqw-input__control {
	direction: inherit;
}

.eqw .eqw-input__control::placeholder {
	color: var(--eqw-color-muted);
	opacity: 1;
}

.eqw .eqw-input__control:focus {
	border-color: var(--eqw-color-primary);
}

.eqw-field.has-error .eqw-input__control {
	border-color: var(--eqw-color-error);
}

/* Honeypot */
.eqw-hp {
	position: absolute;
	inset-inline-start: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Navigation
   ========================================================================== */
.eqw-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--eqw-gap);
	margin-top: 2.5em;
}

.eqw-nav__counter {
	grid-column: 2;
	color: var(--eqw-color-muted);
	font-size: 0.8em;
	white-space: nowrap;
}

.eqw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	min-height: calc(var(--eqw-control-height) * 0.85);
	margin: 0;
	padding: 0.5em 1.75em;
	border: 1px solid transparent;
	border-radius: var(--eqw-radius-control);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.eqw-btn--back {
	grid-column: 1;
	justify-self: start;
	border-color: var(--eqw-color-border);
	background: transparent;
	color: var(--eqw-color-text);
}

.eqw-btn--next,
.eqw-btn--submit {
	grid-column: 3;
	justify-self: end;
}

.eqw-btn--next {
	background: var(--eqw-color-accent);
	color: var(--eqw-color-on-accent);
}

.eqw-btn--submit {
	background: var(--eqw-color-primary);
	color: var(--eqw-color-on-primary);
}

.eqw-btn:disabled {
	cursor: wait;
	opacity: 0.6;
}

/* Arrows point the way the button goes (mirrored in RTL). */
.eqw-btn--next::after,
.eqw-btn--submit::after,
.eqw-btn--back::before {
	content: '';
	flex: 0 0 auto;
	width: 1.75em;
	aspect-ratio: 40 / 12;
	background: currentColor;
	-webkit-mask: var(--eqw-icon-arrow) center / contain no-repeat;
	        mask: var(--eqw-icon-arrow) center / contain no-repeat;
}

.eqw-btn--back::before,
[dir="rtl"] .eqw-btn--next::after,
[dir="rtl"] .eqw-btn--submit::after {
	transform: scaleX(-1);
}

[dir="rtl"] .eqw-btn--back::before {
	transform: none;
}

/* Thank-you
   ========================================================================== */
.eqw-thanks {
	padding: 2em 0;
	text-align: center;
	outline: none;
}

.eqw-thanks__icon {
	display: inline-block;
	width: 3em;
	height: 3em;
	margin-bottom: 1em;
	background: var(--eqw-color-primary);
	-webkit-mask: var(--eqw-icon-done) center / contain no-repeat;
	        mask: var(--eqw-icon-done) center / contain no-repeat;
}

.eqw-thanks__title {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--eqw-font-heading);
}

.eqw-thanks__text {
	max-width: 26em;
	margin: 0.75em auto 0;
	color: var(--eqw-color-muted);
	font-size: 0.85em;
	white-space: pre-line;
}

.eqw-thanks__note {
	margin-top: 3em;
	color: var(--eqw-color-muted);
	font-size: 0.7em;
}

.eqw-thanks__note p {
	margin: 0;
}

/* Screen transition
   ========================================================================== */
.eqw-fade-enter-active,
.eqw-fade-leave-active {
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.eqw-fade-enter-from {
	opacity: 0;
	transform: translateY(0.5em);
}

.eqw-fade-leave-to {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.eqw-fade-enter-active,
	.eqw-fade-leave-active {
		transition: none;
	}
}

/* Small screens
   ========================================================================== */
@media (max-width: 767px) {
	:where(.eqw) {
		--eqw-card-padding: 2em 1.25em;
		--eqw-pill-cols: 1;
	}

	.eqw-field--half,
	.eqw-field--third {
		grid-column: span 6;
	}

	.eqw-choice--inline {
		grid-template-columns: minmax(0, 1fr);
	}

	.eqw-progress__label {
		font-size: 0.7em;
	}

	.eqw-nav {
		grid-template-columns: auto 1fr auto;
	}

	.eqw-btn {
		padding-inline: 1.25em;
	}
}