/* ============================
   LIGHTBOX CONTAINER
   ============================ */
#sel-lightbox {
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.85);

  display: none;
  justify-content: center;
  align-items: center;

  /* MUST be above Elementor overlays */
  z-index: 999999999 !important;
}


/* ============================
   LIGHTBOX IMAGE
   ============================ */
#sel-lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;

  position: relative; /* Needed for the close button */
  z-index: 999999998;
}


/* ============================
   CLOSE BUTTON (inside picture)
   ============================ */
#sel-lightbox-close {
  position: absolute;

  /* Position ON the picture */
  top: calc(50% - 45vh);      /* top aligned inside image */
  right: calc(50% - 45vw);    /* right aligned inside image */

  /* Button styling */
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.75);
  color: white;
  font-size: 26px;
  border-radius: 8px;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  user-select: none;

  /* MUST be above image */
  z-index: 999999999 !important;
}

#sel-lightbox-close:hover {
  background: rgba(0,0,0,0.9);
}


/* ============================
   FULLSCREEN ICON ON IMAGE
   ============================ */
.sel-fullscreen-wrapper {
  position: relative;
  display: inline-block;
  z-index: 9999;
}

.sel-fullscreen-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;

  width: 36px;
  height: 36px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;

  z-index: 999999;
  pointer-events: auto;
}

.sel-fullscreen-icon:hover {
  background: rgba(0,0,0,0.85);
}