/* ==========================================================================
   COMPONENTS.CSS – Бутони, Карти, Форми, Навигация, Чипове
   ========================================================================== */

/* ─── Buttons ───
   Fluid fill: кръг, който „избликва" от точката на влизане на курсора
   (--btn-mx/--btn-my се задават от nav.js). Само transform → GPU-friendly.
   Цветовете са подбрани така, че текстът остава ≥ 4.5:1 и върху fill-а. */
.btn {
  --btn-fill: color-mix(in srgb, #000 14%, transparent);
  --btn-mx: 50%;
  --btn-my: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;              /* съдържа fill кръга (z-index:-1) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  line-height: var(--font-label-sm-line-height);
  letter-spacing: var(--font-label-sm-letter-spacing);
  border-radius: var(--radius-full);
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-slow), transform var(--transition-spring);
}

.btn::before {
  content: '';
  position: absolute;
  left: var(--btn-mx);
  top: var(--btn-my);
  width: 250%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0);
  border-radius: var(--radius-full);
  background: var(--btn-fill);
  z-index: -1;
  pointer-events: none;
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  /* по-светло зелено се влива в тъмнозеленото – бяло ≥ 5.5:1 и в двата цвята */
  --btn-fill: var(--color-secondary);
  background-color: var(--color-primary-dark);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  --btn-fill: var(--color-secondary-container);
  background-color: transparent;
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-outline);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--color-primary);
}

.btn-outline {
  --btn-fill: var(--color-secondary-container);
  background-color: transparent;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary-dark);
}

.btn-sm {
  padding: 10px 24px;
}

.btn-lg {
  padding: 16px 40px;
  font-size: var(--font-body-md-size);
}

.btn-full {
  width: 100%;
}

/* Движение + fluid bloom само при разрешено движение */
@media (prefers-reduced-motion: no-preference) {
  .btn::before {
    transition: transform var(--transition-fluid);
  }

  .btn:hover::before,
  .btn:focus-visible::before {
    transform: translate(-50%, -50%) scale(1);
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn-primary:hover {
    box-shadow: var(--shadow-primary-glow);
  }
}

/* Reduced-motion fallback: без bloom/lift – мигновена смяна на фона */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-primary:focus-visible {
    background-color: var(--color-secondary);
  }

  .btn-secondary:hover,
  .btn-secondary:focus-visible,
  .btn-outline:hover,
  .btn-outline:focus-visible {
    background-color: var(--color-secondary-container);
  }
}

/* ─── Header / Navigation ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  background-color: rgba(248, 250, 248, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-surface-container-high);
  /* Отделен преход за transform (скриване) от бавния за фон/сянка */
  transition: box-shadow var(--transition-slow),
    background-color var(--transition-slow),
    transform var(--transition-slow);
  /* Съдържанието слиза под notch-а на iOS */
  padding-top: env(safe-area-inset-top, 0px);
}

/* По-плътен фон, когато backdrop-filter не се поддържа */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background-color: rgba(248, 250, 248, 0.98);
  }
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

/* „Скрий при скрол надолу" – класът се управлява от nav.js (всички устройства) */
.site-header.header-hidden {
  transform: translateY(-100%);
  will-change: transform;
}

/* Кондензиран хедър след ~80px скрол: по-нисък, по-плътен фон, по-малко лого.
   Класът .condensed се добавя от nav.js. */
.site-header.condensed {
  background-color: rgba(248, 250, 248, 0.96);
}

.site-header.condensed .header-inner {
  padding-top: 6px;
  padding-bottom: 6px;
}

.site-header.condensed .header-logo__mark {
  transform: scale(0.86);
}

.site-header.condensed .header-logo__name {
  font-size: 19px;
}

.site-header.condensed .header-logo__sub {
  font-size: 11px;
}

/* Плавното кондензиране само при разрешено движение (иначе – мигновено) */
@media (prefers-reduced-motion: no-preference) {
  .header-inner,
  .header-logo__name,
  .header-logo__sub {
    transition: padding var(--transition-base), font-size var(--transition-base);
  }
}

/* ─── Прозрачен хедър над full-bleed hero-а ───
   На върха (преди .scrolled) логото и навигацията стават светли; при скрол
   (.scrolled) хедърът се връща плътен. Важи за началната страница и за всяка
   подстраница с .has-hero (компактния hero тръгва под прозрачния хедър). */
