/**
 * Custom styling for SweetAlert2 to match the system's design
 */

/* Ensure SweetAlert2 always appears on top of everything */
.swal2-container {
    z-index: 99999 !important; /* Extremely high z-index to ensure it's above all other elements */
    position: fixed !important;
}

/* Make sure the backdrop covers everything */
.swal2-container.swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.4) !important;
    z-index: 99998 !important;
}

/* Apply Poppins font to all SweetAlert2 elements */
.swal2-popup {
    font-family: 'Poppins', sans-serif !important;
    border-radius: 8px !important;
    animation-duration: 0.3s !important;
    position: relative !important;
    z-index: 99999 !important; /* Even higher z-index for the popup itself */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.swal2-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    color: var(--primary-color, #333) !important;
}

.swal2-html-container, 
.swal2-content {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    color: #555 !important;
}

/* Style buttons to match system buttons */
/* .swal2-confirm, 
.swal2-cancel, 
.swal2-deny {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    text-transform: none !important;
    padding: 8px 16px !important;
} */

/* Improve button spacing */
.swal2-actions {
    gap: 12px !important; /* Add space between buttons */
    margin: 1.5em auto 0 !important; /* Increase top margin */
}

/* Custom styling for buttons when not using Bootstrap classes */
.swal2-styled.swal2-confirm:not(.btn) {
    background-color: var(--primary-color, #3085d6) !important;
    min-width: 100px !important; /* Ensure minimum button width */
}

.swal2-styled.swal2-cancel:not(.btn) {
    background-color: #6c757d !important;
    min-width: 100px !important; /* Ensure minimum button width */
}

.swal2-styled.swal2-deny:not(.btn) {
    background-color: var(--secondary-color, #dc3545) !important;
    min-width: 100px !important; /* Ensure minimum button width */
}

/* Fix icon animations and styling */
.swal2-icon {
    margin: 1.5em auto 0.6em !important;
    transform: scale(1) !important;
    animation: none !important;
    border-width: 3px !important;
    /* height: 4em !important;
    width: 4em !important; */
    position: relative !important;
}

/* Disable specific icon animations */
.swal2-icon-content {
    animation: none !important;
}



/* Custom icon colors to match system theme */
.swal2-icon.swal2-success {
    border-color: var(--primary-color, #a5dc86) !important;
    color: var(--primary-color, #a5dc86) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--secondary-color, #f27474) !important;
    color: var(--secondary-color, #f27474) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--additional-color, #f8bb86) !important;
    color: var(--additional-color, #f8bb86) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--second-additional-color, #3fc3ee) !important;
    color: var(--second-additional-color, #3fc3ee) !important;
}

.swal2-icon.swal2-question {
    border-color: var(--primary-color, #87adbd) !important;
    color: var(--primary-color, #87adbd) !important;
}

/* Responsive adjustments */
@media (max-width: 500px) {
    .swal2-popup {
        width: 90% !important;
        padding: 15px !important;
    }
    
    .swal2-title {
        font-size: 20px !important;
    }
    
    .swal2-html-container {
        font-size: 14px !important;
    }
    
    .swal2-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .swal2-styled {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* .swal2-icon {
        height: 3em !important;
        width: 3em !important;
        margin: 1em auto 0.5em !important;
    } */
}