/*
 * Formuláře soutěže.
 *
 * Všechno jde přes CSS proměnné na kořeni formuláře (R-43), takže se vzhled
 * ladí přepsáním hodnot, ne šablon. Hodnoty nastavené u soutěže se vypisují
 * inline přímo na obal (R-74) a tyhle slouží jako výchozí.
 *
 * Písmo i barva textu jsou `inherit` – formulář má vypadat jako zbytek webu,
 * dokud někdo výslovně neřekne jinak.
 */

.sz-form {
	--sz-accent: #1a7f37;
	--sz-accent-contrast: #ffffff;
	--sz-text: inherit;
	--sz-muted: #6b6b6b;
	--sz-border: #d4d4d4;
	--sz-border-focus: var(--sz-accent);

	/*
	 * Výplň obrysového tlačítka (R-206). Průhledné tlačítko prosvítalo:
	 * přes „Nahrát účtenku" bylo vidět čárkovaný rámeček pod ním. Barva
	 * stránky je bílá v drtivé většině případů; kdo má tmavý web, přepíše
	 * si proměnnou v Oxygenu.
	 */
	--sz-surface: #ffffff;
	--sz-error: #b3261e;
	--sz-success: #1a7f37;
	--sz-radius: 6px;
	--sz-border-width: 1px;
	--sz-gap: 18px;
	--sz-input-padding: 10px 12px;
	--sz-font: inherit;

	color: var(--sz-text);
	font-family: var(--sz-font);

	/*
	 * Základní velikost písma (R-257). Bez nastavení proměnná neexistuje
	 * a velikost se dědí ze stránky. Všechno uvnitř je v `em`, takže se
	 * s ní posune celý formulář včetně přehledu.
	 */
	font-size: var(--sz-font-size);

	/*
	 * Formulář je ve výchozím stavu vystředěný. Zarovnání i šířku přepisuje
	 * nastavení soutěže inline (R-74), aby platily i tam, kde se tenhle
	 * stylopis z nějakého důvodu nenačte.
	 */
	/*
	 * Šířka, ne jen `max-width` (R-135). Stavitelé stránek běžně obalí
	 * shortcode do flexu s `align-items: center` a položka takového flexu
	 * se smrští na šířku svého obsahu: blok pak měnil šířku podle toho,
	 * jestli je v něm otevřený formulář. Se zadanou šířkou je to pevné
	 * a `max-width: 100%` ho udrží uvnitř užšího rodiče.
	 *
	 * Bez nastavení je to 100 % (R-258): šířku pak určuje kontejner
	 * ve staviteli stránek. Hodnota může být i v %, rem, em nebo vw.
	 */
	width: var(--sz-max-width, 100%);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Vnořený obal velikost nenásobí: 80 % z 80 % by bylo 64 %. */
.sz-form .sz-form {
	font-size: inherit;
}

/*
 * Zarovnání se nastavuje i tady, ne jen na obalu. Obal může být v šabloně
 * roztažený přes celou šířku a samotný formulář by pak zůstal vlevo (R-79).
 */
.sz-form__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--sz-gap);
	width: 100%;
	max-width: var(--sz-body-max-width, 100%);
	margin-left: auto;
	margin-right: auto;
}

.sz-form--align-left .sz-form__body {
	margin-left: 0;
	margin-right: auto;
	justify-content: flex-start;
}

/*
 * ⚠️ Tohle u vystředění chybělo (R-88): samotná šířka formuláře nestačí.
 * Pole jsou položky flexu a bez `justify-content` se drží vlevo. Řádka se
 * dvěma poli po 50 % pak vypadá v pořádku, ale řádka s jedním polem na 60 %
 * visí u levého okraje.
 */
.sz-form--align-center .sz-form__body {
	justify-content: center;
}

.sz-form--align-right .sz-form__body {
	margin-left: auto;
	margin-right: 0;
	justify-content: flex-end;
}

/*
 * Na střed se zarovnává i obsah polí: popisek, nápověda i text souhlasu.
 * Samotná šířka bloku nestačí, text by zůstal u levého okraje (R-79).
 */
.sz-form--align-center .sz-label,
.sz-form--align-center .sz-help-text,
.sz-form--align-center .sz-error,
.sz-form--align-center .sz-warning,
.sz-form--align-center .sz-notice {
	text-align: center;
}

.sz-form--align-center .sz-checkbox {
	justify-content: center;
}

.sz-form--align-center .sz-checkbox__text {
	text-align: center;
}

/*
 * Pole se skládají do řádků podle šířky zadané v administraci (R-58, R-86).
 * Hodnoty přicházejí jako proměnné --sz-w-mob / --sz-w-tab / --sz-w-pc.
 *
 * Zlomy jsou tři a jsou tady na jednom místě:
 *   do 767 px    mobil   – pole pod sebou, dvě vedle sebe se nevejdou
 *   768–1023 px  tablet  – dvě pole vedle sebe ano, úzké PSČ vedle města ne
 *   od 1024 px   desktop – platí šířky zadané v administraci
 */
.sz-field,
.sz-form__actions {
	box-sizing: border-box;
	min-width: 0;
	flex: 0 0 calc(var(--sz-w-mob, 100%) - var(--sz-gap) * (1 - var(--sz-w-mob, 100%) / 100%));
}

.sz-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

@media (min-width: 768px) {
	.sz-field,
	.sz-form__actions {
		flex-basis: calc(var(--sz-w-tab, 100%) - var(--sz-gap) * (1 - var(--sz-w-tab, 100%) / 100%));
	}
}

@media (min-width: 1024px) {
	.sz-field,
	.sz-form__actions {
		flex-basis: calc(var(--sz-w-pc, 100%) - var(--sz-gap) * (1 - var(--sz-w-pc, 100%) / 100%));
	}
}

