/* ==========================================================================
   kb-sticky-x.css
   X peste tot = locul din poza galerie (deasupra pozei, inset față de dreapta).
   ========================================================================== */

:root {
  /* ~140px pe desktop lat; pe mobil mai aproape de margine */
  --kb-x-top: calc(var(--site-header-height, 9.5rem) + 1cm + 0.2rem);
  --kb-x-right: clamp(3.25rem, 13.8vw, 9rem);
  --kb-sticky-x-top-page: var(--kb-x-top);
}

/* —— Pagini laterale (legal, galerie cat, kurse) —— */
.kb-gal-cat__close,
#kurse-flow.kb-kf-page .kb-kf-page-close,
.kb-kf-page-close,
.kb-legal-close {
  position: fixed !important;
  top: var(--kb-x-top) !important;
  right: var(--kb-x-right) !important;
  left: auto !important;
  z-index: 480 !important;
  margin: 0 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  box-shadow: 0 4px 14px rgba(41, 28, 58, 0.12) !important;
}

/* Când e deschisă o imagine: ascunde X-ul de layout */
body:has(#kb-gal-work-modal) .kb-gal-cat__close,
body:has(.kb-gal-work-modal) .kb-gal-cat__close,
body:has(#kb-kf-lightbox) .kb-gal-cat__close,
body:has(#kb-kf-lightbox) #kurse-flow.kb-kf-page .kb-kf-page-close,
body:has(#kb-kf-lightbox) .kb-kf-page-close,
body:has(#galerie-work-modal) .kb-gal-cat__close,
body:has(#galerie-category-modal) .kb-gal-cat__close,
body:has(#kontakt-modal) .kb-gal-cat__close,
body:has(#vita-modal) .kb-gal-cat__close,
body:has(#service-modal) .kb-gal-cat__close,
body:has(#kontakt-modal) #kurse-flow.kb-kf-page .kb-kf-page-close,
body:has(#vita-modal) #kurse-flow.kb-kf-page .kb-kf-page-close,
body:has(#service-modal) #kurse-flow.kb-kf-page .kb-kf-page-close,
body:has(#kontakt-modal) .kb-legal-close,
body:has(#vita-modal) .kb-legal-close {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* —— Modal Kontakt / Vita / Service / Kurse / etc. —— */
#kontakt-modal .kb-kontakt-modal-close,
#vita-modal .kb-vita-modal-close,
#service-modal .kb-modal-close,
#kurse-modal .kb-modal-close,
#kursprogramm-modal .kb-modal-close,
#kurse-picker-modal .kb-modal-close,
#kurse-gallery-modal .kb-modal-close,
#galerie-category-modal .kb-modal-close,
#galerie-work-modal .kb-modal-close,
#galerie-category-modal .galerie-cat-close,
#galerie-work-modal .galerie-work-close,
#kb-einblick-lightbox .kb-modal-close,
.kb-einblick-lightbox .kb-modal-close,
.kb-modal-close--overlay {
  position: fixed !important;
  top: var(--kb-x-top) !important;
  right: var(--kb-x-right) !important;
  left: auto !important;
  z-index: 700 !important;
  margin: 0 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  box-shadow: 0 4px 14px rgba(41, 28, 58, 0.14) !important;
}

/* —— Imagine Galerie + Kurse lightbox: ACELAȘI loc —— */
.kb-gal-work-modal__close,
.kb-gal-work-modal .kb-gal-work-modal__close,
#kb-gal-work-modal .kb-gal-work-modal__close,
.kb-kf-lb__btn--close {
  position: fixed !important;
  top: var(--kb-x-top) !important;
  right: var(--kb-x-right) !important;
  left: auto !important;
  z-index: 720 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin: 0 !important;
  align-self: auto !important;
  box-shadow: 0 4px 14px rgba(41, 28, 58, 0.12) !important;
}

.kb-modal-chrome {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

.kb-gal-work-modal .kb-gal-work-modal__zoom,
.kb-gal-work-modal__media-wrap .kb-gal-work-modal__zoom {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 30 !important;
}