body[data-page="home"] .site-header:not(.scrolled),
body.has-hero .site-header:not(.scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-page="home"] .site-header:not(.scrolled) .header-logo__name,
body[data-page="home"] .site-header:not(.scrolled) .nav-link,
body[data-page="home"] .site-header:not(.scrolled) .menu-toggle,
body.has-hero .site-header:not(.scrolled) .header-logo__name,
body.has-hero .site-header:not(.scrolled) .nav-link,
body.has-hero .site-header:not(.scrolled) .menu-toggle {
  color: #ffffff;
  /* защитно: чете се и върху ярка снимка, не само върху тъмната */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body[data-page="home"] .site-header:not(.scrolled) .header-logo__sub,
body.has-hero .site-header:not(.scrolled) .header-logo__sub {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Бял знак-чип + drop-shadow на hamburger лентите за същата защита */
body[data-page="home"] .site-header:not(.scrolled) .menu-toggle__box,
body.has-hero .site-header:not(.scrolled) .menu-toggle__box {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

body[data-page="home"] .site-header:not(.scrolled) .nav-link::after,
body.has-hero .site-header:not(.scrolled) .nav-link::after {
  background: #ffffff;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
  /* Уважава страничните safe-area зони в landscape на notched устройства */
  padding-left: max(var(--space-lg), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-lg), env(safe-area-inset-right, 0px));
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Isolates just the foot/leaf mark from the vertical lockup PNG.
   Background url() is resolved relative to THIS stylesheet (assets/css/),
   so it works from every page, incl. /uslugi/ – no path rewriting needed. */
.header-logo__mark {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background-image: url('../img/logo-light.png');
  background-repeat: no-repeat;
  background-size: 92px 80px;
  background-position: -23px -4px;
  transition: transform var(--transition-spring);
}

.header-logo:hover .header-logo__mark {
  transform: rotate(-4deg) scale(1.04);
}

.header-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.header-logo__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Тъмнозелено вместо --color-primary: последното пада ~2.5:1 на светлия
     хедър (#f8faf8) и къса WCAG AA. --color-primary-dark държи ~7:1. */
  color: var(--color-primary-dark);
}

.header-logo__sub {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  /* --color-primary-light е ~1.7:1 на светъл фон – сменен със --color-secondary
     (~6:1) за да мине AA за дребния текст. */
  color: var(--color-secondary);
  margin-top: 3px;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Линковете ползват display шрифта за по-„бутиков" вид, с плъзгащ подчерк */
.nav-link {
  position: relative;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-on-surface-variant);
  padding: 6px 4px;
  transition: color var(--transition-base);
}

/* Градиентен подчерк – расте от центъра навън при hover / active */
.nav-link::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transform: scaleX(0);
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-link::after {
    transition: transform 360ms var(--ease-fluid);
  }
}

.nav-link:hover {
  color: var(--color-primary-dark);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

.nav-link--active {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.nav-link--active::after {
  transform: scaleX(1);
}

.header-cta {
  padding: 12px 24px;
}

/* ─── Mobile Menu Toggle (CSS-drawn bars → X, no icon font) ─── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary-dark);
  cursor: pointer;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle__box {
  position: relative;
  display: block;
  width: 26px;
  height: 20px;
}

.menu-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  transform-origin: center;
  transition: transform var(--transition-spring), opacity var(--transition-fast),
    top var(--transition-base);
}

.menu-toggle__bar:nth-child(1) { top: 0; }
.menu-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle__bar:nth-child(3) { top: 100%; transform: translateY(-100%); }

/* Отворено състояние: горна и долна лента → X, средната изчезва.
   Управлява се единствено от aria-expanded (single source of truth в JS). */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.4);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Бутонът „затвори" в панела е винаги в X-форма */
.menu-toggle__box--x .menu-toggle__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-toggle__box--x .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle__box--x .menu-toggle__bar:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ─── Mobile Menu Overlay ─── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 28, 27, 0.5);
  z-index: var(--z-mobile-menu);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 360px;
  height: 100vh;      /* fallback за стари браузъри */
  height: 100dvh;     /* следва динамичния viewport (адрес лентата на телефона) */
  background-color: var(--color-surface-container-lowest);
  z-index: calc(var(--z-mobile-menu) + 1);
  transition: right var(--transition-slow);
  /* Клиентите на менюто (X, CTA) остават извън notch/home-indicator зоните */
  padding:
    calc(var(--space-xl) + env(safe-area-inset-top, 0px))
    var(--space-md)
    calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-close {
  position: absolute;
  top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
  right: var(--space-md);
  background: none;
  border: none;
  color: var(--color-primary-dark);
  cursor: pointer;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-link {
  display: block;
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
  color: var(--color-on-surface);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-surface-variant);
  transition: color var(--transition-base);
}

.mobile-nav-link:hover,
.mobile-nav-link--active {
  color: var(--color-primary-dark);
}

/* ─── Seamless text reveal ───
   Връзките се появяват плавно и стъпаловидно, след като панелът се плъзне. */
.mobile-menu .mobile-nav-link,
.mobile-menu .btn {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow),
    color var(--transition-base);
}

.mobile-menu.active .mobile-nav-link,
.mobile-menu.active .btn {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu.active .mobile-nav-link:nth-child(2) { transition-delay: 0.09s; }
.mobile-menu.active .mobile-nav-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-nav-link:nth-child(4) { transition-delay: 0.21s; }
.mobile-menu.active .mobile-nav-link:nth-child(5) { transition-delay: 0.27s; }
.mobile-menu.active .mobile-nav-link:nth-child(6) { transition-delay: 0.33s; }
.mobile-menu.active .btn { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  /* Без завъртане на лентите, без стъпаловидно появяване */
  .menu-toggle__bar,
  .mobile-menu .mobile-nav-link,
  .mobile-menu .btn {
    transition: none;
  }

  .mobile-menu .mobile-nav-link,
  .mobile-menu .btn {
    opacity: 1;
    transform: none;
  }
}

/* ─── Footprint Trail (homepage services – виеща се пътека от стъпки) ───
   Четирите категории стъпват надолу по пътека. Всяко стъпало си носи акцента
   чрез --step-accent / --step-tint; горните две са в наситената зелено-синя
   палитра, долните две – в меките пастели (двете лица на бранда). Стъпалата се
   редуват ляво/дясно, а между тях „вървят" стъпки (foot-mark.svg като маска,
   оцветена с акцента). Всяко стъпало се „запълва" с fluid-fill при reveal
   (.animate-fade-in от nav.js) или при hover. */
.footprint-trail {
  --step-accent: var(--accent-therapy-deep);
  --step-tint: var(--tint-green);
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.foot-step--therapy    { --step-accent: var(--accent-therapy-deep);    --step-tint: var(--tint-green); }
.foot-step--corrective { --step-accent: var(--accent-corrective-deep); --step-tint: var(--tint-blue); }
.foot-step--pedicure   { --step-accent: var(--accent-pedicure-deep);   --step-tint: var(--tint-lavender); }
.foot-step--manicure   { --step-accent: var(--accent-manicure-deep);   --step-tint: var(--tint-pink); }

.foot-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-md);
}

/* Стъпалата се редуват – платната сядат от външната страна, стъпалата
   „пад" гравитират към центъра, за да опишат виещата се пътека. */
.foot-step--left  .foot-step__pad  { grid-column: 1; justify-self: end; }
.foot-step--left  .foot-step__card { grid-column: 2; }
.foot-step--right .foot-step__pad  { grid-column: 2; justify-self: start; }
.foot-step--right .foot-step__card { grid-column: 1; text-align: right; }

/* „Пад"-ът: органичен възел с категорийната илюстрация, който се запълва */
.foot-step__pad {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-shrink: 0;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-blob);
  background-color: color-mix(in srgb, var(--step-tint) 70%, #ffffff);
  border: 1.5px solid color-mix(in srgb, var(--step-accent) 20%, transparent);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-slow), border-color var(--transition-base),
    transform var(--transition-spring);
}

