/*
 * Přihlašovací formulář.
 *
 * Barvy bere z tokenů child tématu, aby se změna palety v Customizeru
 * propsala i sem. Fallback je pro případ, že by plugin běžel s jiným tématem.
 */

.jb-form {
	--jb-form-accent: var(--jb-color-accent, #ea5198);
	--jb-form-accent-hover: var(--jb-color-accent-hover, #ff0080);

	/*
	 * Svislý rozestup mezi bloky formuláře. Drží ho na jednom místě proto,
	 * že stejnou mezeru potřebují dvě různé věci – mřížka polí a pruh
	 * s akcemi, který stojí mimo ni – a rozejít se nesmí.
	 */
	--jb-form-gap: 0.75rem;

	max-width: 40rem;
}

/*
 * Rozestupy drží mřížka, ne odsazení jednotlivých polí. Blocksy dává vlastní
 * margin formulářovým prvkům, takže ho tady nulujeme – jinak se sčítá s gapem
 * a formulář se zase roztáhne.
 */
.jb-form__form {
	display: grid;
	gap: var(--jb-form-gap) 1rem;
	grid-template-columns: 1fr;
}

.jb-form :is(input, select, textarea) {
	margin: 0;
}

/* Kontaktní údaje – stejný rámeček jako u slotů, ať formulář drží jeden tvar. */

.jb-form__contact {
	background: rgba(255,255,255,0.7);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 0.6em 0.8em 0.9em;
	margin: 0;
	min-width: 0;
}

.jb-form__contact legend {
	margin-inline-start: 0.5em;
	padding-inline: 0.3em;
	font-size: 0.85em;
	font-weight: 600;
}

/*
 * Kontakty tvoří jeden svislý sloupec vlevo, poznámka stojí vedle nich.
 * Čtenář jde shora dolů, takže povinná pole musí být v jednom toku;
 * poznámka je nepovinná a snese, že je stranou. Mezi sloupci je pořádná
 * mezera, aby se pravé pole nepletlo mezi levá.
 */
.jb-form__contact-grid {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 48rem) {
	.jb-form__contact-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 3rem;
	}
}

.jb-form__contact-fields {
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

/*
 * Popisek vedle pole, ne nad ním – ušetří to řádek na každé položce.
 * Na úzké obrazovce by ale na dvojici popisek + pole nebylo místo,
 * tam zůstává pod sebou.
 */
@media (min-width: 30rem) {
	.jb-form__contact-fields .jb-form__field,
	.jb-form__note {
		grid-template-columns: 8em 1fr;
		gap: 0 0.75rem;
	}

	.jb-form__contact-fields .jb-form__field {
		align-items: center;
	}
}

/*
 * Poznámka vyplní výšku vedlejšího sloupce, aby formulář neprodlužovala,
 * ale nikdy nesmí být nižší než dva řádky – jednořádkové pole vypadá jako
 * kolonka na jedno slovo a lidi do něj nic nenapíšou.
 *
 * Selektor je kvůli pořadí pravidel delší: obecná výška textových polí se
 * v souboru nastavuje až pod tímhle blokem a při shodné síle by vyhrála.
 */
.jb-form__contact-grid .jb-form__note textarea {
	height: 100%;
	min-height: 5rem;
}

.jb-form__field {
	display: grid;
	gap: 0.25em;
	margin: 0;
	min-width: 0;
}

.jb-form__field--wide {
	grid-column: 1 / -1;
}

.jb-form__field label,
.jb-form__terms legend {
	font-size: 0.9em;
	font-weight: 600;
}

.jb-form__field input,
.jb-form__field select,
.jb-form__field textarea {
	width: 100%;
	padding: 0.45em 0.6em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	font: inherit;
}

/*
 * Poznámku většina lidí nevyplní, takže nemá zabírat půl obrazovky.
 * Blocksy dává textovým polím vlastní minimální výšku, tu je potřeba přebít –
 * atribut rows sám o sobě by se neprosadil. Kdo píše víc, roztáhne si ji.
 */
.jb-form__field textarea {
	resize: vertical;
	min-height: 0;
	height: 3rem;
}

/*
 * Nápověda v poli musí být zřetelně světlejší než vyplněná hodnota, jinak
 * formulář vypadá jako už vyplněný. Barvu bereme z textu a jen ji zesvětlíme,
 * ať to sedí na světlý i tmavý podklad.
 *
 * Selektor je zdvojený schválně: Blocksy barví nápovědu přes zápis typu
 * „input[type=text]::placeholder“, který má vyšší sílu než prostá třída,
 * a u textarey se to neprojevilo jen proto, že na ni takové pravidlo nemá.
 */
.jb-form .jb-form__field input::placeholder,
.jb-form .jb-form__field textarea::placeholder {
	color: currentColor;
	opacity: 0.4;
}

.jb-form__field input:focus-visible,
.jb-form__field select:focus-visible,
.jb-form__field textarea:focus-visible {
	outline: 2px solid var(--jb-form-accent);
	outline-offset: 1px;
}

.jb-form__hint,
.jb-form__optional,
.jb-form__privacy,
.jb-form__full {
	font-size: 0.8em;
	opacity: 0.75;
}

/*
 * Na úzkých obrazovkách musí mít vstupy aspoň 16px, jinak si na iPhonu
 * stránka při klepnutí do pole sama přiblíží a zbytek formuláře uteče
 * mimo obrazovku. Tlačítko jde přes celou šířku, aby se do něj dalo trefit.
 */
@media (max-width: 30rem) {
	.jb-form :is(input, select, textarea) {
		font-size: 16px;
	}

	.jb-form__actions button,
	.jb-portal__cancel {
		width: 100%;
	}

	.jb-portal__item form {
		flex: 1 1 100%;
		margin-inline-start: 0;
	}
}

/*
 * Osobní přehled přihlášek.
 *
 * Vlastní šířka, ne zděděná z formuláře: výpis se čte a snese užší sloupec,
 * kdežto formulář pod ním potřebuje místo na tři sloupce termínů vedle sebe.
 */
.jb-portal {
	--jb-form-accent: var(--jb-color-accent, #ea5198);
	--jb-form-accent-hover: var(--jb-color-accent-hover, #ff0080);

	max-width: 48rem;
}

/* Přihlašovací formulář v přehledu jede přes celou šířku obsahu. */
.jb-portal__add .jb-form {
	max-width: none;
}

.jb-portal__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.8em;
	margin-block-end: 1rem;
}

.jb-portal__contact,
.jb-portal__credit {
	font-size: 0.85em;
	opacity: 0.75;
}

/*
 * Nedoplatek není údaj na okraji jako zbývající kredit – je to věc, kterou
 * má člověk vyřídit, takže nesmí splývat s okolím.
 */
.jb-portal__credit--owed {
	opacity: 1;
	font-weight: 600;
	color: #b32d2e;
}

/*
 * Termín po lhůtě zůstává ve výpisu kvůli přehledu, ale nemá poutat –
 * jinak se hledá tlačítko tam, kde žádné není.
 */
.jb-portal__item--closed {
	background: #fafafa;
	opacity: 0.65;
}

/* Přepínač týdenních e-mailů pod výpisem */
.jb-portal__mailing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.8em;
	margin-block-start: 1rem;
	font-size: 0.85em;
	opacity: 0.85;
}

.jb-portal__mailing-toggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--jb-form-accent);
	text-decoration: underline;
	cursor: pointer;
}

