/* Overlay styles */
.sx-lightbox-overlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dark transparent background */
    z-index: 9999; /* Ensure it's on top of most elements */
    overflow: auto; /* Add scroll if content is too large */
    cursor: pointer; /* Indicates background is clickable */
}

/* Content container styles - EZT MÓDOSÍTOTTUK */
.sx-lightbox-content {
    position: absolute; /* Abszolút pozícionálás */
    top: 50%; /* A felső széle kerüljön a viewport közepére */
    left: 50%; /* A bal széle kerüljön a viewport közepére */
    transform: translate(-50%, -50%); /* Ezzel a saját méretének felével visszatoljuk, így kerül pontosan középre */

    max-width: 90%; /* Max szélesség a reszponzivitásért */
    max-height: 90vh; /* Max magasság a viewport magasságának 90%-a */
    width: auto; /* A szélesség legyen automatikus, hogy a max-width és max-height jól működjön együtt */
    height: auto; /* A magasság legyen automatikus */

    /* Megtartjuk a korábbi stílusokat */
    background: #fff; /* Opcionális: háttérszín a tartalom területének */
    padding: 20px; /* Kitöltés a videó körül */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    box-sizing: border-box; /* A padding beleszámítódjon a méretbe */
    cursor: default; /* Az egér kurzor visszaállítása alapértelmezettre a tartalmon belül */

    /* Ezt a sort távolítottuk el, mert már nem kell a centeringhez: */
    /* margin: 50px auto; */
}

/* Video element styles - Nincs változás */
.sx-lightbox-content video {
    display: block; /* Eltávolítja az extra helyet a videó alatt */
    width: 100%; /* Kitölti a konténer szélességét */
    height: auto; /* Megőrzi a képarányt */
    max-width: 100%; /* Biztosítja, hogy ne lógjon ki */
    max-height: 100%; /* Biztosítja, hogy ne lógjon ki */
}

/* Close button styles - Nincs változás */
.sx-lightbox-close {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000; /* Biztosítja, hogy a videó felett legyen */
    line-height: 1; /* Jobb vertikális igazítás a 'x' karakterhez */
    padding: 5px 15px 7px; /* Könnyebben kattinthatóvá teszi */
    background: rgba(255, 255, 255, 1); /* Opcionális: áttetsző háttér */
    border-radius: 3px;
}

.sx-lightbox-close:hover,
.sx-lightbox-close:focus {
    color: #000;
    background: rgba(255, 255, 255, 0.8);
}

/* Style the trigger image slightly if needed - Nincs változás */
.sx-lightbox-container img.sx-lightbox-trigger {
    max-width: 100%; /* Biztosítja, hogy a kép reszponzív legyen */
    height: auto;
}