/*
 * Filtr „Typ služby" — barevné oblasti a hledání.
 *
 * Značky data-wn-oblast doplňuje wn-filtr.js podle slugu termu; CSS se tedy
 * neváže na pořadí ve stromu a přežije přidání nebo přehození oblastí.
 *
 * Markup po úpravě skriptem:
 *   .jet-list-tree.wn-strom
 *     .wn-ob[data-wn-oblast]                            ← obal skupiny (náš)
 *       .jet-checkboxes-list__row.jet-list-tree__parent ← oblast
 *         .jet-collapse-icon                            ← +/−, odsunuté doprava
 *         label.jet-checkboxes-list__item
 *       .jet-list-tree__children                        ← její typy
 *
 * O `!important`: Elementor generuje pro widget selektory tvaru
 *   .elementor-XXXX .elementor-element.elementor-element-YYY .neco
 * což jsou tři třídy. Cokoli odsud má nejvýš tři a o vítězi by rozhodovalo
 * pořadí načtení. Tam, kde Elementor tutéž vlastnost opravdu generuje
 * (rozměry a okraje ikony, odsazení potomků), je to proto rozhodnuté
 * natvrdo. Jinde se `!important` vyhýbám.
 */

.wn-strom { --wn-b: #EFC44F; }

.wn-strom [data-wn-oblast="pohyb-a-trenink"]               { --wn-b: #EFC44F; }
.wn-strom [data-wn-oblast="fyzioterapie"]                  { --wn-b: #4FA39C; }
.wn-strom [data-wn-oblast="vyziva-a-nutricni-poradenstvi"] { --wn-b: #78A552; }
.wn-strom [data-wn-oblast="masaze"]                        { --wn-b: #DE8A62; }
.wn-strom [data-wn-oblast="dalsi-sluzby"]                  { --wn-b: #8A80C0; }

/* --- skupina ---------------------------------------------------------
 * Barevná linka vede podél celé oblasti — hlavičky i typů pod ní. Proto
 * visí na obalu, ne na kontejneru potomků: ten začíná až pod hlavičkou
 * a linka by u ní chyběla.
 */
.wn-strom .wn-ob {
	border-left: 3px solid var(--wn-b);
	padding-left: 13px;
	margin-bottom: 13px;
}

.wn-strom .wn-ob:last-child { margin-bottom: 0; }

/* --- hlavička oblasti ------------------------------------------------
 * Oblast se nezaškrtává, jen rozbaluje. Všech pět oblastí má nulu přímo
 * přiřazených expertů (sedí jen na listech), takže zaškrtnutí by
 * vyfiltrovalo prázdno. Zaškrtávátko tedy pryč a klik na název rozbaluje
 * — obsluhu má na starost wn-filtr.js.
 */
.wn-strom .jet-list-tree__parent .jet-checkboxes-list__input,
.wn-strom .jet-list-tree__parent .jet-checkboxes-list__decorator {
	display: none !important;
}

.wn-strom .jet-list-tree__parent { user-select: none; }
.wn-strom .jet-list-tree__parent .jet-checkboxes-list__item { cursor: pointer; }

/* Tečka je součástí popisku, ne řádku. Absolutně umístěná tečka se
   srážela s rozbalovacím +/−, který si JSF umisťuje samo. */
.wn-strom .jet-list-tree__parent .jet-checkboxes-list__label::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wn-b);
	margin-right: 9px;
	vertical-align: 1px;
}

.wn-strom .jet-list-tree__parent .jet-checkboxes-list__label {
	font-weight: 700 !important;
}

/* Oblast nemá smysluplný počet: JSF indexuje jen přímá přiřazení
   (`get_taxanomies_parent_term_posts()` hledá term_taxonomy.term_id = X),
   a experti jsou přiřazení jen k listům — vyšla by vždycky nula. Součet
   potomků by zase přepočítal experta tolikrát, kolik má v oblasti typů:
   u „Pohyb a trénink" 1309 místo 241. */
.wn-strom .jet-list-tree__parent .jet-filters-counter { display: none; }

/* --- rozbalovací +/− -------------------------------------------------
 * Z levého 20px sloupce se stěhuje na konec řádku jako pouhá značka;
 * klikat se má na název. `order` funguje, protože řádek je flex
 * (`.jet-smart-filters-checkboxes … .jet-list-tree .jet-checkboxes-list__row
 * { display: flex }` z public.css pluginu).
 */
.wn-strom .jet-collapse-icon {
	order: 2;
	align-self: center;
	width: 15px !important;
	height: 15px !important;
	margin: 0 0 0 8px !important;
	opacity: .45;
}

/* Prázdná rozpěrka u listů držela místo po ikoně, kterou nemají. Ikona
   už na začátku řádku není, takže je zbytečná. */
.wn-strom .jet-collapse-none { display: none !important; }

/* --- typy pod oblastí ------------------------------------------------
 * Odsazení řídí tenhle jediný řádek. Elementor sem generuje
 *   .elementor-XXXX .elementor-element-YYY .jet-list-tree__children
 *   { margin-left: calc(5px/2); margin-right: calc(5px/2); padding-left: 10px }
 * ze svých ovladačů (`sub_items_offset_left` a mezera mezi položkami).
 */
.wn-strom .wn-ob .jet-list-tree__children {
	padding-left: 19px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-left: 0;
}

/* --- rozvržení řádku -------------------------------------------------
 * Proužky podílu se neukazují. V postranním sloupci se dlouhé české názvy
 * („Diagnostika pohybového aparátu") spolu s proužkem a číslem na jeden
 * řádek nevejdou a lámaly se. Číslo nese tutéž informaci a zabere míň.
 */
.wn-strom .wn-bar { display: none; }

/* Rozvržení řádku platí pro všechny typy filtrů — odznak se musí odsadit
   doprava i u Pro koho, Pohlaví nebo Ověřeno, ne jen u stromu služeb.
 *
 * Zarovnat samotný __button nestačilo: input je jeho SOUROZENEC uvnitř
 * elementu label, a když label není flex, řídí je řádkové rozvržení
 * a zaškrtávátko plave nad textem. Flexem musí být obojí.
 */
.jet-checkboxes-list__item,
.jet-radio-list__item,
.jet-color-image-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.jet-checkboxes-list__item > input,
.jet-radio-list__item > input,
.jet-color-image-list__item > input {
	flex: none;
	margin: 0;
}

.jet-checkboxes-list__button,
.jet-radio-list__button,
.jet-color-image-list__button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.jet-checkboxes-list__label,
.jet-radio-list__label,
.jet-color-image-list__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* Počet jako odznak. Základní podoba je neutrální a platí pro všechny
   filtry; ve stromu služeb se navíc obarví podle oblasti. */
.jet-filters-counter {
	/* Vystředění dělá flex, ne line-height. Výška odvozená z řádkování
	   závisí na metrikách písma a číslice pak sedí mimo osu. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	width: 34px;
	/* JSF má `.jet-filters-counter{padding:0 0 0 5px}` — jednostranný levý
	   padding uvnitř odznaku tlačil číslo z osy. Nulujeme ho a šířku drží
	   pevná `width`. */
	padding: 0;
	box-sizing: border-box;

	font-variant-numeric: tabular-nums;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	border-radius: 20px;

	flex: none;
	margin-left: auto;

	/* Náhradní varianta pro prohlížeče bez color-mix. */
	background: #F1F2F4;
	color: #5D5F65;
}

/* Vnitřní span s hodnotou nesmí přinést vlastní řádkování. */
.jet-filters-counter .value {
	line-height: 1;
	display: block;
}

/* Barevná varianta jen tam, kde je definovaná --wn-b, tedy ve stromu
   typů služeb. Ostatní filtry zůstávají neutrálně šedé. */
@supports (background: color-mix(in srgb, red 10%, white)) {
	.wn-strom .jet-filters-counter {
		background: color-mix(in srgb, var(--wn-b) 18%, #fff);
		color: color-mix(in srgb, var(--wn-b) 78%, #000);
	}
}

/* --- rytmus --- */
.wn-strom .jet-checkboxes-list__row { padding: 3px 0; }
.wn-strom .jet-list-tree__children .jet-checkboxes-list__row { padding: 2px 0; }

/* --- hledání --- */
.wn-hledat { position: relative; margin-bottom: 12px; }

.wn-hledat input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	border: 1.5px solid #E7E8EB;
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: inherit;
}

.wn-hledat input:focus { border-color: #EFC44F; outline: none; }

.wn-hledat::before {
	content: "⌕";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9396A0;
	font-size: 15px;
	pointer-events: none;
}

.wn-strom mark {
	background: #EFC44F;
	color: #141416;
	border-radius: 3px;
	padding: 0 2px;
}

/* `hidden` samo nestačí — JSF nastavuje display. */
.wn-strom [hidden] { display: none !important; }

.wn-nic {
	color: #9396A0;
	font-size: 13.5px;
	font-style: italic;
	padding: 8px 0;
}