.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Extremely high to ensure top layer */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: #000000; /* Fully opaque black */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.modal-content {
    max-width: 80%; /* Constrain width */
    max-height: 80%; /* Constrain height */
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow for visibility */
}

body.modal-open {
    overflow: hidden; /* Prevent scrolling */
    position: fixed; /* Extra for mobile/iOS to lock position */
    width: 100%; /* Prevent width changes */
}