/* Modal fixes for mobile display */

/* Ensure the modal is above everything else */
.modal {
    z-index: 99999 !important;
}

.modal-backdrop {
    z-index: 99999 !important;
}

/* Fix image sizing on mobile */
@media (max-width: 768px) {
    .modal-image {
        max-width: 85% !important;
        max-height: 50vh !important;
        width: auto !important;
    }
    
    .modal-close {
        position: fixed !important;
        top: 80px !important;
        right: 15px !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
        z-index: 999999 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    }
    
    .modal-backdrop {
        padding-top: 80px !important;
    }
}

/* Override the conflicting styles from styles.css */
body.modal-open {
    overflow: hidden !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}