/* Modal Fixes for SVBookings */

/* Ensure Bootstrap modals have proper z-index layering */
.modal {
    z-index: 9999 !important; /* Highest possible z-index to ensure top-level display */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-backdrop {
    z-index: 9998 !important; /* Just below modal but above all other content */
}

/* Perfect center alignment for modal dialog */
.modal-dialog {
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 1rem !important;
}

/* Ensure modal content is clickable and properly styled */
.modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Fix modal header styling */
.modal-header {
    background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(184,134,11,0.1)) !important;
    border-bottom: 1px solid rgba(212,175,55,0.3) !important;
    color: var(--text-primary) !important;
    padding: var(--spacing-lg) !important;
}

/* Ensure modal body and title are properly styled */
.modal-body,
.modal-title {
    color: var(--text-primary) !important;
}

/* Fix modal footer */
.modal-footer {
    background: rgba(26,26,26,0.8) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: var(--spacing-lg) !important;
}

/* Ensure buttons in modal are clickable */
.modal .btn {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Fix close button */
.modal .btn-close {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    opacity: 0.8 !important;
    font-size: 1.25rem !important;
    position: relative !important;
    z-index: 3 !important;
}

.modal .btn-close:hover {
    opacity: 1 !important;
    color: var(--primary-accent-gold) !important;
}

/* Ensure modal is perfectly centered and responsive */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 800px !important;
        width: 100% !important;
    }
}

/* Fix any potential overlay issues */
.modal.show {
    display: block !important;
}

.modal.show .modal-dialog {
    transform: none !important;
}

/* Ensure modal backdrop is properly positioned */
.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Fix for any potential scrolling issues */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Ensure all interactive elements in modal are accessible */
.modal button,
.modal input,
.modal select,
.modal textarea,
.modal a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Perfect centering for small screens */
@media (max-width: 575px) {
    .modal-dialog {
        padding: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
        width: 100% !important;
    }
    
    .modal-content {
        border-radius: var(--border-radius) !important;
        width: 100% !important;
    }
}