/* ==========================================================================
   StopPDFL — podanie podnetu (A3 wizard) a potvrdenie so značkou (A4)

   Kontrakt s www/assets/js/app.js:
   - [data-wizard]                 kontajner; JS z neho zloží triedu .wizard--no-js
   - [data-wizard-step="1..5"]     kroky; neaktívny krok dostane atribút hidden
                                   (alebo triedu .is-hidden), aktívny triedu .is-active
   - [data-wizard-progress]        zoznam .wizard__mark; hotový krok .is-done, aktuálny .is-active
   - [data-wizard-next|prev]       navigácia; pri kroku späť dostane .wizard triedu .is-back
   - [data-counter-for="id"]       počítadlo znakov (.field__counter)
   - [data-dropzone]               zóna pre súbory; pri ťahaní dostane triedu .is-over
   - [data-file-list]              zoznam vybraných súborov, položky .file-list__item
   - [data-summary-for="pole"]     bunka súhrnu v kroku 5

   Bez JS zostanú všetky kroky pod sebou a formulár funguje ďalej.
   ========================================================================== */

/* --- Hlavička wizardu (64 px lišta namiesto mastheadu) --------------------- */

.wizard-bar {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 var(--gutter-md);
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.wizard-bar__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.wizard-bar__mark { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; }
.wizard-bar__mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.24); }
.wizard-bar__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--ink-soft); }

.wizard-bar__tools { display: flex; align-items: center; gap: 24px; }
.wizard-bar__tip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ink-soft);
	border-bottom: 1px dotted var(--ink-faint);
	padding-bottom: 2px;
}
.wizard-bar__tip svg { color: var(--ink-soft); }

.wizard-bar__exit {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--ink);
	border-radius: var(--radius-stamp);
	background: none;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* Dotykový cieľ rozširujeme neviditeľne — pečiatkový tvar má zostať drobný, ale trafiteľný aj palcom. */
.wizard-bar__exit::after { content: ""; position: absolute; inset: -6px -4px; }
.wizard-bar__exit:hover { background: var(--ink); color: var(--paper); }

/* --- Postup krokov --------------------------------------------------------- */

.wizard__progress { max-width: 1120px; margin: 0 auto; padding: 40px var(--gutter-md) 0; }

.wizard__steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wizard__mark { display: flex; flex-direction: column; gap: 10px; }

.wizard__bar { display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.wizard__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--signal);
	transition: width var(--dur) var(--ease-out);
}
/* Rozpracovaný krok sa číta ako „ste v ňom", hotový ako „máte za sebou". */
.wizard__mark.is-active .wizard__bar-fill { width: 60%; }
.wizard__mark.is-done .wizard__bar-fill { width: 100%; }
/* Bez JS sú všetky kroky naraz na obrazovke — pruh preto nič „nečaká". */
.wizard--no-js .wizard__mark .wizard__bar-fill { width: 100%; }

.wizard__mark-name {
	display: flex;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--ink-quiet);
}
.wizard__mark.is-active .wizard__mark-name,
.wizard__mark.is-done .wizard__mark-name { color: var(--ink); font-weight: 500; }

/* --- Mriežka: formulár + bočný panel --------------------------------------- */

.wizard__grid {
	display: grid;
	grid-template-columns: minmax(0, 700px) 340px;
	gap: 44px;
	justify-content: center;
	padding: 48px var(--gutter-md) 72px;
}

.wizard__form { padding: 40px 44px; }

.wizard__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: start;
	position: sticky;
	top: 24px;
}
.info-panel__icon--green { color: var(--seal-green); }

/* --- Kroky ----------------------------------------------------------------- */

.wizard__step { display: block; }
.wizard__step[hidden],
.wizard__step.is-hidden { display: none; }

/* M12: obsah sa medzi krokmi posunie o 32 px v smere navigácie. */
.wizard:not(.wizard--no-js) .wizard__step.is-active { animation: spdl-step-in var(--dur) var(--ease-out) both; }
.wizard.is-back:not(.wizard--no-js) .wizard__step.is-active { animation-name: spdl-step-back; }

@keyframes spdl-step-in {
	from { opacity: 0; transform: translateX(32px); }
	to { opacity: 1; transform: none; }
}
@keyframes spdl-step-back {
	from { opacity: 0; transform: translateX(-32px); }
	to { opacity: 1; transform: none; }
}

.wizard__title { font-size: 28px; letter-spacing: -0.01em; }
.wizard__lede {
	margin: 10px 0 0;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.wizard__lede + .field { margin-top: 36px; }

.wizard__note { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.wizard__fineprint { margin-top: 22px; text-align: center; }

.wizard__why {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 26px;
	padding: 20px 22px;
	background: var(--paper-deep);
	border-radius: var(--radius);
}
.wizard__why-text { font-family: var(--font-display); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* --- Navigácia v päte kroku ------------------------------------------------ */

.wizard__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--paper-deep);
}
/* Bez JS by tlačidlá „Pokračovať" a „Späť" nemali kam viesť — zostane jediné odoslanie na konci. */
.wizard--no-js .wizard__foot--mid { display: none; }
.wizard--no-js .wizard__back--mid { display: none; }
.wizard--no-js .wizard__foot { justify-content: flex-end; }

.wizard__back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	cursor: pointer;
}

