/* header-menu.css — Version: 1.21.0
     ══ Меню — вградено директно (не iframe), за да работят dropdown-ите и sticky
     без ограниченията на предишния подход. Идентично на header.html. ══ */
  header input { font: inherit !important; border: 0 !important; outline: 0 !important; background: transparent !important; }
  header a:focus-visible { outline: 2px solid #69528E !important; outline-offset: 2px !important; border-radius: 6px !important; }
  .mk-top { display: flex !important; align-items: center !important; width: 100% !important; height: 78px !important; padding: 0 13.2px !important; gap: 14px !important; }
  .mk-field { display: flex !important; align-items: center !important; height: 43px !important; border-radius: 21.5px !important;
              background: #F7F4FA !important; border: 1px solid #E7DFF0 !important; color: #69528E !important; }
  .mk-tel { flex: 0 1 760px !important; min-width: 0 !important; padding: 0 3px 0 14px !important; gap: 11px !important; overflow: hidden !important;
            border-radius: 0 21.5px 21.5px 0 !important; }
  .mk-tel-main { display: flex !important; align-items: center !important; gap: 7px !important; flex: 0 0 auto !important; color: #4E3D6B !important; }
  .mk-tel-main .hs { color: #F37B1F !important; display: flex !important; }
  .mk-tel-main b { font-size: 17px !important; font-weight: 700 !important; letter-spacing: .2px !important; white-space: nowrap !important; }
  .mk-tel-main em { font-style: normal !important; font-size: 12px !important; color: #9C8DB0 !important; }
  .mk-tel-div { width: 1px !important; height: 19px !important; background: #E0D6EC !important; flex: 0 0 auto !important; }
  .mk-run { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; min-height: 27px !important; }
  .mk-run-track { display: inline-flex !important; white-space: nowrap !important; animation: mk-scroll 34s linear infinite !important; }
  .mk-run:hover .mk-run-track { animation-play-state: paused !important; }
  .mk-run a { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; width: 186px !important; font-size: 13.5px !important; color: #7B6B93 !important; }
  .mk-run a b { font-weight: 600 !important; color: #69528E !important; }
  .mk-run a:hover, .mk-run a:hover b { color: #FF1A4B !important; }
  @keyframes mk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  /* Дясната група се лепи за десния ръб. Изтласкването живееше на обвивката
     `.mk-right`; тя падна на 2 ноември заедно с превключвателя на езика и
     заедно с нея падна и `margin-left: auto` — оттогава „Нашите офиси" и
     розовият бутон стояха 210px преди ръба. Сега изтласква първият елемент
     от групата. */
  .mk-offices { margin-left: auto !important; }
  .mk-circle { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important;
               width: 43px !important; height: 43px !important; border-radius: 50% !important; background: #69528E !important; color: #fff !important;
               font-size: 14px !important; font-weight: 700 !important; letter-spacing: .4px !important; cursor: pointer !important; }
  .bridge-zone { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; height: 10px !important; }
  .mk-circle .pop { position: absolute !important; top: calc(100% + 10px) !important; left: 50% !important;
                    transform-origin: top center !important; transform: translateX(-50%) scale(.92) !important;
                    z-index: 90 !important; width: max-content !important; padding: 7px !important; background: #fff !important;
                    border: 1px solid #EAE1F3 !important; border-radius: 4px !important;
                    box-shadow: 0 8px 19px rgba(78,61,107,.18) !important;
                    opacity: 0 !important; pointer-events: none !important;
                    transition: opacity .1s ease, transform .1s ease !important; }
  .mk-circle:hover .pop, .mk-circle.open .pop, .mk-circle:focus-within .pop {
    opacity: 1 !important; pointer-events: auto !important; transform: translateX(-50%) scale(1) !important;
    transition: opacity .17s cubic-bezier(.2,.8,.4,1), transform .17s cubic-bezier(.2,.8,.4,1) !important;
  }
  .pop a { display: block !important; padding: 9px 12px !important; border-radius: 4px !important; font-size: 13px !important;
           font-weight: 500 !important; color: #69528E !important; letter-spacing: 0 !important; white-space: nowrap !important;
           transition: background .12s ease, color .12s ease !important; }
  .pop a:hover { background: #69528E !important; color: #fff !important; }
  .pop a.on { color: #FF1A4B !important; font-weight: 600 !important; }
  .pop a.on:hover { background: #FF1A4B !important; color: #fff !important; }
  .mk-offices { display: flex !important; align-items: center !important; gap: 8px !important; height: 43px !important; padding: 0 20px !important;
                border: 1.5px solid #C9BBD8 !important; border-radius: 21.5px !important; color: #69528E !important;
                font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important;
                transition: background .14s ease, border-color .14s ease !important; }
  .mk-offices:hover { background: #F4F0F8 !important; border-color: #69528E !important; color: #69528E !important; }
  .mk-cta { display: flex !important; align-items: center !important; height: 43px !important; padding: 0 24px !important;
            background: #FF1A4B !important; color: #fff !important; border-radius: 21.5px 0 0 21.5px !important; font-size: 15px !important;
            font-weight: 600 !important; white-space: nowrap !important; transition: background .16s ease !important; }
  .mk-cta:hover { background: #E5133F !important; color: #fff !important; }
  /* Sticky чрез JS fallback (виж скрипта в края) вместо position:sticky — при теб
     нативният sticky не се задържаше (може би заради версия на браузъра). Клас
     .mk-nav-stuck превключва на fixed, .mk-nav-spacer пази мястото, за да не
     подскача съдържанието под менюто при превключването. */
  .mk-nav { display: flex !important; align-items: stretch !important; width: 100% !important; background: #69528E !important; padding: 0 13.2px 0 0 !important;
            position: relative !important; z-index: 60 !important; }
  .mk-nav.mk-nav-stuck { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; }
  .mk-nav-spacer { display: none !important; height: 90px !important; }
  .mk-nav-spacer.mk-nav-spacer-active { display: block !important; }
  .mk-nav-logo { display: flex !important; align-items: center !important; justify-content: center !important;
                 flex: 0 0 auto !important; padding: 0 24px 0 13.2px !important;
                 border-right: 1px solid rgba(255,255,255,.13) !important; }
  .mk-nav-logo img { display: block !important; height: 61px !important; width: auto !important; transform: translateY(-4px) !important; }
  .tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
          flex: 1 1 0 !important; min-width: 0 !important; height: 90px !important; padding: 0 6px !important; gap: 7px !important;
          color: #fff !important; text-align: center !important; position: relative !important; cursor: pointer !important;
          border-right: 1px solid rgba(255,255,255,.13) !important; transition: background .16s ease !important; }
  .tile:last-child { border-right: 0 !important; }
  .tile-ic { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 0 !important; }
  .tile-tx { font-size: 14px !important; font-weight: 500 !important; letter-spacing: .15px !important; line-height: 1 !important; white-space: nowrap !important; }
  .tile:hover { background: rgba(255,255,255,.10) !important; }
  .tile.on { background: rgba(255,255,255,.15) !important; }
  .tile.on .tile-tx { font-weight: 600 !important; }
  .tile.on::after { content: "" !important; position: absolute !important; left: 22% !important; right: 22% !important; bottom: 0 !important; height: 2px !important;
                    background: rgba(255,255,255,.85) !important; border-radius: 2px 2px 0 0 !important; }
  .submenu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; z-index: 50 !important; min-width: 320px !important;
             padding: 8px !important; background: #fff !important; border: 1px solid #EAE1F3 !important; border-radius: 0 0 6px 6px !important;
             box-shadow: 0 8px 18px rgba(78,61,107,.18) !important; text-align: left !important; }
  .has-sub:hover .submenu { display: block !important; }
  /* Плочките най-вдясно отварят менюто наляво, за да не излиза от екрана. */
  .mk-nav .tile.has-sub:nth-last-child(-n+4) .submenu { left: auto !important; right: 0 !important; }
  /* Дългите пунктове („Как да изпратите медицинска информация", „Организация на лечение,
     транспорт и престой") се пренасят на два реда вместо да разпъват менюто. */
  .submenu a { display: block !important; padding: 11px 14px !important; border-radius: 9px !important; font-size: 14.5px !important;
               font-weight: 500 !important; color: #69528E !important; white-space: normal !important;
               line-height: 1.35 !important; }
  .submenu a:hover { background: #F4F0F8 !important; color: #4E3D6B !important; }
  .submenu a.home-link { display: flex !important; align-items: center !important; gap: 8px !important; font-weight: 700 !important; }
  .submenu a.home-link svg { flex: none !important; }
  @media (max-width: 1660px) { .mk-tel { flex-basis: 574px !important; } }
  @media (max-width: 1400px) { .mk-nav-logo img { height: 46px !important; } }

/* Икони от менюто (Tabler webfont, добавени от Walker-а/nav hook-а) */
.tile-ic i.ti { font-size: 29px !important; line-height: 1 !important; }
.submenu a.home-link i.ti { font-size: 26px !important; line-height: 1 !important; }
/* Custom шрифтът (medicine) рисува глифите по-тесни в своя em-box от Tabler —
   при еднакъв font-size изглеждат забележимо по-дребни. Компенсирано нагоре. */
.tile-ic i.mf { font-size: 46px !important; line-height: 1 !important; }
/* Измерено: реалната междина икона→текст е 21px при зададен gap:5px — line-box-ът
   на custom глифите е много по-висок от видимото мастило. Компенсирано надолу,
   за да излезе реалната междина ~5-6px. */
.tile-ic:has(i.mf) { margin-bottom: -11px !important; }
/* "За нас" е окей както си беше — изключен от +2px корекцията по-горе. */
.tile-ic:has(i.mf-za-nas) { margin-bottom: -13px !important; }
/* За нас + Инвитро: +10% размер. */
.tile-ic i.mf-za-nas { font-size: 51px !important; }
.tile-ic i.mf-ivf { font-size: 51px !important; }
.tile-ic i.mf-kontakt { font-size: 50px !important; }
.tile-ic i.mf-procedury { font-size: 44px !important; }
.submenu a.home-link i.mf { font-size: 28px !important; }

/* Override: върховите менюта без подменю се рендират като <a>, не <div> — нещо
   в каскадата (тема/Elementor) печели над .tile за голите <a> тагове и чупи
   flex подредбата им. Форсирано тук, докато не се открие точното правило. */
.mk-nav a.tile { display: flex !important; flex-direction: column !important;
                 align-items: center !important; justify-content: center !important;
                 color: #fff !important; }
.mk-nav a.tile .tile-tx, .mk-nav a.tile .tile-ic, .mk-nav a.tile .tile-ic i { color: #fff !important; }

/* Причина, вече потвърдена: Elementor Kit-ът задава глобално a{color:#69528E}
   (същия лилав, "system text" цвят на кита) с по-висок приоритет от единичен клас.
   Удря всеки наш <a> с изричен цвят — форсирано тук, вместо на парче. */
.mk-cta { color: #fff !important; }
.mk-offices { color: #69528E !important; }
.mk-tel-main { color: #4E3D6B !important; }
.mk-run a { color: #7B6B93 !important; }
.mk-run a b { color: #69528E !important; }
.mk-run a:hover, .mk-run a:hover b { color: #FF1A4B !important; }
.pop a { color: #69528E !important; }
.pop a.on { color: #FF1A4B !important; }
.pop a:hover, .pop a.on:hover { color: #fff !important; }

/* Телефонният "бегач" се слепваше — нямаше gap между записите, а фиксираната
   ширина 186px преливаше при по-дълги градове ("Македония +389..."). */
.mk-run-track { gap: 26px !important; }
.mk-run a { width: auto !important; min-width: 186px !important; }

/* "БГ" не беше центрирано в кръга. */
.mk-circle { line-height: 1 !important; }

/* Попъпите (език/профил) трябва да стоят над всичко в лентата, не само над .mk-nav.
   Фонът им явно е бил жертва на същия Kit конфликт — форсиран изрично, за да не
   прозира плочката отдолу (напр. "Естетика"). */
.mk-circle .pop {
  z-index: 95 !important;
  background: #fff !important;
  opacity: 0 !important; /* пази hover/focus поведението от базовия CSS по-долу */
}
.mk-circle:hover .pop, .mk-circle.open .pop, .mk-circle:focus-within .pop { opacity: 1 !important; }
.pop a { background: #fff !important; }
.pop a:hover { background: #69528E !important; }
.pop a.on:hover { background: #FF1A4B !important; }

/* Реален корен на проблема: top-bar и nav са ДВЕ отделни Elementor секции.
   Nav-ът е sticky ("sticky":"top") — Elementor дава на sticky елементи собствен
   z-index стек, по-висок от обикновена секция. Локалният z-index:95 на попъпа
   важи само ВЪТРЕ в неговата собствена секция — не може да прескочи в чужд,
   по-висок стек. Форсираме top-bar секцията самата да е над nav-а. */
.elementor-element-mktopbar1 { position: relative !important; z-index: 500 !important; }
/* nav секцията (9004b94) излезе с computed z-index:60 от неизвестен източник
   (нито моя CSS го сочи изрично на нея, нито Elementor-генерирания page CSS) —
   форсирана директно надолу, за да спре да бие topbar-а. */
.elementor-element-9004b94 { z-index: 1 !important; }

/* Elementor слага default padding:10px на .elementor-widget-wrap на КОЛОНАТА
   (не widget-а) — вижда се директно в DevTools tooltip-а. Нулирано за двете
   ни колони (topbar + nav). */
.elementor-element-mktopbarcol1.elementor-widget-wrap,
.elementor-element-01494db.elementor-widget-wrap { padding: 0 !important; }

/* Потвърдено с DevTools tooltip: .mk-cta беше 16px вместо 15px на живо — същият
   Kit конфликт като цвета/padding-а по-горе, но за font-size/font-family, никога
   не форсиран с !important. Затваря целия клас бъгове наведнъж, не на парче. */
.mk-top, .mk-nav, .submenu {
  font-family: "Onest", "Segoe UI", system-ui, sans-serif !important;
}
.mk-tel-main b { font-size: 17px !important; }
.mk-tel-main em { font-size: 12px !important; }
.mk-run a { font-size: 13.5px !important; }
.mk-circle { font-size: 14px !important; }
.pop a { font-size: 13px !important; }
.mk-offices { font-size: 14px !important; }
.mk-cta { font-size: 15px !important; }
.tile-tx { font-size: 14px !important; }
.submenu a { font-size: 14.5px !important; }

/* Стрелка около "Инвитро" при Tab — has-sub плочките нямат href, фокусът пада
   на децата им (:focus-within), браузърът рисува default outline на родителя. */
.tile.has-sub:focus, .tile.has-sub:focus-within { outline: none !important; }

/* Езиковият попъп (4 реда вертикално) физически стигаше под nav-а отдолу —
   не z-index проблем, геометрия (topbar е само ~78-98px висок). Хоризонтален
   ред вместо колона: остава изцяло вътре в топ лентата. */
.pop.pop-lang { display: flex !important; gap: 2px !important; padding: 4px !important; width: max-content !important; }
.pop.pop-lang a { padding: 7px 10px !important; }

/* ── Търсачката в горната лента ──────────────────────────────────────────
   Полето е на Search & Filter, но хапката е същата, както беше при нативната
   форма: прозрачно поле вляво след лупата, плътен лилав кръг със стрелка
   вдясно. Плъгинът рисува полетата си с CSS променливи, затова тук се задават
   стойностите, а не се пипа структурата му.

   Мащабът се връща на 1: стиловият пресет на плъгина
   (`uploads/search-filter/style.css`) задава `input-scale: 2` и всеки шрифт
   излиза с 2px по-голям. */

.mk-search { flex: 0 1 285px !important; min-width: 0 !important; gap: 6px !important;
          padding: 0 5px 0 14px !important; transition: background .14s ease !important; }
.mk-search:focus-within { background: #fff !important; }

.mk-search .search-filter-base {
  --search-filter-input-scale: 1;
  --search-filter-scale-base: 14;
  --search-filter-input-background-color: transparent;
  --search-filter-input-border-width: 0px;
  --search-filter-input-border-radius: 0px;
  --search-filter-input-box-shadow: none;
  --search-filter-input-padding-top: 7px;
  --search-filter-input-padding-bottom: 7px;
  --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-input-margin: 0px;
  --search-filter-field-padding: 0px;
  /* Полето няма икона вътре; разстоянието за нея отрязваше последната дума
     на подсказката. */
  --search-filter-input-gap: 0px;
}

/* Полето заема мястото между лупата и кръга. */
.mk-search .search-filter-field--type-search { flex: 1 1 auto !important; min-width: 0 !important; }
.mk-search .search-filter-input-text { min-height: 34px !important; }
.mk-search .search-filter-input-text__input { height: 34px !important; font-size: 14px !important; }
.mk-search .search-filter-input-text__input:focus::placeholder { color: transparent !important; }

/* Бутонът е кръгът със стрелката. Текстът му се скрива, стрелката е фон —
   плъгинът рисува `<button>` с надпис, не иконка. */
.mk-search .search-filter-field--control-type-submit { flex: 0 0 auto !important; }
.mk-search .search-filter-field--control-type-submit .search-filter-input-button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  border-radius: 50% !important; background: #69528E !important; cursor: pointer !important;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  -webkit-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: background-color .15s ease !important;
}
.mk-search .search-filter-field--control-type-submit .search-filter-input-button:hover,
.mk-search .search-filter-field--control-type-submit .search-filter-input-button:focus,
.mk-search .search-filter-field--control-type-submit .search-filter-input-button:active {
  background-color: #55407A !important; outline: 0 !important; box-shadow: none !important;
}

@media (max-width: 1400px) { .mk-search { flex-basis: 230px !important; } }
@media (max-width: 1240px) { .mk-search { display: none !important; } }

/* ── попъпът с офисите ───────────────────────────────────────────────
   Старият беше списък с иконки — четеше се като указател. Тук всеки
   офис е карта: град, адрес, номера. Номерът е връзка `tel:`, за да се
   набира с едно докосване от телефон. */

.mk-of-popup .mk-of-head { margin-bottom: 18px !important; }

.mk-of-popup .mk-of-title .elementor-heading-title {
	font-size: 22px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: #362A4B !important;
	margin: 0 !important;
}

.mk-of-popup .mk-of-lead p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #6B5D82 !important;
	margin: 0 !important;
}

/* Зидария, не решетка. При редове картата с пет телефона задаваше
   височината на целия ред и до съседките ѝ зееше празно. Тук потокът е
   вертикален: трите колони се пълнят една след друга и всяка карта заема
   точно толкова, колкото ѝ трябва.
   Прави се с `column-count`, не с JS — съдържанието е осем кратки блока и
   не се мени при преоразмеряване. */
.mk-of-popup .mk-of-grid > .elementor-container {
	display: block !important;
	column-count: 3 !important;
	column-gap: 12px !important;
}

.mk-of-popup .mk-of-card {
	display: inline-block !important;
	width: 100% !important;
	margin: 0 0 12px !important;
	/* Карта, разкъсана между две колони, е по-лошо от празнина. */
	break-inside: avoid !important;
	-webkit-column-break-inside: avoid !important;
	page-break-inside: avoid !important;
}

.mk-of-popup .mk-of-card > .elementor-element-populated {
	padding: 14px 16px !important;
	background: #FBF9FD !important;
	border: 1px solid #EEE6F5 !important;
	border-radius: 2px !important;
	/* Без разтягане по височината на реда — картата с пет телефона не бива
	   да прави съседките си празни отвътре. */
	height: auto !important;
}

.mk-of-popup .mk-of-city .elementor-heading-title {
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: #362A4B !important;
	margin: 0 !important;
}

/* „Централен офис“ стои под името на града като пояснение, не като втори
   ред от заглавието. */
.mk-of-popup .mk-of-kind .elementor-heading-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #F37B1F !important;
	margin: 3px 0 0 !important;
}

.mk-of-popup .mk-of-lines { margin-top: 7px !important; }

.mk-of-popup .mk-of-addr {
	display: block !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: #6B5D82 !important;
	margin-bottom: 6px !important;
}

/* Номерата са един под друг — централният офис има пет и в един ред биха
   се слели в низ от цифри. */
.mk-of-popup .mk-of-tel {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.55 !important;
	color: #69528E !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent !important;
	width: fit-content !important;
}

.mk-of-popup .mk-of-tel:hover { border-bottom-color: #69528E !important; }

@media (max-width: 767px) {
	.mk-of-popup .mk-of-grid > .elementor-container { column-count: 1 !important; }
	.mk-of-popup .mk-of-title .elementor-heading-title { font-size: 23px !important; }
}

/* ── Viber групата в лентата ─────────────────────────────────────────
   Скроена като търсачката: същата височина и закръгление, но без поле за
   писане. Отляво знакът в плътно лилаво, отдясно подканата и стрелка. */
.mk-viber {
	flex: 0 0 auto !important;
	padding: 0 0 0 16px !important;
	/* Десният ъгъл на целия бутон следва квадрата на знака. */
	border-radius: 21.5px 0 0 21.5px !important;
	gap: 9px !important;
	/* Знакът е по-голям от полето си и излиза извън него — отблясъците му
	   отстрани лягат върху съседното. Затова тук не се реже. */
	overflow: visible !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: border-color .18s ease !important;
}

.mk-viber:hover { border-color: #69528E !important; }

/* Знакът запълва дясната си половина докрай — там сочи стрелката. */
/* Новият знак не е квадрат (512×410) — височината следва ширината, иначе
   се сплесква. Широк е повече от самото поле: лилавият квадрат остава
   46×43, а знакът го надраства и стъпва върху него и върху съседното.
   Отблясъците отстрани са за това. */
.mk-viber-icon img {
	display: block !important;
	width: 29px !important;
	height: auto !important;
	/* Полето е flex контейнер — без това знакът се свива до неговите 46px
	   вместо да го надрасне (измерено: 46×37 при зададени 64). */
	flex: 0 0 auto !important;
	max-width: none !important;
	position: relative !important;
	z-index: 2 !important;
}

.mk-viber-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 46px !important;
	height: 43px !important;
	margin: -1px -1px -1px 0 !important;
	background: #7D5FA8 !important;
	color: #fff !important;
	/* Полето е квадрат, както е самата икона — закръглен ръб около квадратен
	   знак изглежда като грешка. */
	border-radius: 0 !important;
	flex: 0 0 46px !important;
}

.mk-viber:hover .mk-viber-icon { background: #69528E !important; }

.mk-viber-text {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #69528E !important;
}

.mk-viber-arrow {
	display: flex !important;
	align-items: center !important;
	color: #69528E !important;
	transition: transform .18s ease !important;
}

.mk-viber:hover .mk-viber-arrow { transform: translateX(3px) !important; }

@media (max-width: 1400px) {
	/* На тясна лента остава само знакът — подканата се подразбира. */
	.mk-viber { padding: 0 !important; }
	.mk-viber-text, .mk-viber-arrow { display: none !important; }
	.mk-viber-icon { border-radius: 21.5px !important; margin: -1px !important; width: 43px !important; flex-basis: 43px !important; }
}

/* ── дълго име в лентата се пренася, не излиза навън ────────────────
   Надписите са на един ред (`nowrap`) и при дълго име текстът ляга върху
   съседите. Тук редът се разрешава: името се пренася, а дума, която не
   се събира, се реже с тире.

   Към 15 октомври 2026 нито един надпис в лентата не стига дотам —
   правилото стои за занапред, когато някой стане по-дълъг. */
/* Плочката с подменю е `div.tile`, не `a.tile` — затова без таг. */
.mk-nav .tile .tile-tx {
	white-space: normal !important;
	line-height: 1.15 !important;
	text-align: center !important;
	hyphens: auto !important;
	-webkit-hyphens: auto !important;
	overflow-wrap: break-word !important;
	max-width: 15ch !important;
}

/* Плочките се подравняват по горния си ръб, за да не подскача иконата на
   съседа, когато една от тях стане двуредова. */
.mk-nav .tiles { align-items: stretch !important; }

/* Редът в падащото меню зачита новия ред, записан в самото име. Темата
   изписва заглавията през `esc_html`, тоест `<br>` не минава — истинският
   нов ред в името е единственият начин преносът да е точно там, където
   трябва („Лечение на инфертилитет-" / „безплодие"). */
.submenu a { white-space: pre-line !important; }

/* ── падащото меню е широко колкото най-дългия си ред ───────────────
   Беше с твърди 320px: късите списъци („Изследвания · Лаборатории")
   оставаха с празно поле отдясно, а дългите се пренасяха без нужда.
   `max-content` взема мярка от най-дългия ред; долната граница пази
   късите да не станат тесни ивици, горната не им дава да излязат от
   екрана. Редът с ръчен пренос дава своя най-дълъг ред, не целия текст. */
.mk-nav .submenu {
	width: max-content !important;
	min-width: 220px !important;
	max-width: 420px !important;
}

/* ══ АЗБУЧНИКЪТ НА ЕСТЕТИКАТА ══════════════════════════════════════════
   Третата лента на хедъра в раздел „Естетика“: стрелка назад, надпис и
   буквите, под всяка от които пада списъкът с интервенциите.

   Менюто наследява вида на главната навигация — тъмен текст върху тъмен
   фон, защото там редът е светъл. Тук се нулира: лентата е с един тон
   по-светла от навигацията над нея, буквите са бели и наредени в един
   ред. */
.mk-aes-bar {
	background: #5E4A80 !important;
	padding: 0 !important;
}

.mk-aes-bar > .elementor-container {
	max-width: 1300px !important;
}

.mk-aes-nav .elementor-nav-menu {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0 !important;
}

.mk-aes-nav .elementor-nav-menu > li > a.elementor-item {
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
	padding: 11px 9px !important;
	fill: #fff !important;
}

/* Първите два елемента са стрелката и надписът — те не са букви и носят
   собствен ритъм. */
.mk-aes-nav .elementor-nav-menu > li:nth-child(1) > a.elementor-item,
.mk-aes-nav .elementor-nav-menu > li:nth-child(2) > a.elementor-item {
	font-size: 12px !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: rgba( 255, 255, 255, .72 ) !important;
	padding-left: 0 !important;
	cursor: default !important;
}

.mk-aes-nav .elementor-nav-menu > li > a.elementor-item:hover,
.mk-aes-nav .elementor-nav-menu > li.current-menu-item > a.elementor-item {
	color: #F37B1F !important;
	background: transparent !important;
}

/* Стрелката за подменю отнема място, а буквите и без това подсказват, че
   има какво да падне. */
.mk-aes-nav .elementor-nav-menu .sub-arrow { display: none !important; }

/* Падащото меню: бял списък върху тъмното, по-широк от буквата над него. */
.mk-aes-nav .elementor-nav-menu ul.sub-menu {
	min-width: 280px !important;
	padding: 6px 0 !important;
	background: #fff !important;
	border-radius: 3px !important;
	box-shadow: 0 14px 34px rgba( 54, 42, 75, .22 ) !important;
}

.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item {
	color: #4A4458 !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	padding: 8px 16px !important;
	white-space: normal !important;
}

.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item:hover {
	background: #F7F4FA !important;
	color: #69528E !important;
}

@media (max-width: 1024px) {
	.mk-aes-bar { display: none !important; }
}

/* ── списъкът пада надолу и се отваря при посочване ─────────────────
   Лентата е последна в хедъра; SmartMenus реши, че отдолу няма място, и
   обърна списъка нагоре — той излизаше върху целия хедър, на 210px над
   буквата. Оттам идваше усещането, че „изчезва“.

   Позицията се налага тук, а отварянето минава на посочване: меню в
   хедър, което иска клик, се усеща счупено. */
.mk-aes-nav .elementor-nav-menu > li { position: relative !important; }

.mk-aes-nav .elementor-nav-menu > li > ul.sub-menu {
	top: 100% !important;
	bottom: auto !important;
	left: 0 !important;
	right: auto !important;
	margin: 0 !important;
}

.mk-aes-nav .elementor-nav-menu > li:hover > ul.sub-menu,
.mk-aes-nav .elementor-nav-menu > li:focus-within > ul.sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Мостът над празнината: без него списъкът се затваря, докато мишката
   пътува от буквата до първия ред. */
.mk-aes-nav .elementor-nav-menu > li.menu-item-has-children::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 100% !important;
	height: 10px !important;
	/* Без това мостът наследява левия кант на менюто и под всяка буква
	   увисва по една тънка чертичка. */
	border: 0 !important;
	background: transparent !important;
}

/* Близо до десния ръб списъкът излиза извън платното. */
.mk-aes-nav .elementor-nav-menu > li:nth-last-child(-n+4) > ul.sub-menu {
	left: auto !important;
	right: 0 !important;
}

/* ── избраното в момента ────────────────────────────────────────────
   Elementor оцветява активния ред от глобалните си настройки: текст
   #4A4458 върху фон #3F444B — тъмно върху тъмно, не се четеше. Двата
   реда по-долу го заменят с вида, който носи останалата част от сайта:
   светло поле, лилав текст, оранжева чертица отляво. */
.mk-aes-nav .elementor-nav-menu ul.sub-menu > li.current-menu-item > a.elementor-sub-item,
.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item.elementor-item-active {
	background: #F7F4FA !important;
	color: #69528E !important;
	font-weight: 600 !important;
	box-shadow: inset 3px 0 0 #F37B1F !important;
}

.mk-aes-nav .elementor-nav-menu ul.sub-menu > li.current-menu-item > a.elementor-sub-item:hover,
.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item.elementor-item-active:hover {
	background: #EFE9F6 !important;
	color: #4E3D6B !important;
}

/* Буквата, под която стои отворената страница, се отличава от другите —
   иначе нищо не подсказва докъде си стигнал. */
.mk-aes-nav .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,
.mk-aes-nav .elementor-nav-menu > li.current-menu-parent > a.elementor-item {
	color: #F37B1F !important;
	background: transparent !important;
}

/* ── азбучната лента стои под падащите менюта ───────────────────────
   Тя е последна в хедъра и без нареден ред се оказваше отгоре: щом се
   отвореше подменю на главната навигация, стрелката назад и надписът
   „Естетични интервенции“ излизаха върху него.

   Навигацията получава свой пласт над лентата, а падащите ѝ списъци —
   още по-висок. */
/* `:not( .elementor-sticky--active )` пази залепването: щом секцията се
   закачи горе, Elementor ѝ дава `position: fixed`, а наложеното тук
   `relative` го биеше и лентата си тръгваше нагоре със страницата. */
.mk-header-nav:not( .elementor-sticky--active ),
.elementor-location-header .elementor-section:not( .mk-aes-bar ):not( .elementor-sticky--active ):has( > .elementor-container .elementor-nav-menu--main ) {
	position: relative !important;
	z-index: 20 !important;
}

.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header ul.sub-menu {
	z-index: 40 !important;
}


/* ══ АЗБУЧНАТА ЛЕНТА, ВТОРА РЕДАКЦИЯ ═══════════════════════════════════

   ── стрелката и надписът: един бутон назад ─────────────────────────
   Двата елемента вървят заедно и връщат там, откъдето човекът е влязъл
   в раздела (`aes-back.js`). Затова са в пълно бяло, за разлика от
   буквите, и реагират като едно цяло. */
.mk-aes-nav .elementor-nav-menu > li.mk-aes-back > a.elementor-item {
	color: #fff !important;
	opacity: 1 !important;
	cursor: pointer !important;
}

/* Стрелката се подава напред в посоката, накъдето води — не повече от
   десет пиксела. Движи се и при посочване на надписа до нея. */
.mk-aes-nav .elementor-nav-menu > li.mk-aes-back:first-child > a.elementor-item {
	transition: transform .22s ease !important;
	will-change: transform !important;
}

.mk-aes-bar:has( .mk-aes-back:hover ) .mk-aes-nav .elementor-nav-menu > li.mk-aes-back:first-child > a.elementor-item {
	transform: translateX( -10px ) !important;
}


/* ── падащите списъци: като тези на главната навигация ──────────────
   Вземат цветовете от набора на сайта: лилаво за фона, бяло за текста,
   оранжево при посочване — същото, което Elementor дава на подменютата
   в хедъра. Белият списък, който бях сложил, беше мой. */
/* Еталонът е падащото меню на плочките в същия хедър (`.submenu`) —
   това, което се отваря под „Инвитро“ и „За нас“. Бяло, с тънък кант и
   мека сянка; редовете са лилави, със заоблено поле при посочване. */
.mk-aes-nav .elementor-nav-menu ul.sub-menu {
	background: #fff !important;
	border: 1px solid #EAE1F3 !important;
	border-radius: 0 0 6px 6px !important;
	box-shadow: 0 8px 18px rgba( 78, 61, 107, .18 ) !important;
	padding: 8px !important;
	text-align: left !important;
}

.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item {
	display: block !important;
	background: transparent !important;
	color: #69528E !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	padding: 11px 14px !important;
	border-radius: 9px !important;
	white-space: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item:hover {
	background: #F4F0F8 !important;
	color: #4E3D6B !important;
}

/* Отвореният в момента ред — както при плочките: светло поле и
   по-плътен текст. */
.mk-aes-nav .elementor-nav-menu ul.sub-menu > li.current-menu-item > a.elementor-sub-item,
.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item.elementor-item-active {
	background: #F4F0F8 !important;
	color: #4E3D6B !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

/* ── пластовете ─────────────────────────────────────────────────────
   Азбучната лента е последна в хедъра и по подразбиране ляга върху
   всичко под нея. Падащите менюта от редовете над нея трябва да минават
   отгоре; само нейните собствени списъци стоят над самата нея.

   Залепената секция е изключена от `position`: Elementor ѝ дава `fixed`,
   когато се закачи горе, и наложеното тук `relative` го биеше — хедърът
   си тръгваше нагоре със страницата. Пластът ѝ се задава отделно. */
.elementor-location-header > .elementor-element > .elementor-section:not( .elementor-sticky--active ),
.elementor-location-header .elementor-section.mk-header-nav:not( .elementor-sticky--active ),
.elementor-location-header .elementor-section:not( .mk-aes-bar ):not( .elementor-sticky--active ) {
	position: relative !important;
	z-index: 30 !important;
}

.elementor-location-header .elementor-section.elementor-sticky--active {
	z-index: 30 !important;
}

/* Лентата с буквите се закача под навигацията — отместването от 90px е
   нейната височина при залепване и стои в самия шаблон (Elementor
   sticky, секция `mkaesbar`).

   `position: sticky` не вършеше работа: лентата е дете на хедъра и не
   може да излезе извън неговите граници, тоест щом хедърът напуснеше
   видимото, тя си тръгваше с него. Elementor я изважда от потока.

   Пластът ѝ остава под този на навигацията, за да минават падащите
   менюта отгоре; затова `position` тук се налага само когато лентата
   НЕ е закачена. */
.elementor-location-header .elementor-section.mk-aes-bar:not( .elementor-sticky--active ) {
	position: relative !important;
}

.elementor-location-header .elementor-section.mk-aes-bar {
	z-index: 5 !important;
}

.elementor-location-header .elementor-section.mk-aes-bar .elementor-nav-menu ul.sub-menu { z-index: 6 !important; }

/* Падащите списъци на горните редове — над всичко в хедъра. */
.elementor-location-header .elementor-section:not( .mk-aes-bar ) ul.sub-menu,
.elementor-location-header .elementor-section:not( .mk-aes-bar ) .elementor-nav-menu--dropdown {
	z-index: 60 !important;
}

/* Одобреният хедър носи къси надписи и редът му се побира на един ред.
   Тук имената са дълги („Интимна хирургия за жени (вагинопластика,
   вагиналното подмладяване)“) и при `nowrap` се режеха в списък от
   156px. Списъкът се разширява до съдържанието си; по-дългото от 420
   се пренася, вместо да излезе извън платното. */
.mk-aes-nav .elementor-nav-menu ul.sub-menu {
	width: max-content !important;
	min-width: 220px !important;
	max-width: 420px !important;
}

.mk-aes-nav .elementor-nav-menu ul.sub-menu > li,
.mk-aes-nav .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item {
	width: 100% !important;
	white-space: normal !important;
}

/* ── буквата при отворен списък ─────────────────────────────────────
   Плочките в одобрения хедър не светват оранжево — полето им просто
   избледнява: `rgba( 255, 255, 255, .10 )` при посочване, `.15` когато
   си вътре. Буквите носят същото. */
.mk-aes-nav .elementor-nav-menu > li.menu-item-has-children:hover > a.elementor-item,
.mk-aes-nav .elementor-nav-menu > li.menu-item-has-children:focus-within > a.elementor-item {
	background: rgba( 255, 255, 255, .10 ) !important;
	color: #fff !important;
	border-radius: 6px 6px 0 0 !important;
}

.mk-aes-nav .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,
.mk-aes-nav .elementor-nav-menu > li.current-menu-parent > a.elementor-item {
	background: rgba( 255, 255, 255, .15 ) !important;
	color: #fff !important;
	border-radius: 6px !important;
}

/* Списъкът тръгва от самия ръб на буквата, както там. */
.mk-aes-nav .elementor-nav-menu > li > ul.sub-menu { margin-top: 0 !important; }

/* Буквата е висока колкото елемент от главната навигация — 46, не 42.
   При по-нисък ред оранжевото поле не съвпада с ширината на списъка под
   него и двете изглеждат като различни неща. */
.mk-aes-nav .elementor-nav-menu > li > a.elementor-item {
	min-height: 46px !important;
	display: flex !important;
	align-items: center !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.mk-aes-bar > .elementor-container { min-height: 46px !important; }