/*
 * Blocksy barví tlačítkům pozadí i na najetí. Bez vlastního pozadí by se
 * z odkazu stal růžový obdélník s růžovým textem, tedy prázdné místo.
 */
.jb-portal__mailing-toggle:hover,
.jb-portal__mailing-toggle:focus-visible {
	background: none;
	box-shadow: none;
	color: var(--jb-form-accent-hover);
}

/*
 * Potvrzení vypnutí upomínek po příchodu z odkazu v e-mailu. Na rozdíl od
 * přepínače dole je to celý smysl návštěvy, tak ať je vidět nad výpisem.
 */
.jb-portal__mailing-confirm {
	margin-block-end: 1.2rem;
	padding: 0.9em 1.1em;
	border: 1px solid var(--jb-form-accent);
	border-radius: 8px;
	background: rgba(234, 81, 152, 0.06);
	background: color-mix(in srgb, var(--jb-form-accent) 7%, transparent);
}

.jb-portal__mailing-confirm p {
	margin-block: 0 0.7em;
}

.jb-portal__add {
	margin-block-start: 2.5rem;
}

.jb-portal__add h3 {
	margin-block-end: 0.8rem;
}

.jb-portal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.jb-portal__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em 0.8em;
	margin: 0;
	padding: 0.7em 0.9em;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
}

