/**
 * Doplňky k převzatému designu (design.css).
 *
 * Sám vzhled sem nepatří – ten je v design.css vygenerovaném z Elementoru.
 * Tady jsou jen věci, které v návrhu nejsou: hlášky, skryté pole proti robotům,
 * klikatelná plocha varianty a stav načítání.
 */

.spt-design,
.spt-question-root,
.spt-question-form,
.spt-solution-wrap {
	width: 100%;
}

/* Blok s řešením je záměrně sourozencem otázky, ne jejím potomkem:
   Elementor používá na obou stránkách stejná ID widgetů s jiným vzhledem
   (např. sloupec 2d19c5d je u otázky úzký proužek s ikonou, u řešení
   textový sloupec), takže vnořením by se pravidla přebíjela. */

/* ---------- Hlášky ---------- */

.spt-message {
	padding: 14px 18px;
	margin-bottom: 16px;
	border: 1px solid rgba( 128, 128, 128, .35 );
	border-radius: 8px;
	line-height: 1.5;
}

.spt-message--error {
	border-color: #ff2a64;
	background: rgba( 255, 42, 100, .08 );
	color: #ff2a64;
}

.spt-message--success {
	border-color: #1a7f37;
	background: rgba( 26, 127, 55, .08 );
	color: #1a7f37;
}

.spt-message--info {
	background: rgba( 87, 73, 248, .08 );
	border-color: rgba( 87, 73, 248, .3 );
}

/* ---------- Ochrana proti robotům ---------- */

.spt-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Varianta odpovědi ---------- */

.spt-option {
	position: relative;
	cursor: pointer;
}

/* Průhledné tlačítko přes celou variantu. Kliknutí kamkoli vybere odpověď
   a bez JavaScriptu rovnou odešle formulář (tlačítko nese hodnotu odpovědi).

   Vzhled je tu vynucený přes !important schválně: jde o neviditelnou klikací
   plochu, která nesmí nic překreslit. Motiv webu i Elementor dávají <button>
   vlastní pozadí, rámeček i rozměry a normální specificitou se přebít nedají –
   projevilo se to černými obdélníky přes varianty odpovědí. */
.spt-design .spt-option > .spt-option__hit {
	position: absolute !important;
	inset: 0 !important;
	z-index: 5;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
	transition: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	opacity: 1 !important;
	overflow: hidden;
}

/* Některé motivy kreslí pozadí až v pseudoelementech tlačítka. */
.spt-design .spt-option > .spt-option__hit::before,
.spt-design .spt-option > .spt-option__hit::after {
	content: none !important;
	display: none !important;
}

.spt-design .spt-option > .spt-option__hit:hover,
.spt-design .spt-option > .spt-option__hit:focus,
.spt-design .spt-option > .spt-option__hit:active {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

.spt-design .spt-option > .spt-option__hit:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #ff2a64 ) !important;
	outline-offset: 4px;
}

/* ---------- Chyby u polí ---------- */

.spt-field__error {
	display: block;
	margin-top: 6px;
	font-size: .85em;
	color: #ff2a64;
}

.spt-field--error input,
.spt-field--error textarea {
	border-color: #ff2a64 !important;
}

/* ---------- Stav odesílání ---------- */

.spt-is-loading {
	opacity: .6;
	pointer-events: none;
}

/* ---------- Doplňkové prvky ---------- */

.spt-progress {
	margin-bottom: 16px;
}

.spt-progress__bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: rgba( 128, 128, 128, .25 );
	overflow: hidden;
}

.spt-progress__fill {
	display: block;
	height: 100%;
	background: var( --e-global-color-accent, #5749f8 );
	transition: width .3s ease;
}

.spt-summary {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.spt-summary li {
	padding: 4px 0;
}