/* @override 
	http://127.0.0.1:3000/wp-content/plugins/omega-dgt/assets/css/dgt-survey.css?*
	https://usi.omega-demo.net/wp-content/plugins/omega-dgt/assets/css/dgt-survey.css?* */

/**
 * Omega Decision Guidance Tool — survey + recommendation styles.
 *
 * Scoped under .dgt-survey and theme-agnostic. The .dgt-* recommendation classes
 * match the safe_html the API returns so the injected result looks consistent
 * with the form it replaces.
 */

.dgt-survey {
	--dgt-accent: #1d6fb8;
	--dgt-accent-contrast: #ffffff;
	--dgt-border: #d4d9df;
	--dgt-border-strong: #b8c0c9;
	--dgt-bg: #ffffff;
	--dgt-bg-subtle: #f6f8fa;
	--dgt-text: #1f2933;
	--dgt-text-muted: #52606d;
	--dgt-error: #b42318;
	/* Distinct "guidance/hint" hue — intentionally not the selection accent. */
	--dgt-guide: #a16207;
	--dgt-radius: 10px;
	--dgt-gap: 1em;
	/* Headroom left above the form/result when JS scrolls them to the top of the
	   viewport (submit roll-up, start-over, result reveal), so a floating/sticky
	   top nav doesn't cover them. Honored by scrollIntoView via scroll-margin-top. */
	--dgt-scroll-offset: 80px;

	/* Fill the container the theme gives us rather than imposing a narrow cap. */
	width: 100%;
	color: var(--dgt-text);
	line-height: 1.5;
	scroll-margin-top: var(--dgt-scroll-offset);
}

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

/* ---------- Form ---------- */

/* Survey title: rendered outside the form, so it stays put through the roll-up
   and the form -> result swap. */
.dgt-title {
	margin-bottom: 1em;
	font-weight: 700;
	line-height: 1em;
	color: var(--dgt-text);
	color: var(--OMEGA-text-headline);
}

.dgt-intro {
	margin: 0 0 1.5em;
	color: var(--dgt-text-muted);
}

.dgt-disclaimer {
	display: none;
	margin: 1em 0 0;
	color: var(--dgt-text-muted);
	font-size: 0.9em;
	font-style: italic;
}

.dgt-survey[data-dgt-state='result'] .dgt-disclaimer {
	display: block;
}

.dgt-question {
	border: 0;
	margin: 0 0 1.5em;
	padding: 0;
	min-width: 0;
}

.dgt-question-title {
	display: block;
	width: 100%;
	margin: 0 0 0.75em;
	padding: 0;
	font-weight: 600;
	color: var(--dgt-text);
}

/* Per-form alignment, set via the `_omega_dgt_align` post meta (left = default,
   center, right). The titles align with text-align; the actions row is a flex
   container, so it aligns its items with justify-content. */
.dgt-survey.dgt-align-center .dgt-title,
.dgt-survey.dgt-align-center .dgt-question-title,
.dgt-survey.dgt-align-center .dgt-option-text,
.dgt-survey.dgt-align-center .dgt-headline,
.dgt-survey.dgt-align-center .dgt-section-title,
.dgt-survey.dgt-align-center .dgt-disclaimer,
.dgt-survey.dgt-align-center .dgt-post-recommendation {
	text-align: center;
}

.dgt-survey.dgt-align-right .dgt-title,
.dgt-survey.dgt-align-right .dgt-question-title,
.dgt-survey.dgt-align-right .dgt-option-text,
.dgt-survey.dgt-align-right .dgt-headline,
.dgt-survey.dgt-align-right .dgt-section-title,
.dgt-survey.dgt-align-right .dgt-disclaimer,
.dgt-survey.dgt-align-right .dgt-post-recommendation {
	text-align: right;
}

.dgt-survey.dgt-align-center .dgt-actions {
	justify-content: center;
}

.dgt-survey.dgt-align-right .dgt-actions {
	justify-content: flex-end;
}