/* --- Krok 1: výber kategórie ----------------------------------------------- */

.cat-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

.cat-option {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 44px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper-raised);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cat-option:hover { border-color: var(--line-strong); background: var(--paper-tint); }
/* Vybraná možnosť má hrubší rám; padding doladíme, aby sa karta nehla. */
.cat-option:has(:checked) { border-color: var(--ink); border-width: 2px; padding: 17px 19px; background: var(--paper-tint); }

.cat-option__radio {
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	background: var(--paper-raised);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), border-width var(--dur-fast) var(--ease-out);
}
.cat-option__radio:checked { border-color: var(--ink); border-width: 6px; }
.cat-option__radio:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 50%; }

.cat-option__body { display: flex; flex-direction: column; gap: 4px; }
.cat-option__title { font-size: 16px; font-weight: 600; color: var(--ink); }
.cat-option__hint { font-family: var(--font-display); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* --- Doladenie formulárových primitívov ------------------------------------ */

/* Chybu vypisujeme NAD pole — oko aj čítačka ju stretnú skôr než vstup. */
.wizard .field__error { margin-top: 26px; }
.wizard .field__error + .field,
.wizard .field__error + .cat-list,
.wizard .field__error + .dropzone,
.wizard .field__error + .checkbox { margin-top: 8px; }

/* Hlavné pole kroku má aj v pokoji pevnejší rám než sprievodné selecty. */
.wizard .field--strong textarea { border-color: var(--line-strong); }

.wizard .checkbox { min-height: 44px; }
/* Zaškrtnutý štvorček je atramentový — fajka na ňom musí byť papierová. */
.wizard .checkbox input:checked + .checkbox__box { color: var(--paper); }

/* --- Krok 3: prílohy -------------------------------------------------------- */

.dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	padding: 38px 24px;
	border: 2px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--paper-tint);
	text-align: center;
	transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.dropzone:hover,
.dropzone:focus-within,
.dropzone.is-over { border-color: var(--ink); background: var(--paper-warm); }

.dropzone__icon { color: var(--ink-soft); }
.dropzone__title { font-size: 16px; font-weight: 600; color: var(--ink); }
.dropzone__hint { font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }

.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* Bez JS nechávame natívny vstup viditeľný — inak by človek nevidel, čo vybral. */
.wizard--no-js .dropzone__input {
	position: static;
	width: auto;
	height: auto;
	margin-top: 14px;
	opacity: 1;
	font-size: 15px;
}

.file-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list:empty { display: none; }
.file-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper-raised);
	font-size: 14px;
}
.file-list__icon { flex: none; color: var(--ink-soft); }
.file-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.file-list__size { font-family: var(--font-mono); font-size: 12px; color: var(--ink-quiet); }
.file-list__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	border: 0;
	background: none;
	color: var(--ink-soft);
	cursor: pointer;
}
.file-list__remove:hover { color: var(--signal); }

/* --- Krok 5: súhrn ---------------------------------------------------------- */

.summary { display: flex; flex-direction: column; margin: 32px 0 0; }
.summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--paper-deep);
}
.summary__row:last-child { border-bottom: 0; }
.summary__row--block { flex-direction: column; gap: 8px; }

.summary__key {
	flex: none;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}
.summary__val { margin: 0; font-size: 15px; color: var(--ink); text-align: right; }
.summary__val--text {
	text-align: left;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
	white-space: pre-line;
}

/* --- Bočná časová os „čo sa stane po odoslaní" ----------------------------- */

.steps-timeline { position: relative; list-style: none; margin: 18px 0 0; padding: 0 0 0 22px; }
.steps-timeline::before {
	content: "";
	position: absolute;
	left: 5px; top: 6px; bottom: 6px;
	width: 2px;
	background: var(--line);
}
.steps-timeline__item { position: relative; display: flex; padding-bottom: 16px; }
.steps-timeline__item:last-child { padding-bottom: 0; }
.steps-timeline__dot {
	position: absolute;
	left: -22px; top: 4px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--paper-raised);
	border: 2px solid var(--line-strong);
}
.steps-timeline__item--first .steps-timeline__dot { background: var(--signal); border-color: var(--signal); }
.steps-timeline__text { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.steps-timeline__item--first .steps-timeline__text { color: var(--ink); }

/* --- Flash správy na verejnej časti ---------------------------------------- */

.report-flash-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; }
.report-flash-list--center { width: 100%; max-width: 640px; }
.report-flash {
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink-soft);
	border-radius: var(--radius);
	background: var(--paper-tint);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}
.report-flash span { display: block; }
.report-flash--success { border-left-color: var(--seal-green); }
.report-flash--warning { border-left-color: var(--ochre); }
.report-flash--danger { border-left-color: var(--signal); }