/*
 * Tlačítko začíná vždy novou řádku (R-78), ať se nezalomí vedle posledního
 * pole. Šířku má jako kterékoli jiné pole, v procentech (R-86).
 *
 * Zlom dělá prázdná položka před tlačítkem, ne `::before` uvnitř: pseudoprvek
 * je potomek samotného tlačítka a na zalamování řádky ve formuláři nedosáhne.
 * Kvůli tomu tlačítko dřív uvízlo vedle posledního pole u pravého okraje
 * a jeho text se lámal na dva řádky (R-108).
 */
.sz-form__break {
	flex: 0 0 100%;
	height: 0;
	margin: 0;
}

/*
 * Zlom je vlastní řádka flexu, takže mezi posledním polem a tlačítkem
 * byly dvě mezery místo jedné (R-279). Záporný okraj jednu vrací.
 */
.sz-form__break + .sz-form__actions {
	margin-top: calc(var(--sz-gap) * -1);
}

.sz-form__actions {
	display: flex;
	justify-content: center;
}

.sz-submit {
	flex: 1 1 auto;
	white-space: nowrap;
	min-width: fit-content;
}

/*
 * Vzduch v registraci (R-278): pod počtem kusů, mezi osobními údaji
 * a souhlasy víc, mezi souhlasy a tlačítkem míň. Násobky mezery mezi poli,
 * ať se posunou s ní.
 */
.sz-field--role-product_qty {
	margin-bottom: calc(var(--sz-gap) * 0.6);
}

/* V přehledu je za počtem rovnou odeslání: tam má být blízko (R-278). */
.sz-dashboard__panel .sz-field--role-product_qty {
	margin-bottom: 0;
}

.sz-field:not(.sz-field--checkbox) + .sz-field--checkbox {
	margin-top: calc(var(--sz-gap) * 0.6);
}

/* V přehledu blíž k poli nad ním a víc místa pod ním, ať se nelepí na rámeček panelu (R-279). */
.sz-dashboard__panel .sz-form__break + .sz-form__actions {
	margin-top: calc(var(--sz-gap) * -1.4);
	margin-bottom: 10px;
}

/*
 * Odesílá se (R-278). Nahrání účtenky trvá i pár vteřin a bez znamení
 * nebylo poznat, že se něco děje: soutěžící klikal znovu. Text tlačítka
 * se schová a místo něj se točí kolečko v barvě textu tlačítka.
 */
.sz-form__body.is-sending .sz-submit {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.sz-form__body.is-sending .sz-submit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid var(--sz-accent-contrast);
	border-right-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: sz-spin 0.8s linear infinite;
}

.sz-form__body.is-sending .sz-field {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

@keyframes sz-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.sz-form__body.is-sending .sz-submit::after {
		animation-duration: 2.4s;
	}
}

/* Hlášky vždy přes celou šířku. */
.sz-warning,
.sz-form__body > .sz-notice {
	flex: 0 0 100%;
}

/*
 * Jednotlivé prvky mají vlastní barvu a velikost (R-256, R-257). Druhá
 * hodnota ve `var()` je záloha: dokud prvek nemá nic nastaveno, vypadá
 * jako dřív. Text na pozadí stránky a text v bílém poli jsou dvě různé
 * barvy: na tmavém webu jedna nikdy nesedí na obojí.
 */
.sz-label {
	color: var(--sz-label, var(--sz-text));
	font-weight: var(--sz-fw-label, 600);
	font-size: var(--sz-fs-label, 0.95em);
}

.sz-required {
	color: var(--sz-required, var(--sz-error));
	margin-left: 2px;
}

.sz-input {
	width: 100%;
	padding: var(--sz-input-padding);
	border: var(--sz-border-width, 1px) solid var(--sz-input-border, var(--sz-border));
	border-radius: var(--sz-radius);
	background: var(--sz-input-bg, #fff);
	color: var(--sz-input-text, inherit);
	font: inherit;
	font-size: var(--sz-fs-input, 1em);
	box-sizing: border-box;
}

/* Nevybraná roletka ukazuje svůj popisek: má mít barvu jako placeholder. */
select.sz-input:has(> option[value=""]:checked) {
	color: var(--sz-placeholder, var(--sz-muted));
}

select.sz-input option {
	color: var(--sz-input-text, var(--sz-text));
}

.sz-input:focus {
	outline: 2px solid var(--sz-border-focus);
	outline-offset: 1px;
	border-color: var(--sz-border-focus);
}

.sz-field--error .sz-input {
	border-color: var(--sz-error);
}

.sz-error {
	color: var(--sz-error);
	font-size: 0.875em;
	margin: 0;
}

/* Souhlas nese text s odkazem (R-65). Odkaz uvnitř <label> by při kliknutí
   přepnul zaškrtnutí místo otevření pravidel, proto je text vedle
   zaškrtávátka, ne v jeho popisku.

   Je to drobný text, ne hlavní obsah formuláře (R-89): 70 % hlavního písma
   a k tomu volnější řádkování, aby se dvouřádkový souhlas dal přečíst. */

.sz-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--sz-consent, var(--sz-text));
	font-size: var(--sz-fs-consent, 0.7em);
	line-height: 1.5;
}

.sz-checkbox input {
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--sz-checkbox, var(--sz-accent));
}

.sz-checkbox__text {
	cursor: pointer;
}

.sz-checkbox__text a {
	color: var(--sz-link, inherit);
	text-decoration: underline;
}

/*
 * Tlačítka se při najetí převracejí (R-196): plné zesvětlá na obrysové
 * a obrysové ztmavne na plné. Je to zřetelnější než ztmavení o pár procent
 * a drží to jednu logiku napříč celým webem i administrací.
 *
 * Rámeček má tlačítko i ve výchozím stavu, jen v barvě pozadí: bez něj
 * by se po najetí zvětšilo o 4 px a text pod ním poskočil.
 */