.dgt-survey[data-dgt-state='result'].dgt-align-center .dgt-restart {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.dgt-survey[data-dgt-state='result'].dgt-align-right .dgt-restart {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: 0;
}

.dgt-options {
	display: grid;
	gap: 0.5em;
}

/* Progressive disclosure: hide collapsed questions entirely until the previous
   question is answered and JS reveals them, so the survey starts compact. */
.dgt-question.is-collapsed {
	display: none;
}

/* Gentle reveal as each question's options appear. */
.dgt-question:not(.is-collapsed) .dgt-options {
	animation: dgt-reveal 0.22s ease both;
}

@keyframes dgt-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.dgt-option {
	display: flex;
	align-items: center;
	padding: 0.8em 1em;
	border: 1px solid var(--dgt-border);
	border-radius: var(--dgt-radius);
	background: var(--dgt-bg);
	min-height: 44px;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.dgt-option:hover {
	border-color: var(--dgt-border-strong);
	background: var(--dgt-bg-subtle);
}

/* Once a question is answered, de-emphasize its other options so the chosen
   one stands out. Hovering an option restores it for easy re-selection. */
.dgt-question.has-selection .dgt-option:not(.is-selected) {
	opacity: 0.5;
}

.dgt-question.has-selection .dgt-option:not(.is-selected):hover {
	opacity: 1;
}

/* Selection is shown by highlighting the box: an accent ring drawn with an
   inset box-shadow (not an offset outline) plus a subtle tint. Kept in its own
   rule so it never depends on :has() support. */
.dgt-option.is-selected {
	border-color: var(--dgt-accent);
	background: #edf3f9;
	background: color-mix(in srgb, var(--dgt-accent) 8%, var(--dgt-bg));
	box-shadow: inset 0 0 0 1px var(--dgt-accent);
}

/* Keyboard focus indicator on the box, using the same inset ring so a focused
   selection shows a single ring rather than stacking into a double outline. */
.dgt-option:has(.dgt-option-input:focus-visible) {
	border-color: var(--dgt-accent);
	box-shadow: inset 0 0 0 1px var(--dgt-accent);
}

/* Visually hide the native radio dot but keep it operable and accessible
   (focusable, in the a11y tree, arrow-key navigable). Selection is conveyed by
   highlighting the option box instead. */
.dgt-option-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dgt-option-text {
	flex: 1 1 auto;
}

/* Checkmark on the chosen option. Hidden until JS toggles .is-selected, drawn in
   the selection accent so it reinforces (not competes with) the box highlight.
   The FA <i> only renders a glyph once a Font Awesome stylesheet is present;
   absent that it's an empty, harmless inline element. The descendant selector
   keeps the hide rule's specificity above Font Awesome's `.fas{display:...}`,
   which is enqueued after this sheet. */
.dgt-option .dgt-option-check {
	display: none;
	flex: 0 0 auto;
	margin-left: 0.75em;
	color: var(--dgt-accent);
}

.dgt-option.is-selected .dgt-option-check {
	display: inline-flex;
}

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

.dgt-actions {
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-height: 2.9em;
}

/* The guidance hint and the submit button swap places: the hint shows while
   the survey is incomplete, the button shows once every question is answered. */
.dgt-guide {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 0.9em;
	border-radius: 8px;
	background: #abb1b8;
	color: #fff;
	font-weight: 500;
	/* Italic reads as a suggestion rather than a command/label. */
	font-style: italic;
	/* A guidance callout, not an action — make sure it never reads as clickable. */
	cursor: default;
}

.dgt-form.dgt-complete .dgt-guide {
	display: none;
}

.dgt-form .dgt-submit {
	/* !important so a theme's button rules can't override the hide/show toggle. */
	display: none !important;
	align-items: center;
	letter-spacing: normal;
	gap: 0.55em;
	appearance: none;
	border: 0;
	border-radius: var(--dgt-radius);
	background: var(--dgt-accent);
	color: var(--dgt-accent-contrast);
	/* em (not rem): scale with the host theme's inherited text size, not the
	   16px root — so the button blends in whatever the theme's base size is. */
	font-size: 1.25em;
	font-weight: 600;
	padding: 0.5em 1em;
	cursor: pointer;
	transition: background-color 0.12s ease, opacity 0.12s ease;
}

.dgt-form.dgt-complete .dgt-submit {
	display: inline-flex !important;
}

/* Icon sits a touch smaller than the button label. Inherits currentColor, so it
   tracks the button's text color (white on accent). */
.dgt-btn-icon {
	font-size: 0.9em;
}

/* While a submit is in flight, swap the button's arrow for an in-button spinner
   (Font Awesome's fa-spin). Hidden until then — scoped with .dgt-submit so this
   beats Font Awesome's own `.fas { display: inline-block }` (same specificity,
   and FA's stylesheet loads after ours). */
.dgt-form .dgt-submit .dgt-submit-spinner {
	display: none;
	font-size: 0.9em;
}

.dgt-survey[data-dgt-state='loading'] .dgt-submit .dgt-btn-icon {
	display: none;
}

.dgt-survey[data-dgt-state='loading'] .dgt-submit-spinner {
	display: inline-block;
}

.dgt-form .dgt-submit:hover:not(:disabled) {
	background: #185d9c;
	background: color-mix(in srgb, var(--dgt-accent) 85%, #000);
}

.dgt-form .dgt-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dgt-form .dgt-submit:focus-visible {
	outline: 2px solid var(--dgt-text);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dgt-question:not(.is-collapsed) .dgt-options {
		animation: none;
	}

	.dgt-collapsible {
		transition: none;
	}

	.dgt-survey[data-dgt-state='result'] .dgt-result {
		animation: none;
	}
}

.dgt-form .dgt-status {
	min-height: 0;
	margin: 0;
}

.dgt-form.dgt-complete .dgt-status {
	margin: 0.75em 0 0;
	min-height: 1.25em;
	color: var(--dgt-text-muted);
}

.dgt-status--error {
	color: var(--dgt-error);
	font-weight: 600;
}

/* Visually hidden but announced by screen readers (reveal announcements). */
.dgt-sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dgt-survey[data-dgt-state='loading'] .dgt-option {
	pointer-events: none;
	opacity: 0.7;
}

/* ---------- Submit roll-up ---------- */

/* On submit, the intro + questions collapse accordion-style so the submit
   button, status, and then the recommendation rise to the top. Uses the
   grid-template-rows 1fr->0fr technique for a smooth auto-height animation. */
.dgt-collapsible {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.4s ease;
}

.dgt-collapsible-inner {
	min-height: 0;
	/* Keep interactive content unclipped; clip during accordion transitions below. */
	overflow: visible;
}

/* Clip during the submit roll-up and while the result is shown so the accordion
   collapse stays clean. `is-collapsing` (added by JS during "start over") covers
   the reverse expand, where the state is already back to 'form'. */
.dgt-survey[data-dgt-state='loading'] .dgt-collapsible-inner,
.dgt-survey[data-dgt-state='result'] .dgt-collapsible-inner,
.dgt-collapsible-inner.is-collapsing {
	overflow: hidden;
}

.dgt-survey[data-dgt-state='loading'] .dgt-collapsible,
.dgt-survey[data-dgt-state='result'] .dgt-collapsible {
	grid-template-rows: 0fr;
}

/* ---------- Recommendation result (API safe_html) ---------- */

.dgt-result {
	outline: none;
	/* Same top headroom as the container when the result is scrolled into view. */
	scroll-margin-top: var(--dgt-scroll-offset);
}

.dgt-result[hidden] {
	display: none;
}

/* Fade/slide the recommendation in where the rolled-up form was. */
.dgt-survey[data-dgt-state='result'] .dgt-result {
	animation: dgt-reveal 0.3s ease both;
}

/* "Start over" lives below the recommendation and only appears once a result is
   shown. It matches the initial form's submit button. */
.dgt-restart {
	display: none;
	align-items: center;
	gap: 0.55em;
	margin-top: 1em;
	appearance: none;
	border: 0;
	border-radius: var(--dgt-radius);
	background: var(--dgt-accent);
	color: var(--dgt-accent-contrast);
	/* em (not rem): scale with the host theme's inherited text size, not the
	   16px root — so the button blends in whatever the theme's base size is. */
	font-size: 1.25em;
	font-weight: 600;
	padding: 0.5em 1em;
	cursor: pointer;
	transition: background-color 0.12s ease, opacity 0.12s ease;
}

.dgt-survey[data-dgt-state='result'] .dgt-restart {
	display: inline-flex;
}

.dgt-post-recommendation {
	display: none;
	margin-top: 2em;
}

.dgt-survey[data-dgt-state='result'] .dgt-post-recommendation {
	display: block;
}

.dgt-restart:hover {
	background: #185d9c;
	background: color-mix(in srgb, var(--dgt-accent) 85%, #000);
}

.dgt-restart:focus-visible {
	outline: 2px solid var(--dgt-text);
	outline-offset: 2px;
}

.dgt-recommendation {
	display: block;
}

.dgt-recommendation--text {
	white-space: pre-wrap;
}

.dgt-best-fit,
.dgt-alternative {
	padding: 1.5em 1.5em 1.35em;
	border: 1px solid var(--dgt-border);
	border-radius: var(--dgt-radius);
	background: var(--dgt-bg);
	margin-bottom: 1em;
}

.dgt-best-fit {
	border: 2px solid var(--dgt-accent);
	background: #e4eef6;
	background: color-mix(in srgb, var(--dgt-accent) 12%, var(--dgt-bg));
	margin-bottom: 2em;
}

.dgt-alternative {
	background: var(--dgt-bg-subtle);
}

.dgt-headline {
	margin: 0 0 1em;
	font-weight: 700;
	line-height: 1.35;
}

.dgt-reasons {
	margin: 0 0 1em;
	padding-left: 1.25em;
}

.dgt-reasons li {
	margin: 0.5em 0;
}

.dgt-plan-details {
	display: block;
	margin-top: 1em;
}

.dgt-section-title {
	margin: 1.75em 0 1.2em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dgt-text);
}

.dgt-details {
	margin: 0;
	display: grid;
	gap: 0.5em;
}

.dgt-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25em 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--dgt-bg);
}

.dgt-detail:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dgt-detail dt {
	font-weight: 600;
	color: var(--dgt-text-muted);
}

.dgt-detail dd {
	margin: 0;
}

.dgt-lead {
	margin: 0;
	padding: 1.1em 1.25em;
	border: 1px solid var(--dgt-border);
	border-radius: var(--dgt-radius);
	background: var(--dgt-bg-subtle);
}

.dgt-recommendation [data-dgt-status='failure'] .dgt-lead,
.dgt-recommendation[data-dgt-status='failure'] .dgt-lead {
	border: 1px solid var(--dgt-border-strong);
	background: var(--dgt-bg-subtle);
}

/* Fixed px breakpoint so the bizarre 62.5% roots some themes set can't shift it. */
@media (max-width: 512px) {
	.dgt-detail {
		grid-template-columns: 1fr;
		gap: 0.1em;
	}
}