/*
 * Nominačný formulár – Figma „06 — Form System“ + „Nominačný formulár / Krok 1–3, Kontrola, Úspešne odoslané“.
 * Polia, výber, súhlasy a hlásenia sú spoločné pre všetky formuláre: assets/css/forms.css.
 */

.ndi-nomination,
.ndi-nomination * {
	box-sizing: border-box;
}

.ndi-nomination {
	color: var(--wp--preset--color--navy);
}

.ndi-nomination > * + * {
	margin-block-start: var(--wp--preset--spacing--28);
}

/* ---------- Hlavička ---------- */

.ndi-nomination__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: var(--wp--custom--line-height--heading);
}

.ndi-nomination__intro {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
}

/* ---------- Karta a kroky ---------- */

.ndi-nomination__card {
	--ndi-card-pad: clamp(20px, 3.4vw, 40px);
	padding: var(--ndi-card-pad);
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--gray-light);
	border-radius: var(--wp--custom--radius--card-large);
	background: var(--wp--preset--color--white);
}

.ndi-step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ndi-nomination:not(.is-enhanced) .ndi-step + .ndi-step {
	margin-top: var(--wp--preset--spacing--48);
	padding-top: var(--wp--preset--spacing--32);
	border-top: var(--wp--custom--border--thin) solid var(--ndi-field-border);
}

.ndi-nomination:not(.is-enhanced) .ndi-js-only,
.ndi-nomination.is-enhanced .ndi-nojs-only,
.ndi-step[hidden] {
	display: none !important;
}

.ndi-step {
	position: relative;
}

/* Hlavička kroku: ikona z knižnice NDI, otázka a krátka inštrukcia */
.ndi-step__head {
	float: left;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--6);
	margin: 0;
	padding: 0 0 0 var(--ndi-step-indent, 0);
}

.ndi-step__head + * {
	clear: both;
}

.ndi-step[style*="--ndi-step-icon"] {
	--ndi-step-indent: 76px;
}

.ndi-step[style*="--ndi-step-icon"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	background: var(--ndi-step-icon) center / cover no-repeat;
}

.ndi-step__eyebrow {
	color: var(--wp--preset--color--electric);
	font-size: var(--wp--preset--font-size--label-s);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

/* S krokovníkom je poradie kroku vidieť hore – „Krok N z M“ ostáva len pre čítačky */
.ndi-nomination.is-enhanced .ndi-step__eyebrow {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ndi-step__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--heading);
	outline: none;
}

.ndi-step__intro {
	margin: var(--wp--custom--space--6) 0 0;
	padding-inline-start: var(--ndi-step-indent, 0);
	color: var(--wp--preset--color--navy-soft);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--snug);
}

.ndi-step .ndi-fields,
.ndi-step .ndi-review {
	margin-block-start: var(--wp--preset--spacing--32);
}

@container (max-width: 480px) {
	.ndi-step[style*="--ndi-step-icon"] {
		--ndi-step-indent: 0px;
	}

	/* Na úzkej karte ikona nad otázkou */
	.ndi-step[style*="--ndi-step-icon"]::before {
		position: static;
		display: block;
		width: 44px;
		height: 44px;
		margin-block-end: var(--wp--preset--spacing--16);
	}

}

/* ---------- Krokovník ---------- */

.ndi-nomination__card {
	container-type: inline-size;
}

/* Krokovník – biely pás s jemným tieňom vnútri karty (rešpektuje jej odsadenie) */
.ndi-stepper {
	--ndi-stepper-dot: 32px;
	--ndi-stepper-muted: var(--wp--preset--color--gray);
	--ndi-stepper-line: var(--ndi-field-border);
	--ndi-stepper-accent: var(--wp--preset--color--electric);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
	border: var(--wp--custom--border--thin) solid color-mix(in srgb, var(--ndi-field-border) 70%, transparent);
	border-radius: var(--wp--custom--radius--card-large);
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 8px 24px rgb(0 25 90 / 0.08);
	color: var(--wp--preset--color--navy);
}

.ndi-stepper__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ndi-stepper__item {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	min-width: 0;
	margin: 0;
}

.ndi-stepper__item:last-child {
	flex: 0 0 auto;
}