.jb-portal__item form {
	margin: 0;
	margin-inline-start: auto;
}

.jb-portal__when {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.jb-portal__topic {
	opacity: 0.75;
}

/* Odhlášení je nevratný krok, tak ať se netváří jako hlavní akce stránky. */
.jb-portal__cancel {
	padding: 0.3em 0.9em;
	background: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	font: inherit;
	font-size: 0.85em;
	color: var(--jb-form-accent);
	cursor: pointer;
}

.jb-portal__cancel:hover,
.jb-portal__cancel:focus-visible {
	background-color: #ef82ae;
	background-color: color-mix(in srgb, var(--jb-form-accent) 70%, #fff);
	border-color: transparent;
	color: #fff;
}

.jb-portal__closed {
	margin-inline-start: auto;
	font-size: 0.8em;
	opacity: 0.7;
}

/* Výběr termínů */

/*
 * Sloty vedle sebe, dokud se vejdou. Tři pravidelné časy v týdnu dají tři
 * sloupce na desktopu a tři skupiny pod sebou na mobilu, aniž by se pro to
 * musel psát zlom.
 */
.jb-form__slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--jb-form-gap);
}

/*
 * Obsah slotu začíná nahoře. Dřív visel u dolní hrany, protože sloty začínají
 * v různých dnech a při zarovnání odshora se stejné týdny rozešly po řádcích;
 * odspodu si aspoň konec cyklu zůstal naproti sobě. Řádky teď drží společná
 * osa týdnů – vynechaný týden má prázdné místo – takže srovnávat odspodu už
 * by naopak škodilo: slot, který skončí dřív, by si všechny řádky posunul.
 */
.jb-form__slot {
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.7);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 0.6em 0.8em 0.7em;
	margin: 0;
	min-width: 0;
}

/*
 * Jednorázové akce nejsou slot v týdnu, ale pruh pod nimi – a stojí mimo
 * mřížku, ne v ní přes celou šířku. Položka přes všechny sloupce by totiž
 * držela při životě i stopy, které nikdo jiný nezabírá (auto-fit sesype jen
 * ty prázdné), a sloty vedle ní by se scvrkly na zlomek šířky.
 *
 * Pravidlo musí stát až za .jb-form__slot: to má margin: 0 a při shodné síle
 * by odstup přebilo.
 */
.jb-form__slot--other {
	margin-block-start: var(--jb-form-gap);
}

/* V pruhu je místo, tak akce stojí vedle sebe jako karty. */
.jb-form__slot--other .jb-form__term-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.jb-form__slot--other .jb-form__term-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.6em;
	flex: 1 1 18rem;
	/*
	 * Nejvýš dvě akce vedle sebe. Na třetinu šířky se název akce, cena
	 * i odkaz lámaly do dvou řádků a řádek přestal být čitelný jako celek.
	 * Osmnáct em je spodní hranice pro úzké okno – tam zbyde jedna na řádek.
	 * Odečítá se půlka mezery mezi sloupci (1.5rem), jinak by se dvě vedle
	 * sebe nevešly a zbyla by jedna.
	 */
	flex-basis: max(18rem, 50% - 0.75rem);
}