.sz-submit {
	background: var(--sz-btn-bg, var(--sz-accent));
	color: var(--sz-accent-contrast);
	border: 2px solid var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
	border-radius: var(--sz-btn-radius, var(--sz-radius));
	padding: var(--sz-btn-padding, 11px 22px);
	font: inherit;
	font-size: var(--sz-fs-button, 1em);
	font-weight: var(--sz-fw-button, 600);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sz-submit:hover,
.sz-submit:focus-visible {
	background: var(--sz-btn-hover-bg, var(--sz-surface));
	color: var(--sz-btn-hover-text, var(--sz-btn-bg, var(--sz-accent)));
	border-color: var(--sz-btn-hover-border, var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent))));
}

.sz-notice {
	padding: 12px 14px;
	border-radius: var(--sz-radius);
	margin: 0 0 var(--sz-gap);
	border-left: 3px solid var(--sz-notice-border, var(--sz-muted));
	background: var(--sz-notice-bg, #f4f4f4);
	color: var(--sz-notice-text, inherit);
	font-size: var(--sz-fs-notice, 1em);
}

/* Rámeček hlášky (R-278): nastavený platí pro všechny, prázdný je podle výsledku. */
.sz-notice--success {
	border-left-color: var(--sz-notice-border, var(--sz-success));
}

.sz-notice--error {
	border-left-color: var(--sz-notice-border, var(--sz-error));
}

.sz-lead {
	font-size: 1.15em;
	font-weight: 600;
	margin: 0 0 var(--sz-gap);
}

.sz-warning {
	font-size: 0.9em;
	color: var(--sz-muted);
	border-left: 3px solid var(--sz-notice-border, var(--sz-border));
	padding-left: 12px;
	margin: 0;
}

/*
 * Ukazatel rozdělený metami (R-103).
 *
 * Pruh jde k nejvyšší ceně, ne k nejbližší: soutěžící má vidět celou cestu.
 * Mety na něm stojí jako svislé linky s číslem, aby bylo poznat, kde která
 * cena začíná. Dole se pod ně váže seznam cen.
 */
/* Ukazatel potřebuje vzduch, jinak splývá s nadpisem i s výzvou pod ním. */
.sz-progress {
	margin: 28px 0 44px;
}

.sz-progress__track {
	position: relative;
	height: 16px;
}

/* Podklad i výplň. Mety stojí vedle nich, ne uvnitř: maska by je sežrala. */
.sz-progress__bar {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--sz-progress-track, #e6e6e6);
	overflow: hidden;
}

/*
 * Dílky po jednom kuse (R-112). Maska rozstříhá podklad i výplň naráz,
 * takže se nemusí kreslit dvakrát a dílky vždycky lícují.
 *
 * Nad hranicí v PHP se třída nepřidá a pruh zůstane plynulý: u stovky kusů
 * by z dílků stejně byl jen šrafovaný šedý proužek.
 */
.sz-progress__track--segmented .sz-progress__bar {
	--sz-seg: calc(100% / var(--sz-steps, 1));

	border-radius: 3px;
	-webkit-mask-image: repeating-linear-gradient(
		to right,
		#000 0 calc(var(--sz-seg) - 3px),
		transparent calc(var(--sz-seg) - 3px) var(--sz-seg)
	);
	mask-image: repeating-linear-gradient(
		to right,
		#000 0 calc(var(--sz-seg) - 3px),
		transparent calc(var(--sz-seg) - 3px) var(--sz-seg)
	);
}

.sz-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--sz-progress-fill, var(--sz-accent));
	border-radius: inherit;
	transition: width 0.3s ease-out;
}

/*
 * Meta je silnější linka přes dílky. Musí být nad maskou pruhu, proto
 * nesedí uvnitř výplně, ale vedle ní.
 */
.sz-progress__tick {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 3px;
	margin-left: -1px;
	background: var(--sz-progress-label, var(--sz-muted));
	opacity: 0.7;
}

.sz-progress__tick--reached {
	background: var(--sz-progress-fill, var(--sz-accent));
	opacity: 1;
}

/* Čísla met jsou orientační body, ne drobné písmo pod čarou. */
.sz-progress__tick-label {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--sz-fs-ticks, 1em);
	font-weight: 700;
	line-height: 1;
	color: var(--sz-progress-label, var(--sz-muted));
	white-space: nowrap;
}

.sz-progress__tick--reached .sz-progress__tick-label {
	color: var(--sz-progress-fill, var(--sz-accent));
}

/* Poslední meta by číslem přetekla z pruhu ven. */
.sz-progress__tick:last-of-type .sz-progress__tick-label {
	left: auto;
	right: 0;
	transform: none;
}

.sz-progress__label {
	font-size: var(--sz-fs-progress, 0.95em);
	color: var(--sz-progress-label, var(--sz-muted));
	margin: 22px 0 10px;
}

/*
 * Výzva k další účtence (R-114). Je to jediná věta, která má soutěžícího
 * pohnout, tak ať ji nepřehlédne: barva soutěže a tenký rám, ne šedý popisek.
 */
.sz-progress__call {
	margin: 0 0 36px;
	padding: 12px 16px;
	border: 2px solid var(--sz-call-border, var(--sz-call-text, var(--sz-accent)));
	border-radius: var(--sz-radius);
	background: var(--sz-call-bg, color-mix(in srgb, var(--sz-accent) 10%, transparent));
	color: var(--sz-call-text, var(--sz-accent));
	font-weight: 700;
	font-size: var(--sz-fs-call, 1.05em);
	text-align: center;
	animation: sz-call 2.4s ease-in-out 3;
}

/* Poděkování po odeslání adresy: víc řádek v jednom rámečku (R-161). */
.sz-progress__call--done {
	margin: var(--sz-gap) 0;
	text-align: center;
}

.sz-progress__call--done p {
	margin: 0 0 10px;
}

.sz-progress__call--done p:last-child {
	margin-bottom: 0;
}

