/* Modal Close Button Fix for Bootstrap 5 */
.modal-header .btn-close {
    position: relative;
    z-index: 1060;
    cursor: pointer;
    pointer-events: auto;
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

.modal-header .btn-close:hover {
    opacity: 0.75;
}

.modal-header .btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    opacity: 1;
}

/* Ensure modal header has proper positioning */
.modal-header {
    position: relative;
    z-index: 1050;
}

/* Fix for any overlapping elements */
.modal-content {
    position: relative;
    z-index: 1050;
}

/* Ensure backdrop doesn't interfere with close button */
.modal-backdrop {
    z-index: 1040;
}

/* Fix for any custom close buttons */
.close, .btn-close {
    position: relative;
    z-index: 1060;
    cursor: pointer;
    pointer-events: auto;
}

/* Ensure proper spacing and clickability */
.modal-header .btn-close {
    margin: -0.5rem -0.5rem -0.5rem auto;
    padding: 0.5rem;
    min-width: 2rem;
    min-height: 2rem;
}