.foot-step__pad img {
  width: 68px;
  height: 68px;
  pointer-events: none;
}

/* fluid-fill: акцентна вълна, която блика и „активира" стъпалото */
.foot-step__pad::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--step-accent) 24%, #ffffff);
  transform: scale(0);
  transform-origin: center;
}

.foot-step.animate-fade-in .foot-step__pad::before,
.foot-step__pad:hover::before {
  transform: scale(1);
}

.foot-step.animate-fade-in .foot-step__pad,
.foot-step:hover .foot-step__pad {
  border-color: color-mix(in srgb, var(--step-accent) 45%, transparent);
  box-shadow: var(--shadow-hover),
    0 14px 40px -12px color-mix(in srgb, var(--step-accent) 45%, transparent);
}

/* Платно на стъпалото */
.foot-step__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.foot-step__index {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--step-accent);
}

.foot-step__title {
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
  color: var(--color-on-surface);
}

.foot-step__text {
  font-size: var(--font-body-md-size);
  color: var(--color-on-surface-variant);
}

.foot-step__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: var(--space-xs);
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: var(--font-label-sm-letter-spacing);
  color: var(--step-accent);
  transition: gap var(--transition-base);
}

.foot-step--right .foot-step__link { align-self: flex-end; }
.foot-step__link:hover { gap: 8px; }
.foot-step__link .material-symbols-outlined { font-size: 16px; }

