/* search-filter.css — Version: 1.20.0
   Полетата на Search & Filter в архивните ленти.

   Плъгинът рисува полетата си с React и ги оформя през свои CSS променливи, а
   пресетът му (`uploads/search-filter/style.css`) се зарежда СЛЕД темата — с
   еднаква специфичност той печели. Затова няколко места са писани пряко, а не
   през променливи, и попъпът носи двоен селектор.

   Мерките са на старата, нативна форма: поле 46px високо, шрифт 14.5px,
   подложка 0 16px, рамка #E7DFF0, радиус 3px, бутон #69528E.

   Три неща, които не се поддават на променливите, и защо:
   · шрифтът идва от `--search-filter-scale-base`, число, не дължина; пресетът
     вдига `input-scale` на 2 и всичко излиза 2px по-голямо;
   · височината е `padding-top + line-height + padding-bottom + рамка`, не
     `height`;
   · `__selection` в падащото поле носи зашити `font-size:16px`,
     `line-height:20px`, `padding:6px` — променливите не го стигат. */

/* ── лентата ─────────────────────────────────────────────────────────── */

.mk-arch-searchbox .elementor-shortcode {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	justify-content: center !important;
	align-items: stretch !important;
	max-width: 980px !important;
	margin: 0 auto !important;
}

/* Полетата не се разтягат: иначе на архив с един фасет текстовото поле заема
   цялата лента, а на архив с два бутонът пада на втори ред. */
.mk-arch-searchbox .search-filter-field--type-search  { flex: 0 1 560px !important; }
.mk-arch-searchbox .search-filter-field--type-choice  { flex: 0 1 220px !important; }
.mk-arch-searchbox .search-filter-field--type-control { flex: 0 0 auto !important; }

/* Плъгинът слага рамка и подложка и на обвивката, и на вътрешния елемент —
   оттам двойният ръб. Обвивката се оголва; видът е на вътрешния. */
.mk-arch-searchbox .search-filter-base {
	--search-filter-input-scale: 1;
	--search-filter-scale-base: 14;
	--search-filter-input-border-width: 0px;
	--search-filter-input-border-radius: 0px;
	--search-filter-input-background-color: transparent;
	--search-filter-input-box-shadow: none;
	--search-filter-input-padding-top: 0px;
	--search-filter-input-padding-bottom: 0px;
	--search-filter-input-padding-left: 0px;
	--search-filter-input-padding-right: 0px;
	--search-filter-input-color: #4E3D6B;
	--search-filter-input-placeholder-color: #9C8DB0;
	--search-filter-field-padding: 0px;
	--search-filter-input-margin: 0px;
}
.mk-arch-searchbox .search-filter-input-text,
.mk-arch-searchbox .search-filter-component-combobox-base {
	border: 0 !important; padding: 0 !important; background: transparent !important;
	box-shadow: none !important; min-height: 0 !important;
}

/* ── текстовото поле ─────────────────────────────────────────────────── */

