/* Менюто на двата сайта: връзките в горната лента, падащите панели при
 * апаратите и менюто на телефон. Всичко за тях е тук и само тук: панелите
 * живееха едновременно в sait.css и в menu.css.
 *
 * Идеята е една и съща навсякъде: избраното личи. Под избраната връзка
 * минава златна линия отляво надясно, а в панела и в менюто на телефон
 * редът става правоъгълник в тъмнокремавия цвят на избраните зони.
 * Страницата, на която сме, остава отбелязана; това го прави navigacia.js
 * с aria-current="page".
 */

/* ---------- Зоната на часовника (iPhone с iOS 26) ----------
   С viewport-fit=cover новият Safari пуска страницата и под часовника и
   Dynamic Island. Лентата горе и отвореното меню стояха там и бургерът и
   затварянето не се натискаха (на iPhone 16; на iPhone 14 с по-стара iOS
   зоната е на браузъра и проблем няма). Всичко слиза с височината на
   зоната; където зона няма, стойността е нула и нищо не се мени. */
[data-nav], .shapka { padding-top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important; }
[data-mmenu] { padding-top: calc(4.6rem + env(safe-area-inset-top, 0px)) !important; }
[data-mmenu] > button[aria-label="Затвори"], [data-mmenu] > .zatvori,
[data-mmenu] > a[aria-label] { top: calc(1.1rem + env(safe-area-inset-top, 0px)) !important; }

/* ---------- Горната лента ---------- */
[data-navpaths] > a[data-navlink], [data-navpaths] > .mega > a,
.patish > a:not([data-dd-btn]), .patish > .mega > a { position: relative; }