/* Свързващи стъпки в пролуката – два отпечатъка (foot-mark.svg маска),
   оцветени с акцента, леко изместени, за да „вървят" надолу и да завиват. */
.foot-step::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: var(--space-lg);
  background-color: color-mix(in srgb, var(--step-accent) 55%, transparent);
  -webkit-mask:
    url('../img/foot-mark.svg') no-repeat 62% 2px / 18px 24px,
    url('../img/foot-mark.svg') no-repeat 38% 22px / 18px 24px;
  mask:
    url('../img/foot-mark.svg') no-repeat 62% 2px / 18px 24px,
    url('../img/foot-mark.svg') no-repeat 38% 22px / 18px 24px;
  pointer-events: none;
}

.foot-step:last-child::after { display: none; }

/* Reveal-ефекти само при разрешено движение (иначе – мигновено, виж layout.css) */
@media (prefers-reduced-motion: no-preference) {
  .foot-step__pad::before {
    transition: transform var(--transition-fluid);
  }

  .foot-step:hover .foot-step__pad {
    transform: translateY(-4px) rotate(-2deg);
  }

  /* Свързващите стъпки „се появяват" отгоре надолу при reveal */
  .js .foot-step::after {
    clip-path: inset(0 0 100% 0);
  }

  .js .foot-step.animate-fade-in::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.9s var(--ease-fluid) 0.15s;
  }
}

@media (max-width: 680px) {
  .footprint-trail {
    gap: var(--space-md);
  }

  .foot-step {
    grid-template-columns: 84px 1fr;
    gap: var(--space-md);
  }

  /* На тесни екрани всичко се подравнява отляво – падът горе, платното вдясно */
  .foot-step--left  .foot-step__pad,
  .foot-step--right .foot-step__pad {
    grid-column: 1;
    justify-self: center;
  }

  .foot-step--left  .foot-step__card,
  .foot-step--right .foot-step__card {
    grid-column: 2;
    text-align: left;
  }

  .foot-step--right .foot-step__link,
  .foot-step--left  .foot-step__link { align-self: flex-start; }

  .foot-step__pad {
    width: 84px;
    height: 84px;
  }

  .foot-step__pad img {
    width: 50px;
    height: 50px;
  }

  /* Свързващите стъпки минават под пада (център ≈ 42px) */
  .foot-step::after {
    left: 42px;
  }
}

/* ─── Service Detail Card (procedure list on service pages) ───
   Акцентът се управлява от --sd-accent / --sd-tint (по подразбиране зелено;
   сменя се от .service-list--<категория> на секцията). Списъкът е grid от
   „чип-карти" с икона – подчертава услугите вместо гол текстов списък. */
.service-detail-card {
  --sd-accent: var(--color-primary-dark);
  --sd-tint: var(--tint-green);
  --sd-tint-2: var(--tint-blue);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--sd-tint), var(--sd-tint-2));
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  border: 1px solid var(--color-surface-container-lowest);
  box-shadow: var(--shadow-md);
}

.service-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.service-detail-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--sd-accent);
}

/* Accent icon badge before each procedure */
.service-detail-item::before {
  content: 'spa';
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-blob);
  color: var(--sd-accent);
  background-color: color-mix(in srgb, var(--sd-accent) 12%, #ffffff);
}

.service-detail-item__name {
  font-size: var(--font-body-md-size);
  font-weight: 500;
  color: var(--color-on-surface);
  line-height: 1.3;
}