/* --- A4: potvrdenie so sledovacím kódom ------------------------------------ */

.report-done {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 110px var(--gutter-md) 120px;
	background: var(--paper);
	min-height: calc(100vh - 32px);
}
/* Tiché svetlo: po odoslaní sa pozadie za kartou presvetlí (1,2 s). Žiadna oslava, len úľava. */
.report-done::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(760px 520px at 50% 40%, var(--paper-raised) 0%, rgba(253, 251, 244, 0) 72%);
	opacity: 0;
	animation: spdl-quiet-light 1200ms var(--ease-out) 120ms forwards;
	pointer-events: none;
}
@keyframes spdl-quiet-light { to { opacity: 1; } }

.report-done > * { position: relative; }

.report-done__card {
	width: 100%;
	max-width: 640px;
	padding: 56px 56px 48px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	/* Odtrhnutý horný okraj — karta vyzerá ako útržok z bloku, nie ako dialóg. */
	border-top: 2px dashed var(--line-strong);
	border-radius: var(--radius);
	box-shadow: var(--shadow-raised);
	text-align: center;
}

/* M7 — pečiatka dopadne: 1.25 → 1.0 so scaleom a otlačkovým tieňom. */
.report-done__stamp {
	position: absolute;
	top: -20px;
	right: 36px;
	background: var(--paper-raised);
	animation: spdl-stamp 620ms var(--ease-out) 180ms both;
}
@keyframes spdl-stamp {
	0% { opacity: 0; transform: scale(1.25) rotate(-5deg); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .22); }
	62% { opacity: 1; transform: scale(1.02) rotate(-2.6deg); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .22), 0 8px 20px rgba(180, 35, 24, .22); }
	100% { opacity: 1; transform: scale(1) rotate(-3deg); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .22), 0 0 0 rgba(180, 35, 24, 0); }
}

.report-done__title { font-size: 40px; }
.report-done__lede { margin-top: 12px; font-family: var(--font-display); font-size: 19px; color: var(--ink-soft); }

.report-done__code {
	margin-top: 34px;
	padding: 26px 24px;
	background: var(--paper-deep);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.report-done__code-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}
.report-done__code-value {
	margin-top: 10px;
	font-size: 36px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--ink);
	word-break: break-word;
}
.report-done__code-actions { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.report-done__copy { min-height: 44px; }

.report-done__warning {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 22px;
	text-align: left;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--signal-deep);
}
.report-done__warning svg { flex: none; margin-top: 2px; }

.report-done__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 30px; font-size: 16px; }
.report-done__fineprint { margin-top: 12px; text-align: center; }

/* --- Responzívne ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.wizard__grid { grid-template-columns: minmax(0, 700px); }
	.wizard__aside { position: static; }
}

@media (max-width: 720px) {
	.wizard-bar { height: auto; padding: 10px var(--gutter-sm); flex-wrap: wrap; gap: 10px; }
	.wizard-bar__tools { flex: 1 1 100%; justify-content: space-between; gap: 12px; }
	.wizard-bar__tip { font-size: 12.5px; }

	.wizard__progress { padding: 24px var(--gutter-sm) 0; }
	.wizard__steps { gap: 6px; }
	/* Na úzkej obrazovke zostane pod pruhom len číslo kroku — päť názvov by sa nezmestilo. */
	.wizard__mark-text { display: none; }

	.wizard__grid { padding: 28px var(--gutter-sm) 56px; gap: 28px; }
	.wizard__form { padding: 28px 20px; }
	.wizard__title { font-size: 24px; }
	.cat-option { padding: 16px; }

	.summary__row { flex-direction: column; align-items: flex-start; gap: 6px; }
	.summary__val { text-align: left; }

	.report-done { padding: 56px var(--gutter-sm) 72px; }
	.report-done__card { padding: 40px 22px 32px; }
	.report-done__stamp { right: 16px; }
	.report-done__title { font-size: 30px; }
	.report-done__lede { font-size: 17px; }
	.report-done__code-value { font-size: 26px; }
}

/* --- Pohyb vypnutý ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wizard:not(.wizard--no-js) .wizard__step.is-active { animation: none; }
	.report-done::before { animation: none; opacity: 1; }
	.report-done__stamp { animation: none; opacity: 1; transform: rotate(-3deg); }
	.wizard__bar-fill { transition: none; }
}


/* Rovnaká úprava ako pri quick-exit v layoute: vizuál ostáva, dotyková plocha rastie. */
.wizard-bar__exit { position: relative; }
.wizard-bar__exit::after { content: ""; position: absolute; inset: -8px -6px; }

/* Značka wizardu musí byť rovnako dobre trafiteľná ako logo v hlavičke. */
.wizard-bar__brand { min-height: 44px; }


/* Na úzkych displejoch nesmie lišta wizardu pretiecť do druhého riadka — infotip
   hovorí to isté, čo panel „Ste v bezpečí" pod formulárom. */
@media (max-width: 640px) {
	.wizard-bar__tip { display: none; }
}