[data-navpaths] > a[data-navlink]::after, [data-navpaths] > .mega > a::after,
.patish > a:not([data-dd-btn])::after, .patish > .mega > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s ease;
}
[data-navpaths] > a[data-navlink]:hover, [data-navpaths] > .mega:hover > a,
[data-navpaths] > .mega:focus-within > a, [data-navpaths] > a[aria-current],
[data-navpaths] > .mega:has(a[aria-current]) > a,
.patish > a:not([data-dd-btn]):hover, .patish > .mega:hover > a,
.patish > .mega:focus-within > a, .patish > a[aria-current],
.patish > .mega:has(a[aria-current]) > a { color: #8A6B3F !important; }
[data-navpaths] > a[data-navlink]:hover::after, [data-navpaths] > .mega:hover > a::after,
[data-navpaths] > .mega:focus-within > a::after, [data-navpaths] > a[aria-current]::after,
[data-navpaths] > .mega:has(a[aria-current]) > a::after,
.patish > a:not([data-dd-btn]):hover::after, .patish > .mega:hover > a::after,
.patish > .mega:focus-within > a::after, .patish > a[aria-current]::after,
.patish > .mega:has(a[aria-current]) > a::after { transform: scaleX(1); }

/* Въздух между страниците, а посочената връзка леко пораства, както
   редовете в падащите панели. Преходът е с !important, защото рендерът
   пише инлайн „transition: color“ на всяка връзка. */
/* на по-тесен десктоп разстоянието се свива, за да се събират всички
   страници на един ред до 1301 px, където идва бургерът */
[data-navpaths], .patish { column-gap: clamp(0.95rem, 1.6vw, 1.6rem) !important; }
[data-navpaths] > a[data-navlink], [data-navpaths] > .mega > a,
.patish > a:not([data-dd-btn]), .patish > .mega > a {
  transform-origin: center;
  transition: color 0.35s ease, transform 0.3s ease !important;
}
[data-navpaths] > a[data-navlink]:hover, [data-navpaths] > a[data-navlink]:focus-visible,
[data-navpaths] > .mega:hover > a, [data-navpaths] > .mega:focus-within > a,
.patish > a:not([data-dd-btn]):hover, .patish > a:not([data-dd-btn]):focus-visible,
.patish > .mega:hover > a, .patish > .mega:focus-within > a { transform: scale(1.08); }

/* ---------- Падащите панели при апаратите ----------
   Отварят се само от CSS, защото рендерът пренаписва инлайн стила, а
   класовете остават. */
.mega { position: relative; display: inline-flex; }
.mega-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 19rem; margin-top: 0.55rem; padding: 0.55rem;
  display: grid; gap: 0.15rem;
  background: #FFFFFF; border: 1px solid rgba(184,147,79,0.42); border-radius: 5px;
  box-shadow: 0 22px 48px rgba(160,140,125,0.3);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity 0.25s ease, visibility 0.25s ease, translate 0.25s ease;
  z-index: 96;
}
/* мостче, за да не се затваря панелът между връзката и него */
.mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 0.7rem; }
.mega:hover .mega-panel, .mega:focus-within .mega-panel {
  opacity: 1; visibility: visible; translate: 0 0;
}
/* .mega пред .mega-panel, за да надвие „.patish a“ от menu.css */
.mega .mega-panel a {
  position: relative; display: block; padding: 0.6rem 0.85rem 0.8rem; border-radius: 4px;
  color: #262320; white-space: nowrap; transition: background-color 0.3s ease;
}
.mega .mega-panel a::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.35rem; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s ease;
}
.mega-panel b {
  display: block; font-size: 0.94rem; font-weight: 600; color: #262320;
  transform-origin: left center; transition: transform 0.3s ease, color 0.3s ease;
}
.mega-panel span {
  display: block; font-size: 0.78rem; color: rgba(38,35,32,0.62);
  transition: color 0.3s ease;
}
.mega .mega-panel a:hover, .mega .mega-panel a:focus-visible { background-color: #ECDFCC; }
.mega .mega-panel a:hover::after, .mega .mega-panel a:focus-visible::after,
.mega .mega-panel a[aria-current]::after { transform: scaleX(1); }
.mega-panel a:hover b, .mega-panel a:focus-visible b { transform: scale(1.08); color: #3B2C21; }
.mega-panel a:hover span, .mega-panel a:focus-visible span { color: rgba(38,35,32,0.82); }
.mega .mega-panel a[aria-current] { background-color: rgba(236,223,204,0.55); }
.mega-panel a[aria-current] b { color: #8A6B3F; }
@media (max-width: 1100px) { .mega-panel { display: none; } }

/* ---------- „Апарати за студиа“ ----------
   Всички апарати са в един широк панел. Най-отгоре е HIFU 13D като своя
   категория, под нея са групите в четири колони. Панелът се мери спрямо
   цялата лента, не спрямо връзката: стои центриран под менюто и не излиза
   извън екрана. */
.mega.mega-aparati { position: static; }
.mega.mega-aparati::after { content: none; }
/* мостчето минава от връзката през долното поле на лентата до панела */
.mega.mega-aparati > a::before {
  content: ""; position: absolute; left: -0.8rem; right: -0.8rem; top: 100%; height: 2.2rem;
}
.mega .mega-panel.mega-panel-aparati {
  top: 100%; left: 50%; margin-top: 0;
  width: min(60rem, calc(100vw - 3rem)); min-width: 0;
  padding: 0.9rem; gap: 0.9rem;
}
.mega .mega-panel-aparati a { white-space: normal; }
.mega .mega-panel-aparati a.mega-glaven {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 1.2rem;
  padding: 0.8rem 1rem; background-color: #F8F4ED; border: 1px solid rgba(184,147,79,0.28);
}
.mega .mega-panel-aparati a.mega-glaven:hover, .mega .mega-panel-aparati a.mega-glaven:focus-visible,
.mega .mega-panel-aparati a.mega-glaven[aria-current] { background-color: #ECDFCC; }
.mega .mega-panel-aparati a.mega-glaven::after { display: none; }
.mega-panel-aparati .mega-glaven img { display: block; width: 100%; height: 6.5rem; object-fit: contain; }
.mega-panel-aparati .mega-glaven b {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; font-weight: 500; line-height: 1.15;
}
.mega-panel-aparati .mega-glaven-tekst > span:last-child { margin-top: 0.25rem; font-size: 0.86rem; }
.mega-panel-aparati .mega-kat, .mega-panel-aparati .mega-glaven .mega-kat {
  display: block; padding: 0 0.85rem 0.3rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6B3F;
}
.mega-panel-aparati .mega-glaven .mega-kat { padding: 0 0 0.3rem; }
.mega-panel-aparati .mega-kategorii {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem;
  padding-top: 0.9rem; border-top: 1px solid rgba(184,147,79,0.28);
}
.mega-panel-aparati .mega-kategoria { display: grid; align-content: start; gap: 0.1rem; }

/* ---------- Менюто на телефон ----------
   Редовете влизат един след друг при отваряне. Докоснатият ред става
   тъмнокремав правоъгълник, а линията под него се изпълва със злато.
   Страницата, на която сме, е в злато. Стрелки в редовете няма. */
@keyframes dd-menu-vlizane {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* поотделно, без animation-delay: иначе това по-силно правило нулира
   закъсненията на редовете отдолу */
[data-mmenu] > :not(button):not([aria-label]) {
  animation-name: dd-menu-vlizane;
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  animation-fill-mode: both;
}
[data-mmenu] > :nth-child(3) { animation-delay: 0.03s; }
[data-mmenu] > :nth-child(4) { animation-delay: 0.06s; }
[data-mmenu] > :nth-child(5) { animation-delay: 0.09s; }
[data-mmenu] > :nth-child(6) { animation-delay: 0.12s; }
[data-mmenu] > :nth-child(7) { animation-delay: 0.15s; }
[data-mmenu] > :nth-child(8) { animation-delay: 0.18s; }
[data-mmenu] > :nth-child(9) { animation-delay: 0.21s; }
[data-mmenu] > :nth-child(10) { animation-delay: 0.24s; }
[data-mmenu] > :nth-child(11) { animation-delay: 0.27s; }
[data-mmenu] > :nth-child(12) { animation-delay: 0.3s; }
[data-mmenu] > :nth-child(13) { animation-delay: 0.33s; }
[data-mmenu] > :nth-child(14) { animation-delay: 0.36s; }
[data-mmenu] > :nth-child(15) { animation-delay: 0.39s; }
[data-mmenu] > :nth-child(16) { animation-delay: 0.42s; }
[data-mmenu] > :nth-child(n+17) { animation-delay: 0.45s; }

[data-mmenu] > a:not([aria-label]):not([data-dd-btn]) {
  position: relative; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
[data-mmenu] > a:not([aria-label]):not([data-dd-btn])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s ease;
}

/* натиснат ред: без квадрат и без рамка около текста (Атанас, 10 септември
   2026); личи само по златния текст и линията под него */
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):focus { outline: none; }
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):active,
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):focus-visible { color: #8A6B3F !important; }
@media (hover: hover) {
  [data-mmenu] > a:not([aria-label]):not([data-dd-btn]):hover { color: #8A6B3F !important; }
  [data-mmenu] > a:not([aria-label]):not([data-dd-btn]):hover::after { transform: scaleX(1); }
}
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):active::after,
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]):focus-visible::after,
[data-mmenu] > a[aria-current]:not([aria-label]):not([data-dd-btn])::after { transform: scaleX(1); }

[data-mmenu] > a[aria-current] { color: #8A6B3F !important; }

/* ---------- Групите в менюто на телефон ----------
   „Процедури за жени“, „Цени и оферти“ и групите апарати са затворени и се
   разгъват при натискане на заглавието им; отворена е една група наведнъж,
   а групата със страницата, на която сме, е отворена от началото. Вдясно
   е кръгче със стрелка надолу, която се обръща нагоре, щом групата се
   отвори (плюсът не пасваше). Поведението е в navigacia.js. */
[data-mmenu] .dd-mm-glava {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; margin: 0; padding: 0.72rem 0;
  border: 0; border-bottom: 1px solid rgba(184,147,79,0.5); border-radius: 0;
  background: none; color: #262320; cursor: pointer; text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 400; line-height: 1.25;
  -webkit-tap-highlight-color: transparent; transition: color 0.25s ease;
}
[data-mmenu] .dd-mm-glava:focus { outline: none; }
[data-mmenu] .dd-mm-otvorena > .dd-mm-glava,
[data-mmenu] .dd-mm-grupa:has(a[aria-current]) > .dd-mm-glava { color: #8A6B3F; }
/* същото кръгче със стрелка като при разгъващите се карти на началната */
.dd-mm-znak {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border: 1px solid rgba(184,147,79,0.6); border-radius: 50%;
}
.dd-mm-znak::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-right: 1.5px solid #B8934F; border-bottom: 1.5px solid #B8934F;
  transform: translateY(-2.8px) rotate(45deg); transition: transform 0.35s ease;
}
.dd-mm-otvorena .dd-mm-znak::before { transform: translateY(2.8px) rotate(225deg); }
.dd-mm-vatre { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
.dd-mm-vatre > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.32s; }
.dd-mm-otvorena .dd-mm-vatre { grid-template-rows: 1fr; }
.dd-mm-otvorena .dd-mm-vatre > div { visibility: visible; transition-delay: 0s; }
/* редовете в групата са по-дребни и отместени, за да личи чии са */
[data-mmenu] .dd-mm-vatre a {
  position: relative; display: flex !important; align-items: center;
  margin: 0 !important; padding: 0.62rem 0 0.62rem 0.9rem !important;
  border-bottom: 1px solid rgba(184,147,79,0.28) !important;
  font-family: 'Manrope', 'Segoe UI', sans-serif !important; font-size: 1.02rem !important;
  line-height: 1.4 !important; color: #3B2C21 !important;
  -webkit-tap-highlight-color: transparent;
}
[data-mmenu] .dd-mm-vatre a:focus { outline: none; }
[data-mmenu] .dd-mm-vatre a::after {
  content: ""; position: absolute; left: 0.9rem; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #E4C98F, #B8934F 55%, #8A6B3F);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease;
}
[data-mmenu] .dd-mm-vatre a[aria-current], [data-mmenu] .dd-mm-vatre a:active { color: #8A6B3F !important; }
[data-mmenu] .dd-mm-vatre a[aria-current]::after, [data-mmenu] .dd-mm-vatre a:active::after { transform: scaleX(1); }
/* Всеки ред от първо ниво е в стила на заглавията на групите: едър
   Cormorant с линия отдолу. „Блог“, „Контакти“, „Обучения“ и „За Denny
   Divine“ бяха с дребен шрифт без линия и стояха невзрачно под групите
   (Атанас, 14 септември 2026). Инлайн стилът им се надвива с !important. */
[data-mmenu] > a:not([aria-label]):not([data-dd-btn]) {
  display: flex !important; align-items: center; margin: 0 !important; padding: 0.72rem 0 !important;
  border-bottom: 1px solid rgba(184,147,79,0.5) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1.7rem !important;
  font-weight: 400 !important; line-height: 1.25 !important;
}
[data-mmenu] > a.dd-mm-red:not([aria-current]) { color: #262320 !important; }

/* категориите в групата „Апарати за студиа“: колкото редовете под тях,
   в злато и по-плътни, без дребни главни букви */
[data-mmenu] .dd-mm-vatre .dd-mm-kat {
  display: block; padding: 1rem 0 0.3rem 0.9rem;
  font-family: 'Manrope', 'Segoe UI', sans-serif; font-size: 1.02rem; font-weight: 600;
  line-height: 1.4; color: #8A6B3F;
}
[data-mmenu] .dd-mm-vatre .dd-mm-kat:first-child { padding-top: 0.7rem; }


/* ---------- „Процедури“ на студиото ----------
   Две категории една до друга: „Процедури за жени“ и „Процедури за мъже“,
   като „Апарати“ на hifubg. Панелът стои под връзката. */
.mega .mega-panel.mega-panel-procedury {
  width: min(36rem, calc(100vw - 3rem)); min-width: 0; padding: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
}
.mega .mega-panel-procedury a { white-space: normal; }
.mega-panel-procedury .mega-kat {
  display: block; padding: 0 0.85rem 0.3rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6B3F;
}
.mega-panel-procedury .mega-kategoria { display: grid; align-content: start; gap: 0.1rem; }

/* ---------- Езикът: BG | EN ----------
   Горе до златния бутон, а на телефон в лентата до бургера (в разгънатото
   меню го няма). Тънка златна рамка, а избраният език е в тъмнокремаво
   поле, както избраните редове в менюто: личи, че е друг елемент, а не още
   една връзка (Атанас, 14 септември 2026: сливаше се с текстовете; знакът
   за език отпадна, без него е по-красиво). */
.ezik {
  display: inline-flex; align-items: center; flex: none; gap: 2px;
  padding: 3px; border: 1px solid rgba(184,147,79,0.6); border-radius: 5px;
  background: #FFFFFF;
}
.ezik a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; padding: 0.22rem 0.5rem !important; margin: 0 !important;
  border: 0 !important; border-radius: 3px; background: transparent;
  font-family: 'Manrope', 'Segoe UI', sans-serif !important; font-size: 0.76rem !important;
  font-weight: 700 !important; letter-spacing: 0.12em !important; line-height: 1.3 !important;
  color: rgba(59,44,33,0.55) !important; text-decoration: none; white-space: nowrap;
  transform: none !important; transition: color 0.3s ease, background-color 0.3s ease;
}
.ezik a:hover, .ezik a:focus-visible { color: #8A6B3F !important; }
.ezik a[aria-current] { background: #ECDFCC; color: #3B2C21 !important; }
.ezik a::after { content: none !important; }
/* в лентата на телефон: вдясно, до бургера, само когато бургерът се вижда.
   Бургерът на страниците с рендера има свое margin-left: auto и двата
   деляха празното място, затова превключвателят оставаше по средата. */
.ezik.ezik--mobilno { display: none; }
@media (max-width: 1300px) {
  .ezik.ezik--mobilno { display: inline-flex; margin-left: auto; margin-right: -0.6rem; }
  .ezik.ezik--mobilno + [data-burger], .ezik.ezik--mobilno + .burger { margin-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-mm-vatre, .dd-mm-znak::before { transition: none !important; }
  [data-mmenu] > * { animation: none !important; }
  [data-navpaths] a::after, .patish a::after, .mega-panel a::after,
  [data-mmenu] a::after, .mega-panel b { transition: none !important; }
}