.mk-arch-searchbox .search-filter-input-text__input {
	height: 46px !important;
	padding: 0 16px !important;
	font-size: 14.5px !important;
	line-height: 46px !important;
	color: #4E3D6B !important;
	background: #fff !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}
.mk-arch-searchbox .search-filter-input-text__input::placeholder { color: #9C8DB0 !important; }
.mk-arch-searchbox .search-filter-input-text__input:focus {
	border-color: #C9B8DC !important; outline: none !important;
}

/* ── падащото поле ───────────────────────────────────────────────────── */

.mk-arch-searchbox .search-filter-component-combobox__header {
	min-height: 46px !important;
	padding: 0 10px 0 16px !important;
	background: #fff !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}
.mk-arch-searchbox .search-filter-component-combobox--open .search-filter-component-combobox__header,
.mk-arch-searchbox .search-filter-component-combobox__header:focus-within {
	border-color: #C9B8DC !important;
}

/* Зашитите стойности на компонента. */
.mk-arch-searchbox .search-filter-component-combobox__selection,
.mk-arch-searchbox .search-filter-component-combobox__actions-input {
	font-size: 14.5px !important;
	line-height: 44px !important;
	padding: 0 !important;
	color: #4E3D6B !important;
	background: transparent !important;
	border: 0 !important;
}
.mk-arch-searchbox .search-filter-component-combobox__actions-input::placeholder { color: #9C8DB0 !important; }

/* Чертичката пред стрелката е чужда на тази форма. */
.mk-arch-searchbox .search-filter-component-combobox__input-divider { display: none !important; }

.mk-arch-searchbox .search-filter-component-combobox__listbox-toggle .search-filter-icon__svg {
	width: 14px !important; height: 14px !important; color: #9C8DB0 !important;
}
.mk-arch-searchbox .search-filter-component-combobox__header:hover .search-filter-component-combobox__listbox-toggle .search-filter-icon__svg {
	color: #69528E !important;
}

/* ── списъкът ────────────────────────────────────────────────────────── */
/* Двоен селектор: пресетът пише по `.search-filter-base` със същата
   специфичност и се зарежда след темата. */

.search-filter-base.search-filter-field__popup {
	width: auto !important;
	min-width: 300px !important;
	background: #fff !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	box-shadow: 0 10px 26px rgba(78, 61, 107, .12) !important;
	padding: 6px 0 !important;
	margin-top: 4px !important;
}

.search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option {
	min-height: 38px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 18px !important;
	font-size: 14.5px !important;
	line-height: 1.3 !important;
	color: #4E3D6B !important;
	white-space: nowrap !important;
	border-radius: 0 !important;
	cursor: pointer !important;
}
.search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option:hover,
.search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option--focused {
	background: #F6F1FA !important; color: #69528E !important;
}
.search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option--selected {
	background: #EFE8F6 !important; color: #4E3D6B !important; font-weight: 600 !important;
}
/* Поднивата се четат като подредени под своя родител. */
.search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option--depth-1 {
	font-size: 13.5px !important; padding-left: 34px !important;
}
.search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option--depth-2 {
	font-size: 13.5px !important; padding-left: 50px !important;
}

/* ── бутоните ────────────────────────────────────────────────────────── */
/* Класът е `--control-type-submit`, не `--input-type-submit`. */

.mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button {
	height: 46px !important;
	padding: 0 26px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: #69528E !important;
	border: 0 !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: background-color .18s ease !important;
}
.mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button:hover {
	background: #55407A !important;
}

.mk-arch-searchbox .search-filter-field--control-type-reset .search-filter-input-button {
	height: 46px !important;
	padding: 0 18px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: #69528E !important;
	background: transparent !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	cursor: pointer !important;
}
.mk-arch-searchbox .search-filter-field--control-type-reset .search-filter-input-button:hover {
	border-color: #C9B8DC !important; background: #FBF9FD !important;
}

/* ── страничният филтър на специалистите ──────────────────────────────────
   Буква, болница, специалност. Езикът е на лентата горе — същите рамки,
   радиус и цветове — но **мащабът е на колоната**: там имената в картите са
   13.5px, резюметата 13px, затова 14.5px от лентата изглежда едро.

     рамка `1px solid #E7DFF0` · радиус 3px · текст 13.5px `#4E3D6B`
     подсказка `#9C8DB0` · фокус `#C9B8DC` · ховър в списъка `#F6F1FA`

   Отдолу е Search & Filter: буквите са radio група (#100), двата списъка са
   combobox (#101, #102). */

/* Мащабът и вътрешните подложки на плъгина. Без тях компонентът ползва
   своя базов размер и текстът излиза едър, а редът — непопаднал в средата.
   Горе базата е 14; в колоната е 13. */
.mk-side-alpha .search-filter-base,
.mk-side-select .search-filter-base {
	--search-filter-input-scale: 1;
	--search-filter-scale-base: 14;
	--search-filter-input-border-width: 0px;
	--search-filter-input-border-radius: 0px;
	--search-filter-input-background-color: transparent;
	--search-filter-input-box-shadow: none;
	--search-filter-input-padding-top: 0px;
	--search-filter-input-padding-bottom: 0px;
	--search-filter-input-padding-left: 0px;
	--search-filter-input-padding-right: 0px;
	--search-filter-input-color: #4E3D6B;
	--search-filter-input-placeholder-color: #9C8DB0;
	--search-filter-field-padding: 0px;
	--search-filter-input-margin: 0px;
	--search-filter-input-option-gap: 0px;
	--search-filter-input-option-padding-top: 0px;
	--search-filter-input-option-padding-bottom: 0px;
	--search-filter-input-option-padding-left: 0px;
	--search-filter-input-option-padding-right: 0px;
	--search-filter-input-option-indent-depth: 0px;
}

/* Буквите носят лилавото на специалността; общата променлива по-горе дава
   `#4E3D6B` и той печели над наследяването, защото компонентът я пише
   направо върху етикета. */
.mk-side-alpha .search-filter-base { --search-filter-input-color: #69528E; }

/* ── буквите ──────────────────────────────────────────────────────────── */
.mk-side-alpha { margin: 2px 0 0 !important; }

.mk-side-alpha .search-filter-input-group {
	display: flex !important;
	/* Групата на плъгина е колона; буквите вървят в ред. */
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

.mk-side-alpha .search-filter-input-radio {
	display: block !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mk-side-alpha .search-filter-input-radio__control { display: none !important; }
.mk-side-alpha .search-filter-input-radio__input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important; height: 1px !important;
	pointer-events: none !important;
}

.mk-side-alpha .search-filter-input-radio__container {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 31px !important;
	height: 31px !important;
	padding: 0 5px !important;
	margin: 0 !important;
	background: #fff !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	/* Същото лилаво, с което е изписана специалността в картите. */
	color: #69528E !important;
	font-size: 14px !important;
	/* Тънък чертеж: буквите са указател, не акцент. */
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

/* Етикетът носи собствен размер и лява подложка от компонента — те не се
   наследяват от кутийката, затова се задават тук. Проверено с computed
   style: без това буквата се рисува с 14px и изместена надясно. */
.mk-side-alpha .search-filter-input-radio__label {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	display: block !important;
	color: inherit !important;
	width: auto !important;
	text-align: center !important;
}

/* Ховърът е този на опциите в падащия списък — бледо, не плътно. */
.mk-side-alpha .search-filter-input-radio__container:hover {
	background: #F6F1FA !important;
	border-color: #C9B8DC !important;
	color: #69528E !important;
}

/* Избраната буква е в тона на бутона „Търси" — плътно #69528E с бяла буква. */
.mk-side-alpha .search-filter-input-radio--is-active .search-filter-input-radio__container {
	background: #69528E !important;
	border-color: #69528E !important;
	color: #fff !important;
}
/* Етикетът е вътре в кутийката — само цветът, фонът е на нея. */
.mk-side-alpha .search-filter-input-radio--is-active .search-filter-input-radio__label {
	background: transparent !important;
	color: #fff !important;
}

.mk-side-alpha .search-filter-input-radio:first-child .search-filter-input-radio__container {
	min-width: 0 !important;
	padding: 0 11px !important;
	color: #9C8DB0 !important;
}
.mk-side-alpha .search-filter-input-radio:first-child.search-filter-input-radio--is-active .search-filter-input-radio__container,
.mk-side-alpha .search-filter-input-radio:first-child.search-filter-input-radio--is-active .search-filter-input-radio__label {
	color: #fff !important;
}

.mk-side-alpha .search-filter-input-radio__input:focus-visible + .search-filter-input-radio__container {
	outline: 2px solid #C9B8DC !important;
	outline-offset: 1px !important;
}

/* ── падащите списъци ─────────────────────────────────────────────────── */
.mk-side-select { margin-top: 14px !important; }

.mk-side-select .search-filter-label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #8C7CA6 !important;
	margin: 0 0 5px !important;
}

/* Обвивката не носи вид — той е на header-а, както горе. */
.mk-side-select .search-filter-component-combobox-base {
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

.mk-side-select .search-filter-component-combobox__header {
	min-height: 46px !important;
	padding: 0 10px 0 16px !important;
	display: flex !important;
	align-items: center !important;
	background: #fff !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}
.mk-side-select .search-filter-component-combobox--open .search-filter-component-combobox__header,
.mk-side-select .search-filter-component-combobox__header:focus-within {
	border-color: #C9B8DC !important;
}

.mk-side-select .search-filter-component-combobox__selection,
.mk-side-select .search-filter-component-combobox__actions-input {
	font-size: 14.5px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	padding: 0 !important;
	color: #4E3D6B !important;
	background: transparent !important;
	border: 0 !important;
}
.mk-side-select .search-filter-component-combobox__selection-placeholder { color: #9C8DB0 !important; }

/* Чертичката пред стрелката е чужда на тази форма — както горе. */
.mk-side-select .search-filter-component-combobox__input-divider { display: none !important; }

.mk-side-select .search-filter-component-combobox__listbox-toggle .search-filter-icon__svg {
	width: 14px !important; height: 14px !important; color: #9C8DB0 !important;
}
.mk-side-select .search-filter-component-combobox__header:hover .search-filter-component-combobox__listbox-toggle .search-filter-icon__svg {
	color: #69528E !important;
}

/* Списъкът се държи в ширината на полето. Общото правило му дава
   `min-width: 300px`, което в колона от 370px го изкарва извън инпута. */
.mk-side-select .search-filter-base.search-filter-field__popup,
.mk-side-select .search-filter-component-combobox-base__listbox {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.mk-side-select .search-filter-base.search-filter-field__popup .search-filter-component-combobox-base__listbox-option {
	font-size: 14.5px !important;
	font-weight: 400 !important;
	min-height: 38px !important;
	padding: 0 18px !important;
	white-space: normal !important;
	line-height: 1.35 !important;
}

/* ══ ТЕЛЕФОН ═══════════════════════════════════════════════════════════
   Полетата на филтъра стоят в flex контейнер, който при тясна колона ги
   разтягаше до чужда височина: полето за търсене излизаше 560px при 46px
   съдържание, падащият списък — 220 при 46. Между търсачката и бутона
   зееха шестстотин празни пиксела.

   Тук контейнерът минава на колона, а всяко поле взема височината на
   съдържанието си. Падащите списъци плуват, вместо да бутат. */
@media (max-width: 767px) {

	.mk-arch-searchbox .elementor-shortcode,
	.mk-side-select .elementor-shortcode {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.mk-arch-searchbox .search-filter-field,
	.mk-side-select .search-filter-field {
		height: auto !important;
		min-height: 0 !important;
		flex: 0 0 auto !important;
	}

	/* Списъкът с опции се показва над полето и не бива да заема ред. */
	.mk-arch-searchbox .search-filter-field__popup,
	.mk-side-select .search-filter-field__popup {
		position: absolute !important;
		z-index: 30 !important;
	}

	.mk-arch-searchbox .search-filter-component-popover--hidden,
	.mk-side-select .search-filter-component-popover--hidden {
		display: none !important;
	}
}
