/**
 * Visitor Photo Modal Fix
 * Removes blur effects from visitor photo modals
 */

/* Remove blur from all modal backdrops */
.modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure the image preview modal has proper styling without blur */
#imagePreviewModal {
    z-index: 10070 !important;
}

#imagePreviewModal .modal-dialog {
    z-index: 10071 !important;
}

#imagePreviewModal .modal-content {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Hide scanner overlay when modal is shown */
.modal-open .barcode-scanner-overlay,
.modal-open .scanner-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure modal content is fully opaque */
.modal-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* Override any inherited blur effects */
.modal,
.modal *,
.modal-dialog,
.modal-dialog * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* Improve modal appearance */
#imagePreviewModal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

#imagePreviewModal .modal-title {
    font-weight: 600;
    color: #333;
}

#imagePreviewModal .modal-body {
    padding: 2rem;
    background-color: #fafafa;
}

#imagePreviewModal .close {
    opacity: 0.6;
    transition: opacity 0.2s;
}

#imagePreviewModal .close:hover {
    opacity: 1;
}

/* Enhanced image display */
#fullSizeImage {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Smooth modal animations */
#imagePreviewModal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

#imagePreviewModal.show .modal-dialog {
    transform: none;
}

/* Dark backdrop without blur */
.modal-backdrop.show {
    opacity: 0.7 !important;
    background-color: #000 !important;
}