@keyframes sz-call {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sz-accent) 18%, transparent); }
}

/* Kdo si vypnul animace, má je mít vypnuté. */
@media (prefers-reduced-motion: reduce) {
	.sz-progress__call {
		animation: none;
	}
}

/* ---- Mety pod ukazatelem (R-103) ---- */

/* Odstup od výzvy nad ním a od formuláře pod ním, ať to nesplývá (R-278). */
.sz-steps {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
}

/*
 * Meta: vlevo kolečko s prahem a vedle něj cena se stavem, vpravo tlačítko
 * a pod ním zbývající kusy (R-113, R-120, R-130).
 *
 * Mřížka se dvěma sloupci, ne flex: sloupce drží, i když do nich šablona webu
 * sáhne. Tlačítko tak zůstane vedle údajů a nespadne pod ně.
 */
.sz-form .sz-steps__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px;
	padding: 18px 0;
	margin: 0;
	border-bottom: 1px solid var(--sz-step-line, var(--sz-border));
	list-style: none;
}

.sz-form .sz-steps__item:last-child {
	border-bottom: 0;
}

.sz-form .sz-steps__head {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	grid-column: 1;
}

/* Kolečko s prahem. Dosažená meta je plná, ostatní jen obrys. */
.sz-steps__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--sz-step-ring, var(--sz-border));
	font-weight: 700;
	font-size: 1em;
	color: var(--sz-step-ring-text, var(--sz-step-state, var(--sz-muted)));
}

.sz-steps__item--reached .sz-steps__mark {
	border-color: var(--sz-step-mark, var(--sz-accent));
	background: var(--sz-step-mark, var(--sz-accent));
	color: var(--sz-step-mark-text, var(--sz-accent-contrast));
}

.sz-steps__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sz-steps__name {
	color: var(--sz-step-name, inherit);
	font-size: var(--sz-fs-step, 1em);
	font-weight: 700;
	line-height: 1.25;
}

.sz-steps__state {
	font-size: var(--sz-fs-state, 0.88em);
	color: var(--sz-step-state, var(--sz-muted));
	line-height: 1.3;
}

.sz-steps__item--reached .sz-steps__state {
	color: var(--sz-step-reached, var(--sz-accent));
	font-weight: 600;
}

/* Tlačítko a pod ním sklad: patří k sobě, je to nabídka a její dostupnost. */
.sz-form .sz-steps__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	grid-column: 2;
}

.sz-steps__stock {
	font-size: 0.85em;
	color: var(--sz-step-state, var(--sz-muted));
	white-space: nowrap;
}

/*
 * V náhledu pro obsluhu zbyde na pravé straně jen sklad (R-141), takže si
 * může vzít prostor i důraz po tlačítku, které tam bylo.
 */
.sz-preview-frame .sz-steps__stock {
	font-size: 1em;
	font-weight: 700;
	color: inherit;
}

/* Rozebraná cena se neškrtá, jen zešedne: pořád je to meta na cestě. */
.sz-steps__item--empty .sz-steps__name {
	opacity: 0.6;
}

@media (max-width: 560px) {
	.sz-form .sz-steps__item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.sz-form .sz-steps__side {
		align-items: stretch;
		grid-column: 1;
	}

	.sz-form .sz-steps__side .sz-btn {
		text-align: center;
	}

	.sz-steps__stock {
		text-align: right;
	}
}

/* ---- Přehled soutěžícího ---- */

/*
 * Přehled drží přesně šířku zadanou v nastavení (R-115).
 *
 * Dřív si přidával 60 px, aby se do řádku vešla cena i s tlačítkem. Jenže
 * pak byl formulář v přehledu širší než tentýž formulář na soutěžní stránce
 * a zadaná maximální šířka nesouhlasila s tím, co bylo na obrazovce.
 */
.sz-dashboard {
	width: var(--sz-max-width, 100%);
	max-width: 100%;
}

/*
 * Panel s formulářem nesmí přerůst přehled, ve kterém stojí. Barvu textu
 * a písmo bere tělo samo: formulář v portálu je může mít jiné (R-275).
 */
.sz-dashboard__panel .sz-form__body {
	max-width: 100%;
	color: var(--sz-text);
	font-family: var(--sz-font);
}

.sz-dashboard__greeting {
	margin: 0 0 4px;
	font-size: var(--sz-fs-greeting, 1.4em);
	text-align: center;
}

.sz-dashboard__count {
	margin: 0 0 10px;
	font-size: var(--sz-fs-count, 1.05em);
	font-weight: 600;
}

/*
 * Tlačítka na střed a pod sebou (R-105). „Chci vybrat výhru“ je nahoře,
 * je to to hlavní, co se v tu chvíli nabízí.
 */
.sz-dashboard__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: var(--sz-gap) 0;
}

.sz-dashboard__actions .sz-btn {
	text-align: center;
}

/*
 * Tlačítka v přehledu berou tytéž barvy a rozměry jako odesílací (R-256).
 * Jsou to odkazy, takže na barvu i podtržení po najetí si sahá šablona
 * webu (`a:hover`): stavy po najetí jsou proto i s `a` a podtržení
 * výslovně pryč. Základ bez `a`, jinak by přebil menší `.sz-btn--step`.
 */
.sz-btn {
	display: inline-block;
	background: var(--sz-btn-bg, var(--sz-accent));
	color: var(--sz-accent-contrast);
	text-decoration: none;
	padding: var(--sz-btn-padding, 12px 22px);
	border-radius: var(--sz-btn-radius, var(--sz-radius));
	font-size: var(--sz-fs-button, 1em);
	font-weight: var(--sz-fw-button, 600);
	border: 2px solid var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/*
 * Plné tlačítko se po najetí vyprázdní (R-196), ale výplň si nechá (R-206).
 * `:focus-visible`, ne `:focus`: odkaz drží focus i po návratu zpátky
 * na stránku a tlačítko by vypadalo, jako by na něm pořád byla myš.
 */
.sz-btn:hover,
.sz-btn:focus-visible,
a.sz-btn:hover,
a.sz-btn:focus-visible {
	background: var(--sz-btn-hover-bg, var(--sz-surface));
	color: var(--sz-btn-hover-text, var(--sz-btn-bg, var(--sz-accent)));
	border-color: var(--sz-btn-hover-border, var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent))));
	text-decoration: none;
}

