/* /css/modal.css */

/*
 * Fix for Bootstrap Modal z-index conflict with custom backdrop-filter styles.
 * We force the backdrop to a lower z-index and the modal to a higher one.
 */

/* The dark background overlay */
.modal-backdrop {
    /*
     * Use theme variables for the backdrop color.
     * Default BS is 0.5, this is a bit darker to match the "glass" feel.
     */
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.6;
    
    /* * THE FIX: Force the backdrop to a z-index *below* the modal dialog.
     * Default is 1050.
     */
    z-index: 1050;
}

/* The modal dialog (the box itself) */
.modal-dialog {
    /* * THE FIX: Force the dialog to a z-index *above* the backdrop.
     * Default is 1055, but we make it explicit.
     */
    z-index: 1055;
}

/* * Style the modal content to match your card-glass theme directly,
 * rather than using the class, as this gives more control.
 */
.modal-content {
    -webkit-backdrop-filter: blur(20px); 
    backdrop-filter: blur(20px); 
    background-color: var(--apple-card-bg); 
    border: 1px solid var(--apple-card-border); 
    border-radius: 1rem; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Ensure modal text uses the correct theme color */
    color: var(--apple-text-color);
}

/* Style header/footer elements */
.modal-header,
.modal-footer {
    border-color: var(--apple-card-border);
}

/* Style the 'X' close button */
.modal-header .btn-close {
    /* This filter inverts the button color based on the theme */
    filter: var(--bs-btn-close-white-filter);
}