/* Категорийни акценти + тематична икона за списъка с процедури */
.service-list--therapy   { --sd-accent: var(--accent-therapy-deep);   --sd-tint: var(--tint-green);    --sd-tint-2: var(--tint-blue); }
.service-list--corrective{ --sd-accent: var(--accent-corrective-deep);--sd-tint: var(--tint-blue);     --sd-tint-2: var(--tint-lavender); }
.service-list--pedicure  { --sd-accent: var(--accent-pedicure-deep);  --sd-tint: var(--tint-lavender); --sd-tint-2: var(--tint-pink); }
.service-list--manicure  { --sd-accent: var(--accent-manicure-deep);  --sd-tint: var(--tint-pink);     --sd-tint-2: var(--tint-ochre); }

.service-list--therapy    .service-detail-item::before { content: 'health_and_safety'; }
.service-list--corrective .service-detail-item::before { content: 'healing'; }
.service-list--pedicure   .service-detail-item::before { content: 'spa'; }
.service-list--manicure   .service-detail-item::before { content: 'brush'; }

/* ─── „За кого е" callout (подстраници с услуги) ───
   Едноредова рамкираща реплика близо до върха – казва на посетителя дали
   услугата е за него, преди да чете плътния списък. Акцентът идва от
   .service-list--<категория> върху същия елемент (--sd-accent). */
.who-for {
  --sd-accent: var(--color-primary-dark);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto var(--space-lg);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--sd-accent);
  background: color-mix(in srgb, var(--sd-accent) 8%, #ffffff);
  color: var(--color-on-surface);
  font-size: var(--font-body-md-size);
  line-height: 1.5;
}

.who-for .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--sd-accent);
  margin-top: 1px;
}

.who-for strong {
  color: var(--sd-accent);
  font-weight: 600;
}

/* ─── Treatment list (плътен списък с line-item процедури + разгъване) ───
   Всеки ред е native <details> – без JS, достъпно. Затворен: line-icon +
   име + „+". Отворен: кратко „какво да очаквам". Акцентът идва от
   .service-list--<категория> (--sd-accent). */
.treatment-list {
  --sd-accent: var(--color-primary-dark);
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treatment {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.treatment:hover {
  border-color: color-mix(in srgb, var(--sd-accent) 40%, var(--color-surface-variant));
}

.treatment[open] {
  border-color: color-mix(in srgb, var(--sd-accent) 45%, transparent);
  box-shadow: var(--shadow-md);
}

.treatment > summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.treatment > summary::-webkit-details-marker { display: none; }

/* Line-icon значка в органична форма, в тона на категорията */
.treatment__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-blob);
  color: var(--sd-accent);
  background-color: color-mix(in srgb, var(--sd-accent) 12%, #ffffff);
}

.treatment__icon svg {
  width: 22px;
  height: 22px;
}

.treatment__name {
  flex-grow: 1;
  font-size: var(--font-body-md-size);
  font-weight: 500;
  color: var(--color-on-surface);
  line-height: 1.3;
}

/* „+", който се завърта на „×" при отваряне (както във FAQ) */
.treatment > summary::after {
  content: 'add';
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--sd-accent);
  transition: transform var(--transition-slow);
}

.treatment[open] > summary::after { transform: rotate(45deg); }

.treatment:hover .treatment__name { color: var(--sd-accent); }

.treatment__detail {
  margin: 0;
  padding: 0 16px 14px 68px;   /* подравнено под името, извън иконата */
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-md-size);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .treatment > summary::after { transition: none; }
}

@media (max-width: 480px) {
  .treatment__detail { padding-left: 16px; }
}

/* ─── Chips / Badges ─── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: var(--font-label-sm-letter-spacing);
}

/* Категорийни цветове по брандбука:
   терапия = зелено, корекция = синьо, педикюр = лилаво, маникюр = розово */
.chip--medical {
  background-color: var(--accent-therapy-tint);
  color: var(--accent-therapy-deep);
}

.chip--specialized {
  background-color: var(--accent-corrective-tint);
  color: var(--accent-corrective-deep);
}

.chip--relax {
  background-color: var(--accent-pedicure-tint);
  color: var(--accent-pedicure-deep);
}

.chip--aesthetic {
  background-color: var(--accent-manicure-tint);
  color: var(--accent-manicure-deep);
}

.chip--health {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.chip .material-symbols-outlined {
  font-size: 14px;
}

/* ─── Contact Info Items ─── */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary-container);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item__label {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.contact-item__value {
  font-size: var(--font-body-md-size);
  color: var(--color-on-surface-variant);
  margin-top: 4px;
}

/* ─── Quick Contact (direct call/Viber/email, no form) ─── */
.quick-contact-card {
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-md);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-surface-variant);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quick-contact-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: 4px;
}