/*
 * Tlačítka v přehledu vypadají všechna stejně a řídí se nastavením tlačítek
 * ve Vzhledu portálu (R-278). Obrysové provedení s vlastními barvami (R-274)
 * bylo jedno nastavení navíc, které se s tím pro tlačítka pletlo.
 */

.sz-btn--active {
	outline: 2px solid var(--sz-border-focus);
	outline-offset: 2px;
}

/* Menší provedení pro tlačítko u jedné mety. */
.sz-btn--step {
	padding: 9px 16px;
	font-size: calc(var(--sz-fs-button, 100%) * 0.92);
	white-space: nowrap;
	text-align: center;
}

/*
 * Meta, kterou má soutěžící za sebou: tlačítko je vidět, ale nic nedělá.
 * Slabší text a kurzor „nejde kliknout" to řeknou dřív, než na něj někdo
 * klikne; `filter` na barvu se u něj schválně nemění, aby nevypadalo živě.
 */
.sz-btn--done {
	background: var(--sz-surface);
	border-color: var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
	color: var(--sz-muted);
	font-weight: 400;
	opacity: 0.75;
	cursor: not-allowed;
}

.sz-btn--done:hover,
.sz-btn--done:focus,
.sz-btn--done:focus-visible {
	filter: none;
	background: var(--sz-surface);
	border-color: var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
	color: var(--sz-muted);
}

/*
 * Výhra k výběru (R-279): barvy tlačítka prohozené, ať je na první pohled
 * vidět, že tady se už vybírá. Po najetí vypadá jako ostatní tlačítka.
 * Stejně se ztiší „Přidat účtenku“, když je otevřená adresa (R-296):
 * plné zůstane jen „Nyní vybráno“ (`.sz-btn--chosen`, barvy tlačítka).
 */
.sz-btn--claim,
a.sz-btn--claim,
.sz-btn--quiet,
a.sz-btn--quiet {
	background: var(--sz-accent-contrast);
	color: var(--sz-btn-bg, var(--sz-accent));
	border-color: var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
}

a.sz-btn--claim:hover,
a.sz-btn--claim:focus-visible,
a.sz-btn--quiet:hover,
a.sz-btn--quiet:focus-visible {
	background: var(--sz-btn-bg, var(--sz-accent));
	color: var(--sz-accent-contrast);
	border-color: var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
}

.sz-dashboard__panel {
	border: 1px solid var(--sz-panel-border, var(--sz-border));
	border-radius: var(--sz-radius);
	background: var(--sz-panel-bg, transparent);
	padding: 18px;
	margin-bottom: var(--sz-gap);
}

/*
 * Nadpisy částí přehledu jsou jednotné (R-278): „Nahrát další účtenku“,
 * „Moje účtenky“, „Už jste vyhráli“, adresa i nový odkaz. Velké písmo,
 * tučně, velikost textu. Pod nadpisem panelu je víc místa, nad formulářem
 * se jinak tlačí.
 */
.sz-dashboard__panel h3,
.sz-dashboard__section h3 {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sz-progress-label, var(--sz-muted));
}

.sz-dashboard__panel h3 {
	margin: 0 0 24px;
}

/*
 * Barva nadpisů přehledu (R-263), jen když je nastavená. Pozdrav je `h2`
 * a nadpis panelu `h3`: bez nastavení mají barvu nadpisů ze šablony webu.
 * Záloha `inherit` by ji přebila, proto pravidlo platí jen tam, kde inline
 * styl proměnnou opravdu nese.
 */
.sz-dashboard[style*="--sz-heading:"] .sz-dashboard__greeting,
.sz-dashboard[style*="--sz-heading:"] .sz-dashboard__panel h3,
.sz-dashboard[style*="--sz-heading:"] .sz-dashboard__section h3 {
	color: var(--sz-heading);
}

.sz-dashboard__status {
	border-left: 3px solid var(--sz-success);
	padding-left: 14px;
	margin: var(--sz-gap) 0;
}

.sz-dashboard__status p {
	margin: 0;
}

.sz-dashboard__section {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 4px solid var(--sz-line, var(--sz-accent));
}

.sz-dashboard__section h3 {
	margin: 0 0 8px;
}

.sz-ladder {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sz-ladder li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--sz-step-line, var(--sz-border));
}

/* Datum se nesmí lámat na „13. 10.“ a „2026“ pod sebou. */
.sz-ladder__date {
	white-space: nowrap;
}

.sz-ladder li:last-child {
	border-bottom: 0;
}

.sz-ladder__item--reached .sz-ladder__name {
	font-weight: 600;
}

.sz-ladder__meta {
	color: var(--sz-muted);
	font-size: 0.9em;
	white-space: nowrap;
}

/* ---- Popisky ---- */

/*
 * Vizuálně skrytý popisek. Používá se v režimu placeholderu – čtečky obrazovky
 * ho potřebují a placeholder zmizí, jakmile uživatel začne psát.
 */
.sz-label--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sz-help-text {
	color: var(--sz-help, var(--sz-muted));
	font-size: var(--sz-fs-help, 0.85em);
	margin: 0;
}

.sz-input::placeholder {
	color: var(--sz-placeholder, var(--sz-muted));
	opacity: 1;
}

/* ---- Náhled pro administrátora ---- */