/*
 * Legenda se umisťuje k okraji rámečku a odsazení obsahu ji míjí, takže si
 * ho musí dorovnat sama – jinak začíná o kousek vlevo než sloupec zaškrtávátek.
 * Vnitřní padding kryje čáru rámečku, odsazení fieldsetu je 0.8em.
 */
.jb-form__slot legend {
	margin-inline-start: 0.5em;
	padding-inline: 0.3em;
	font-size: 0.85em;
}

.jb-form__slot-day {
	font-weight: 600;
}

.jb-form__slot-time {
	opacity: 0.75;
}

/*
 * Spodní řada slotu: zobrazit všechny, vybrat všechny, odkaz na cyklus.
 * Dole proto, že nad seznamem by odkaz stál mezi záhlavím a prvním datem
 * a rozrazil dvojici, která patří k sobě. Leží mimo <label>, takže klepnutí
 * na něj nezaškrtne termín, což by u odkazu uvnitř popisku hrozilo.
 *
 * Zarovnává se na střed, ne na účaří: „Zobrazit všechny termíny“ je orámované
 * tlačítko a <button> jako položka flexboxu své účaří nenabízí – prohlížeč si
 * ho odvodí z rámečku, ne z textu uvnitř, a holý odkaz vedle se pak vysune
 * nahoru. Proti středu tlačítka sedí text spolehlivě.
 */
/*
 * Spodní řada drží u dolní hrany. Sloupce jsou v mřížce stejně vysoké, takže
 * tlačítka stojí ve všech naproti sobě i tehdy, když jeden slot skončí dřív
 * a na konci mu zbydou prázdné týdny.
 */
.jb-form__slot-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.9em;
	margin-block-start: auto;
	padding-block-start: 0.6em;
}

/* Když skript nic neodkryl a cyklus tu není, nemá řada zabírat místo. */
.jb-form__slot-actions:not(:has(> *:not([hidden]))) {
	display: none;
}

/* Tlačítka jsou vyšší než odkaz vedle nich, tak ať stojí na společné ose. */
.jb-form__slot-actions > * {
	align-self: center;
}