.contact-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-surface-variant);
  background-color: var(--color-surface-bright);
  text-decoration: none;
  transition: all var(--transition-base);
}

.contact-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: currentColor;
}

/* Подчерт, който „се запълва" от центъра при focus/hover – в тона на картата
   (Viber=лилаво, имейл=терт., обаждане=основен). Отговаря на fluid ефекта. */
.contact-cta::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: var(--radius-full);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
}

.contact-cta:hover::after,
.contact-cta:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .contact-cta::after {
    transition: transform 360ms var(--ease-fluid);
  }
}

.contact-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary-container);
  color: var(--color-primary-dark);
}

.contact-cta__text {
  display: flex;
  flex-direction: column;
}

.contact-cta__text strong {
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
  color: var(--color-on-surface);
}

.contact-cta__text span {
  font-size: var(--font-body-md-size);
  color: var(--color-on-surface-variant);
}

.contact-cta--viber {
  color: #7360F2;
}

.contact-cta--viber .contact-cta__icon {
  background-color: #7360F2;
  color: #ffffff;
}

.contact-cta--email {
  color: var(--color-tertiary);
}

.contact-cta--email .contact-cta__icon {
  background-color: var(--color-tertiary-fixed);
  color: var(--color-tertiary);
}

/* ─── Gallery ─── */
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.gallery-item:hover {
  box-shadow: var(--shadow-lg);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-base), transform var(--transition-slow);
}

/* Надпис, който изплува при hover/focus над снимката */
.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-sm) var(--space-md);
  color: #ffffff;
  font-size: var(--font-label-sm-size);
  font-weight: 600;
  letter-spacing: var(--font-label-sm-letter-spacing);
  background: linear-gradient(0deg, rgba(9, 58, 38, 0.9) 0%, rgba(9, 58, 38, 0) 100%);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-item__caption {
    transition: opacity var(--transition-base), transform var(--transition-base);
  }
}

.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-within .gallery-item__caption {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-item:hover {
    transform: translateY(-4px);
  }

  .gallery-item:hover img {
    opacity: 0.9;
    transform: scale(1.03);
  }
}

/* ─── Lightbox ─── */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 28, 27, 0.9);
  z-index: var(--z-lightbox);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.lightbox.active {
  display: flex;
}

.lightbox__image {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav--prev {
  left: var(--space-md);
}

.lightbox__nav--next {
  right: var(--space-md);
}

/* ─── Footer (immersive deep-green „night-garden" spa moment) ───
   Тъмнозелен градиент с органичен листо-вълнов crest и листов воден знак.
   Целият текст стои върху достатъчно тъмно зелено → бяло ≥ 4.5:1 (WCAG AA). */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  color: #ffffff;
  /* горният отстъп разчиства органичния crest (виж .footer-crest) */
  padding: calc(70px + var(--space-lg)) var(--space-lg) var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(60% 80% at 88% 8%, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 60%),
    linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary-dark) 72%);
}

/* Органичен листо-вълнов crest – светло зелено (#90CFAA) → тъмнозелено (#2c694b),
   безшевно се слива с върха на футъра. Инлайн SVG живее в footer.html. */