.sz-preview {
	background: #fff8e1;
	border: 1px dashed #c9a227;
	border-radius: var(--sz-radius);
	padding: 10px 14px;
	margin-bottom: var(--sz-gap);
	font-size: 0.9em;
}

.sz-preview__form {
	margin-top: 8px;
}

/* ---- Stav skladu na webu ---- */

.sz-stock {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.sz-stock-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sz-stock-list__item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sz-border);
}

.sz-stock-list__item:last-child {
	border-bottom: 0;
}

.sz-stock-list__item--out .sz-stock-list__name {
	text-decoration: line-through;
	opacity: 0.6;
}

.sz-stock-list__count {
	color: var(--sz-muted);
	white-space: nowrap;
}

/* ---- Obrázky cen ---- */

/*
 * ⚠️ Rozměr jen tam, kde obrázek kreslí plugin (R-195).
 *
 * Samostatný shortcode `[souteze_obrazek]` vrací holý `<img>` (R-163)
 * a velikost si mu určuje šablona. Dokud pravidlo platilo na třídu
 * bez ohledu na okolí, držel si v Oxygenu 42 px a nastavení bloku
 * se na něj nedostalo.
 */
/*
 * Samostatný obrázek se vejde do bloku, který mu dá šablona (R-254).
 * Bez toho si drží svůj rozměr a šířka bloku ve staviteli stránek
 * ho nezmenší, jen přeteče. `:where()` má nulovou váhu: rozměr dál
 * nevnucuje (R-195) a cokoli z šablony vyhraje.
 */
:where(img.sz-prize-image) {
	max-width: 100%;
	height: auto;
}

.sz-steps .sz-prize-image,
.sz-stock-list .sz-prize-image,
.sz-ladder .sz-prize-image {
	width: 42px;
	height: 42px;
	object-fit: contain;
	flex: 0 0 auto;
}

.sz-prize-image--large,
.sz-steps .sz-prize-image--large,
.sz-stock-list .sz-prize-image--large {
	width: 140px;
	height: 140px;
	margin-bottom: 8px;
}

.sz-ladder li,
.sz-stock-list__item {
	align-items: center;
}

.sz-ladder__name,
.sz-stock-list__name {
	flex: 1 1 auto;
}


/* Údaje převzaté z registrace se jen ukazují (R-77). */
.sz-input--locked {
	background: color-mix(in srgb, var(--sz-border) 25%, transparent);
	cursor: not-allowed;
}

.sz-field--locked .sz-label {
	opacity: 0.75;
}


/* Pole jiné adresy se ukazují až po zaškrtnutí (R-85). */
.sz-field[hidden] {
	display: none;
}

/* Přepínač soutěží pro správce (R-91). Soutěžící ho nikdy nevidí. */
.sz-admin-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 8px 12px;
	border: 1px dashed var(--sz-border);
	border-radius: var(--sz-radius);
	font-size: 0.8em;
}

.sz-admin-switch__label {
	color: var(--sz-muted);
	font-weight: 600;
}

.sz-admin-switch select {
	font: inherit;
	padding: 4px 6px;
}

/* ---- Štítek stavu účtenky v přehledu (R-107) ---- */