/* Spojnica k ďalšiemu kroku – modrá, ak sa už ďalší krok otvoril */
.ndi-stepper__item:not(:last-child)::after {
	content: "";
	flex: 1 1 auto;
	min-width: var(--wp--preset--spacing--12);
	height: 2px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--ndi-stepper-line);
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.ndi-stepper__item.is-passed:not(:last-child)::after {
	background-color: var(--ndi-stepper-accent);
}

.ndi-stepper__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	margin: 0;
	padding: var(--wp--custom--space--2) var(--wp--custom--space--10) var(--wp--custom--space--2) var(--wp--custom--space--2);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--ndi-stepper-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--label-m);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.ndi-stepper__button:disabled {
	cursor: default;
}

.ndi-stepper__item.is-reachable .ndi-stepper__button:hover {
	background-color: var(--wp--preset--color--pale-blue);
}

.ndi-stepper__button:focus-visible {
	outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--electric);
	outline-offset: 0;
}

.ndi-stepper__dot {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--ndi-stepper-dot);
	height: var(--ndi-stepper-dot);
	border: 2px solid var(--ndi-stepper-line);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--ndi-stepper-muted);
	font-size: var(--wp--preset--font-size--label-m);
	font-weight: 700;
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease), border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.ndi-stepper__item.is-current .ndi-stepper__button,
.ndi-stepper__item.is-reachable .ndi-stepper__button {
	color: var(--wp--preset--color--navy);
}

.ndi-stepper__item.is-current .ndi-stepper__button {
	font-weight: 700;
}

/* Aktuálny krok – plný modrý krúžok s jemnou aurou */
.ndi-stepper__item.is-current .ndi-stepper__dot {
	border-color: var(--ndi-stepper-accent);
	background-color: var(--ndi-stepper-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ndi-stepper-accent) 18%, transparent);
	color: var(--wp--preset--color--white);
}

/* Hotový krok – fajka namiesto čísla */
.ndi-stepper__item.is-done .ndi-stepper__dot {
	border-color: transparent;
	background: color-mix(in srgb, var(--wp--preset--color--electric) 12%, var(--wp--preset--color--white)) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.5 12.5 5' fill='none' stroke='%23006dfc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	color: transparent;
}

/* Dostupný, ale ešte nehotový krok (Kontrola po návrate späť) */
.ndi-stepper__item.is-reachable:not(.is-done) .ndi-stepper__dot {
	border-color: var(--ndi-stepper-accent);
	color: var(--ndi-stepper-accent);
}

.ndi-stepper__current {
	display: none;
	margin: var(--wp--preset--spacing--16) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 700;
	line-height: 1.25;
}

.ndi-stepper__current span {
	margin-inline-end: var(--wp--custom--space--6);
	color: var(--wp--preset--color--electric);
	font-size: var(--wp--preset--font-size--label-s);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

@container (max-width: 800px) {
	.ndi-stepper {
		--ndi-stepper-dot: 30px;
		padding: var(--wp--preset--spacing--12) var(--wp--custom--space--14);
	}

	.ndi-stepper__list,
	.ndi-stepper__item {
		gap: var(--wp--custom--space--6);
	}

	.ndi-stepper__item:not(:last-child)::after {
		min-width: var(--wp--preset--spacing--4);
	}

	.ndi-stepper__button {
		padding: var(--wp--custom--space--2);
	}

	.ndi-stepper__name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ndi-stepper__current {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ndi-stepper__dot,
	.ndi-stepper__item::after {
		transition: none;
	}
}

.ndi-step__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--12);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Späť vľavo, ďalej vpravo */
.ndi-step__actions > :first-child:not(:last-child) {
	margin-inline-end: auto;
}

.ndi-step__actions .wp-block-button__link {
	min-height: var(--wp--custom--control--field);
	padding-inline: var(--wp--preset--spacing--32);
	font-size: var(--wp--preset--font-size--body-s);
}

/* ---------- Kontrola pred odoslaním ---------- */


.ndi-review {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--16);
}

/* Vizitka – spoločná kostra */
.ndi-review__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var(--wp--preset--spacing--28);
	border-radius: var(--wp--custom--radius--card-large);
}