.footer-crest {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Голям листов воден знак в долния ъгъл – ехо от логото */
.site-footer::before {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -60px;
  width: 360px;
  height: 360px;
  background: url('../img/leaf.svg') no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ── Pre-footer CTA (frosted стъклен панел върху тъмното) ── */
.footer-cta {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto var(--space-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

/* Мек органичен акцент в ъгъла на панела */
.footer-cta::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-blob);
  background-color: #ffffff;
  opacity: 0.06;
  pointer-events: none;
}

.footer-cta__text {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.footer-cta__text h2 {
  color: #ffffff;
  margin-bottom: var(--space-xs);
}

.footer-cta__text p {
  color: rgba(255, 255, 255, 0.85);
}

.footer-cta .btn-primary {
  /* бял бутон върху тъмното → fill-ът блика в мента (тъмен текст ≈ 7:1) */
  --btn-fill: var(--color-secondary-fixed);
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.footer-cta .btn-primary:hover {
  box-shadow: var(--shadow-lg);
}

/* Reduced-motion: мигновена мента (пази контраста на белия бутон) */
@media (prefers-reduced-motion: reduce) {
  .footer-cta .btn-primary:hover,
  .footer-cta .btn-primary:focus-visible {
    background-color: var(--color-secondary-fixed);
  }
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: left;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.footer-logo__mark {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  /* Прозрачният lockup (logo-light.png) се кропва до знака и сяда върху бял
     органичен „чип" – зеленият знак изпъква на тъмнозеления футър.
     (logo-dark.png има вграден плътен зелен фон и не става за кроп.)
     Размерът е същият като на хедъра: 46px кутия → 92px 80px / -23px -4px. */
  background-color: #ffffff;
  border-radius: var(--radius-blob);
  background-image: url('../img/logo-light.png');
  background-repeat: no-repeat;
  background-size: 92px 80px;
  background-position: -23px -4px;
  transition: transform var(--transition-spring);
}

/* Същият „tilt" ефект като в хедъра при hover върху логото */
.footer-logo:hover .footer-logo__mark {
  transform: rotate(-4deg) scale(1.04);
}

.footer-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.footer-logo__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.footer-logo__sub {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--color-secondary-fixed);
  margin-top: 4px;
}

.footer-brand p {
  font-size: var(--font-body-md-size);
  color: rgba(255, 255, 255, 0.9);
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-slow);
}

.social-icon:hover {
  background-color: #ffffff;
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.footer-column h3 {
  font-size: var(--font-title-md-size);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: var(--space-sm);
}

.footer-column a {
  display: block;
  font-size: var(--font-body-md-size);
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 0;
  transition: color var(--transition-base);
}

.footer-column a:hover {
  color: var(--color-secondary-fixed);
}

.footer-contact {
  font-style: normal; /* нулира курсива по подразбиране на <address> */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-body-md-size);
  padding: 4px 0;
  transition: color var(--transition-base);
}

/* Кликаемите контакти (тел./имейл) получават hover обратна връзка */
a.footer-contact-item:hover {
  color: #ffffff;
}

a.footer-contact-item:hover .material-symbols-outlined {
  color: #ffffff;
}

.footer-contact-item .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--color-secondary-fixed);
  transition: color var(--transition-base);
}

/* Многоредови елементи (адрес, работно време): иконата остава горе */
.footer-contact-item--static {
  align-items: flex-start;
}

.footer-contact-item--static .material-symbols-outlined {
  margin-top: 3px;
}

.footer-hours {
  line-height: 1.5;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-base);
}

.footer-bottom a:hover {
  color: var(--color-secondary-fixed);
}

.footer-bottom p {
  font-size: var(--font-body-md-size);
  color: rgba(255, 255, 255, 0.85);
}

/* ─── Trust Badges (hero) ─── */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: var(--font-label-sm-letter-spacing);
  color: var(--color-on-surface-variant);
}

.trust-badge .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-primary-dark);
}

/* ─── Center Cards (двете „лица" на бранда) ─── */
.center-card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.center-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.center-card--therapeutic {
  --center-accent: var(--accent-therapy-deep);
  background: linear-gradient(135deg, var(--tint-green), var(--tint-blue));
}

.center-card--aesthetic {
  --center-accent: var(--accent-manicure-deep);
  background: linear-gradient(135deg, var(--tint-pink), var(--tint-lavender));
}

.center-card::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-blob);
  background-color: currentColor;
  color: var(--center-accent);
  opacity: 0.08;
  pointer-events: none;
}

.center-card__eyebrow {
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--center-accent);
}

.center-card__title {
  font-size: var(--font-headline-lg-size);
  font-weight: var(--font-headline-lg-weight);
}

.center-card__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
  /* Fill the space between title and links so uneven list lengths
     across the two cards distribute whitespace evenly, not as one gap. */
  flex-grow: 1;
}

.center-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-on-surface);
}

.center-card__list .material-symbols-outlined {
  font-size: 20px;
  color: var(--center-accent);
  margin-top: 2px;
}

.center-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
}

.center-card__links .btn {
  /* fill в много светъл тон на акцента – текстът (акцентът) остава четим */
  --btn-fill: color-mix(in srgb, var(--center-accent) 16%, #ffffff);
  background-color: var(--color-surface-container-lowest);
  color: var(--center-accent);
  box-shadow: var(--shadow-sm);
}

.center-card__links .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ─── Value Cards (За нас – номерирани, с категориен акцент) ─── */
.value-card {
  --v-accent: var(--color-primary-dark);
  --v-tint: var(--color-secondary-container);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-slow), border-color var(--transition-base);
}