.sz-badge {
	display: inline-block;
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.sz-badge--pending      { background: #fff4d6; color: #7a5600; }
.sz-badge--approved     { background: #e2f5e7; color: #14622c; }
.sz-badge--not-accepted { background: #fbe3e1; color: #8c1d18; }

/* Kotva na formulář nesmí skončit pod lepivou hlavičkou webu (R-136). */
.sz-dashboard__panel {
	scroll-margin-top: 90px;
}

/* ---- Zarovnání textu uvnitř polí (R-173) ---- */

/*
 * Jedna třída na obalu, ne tři proměnné: `text-align` se dědí, takže se
 * tím propíše do popisku, do políčka i do textu souhlasu naráz.
 */
.sz-form--fields-center .sz-field,
.sz-form--fields-center .sz-field input,
.sz-form--fields-center .sz-field select,
.sz-form--fields-center .sz-field textarea {
	text-align: center;
}

.sz-form--fields-left .sz-field,
.sz-form--fields-left .sz-field input,
.sz-form--fields-left .sz-field select,
.sz-form--fields-left .sz-field textarea {
	text-align: left;
}

/* Zaškrtávátko se svým textem zůstává vedle sebe, ať je zarovnání jakékoli. */
.sz-form--fields-center .sz-field--checkbox .sz-label,
.sz-form--fields-left .sz-field--checkbox .sz-label {
	text-align: inherit;
}

/*
 * Nadpisy částí přehledu podle nastavení ve Vzhledu portálu (R-200, R-278).
 * Dřív se řídily zarovnáním textu v polích, to je ale věc formuláře.
 */
.sz-dashboard--headings-center .sz-dashboard__panel h3,
.sz-dashboard--headings-center .sz-dashboard__panel > .sz-help-text,
.sz-dashboard--headings-center .sz-dashboard__section h3 {
	text-align: center;
}

.sz-dashboard--headings-left .sz-dashboard__panel h3,
.sz-dashboard--headings-left .sz-dashboard__panel > .sz-help-text,
.sz-dashboard--headings-left .sz-dashboard__section h3 {
	text-align: left;
}

/* ---- Nahrání účtenky přetažením (R-201) ---- */

/*
 * Rámeček je čárkovaný a tlačítko mu sedí napůl přes spodní hranu, proto
 * má obal odspodu místo navíc: jinak by tlačítko leželo na dalším poli.
 */
.sz-dropzone {
	position: relative;
	padding-bottom: 26px;
}

/*
 * Vstup zůstává v HTML kvůli odesílání, povinnosti i čtečkám obrazovky,
 * jen ho není vidět. `display: none` by ho vyřadil z ověřování prohlížečem,
 * takže se schovává takhle.
 */
.sz-dropzone__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.sz-dropzone__area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 26px 18px 30px;
	border: 2px dashed var(--sz-dropzone-border, var(--sz-border));
	border-radius: var(--sz-radius);
	background: var(--sz-dropzone-bg, transparent);
	color: var(--sz-dropzone-text, inherit);
	font-size: var(--sz-fs-dropzone, 1em);
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sz-dropzone__icon {
	color: var(--sz-dropzone-icon, var(--sz-accent));
	line-height: 0;
}

.sz-dropzone__text {
	font-weight: 600;
}

.sz-dropzone__hint,
.sz-dropzone__or {
	font-size: 0.85em;
	color: var(--sz-dropzone-hint, var(--sz-help, var(--sz-muted)));
}

/* Název vybraného souboru. Dokud se nevybere, nezabírá místo. */
.sz-dropzone__file {
	font-size: 0.9em;
	color: var(--sz-dropzone-icon, var(--sz-accent));
	word-break: break-all;
}

.sz-dropzone__file:empty {
	display: none;
}

/* Tlačítko napůl přes spodní hranu rámečku. */
.sz-dropzone__button {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: inline-block;
	padding: var(--sz-btn-padding, 11px 22px);
	border: 2px solid var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent)));
	border-radius: var(--sz-btn-radius, var(--sz-radius));
	background: var(--sz-btn-bg, var(--sz-accent));
	color: var(--sz-accent-contrast);
	font-size: var(--sz-fs-button, 1em);
	font-weight: var(--sz-fw-button, 600);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/*
 * Tlačítko leží napůl přes čárkovaný rámeček, takže výplň potřebuje i ve
 * výchozím stavu: průhledné by ho prosvítalo (R-206).
 */
.sz-dropzone__button:hover,
.sz-dropzone__input:focus-visible + .sz-dropzone__area + .sz-dropzone__button {
	background: var(--sz-btn-hover-bg, var(--sz-surface));
	color: var(--sz-btn-hover-text, var(--sz-btn-bg, var(--sz-accent)));
	border-color: var(--sz-btn-hover-border, var(--sz-btn-border, var(--sz-btn-bg, var(--sz-accent))));
}

/* Soubor nad rámečkem: ať je vidět, že se pustit smí. */
.sz-dropzone--over .sz-dropzone__area {
	border-color: var(--sz-dropzone-icon, var(--sz-accent));
	background: rgba(0, 0, 0, 0.03);
}

/* Soubor je vybraný: rámeček to potvrdí plnou linkou. */
.sz-dropzone--filled .sz-dropzone__area {
	border-style: solid;
	border-color: var(--sz-dropzone-icon, var(--sz-accent));
}

/*
 * Past na roboty (R-245). Pole je mimo obrazovku, ne `display: none`:
 * to roboti poznají a pole přeskočí. Když se stylopis nenačte, člověk
 * aspoň uvidí popisek, že má pole nechat prázdné.
 */
.sz-form .sz-trap {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Captcha nad tlačítkem (R-247). Widget Turnstile má šířku `flexible`
 * a roztáhne se s formulářem; obal mu dává celou šířku řádku (R-135).
 */
.sz-form .sz-field--captcha {
	flex-basis: 100%;
}

.sz-form .sz-field--captcha:empty {
	display: none;
}

/*
 * Odznak reCAPTCHA schovaný (R-259). Jen tam, kde je vidět věta o Googlu:
 * bez ní by to Google nedovolil. `visibility`, ne `display`: se `display:
 * none` přestává reCAPTCHA v3 fungovat.
 */
body:has(.sz-captcha-terms) .grecaptcha-badge {
	visibility: hidden;
}

/*
 * Menší odznak (R-259, R-272). `zoom`, ne `transform`: odznak stojí z větší
 * části za pravým okrajem (`right: -186px`) a zmenšení k rohu ho zasunulo
 * za okraj skoro celý. `zoom` zmenší i ten posun, takže z odznaku kouká
 * stejný kus jako u velkého a po najetí se vysune až k okraji.
 */
body:has([data-sz-badge="compact"]) .grecaptcha-badge {
	--sz-badge-zoom: 0.75;
	zoom: var(--sz-badge-zoom);
}

/*
 * Zaoblení a odstup od spodní hrany (R-259). Proměnné nastaví `captcha.js`
 * na `<html>`, jen když jsou zadané. Google si oboje píše do inline stylu
 * odznaku (`border-radius: 2px; bottom: 14px`), proto `!important`.
 * Zaoblené jen levé rohy: pravou stranou odznak leží na okraji okna.
 * Odstup se dělí zmenšením, `zoom` by ho jinak zmenšil taky.
 */
html[style*="--sz-badge-radius"] .grecaptcha-badge {
	border-radius: var(--sz-badge-radius) 0 0 var(--sz-badge-radius) !important;
}

html[style*="--sz-badge-bottom"] .grecaptcha-badge {
	bottom: calc(var(--sz-badge-bottom) / var(--sz-badge-zoom, 1)) !important;
}

/* Černobílý odznak, barvy po najetí (R-272). Google píše `transition` inline. */
body:has([data-sz-badge-gray]) .grecaptcha-badge {
	filter: grayscale(1);
	transition: right 0.3s ease, filter 0.3s ease !important;
}

body:has([data-sz-badge-gray]) .grecaptcha-badge:hover {
	filter: none;
}

.sz-form .sz-captcha-terms {
	margin: 0;
	color: var(--sz-help, var(--sz-muted));
	font-size: var(--sz-fs-consent, 0.7em);
	line-height: 1.4;
}

.sz-form .sz-captcha-terms a {
	color: var(--sz-link, inherit);
}

/* ---- Okno s potvrzením (R-255) ---- */

/*
 * Bez JavaScriptu zavírá okno zaškrtávátko `.sz-popup__toggle`: křížek,
 * tlačítko i tmavé pozadí jsou jeho popisky. Skript okno přesune na konec
 * stránky, ať ho stavitel stránek neořízne `overflow` ani nepřekryje.
 *
 * Okno má vlastní vzhled, ne ze Vzhledu formulářů (R-256): formulář leží
 * na pozadí stránky, okno na svém. Nastavení soutěže nese obal inline,
 * tady jsou výchozí hodnoty a odvozené barvy pro prázdná pole.
 */
.sz-popup-root {
	--sz-popup-bg: #ffffff;
	--sz-popup-overlay: rgba(0, 0, 0, 0.6);
	--sz-popup-text: #1d1d1d;
	--sz-popup-accent: #1a7f37;
	--sz-popup-btn-text: #ffffff;
	--sz-popup-radius: 12px;
	--sz-popup-btn-radius: 6px;

	font-family: var(--sz-popup-font, inherit);
	font-size: var(--sz-popup-font-size);
}

/*
 * `fixed`, ne `absolute`: kliknutí na popisek zaškrtávátko zaměří a prohlížeč
 * by k němu stránku posunul. Okno se zavřelo a stránka skočila jinam (R-278).
 */
.sz-popup__toggle {
	position: fixed;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sz-popup__overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: var(--sz-popup-overlay);
	cursor: pointer;
	animation: sz-popup-fade 0.2s ease-out;
}

.sz-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999999;
	box-sizing: border-box;
	width: min(var(--sz-popup-w-desktop, 560px), calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 36px 32px 28px;
	transform: translate(-50%, -50%);
	background: var(--sz-popup-bg);
	color: var(--sz-popup-text);
	border-radius: var(--sz-popup-radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
	text-align: center;
	line-height: 1.5;
	animation: sz-popup-fade 0.2s ease-out;
}

.sz-popup:focus {
	outline: none;
}

.sz-popup__toggle:checked ~ .sz-popup,
.sz-popup__toggle:checked ~ .sz-popup__overlay {
	display: none;
}

/* Stránka pod otevřeným oknem se neposouvá. Bez `:has()` se prostě posouvá dál. */
html:has(.sz-popup__toggle:not(:checked)) {
	overflow: hidden;
}

.sz-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
	color: var(--sz-popup-close, var(--sz-popup-text));
	opacity: 0.6;
	cursor: pointer;
}

.sz-popup__close:hover,
.sz-popup__close:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--sz-popup-close, var(--sz-popup-text)) 10%, transparent);
}