.ndi-review__overline {
	margin: 0;
	font-size: var(--wp--preset--font-size--label-s);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--overline);
	text-transform: uppercase;
}

.ndi-review__name {
	margin: var(--wp--preset--spacing--8) 0 0;
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--heading);
	overflow-wrap: anywhere;
}

.ndi-review__chip {
	margin-block-start: var(--wp--preset--spacing--12);
	padding: var(--wp--custom--space--6) var(--wp--preset--spacing--12);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--label-m);
	font-weight: 700;
	line-height: 1.2;
}

/* Kontaktné riadky s ikonami */
.ndi-review__lines {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.4;
}

.ndi-review__lines:not(:has(li)) {
	display: none;
}

.ndi-review__line {
	position: relative;
	padding-inline-start: 28px;
	overflow-wrap: anywhere;
}

.ndi-review__line::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ndi-line-icon) center / contain no-repeat;
	mask: var(--ndi-line-icon) center / contain no-repeat;
	opacity: 0.75;
}

.ndi-review__line--school {
	--ndi-line-icon: url(../../assets/img/icons/school.svg);
}

.ndi-review__line--mail {
	--ndi-line-icon: url(../../assets/img/icons/mail.svg);
}

.ndi-review__line--web {
	--ndi-line-icon: url(../../assets/img/icons/globe.svg);
}

.ndi-review__line--phone {
	--ndi-line-icon: url(../../assets/img/icons/phone.svg);
}

/* Upraviť – malé obrysové tlačidlá v päte vizitky */
.ndi-review__edits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--24);
}

.ndi-review__edit {
	min-height: 36px;
	padding: 0 var(--wp--preset--spacing--16);
	border: var(--wp--custom--border--thin) solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: inherit;
	font: 600 var(--wp--preset--font-size--label-m) / 1.2 var(--wp--preset--font-family--sans);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.ndi-review__edit:focus-visible {
	outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--electric);
	outline-offset: 2px;
}

/* Učiteľ – tmavá vizitka, hlavná postava nominácie */
.ndi-review__card--teacher {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.ndi-review__card--teacher .ndi-review__overline {
	color: var(--wp--preset--color--lime);
}

.ndi-review__card--teacher .ndi-review__chip {
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--navy);
}

.ndi-review__card--teacher .ndi-review__lines {
	color: var(--wp--preset--color--pale-blue);
}

.ndi-review__card--teacher .ndi-review__edit:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
}

.ndi-review__card--teacher .ndi-review__edit:focus-visible {
	outline-color: var(--wp--preset--color--lime);
}

/* Navrhovateľ – svetlá vizitka */
.ndi-review__card--nominator {
	background-color: var(--wp--preset--color--light-blue);
	color: var(--wp--preset--color--navy);
}

.ndi-review__card--nominator .ndi-review__overline {
	color: var(--wp--preset--color--navy-soft);
}

.ndi-review__card--nominator .ndi-review__chip {
	background-color: var(--wp--preset--color--white);
}

.ndi-review__card--nominator .ndi-review__edit:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
}

/* Súhlasy – drobné fajky na vizitke navrhovateľa */
.ndi-review__consents {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--16) 0 0;
	border-block-start: var(--wp--custom--border--thin) solid color-mix(in srgb, var(--wp--preset--color--navy) 14%, transparent);
	font-size: var(--wp--preset--font-size--label-m);
	line-height: 1.35;
	list-style: none;
}

.ndi-review__consents li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--space--10);
}

.ndi-review__consents li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border: var(--wp--custom--border--checkbox) solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--pill);
}

.ndi-review__consents li.is-checked::before {
	background: var(--wp--preset--color--navy) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3 5.6 10.3 11.5 3.8' fill='none' stroke='%23e1ff37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Zdôvodnenie – citát cez celú šírku */
.ndi-review__card--reason {
	grid-column: 1 / -1;
	align-items: stretch;
	background-color: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--navy);
}

.ndi-review__reason-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
}

.ndi-review__card--reason .ndi-review__overline {
	color: var(--wp--preset--color--electric);
}

.ndi-review__card--reason .ndi-review__edit:hover {
	background-color: var(--wp--preset--color--white);
}