.value-card--1 { --v-accent: var(--accent-therapy-deep);    --v-tint: var(--accent-therapy-tint); }
.value-card--2 { --v-accent: var(--accent-corrective-deep); --v-tint: var(--accent-corrective-tint); }
.value-card--3 { --v-accent: var(--accent-manicure-deep);   --v-tint: var(--accent-manicure-tint); }

/* Голям светъл номер в ъгъла */
.value-card__num {
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 60px;
  line-height: 1;
  color: var(--v-accent);
  opacity: 0.16;
  pointer-events: none;
}

.value-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-blob);
  background-color: var(--v-tint);
  color: var(--v-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-card__title {
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
  color: var(--color-on-surface);
}

.value-card__text {
  font-size: var(--font-body-md-size);
  color: var(--color-on-surface-variant);
}

.value-card:hover {
  border-color: var(--v-accent);
  box-shadow: var(--shadow-hover),
    0 14px 44px -10px color-mix(in srgb, var(--v-accent) 40%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .value-card {
    transition: transform var(--transition-slow), box-shadow var(--transition-slow),
      border-color var(--transition-base);
  }
  .value-card:hover {
    transform: translateY(-6px);
  }
}

/* ─── Step Cards („Как протича посещението") ─── */
.step-card {
  --step-accent: var(--accent-therapy-deep);
  --step-accent-tint: var(--accent-therapy-tint);
  position: relative;
  text-align: center;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.step-card--2 {
  --step-accent: var(--accent-corrective-deep);
  --step-accent-tint: var(--accent-corrective-tint);
}

.step-card--3 {
  --step-accent: var(--color-ochre-deep);
  --step-accent-tint: var(--tint-ochre);
}

.step-card__number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--step-accent);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--step-accent-tint);
  border-radius: var(--radius-blob);
}

.step-card__title {
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
}

.step-card__text {
  font-size: var(--font-body-md-size);
  color: var(--color-on-surface-variant);
  max-width: 300px;
}

/* ─── FAQ (native details/summary, без JS) ─── */
.faq-item {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.faq-item[open] {
  border-color: var(--color-primary-light);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
  color: var(--color-on-surface);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: 'add';
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  color: var(--color-primary-dark);
  flex-shrink: 0;
  transition: transform var(--transition-slow);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-on-surface-variant);
}

/* ─── Breadcrumb (подстраници услуги) ─── */
.breadcrumb {
  margin-bottom: var(--space-md);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--font-label-sm-size);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-on-surface-variant);
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  color: var(--color-outline);
}

.breadcrumb a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-on-surface-variant);
}

/* ─── Related services (кръстосано свързване между подстраниците) ─── */
.related-services {
  margin-top: var(--space-2xl);
  text-align: center;
}

.related-services h2 {
  margin-bottom: var(--space-md);
}

.related-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  text-align: left;
}

.related-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.related-service:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.related-service .material-symbols-outlined {
  color: var(--color-primary-dark);
  font-size: 18px;
  flex-shrink: 0;
}

.related-service--hub {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  border-color: transparent;
}

.related-service--hub .material-symbols-outlined {
  color: var(--color-on-secondary-container);
}

/* ─── Responsive Components ─── */
@media (max-width: 1024px) {
  /* Брандът заема целия горен ред, менюто и контактите – под него */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  /* Под 768px: скрий inline навигацията и CTA, покажи бутона-меню */
  .nav-desktop,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .header-inner {
    padding: var(--space-sm) var(--space-md);
    padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* По-нисък crest + по-малък отстъп на тесни екрани */
  .footer-crest {
    height: 46px;
  }

  .site-footer {
    padding-top: calc(46px + var(--space-md));
  }

  .site-footer::before {
    width: 240px;
    height: 240px;
    right: -80px;
    bottom: -70px;
  }

  /* CTA картата се центрира и бутонът става цял ред */
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-md);
  }

  .footer-cta .btn-primary {
    width: 100%;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .quick-contact-card {
    padding: var(--space-md);
  }

  .center-card {
    padding: var(--space-md);
  }

  .center-card__links .btn {
    width: 100%;
  }
}