.sz-popup__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	border-radius: 50%;
	color: var(--sz-popup-accent);
	background: color-mix(in srgb, var(--sz-popup-accent) 14%, transparent);
}

.sz-popup__icon svg {
	width: 36px;
	height: 36px;
}

img.sz-popup__icon--custom {
	object-fit: contain;
	background: none;
	border-radius: 0;
}

.sz-popup__image {
	display: block;
	max-width: 100%;
	max-height: 260px;
	width: auto;
	height: auto;
	margin: 0 auto 16px;
	object-fit: contain;
}

.sz-popup .sz-popup__title {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: var(--sz-popup-fs-title, 1.5em);
	font-weight: 700;
	line-height: 1.25;
	color: var(--sz-popup-title, var(--sz-popup-text));
	text-transform: none;
	letter-spacing: normal;
}

.sz-popup__text {
	margin: 0 0 18px;
	font-size: var(--sz-popup-fs-text, 1em);
}

.sz-popup__alert {
	margin: 0 0 22px;
	padding: 14px 16px;
	border-left: 4px solid var(--sz-popup-alert-border, var(--sz-popup-accent));
	border-radius: var(--sz-popup-btn-radius);
	background: var(--sz-popup-alert-bg, color-mix(in srgb, var(--sz-popup-accent) 10%, transparent));
	color: var(--sz-popup-alert-text, var(--sz-popup-text));
	font-size: var(--sz-popup-fs-alert, 1em);
	font-weight: 600;
	text-align: left;
}

.sz-popup__actions {
	margin-top: 4px;
}

/*
 * Tlačítko má třídu `.sz-btn` kvůli rozměrům, barvy a zaoblení ale bere
 * z okna. Proto o třídu přesnější pravidlo: přebije i najetí z přehledu.
 */
.sz-popup .sz-popup__button {
	min-width: 160px;
	border-color: var(--sz-popup-btn-bg, var(--sz-popup-accent));
	border-radius: var(--sz-popup-btn-radius);
	background: var(--sz-popup-btn-bg, var(--sz-popup-accent));
	color: var(--sz-popup-btn-text);
	font-size: var(--sz-popup-fs-button, 1em);
	cursor: pointer;
}

.sz-popup .sz-popup__button:hover,
.sz-popup .sz-popup__button:focus-visible {
	background: var(--sz-popup-btn-hover-bg, var(--sz-popup-bg));
	color: var(--sz-popup-btn-hover-text, var(--sz-popup-btn-bg, var(--sz-popup-accent)));
	border-color: var(--sz-popup-btn-bg, var(--sz-popup-accent));
}

@keyframes sz-popup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.sz-popup,
	.sz-popup__overlay {
		animation: none;
	}
}

@media (max-width: 1024px) {
	.sz-popup {
		width: min(var(--sz-popup-w-tablet, 520px), calc(100vw - 32px));
	}
}

@media (max-width: 767px) {
	.sz-popup {
		width: min(var(--sz-popup-w-mobile, 360px), calc(100vw - 24px));
		padding: 32px 20px 22px;
	}

	/* Přes celou obrazovku jen na mobilu, tablet a počítač ne. */
	.sz-popup-root--full-mobile .sz-popup {
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		transform: none;
		border-radius: 0;
	}
}

/* Náhled v administraci: v toku stránky, bez pozadí a bez zavírání. */
.sz-popup-root--preview .sz-popup {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	max-height: none;
	margin: 0;
	animation: none;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
}

.sz-popup-root--preview .sz-popup__close {
	cursor: default;
}