.ndi-review__quote {
	position: relative;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--48);
	border: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--line-height--body);
	overflow-wrap: anywhere;
}

.ndi-review__quote::before {
	content: "„";
	position: absolute;
	top: -0.35em;
	left: 0;
	color: var(--wp--preset--color--pink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
}

.ndi-review__count {
	align-self: flex-start;
	margin: var(--wp--preset--spacing--16) 0 0 var(--wp--preset--spacing--48);
	color: var(--ndi-field-placeholder);
	font-size: var(--wp--preset--font-size--label-s);
	font-weight: 600;
}

.ndi-review__count.is-short {
	color: var(--wp--custom--color--error);
}

/* Poznámka o potvrdení – doplnková informácia vľavo vedľa tlačidla Odoslať */
.ndi-step--review .ndi-step__actions {
	align-items: center;
}

.ndi-step--review .ndi-step__actions > :first-child {
	margin-inline-end: 0;
}

.ndi-step--review .ndi-step__actions .ndi-note {
	max-width: 380px;
	margin: 0 var(--wp--preset--spacing--8) 0 auto;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--navy-soft);
	font-size: var(--wp--preset--font-size--label-m);
	line-height: var(--wp--custom--line-height--snug);
	text-align: right;
}

@container (max-width: 640px) {
	.ndi-review {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Na úzkej karte poznámka nad tlačidlami */
	.ndi-step--review .ndi-step__actions .ndi-note {
		flex-basis: 100%;
		order: -1;
		max-width: none;
		margin: 0 0 var(--wp--preset--spacing--8);
		text-align: left;
	}

	.ndi-step--review .ndi-step__actions > .wp-block-button:last-child {
		margin-inline-start: auto;
	}

	.ndi-review__card {
		padding: var(--wp--preset--spacing--20);
	}

	.ndi-review__quote {
		padding-inline-start: var(--wp--preset--spacing--32);
		font-size: var(--wp--preset--font-size--body-m);
	}

	.ndi-review__quote::before {
		font-size: 3rem;
	}

	.ndi-review__count {
		margin-inline-start: var(--wp--preset--spacing--32);
	}
}

/* ---------- Nominácie uzavreté ---------- */

.ndi-nomination__closed {
	padding: clamp(24px, 4vw, 48px);
	border: var(--wp--custom--border--thin) solid var(--ndi-field-border);
	border-radius: var(--wp--custom--radius--card-large);
	background: var(--wp--preset--color--white);
	text-align: center;
}

.ndi-nomination__closed-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--line-height--heading);
}

.ndi-nomination__closed p {
	max-width: 560px;
	margin: var(--wp--preset--spacing--16) auto 0;
	color: var(--wp--preset--color--navy-soft);
}

/* ---------- Úspešne odoslané ---------- */

.ndi-nomination__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--24);
	min-height: 620px;
	padding: clamp(40px, 5vw, 72px) 24px;
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--gray-light);
	border-radius: var(--wp--custom--radius--card-large);
	background: var(--wp--preset--color--white);
	text-align: center;
	outline: none;
}

.ndi-nomination__success-mark {
	display: grid;
	place-items: center;
	width: clamp(104px, 10.4vw, 150px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--green);
}

.ndi-nomination__success-mark svg {
	width: 52%;
	height: auto;
}

.ndi-nomination__success-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: var(--wp--custom--line-height--heading);
}

.ndi-nomination__success p {
	max-width: 760px;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-m);
}

@media (max-width: 781px) {
	.ndi-nomination__success {
		min-height: 0;
	}
}

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

.ndi-nomination-placeholder {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--6);
	padding: var(--wp--preset--spacing--32);
	border: var(--wp--custom--border--thick) dashed var(--wp--preset--color--electric);
	border-radius: var(--wp--custom--radius--card-large);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--sans);
}

/* Bez viditeľnej hlavičky (úvod robí stránka) karta začína hneď */
.ndi-nomination.has-hidden-head > .ndi-nomination__card {
	margin-block-start: 0;
}

/* Turnstile („nie som robot“) – väčšinou neviditeľný, pri potrebe kliknutia sa zobrazí nad tlačidlami */
.ndi-turnstile:not(:empty) {
	margin-block-start: var(--wp--preset--spacing--24);
}