.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Styl dla obrazu, aby zachował proporcje */
    .image-container img {
        object-fit: contain; /* Kluczowa właściwość: skaluje obraz, aby zmieścił się w kontenerze bez przycinania */
        width: 100%;
        height: 100%;
        max-height: 60vh; /* Ograniczenie maksymalnej wysokości obrazu */
    }

.comment-options {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}


.comment-actions button {
    text-decoration: none;
}

    .comment-actions button:hover {
        text-decoration: underline;
    }

.card:hover {
    transform: translateY(0) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}
.modal-backdrop {
    background-color: transparent;
}

.modal-dialog.modal-90-percent {
    max-width: 90vw; /* 90% szerokości widoku */
    max-height: 90vh; /* 90% wysokości widoku */
    margin: auto; /* Wyśrodkowanie poziome */
    top: 5vh; /* Wyśrodkowanie pionowe (100vh - 90vh) / 2 = 5vh od góry */
    position: relative; /* Upewnia się, że top/margin działają poprawnie */
}

    .modal-dialog.modal-90-percent .modal-content {
        height: 100%; /* Sprawia, że zawartość wypełnia dialog */
    }

#modalImage {
    max-width: 85%; /* 85% szerokości rodzica (modal-body) */
    max-height: 85%; /* 85% wysokości rodzica (modal-body) */
    object-fit: contain; /* Zachowuje proporcje i dopasowuje obraz wewnątrz granic */
}