.jb-form__cycle-link {
	font-size: 0.8em;
	color: var(--jb-form-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jb-form__cycle-link:hover,
.jb-form__cycle-link:focus-visible {
	color: var(--jb-form-accent-hover);
}

/* Text jen pro odečítač obrazovky – z rozvržení zmizí, ale přečte se. */
.jb-form__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Mřížkou je celý seznam, ne jednotlivý řádek – jen tak si všechny řádky
 * sdílejí sloupce a šířku data určí to nejširší z nich („28. 10.“). Pevná
 * míra by musela mít rezervu na nejdelší případ a ta rezerva by u kratších
 * dat zela jako mezera navíc.
 *
 * Položka i popisek proto mizí z rozvržení přes display: contents; popisek
 * zůstává popiskem, klikání na text dál zaškrtává políčko.
 */
.jb-form__term-list {
	display: grid;
	grid-template-columns: auto max-content 1fr;
	align-items: baseline;
	gap: 0.3em 0.4em;
	/*
	 * Řádkování z tématu je stavěné na odstavce. Tady jsou to krátké popisky,
	 * které se na mobilu lámou na dva řádky – a s odstavcovým prokladem mezi
	 * nimi vzniká díra větší než mezi termíny samotnými.
	 */
	line-height: 1.3;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jb-form__term-list li,
.jb-form__term-list label {
	display: contents;
}

/*
 * Aby šel řádek podbarvit, musí mít vlastní box – a ten se přes subgrid
 * napojí na sloupce seznamu, takže zarovnání zůstane. Bez podpory subgridu
 * zůstane řádek bez boxu a jen se nepodbarví; vybírat termíny jde dál.
 *
 * Záporný vnější okraj se vyruší s vnitřním: sloupce sedí na stejném místě
 * jako předtím, jen podbarvení přesahuje o kousek za text.
 */
@supports (grid-template-columns: subgrid) {
	.jb-form__term-list li {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		align-items: baseline;
		margin-inline: -0.4em;
		padding: 0.0em 0.4em;
		border-radius: 4px;
		transition: background-color 0.12s ease;
	}

	/* Prázdné místo se nepodbarvuje – není to řádek, na který jde kliknout. */
	.jb-form__term-list li:not(.jb-form__term-gap):hover,
	.jb-form__term-list li:has(input:checked) {
		background-color: rgba(0, 0, 0, 0.04);
		background-color: color-mix(in srgb, var(--jb-form-accent) 8%, transparent);
	}

	/* Na vybraném řádku musí být najetí pořád znát, tak je o něco silnější. */
	.jb-form__term-list li:has(input:checked):hover {
		background-color: rgba(0, 0, 0, 0.07);
		background-color: color-mix(in srgb, var(--jb-form-accent) 15%, transparent);
	}
}

/* Zaškrtnutý termín pozná oko podle data dřív než podle políčka. */
.jb-form__term-list li:has(input:checked) .jb-form__date {
	color: var(--jb-form-accent);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.jb-form__term-list li {
		transition: none;
	}
}

/*
 * Skrytý řádek musí ustoupit i proti display: grid ze subgridu – atribut hidden
 * má jen sílu výchozích stylů prohlížeče a ta by prohrála.
 */
.jb-form__term-list li[hidden] {
	display: none;
}

/*
 * Týden, ve kterém se v tomhle slotu necvičí – drží řádek, aby další týden
 * začal ve všech sloupcích naproti sobě.
 *
 * Vypadá jako běžný řádek, jen ustoupený a s proškrtnutým datem. Ztlumení
 * sedí na dětech, ne na položce: ta je display: contents, tedy bez boxu,
 * na který by opacity šlo použít.
 */
.jb-form__term-gap .jb-form__date,
.jb-form__term-gap input {
	opacity: 0.4;
}

.jb-form__term-gap .jb-form__date {
	text-decoration: line-through;
}

/*
 * Na zástupném řádku není co zaškrtnout, takže ani ruka na kurzoru nemá co
 * slibovat. Selektor je silnější schválně: kurzor ruky sedí na .jb-form__date
 * a na <label> od tématu, a obojí se musí přebít.
 */
.jb-form__term-gap :is(label, input, span) {
	cursor: default;
}

/*
 * Náhled dalšího termínu – poslední viditelný řádek se ztrácí do ztracena,
 * aby bylo vidět, že seznam ještě pokračuje. Maska je jen ozdoba, klikat
 * se na řádek nedá a jeho zaškrtávátko je vypnuté.
 */
.jb-form__term-list li.jb-form__peek {
	-webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 95%);
	mask-image: linear-gradient(to bottom, #000 10%, transparent 95%);
	pointer-events: none;
}

/*
 * Obě tlačítka ve spodní řadě vypadají stejně: drobný obrys, ne podtržený
 * text. Dělají něco tady na místě, kdežto odkaz vedle nich vede pryč na
 * stránku cyklu – a to má být poznat dřív, než to člověk přečte.
 *
 * Obrys bere barvu z textu, takže na najetí stačí měnit color.
 */
.jb-form__select-all,
.jb-form__show-all {
	padding: 0.25em 0.7em;
	background: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	font: inherit;
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.5;
	color: var(--jb-form-accent);
	text-decoration: none;
	cursor: pointer;
}

/*
 * Při najetí se tlačítko vybarví světlejší růžovou. Obrys dostane barvu
 * pozadí místo zrušení, aby se rozměr tlačítka nezměnil a nic okolo neposkočilo.
 */
.jb-form__select-all:hover,
.jb-form__select-all:focus-visible,
.jb-form__show-all:hover,
.jb-form__show-all:focus-visible {
	background-color: #ef82ae;
	background-color: color-mix(in srgb, var(--jb-form-accent) 70%, #fff);
	border-color: transparent;
	color: #fff;
}

/* Celý řádek je klikací plocha – na mobilu se do zaškrtávátka špatně trefuje. */
.jb-form__term-list input,
.jb-form__date,
.jb-form__meta {
	font-weight: 400;
	cursor: pointer;
}

.jb-form__term-list input {
	width: auto;
	accent-color: var(--jb-form-accent);
	position: relative;
   top: 2px;
}

/*
 * Datum drží pohromadě a stojí na střed svého sloupce. Sloupec je široký jako
 * nejdelší datum v seznamu („28. 10.“), takže kratší data v něm zbývá rozmístit
 * – a na střed se rozdíl rozloží na obě strany místo jedné díry uprostřed
 * nebo useknutého levého okraje:
 *
 *      16. 9.
 *      7. 10.
 *     14. 10.
 */
.jb-form__date {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: center;
}


/*
 * Název cyklu zaskakuje za téma tam, kde lekce žádné nemá – bez něj by
 * v řádku zbylo holé datum. Je to zástupný údaj, u všech lekcí v cyklu
 * stejný, takže ustupuje do pozadí; téma nese plnou barvu textu, protože
 * to je to, čím se řádky liší.
 */
.jb-form__topic {
	opacity: 0.9;
}

/* Cena u jednorázové akce – u lekce z cyklu žádná není. */
.jb-form__price {
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0.75;
}

/* Odkaz na stránku akce. Stejně tichý jako odkaz na cyklus ve spodní řadě. */
.jb-form__event-link {
	font-size: 0.8em;
	color: var(--jb-form-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.jb-form__event-link:hover,
.jb-form__event-link:focus-visible {
	color: var(--jb-form-accent-hover);
}

.jb-form__full {
	display: inline-block;
	margin-inline-start: 0.35em;
	white-space: nowrap;
}

.jb-form__term {
	font-weight: 600;
	grid-column: 1 / -1;
	margin: 0;
}

/* Tlačítko a hlášky */

/*
 * Vysvětlení nad tlačítkem, obojí na střed. Vedle sebe se to na užších
 * obrazovkách stejně zalamovalo a tlačítko pak plavalo mimo osu formuláře.
 */
.jb-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.7em;
	margin-block-start: 0.5rem;
}

.jb-form__actions button {
	background: var(--jb-form-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.7em 1.5em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jb-form__actions button:hover,
.jb-form__actions button:focus-visible {
	background: var(--jb-form-accent-hover);
}

.jb-form__privacy {
	margin: 0;
}

.jb-form__message {
	padding: 0.7em 0.9em;
	border-radius: 6px;
	margin-block-end: 1rem;
	border-inline-start: 4px solid;
}

.jb-form__message--ok {
	border-color: var(--jb-form-accent);
	background: rgba(234, 81, 152, 0.08);
}

.jb-form__message--error {
	border-color: #b32d2e;
	background: rgba(179, 45, 46, 0.08);
}

/*
 * Poděkování stojí na místě odeslaného formuláře, takže se chová jako
 * samostatný panel: užší než obsah, na střed a s pořádným vnitřním prostorem.
 */
.jb-form__message--panel {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 2.5rem 2rem;
	text-align: center;
	font-size: 1.05em;
	border: 1px solid var(--jb-form-accent);
	border-radius: 10px;
	background: rgba(234, 81, 152, 0.06);
	background: color-mix(in srgb, var(--jb-form-accent) 7%, transparent);
}

/*
 * Past na roboty. Schválně bez display:none – část robotů skrytá pole
 * přeskakuje, tohle je odsune mimo obrazovku, ale ve formuláři zůstanou.
 */
.jb-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}