/* ═══════════ MODAL WIDTH CONTROL ═══════════ */
/* Leave a tiny gap from screen edges */
.modal-dialog {
    max-width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.modal-dialog.modal-sm {
    max-width: min(98%, 550px) !important;
}

.modal-dialog.modal-lg {
    max-width: min(98%, 950px) !important;
}

.modal-dialog.modal-xl {
    max-width: min(98%, 1300px) !important;
}

/* On larger screens */
@media (min-width: 768px) {
    .modal-dialog {
        max-width: 96% !important;
    }
    .modal-dialog.modal-lg {
        max-width: min(96%, 950px) !important;
    }
    .modal-dialog.modal-xl {
        max-width: min(96%, 1300px) !important;
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        max-width: 750px !important;
    }
    .modal-dialog.modal-lg {
        max-width: 950px !important;
    }
    .modal-dialog.modal-xl {
        max-width: 1300px !important;
    }
}

/* ═══════════ MODAL BACKDROP ═══════════ */
/* Hide the default Bootstrap backdrop */
.modal-backdrop {
    display: none !important;
}

/* Apply foggy blur effect on the modal overlay itself */
.modal {
    background: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

/* ═══════════ MODAL CLOSE BUTTON ═══════════ */
/* Fix close button position — add padding from edge */
.modal-header .btn-close {
    margin: 0 !important;
    padding: 0.75rem !important;
}

.modal-header {
    padding: 1rem 1.25rem !important;
}